mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-01 01:59:56 +00:00
Merge pull request #1586 from LemmyNet/feature/handle-video-iframes-better
This commit is contained in:
commit
35071d2bec
2 changed files with 18 additions and 30 deletions
|
@ -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 });
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in a new issue