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