LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-12-01 16:51:13 +00:00
Code Issues Projects Releases Wiki Activity

handle embedded iframe content better

Browse source
This commit is contained in:
Alec Armbruster 2023-06-25 11:01:40 -04:00
parent d1404f3228
commit 462c7ab748
No known key found for this signature in database
GPG key ID: 52BC7C84E960FD1B
2 changed files with 18 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/shared/components/post/metadata-card.tsx
View file

@ -1,8 +1,7 @@
import { Component, linkEvent } from "inferno"; import { Component } from "inferno";
import { Post } from "lemmy-js-client"; import { Post } from "lemmy-js-client";
import * as sanitizeHtml from "sanitize-html"; import * as sanitizeHtml from "sanitize-html";
import { relTags } from "../../config"; import { relTags } from "../../config";
import { I18NextService } from "../../services";
import { Icon } from "../common/icon"; import { Icon } from "../common/icon";
interface MetadataCardProps { interface MetadataCardProps {
@ -17,10 +16,6 @@ export class MetadataCard extends Component<
MetadataCardProps, MetadataCardProps,
MetadataCardState MetadataCardState
> { > {
state: MetadataCardState = {
expanded: false,
};
constructor(props: any, context: any) { constructor(props: any, context: any) {
super(props, context); super(props, context);
} }
@ -29,7 +24,7 @@ export class MetadataCard extends Component<
const post = this.props.post; const post = this.props.post;
return ( 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="post-metadata-card card border-secondary mt-3 mb-2">
<div className="row"> <div className="row">
<div className="col-12"> <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>
</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 });
}
} }

17
src/shared/components/post/post-listing.tsx
View file

@ -262,6 +262,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
const { post } = this.postView; const { post } = this.postView;
const { url } = post; const { url } = post;
// if direct video link
if (url && isVideo(url)) { if (url && isVideo(url)) {
return ( return (
<div className="embed-responsive mt-3"> <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 <></>; return <></>;
} }
@ -338,7 +353,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</a> </a>
); );
} else if (url) { } else if (url) {
if (!this.props.hideImage && isVideo(url)) { if ((!this.props.hideImage && isVideo(url)) || post.embed_video_url) {
return ( return (
<a <a
className="text-body" className="text-body"