Merge pull request #33 from go-bazzinga/rupansh/infinite-scroll-fixes

Fix post_view overflow in chromium

src/page/post_view/mod.rs

@@ -36,7 +36,7 @@ struct FetchCursor {
 struct VideoCtx {
     video_queue: ReadSignal<Vec<PostDetails>>,
     current_idx: RwSignal<usize>,
-    trigger_fetch: Action<(), ()>,
+    trigger_fetch: Resource<(), ()>,
 }
 
 const POST_CNT: usize = 25;
@@ -75,15 +75,15 @@ pub fn ScrollingView() -> impl IntoView {
 
     view! {
         <div
-            class="snap-mandatory snap-y overflow-y-scroll h-screen"
+            class="snap-mandatory snap-y overflow-y-scroll h-screen bg-black"
             style:scroll-snap-points-y="repeat(100vh)"
         >
             <For
                 each=video_enum
                 key=|u| (u.0, u.1.uid.clone())
                 children=move |(queue_idx, details)| {
                     view! {
-                        <div class="snap-always snap-end">
+                        <div class="snap-always snap-end h-full">
                             <BgView uid=details.uid.clone()>
                                 <Show
                                     when=move || queue_idx == current_idx() && allow_show()
@@ -102,23 +102,31 @@ pub fn ScrollingView() -> impl IntoView {
 }
 
 #[component]
-pub fn PostViewWithUpdates(initial_post: PostDetails) -> impl IntoView {
+pub fn PostViewWithUpdates(initial_post: Option<PostDetails>) -> impl IntoView {
+    let (fetch_cursor, set_fetch_cursor) = create_signal({
+        let mut fetch_cursor = FetchCursor {
+            start: 1,
+            limit: POST_CNT as u64,
+        };
+        if initial_post.is_some() {
+            fetch_cursor.limit -= 1;
+        }
+        fetch_cursor
+    });
+
     // TODO: this is a dead simple with no GC
     // We're using virtual lists for DOM, so this doesn't consume much memory
     // as uids only occupy 32 bytes each
     // but ideally this should be cleaned up
-    let (video_queue, set_video_queue) = create_signal(vec![initial_post]);
+    let (video_queue, set_video_queue) =
+        create_signal(initial_post.map(|p| vec![p]).unwrap_or_default());
     let current_idx = create_rw_signal(0);
-    let (fetch_cursor, set_fetch_cursor) = create_signal(FetchCursor {
-        start: 1,
-        limit: POST_CNT as u64 - 1,
-    });
 
-    let fetch_video_uids = create_action(move |&()| async move {
+    let fetch_video_uids = Resource::once(move || async move {
         let canisters = expect_context::<Canisters>();
         let cursor = fetch_cursor.get_untracked();
         let fetch_stream = VideoFetchStream::new(&canisters, cursor);
-        let chunks = try_or_redirect!(fetch_stream.fetch_post_uids_chunked(10).await);
+        let chunks = try_or_redirect!(fetch_stream.fetch_post_uids_chunked(8).await);
         let mut chunks = pin!(chunks);
         while let Some(chunk) = chunks.next().await {
             set_video_queue.update(|q| {
@@ -135,10 +143,6 @@ pub fn PostViewWithUpdates(initial_post: PostDetails) -> impl IntoView {
         });
     });
 
-    create_effect(move |_| {
-        fetch_video_uids.dispatch(());
-    });
-
     provide_context(VideoCtx {
         video_queue,
         current_idx,
@@ -186,17 +190,15 @@ pub fn PostView() -> impl IntoView {
                 go_to_root();
                 return None;
             };
-            let uid = match get_post_uid(&canisters, canister, post).await {
-                Ok(Some(uid)) => uid,
+
+            match get_post_uid(&canisters, canister, post).await {
+                Ok(Some(uid)) => Some(uid),
                 Err(e) => {
                     failure_redirect(e);
-                    return None;
+                    None
                 }
-                Ok(None) => {
-                    panic!("initial post not found");
-                }
-            };
-            Some(uid)
+                Ok(None) => None,
+            }
         },
     );
 
@@ -206,7 +208,6 @@ pub fn PostView() -> impl IntoView {
             {move || {
                 fetch_first_video_uid
                     .get()
-                    .flatten()
                     .map(|post| view! { <PostViewWithUpdates initial_post=post/> })
             }}
 

src/page/post_view/video_loader.rs

@@ -14,10 +14,10 @@ use super::VideoCtx;
 pub fn BgView(uid: String, children: Children) -> impl IntoView {
     view! {
         <div
-            class="bg-black bg-cover"
+            class="bg-black bg-cover h-full"
             style:background-image=move || format!("url({})", bg_url(&uid))
         >
-            <div class="grid grid-cols-1 h-screen w-screen justify-items-center backdrop-blur-lg">
+            <div class="grid grid-cols-1 h-full w-full justify-items-center backdrop-blur-lg">
                 {children()}
             </div>
         </div>
@@ -32,21 +32,28 @@ pub fn HlsVideo(video_ref: NodeRef<Video>, allow_show: RwSignal<bool>) -> impl I
         ..
     } = expect_context();
 
-    let current_uid =
-        create_memo(move |_| with!(|video_queue| video_queue[current_idx()].uid.clone()));
+    let current_uid = create_memo(move |_| {
+        with!(|video_queue| video_queue.get(current_idx()).map(|q| q.uid.clone()))
+    });
     let wasp = create_rw_signal(None::<WaspHlsPlayerW>);
-    let bg_url = move || bg_url(current_uid());
+    let bg_url = move || current_uid().map(bg_url);
 
     create_effect(move |_| {
         let video = video_ref.get()?;
-        let video = video.classes("object-contain h-screen");
+        let video = video.classes("object-contain h-full");
         log::debug!("initializing wasp player");
         let wasp_p = WaspHlsPlayerW::new(&video, None);
         video.set_muted(true);
         video.set_loop(true);
+        video.set_autoplay(true);
         wasp_p.add_event_listener("playerStateChange", move |state| match state.as_str() {
             "Loading" => allow_show.set(false),
-            "Loaded" => allow_show.set(true),
+            "Loaded" => {
+                allow_show.set(true);
+                if video.paused() {
+                    _ = video.play();
+                }
+            }
             _ => (),
         });
 
@@ -59,15 +66,13 @@ pub fn HlsVideo(video_ref: NodeRef<Video>, allow_show: RwSignal<bool>) -> impl I
         with!(|wasp| {
             let wasp = wasp.as_ref()?;
             let video = video_ref.get()?;
-            wasp.stop();
-            wasp.load(&stream_url(current_uid()));
-            video.set_autoplay(true);
-            video.set_poster(&bg_url());
+            wasp.load(&stream_url(current_uid()?));
+            video.set_poster(&bg_url()?);
             Some(())
         })
     });
 
-    view! { <video _ref=video_ref class="object-contain h-screen" poster=bg_url loop muted></video> }
+    view! { <video _ref=video_ref class="object-contain autoplay h-full" poster=bg_url loop muted></video> }
 }
 
 #[component]
@@ -80,8 +85,9 @@ pub fn ThumbView(idx: usize) -> impl IntoView {
         ..
     } = expect_context();
 
-    let uid = create_memo(move |_| with!(|video_queue| video_queue[idx].uid.clone()));
-    let view_bg_url = move || bg_url(uid());
+    let uid =
+        create_memo(move |_| with!(|video_queue| video_queue.get(idx).map(|q| q.uid.clone())));
+    let view_bg_url = move || uid().map(bg_url);
 
     use_intersection_observer_with_options(
         container_ref,
@@ -102,12 +108,12 @@ pub fn ThumbView(idx: usize) -> impl IntoView {
             // fetch new videos
             if idx == 14 || (idx > 14 && idx % 8 == 0) {
                 log::debug!("trigger rerender");
-                trigger_fetch.dispatch(());
+                trigger_fetch.refetch();
             }
             current_idx.set(idx);
         },
         UseIntersectionObserverOptions::default().thresholds(vec![1.0]),
     );
 
-    view! { <img class="object-contain h-screen" src=view_bg_url _ref=container_ref/> }
+    view! { <img class="object-contain h-full" src=view_bg_url _ref=container_ref/> }
 }