From fa4aef73117edcdca6bc0925a2a42ac8e3485833 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=B0smail=20Karsl=C4=B1?= <cszn@pm.me>
Date: Tue, 2 Jan 2024 21:14:49 +0300
Subject: [PATCH 1/6] Store volume level on window object

---
 .eslintrc.json                              |  3 ++-
 src/shared/components/post/post-listing.tsx | 28 ++++++++++++++++++---
 src/shared/interfaces.ts                    |  1 +
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index ea26ba3be..4d0e75628 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -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
   }
 }
diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index f99e6a775..6c89f8c2b 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -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,15 @@ 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={this.handleVideoLoadStart}
+            onPlay={this.handleVideoLoadStart}
+            onMouseOver={this.handleVideoLoadStart}
+            onFocus={this.handleVideoLoadStart}
+            onVolumeChange={this.handleVideoVolumeChange}
+            controls
+            className="embed-responsive-item col-12"
+          >
             <source src={url} type="video/mp4" />
           </video>
         </div>
@@ -766,6 +774,18 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     this.setState({ showEdit: false });
   }
 
+  handleVideoLoadStart(e) {
+    const video = e.target as HTMLVideoElement;
+    const volume = window.volumeLevel;
+    if (volume) video.volume = volume;
+    else window.volumeLevel = video.volume = 0;
+  }
+
+  handleVideoVolumeChange(e) {
+    const video = e.target as HTMLVideoElement;
+    window.volumeLevel = video.volume;
+  }
+
   // The actual editing is done in the receive for post
   handleEditPost(form: EditPost) {
     this.setState({ showEdit: false });
diff --git a/src/shared/interfaces.ts b/src/shared/interfaces.ts
index 304e3d9d1..86b4ef029 100644
--- a/src/shared/interfaces.ts
+++ b/src/shared/interfaces.ts
@@ -21,6 +21,7 @@ export type IsoDataOptionalSite<T extends RouteData = any> = Partial<
 declare global {
   interface Window {
     isoData: IsoData;
+    volumeLevel: number;
   }
 }
 

From 810abb043aa2c9ca9e5a8d8464e5228df5552391 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=B0smail=20Karsl=C4=B1?= <cszn@pm.me>
Date: Wed, 3 Jan 2024 15:47:17 +0300
Subject: [PATCH 2/6] Store volume level on localStorage, instead of window
 object

---
 src/shared/components/post/post-listing.tsx | 11 +++++++----
 src/shared/interfaces.ts                    |  1 -
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index 6c89f8c2b..3aaa265a5 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -776,14 +776,17 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
 
   handleVideoLoadStart(e) {
     const video = e.target as HTMLVideoElement;
-    const volume = window.volumeLevel;
-    if (volume) video.volume = volume;
-    else window.volumeLevel = video.volume = 0;
+    const volume = localStorage.getItem("volume_level");
+    if (volume) video.volume = Number(volume);
+    else {
+      video.volume = 0;
+      localStorage.setItem("volume_level", "0");
+    }
   }
 
   handleVideoVolumeChange(e) {
     const video = e.target as HTMLVideoElement;
-    window.volumeLevel = video.volume;
+    localStorage.setItem("volume_level", String(video.volume));
   }
 
   // The actual editing is done in the receive for post
diff --git a/src/shared/interfaces.ts b/src/shared/interfaces.ts
index 86b4ef029..304e3d9d1 100644
--- a/src/shared/interfaces.ts
+++ b/src/shared/interfaces.ts
@@ -21,7 +21,6 @@ export type IsoDataOptionalSite<T extends RouteData = any> = Partial<
 declare global {
   interface Window {
     isoData: IsoData;
-    volumeLevel: number;
   }
 }
 

From c3453cb4ed328448075a8cb79d8871a413ed19bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=B0smail=20Karsl=C4=B1?= <cszn@pm.me>
Date: Wed, 3 Jan 2024 20:24:02 +0300
Subject: [PATCH 3/6] Refactor video event handlers in PostListing component

---
 src/shared/components/post/post-listing.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index 3aaa265a5..9efeaf63f 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -215,11 +215,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
       return (
         <div className="embed-responsive ratio ratio-16x9 mt-3">
           <video
-            onLoadStart={this.handleVideoLoadStart}
-            onPlay={this.handleVideoLoadStart}
-            onMouseOver={this.handleVideoLoadStart}
-            onFocus={this.handleVideoLoadStart}
-            onVolumeChange={this.handleVideoVolumeChange}
+            onLoadStart={linkEvent(this, this.handleVideoLoadStart)}
+            onPlay={linkEvent(this, this.handleVideoLoadStart)}
+            onMouseOver={linkEvent(this, this.handleVideoLoadStart)}
+            onFocus={linkEvent(this, this.handleVideoLoadStart)}
+            onVolumeChange={linkEvent(this, this.handleVideoVolumeChange)}
             controls
             className="embed-responsive-item col-12"
           >
@@ -786,7 +786,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
 
   handleVideoVolumeChange(e) {
     const video = e.target as HTMLVideoElement;
-    localStorage.setItem("volume_level", String(video.volume));
+    localStorage.setItem("volume_level", video.volume.toString());
   }
 
   // The actual editing is done in the receive for post

From 61c296b892665b370296a94cc5dfa1fb26c384f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=B0smail=20Karsl=C4=B1?= <cszn@pm.me>
Date: Wed, 3 Jan 2024 21:16:40 +0300
Subject: [PATCH 4/6] Take `muted` prop into account while storing volume level

---
 src/shared/components/post/post-listing.tsx | 23 ++++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index 9efeaf63f..a9893c63b 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -217,8 +217,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           <video
             onLoadStart={linkEvent(this, this.handleVideoLoadStart)}
             onPlay={linkEvent(this, this.handleVideoLoadStart)}
-            onMouseOver={linkEvent(this, this.handleVideoLoadStart)}
-            onFocus={linkEvent(this, this.handleVideoLoadStart)}
             onVolumeChange={linkEvent(this, this.handleVideoVolumeChange)}
             controls
             className="embed-responsive-item col-12"
@@ -774,19 +772,28 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     this.setState({ showEdit: false });
   }
 
-  handleVideoLoadStart(e) {
+  handleVideoLoadStart(_i: PostListing, e: Event) {
     const video = e.target as HTMLVideoElement;
-    const volume = localStorage.getItem("volume_level");
-    if (volume) video.volume = Number(volume);
-    else {
+    const volume = localStorage.getItem("video_volume_level");
+    const muted = localStorage.getItem("video_muted");
+    if (volume && muted) {
+      video.muted = muted !== "false";
+      video.volume = Number(volume);
+    } else {
+      video.muted = true;
       video.volume = 0;
+      localStorage.setItem("video_muted", "true");
       localStorage.setItem("volume_level", "0");
     }
   }
 
-  handleVideoVolumeChange(e) {
+  handleVideoVolumeChange(_i: PostListing, e: Event) {
     const video = e.target as HTMLVideoElement;
-    localStorage.setItem("volume_level", video.volume.toString());
+    localStorage.setItem("video_muted", video.muted.toString());
+    localStorage.setItem(
+      "video_volume_level",
+      video.muted ? "0" : video.volume.toString(),
+    );
   }
 
   // The actual editing is done in the receive for post

From 1d4a10ec9e42d1dd134b1c49d941bf35f4db33e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=B0smail=20Karsl=C4=B1?= <cszn@pm.me>
Date: Wed, 3 Jan 2024 21:19:49 +0300
Subject: [PATCH 5/6] fix

---
 src/shared/components/post/post-listing.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index a9893c63b..133892725 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -790,10 +790,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   handleVideoVolumeChange(_i: PostListing, e: Event) {
     const video = e.target as HTMLVideoElement;
     localStorage.setItem("video_muted", video.muted.toString());
-    localStorage.setItem(
-      "video_volume_level",
-      video.muted ? "0" : video.volume.toString(),
-    );
+    localStorage.setItem("video_volume_level", video.volume.toString());
   }
 
   // The actual editing is done in the receive for post

From d3edc765eaf3dfeb40587429dc9db50f8edb81c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=B0smail=20Karsl=C4=B1?= <cszn@pm.me>
Date: Wed, 3 Jan 2024 21:25:41 +0300
Subject: [PATCH 6/6] simplify logic

---
 src/shared/components/post/post-listing.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index 133892725..84d3e0482 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -776,12 +776,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const video = e.target as HTMLVideoElement;
     const volume = localStorage.getItem("video_volume_level");
     const muted = localStorage.getItem("video_muted");
-    if (volume && muted) {
-      video.muted = muted !== "false";
-      video.volume = Number(volume);
-    } else {
-      video.muted = true;
-      video.volume = 0;
+    video.volume = Number(volume || 0);
+    video.muted = muted !== "false";
+    if (!(volume || muted)) {
       localStorage.setItem("video_muted", "true");
       localStorage.setItem("volume_level", "0");
     }