Update onboarding on up-down game (#2014)

* Add tos & privacy policy * Update scopes * Fix arrow location * Update not logged in state * Update analytics event resitration * Cleanup * Set up[ ID
yral-dapp · Nov 16, 2023 · a886e7a · a886e7a
1 parent 343f1b8
commit a886e7a
Show file tree

Hide file tree

Showing 11 changed files with 747 additions and 56 deletions.
diff --git a/packages/experiments/src/components/analytics/GA.svelte b/packages/experiments/src/components/analytics/GA.svelte
@@ -12,7 +12,7 @@ export const registerPageView = (url: URL = new URL(window.location.href)) => {
 
 export const updateConfig = (params?: Gtag.CustomParams) => {
   if (window.gtag) {
-    window.gtag('config', import.meta.env.VITE_GA_TRACKING_ID, {
+    window.gtag('config', 'G-PPE5XD2VKV', {
       ...params,
       ...(debugMode && { debug_mode: true }),
     })

diff --git a/packages/experiments/src/components/auth/LoginPopup.svelte b/packages/experiments/src/components/auth/LoginPopup.svelte
@@ -16,7 +16,8 @@ let error = ''
 function signIn() {
   $loading = true
   const provider = new GoogleAuthProvider()
-  provider.addScope('https://www.googleapis.com/auth/contacts.readonly')
+  provider.addScope('https://www.googleapis.com/auth/auth/userinfo.email')
+  provider.addScope('https://www.googleapis.com/auth/auth/userinfo.profile')
 
   const app = getApp()
   const auth = getAuth(app)

diff --git a/packages/experiments/src/components/layout/PlayerLayout.svelte b/packages/experiments/src/components/layout/PlayerLayout.svelte
@@ -6,7 +6,6 @@ import { registerEvent } from '$components/analytics/GA.svelte'
 import { getThumbnailUrl } from '$lib/utils/cloudflare'
 import getDefaultImageUrl from '$lib/utils/getDefaultImageUrl'
 import { generateRandomName } from '$lib/utils/randomUsername'
-import { getShortNumber } from '$lib/utils/shortNumber'
 import { authState } from '$stores/auth'
 import { debounce } from 'throttle-debounce'
 import type { DislikeRecord, LikeRecord, UpDownPost } from '$lib/db/db.types'
@@ -28,7 +27,6 @@ export let showLikeButton = false
 export let showTimer = false
 export let showDislikeButton = false
 export let unavailable = false
-export let source: 'ud-feed' | 'result'
 
 let liked = false
 let disliked = false
@@ -74,19 +72,23 @@ async function handleShare() {
       text: `Check out this video at UpDown! \n${post.description}`,
       url: `https://experiments.hotornot.wtf/up-down/${post.ouid}@${post.oid}`,
     })
-  } catch (_) {}
-  registerEvent('share_video', {
-    source,
-    userId: $authState.userId,
-    video_publisher_id: post.ouid,
-    video_id: post.oid,
-  })
-  await shareVideo({
-    videoId: post.id,
-    videoOid: post.oid,
-    videoUoid: post.ouid,
-    videoUid: post.video_uid,
-  })
+  } catch (e) {
+    console.warn("Can't share", e)
+  } finally {
+    await shareVideo({
+      videoId: post.id,
+      videoOid: post.oid,
+      videoUoid: post.ouid,
+      videoUid: post.video_uid,
+    })
+
+    registerEvent('share_video', {
+      userId: $authState.userId,
+      video_id: post.id,
+      share_count: post.share_count,
+      anon: !!$authState.isLoggedIn,
+    })
+  }
 }
 
 function recordView(percentageWatched: number) {
@@ -121,15 +123,12 @@ async function handleLike() {
   //   like_count: post.like_count + BigInt(post.liked_by_me ? -1 : 1),
   // })
 
-  // registerEvent('like_video', {
-  //   source,
-  //   userId: $userProfile.principal_id,
-  //   video_publisher_id:
-  //     post.created_by_unique_user_name[0] ?? post.created_by_user_principal_id,
-  //   video_publisher_canister_id: post.publisher_canister_id,
-  //   video_id: post.id,
-  //   likes: post.like_count,
-  // })
+  registerEvent('like_video', {
+    userId: $authState.userId,
+    video_id: post.id,
+    likes: post.likes_count,
+    anon: !!$authState.isLoggedIn,
+  })
 }
 
 async function handleDislike() {
@@ -149,15 +148,12 @@ async function handleDislike() {
   //   like_count: post.like_count + BigInt(post.liked_by_me ? -1 : 1),
   // })
 
-  // registerEvent('like_video', {
-  //   source,
-  //   userId: $userProfile.principal_id,
-  //   video_publisher_id:
-  //     post.created_by_unique_user_name[0] ?? post.created_by_user_principal_id,
-  //   video_publisher_canister_id: post.publisher_canister_id,
-  //   video_id: post.id,
-  //   likes: post.like_count,
-  // })
+  registerEvent('dislike_video', {
+    userId: $authState.userId,
+    video_id: post.id,
+    likes: post.likes_count,
+    anon: !!$authState.isLoggedIn,
+  })
 }
 
 async function updateStats() {
@@ -178,13 +174,6 @@ async function updateStats() {
 
   if (!watchCount) return
 
-  registerEvent('view_video', {
-    source,
-    id: post.oid,
-    i: index,
-    watch_count: watchCount,
-  })
-
   await viewVideo(
     {
       videoId: post.id,
@@ -194,6 +183,13 @@ async function updateStats() {
     },
     watchCount,
   )
+
+  registerEvent('view_video', {
+    userId: $authState.userId,
+    video_id: post.id,
+    view_count: post.views_count,
+    anon: !!$authState.isLoggedIn,
+  })
 }
 
 $: avatarUrl = getDefaultImageUrl(post.ouid)

diff --git a/packages/experiments/src/components/popup/Onboarding.svelte b/packages/experiments/src/components/popup/Onboarding.svelte
@@ -43,7 +43,7 @@ let step: 1 | 2 | 3 | 4 | 5 | 6 | 7 = 1
       </div>
     {:else if step == 2}
       <div
-        class="flex h-full w-full max-w-md flex-col items-center justify-center space-y-8">
+        class="relative flex h-full w-full max-w-md flex-col items-center justify-center space-y-8">
         <div
           class="flex w-full flex-col items-center justify-center space-y-6 text-center">
           <div class="text-3xl font-bold">Current Score Overview</div>
@@ -90,7 +90,7 @@ let step: 1 | 2 | 3 | 4 | 5 | 6 | 7 = 1
       </div>
     {:else if step == 4}
       <div
-        class="flex h-full w-full max-w-md flex-col items-center justify-center space-y-8">
+        class="relative flex h-full w-full max-w-md flex-col items-center justify-center space-y-8">
         <div
           class="flex w-full flex-col items-center justify-center space-y-6 text-center">
           <div class="text-3xl font-bold">Cast your Vote</div>
@@ -103,7 +103,7 @@ let step: 1 | 2 | 3 | 4 | 5 | 6 | 7 = 1
           <Icon name="arrow-long-down" class="h-52 w-8" />
         </div>
         <div
-          style="transform: scaleX(-1);"
+          style="transform: scaleX(-1)"
           class="absolute bottom-24 right-10 z-[10]">
           <Icon name="arrow-long-down" class="h-56 w-8" />
         </div>
@@ -131,7 +131,7 @@ let step: 1 | 2 | 3 | 4 | 5 | 6 | 7 = 1
         </div>
 
         <div
-          style="transform: scaleX(-1);"
+          style="transform: scaleX(-1)"
           class="absolute bottom-60 right-0 z-[10]">
           <Icon name="arrow-long-down" class="h-56 w-8" />
         </div>

diff --git a/packages/experiments/src/lib/helpers/feed.ts b/packages/experiments/src/lib/helpers/feed.ts
@@ -9,9 +9,8 @@ import {
 import type { CollectionName, UpDownPost } from '../db/db.types'
 import { getDb } from '$lib/db'
 
-export async function getVideos(lastRef?: QueryDocumentSnapshot) {
+export async function getVideos(_lastRef?: QueryDocumentSnapshot) {
   try {
-    console.log({ lastRef })
     const videos: UpDownPost[] = []
     const db = getDb()
     const q = query(

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
@@ -43,7 +43,6 @@ async function fetchNextVideos() {
 
   loading = true
   const res = await getVideos()
-  console.log({ res })
   if (!res.ok || !res.videos) {
     return
   }
@@ -99,7 +98,6 @@ beforeNavigate(() => {
         <PlayerLayout
           bind:post
           index={i}
-          source="ud-feed"
           showLikeButton
           showDislikeButton
           showTimer

diff --git a/packages/experiments/src/routes/(feed)/(splash)/up-down/votes/[voteId]/+page.svelte b/packages/experiments/src/routes/(feed)/(splash)/up-down/votes/[voteId]/+page.svelte
@@ -72,7 +72,7 @@ beforeNavigate(() => {
       </div>
     </div>
   {:else}
-    <PlayerLayout bind:post index={0} source="ud-feed" showShareButton>
+    <PlayerLayout bind:post index={0} showShareButton>
       <VideoPlayer
         on:loaded={() => hideSplashScreen(500)}
         index={0}

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
@@ -158,14 +158,15 @@ onMount(() => getTransactions())
           href="/up-down"
           iconName="caret-left"
           iconClass="text-white w-6 h-6" />
-        <div class="flex flex-col items-center py-4">
+        <div class="flex flex-col items-start py-4">
           <div class="self-start text-xs">Welcome!</div>
-          <div class="text-lg font-bold text-white">
-            {generateRandomName('name', $anonUser.id)}
-          </div>
+          <div class="text-lg font-bold text-white">User</div>
         </div>
       </div>
-      <Avatar src={getDefaultImageUrl($anonUser.id)} class="h-10 w-10" />
+      <div
+        class="flex h-10 w-10 items-center justify-center rounded-full ring-2 ring-white">
+        <Icon name="user-single" class="h-6 w-6 text-white/50" />
+      </div>
     </div>
     <div class="mt-8 flex flex-col items-center gap-4">
       <div>Login to view your wallet</div>

diff --git a/packages/experiments/src/routes/+layout.svelte b/packages/experiments/src/routes/+layout.svelte
@@ -25,6 +25,7 @@ let GA: any
 async function initializeGA() {
   try {
     GA = (await import('$components/analytics/GA.svelte')).default
+    console.info('loaded GA')
   } catch (_) {
     Log('warn', 'Could not load GA')
   }