Add feed logic and bet API

yral-dapp · Nov 3, 2023 · a8bff14 · a8bff14
1 parent 785d50a
commit a8bff14
Show file tree

Hide file tree

Showing 17 changed files with 171 additions and 94 deletions.
diff --git a/packages/experiments/src/components/layout/HomeLayout.svelte b/packages/experiments/src/components/layout/HomeLayout.svelte
@@ -14,7 +14,7 @@ $: innerHeight = browser ? window?.innerHeight : 0
   class="relative block h-full w-full overflow-hidden text-white"
   on:keyup>
   <slot name="content" />
-  <div class="absolute inset-x-0 top-0 z-[11] {testClasses}">
+  <div class="absolute inset-x-0 top-4 z-[11] {testClasses}">
     <slot name="top" />
   </div>
   <div class="absolute inset-x-0 bottom-0 z-[10] max-h-16 {testClasses}">

diff --git a/packages/experiments/src/components/layout/PlayerLayout.svelte b/packages/experiments/src/components/layout/PlayerLayout.svelte
@@ -141,8 +141,6 @@ async function updateStats() {
 }
 
 $: avatarUrl = getDefaultImageUrl(post.ouid)
-
-onMount(() => console.log('layout mount', index))
 </script>
 
 <player-layout

diff --git a/packages/experiments/src/components/layout/SplashScreen.svelte b/packages/experiments/src/components/layout/SplashScreen.svelte
@@ -5,13 +5,13 @@ import { onMount } from 'svelte'
 import Icon from '$components/icon/Icon.svelte'
 
 onMount(() => {
-  hideSplashScreen(5000)
+  hideSplashScreen(3000)
 })
 </script>
 
 {#if $splashScreenPopup.show}
   <splash-screen
-    out:fade|local={{ duration: 500 }}
+    out:fade={{ duration: 500 }}
     class="spacy-y-8 absolute z-[15] flex h-full w-full flex-col items-center justify-center space-y-10 bg-black">
     <Icon name="hot-or-not-logo" class="h-56 w-56" />
     <Icon name="loading" class="h-5 w-5 animate-spin-slow opacity-50" />

diff --git a/packages/experiments/src/components/up-down/UpDownVote.svelte b/packages/experiments/src/components/up-down/UpDownVote.svelte
@@ -2,6 +2,8 @@
 export type UpDownVoteDetails = {
   direction: 'up' | 'down'
   coins: number
+  result: 'won' | 'lost' | 'pending'
+  placed_at: number
 }
 </script>
 
@@ -10,13 +12,15 @@ import UpDownVoteControls from './UpDownVoteControls.svelte'
 import UpDownVoteOutcome from './UpDownVoteOutcome.svelte'
 
 export let voteDetails: UpDownVoteDetails | undefined = undefined
+export let score: number
 </script>
 
 <up-down class="pointer-events-none block h-full w-full">
   {#if voteDetails}
     <UpDownVoteOutcome {voteDetails} />
   {:else}
     <UpDownVoteControls
+      {score}
       on:votePlaced={({ detail }) => (voteDetails = detail)} />
   {/if}
 </up-down>
diff --git a/packages/experiments/src/components/up-down/UpDownVoteControls.svelte b/packages/experiments/src/components/up-down/UpDownVoteControls.svelte
@@ -3,6 +3,8 @@ import Icon from '$components/icon/Icon.svelte'
 import { createEventDispatcher } from 'svelte'
 import type { UpDownVoteDetails } from './UpDownVote.svelte'
 
+export let score: number
+
 const dispatch = createEventDispatcher<{
   votePlaced: UpDownVoteDetails
 }>()
@@ -26,6 +28,8 @@ function placeVote(direction: 'up' | 'down', coins: number) {
     dispatch('votePlaced', {
       direction,
       coins,
+      result: 'pending',
+      placed_at: Date.now(),
     })
   }, 2000)
 }
@@ -78,7 +82,7 @@ function placeVote(direction: 'up' | 'down', coins: number) {
     <div class="flex flex-col items-center justify-center">
       <div
         class="text-5xl font-bold drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)]">
-        100
+        {score}
       </div>
       <div class="text-sm drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)]">
         Current scrore

diff --git a/packages/experiments/src/components/up-down/UpDownVoteOutcome.svelte b/packages/experiments/src/components/up-down/UpDownVoteOutcome.svelte
@@ -1,29 +1,28 @@
 <script lang="ts">
 import Icon from '$components/icon/Icon.svelte'
-// import { getTimeStringFromMs } from '$lib/utils/timeLeft'
+import { getTimeStringFromMs } from '$lib/utils/timeLeft'
 import type { UpDownVoteDetails } from './UpDownVote.svelte'
 import { readable, type Readable } from 'svelte/store'
 
 export let voteDetails: UpDownVoteDetails
-let timeLeft: Readable<string>
 
 function getMsLeftForBetResult(betEndTime: Date) {
   const now = new Date()
   let diff = betEndTime.getTime() - now.getTime()
 
   if (diff > 0) {
-    // const dt = getTimeStringFromMs(diff)
-    // const initialValue =
-    //   dt.minutes + ':' + (dt.seconds < 10 ? '0' : '') + dt.seconds
+    const dt = getTimeStringFromMs(diff)
+    const initialValue =
+      dt.minutes + ':' + (dt.seconds < 10 ? '0' : '') + dt.seconds
 
-    return readable(0, (set) => {
+    return readable('', (set) => {
       let counter = 1
       const updateMs = () => {
         if (diff - counter * 1000 > 0) {
-          // const { minutes, seconds } = getTimeStringFromMs(
-          //   diff - counter * 1000,
-          // )
-          // set(minutes + ':' + (seconds < 10 ? '0' : '') + seconds)
+          const { minutes, seconds } = getTimeStringFromMs(
+            diff - counter * 1000,
+          )
+          set(minutes + ':' + (seconds < 10 ? '0' : '') + seconds)
         } else {
           counter = 1
           diff = 36_00_000
@@ -44,10 +43,10 @@ function getMsLeftForBetResult(betEndTime: Date) {
   }
 }
 
-const fourtyMinutes = new Date()
-fourtyMinutes.setMinutes(fourtyMinutes.getMinutes() + 40)
-
-// timeLeft = getMsLeftForBetResult(fourtyMinutes)
+const sixtyMinutes = new Date()
+sixtyMinutes.setMinutes(sixtyMinutes.getMinutes() + 60)
+let timeLeft: Readable<string>
+timeLeft = getMsLeftForBetResult(sixtyMinutes)
 </script>
 
 <div

diff --git a/packages/experiments/src/components/video/VideoPlayer.svelte b/packages/experiments/src/components/video/VideoPlayer.svelte
@@ -168,8 +168,6 @@ $: if (!inView) {
 }
 
 onMount(() => {
-  console.log('player mount', index)
-
   if (playFormat === 'mp4' || ios) {
     //Force mp4 playback on iOS
     videoEl.src = `${getMp4Url(uid)}${ios ? '#t=0.1' : ''}`

diff --git a/packages/experiments/src/lib/db/index.ts b/packages/experiments/src/lib/db/index.ts
@@ -13,7 +13,14 @@ const firebaseConfig = {
 
 // Initialize Firebase
 export let app: FirebaseApp
-export let db: Firestore
+let db: Firestore
+
+export function getDb() {
+  if (!db) {
+    initDb()
+  }
+  return db
+}
 
 export function initDb() {
   try {

diff --git a/packages/experiments/src/lib/helpers/feed.ts b/packages/experiments/src/lib/helpers/feed.ts
@@ -4,19 +4,16 @@ import {
   getDocs,
   limit,
   QueryDocumentSnapshot,
-  startAt,
 } from 'firebase/firestore/lite'
 import type { CollectionName, UpDownPost } from './db.type'
-import { db } from '$lib/db'
+import { getDb } from '$lib/db'
 
 export async function getVideos(lastRef?: QueryDocumentSnapshot) {
   try {
+    console.log({ lastRef })
     const videos: UpDownPost[] = []
-    const q = query(
-      collection(db, 'ud-videos' as CollectionName),
-      limit(30),
-      startAt(lastRef),
-    )
+    const db = getDb()
+    const q = query(collection(db, 'ud-videos' as CollectionName), limit(30))
     const snapshot = await getDocs(q)
     if (snapshot.empty) {
       return { ok: true, videos, more: false }
@@ -29,6 +26,7 @@ export async function getVideos(lastRef?: QueryDocumentSnapshot) {
       more: true,
     }
   } catch (e) {
+    console.log('Error fetching videos', e)
     return { ok: false }
   }
 }

diff --git a/packages/experiments/src/lib/utils/timeLeft.ts b/packages/experiments/src/lib/utils/timeLeft.ts
@@ -0,0 +1,51 @@
+import { readable } from 'svelte/store'
+
+// const ONE_HOUR_MS = 36_00_000
+const SECONDS_MS = 1000
+const MINUTES_MS = SECONDS_MS * 60
+const HOURS_MS = MINUTES_MS * 60
+const DAYS_MS = HOURS_MS * 24
+
+type TimeParts = {
+  minutes: number
+  seconds: number
+  days: number
+  hours: number
+}
+
+export function getTimeLeft(startTime: Date, endTime: Date) {
+  let diff = endTime.getTime() - startTime.getTime()
+  if (diff > 0) {
+    return readable<TimeParts>(getTimeStringFromMs(diff), (set) => {
+      const updateMs = () => {
+        diff -= 1000
+        if (diff > 0) {
+          set(getTimeStringFromMs(diff))
+        } else {
+          clearInterval(interval)
+        }
+      }
+
+      const interval = setInterval(updateMs, 1000)
+
+      return () => {
+        clearInterval(interval)
+      }
+    })
+  } else {
+    return readable<TimeParts>({ minutes: 0, seconds: 0, days: 0, hours: 0 })
+  }
+}
+
+export function getTimeStringFromMs(timeMs: number) {
+  const days = Math.floor(timeMs / DAYS_MS)
+  const hours = Math.round((timeMs % DAYS_MS) / HOURS_MS)
+  const minutes = Math.floor((timeMs % HOURS_MS) / MINUTES_MS)
+  const seconds = Math.floor((timeMs % MINUTES_MS) / 1000)
+  return {
+    minutes,
+    seconds,
+    days,
+    hours,
+  }
+}
diff --git a/packages/experiments/src/routes/(feed)/(splash)/up-down/+page.ts b/packages/experiments/src/routes/(feed)/(splash)/up-down/+page.ts
@@ -1,6 +1,6 @@
 export const ssr = false
 
-import { db } from '$lib/db'
+import { getDb } from '$lib/db'
 import { collection, getDocs, limit, query } from 'firebase/firestore/lite'
 import type { PageLoad } from './$types'
 import { redirect } from '@sveltejs/kit'
@@ -14,7 +14,7 @@ export const load: PageLoad = async () => {
   //     `/up-down/${cachedVideos[0].publisher_canister_id}@${cachedVideos[0].post_id}`,
   //   )
   // }
-
+  const db = getDb()
   const q = query(collection(db, 'ud-videos' as CollectionName), limit(1))
   const res = await getDocs(q)
   if (res.empty) {

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
@@ -31,18 +31,20 @@ let errorCount = 0
 let showError = false
 
 async function fetchNextVideos() {
+  console.log('called fetchNextVideos')
   if (noMoreVideos) {
-    console.info('No more videos to load')
+    console.log('No more videos to load')
     return
   }
 
   if (videos.length - currentVideoIndex > fetchWhenVideosLeft) {
-    console.info('Waiting to scroll down more')
+    console.log('Waiting to scroll down more')
     return
   }
 
   loading = true
   const res = await getVideos()
+  console.log({ res })
   if (!res.ok || !res.videos) {
     return
   }
@@ -115,7 +117,7 @@ beforeNavigate(() => {
             uid={post.video_uid} />
 
           <svelte:fragment slot="controls">
-            <UpDownVote />
+            <UpDownVote score={post.score} />
           </svelte:fragment>
         </PlayerLayout>
       {/if}
@@ -154,7 +156,7 @@ beforeNavigate(() => {
           There are no more videos to vote on
         </div>
         <div class="absolute inset-x-0 bottom-20 z-[-1] max-h-48">
-          <UpDownVoteControls />
+          <UpDownVoteControls score={100} />
         </div>
       </div>
     </SwiperSlide>

diff --git a/packages/experiments/src/routes/(feed)/(splash)/up-down/results/+page.svelte b/packages/experiments/src/routes/(feed)/(splash)/up-down/results/+page.svelte
@@ -3,6 +3,7 @@ import Avatar from '$components/avatar/Avatar.svelte'
 import Icon from '$components/icon/Icon.svelte'
 import getDefaultImageUrl from '$lib/utils/getDefaultImageUrl'
 import { pluralize } from '$lib/utils/pluralize'
+import { authState } from '$stores/auth'
 import { fade } from 'svelte/transition'
 
 let img =
@@ -13,36 +14,40 @@ let username = 'Avid'
 </script>
 
 <div transition:fade class="mt-20 h-full w-full bg-black px-4 py-2">
-  <div class="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-4">
-    <a
-      href="#"
-      data-sveltekit-preload-code="eager"
-      class="relative aspect-[3/5] w-full cursor-pointer overflow-hidden rounded-md bg-cover">
-      <div
-        class="absolute inset-0 scale-110 bg-cover bg-center"
-        style="background-image: url('{img}')" />
-      <div
-        style="background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 100%);"
-        class="pointer-events-none absolute inset-0 z-[2] flex flex-col justify-between p-2 md:p-4">
-        <div class="flex items-center space-x-2">
-          <Avatar class="h-6 w-6" src={avatarUrl} />
-          <div class="text-xs font-semibold sm:text-sm">
-            {username}
+  {#if $authState.isLoggedIn}
+    <div class="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-4">
+      <a
+        href="/up-down/"
+        data-sveltekit-preload-code="eager"
+        class="relative aspect-[3/5] w-full cursor-pointer overflow-hidden rounded-md bg-cover">
+        <div
+          class="absolute inset-0 scale-110 bg-cover bg-center"
+          style="background-image: url('{img}')" />
+        <div
+          style="background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 100%);"
+          class="pointer-events-none absolute inset-0 z-[2] flex flex-col justify-between p-2 md:p-4">
+          <div class="flex items-center space-x-2">
+            <Avatar class="h-6 w-6" src={avatarUrl} />
+            <div class="text-xs font-semibold sm:text-sm">
+              {username}
+            </div>
           </div>
-        </div>
-        <div class="flex flex-col">
-          <span class="text-xs font-thin uppercase">Your vote</span>
-          <span class="pb-2 text-sm font-bold md:text-lg">
-            {pluralize('Token', 100)}
-          </span>
+          <div class="flex flex-col">
+            <span class="text-xs font-thin uppercase">Your vote</span>
+            <span class="pb-2 text-sm font-bold md:text-lg">
+              {pluralize('Token', 100)}
+            </span>
 
-          <div
-            class="flex w-full items-center justify-center space-x-1 rounded-full bg-orange-500 py-1 text-sm text-white md:py-2">
-            <Icon name="stopwatch" class="h-5 w-5" />
-            <span>30:00</span>
+            <div
+              class="flex w-full items-center justify-center space-x-1 rounded-full bg-orange-500 py-1 text-sm text-white md:py-2">
+              <Icon name="stopwatch" class="h-5 w-5" />
+              <span>30:00</span>
+            </div>
           </div>
         </div>
-      </div>
-    </a>
-  </div>
+      </a>
+    </div>
+  {:else}
+    Login to view results
+  {/if}
 </div>
diff --git a/packages/experiments/src/routes/(feed)/(splash)/up-down/wallet/+page.svelte b/packages/experiments/src/routes/(feed)/(splash)/up-down/wallet/+page.svelte
@@ -5,7 +5,7 @@ import Icon from '$components/icon/Icon.svelte'
 import getDefaultImageUrl from '$lib/utils/getDefaultImageUrl'
 </script>
 
-<div class="flex h-full w-full flex-col overflow-hidden bg-black px-4">
+<div class="mt-20 flex h-full w-full flex-col overflow-hidden bg-black px-4">
   <div class="flex items-center justify-between">
     <div class="flex items-center gap-4">
       <IconButton