src/shared/components/iframely-card.tsx

   1 import { Component, linkEvent } from "inferno";
   2 import { Post } from "lemmy-js-client";
   3 import { mdToHtml } from "../utils";
   4 import { i18n } from "../i18next";
   5 import { Icon } from "./icon";
   6
   7 interface FramelyCardProps {
   8   post: Post;
   9 }
  10
  11 interface FramelyCardState {
  12   expanded: boolean;
  13 }
  14
  15 export class IFramelyCard extends Component<
  16   FramelyCardProps,
  17   FramelyCardState
  18 > {
  19   private emptyState: FramelyCardState = {
  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="noopener">
  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="noopener"
  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={mdToHtml(post.embed_description)}
  58                     />
  59                   )}
  60                   {post.embed_html && (
  61                     <button
  62                       class="mt-2 btn btn-secondary text-monospace"
  63                       onClick={linkEvent(this, this.handleIframeExpand)}
  64                       data-tippy-content={i18n.t("expand_here")}
  65                     >
  66                       {this.state.expanded ? "-" : "+"}
  67                     </button>
  68                   )}
  69                 </div>
  70               </div>
  71             </div>
  72           </div>
  73         )}
  74         {this.state.expanded && (
  75           <div
  76             class="mt-3 mb-2"
  77             dangerouslySetInnerHTML={{ __html: post.embed_html }}
  78           />
  79         )}
  80       </>
  81     );
  82   }
  83
  84   handleIframeExpand(i: IFramelyCard) {
  85     i.state.expanded = !i.state.expanded;
  86     i.setState(i.state);
  87   }
  88 }