Load more videos on load

yral-dapp · Nov 16, 2023 · 18a41fe · 18a41fe
1 parent 060397d
commit 18a41fe
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 13 deletions.
diff --git a/packages/experiments/src/lib/helpers/feed.ts b/packages/experiments/src/lib/helpers/feed.ts
@@ -3,21 +3,33 @@ import {
   collection,
   getDocs,
   limit,
-  QueryDocumentSnapshot,
   orderBy,
+  Query,
+  startAt,
+  DocumentReference,
 } from 'firebase/firestore'
 import type { CollectionName, UpDownPost } from '../db/db.types'
 import { getDb } from '$lib/db'
 
-export async function getVideos(_lastRef?: QueryDocumentSnapshot) {
+export async function getVideos(_lastRef?: DocumentReference) {
   try {
     const videos: UpDownPost[] = []
     const db = getDb()
-    const q = query(
-      collection(db, 'ud-videos' as CollectionName),
-      orderBy('created_at', 'desc'),
-      limit(50),
-    )
+    let q: Query
+    if (_lastRef) {
+      q = query(
+        collection(db, 'ud-videos' as CollectionName),
+        orderBy('created_at', 'desc'),
+        limit(5),
+        startAt(_lastRef),
+      )
+    } else {
+      q = query(
+        collection(db, 'ud-videos' as CollectionName),
+        orderBy('created_at', 'desc'),
+        limit(5),
+      )
+    }
     const snapshot = await getDocs(q)
     if (snapshot.empty) {
       return { ok: true, videos, more: false }
@@ -28,7 +40,7 @@ export async function getVideos(_lastRef?: QueryDocumentSnapshot) {
     return {
       ok: true,
       videos,
-      lastRef: snapshot.docs[snapshot.docs.length - 1],
+      lastRef: snapshot.docs[snapshot.docs.length - 1].ref,
       more: true,
     }
   } catch (e) {

diff --git a/packages/experiments/src/routes/(feed)/(splash)/up-down/[id=videoId]/+page.svelte b/packages/experiments/src/routes/(feed)/(splash)/up-down/[id=videoId]/+page.svelte
@@ -16,6 +16,7 @@ import UpDownVote from '$components/up-down/UpDownVote.svelte'
 import UpDownVoteControls from '$components/up-down/UpDownVoteControls.svelte'
 import type { UpDownPost } from '$lib/db/db.types'
 import { getVideos } from '$lib/helpers/feed'
+import type { DocumentReference } from 'firebase/firestore'
 
 const fetchWhenVideosLeft = 5
 const keepVideosLoadedCount: number = 3
@@ -25,29 +26,32 @@ let currentVideoIndex = 0
 let lastWatchedVideoIndex = -1
 let noMoreVideos = false
 let loading = false
+let lastLoadedVideoRef: DocumentReference | undefined = undefined
 
-let loadTimeout: ReturnType<typeof setTimeout> | undefined = undefined
-let errorCount = 0
 let showError = false
 
 async function fetchNextVideos() {
-  console.log('called fetchNextVideos')
+  console.log('f1')
   if (noMoreVideos) {
-    console.log('No more videos to load')
+    console.log('r1')
     return
   }
 
   if (videos.length - currentVideoIndex > fetchWhenVideosLeft) {
     return
   }
 
+  console.log('f2')
+
   loading = true
-  const res = await getVideos()
+  const res = await getVideos(lastLoadedVideoRef)
   if (!res.ok || !res.videos) {
+    console.log('r2')
     return
   }
 
   videos = joinArrayUniquely(videos, res.videos)
+  lastLoadedVideoRef = res.lastRef
   noMoreVideos = !res.more
   loading = false
 }