LemmyNet
/
lemmy-ui
mirror of https://github.com/LemmyNet/lemmy-ui.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Store volume level on window object (#2307) 

* Store volume level on window object

* Store volume level on localStorage, instead of window object

* Refactor video event handlers in PostListing component

* Take `muted` prop into account while storing volume level

* fix

* simplify logic
This commit is contained in:
İsmail Karslı 2024-01-03 21:30:32 +03:00 committed by GitHub
parent 22f2b47243
commit 0bd26aa568
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintrc.json
View File

@ -44,6 +44,7 @@
"prefer-rest-params": 0,
"prettier/prettier": "error",
"quote-props": 0,
"unicorn/filename-case": 0
"unicorn/filename-case": 0,
"jsx-a11y/media-has-caption": 0
}
}

32
src/shared/components/post/post-listing.tsx
View File

@ -128,10 +128,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
componentDidMount(): void {
if (UserService.Instance.myUserInfo) {
const { auto_expand, blur_nsfw } = UserService.Instance.myUserInfo.local_user_view.local_user;
const { auto_expand, blur_nsfw } =
UserService.Instance.myUserInfo.local_user_view.local_user;
this.setState({
imageExpanded:
auto_expand && !(blur_nsfw && this.postView.post.nsfw),
imageExpanded: auto_expand && !(blur_nsfw && this.postView.post.nsfw),
});
}
}
@ -214,7 +214,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
if (url && isVideo(url)) {
return (
<div className="embed-responsive ratio ratio-16x9 mt-3">
<video muted controls className="embed-responsive-item col-12">
<video
onLoadStart={linkEvent(this, this.handleVideoLoadStart)}
onPlay={linkEvent(this, this.handleVideoLoadStart)}
onVolumeChange={linkEvent(this, this.handleVideoVolumeChange)}
controls
className="embed-responsive-item col-12"
>
<source src={url} type="video/mp4" />
</video>
</div>
@ -766,6 +772,24 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
this.setState({ showEdit: false });
}
handleVideoLoadStart(_i: PostListing, e: Event) {
const video = e.target as HTMLVideoElement;
const volume = localStorage.getItem("video_volume_level");
const muted = localStorage.getItem("video_muted");
video.volume = Number(volume || 0);
video.muted = muted !== "false";
if (!(volume || muted)) {
localStorage.setItem("video_muted", "true");
localStorage.setItem("volume_level", "0");
}
}
handleVideoVolumeChange(_i: PostListing, e: Event) {
const video = e.target as HTMLVideoElement;
localStorage.setItem("video_muted", video.muted.toString());
localStorage.setItem("video_volume_level", video.volume.toString());
}
// The actual editing is done in the receive for post
handleEditPost(form: EditPost) {
this.setState({ showEdit: false });