From 6f9f1aaf29060d885b6b11b1481bfb280ae014b1 Mon Sep 17 00:00:00 2001
From: rupansh <rupanshsekar@hotmail.com>
Date: Tue, 27 Feb 2024 15:31:38 +0530
Subject: [PATCH] fix(post_view): fix mute/unmute for ios safari

---
 src/page/post_view/mod.rs          |  4 ++--
 src/page/post_view/video_loader.rs | 37 +++++++++++++++++-------------
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/page/post_view/mod.rs b/src/page/post_view/mod.rs
index 2fecf8d8..63e4d0a9 100644
--- a/src/page/post_view/mod.rs
+++ b/src/page/post_view/mod.rs
@@ -121,7 +121,7 @@ pub fn ScrollingView<NV: Fn() -> NVR + Clone + 'static, NVR>(
             />
 
             <Show when=muted>
-                <div
+                <button
                     class="fixed top-1/2 left-1/2 z-20 cursor-pointer"
                     on:click=move |_| muted.set(false)
                 >
@@ -129,7 +129,7 @@ pub fn ScrollingView<NV: Fn() -> NVR + Clone + 'static, NVR>(
                         class="text-white/80 animate-ping text-4xl"
                         icon=icondata::BiVolumeMuteSolid
                     />
-                </div>
+                </button>
             </Show>
         </div>
     }
diff --git a/src/page/post_view/video_loader.rs b/src/page/post_view/video_loader.rs
index 8652f9fd..e204e191 100644
--- a/src/page/post_view/video_loader.rs
+++ b/src/page/post_view/video_loader.rs
@@ -12,9 +12,7 @@ pub fn BgView(uid: String, children: Children) -> impl IntoView {
                 style:background-color="rgb(0, 0, 0)"
                 style:background-image=move || format!("url({})", bg_url(&uid))
             ></div>
-            <div class="grid grid-cols-1 h-full w-full justify-items-center bg-transparent absolute top-0 left-0 z-[2]">
-                {children()}
-            </div>
+            {children()}
         </div>
     }
 }
@@ -62,18 +60,25 @@ pub fn VideoView(idx: usize, muted: RwSignal<bool>) -> impl IntoView {
     });
 
     view! {
-        <video
-            on:click=move |_| muted.update(|m| *m = !*m)
-            _ref=container_ref
-            class="object-contain absolute z-[3] h-dvh max-h-dvh cursor-pointer"
-            poster=view_bg_url
-            src=view_video_url
-            loop
-            muted
-            playsinline
-            disablepictureinpicture
-            disableremoteplayback
-            preload="auto"
-        ></video>
+        <label class="w-full h-full absolute top-0 left-0 grid grid-cols-1 justify-items-center items-center cursor-pointer z-[3]">
+            <input
+                on:change=move |_| muted.update(|m| *m = !*m)
+                type="checkbox"
+                value=""
+                class="sr-only"
+            />
+            <video
+                _ref=container_ref
+                class="object-contain h-dvh max-h-dvh cursor-pointer"
+                poster=view_bg_url
+                src=view_video_url
+                loop
+                muted
+                playsinline
+                disablepictureinpicture
+                disableremoteplayback
+                preload="auto"
+            ></video>
+        </label>
     }
 }