diff --git a/packages/experiments/src/components/layout/HomeLayout.svelte b/packages/experiments/src/components/layout/HomeLayout.svelte index 0034ca6de..fef3f705d 100644 --- 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> -
+
diff --git a/packages/experiments/src/components/layout/PlayerLayout.svelte b/packages/experiments/src/components/layout/PlayerLayout.svelte index f2ddc49b5..4bfbc11ad 100644 --- 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)) { - hideSplashScreen(5000) + hideSplashScreen(3000) }) {#if $splashScreenPopup.show} diff --git a/packages/experiments/src/components/up-down/UpDownVote.svelte b/packages/experiments/src/components/up-down/UpDownVote.svelte index 6f5c393dc..b1c3eeb19 100644 --- 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 } @@ -10,6 +12,7 @@ import UpDownVoteControls from './UpDownVoteControls.svelte' import UpDownVoteOutcome from './UpDownVoteOutcome.svelte' export let voteDetails: UpDownVoteDetails | undefined = undefined +export let score: number @@ -17,6 +20,7 @@ export let voteDetails: UpDownVoteDetails | undefined = undefined {:else} (voteDetails = detail)} /> {/if} diff --git a/packages/experiments/src/components/up-down/UpDownVoteControls.svelte b/packages/experiments/src/components/up-down/UpDownVoteControls.svelte index eb1839e5b..3825d6994 100644 --- 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) {
- 100 + {score}
Current scrore diff --git a/packages/experiments/src/components/up-down/UpDownVoteOutcome.svelte b/packages/experiments/src/components/up-down/UpDownVoteOutcome.svelte index fa089ea13..fe806cdf6 100644 --- a/packages/experiments/src/components/up-down/UpDownVoteOutcome.svelte +++ b/packages/experiments/src/components/up-down/UpDownVoteOutcome.svelte @@ -1,29 +1,28 @@
{ - 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 index f7f81ab9d..cfda12f36 100644 --- 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 index f45dc9237..989cd2c72 100644 --- 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 new file mode 100644 index 000000000..9beb43227 --- /dev/null +++ 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(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({ 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 index 49208ea22..a70ec1182 100644 --- 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 index aeaaeadb9..f2f10defb 100644 --- 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} /> - + {/if} @@ -154,7 +156,7 @@ beforeNavigate(() => { There are no more videos to vote on
- +
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 index 9aff2cf4e..cc072aab9 100644 --- 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'
-
- -
-
-
- - 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 index 624f73bfe..5cc55935f 100644 --- 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' -
+
+import { browser } from '$app/environment' import { page } from '$app/stores' import IconButton from '$components/button/IconButton.svelte' import HomeLayout from '$components/layout/HomeLayout.svelte' import { playerState } from '$stores/playerState' import { onDestroy, onMount } from 'svelte' import { fade } from 'svelte/transition' +import c from 'clsx' function handleVisibilityChange() { if (document.visibilityState === 'hidden') { @@ -22,40 +24,45 @@ onDestroy(() => { document.removeEventListener('visibilitychange', handleVisibilityChange) }) -$: pathname = $page.url.pathname -let resultPage = pathname.includes('result') +$: pathname = browser ? $page.url.pathname : '' +$: resultPage = pathname.includes('result') $: walletPage = pathname.includes('wallet') - - {#if !walletPage} - diff --git a/packages/experiments/src/routes/(feed)/+layout.ts b/packages/experiments/src/routes/(feed)/+layout.ts new file mode 100644 index 000000000..27adb2b97 --- /dev/null +++ b/packages/experiments/src/routes/(feed)/+layout.ts @@ -0,0 +1,2 @@ +export const ssr = false +export const prerender = false diff --git a/packages/experiments/src/routes/+layout.svelte b/packages/experiments/src/routes/+layout.svelte index 469f8318d..fbbb3b2db 100644 --- a/packages/experiments/src/routes/+layout.svelte +++ b/packages/experiments/src/routes/+layout.svelte @@ -9,8 +9,10 @@ import { page } from '$app/stores' import { deferredPrompt } from '$stores/deferredPrompt' import NetworkStatus from '$components/network-status/NetworkStatus.svelte' import { initDb } from '$lib/db' +import { browser } from '$app/environment' function registerServiceWorker() { + if (!browser) return if ($page.url.host.includes('t:')) return if ('serviceWorker' in navigator) {