fedi/lemmy-ui
1
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-21 22:27:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Store volume level on window object (#2307)

Browse source 
* 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, "prefer-rest-params": 0,
"prettier/prettier": "error", "prettier/prettier": "error",
"quote-props": 0, "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 { componentDidMount(): void {
if (UserService.Instance.myUserInfo) { 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({ this.setState({
imageExpanded: imageExpanded: auto_expand && !(blur_nsfw && this.postView.post.nsfw),
auto_expand && !(blur_nsfw && this.postView.post.nsfw),
}); });
} }
} }
@ -214,7 +214,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
if (url && isVideo(url)) { if (url && isVideo(url)) {
return ( return (
<div className="embed-responsive ratio ratio-16x9 mt-3"> <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" /> <source src={url} type="video/mp4" />
</video> </video>
</div> </div>
@ -766,6 +772,24 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
this.setState({ showEdit: false }); 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 // The actual editing is done in the receive for post
handleEditPost(form: EditPost) { handleEditPost(form: EditPost) {
this.setState({ showEdit: false }); this.setState({ showEdit: false });