Merge pull request #1586 from LemmyNet/feature/handle-video-iframes-better

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

@@ -1,8 +1,7 @@
-import { Component, linkEvent } from "inferno";
+import { Component } from "inferno";
 import { Post } from "lemmy-js-client";
 import * as sanitizeHtml from "sanitize-html";
 import { relTags } from "../../config";
-import { I18NextService } from "../../services";
 import { Icon } from "../common/icon";
 
 interface MetadataCardProps {
@@ -17,10 +16,6 @@ export class MetadataCard extends Component<
   MetadataCardProps,
   MetadataCardState
 > {
-  state: MetadataCardState = {
-    expanded: false,
-  };
-
   constructor(props: any, context: any) {
     super(props, context);
   }
@@ -29,7 +24,7 @@ export class MetadataCard extends Component<
     const post = this.props.post;
     return (
       <>
-        {!this.state.expanded && post.embed_title && post.url && (
+        {post.embed_title && post.url && (
           <div className="post-metadata-card card border-secondary mt-3 mb-2">
             <div className="row">
               <div className="col-12">
@@ -61,34 +56,12 @@ export class MetadataCard extends Component<
                       }}
                     />
                   )}
-                  {post.embed_video_url && (
-                    <button
-                      className="mt-2 btn btn-secondary text-monospace"
-                      onClick={linkEvent(this, this.handleIframeExpand)}
-                    >
-                      {I18NextService.i18n.t("expand_here")}
-                    </button>
-                  )}
                 </div>
               </div>
             </div>
           </div>
         )}
-        {this.state.expanded && post.embed_video_url && (
-          <div className="ratio ratio-16x9">
-            <iframe
-              allowFullScreen
-              className="post-metadata-iframe"
-              src={post.embed_video_url}
-              title={post.embed_title}
-            ></iframe>
-          </div>
-        )}
       </>
     );
   }
-
-  handleIframeExpand(i: MetadataCard) {
-    i.setState({ expanded: !i.state.expanded });
-  }
 }

src/shared/components/post/post-listing.tsx

@@ -262,6 +262,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const { post } = this.postView;
     const { url } = post;
 
+    // if direct video link
     if (url && isVideo(url)) {
       return (
         <div className="embed-responsive mt-3">
@@ -272,6 +273,20 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
       );
     }
 
+    // if embedded video link
+    if (url && post.embed_video_url) {
+      return (
+        <div className="ratio ratio-16x9">
+          <iframe
+            allowFullScreen
+            className="post-metadata-iframe"
+            src={post.embed_video_url}
+            title={post.embed_title}
+          ></iframe>
+        </div>
+      );
+    }
+
     return <></>;
   }
 
@@ -338,7 +353,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         </a>
       );
     } else if (url) {
-      if (!this.props.hideImage && isVideo(url)) {
+      if ((!this.props.hideImage && isVideo(url)) || post.embed_video_url) {
         return (
           <a
             className="text-body"