From 462c7ab74819a64aa2cc1f83622a19278c3a018e Mon Sep 17 00:00:00 2001 From: Alec Armbruster <35377827+alectrocute@users.noreply.github.com> Date: Sun, 25 Jun 2023 11:01:40 -0400 Subject: [PATCH] handle embedded iframe content better --- src/shared/components/post/metadata-card.tsx | 31 ++------------------ src/shared/components/post/post-listing.tsx | 17 ++++++++++- 2 files changed, 18 insertions(+), 30 deletions(-) diff --git a/src/shared/components/post/metadata-card.tsx b/src/shared/components/post/metadata-card.tsx index 2d770d4..a1ddca7 100644 --- a/src/shared/components/post/metadata-card.tsx +++ b/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 }); - } } diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx index e5694fa..092e253 100644 --- a/src/shared/components/post/post-listing.tsx +++ b/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" -- 2.44.1