Create experiments project

packages/experiments/.env.change

@@ -0,0 +1,9 @@
+VITE_GA_TRACKING_ID="Google Analytics Tracking ID"
+VITE_FIREBASE_API_KEY="Firebase"
+VITE_FIREBASE_AUTH_DOMAIN="Firebase"
+VITE_FIREBASE_PROJECT_ID="Firebase"
+VITE_FIREBASE_STORAGE_BUCKET="Firebase"
+VITE_FIREBASE_MESSAGING_SENDER_ID="Firebase"
+VITE_FIREBASE_APP_ID="Firebase"
+VITE_FIREBASE_MEASUREMENT_ID="Firebase"
+VITE_CLOUDFLARE_WORKERS_API_HOST="Workers deployment URL"

packages/experiments/.gitignore

@@ -0,0 +1,8 @@
+node_modules
+build
+.svelte-kit
+.env
+/test-results/
+/playwright-report/
+/playwright/.cache/
+/cypress/videos

packages/experiments/hooks/server.hooks.ts

@@ -0,0 +1,14 @@
+import type { Handle } from '@sveltejs/kit'
+
+export const handle: Handle = async ({ event, resolve }) => {
+  const response = await resolve(event)
+  response.headers.set('X-Frame-Options', 'DENY')
+  response.headers.set('X-Content-Type-Options', 'nosniff')
+  response.headers.set('Referrer-Policy', 'no-referrer')
+  response.headers.set(
+    'Permissions-Policy',
+    'autoplay=*, camera=*, microphone=*',
+  )
+
+  return response
+}

packages/experiments/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@hnn/experiments",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev --host",
+    "build": "vite build",
+    "cypress": "npx cypress open",
+    "preview": "vite preview",
+    "test": "npx cypress run",
+    "test:record": "npx cypress run --record",
+    "test:vi": "npm run test:vi:components && npm run test:vi:e2e",
+    "test:vi:components": "npx vitest --watch false --coverage --config vitest.config.components.ts",
+    "test:vi:e2e": "npx vitest  --watch false --config vitest.config.e2e.ts",
+    "build:static": "BUILD_MODE=static vite build",
+    "preview:static": "BUILD_MODE=static vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json --ignore .svelte-kit,build,tests --threshold warning --diagnostic-sources \"js,ts,svelte\"",
+    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+    "tsc": "tsc -b",
+    "sync": "svelte-kit sync",
+    "lint": "prettier --check --plugin-search-dir=. . && eslint .",
+    "format": "prettier --write --plugin-search-dir=. ."
+  },
+  "dependencies": {
+    "clsx": "^2.0.0",
+    "hls.js": "^1.4.11",
+    "idb": "^7.1.1",
+    "svelte-local-storage-store": "^0.6.0",
+    "swiper": "^8.4.7",
+    "throttle-debounce": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-cloudflare": "^2.3.3",
+    "@sveltejs/adapter-static": "^2.0.3",
+    "@sveltejs/kit": "^1.24.0",
+    "@tailwindcss/forms": "^0.5.6",
+    "@types/gtag.js": "^0.0.13",
+    "@types/throttle-debounce": "^5.0.0",
+    "@types/w3c-image-capture": "^1.0.7",
+    "autoprefixer": "^10.4.15",
+    "date-fns": "^2.30.0",
+    "dotenv": "^16.3.1",
+    "isomorphic-fetch": "^3.0.0",
+    "postcss": "^8.4.29",
+    "svelte": "^3.59.2",
+    "svelte-check": "^3.5.1",
+    "svelte-easy-crop": "^2.0.1",
+    "svelte-preprocess": "^5.0.4",
+    "tailwindcss": "^3.3.3",
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9"
+  }
+}

packages/experiments/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

packages/experiments/src/app.d.ts

@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/// <reference types="@sveltejs/kit" />
+
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare namespace App {
+  // interface Locals {}
+  // interface Platform {}
+  // interface Session {}
+  // interface Stuff {}
+}
+
+namespace svelte.JSX {
+  interface SvelteWindowProps {
+    onbeforeinstallprompt?:
+      | EventHandler<BeforeInstallPromptEvent, Window>
+      | undefined
+      | null
+    onappinstalled?: EventHandler<Event, Window> | undefined | null
+  }
+
+  interface HTMLProps<T> {
+    'disableremoteplayback'?: boolean
+    'disablepictureinpicture'?: boolean
+    'x-webkit-airplay'?: 'deny' | 'allow'
+  }
+}
+
+interface BeforeInstallPromptEvent extends Event {
+  readonly platforms: string[]
+  readonly userChoice: Promise<{
+    outcome: 'accepted' | 'dismissed'
+    platform: string
+  }>
+  prompt(): Promise<void>
+}

packages/experiments/src/app.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <link rel="apple-touch-icon" href="%sveltekit.assets%/favicon.png" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
+    <title>Hot or Not</title>
+    <meta
+      name="description"
+      content="Hot or Not - Hottest videos on this planet!" />
+    <meta name="keywords" content="Shorts, Videos, Fun, Hot, Not" />
+    <link rel="manifest" href="/manifest.json" />
+    <meta name="theme-color" content="#E96B25" />
+    %sveltekit.head%
+  </head>
+  <body
+    data-sveltekit-preload-data="hover"
+    style="overflow: hidden; background-color: black"
+    class="h-screen">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>

packages/experiments/src/components/avatar/Avatar.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+export let src = ''
+export { exportClass as class }
+let exportClass: any = ''
+</script>
+
+<img
+  alt="Avatar"
+  {src}
+  class="rounded-full border-2 border-white object-cover object-center {exportClass}" />

packages/experiments/src/components/button/Button.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+import c from 'clsx'
+
+export let type: 'primary' | 'secondary' = 'primary'
+export let disabled = false
+export let href = ''
+export let preload = false
+export { exportClass as class }
+let exportClass: any = ''
+
+$: classes = c(
+  'flex items-center duration-200 transition-all rounded-full !select-none justify-center focus:outline-none px-4 py-3 font-semibold text-white',
+  {
+    'bg-orange-500 shadow-button-primary focus:bg-orange-700':
+      type === 'primary' && !disabled,
+    'bg-orange-900 border-0': type === 'primary' && disabled,
+    'border-white/40 focus:bg-white/20 border-2 bg-transparent':
+      type === 'secondary' && !disabled,
+    'border-white/10 bg-zinc-600': type === 'secondary' && disabled,
+    'text-zinc-400 pointer-events-none': disabled,
+  },
+  exportClass,
+)
+</script>
+
+{#if href && !preload}
+  <a {href} class={classes}>
+    <slot />
+  </a>
+{:else if href && preload}
+  <a data-sveltekit-preload-data="tap" {href} class={classes}>
+    <slot />
+  </a>
+{:else}
+  <button on:click {disabled} class={classes}>
+    <slot />
+  </button>
+{/if}

packages/experiments/src/components/button/IconButton.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+import Icon from '$components/icon/Icon.svelte'
+import type { IconName } from '$components/icon/icon.type'
+import c from 'clsx'
+
+export let disabled = false
+export let iconName: IconName
+export let iconClass: string
+export let href = ''
+export let preload = false
+export let ariaLabel = ''
+export { exportClass as class }
+let exportClass: string = ''
+
+const style = '-webkit-tap-highlight-color: transparent;'
+
+$: classes = c(
+  'flex items-center select-none justify-center focus:outline-none ',
+  {
+    'pointer-events-none opacity-60 grayscale': disabled,
+  },
+  exportClass,
+)
+</script>
+
+{#if href && !preload && !disabled}
+  <a aria-label={ariaLabel} {style} on:click {href} class={classes}>
+    <Icon name={iconName} class={iconClass} />
+    <slot />
+  </a>
+{:else if href && preload && !disabled}
+  <a
+    aria-label={ariaLabel}
+    {style}
+    on:click
+    data-sveltekit-preload-data="tap"
+    {href}
+    class={classes}>
+    <Icon name={iconName} class={iconClass} />
+    <slot />
+  </a>
+{:else}
+  <button
+    type="button"
+    aria-label={ariaLabel}
+    {style}
+    on:click
+    {disabled}
+    class={classes}>
+    <Icon name={iconName} class={iconClass} />
+    <slot />
+  </button>
+{/if}

packages/experiments/src/components/home/Selector.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+import Icon from '$components/icon/Icon.svelte'
+import { playerState } from '$stores/playerState'
+import c from 'clsx'
+export let selected: 'videos' | 'hot-or-not' = 'hot-or-not'
+export let showDot: 'videos' | 'hot-or-not' | null = null
+
+$: feedUrl =
+  $playerState.currentFeedUrl == 'no-videos' ? '' : $playerState.currentFeedUrl
+$: hotOrNotUrl =
+  $playerState.currentHotOrNotUrl == 'no-videos'
+    ? ''
+    : $playerState.currentFeedUrl
+</script>
+
+<home-selector class="flex w-full items-center justify-center pt-4">
+  <div
+    class="relative flex items-center justify-center space-x-6 rounded-full bg-black/50 py-3 pr-5 text-white">
+    <selector
+      class={c(
+        'absolute inset-x-0 z-[1] h-9 rounded-full bg-primary p-4 transition-all duration-200',
+        selected === 'hot-or-not'
+          ? 'w-[6.5rem]  translate-x-2'
+          : 'w-[5.5rem] translate-x-[6.75rem]',
+      )} />
+    {#if showDot === 'hot-or-not'}
+      <selector-dot
+        class="absolute right-3 top-2 z-[2] rounded-full border-[1px] border-white/50 bg-red-500 p-[0.20rem]" />
+    {:else if showDot === 'videos'}
+      <selector-dot
+        class="absolute left-12 top-2 z-[2] rounded-full border-[1px] border-white/50 bg-red-500 p-[0.20rem]" />
+    {/if}
+
+    <a
+      href="/hotornot/{hotOrNotUrl}"
+      on:click={() => (selected = 'hot-or-not')}
+      class="z-[2]">
+      Hot or Not
+    </a>
+    <a
+      href="/feed/{feedUrl}"
+      on:click={() => (selected = 'videos')}
+      class="z-[2] flex items-center space-x-2">
+      <Icon name="home-fill" class="h-3 w-3 text-white" />
+      <span>Home</span>
+    </a>
+  </div>
+</home-selector>

packages/experiments/src/components/layout/CameraLayout.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+import { browser } from '$app/environment'
+$: innerHeight = browser ? window?.innerHeight : 0
+</script>
+
+<svelte:window on:resize={() => (innerHeight = window?.innerHeight)} />
+
+<camera-layout
+  style="height: {innerHeight ? `${innerHeight}px` : '100vh;'}"
+  class="relative block h-full w-full overflow-hidden text-white">
+  <slot name="content" />
+  <div class="absolute inset-x-0 top-4 z-[6] flex items-center justify-center">
+    <slot name="top" />
+  </div>
+  <div class="max-w-16 absolute inset-y-0 right-2 z-[5] h-full">
+    <slot name="right-camera-controls" />
+  </div>
+  <div class="absolute bottom-20 z-[5] h-24 w-full">
+    <slot name="bottom-camera-controls" />
+  </div>
+  <div class="absolute inset-x-0 bottom-0 z-[5] h-16">
+    <slot name="bottom-navigation" />
+  </div>
+</camera-layout>

packages/experiments/src/components/layout/DotSeparator.svelte

@@ -0,0 +1,5 @@
+<div class="flex w-full items-center justify-center space-x-2">
+  {#each Array(6) as _}
+    <div class="h-0.5 w-0.5 rounded bg-white" />
+  {/each}
+</div>

packages/experiments/src/components/layout/HomeLayout.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+import { browser } from '$app/environment'
+import { playerState } from '$stores/playerState'
+
+export let testMode = false
+
+$: testClasses = testMode ? 'border-2 border-white/30' : ''
+$: innerHeight = browser ? window?.innerHeight : 0
+</script>
+
+<svelte:window on:resize={() => (innerHeight = window?.innerHeight)} />
+
+<home
+  style="height: {innerHeight ? `${innerHeight}px` : '100vh;'}"
+  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}">
+    <slot name="top" />
+  </div>
+  <div class="absolute inset-x-0 bottom-0 z-[10] max-h-16 {testClasses}">
+    <slot name="bottom-navigation" />
+  </div>
+</home>

packages/experiments/src/components/layout/HotOrNotLayout.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+import { browser } from '$app/environment'
+
+export let testMode = false
+
+$: testClasses = testMode ? 'border-2 border-white/30' : ''
+$: innerHeight = browser ? window?.innerHeight : 0
+</script>
+
+<svelte:window on:resize={() => (innerHeight = window?.innerHeight)} />
+
+<home
+  style="height: {innerHeight ? `${innerHeight}px` : '100vh;'}"
+  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-[5] {testClasses}">
+    <slot name="top" />
+  </div>
+  <div
+    class="pointer-events-none absolute inset-x-0 bottom-0 z-[5] max-h-48 {testClasses}">
+    <slot name="bottom-navigation" />
+  </div>
+</home>