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         {post.embed_title && !this.state.expanded && (
  33           <div class="card border-secondary mt-3 mb-2">
  34             <div class="row">
  35               <div class="col-12">
  36                 <div class="card-body">
  37                   {post.name !== post.embed_title && [
  38                     <h5 class="card-title d-inline">
  39                       <a class="text-body" href={post.url} rel={relTags}>
  40                         {post.embed_title}
  41                       </a>
  42                     </h5>,
  43                     <span class="d-inline-block ml-2 mb-2 small text-muted">
  44                       <a
  45                         class="text-muted font-italic"
  46                         href={post.url}
  47                         rel={relTags}
  48                       >
  49                         {new URL(post.url).hostname}
  50                         <Icon icon="external-link" classes="ml-1" />
  51                       </a>
  52                     </span>,
  53                   ]}
  54                   {post.embed_description && (
  55                     <div
  56                       className="card-text small text-muted md-div"
  57                       dangerouslySetInnerHTML={{
  58                         __html: post.embed_description,
  59                       }}
  60                     />
  61                   )}
  62                   {post.embed_html && (
  63                     <button
  64                       class="mt-2 btn btn-secondary text-monospace"
  65                       onClick={linkEvent(this, this.handleIframeExpand)}
  66                       data-tippy-content={i18n.t("expand_here")}
  67                     >
  68                       {this.state.expanded ? "-" : "+"}
  69                     </button>
  70                   )}
  71                 </div>
  72               </div>
  73             </div>
  74           </div>
  75         )}
  76         {this.state.expanded && (
  77           <div
  78             class="mt-3 mb-2"
  79             dangerouslySetInnerHTML={{ __html: post.embed_html }}
  80           />
  81         )}
  82       </>
  83     );
  84   }
  85
  86   handleIframeExpand(i: MetadataCard) {
  87     i.state.expanded = !i.state.expanded;
  88     i.setState(i.state);
  89   }
  90 }