yral-dapp · rupansh-sekar-yral · Aug 27, 2024 · Aug 20, 2024 · Aug 20, 2024 · Aug 20, 2024
diff --git a/ssr/src/app.rs b/ssr/src/app.rs
@@ -7,7 +7,7 @@ use crate::{
         leaderboard::Leaderboard,
         logout::Logout,
         menu::{AuthorizedUserToSeedContent, Menu},
-        post_view::{PostView, PostViewCtx},
+        post_view::{single_post::SinglePost, PostView, PostViewCtx},
         privacy::PrivacyPolicy,
         profile::{profile_post::ProfilePost, ProfilePostsContext, ProfileView},
         refer_earn::ReferEarn,
@@ -131,6 +131,7 @@ pub fn App() -> impl IntoView {
                     <Route path="/" view=RootPage/>
                     <Route path="" view=BaseRoute>
                         <Route path="/hot-or-not/:canister_id/:post_id" view=PostView/>
+                        <Route path="/post/:canister_id/:post_id" view=SinglePost/>
                         <Route path="/profile/:canister_id/:post_id" view=ProfilePost/>
                         <Route path="/your-profile/:canister_id/:post_id" view=ProfilePost/>
                         <Route path="/profile/:id" view=ProfileView/>

diff --git a/ssr/src/component/back_btn.rs b/ssr/src/component/back_btn.rs
@@ -6,10 +6,17 @@ use reqwest::Url;
 
 use crate::state::history::HistoryCtx;
 
-#[component]
-pub fn BackButton(#[prop(into)] fallback: String) -> impl IntoView {
-    let history_ctx = expect_context::<HistoryCtx>();
-    let go_back = Callback::new(move |_| {
+/// Go back or navigate to a fallback route
+/// does nothing in ssr mode
+/// ideal for calling from a button, for example
+pub fn go_back_or_fallback(fallback: &str) {
+    #[cfg(not(feature = "hydrate"))]
+    {
+        return;
+    }
+    #[cfg(feature = "hydrate")]
+    {
+        let history_ctx = expect_context::<HistoryCtx>();
         let win = window();
         let referrer = win
             .document()
@@ -25,12 +32,15 @@ pub fn BackButton(#[prop(into)] fallback: String) -> impl IntoView {
             let history = BrowserHistory::new();
             history.back();
         } else {
-            use_navigate()(&fallback, Default::default());
+            use_navigate()(fallback, Default::default());
         }
-    });
+    }
+}
 
+#[component]
+pub fn BackButton(#[prop(into)] fallback: String) -> impl IntoView {
     view! {
-        <button on:click=go_back class="items-center">
+        <button on:click=move |_| go_back_or_fallback(&fallback) class="items-center">
             <Icon icon=icondata::AiLeftOutlined/>
         </button>
     }

diff --git a/ssr/src/component/hn_icons.rs b/ssr/src/component/hn_icons.rs
diff --git a/ssr/src/component/mod.rs b/ssr/src/component/mod.rs
@@ -9,16 +9,17 @@ pub mod connect;
 pub mod content_upload;
 pub mod dashbox;
 pub mod feed_popup;
+pub mod hn_icons;
 pub mod ic_symbol;
 pub mod infinite_scroller;
 pub mod loading;
 pub mod login_modal;
 pub mod modal;
 pub mod nav;
 pub mod nav_icons;
-pub mod no_more_posts;
 pub mod option;
 pub mod overlay;
+pub mod profile_placeholders;
 pub mod scrolling_post_view;
 pub mod social;
 pub mod spinner;

diff --git a/ssr/src/component/nav.rs b/ssr/src/component/nav.rs
@@ -17,20 +17,19 @@ fn NavIcon(
                 when=move || cur_selected() == idx
                 fallback=move || {
                     view! {
-                        <div class="py-3">
-                            <Icon icon=icon class="text-white h-6 w-6"/>
+                        <div class="py-5">
+                            <Icon icon=icon class="text-white text-2xl md:text-3xl"/>
                         </div>
                     }
                 }
             >
 
-                <div class="py-3 border-t-2 border-t-pink-500">
+                <div class="py-5 border-t-2 border-t-pink-500">
                     <Icon
                         icon=filled_icon.unwrap_or(icon)
-                        class="text-white aspect-square h-6 w-6"
+                        class="text-white aspect-square text-2xl md:text-3xl"
                     />
                 </div>
-            // <div class="absolute bottom-0 bg-primary-600 py-1 w-6 blur-md"></div>
             </Show>
         </a>
     }
@@ -44,20 +43,19 @@ fn TrophyIcon(idx: usize, cur_selected: Memo<usize>) -> impl IntoView {
                 when=move || cur_selected() == idx
                 fallback=move || {
                     view! {
-                        <div class="py-3">
-                            <Icon icon=TrophySymbol class="text-white fill-none h-6 w-6"/>
+                        <div class="py-5">
+                            <Icon icon=TrophySymbol class="text-white fill-none text-2xl md:text-3xl"/>
                         </div>
                     }
                 }
             >
 
-                <div class="py-3 border-t-2 border-t-pink-500">
+                <div class="py-5 border-t-2 border-t-pink-500">
                     <Icon
                         icon=TrophySymbolFilled
-                        class="text-white fill-none aspect-square h-6 w-6"
+                        class="text-white fill-none aspect-square text-2xl md:text-3xl"
                     />
                 </div>
-            // <div class="absolute bottom-0 bg-primary-600 py-1 w-6 blur-md"></div>
             </Show>
         </a>
     }
@@ -66,7 +64,7 @@ fn TrophyIcon(idx: usize, cur_selected: Memo<usize>) -> impl IntoView {
 #[component]
 fn UploadIcon(idx: usize, cur_selected: Memo<usize>) -> impl IntoView {
     view! {
-        <a href="/upload" class="flex items-center justify-center rounded-fullt text-white">
+        <a href="/upload" class="flex items-center justify-center rounded-full text-white">
             <Show
                 when=move || cur_selected() == idx
                 fallback=move || {
@@ -112,27 +110,9 @@ pub fn NavBar() -> impl IntoView {
             _ => 4,
         }
     });
-    let bg_color = move || {
-        if cur_selected() == 0
-            || cur_location
-                .pathname
-                .get()
-                .as_str()
-                .starts_with("/your-profile")
-        {
-            "bg-transparent"
-        } else {
-            "bg-black"
-        }
-    };
 
     view! {
-        <div class=move || {
-            format!(
-                "flex flex-row justify-between px-6 py-2 w-full {} fixed left-0 bottom-0 z-50",
-                bg_color(),
-            )
-        }>
+        <div class="fixed z-50 bottom-0 left-0 flex flex-row justify-between px-6 items-center w-full bg-black/80">
             <NavIcon
                 idx=0
                 href=home_path

diff --git a/ssr/src/component/no_more_posts.rs b/ssr/src/component/no_more_posts.rs
diff --git a/ssr/src/component/profile_placeholders.rs b/ssr/src/component/profile_placeholders.rs
@@ -0,0 +1,70 @@
+use crate::utils::icon::icon_gen;
+
+icon_gen!(
+    NoMorePostsGraphic,
+    view_box = "0 0 186 174",
+    r###"<circle r="4.2" fill="#27308C" opacity=".1" transform="matrix(1 0 0 -1 139 73.6)"/>
+    <circle r="2.5" fill="#27308C" opacity=".2" transform="matrix(1 0 0 -1 67 168.2)"/>
+    <mask id="a" width="78" height="78" x="23" y="18" maskUnits="userSpaceOnUse" style="mask-type:alpha">
+      <rect width="66.9" height="66.9" fill="#FFC467" rx="16" transform="matrix(.93383 -.357716 .357685 .933842 18.6 37.3)"/>
+    </mask>
+    <g mask="url(#a)">
+      <rect width="66.9" height="66.9" fill="#FFC467" rx="16" transform="matrix(.93383 -.357716 .357685 .933842 18.6 37.3)"/>
+      <path fill="#151A53" d="M39.6 59.5a18 18 0 0 1 16.6-19.2l44.2-3.3a18 18 0 0 1 19.3 16.6l5.6 76.7a6 6 0 0 1-8.6 5.8l-32.4-16-29.7 20.6a6 6 0 0 1-9.4-4.5l-5.6-76.7ZM27 31.7a4 4 0 0 1 4.3-5.4l5 .7a4 4 0 0 1 2.5 6.4l-3 4a4 4 0 0 1-7-1L27 31.6Z" opacity=".1"/>
+    </g>
+    <path fill="#5665FF" d="M74.8 69.7a18 18 0 0 1 20.4-15.2l43.9 6.4a18 18 0 0 1 15.2 20.5l-11.2 76a6 6 0 0 1-9.7 3.8l-28.1-22.7-33.5 13.7a6 6 0 0 1-8.2-6.4l11.2-76.1Z" opacity=".1"/>
+    <path fill="#3747E9" d="M43.7 58.7a18 18 0 0 1 16.7-19.3l44.2-3.2a18 18 0 0 1 19.3 16.6l5.6 76.7a6 6 0 0 1-8.6 5.8l-32.4-16-29.7 20.6a6 6 0 0 1-9.4-4.5l-5.7-76.7Z"/>
+    <path fill="#FF9E87" d="M27.8 29.2a4 4 0 0 1 4.3-5.5l5 .7a4 4 0 0 1 2.5 6.5l-3 3.9a4 4 0 0 1-7-1l-1.8-4.6ZM7.6 125a3.5 3.5 0 1 1 6.5-2.7 3.5 3.5 0 0 1-6.5 2.7ZM159.5 105.4a6.8 6.8 0 1 1 12.7-5 6.8 6.8 0 0 1-12.7 5Z"/>
+    <path fill="#FFE1DA" d="M120 162.7a4 4 0 0 1 1.9-6.7l4.8-1.3a4 4 0 0 1 4.9 5l-1.3 4.8a4 4 0 0 1-6.8 1.7l-3.5-3.5Z"/>
+    <path stroke="#fff" stroke-width="3" d="M69.7 58.4 99 56.3"/>
+    <path fill="#3F13E4" d="M149 32.3c-2.5 6-6.2-10.1-12.3-12.5-6-2.4-21-1.3-18.6-7.4 2.3-6 19.9-6.5 25.9-4.1 6 2.4 7.3 18 5 24Z" opacity=".3"/>"###
+);
+
+icon_gen!(
+    NoMoreBetsGraphic,
+    view_box = "0 0 210 205",
+    r###"<path d="M18.0256 39.3838C16.8783 36.5263 19.2545 33.4984 22.3028 33.9335L23.742 34.1389C26.7903 34.574 28.2244 38.1459 26.3234 40.5682L25.426 41.7119C23.525 44.1342 19.7146 43.5903 18.5673 40.7329L18.0256 39.3838Z" fill="#FFA8D7"/>
+  <path d="M5.37362 103.781C4.55381 101.739 6.25172 99.5753 8.42986 99.8862C10.608 100.197 11.6328 102.749 10.2744 104.48C8.91611 106.211 6.19343 105.822 5.37362 103.781Z" fill="#FFA8D7"/>
+  <path d="M188.957 146.678C187.363 142.708 190.665 138.5 194.9 139.105C199.136 139.71 201.128 144.673 198.487 148.038C195.846 151.404 190.551 150.648 188.957 146.678Z" fill="#FFA8D7"/>
+  <path opacity="0.2" d="M160.651 128.546C158.491 126.351 159.517 122.641 162.498 121.868L163.905 121.503C166.886 120.73 169.586 123.473 168.765 126.441L168.377 127.842C167.556 130.81 163.831 131.776 161.671 129.582L160.651 128.546Z" fill="#FF9E87"/>
+  <path opacity="0.3" d="M161.085 30.1576C158.146 34.5167 157.964 21.0824 153.605 18.1433C149.246 15.2042 137.135 13.3794 140.074 9.02032C143.013 4.66126 157.019 7.32421 161.378 10.2633C165.737 13.2024 164.024 25.7986 161.085 30.1576Z" fill="#FF0F91"/>
+  <circle opacity="0.2" cx="3" cy="3" r="3" transform="matrix(1 0 0 -1 80.0391 204.766)" fill="#27308C"/>
+  <path d="M34.699 192.18C34.4523 191.308 33.2194 189.722 30.262 190.356C27.3045 190.99 25.7759 189.283 25.3812 188.35" stroke="#FF83CC" stroke-width="3" stroke-linecap="round"/>
+  <path d="M193.056 34.9113C192.718 36.3102 193.188 39.4652 197.774 40.8943C202.36 42.3234 203.144 45.8773 202.963 47.4756" stroke="#FF83CC" stroke-width="3" stroke-linecap="round"/>
+  <path d="M86.5078 187C127.929 187 161.508 153.421 161.508 112C161.508 70.5786 127.929 37 86.5078 37C45.0865 37 11.5078 70.5786 11.5078 112C11.5078 153.421 45.0865 187 86.5078 187Z" fill="#E2017B"/>
+  <g filter="url(#filter0_d_516_779)">
+  <path d="M52.5078 71H187.508C188.834 71 190.106 71.5268 191.043 72.4645C191.981 73.4021 192.508 74.6739 192.508 76V101C192.508 102.326 191.981 103.598 191.043 104.536C190.106 105.473 188.834 106 187.508 106H52.5078C51.1817 106 49.91 105.473 48.9723 104.536C48.0346 103.598 47.5078 102.326 47.5078 101V76C47.5078 74.6739 48.0346 73.4021 48.9723 72.4645C49.91 71.5268 51.1817 71 52.5078 71V71Z" fill="white"/>
+  </g>
+  <path d="M116.508 79H90.5078C88.851 79 87.5078 80.3431 87.5078 82C87.5078 83.6569 88.851 85 90.5078 85H116.508C118.165 85 119.508 83.6569 119.508 82C119.508 80.3431 118.165 79 116.508 79Z" fill="#FE54B0"/>
+  <path d="M134.508 92H90.5078C88.851 92 87.5078 93.3431 87.5078 95C87.5078 96.6569 88.851 98 90.5078 98H134.508C136.165 98 137.508 96.6569 137.508 95C137.508 93.3431 136.165 92 134.508 92Z" fill="#FFBFE2"/>
+  <path d="M79.5078 88.5C79.5078 80.4919 73.0159 74 65.0078 74C56.9997 74 50.5078 80.4919 50.5078 88.5C50.5078 96.5081 56.9997 103 65.0078 103C73.0159 103 79.5078 96.5081 79.5078 88.5Z" fill="#18191A"/>
+  <g filter="url(#filter1_d_516_779)">
+  <path d="M172.508 116H37.5078C34.7464 116 32.5078 118.239 32.5078 121V146C32.5078 148.761 34.7464 151 37.5078 151H172.508C175.269 151 177.508 148.761 177.508 146V121C177.508 118.239 175.269 116 172.508 116Z" fill="white"/>
+  </g>
+  <path d="M101.508 124H75.5078C73.851 124 72.5078 125.343 72.5078 127C72.5078 128.657 73.851 130 75.5078 130H101.508C103.165 130 104.508 128.657 104.508 127C104.508 125.343 103.165 124 101.508 124Z" fill="#FE54B0"/>
+  <path d="M119.508 137H75.5078C73.851 137 72.5078 138.343 72.5078 140C72.5078 141.657 73.851 143 75.5078 143H119.508C121.165 143 122.508 141.657 122.508 140C122.508 138.343 121.165 137 119.508 137Z" fill="#FFBFE2"/>
+  <path d="M64.5078 133.5C64.5078 125.492 58.0159 119 50.0078 119C41.9997 119 35.5078 125.492 35.5078 133.5C35.5078 141.508 41.9997 148 50.0078 148C58.0159 148 64.5078 141.508 64.5078 133.5Z" fill="#18191A"/>
+  <path d="M64.8143 88.1444C63.0304 87.6856 62.4567 87.2111 62.4567 86.4722C62.4567 85.6244 63.2504 85.0333 64.5785 85.0333C65.9774 85.0333 66.496 85.6944 66.5432 86.6667H68.2799C68.2249 85.3289 67.3998 84.1 65.7573 83.7033V82H63.3998V83.68C61.8752 84.0067 60.6493 84.9867 60.6493 86.4878C60.6493 88.2844 62.1502 89.1789 64.3428 89.7C66.3074 90.1667 66.7003 90.8511 66.7003 91.5744C66.7003 92.1111 66.3153 92.9667 64.5785 92.9667C62.9597 92.9667 62.3231 92.2511 62.2367 91.3333H60.5078C60.6021 93.0367 61.8909 93.9933 63.3998 94.3122V96H65.7573V94.3278C67.2897 94.04 68.5078 93.1611 68.5078 91.5667C68.5078 89.3578 66.5982 88.6033 64.8143 88.1444Z" fill="white"/>
+  <path d="M50.8143 133.144C49.0304 132.686 48.4567 132.211 48.4567 131.472C48.4567 130.624 49.2504 130.033 50.5785 130.033C51.9774 130.033 52.496 130.694 52.5432 131.667H54.2799C54.2249 130.329 53.3998 129.1 51.7573 128.703V127H49.3998V128.68C47.8752 129.007 46.6493 129.987 46.6493 131.488C46.6493 133.284 48.1502 134.179 50.3428 134.7C52.3074 135.167 52.7003 135.851 52.7003 136.574C52.7003 137.111 52.3153 137.967 50.5785 137.967C48.9597 137.967 48.3231 137.251 48.2367 136.333H46.5078C46.6021 138.037 47.8909 138.993 49.3998 139.312V141H51.7573V139.328C53.2897 139.04 54.5078 138.161 54.5078 136.567C54.5078 134.358 52.5982 133.603 50.8143 133.144Z" fill="white"/>
+  <defs>
+  <filter id="filter0_d_516_779" x="41.5078" y="68" width="157" height="47" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+  <feOffset dy="3"/>
+  <feGaussianBlur stdDeviation="3"/>
+  <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.161 0"/>
+  <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_516_779"/>
+  <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_516_779" result="shape"/>
+  </filter>
+  <filter id="filter1_d_516_779" x="26.5078" y="113" width="157" height="47" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+  <feOffset dy="3"/>
+  <feGaussianBlur stdDeviation="3"/>
+  <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.161 0"/>
+  <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_516_779"/>
+  <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_516_779" result="shape"/>
+  </filter>
+  </defs>
+"###
+);
diff --git a/ssr/src/component/scrolling_post_view.rs b/ssr/src/component/scrolling_post_view.rs
@@ -2,19 +2,36 @@ use leptos::*;
 use leptos_icons::*;
 use leptos_use::{use_intersection_observer_with_options, UseIntersectionObserverOptions};
 
-use crate::page::post_view::video_loader::{BgView, VideoView};
+use crate::page::post_view::video_loader::{BgView, VideoViewForQueue};
 
 use crate::state::audio_state::AudioState;
 use crate::utils::posts::PostDetails;
 
 #[component]
-pub fn ScrollingPostView<F: Fn() -> V + Clone + 'static, V, O: Fn() -> IV, IV: IntoView>(
+pub fn MuteIconOverlay(show_mute_icon: RwSignal<bool>) -> impl IntoView {
+    view! {
+        <Show when=show_mute_icon>
+            <button
+                class="fixed top-1/2 left-1/2 z-20 cursor-pointer pointer-events-none"
+                on:click=move |_| AudioState::toggle_mute()
+            >
+                <Icon
+                    class="text-white/80 animate-ping text-4xl"
+                    icon=icondata::BiVolumeMuteSolid
+                />
+            </button>
+        </Show>
+    }
+}
+
+#[component]
+pub fn ScrollingPostView<F: Fn() -> V + Clone + 'static, V>(
     video_queue: RwSignal<Vec<PostDetails>>,
     current_idx: RwSignal<usize>,
     #[prop(optional)] fetch_next_videos: Option<F>,
     recovering_state: RwSignal<bool>,
     queue_end: RwSignal<bool>,
-    #[prop(optional)] overlay: Option<O>,
+    #[prop(optional, into)] overlay: Option<ViewFn>,
     threshold_trigger_fetch: usize,
 ) -> impl IntoView {
     let AudioState {
@@ -33,7 +50,7 @@ pub fn ScrollingPostView<F: Fn() -> V + Clone + 'static, V, O: Fn() -> IV, IV: I
                 style:scroll-snap-points-y="repeat(100vh)"
             >
 
-                {overlay.map(|o| o())}
+                {overlay.map(|o| o.run())}
 
                 <For
                     each=move || video_queue().into_iter().enumerate()
@@ -81,7 +98,7 @@ pub fn ScrollingPostView<F: Fn() -> V + Clone + 'static, V, O: Fn() -> IV, IV: I
                             <div _ref=container_ref class="snap-always snap-end w-full h-full">
                                 <Show when=show_video>
                                     <BgView video_queue current_idx idx=queue_idx>
-                                        <VideoView video_queue current_idx idx=queue_idx muted />
+                                        <VideoViewForQueue video_queue current_idx idx=queue_idx muted />
                                     </BgView>
                                 </Show>
                             </div>
@@ -95,17 +112,7 @@ pub fn ScrollingPostView<F: Fn() -> V + Clone + 'static, V, O: Fn() -> IV, IV: I
                     </div>
                 </Show>
 
-                <Show when=show_mute_icon>
-                    <button
-                        class="fixed top-1/2 left-1/2 z-20 cursor-pointer"
-                        on:click=move |_| AudioState::toggle_mute()
-                    >
-                        <Icon
-                            class="text-white/80 animate-ping text-4xl"
-                            icon=icondata::BiVolumeMuteSolid
-                        />
-                    </button>
-                </Show>
+                <MuteIconOverlay show_mute_icon/>
             </div>
         </div>
     };

diff --git a/ssr/src/component/spinner.rs b/ssr/src/component/spinner.rs
@@ -1,12 +1,22 @@
 use leptos::*;
 
+/// Spinner with constant size
 #[component]
 pub fn Spinner() -> impl IntoView {
     view! {
         <div class="animate-spin border-solid rounded-full border-t-transparent border-white border-8 h-32 w-32"></div>
     }
 }
 
+/// Spinner that fits container
+#[component]
+pub fn SpinnerFit() -> impl IntoView {
+    view! {
+        <div class="animate-spin border-solid rounded-full border-t-transparent border-primary-600 border-8 w-full h-full"/>
+    }
+}
+
+/// Spinner that takes up the whole screen with black background
 #[component]
 pub fn FullScreenSpinner() -> impl IntoView {
     view! {