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

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