LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-22 20:31:13 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
SleeplessOne1917 2023-06-25 15:52:08 +00:00 committed by GitHub
commit 35071d2bec
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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 * 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 });
}
}

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 { 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"