Merge pull request #240 from go-bazzinga/fix/mute-unmute-issue

fix mute unmute issue

src/component/video_player.rs

@@ -6,11 +6,10 @@ pub fn VideoPlayer(
     #[prop(optional)] node_ref: NodeRef<Video>,
     #[prop(into)] view_bg_url: Signal<Option<String>>,
     #[prop(into)] view_video_url: Signal<Option<String>>,
+    muted: RwSignal<bool>,
 ) -> impl IntoView {
-    let muted = create_rw_signal(false);
-
     view! {
-        <div class="w-full h-full absolute top-0 left-0 grid grid-cols-1 justify-items-center items-center cursor-pointer z-[3]">
+        <label class="h-full w-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"
@@ -29,6 +28,6 @@ pub fn VideoPlayer(
                 disableremoteplayback
                 preload="auto"
             ></video>
-        </div>
+        </label>
     }
 }

src/page/post_view/video_loader.rs

@@ -204,6 +204,7 @@ pub fn VideoView(
             node_ref=container_ref
             view_bg_url=Signal::derive(view_bg_url)
             view_video_url=Signal::derive(view_video_url)
+            muted
         />
     }
 }

src/page/profile/mod.rs

@@ -4,7 +4,6 @@ mod posts;
 mod profile_iter;
 pub mod profile_post;
 mod speculation;
-pub mod your_profile_post;
 
 use candid::Principal;
 use leptos::*;
@@ -98,20 +97,22 @@ fn ProfileViewInner(user: ProfileDetails, user_canister: Principal) -> impl Into
                 <BackButton fallback="/".to_string()/>
             </div>
             <div class="grid grid-cols-1 gap-5 justify-normal justify-items-center w-full">
-                <div
-                    class="flex flex-row w-11/12 sm:w-7/12 justify-center"
-                >
+                <div class="flex flex-row w-11/12 sm:w-7/12 justify-center">
                     <div class="flex flex-col justify-center items-center">
                         <img
                             class="h-24 w-24 rounded-full"
                             alt=username_or_principal.clone()
                             src=profile_pic
                         />
                         <div class="flex flex-col text-center items-center">
-                            <span class="text-md text-white font-bold"
-                            class=("w-full", is_connected)
-                            class=("w-5/12", move || !is_connected())
-                            class=("truncate", move || !is_connected())>{display_name}</span>
+                            <span
+                                class="text-md text-white font-bold"
+                                class=("w-full", is_connected)
+                                class=("w-5/12", move || !is_connected())
+                                class=("truncate", move || !is_connected())
+                            >
+                                {display_name}
+                            </span>
                             <div class="text-sm flex flex-row">
                                 // TODO: Add username when it's available
                                 // <p class="text-white">@ {username_or_principal}</p>