Optimize feed (#2020)

* Remove swiper library * Move GA utils into a separate file * Move actions into a separate file * Add PlayerRendered component * Add IO for view detection * Add method * Import * Simplify * Import * Use renderer * Update lockfile * Update * Hardcode gtag id * Add label to button * Do not use setTimeout * Decrease thumbnail size * Remove await and perform actions sychronously * Use hls.js from cdn * Add option to set height of thumbnail * Update VideoPlayer usage * Add label * Add browser check * Enable ssr * Delay loading GA * Remove test route * Add hls as global type * Add splash screen in document root * Bump hls js * Update lcokfiel * Add removeSplashScreen method * remove splash screen on load * Remove splash route group * Remove unsused loigic * Show no more videos page * Enable ssr on fetch first video page * Add * Add loadFirstVideo logic * No load from server * Fix slides * Fix var * Add referrals page * Return on empty * Update types * Add referral page * Save refById * Persist referral id * Update pag eurl * Add refById to authState * Sent referral ID to backend * Update invite page * Update invite page * Update page * Add asset * Fix import
yral-dapp · Nov 24, 2023 · 4b69796 · 4b69796
1 parent aea3781
commit 4b69796
Show file tree

Hide file tree

Showing 47 changed files with 972 additions and 677 deletions.
diff --git a/.github/workflows/experiments-deploy.yml b/.github/workflows/experiments-deploy.yml
@@ -64,5 +64,5 @@ jobs:
               issue_number: context.issue.number,
               owner: context.repo.owner,
               repo: context.repo.repo,
-              body: 'Experiments preview build: ${{ needs.deploy-preview.outputs.previewUrl }}'
+              body: 'Experiments preview build: ${{ needs.experiments-deploy-pages.outputs.previewUrl }}'
             })
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "build": "npm run wc:build",
     "ex:check": "npm run check --w @hnn/experiments",
     "ex:build": "npm run build --w @hnn/experiments",
+    "ex:preview": "npm run preview --w @hnn/experiments",
     "ex:dev": "npm run dev --w @hnn/experiments",
     "wc:check": "npm run check --w @hnn/web-client",
     "wc:tsc": "npm run tsc --w @hnn/web-client",

diff --git a/packages/experiments/package.json b/packages/experiments/package.json
@@ -17,11 +17,10 @@
   "dependencies": {
     "clsx": "^2.0.0",
     "google-auth-library": "9.2.0",
-    "hls.js": "^1.4.11",
+    "hls.js": "^1.4.12",
     "idb": "^7.1.1",
     "firebase": "10.5.2",
     "svelte-local-storage-store": "^0.6.0",
-    "swiper": "^8.4.7",
     "throttle-debounce": "^5.0.0"
   },
   "devDependencies": {

diff --git a/packages/experiments/src/app.d.ts b/packages/experiments/src/app.d.ts
@@ -1,6 +1,8 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /// <reference types="@sveltejs/kit" />
 
+declare let Hls: typeof import('hls.js').default
+
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare namespace App {

diff --git a/packages/experiments/src/app.html b/packages/experiments/src/app.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -13,13 +13,58 @@
       content="Hot or Not - Hottest videos on this planet!" />
     <meta name="keywords" content="Shorts, Videos, Fun, Hot, Not" />
     <link rel="manifest" href="/manifest.json" />
+
+    <script
+      async
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/hls.light.min.js"></script>
+
+    <!-- preconnects -->
+
+    <link rel="dns-prefetch" href="https://hotornot.wtf" />
+    <link rel="dns-prefetch" href="https://www.googleapis.com" />
+    <link rel="dns-prefetch" href="https://apis.google.com" />
+    <link rel="dns-prefetch" href="https://experiments-hon.firebaseapp.com" />
+    <link rel="dns-prefetch" href="https://firestore.googleapis.com" />
+    <link
+      rel="dns-prefetch"
+      href="https://customer-2p3jflss4r4hmpnz.cloudflarestream.com" />
+    <link rel="dns-prefetch" href="https://www.googletagmanager.com" />
+
     <meta name="theme-color" content="#E96B25" />
     %sveltekit.head%
   </head>
   <body
     data-sveltekit-preload-data="hover"
     style="overflow: hidden; background-color: black"
     class="h-screen">
+    <splash-screen
+      style="
+        display: flex;
+        position: absolute;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        background-color: #000000;
+        z-index: 15;
+      ">
+      <svg style="height: 14rem; width: 14rem">
+        <use xlink:href="/icons.sprite.svg#hot-or-not-logo" />
+      </svg>
+      <svg
+        style="
+          margin-top: 2rem;
+          height: 1.25rem;
+          width: 1.25rem;
+          fill: white;
+          color: white;
+          opacity: 50%;
+        "
+        class="animate-spin-slow">
+        <use xlink:href="/icons.sprite.svg#loading" />
+      </svg>
+    </splash-screen>
     <div style="display: contents">%sveltekit.body%</div>
   </body>
 </html>
diff --git a/packages/experiments/src/assets/coins-stash.webp b/packages/experiments/src/assets/coins-stash.webp
diff --git a/packages/experiments/src/components/analytics/GA.svelte b/packages/experiments/src/components/analytics/GA.svelte
@@ -1,45 +1,7 @@
-<script lang="ts" context="module">
-// const debugMode = import.meta.env.NODE_ENV === 'development';
-const debugMode = true
-
-export const registerPageView = (url: URL = new URL(window.location.href)) => {
-  if (url?.href) {
-    window.gtag?.('event', 'page_view', {
-      page_location: url.href,
-    })
-  }
-}
-
-export const updateConfig = (params?: Gtag.CustomParams) => {
-  if (window.gtag) {
-    window.gtag('config', 'G-PPE5XD2VKV', {
-      ...params,
-      ...(debugMode && { debug_mode: true }),
-    })
-    return true
-  }
-}
-
-export const setUserProperties = (params?: Gtag.CustomParams) => {
-  window.gtag?.('set', 'user_properties', {
-    ...params,
-  })
-}
-
-export const registerEvent = (
-  eventName: Gtag.EventNames | string,
-  eventParams?: Gtag.ControlParams | Gtag.EventParams | Gtag.CustomParams,
-) => {
-  window.gtag?.('event', eventName, {
-    ...eventParams,
-    ...(debugMode && { debug_mode: true }),
-  })
-}
-</script>
-
 <script lang="ts">
 import { page } from '$app/stores'
 import { splashScreenPopup } from '$stores/popups'
+import { registerPageView, updateConfig } from './GA.utils'
 
 let configured = false
 $: href = $page?.url?.href
@@ -54,7 +16,10 @@ $: if (href || shown) {
 </script>
 
 <svelte:head>
-  <script async defer src="https://www.googletagmanager.com/gtag/js"></script>
+  <script
+    async
+    defer
+    src="https://www.googletagmanager.com/gtag/js?id=G-PPE5XD2VKV"></script>
   <script>
   window.dataLayer = window.dataLayer || []
   function gtag() {

diff --git a/packages/experiments/src/components/analytics/GA.utils.ts b/packages/experiments/src/components/analytics/GA.utils.ts
@@ -0,0 +1,35 @@
+const debugMode = true
+
+export const registerPageView = (url: URL = new URL(window.location.href)) => {
+  if (url?.href) {
+    window.gtag?.('event', 'page_view', {
+      page_location: url.href,
+    })
+  }
+}
+
+export const updateConfig = (params?: Gtag.CustomParams) => {
+  if (window.gtag) {
+    window.gtag('config', 'G-PPE5XD2VKV', {
+      ...params,
+      ...(debugMode && { debug_mode: true }),
+    })
+    return true
+  }
+}
+
+export const setUserProperties = (params?: Gtag.CustomParams) => {
+  window.gtag?.('set', 'user_properties', {
+    ...params,
+  })
+}
+
+export const registerEvent = (
+  eventName: Gtag.EventNames | string,
+  eventParams?: Gtag.ControlParams | Gtag.EventParams | Gtag.CustomParams,
+) => {
+  window.gtag?.('event', eventName, {
+    ...eventParams,
+    ...(debugMode && { debug_mode: true }),
+  })
+}
diff --git a/packages/experiments/src/components/auth/LoginPopup.svelte b/packages/experiments/src/components/auth/LoginPopup.svelte
@@ -88,6 +88,7 @@ function signIn() {
     </div>
     <div class="absolute right-4 top-4">
       <IconButton
+        ariaLabel="Close popup"
         iconName="close"
         iconClass="h-8 w-8"
         disabled={$loading}

diff --git a/packages/experiments/src/components/layout/PlayerLayout.actions.ts b/packages/experiments/src/components/layout/PlayerLayout.actions.ts
@@ -0,0 +1,124 @@
+import { registerEvent } from '$components/analytics/GA.utils'
+import {
+  shareVideo,
+  toggleDislike,
+  toggleLike,
+  viewVideo,
+} from '$lib/db/actions'
+import type { UpDownPost } from '$lib/db/db.types'
+import { updatePostInWatchHistory } from '$lib/idb/history'
+import { authState } from '$stores/auth'
+import { get } from 'svelte/store'
+
+export type WatchProgress = {
+  totalCount: number
+  partialWatchedPercentage: number
+}
+
+export async function sharePost(post: UpDownPost) {
+  try {
+    await navigator.share({
+      title: 'Hot or Not',
+      text: `Check out this video at UpDown! \n${post.description}`,
+      url: `https://experiments.hotornot.wtf/up-down/${post.ouid}@${post.oid}`,
+    })
+  } catch (e) {
+    console.warn("Can't share", e)
+  } finally {
+    await shareVideo({
+      videoId: post.id,
+      videoOid: post.oid,
+      videoUoid: post.ouid,
+      videoUid: post.video_uid,
+    })
+
+    const authStateData = get(authState)
+
+    registerEvent('share_video', {
+      userId: authStateData.userId,
+      video_id: post.id,
+      share_count: post.share_count,
+      anon: !!authStateData.isLoggedIn,
+    })
+  }
+}
+
+export async function likePost(post: UpDownPost) {
+  await toggleLike({
+    videoId: post.id,
+    videoOid: post.oid,
+    videoUoid: post.ouid,
+    videoUid: post.video_uid,
+  })
+
+  // updatePostInWatchHistory('up-down-watch-history', post, {
+  //   liked_by_me: !post.liked_by_me,
+  //   like_count: post.like_count + BigInt(post.liked_by_me ? -1 : 1),
+  // })
+
+  const authStateData = get(authState)
+
+  registerEvent('like_video', {
+    userId: authStateData.userId,
+    video_id: post.id,
+    likes: post.likes_count,
+    anon: !!authStateData.isLoggedIn,
+  })
+}
+
+export async function dislikePost(post: UpDownPost) {
+  await toggleDislike({
+    videoId: post.id,
+    videoOid: post.oid,
+    videoUoid: post.ouid,
+    videoUid: post.video_uid,
+  })
+
+  // updatePostInWatchHistory('up-down-watch-history', post, {
+  //   liked_by_me: !post.liked_by_me,
+  //   like_count: post.like_count + BigInt(post.liked_by_me ? -1 : 1),
+  // })
+
+  const authStateData = get(authState)
+
+  registerEvent('dislike_video', {
+    userId: authStateData.userId,
+    video_id: post.id,
+    likes: post.likes_count,
+    anon: !!authStateData.isLoggedIn,
+  })
+}
+
+export async function viewPost(
+  post: UpDownPost,
+  watchProgress?: WatchProgress,
+) {
+  if (!watchProgress) return
+  const { totalCount, partialWatchedPercentage } = watchProgress
+  if (totalCount === 0 && partialWatchedPercentage === 0) return
+
+  updatePostInWatchHistory('up-down-watch-history', post)
+
+  const watchCount = (totalCount || 0) + (partialWatchedPercentage || 0)
+
+  if (!watchCount) return
+
+  await viewVideo(
+    {
+      videoId: post.id,
+      videoOid: post.oid,
+      videoUoid: post.ouid,
+      videoUid: post.video_uid,
+    },
+    watchCount,
+  )
+
+  const authStateData = get(authState)
+
+  registerEvent('view_video', {
+    userId: authStateData.userId,
+    video_id: post.id,
+    view_count: post.views_count,
+    anon: !!authStateData.isLoggedIn,
+  })
+}