component classes v2

[lemmy-ui.git] / src / shared / components / post / metadata-card.tsx

diff --git a/src/shared/components/post/metadata-card.tsx b/src/shared/components/post/metadata-card.tsx
index 85fcdb672556f07e91c611de3ad2d28845c49e0c..e6a864af6afb62620b39ac2b5757cbb50424301e 100644 (file)
--- a/src/shared/components/post/metadata-card.tsx
+++ b/src/shared/components/post/metadata-card.tsx
@@ -1,6 +1,8 @@
 import { Component, linkEvent } from "inferno";
 import { Post } from "lemmy-js-client";
+import * as sanitizeHtml from "sanitize-html";
 import { i18n } from "../../i18next";
+import { relTags } from "../../utils";
 import { Icon } from "../common/icon";
 
 interface MetadataCardProps {
@@ -15,56 +17,56 @@ export class MetadataCard extends Component<
   MetadataCardProps,
   MetadataCardState
 > {
-  private emptyState: MetadataCardState = {
+  state: MetadataCardState = {
     expanded: false,
   };
 
   constructor(props: any, context: any) {
     super(props, context);
-    this.state = this.emptyState;
   }
 
   render() {
-    let post = this.props.post;
+    const post = this.props.post;
     return (
       <>
-        {post.embed_title && !this.state.expanded && (
-          <div class="card border-secondary mt-3 mb-2">
-            <div class="row">
-              <div class="col-12">
-                <div class="card-body">
-                  {post.name !== post.embed_title && [
-                    <h5 class="card-title d-inline">
-                      <a class="text-body" href={post.url} rel="noopener">
-                        {post.embed_title}
-                      </a>
-                    </h5>,
-                    <span class="d-inline-block ml-2 mb-2 small text-muted">
-                      <a
-                        class="text-muted font-italic"
-                        href={post.url}
-                        rel="noopener"
-                      >
-                        {new URL(post.url).hostname}
-                        <Icon icon="external-link" classes="ml-1" />
-                      </a>
-                    </span>,
-                  ]}
+        {!this.state.expanded && post.embed_title && post.url && (
+          <div className="post-metadata-card card border-secondary mt-3 mb-2">
+            <div className="row">
+              <div className="col-12">
+                <div className="card-body">
+                  {post.name !== post.embed_title && (
+                    <>
+                      <h5 className="card-title d-inline">
+                        <a className="text-body" href={post.url} rel={relTags}>
+                          {post.embed_title}
+                        </a>
+                      </h5>
+                      <span className="d-inline-block ms-2 mb-2 small text-muted">
+                        <a
+                          className="text-muted font-italic"
+                          href={post.url}
+                          rel={relTags}
+                        >
+                          {new URL(post.url).hostname}
+                          <Icon icon="external-link" classes="ms-1" />
+                        </a>
+                      </span>
+                    </>
+                  )}
                   {post.embed_description && (
                     <div
                       className="card-text small text-muted md-div"
                       dangerouslySetInnerHTML={{
-                        __html: post.embed_description,
+                        __html: sanitizeHtml(post.embed_description),
                       }}
                     />
                   )}
-                  {post.embed_html && (
+                  {post.embed_video_url && (
                     <button
-                      class="mt-2 btn btn-secondary text-monospace"
+                      className="mt-2 btn btn-secondary text-monospace"
                       onClick={linkEvent(this, this.handleIframeExpand)}
-                      data-tippy-content={i18n.t("expand_here")}
                     >
-                      {this.state.expanded ? "-" : "+"}
+                      {i18n.t("expand_here")}
                     </button>
                   )}
                 </div>
@@ -72,18 +74,17 @@ export class MetadataCard extends Component<
             </div>
           </div>
         )}
-        {this.state.expanded && (
-          <div
-            class="mt-3 mb-2"
-            dangerouslySetInnerHTML={{ __html: post.embed_html }}
-          />
+        {this.state.expanded && post.embed_video_url && (
+          <iframe
+            className="post-metadata-iframe"
+            src={post.embed_video_url}
+          ></iframe>
         )}
       </>
     );
   }
 
   handleIframeExpand(i: MetadataCard) {
-    i.state.expanded = !i.state.expanded;
-    i.setState(i.state);
+    i.setState({ expanded: !i.state.expanded });
   }
 }