src/shared/components/post/metadata-card.tsx

   1 import { Component, linkEvent } from "inferno";
   2 import { Post } from "lemmy-js-client";
   3 import * as sanitizeHtml from "sanitize-html";
   4 import { i18n } from "../../i18next";
   5 import { relTags } from "../../utils";
   6 import { Icon } from "../common/icon";
   7
   8 interface MetadataCardProps {
   9   post: Post;
  10 }
  11
  12 interface MetadataCardState {
  13   expanded: boolean;
  14 }
  15
  16 export class MetadataCard extends Component<
  17   MetadataCardProps,
  18   MetadataCardState
  19 > {
  20   state: MetadataCardState = {
  21     expanded: false,
  22   };
  23
  24   constructor(props: any, context: any) {
  25     super(props, context);
  26   }
  27
  28   render() {
  29     const post = this.props.post;
  30     return (
  31       <>
  32         {!this.state.expanded && post.embed_title && post.url && (
  33           <div className="post-metadata-card card border-secondary mt-3 mb-2">
  34             <div className="row">
  35               <div className="col-12">
  36                 <div className="card-body">
  37                   {post.name !== post.embed_title && (
  38                     <>
  39                       <h5 className="card-title d-inline">
  40                         <a className="text-body" href={post.url} rel={relTags}>
  41                           {post.embed_title}
  42                         </a>
  43                       </h5>
  44                       <span className="d-inline-block ms-2 mb-2 small text-muted">
  45                         <a
  46                           className="text-muted font-italic"
  47                           href={post.url}
  48                           rel={relTags}
  49                         >
  50                           {new URL(post.url).hostname}
  51                           <Icon icon="external-link" classes="ms-1" />
  52                         </a>
  53                       </span>
  54                     </>
  55                   )}
  56                   {post.embed_description && (
  57                     <div
  58                       className="card-text small text-muted md-div"
  59                       dangerouslySetInnerHTML={{
  60                         __html: sanitizeHtml(post.embed_description),
  61                       }}
  62                     />
  63                   )}
  64                   {post.embed_video_url && (
  65                     <button
  66                       className="mt-2 btn btn-secondary text-monospace"
  67                       onClick={linkEvent(this, this.handleIframeExpand)}
  68                     >
  69                       {i18n.t("expand_here")}
  70                     </button>
  71                   )}
  72                 </div>
  73               </div>
  74             </div>
  75           </div>
  76         )}
  77         {this.state.expanded && post.embed_video_url && (
  78           <iframe
  79             className="post-metadata-iframe"
  80             src={post.embed_video_url}
  81           ></iframe>
  82         )}
  83       </>
  84     );
  85   }
  86
  87   handleIframeExpand(i: MetadataCard) {
  88     i.setState({ expanded: !i.state.expanded });
  89   }
  90 }