ui/src/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
   6 interface FramelyCardProps {
   7   post: Post;
   8 }
   9
  10 interface FramelyCardState {
  11   expanded: boolean;
  12 }
  13
  14 export class IFramelyCard extends Component<
  15   FramelyCardProps,
  16   FramelyCardState
  17 > {
  18   private emptyState: FramelyCardState = {
  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 bg-transparent border-secondary mt-3 mb-2">
  33             <div class="row">
  34               <div class="col-12">
  35                 <div class="card-body">
  36                   <h5 class="card-title d-inline">
  37                     {post.embed_html ? (
  38                       <span
  39                         class="unselectable pointer"
  40                         onClick={linkEvent(this, this.handleIframeExpand)}
  41                         data-tippy-content={i18n.t('expand_here')}
  42                       >
  43                         {post.embed_title}
  44                       </span>
  45                     ) : (
  46                       <span>
  47                         <a
  48                           class="text-body"
  49                           target="_blank"
  50                           href={post.url}
  51                           rel="noopener"
  52                         >
  53                           {post.embed_title}
  54                         </a>
  55                       </span>
  56                     )}
  57                   </h5>
  58                   <span class="d-inline-block ml-2 mb-2 small text-muted">
  59                     <a
  60                       class="text-muted font-italic"
  61                       target="_blank"
  62                       href={post.url}
  63                       rel="noopener"
  64                     >
  65                       {new URL(post.url).hostname}
  66                       <svg class="ml-1 icon">
  67                         <use xlinkHref="#icon-external-link"></use>
  68                       </svg>
  69                     </a>
  70                     {post.embed_html && (
  71                       <span
  72                         class="ml-2 pointer text-monospace"
  73                         onClick={linkEvent(this, this.handleIframeExpand)}
  74                         data-tippy-content={i18n.t('expand_here')}
  75                       >
  76                         {this.state.expanded ? '[-]' : '[+]'}
  77                       </span>
  78                     )}
  79                   </span>
  80                   {post.embed_description && (
  81                     <div
  82                       className="card-text small text-muted md-div"
  83                       dangerouslySetInnerHTML={mdToHtml(post.embed_description)}
  84                     />
  85                   )}
  86                 </div>
  87               </div>
  88             </div>
  89           </div>
  90         )}
  91         {this.state.expanded && (
  92           <div
  93             class="mt-3 mb-2"
  94             dangerouslySetInnerHTML={{ __html: post.embed_html }}
  95           />
  96         )}
  97       </>
  98     );
  99   }
 100
 101   handleIframeExpand(i: IFramelyCard) {
 102     i.state.expanded = !i.state.expanded;
 103     i.setState(i.state);
 104   }
 105 }