LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-12-23 03:11:25 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1479 from alectrocute/fix-video-embeds-on-posts

Browse source
This commit is contained in:
SleeplessOne1917 2023-06-22 19:13:38 +00:00 committed by GitHub
commit f5b958f884
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 46 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -239,7 +239,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
}
get img() {
return this.imageSrc ? (
if (this.imageSrc) {
return (
<>
<div className="offset-sm-3 my-2 d-none d-sm-block">
<a href={this.imageSrc} className="d-inline-block">
@ -255,11 +256,25 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</a>
</div>
</>
) : (
<></>
);
}
const { post } = this.postView;
const { url } = post;
if (url && isVideo(url)) {
return (
<div className="embed-responsive mt-3">
<video muted controls className="embed-responsive-item col-12">
<source src={url} type="video/mp4" />
</video>
</div>
);
}
return <></>;
}
imgThumb(src: string) {
const post_view = this.postView;
return (
@ -325,17 +340,19 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
} else if (url) {
if (!this.props.hideImage && isVideo(url)) {
return (
<div className="embed-responsive embed-responsive-16by9">
<video
playsInline
muted
loop
controls
className="embed-responsive-item"
<a
className="text-body"
href={url}
title={url}
rel={relTags}
data-tippy-content={I18NextService.i18n.t("expand_here")}
onClick={linkEvent(this, this.handleImageExpandClick)}
aria-label={I18NextService.i18n.t("expand_here")}
>
<source src={url} type="video/mp4" />
</video>
<div className="thumbnail rounded bg-light d-flex justify-content-center">
<Icon icon="play" classes="d-flex align-items-center" />
</div>
</a>
);
} else {
return (