From 060c7182e5ac66cba9a247c1c2e173e658409e5c Mon Sep 17 00:00:00 2001 From: harshbaz Date: Thu, 21 Dec 2023 00:23:09 +0530 Subject: [PATCH 01/67] Fix --- packages/experiments/src/app.d.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/experiments/src/app.d.ts b/packages/experiments/src/app.d.ts index 4a827089d..4f479d693 100644 --- a/packages/experiments/src/app.d.ts +++ b/packages/experiments/src/app.d.ts @@ -1,4 +1,3 @@ -/* eslint-disable @typescript-eslint/no-unused-vars */ /// declare let Hls: typeof import('hls.js').default @@ -6,13 +5,10 @@ declare let Hls: typeof import('hls.js').default // Info: https://kit.svelte.dev/docs/types#app declare namespace App { // interface Locals {} - // interface Platform {} - // interface Session {} - // interface Stuff {} } declare namespace svelteHTML { - interface HTMLAttributes { + interface HTMLAttributes { 'on:beforeinstallprompt'?: (event: BeforeInstallPromptEvent) => any 'on:appinstalled'?: (event: Event) => any 'disablePictureInPicture'?: boolean @@ -21,10 +17,10 @@ declare namespace svelteHTML { } interface BeforeInstallPromptEvent extends Event { + prompt(): Promise readonly platforms: string[] readonly userChoice: Promise<{ outcome: 'accepted' | 'dismissed' platform: string }> - prompt(): Promise } From bfcca112e2d81d3f119188f4f67c2bf31aaeb800 Mon Sep 17 00:00:00 2001 From: harshbaz Date: Thu, 21 Dec 2023 00:44:19 +0530 Subject: [PATCH 02/67] Remove --- .../experiments/src/routes/(feed)/up-down/[id]/+page.svelte | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/experiments/src/routes/(feed)/up-down/[id]/+page.svelte b/packages/experiments/src/routes/(feed)/up-down/[id]/+page.svelte index 7434f3f07..e2393e498 100644 --- a/packages/experiments/src/routes/(feed)/up-down/[id]/+page.svelte +++ b/packages/experiments/src/routes/(feed)/up-down/[id]/+page.svelte @@ -89,9 +89,6 @@ beforeNavigate(() => { $playerState.visible = false $playerState.muted = true }) - -// $: console.log({ videos }) -// $: console.log({ currentVideoIndex }) From 7ab0dd359a600a5b83f84e6b7f592013b4c18fad Mon Sep 17 00:00:00 2001 From: harshbaz Date: Thu, 21 Dec 2023 01:20:40 +0530 Subject: [PATCH 03/67] Remove swiper --- package-lock.json | 54 ---- .../src/components/layout/PlayerLayout.svelte | 26 +- .../up-down/votes/[voteId]/+page.svelte | 2 +- packages/web-client/package.json | 1 - packages/web-client/src/app.d.ts | 30 +- packages/web-client/src/app.html | 5 +- .../src/components/layout/HomeLayout.svelte | 5 +- .../components/layout/HotOrNotLayout.svelte | 9 +- .../src/components/layout/PlayerLayout.svelte | 297 +++++++++--------- .../components/video/PlayerRenderer.svelte | 23 ++ .../src/components/video/VideoPlayer.svelte | 36 +-- packages/web-client/src/lib/helpers/feed.ts | 9 +- .../(splash)/feed/[id=videoId]/+page.svelte | 142 ++++----- .../hotornot/[id=videoId]/+page.svelte | 166 +++++----- .../profile/[id]/post/[postId]/+page.svelte | 4 +- .../[postId=videoId]/+page.svelte | 4 +- packages/web-client/src/stores/popups.ts | 7 + 17 files changed, 374 insertions(+), 446 deletions(-) create mode 100644 packages/web-client/src/components/video/PlayerRenderer.svelte diff --git a/package-lock.json b/package-lock.json index 38bfa98d8..075e2e3c7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5130,13 +5130,6 @@ "node": ">=6.0.0" } }, - "node_modules/dom7": { - "version": "4.0.4", - "license": "MIT", - "dependencies": { - "ssr-window": "^4.0.0" - } - }, "node_modules/domain-browser": { "version": "4.22.0", "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-4.22.0.tgz", @@ -10327,10 +10320,6 @@ "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==", "dev": true }, - "node_modules/ssr-window": { - "version": "4.0.2", - "license": "MIT" - }, "node_modules/stackback": { "version": "0.0.2", "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz", @@ -10688,29 +10677,6 @@ } } }, - "node_modules/swiper": { - "version": "8.4.7", - "resolved": "https://registry.npmjs.org/swiper/-/swiper-8.4.7.tgz", - "integrity": "sha512-VwO/KU3i9IV2Sf+W2NqyzwWob4yX9Qdedq6vBtS0rFqJ6Fa5iLUJwxQkuD4I38w0WDJwmFl8ojkdcRFPHWD+2g==", - "funding": [ - { - "type": "patreon", - "url": "https://www.patreon.com/swiperjs" - }, - { - "type": "open_collective", - "url": "http://opencollective.com/swiper" - } - ], - "hasInstallScript": true, - "dependencies": { - "dom7": "^4.0.4", - "ssr-window": "^4.0.2" - }, - "engines": { - "node": ">= 4.7.0" - } - }, "node_modules/symbol-tree": { "version": "3.2.4", "dev": true, @@ -13006,7 +12972,6 @@ "hls.js": "^1.4.11", "idb": "^7.1.1", "svelte-local-storage-store": "^0.6.4", - "swiper": "^8.4.7", "throttle-debounce": "^5.0.0" }, "devDependencies": { @@ -14805,7 +14770,6 @@ "svelte-easy-crop": "^2.0.1", "svelte-local-storage-store": "^0.6.4", "svelte-preprocess": "^5.0.4", - "swiper": "^8.4.7", "tailwindcss": "^3.3.5", "throttle-debounce": "^5.0.0", "ts-node": "^10.9.1", @@ -17249,12 +17213,6 @@ "esutils": "^2.0.2" } }, - "dom7": { - "version": "4.0.4", - "requires": { - "ssr-window": "^4.0.0" - } - }, "domain-browser": { "version": "4.22.0", "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-4.22.0.tgz", @@ -20879,9 +20837,6 @@ } } }, - "ssr-window": { - "version": "4.0.2" - }, "stackback": { "version": "0.0.2", "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz", @@ -21102,15 +21057,6 @@ "strip-indent": "^3.0.0" } }, - "swiper": { - "version": "8.4.7", - "resolved": "https://registry.npmjs.org/swiper/-/swiper-8.4.7.tgz", - "integrity": "sha512-VwO/KU3i9IV2Sf+W2NqyzwWob4yX9Qdedq6vBtS0rFqJ6Fa5iLUJwxQkuD4I38w0WDJwmFl8ojkdcRFPHWD+2g==", - "requires": { - "dom7": "^4.0.4", - "ssr-window": "^4.0.2" - } - }, "symbol-tree": { "version": "3.2.4", "dev": true diff --git a/packages/experiments/src/components/layout/PlayerLayout.svelte b/packages/experiments/src/components/layout/PlayerLayout.svelte index 9fb65b38e..17e901d21 100644 --- a/packages/experiments/src/components/layout/PlayerLayout.svelte +++ b/packages/experiments/src/components/layout/PlayerLayout.svelte @@ -179,7 +179,7 @@ onDestroy(unload)
+ class="pointer-events-auto flex max-w-16 shrink-0 flex-col justify-end space-y-6 pb-2"> {#if showLikeButton} {/if} - - diff --git a/packages/experiments/src/routes/(feed)/up-down/votes/[voteId]/+page.svelte b/packages/experiments/src/routes/(feed)/up-down/votes/[voteId]/+page.svelte index 57516dd58..80d8c29f6 100644 --- a/packages/experiments/src/routes/(feed)/up-down/votes/[voteId]/+page.svelte +++ b/packages/experiments/src/routes/(feed)/up-down/votes/[voteId]/+page.svelte @@ -70,7 +70,7 @@ beforeNavigate(() => {
{:else} - + removeSplashScreen()} index={0} diff --git a/packages/web-client/package.json b/packages/web-client/package.json index d86c6b397..e12c59c68 100644 --- a/packages/web-client/package.json +++ b/packages/web-client/package.json @@ -37,7 +37,6 @@ "hls.js": "^1.4.11", "idb": "^7.1.1", "svelte-local-storage-store": "^0.6.4", - "swiper": "^8.4.7", "throttle-debounce": "^5.0.0" }, "devDependencies": { diff --git a/packages/web-client/src/app.d.ts b/packages/web-client/src/app.d.ts index 4f2bd003b..4f479d693 100644 --- a/packages/web-client/src/app.d.ts +++ b/packages/web-client/src/app.d.ts @@ -1,36 +1,26 @@ -/* eslint-disable @typescript-eslint/no-unused-vars */ /// -// See https://kit.svelte.dev/docs/types#app -// for information about these interfaces +declare let Hls: typeof import('hls.js').default + +// Info: https://kit.svelte.dev/docs/types#app declare namespace App { // interface Locals {} - // interface Platform {} - // interface Session {} - // interface Stuff {} } -namespace svelte.JSX { - interface SvelteWindowProps { - onbeforeinstallprompt?: - | EventHandler - | undefined - | null - onappinstalled?: EventHandler | undefined | null - } - - interface HTMLProps { - 'disableremoteplayback'?: boolean - 'disablepictureinpicture'?: boolean - 'x-webkit-airplay'?: 'deny' | 'allow' +declare namespace svelteHTML { + interface HTMLAttributes { + 'on:beforeinstallprompt'?: (event: BeforeInstallPromptEvent) => any + 'on:appinstalled'?: (event: Event) => any + 'disablePictureInPicture'?: boolean + 'disableRemotePlayback'?: boolean } } interface BeforeInstallPromptEvent extends Event { + prompt(): Promise readonly platforms: string[] readonly userChoice: Promise<{ outcome: 'accepted' | 'dismissed' platform: string }> - prompt(): Promise } diff --git a/packages/web-client/src/app.html b/packages/web-client/src/app.html index 0d93d5317..340292c0a 100644 --- a/packages/web-client/src/app.html +++ b/packages/web-client/src/app.html @@ -1,4 +1,4 @@ - + @@ -14,6 +14,9 @@ + %sveltekit.head% - (innerHeight = window?.innerHeight)} /> - diff --git a/packages/web-client/src/components/layout/HotOrNotLayout.svelte b/packages/web-client/src/components/layout/HotOrNotLayout.svelte index 73799752c..40877a4b8 100644 --- a/packages/web-client/src/components/layout/HotOrNotLayout.svelte +++ b/packages/web-client/src/components/layout/HotOrNotLayout.svelte @@ -4,13 +4,10 @@ import { browser } from '$app/environment' export let testMode = false $: testClasses = testMode ? 'border-2 border-white/30' : '' -$: innerHeight = browser ? window?.innerHeight : 0 - (innerHeight = window?.innerHeight)} /> - - @@ -21,4 +18,4 @@ $: innerHeight = browser ? window?.innerHeight : 0 class="pointer-events-none absolute inset-x-0 bottom-0 z-[5] max-h-48 {testClasses}"> - + diff --git a/packages/web-client/src/components/layout/PlayerLayout.svelte b/packages/web-client/src/components/layout/PlayerLayout.svelte index 2446c1fd1..c6519ed3f 100644 --- a/packages/web-client/src/components/layout/PlayerLayout.svelte +++ b/packages/web-client/src/components/layout/PlayerLayout.svelte @@ -16,6 +16,7 @@ import { authState } from '$stores/auth' import userProfile from '$stores/userProfile' import { debounce } from 'throttle-debounce' import ExperimentsPopup from '$components/popup/ExperimentsPopup.svelte' +import { createEventDispatcher, onDestroy, tick } from 'svelte' export let index: number export let post: PostPopulated @@ -29,8 +30,16 @@ export let showDescription = false export let showExperimentsButton = false export let unavailable = false export let watchHistoryDb: 'watch' | 'watch-hon' +export let single = false export let source: 'hon_feed' | 'main_feed' | 'speculation' | 'post' +export let show = false +const dispatch = createEventDispatcher<{ + view: number +}>() + +let observer: IntersectionObserver | null = null +let playerLayoutEl: HTMLDivElement let showTruncatedDescription = true let watchProgress = { totalCount: 0, @@ -193,6 +202,34 @@ async function updateStats() { $: avatarUrl = post.created_by_profile_photo_url[0] || getDefaultImageUrl(post.created_by_user_principal_id) + +async function setupIO() { + if (single) return + await tick() + if (observer) return + observer = new IntersectionObserver( + async (entries) => { + if (entries[0].isIntersecting) { + dispatch('view', index) + } + }, + { threshold: 0.85 }, + ) + observer.observe(playerLayoutEl) +} + +function unload() { + observer?.disconnect() + observer = null +} + +$: if (show) { + setupIO() +} else { + unload() +} + +onDestroy(unload) {#if showReportPopup} @@ -213,8 +250,10 @@ $: avatarUrl = {/if} + style="height: 100dvh;" + class="relative flex w-full shrink-0 snap-center snap-always items-center justify-center transition-all"> {#if !unavailable} background {/if} -
- {#if showExperimentsButton} -
- { - e.stopImmediatePropagation() - showExperimentsPopup = true - }}> -
- NEW! -
- -
- {/if} + {#if show}
+ {#if showExperimentsButton} +
+ { + e.stopImmediatePropagation() + showExperimentsPopup = true + }}> +
+ NEW! +
+ +
+ {/if} +
-
-
- - - -
- - {displayName || - generateRandomName('name', post.created_by_user_principal_id)} +
+
+ + -
- - {Number(post.total_view_count)} +
+ + {displayName || + generateRandomName('name', post.created_by_user_principal_id)} + +
+ + {Number(post.total_view_count)} +
+ {#if showDescription} + + {/if} +
- {#if showDescription} - - {/if} - -
-
- {#if showReportButton} - { - e.stopImmediatePropagation() - showReportPopup = true - }} /> - {/if} +
+ {#if showReportButton} + { + e.stopImmediatePropagation() + showReportPopup = true + }} /> + {/if} - {#if showReferAndEarnLink} - - {/if} - {#if showLikeButton} -
+ {#if showReferAndEarnLink} + {/if} + {#if showLikeButton} +
+ { + e.stopImmediatePropagation() + handleLike() + }} /> + + {getShortNumber(Number(post.like_count))} + +
+ {/if} + {#if showWalletLink} + + {/if} + {#if showShareButton} + { e.stopImmediatePropagation() - handleLike() + handleShare() }} /> - - {getShortNumber(Number(post.like_count))} - -
- {/if} - {#if showWalletLink} - - {/if} - {#if showShareButton} - { - e.stopImmediatePropagation() - handleShare() - }} /> - {/if} - {#if showHotOrNotButton} - - {/if} + {/if} + {#if showHotOrNotButton} + + {/if} +
+ {#if $$slots.hotOrNot} +
+ +
+ {/if}
- {#if $$slots.hotOrNot} -
- -
- {/if} -
- + + {/if} - - diff --git a/packages/web-client/src/components/video/PlayerRenderer.svelte b/packages/web-client/src/components/video/PlayerRenderer.svelte new file mode 100644 index 000000000..9bfa85282 --- /dev/null +++ b/packages/web-client/src/components/video/PlayerRenderer.svelte @@ -0,0 +1,23 @@ + + + diff --git a/packages/web-client/src/components/video/VideoPlayer.svelte b/packages/web-client/src/components/video/VideoPlayer.svelte index af93f59a6..f54d837df 100644 --- a/packages/web-client/src/components/video/VideoPlayer.svelte +++ b/packages/web-client/src/components/video/VideoPlayer.svelte @@ -4,15 +4,14 @@ import { getHlsUrl, getMp4Url } from '$lib/utils/cloudflare' import { isiPhone } from '$lib/utils/isSafari' import Log from '$lib/utils/Log' import { playerState } from '$stores/playerState' -import type Hls from 'hls.js' import { createEventDispatcher, onDestroy, onMount, tick } from 'svelte' import { debounce, throttle } from 'throttle-debounce' +import type { default as HLSType } from 'hls.js' export let uid: string export let index: number export let inView = false export let thumbnail = '' -export let Hls: any export let playFormat: 'hls' | 'mp4' let ios = isiPhone() @@ -28,7 +27,7 @@ let videoEl: HTMLVideoElement let currentTime = 0 let duration = 0 let loaded = false -let hls: Hls | null = null +let hls: HLSType | null = null let waiting = false let playing = true let videoUnavailable = false @@ -167,8 +166,8 @@ $: if (!inView) { } } -onMount(() => { - if (playFormat === 'mp4' || ios) { +function init() { + if (playFormat === 'mp4') { //Force mp4 playback on iOS videoEl.src = `${getMp4Url(uid)}${ios ? '#t=0.1' : ''}` } else { @@ -197,7 +196,9 @@ onMount(() => { }) } } -}) +} + +onMount(() => init()) onDestroy(() => { if (hls && hls.destroy) { @@ -244,18 +245,17 @@ onDestroy(() => {
{:else if $playerState.muted || !playing} -
-
- {#if !playing} - - {:else if $playerState.muted} - - {/if} -
+
+ {#if !playing} + + {:else if $playerState.muted} + + {/if}
{/if} diff --git a/packages/web-client/src/lib/helpers/feed.ts b/packages/web-client/src/lib/helpers/feed.ts index 7c8d67410..0e7ccddbf 100644 --- a/packages/web-client/src/lib/helpers/feed.ts +++ b/packages/web-client/src/lib/helpers/feed.ts @@ -209,11 +209,12 @@ export async function getHotOrNotPosts( BigInt(from + numberOfPosts), ) if ('Ok' in res) { - const notBetPosts = await filterBets(res.Ok) - const notStuckPosts = await filterStuckCanisterPosts(notBetPosts) - const notReportedPosts = await filterReportedPosts(notStuckPosts) // const notWatchedPosts = await filterPosts(notReportedPosts, 'watch-hon') - const populatedRes = await populatePosts(notReportedPosts, true) + + const notStuckPosts = await filterStuckCanisterPosts(res.Ok) + // const notBetPosts = await filterBets(notStuckPosts) + // const notReportedPosts = await filterReportedPosts(notBetPosts) + const populatedRes = await populatePosts(notStuckPosts, false) if (populatedRes.error) { throw new Error( `Error while populating, ${JSON.stringify(populatedRes)}`, diff --git a/packages/web-client/src/routes/(feed)/(splash)/feed/[id=videoId]/+page.svelte b/packages/web-client/src/routes/(feed)/(splash)/feed/[id=videoId]/+page.svelte index 45880efd0..9806f7f90 100644 --- a/packages/web-client/src/routes/(feed)/(splash)/feed/[id=videoId]/+page.svelte +++ b/packages/web-client/src/routes/(feed)/(splash)/feed/[id=videoId]/+page.svelte @@ -1,8 +1,9 @@
{ {#if $splashScreenPopup.show} diff --git a/packages/web-client/src/components/network-status/NetworkStatus.svelte b/packages/web-client/src/components/network-status/NetworkStatus.svelte index 7920bd091..599998240 100644 --- a/packages/web-client/src/components/network-status/NetworkStatus.svelte +++ b/packages/web-client/src/components/network-status/NetworkStatus.svelte @@ -17,7 +17,7 @@ let networkStatus: 'offline' | 'online' = 'online' {#if networkStatus === 'offline'} diff --git a/packages/web-client/src/components/popup/HotorNotOnboarding.svelte b/packages/web-client/src/components/popup/HotorNotOnboarding.svelte index 28ef2d16f..85dfb0c4c 100644 --- a/packages/web-client/src/components/popup/HotorNotOnboarding.svelte +++ b/packages/web-client/src/components/popup/HotorNotOnboarding.svelte @@ -13,7 +13,7 @@ let step: 1 | 2 | 3 | 4 = 1 {#if $showOnboardingPopup} + out:fade={{ duration: 500 }}> {#if step == 1}
diff --git a/packages/web-client/src/components/popup/Popup.svelte b/packages/web-client/src/components/popup/Popup.svelte index f2ae5ab14..3fa84230c 100644 --- a/packages/web-client/src/components/popup/Popup.svelte +++ b/packages/web-client/src/components/popup/Popup.svelte @@ -16,7 +16,7 @@ const dispatch = createEventDispatcher<{ close: void }>() {#if show}
{ show = false diff --git a/packages/web-client/src/components/vote-result/VoteLost.svelte b/packages/web-client/src/components/vote-result/VoteLost.svelte index f35f6fe95..880b26303 100644 --- a/packages/web-client/src/components/vote-result/VoteLost.svelte +++ b/packages/web-client/src/components/vote-result/VoteLost.svelte @@ -5,7 +5,7 @@ import { fade } from 'svelte/transition'
diff --git a/packages/web-client/src/routes/faq/+page.svelte b/packages/web-client/src/routes/faq/+page.svelte index 5d3c86640..13998ee6a 100644 --- a/packages/web-client/src/routes/faq/+page.svelte +++ b/packages/web-client/src/routes/faq/+page.svelte @@ -44,7 +44,7 @@ function toggleAccordion(i: number) { on:click={() => toggleAccordion(i)} expanded={expandedIndex == i}>
{q.title}
-
+
{q.body}
@@ -55,7 +55,7 @@ function toggleAccordion(i: number) { on:click={() => toggleAccordion(i)} expanded={expandedIndex == i}>
{q.title}
-
+
{q.body}
@@ -66,7 +66,7 @@ function toggleAccordion(i: number) { on:click={() => toggleAccordion(i)} expanded={expandedIndex == i}>
{q.title}
-
+
{q.body}
diff --git a/packages/web-client/src/routes/faq/install-app/+page.svelte b/packages/web-client/src/routes/faq/install-app/+page.svelte index a0a3b40c4..698ea91f9 100644 --- a/packages/web-client/src/routes/faq/install-app/+page.svelte +++ b/packages/web-client/src/routes/faq/install-app/+page.svelte @@ -48,7 +48,7 @@ function toggleAccordion(i: number) { expanded={expandedIndex == 0}>
Android
@@ -74,7 +74,7 @@ function toggleAccordion(i: number) { expanded={expandedIndex == 1}>
iOS
1. Click on share button diff --git a/packages/web-client/src/routes/upload/+page.svelte b/packages/web-client/src/routes/upload/+page.svelte index f96f6747a..de94e5c89 100644 --- a/packages/web-client/src/routes/upload/+page.svelte +++ b/packages/web-client/src/routes/upload/+page.svelte @@ -371,7 +371,7 @@ onDestroy(async () => {
{#if initState != 'allowed'}
@@ -399,8 +399,8 @@ onDestroy(async () => { {#if timerInterval} {#key timerCountdown}
3 ? 'text-white' : 'text-primary', @@ -439,7 +439,7 @@ onDestroy(async () => { {#if initState == 'allowed'} -
+