diff --git a/packages/experiments/.env.change b/packages/experiments/.env.change new file mode 100644 index 000000000..c05b556cf --- /dev/null +++ b/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" \ No newline at end of file diff --git a/packages/experiments/.gitignore b/packages/experiments/.gitignore new file mode 100644 index 000000000..aded297df --- /dev/null +++ b/packages/experiments/.gitignore @@ -0,0 +1,8 @@ +node_modules +build +.svelte-kit +.env +/test-results/ +/playwright-report/ +/playwright/.cache/ +/cypress/videos diff --git a/packages/experiments/hooks/server.hooks.ts b/packages/experiments/hooks/server.hooks.ts new file mode 100644 index 000000000..8406b6f9e --- /dev/null +++ b/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 +} diff --git a/packages/experiments/package.json b/packages/experiments/package.json new file mode 100644 index 000000000..320261743 --- /dev/null +++ b/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" + } +} diff --git a/packages/experiments/postcss.config.cjs b/packages/experiments/postcss.config.cjs new file mode 100644 index 000000000..33ad091d2 --- /dev/null +++ b/packages/experiments/postcss.config.cjs @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/packages/experiments/src/app.d.ts b/packages/experiments/src/app.d.ts new file mode 100644 index 000000000..4f2bd003b --- /dev/null +++ b/packages/experiments/src/app.d.ts @@ -0,0 +1,36 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ +/// + +// 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 + | undefined + | null + onappinstalled?: EventHandler | undefined | null + } + + interface HTMLProps { + '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 +} diff --git a/packages/experiments/src/app.html b/packages/experiments/src/app.html new file mode 100644 index 000000000..0d93d5317 --- /dev/null +++ b/packages/experiments/src/app.html @@ -0,0 +1,25 @@ + + + + + + + + Hot or Not + + + + + %sveltekit.head% + + +
%sveltekit.body%
+ + diff --git a/packages/experiments/src/assets/coins-stash.webp b/packages/experiments/src/assets/coins-stash.webp new file mode 100644 index 000000000..e35b011ad Binary files /dev/null and b/packages/experiments/src/assets/coins-stash.webp differ diff --git a/packages/experiments/src/assets/confetti-background.webp b/packages/experiments/src/assets/confetti-background.webp new file mode 100644 index 000000000..e6d49a2a0 Binary files /dev/null and b/packages/experiments/src/assets/confetti-background.webp differ diff --git a/packages/experiments/src/assets/decore-left.png b/packages/experiments/src/assets/decore-left.png new file mode 100644 index 000000000..2e8a946c9 Binary files /dev/null and b/packages/experiments/src/assets/decore-left.png differ diff --git a/packages/experiments/src/assets/decore-right.png b/packages/experiments/src/assets/decore-right.png new file mode 100644 index 000000000..db16b49ed Binary files /dev/null and b/packages/experiments/src/assets/decore-right.png differ diff --git a/packages/experiments/src/components/avatar/Avatar.svelte b/packages/experiments/src/components/avatar/Avatar.svelte new file mode 100644 index 000000000..2ef1850ce --- /dev/null +++ b/packages/experiments/src/components/avatar/Avatar.svelte @@ -0,0 +1,10 @@ + + +Avatar diff --git a/packages/experiments/src/components/button/Button.svelte b/packages/experiments/src/components/button/Button.svelte new file mode 100644 index 000000000..5d8e0e8ca --- /dev/null +++ b/packages/experiments/src/components/button/Button.svelte @@ -0,0 +1,38 @@ + + +{#if href && !preload} + + + +{:else if href && preload} + + + +{:else} + +{/if} diff --git a/packages/experiments/src/components/button/IconButton.svelte b/packages/experiments/src/components/button/IconButton.svelte new file mode 100644 index 000000000..4a3e8ed3a --- /dev/null +++ b/packages/experiments/src/components/button/IconButton.svelte @@ -0,0 +1,53 @@ + + +{#if href && !preload && !disabled} + + + + +{:else if href && preload && !disabled} + + + + +{:else} + +{/if} diff --git a/packages/experiments/src/components/home/Selector.svelte b/packages/experiments/src/components/home/Selector.svelte new file mode 100644 index 000000000..7c377b535 --- /dev/null +++ b/packages/experiments/src/components/home/Selector.svelte @@ -0,0 +1,48 @@ + + + + + diff --git a/packages/experiments/src/components/layout/CameraLayout.svelte b/packages/experiments/src/components/layout/CameraLayout.svelte new file mode 100644 index 000000000..f3869cd89 --- /dev/null +++ b/packages/experiments/src/components/layout/CameraLayout.svelte @@ -0,0 +1,24 @@ + + + (innerHeight = window?.innerHeight)} /> + + + +
+ +
+
+ +
+
+ +
+
+ +
+
diff --git a/packages/experiments/src/components/layout/DotSeparator.svelte b/packages/experiments/src/components/layout/DotSeparator.svelte new file mode 100644 index 000000000..8e2d08ed4 --- /dev/null +++ b/packages/experiments/src/components/layout/DotSeparator.svelte @@ -0,0 +1,5 @@ +
+ {#each Array(6) as _} +
+ {/each} +
diff --git a/packages/experiments/src/components/layout/HomeLayout.svelte b/packages/experiments/src/components/layout/HomeLayout.svelte new file mode 100644 index 000000000..21be5bab6 --- /dev/null +++ b/packages/experiments/src/components/layout/HomeLayout.svelte @@ -0,0 +1,24 @@ + + + (innerHeight = window?.innerHeight)} /> + + + +
+ +
+
+ +
+
diff --git a/packages/experiments/src/components/layout/HotOrNotLayout.svelte b/packages/experiments/src/components/layout/HotOrNotLayout.svelte new file mode 100644 index 000000000..73799752c --- /dev/null +++ b/packages/experiments/src/components/layout/HotOrNotLayout.svelte @@ -0,0 +1,24 @@ + + + (innerHeight = window?.innerHeight)} /> + + + +
+ +
+
+ +
+
diff --git a/packages/experiments/src/components/layout/PlayerLayout.svelte b/packages/experiments/src/components/layout/PlayerLayout.svelte new file mode 100644 index 000000000..f70cd5d69 --- /dev/null +++ b/packages/experiments/src/components/layout/PlayerLayout.svelte @@ -0,0 +1,356 @@ + + +{#if showReportPopup} + +{/if} + + + {#if !unavailable} + background + {/if} + +
+
+
+ + {#if showDescription} + + {/if} + +
+
+ {#if showReportButton} + { + e.stopImmediatePropagation() + showReportPopup = true + }} /> + {/if} + + {#if showReferAndEarnLink} + + {/if} + {#if showLikeButton} +
+ { + e.stopImmediatePropagation() + handleLike() + }} /> + + {getShortNumber(Number(post.like_count))} + +
+ {/if} + {#if showWalletLink} + + {/if} + {#if showShareButton} + { + e.stopImmediatePropagation() + handleShare() + }} /> + {/if} + {#if showHotOrNotButton} + + {/if} +
+
+ {#if $$slots.hotOrNot} +
+ +
+ {/if} +
+ +
+ + diff --git a/packages/experiments/src/components/layout/ProfileLayout.svelte b/packages/experiments/src/components/layout/ProfileLayout.svelte new file mode 100644 index 000000000..fd72c0d3c --- /dev/null +++ b/packages/experiments/src/components/layout/ProfileLayout.svelte @@ -0,0 +1,26 @@ + + + (innerHeight = window?.innerHeight)} /> + + +
+
+ +
+ +
+ +
+
+ +
diff --git a/packages/experiments/src/components/layout/SplashScreen.svelte b/packages/experiments/src/components/layout/SplashScreen.svelte new file mode 100644 index 000000000..5d57f45be --- /dev/null +++ b/packages/experiments/src/components/layout/SplashScreen.svelte @@ -0,0 +1,19 @@ + + +{#if $splashScreenPopup.show} + + + + +{/if} diff --git a/packages/experiments/src/components/layout/UploadLayout.svelte b/packages/experiments/src/components/layout/UploadLayout.svelte new file mode 100644 index 000000000..99ab8734f --- /dev/null +++ b/packages/experiments/src/components/layout/UploadLayout.svelte @@ -0,0 +1,17 @@ + + + +
+
+ +
+ +
+ +
diff --git a/packages/experiments/src/components/navigation/BottomNavigation.svelte b/packages/experiments/src/components/navigation/BottomNavigation.svelte new file mode 100644 index 000000000..241fbf9bc --- /dev/null +++ b/packages/experiments/src/components/navigation/BottomNavigation.svelte @@ -0,0 +1,80 @@ + + + + +
+ + +
+ + + +
+ + +
+ + diff --git a/packages/experiments/src/components/network-status/NetworkStatus.svelte b/packages/experiments/src/components/network-status/NetworkStatus.svelte new file mode 100644 index 000000000..7920bd091 --- /dev/null +++ b/packages/experiments/src/components/network-status/NetworkStatus.svelte @@ -0,0 +1,30 @@ + + + { + networkStatus = 'offline' + offline = true + }} + on:online={() => { + offline = false + setTimeout(() => (networkStatus = 'online'), 500) + }} /> + +{#if networkStatus === 'offline'} + + {#if offline} + Offline. Please check your internet connection. + {:else} + Online + {/if} + +{/if} diff --git a/packages/experiments/src/components/seo/SEOMetaHeader.svelte b/packages/experiments/src/components/seo/SEOMetaHeader.svelte new file mode 100644 index 000000000..12e8f377a --- /dev/null +++ b/packages/experiments/src/components/seo/SEOMetaHeader.svelte @@ -0,0 +1,18 @@ + + + + {siteTitle} + + + + + + + + + diff --git a/packages/experiments/src/components/switch/Switch.svelte b/packages/experiments/src/components/switch/Switch.svelte new file mode 100644 index 000000000..0c4e3fb13 --- /dev/null +++ b/packages/experiments/src/components/switch/Switch.svelte @@ -0,0 +1,14 @@ + + + diff --git a/packages/experiments/src/components/tabs/DotTabs.svelte b/packages/experiments/src/components/tabs/DotTabs.svelte new file mode 100644 index 000000000..74af3b93b --- /dev/null +++ b/packages/experiments/src/components/tabs/DotTabs.svelte @@ -0,0 +1,23 @@ + + + + {#each tabs as tab, i} + {@const active = selectedIndex == i} + + {/each} + diff --git a/packages/experiments/src/components/tabs/ProfileTabs.svelte b/packages/experiments/src/components/tabs/ProfileTabs.svelte new file mode 100644 index 000000000..ed4f5f2e2 --- /dev/null +++ b/packages/experiments/src/components/tabs/ProfileTabs.svelte @@ -0,0 +1,38 @@ + + + + + +
+ diff --git a/packages/experiments/src/components/tags-input/TagsInput.svelte b/packages/experiments/src/components/tags-input/TagsInput.svelte new file mode 100644 index 000000000..bc251cf0d --- /dev/null +++ b/packages/experiments/src/components/tags-input/TagsInput.svelte @@ -0,0 +1,88 @@ + + + + {#each tags as tag} +
+ + #{tag} + + removeTag(tag)} /> +
+ {/each} + {#if showError} + + Max hashtags number reached + + {:else} + + {/if} +
diff --git a/packages/experiments/src/components/tooltip/Tooltip.svelte b/packages/experiments/src/components/tooltip/Tooltip.svelte new file mode 100644 index 000000000..6683a496a --- /dev/null +++ b/packages/experiments/src/components/tooltip/Tooltip.svelte @@ -0,0 +1,47 @@ + + + (show = false)} + class="relative flex w-min cursor-pointer"> + {#if show} +
+ + {text} + + +
+ {/if} +
(show = !show)}> + +
+
diff --git a/packages/experiments/src/components/up-down/UpDownVote.svelte b/packages/experiments/src/components/up-down/UpDownVote.svelte new file mode 100644 index 000000000..6f5c393dc --- /dev/null +++ b/packages/experiments/src/components/up-down/UpDownVote.svelte @@ -0,0 +1,22 @@ + + + + + + {#if voteDetails} + + {:else} + (voteDetails = detail)} /> + {/if} + diff --git a/packages/experiments/src/components/up-down/UpDownVoteControls.svelte b/packages/experiments/src/components/up-down/UpDownVoteControls.svelte new file mode 100644 index 000000000..eb1839e5b --- /dev/null +++ b/packages/experiments/src/components/up-down/UpDownVoteControls.svelte @@ -0,0 +1,102 @@ + + +
+
+ + + +
+
+ +
+
+ 100 +
+
+ Current scrore +
+
+ +
+
diff --git a/packages/experiments/src/components/up-down/UpDownVoteOutcome.svelte b/packages/experiments/src/components/up-down/UpDownVoteOutcome.svelte new file mode 100644 index 000000000..7474abee7 --- /dev/null +++ b/packages/experiments/src/components/up-down/UpDownVoteOutcome.svelte @@ -0,0 +1,85 @@ + + +
+
+
+ +
+
{voteDetails.direction}
+
+
+ +
+ + {voteDetails.coins} + +
+
+ {#if $timeLeft} +
+
+ + {$timeLeft} +
+
Your vote has been placed
+
+ {/if} +
diff --git a/packages/experiments/src/components/upload/UploadStep.svelte b/packages/experiments/src/components/upload/UploadStep.svelte new file mode 100644 index 000000000..5a07b7ba1 --- /dev/null +++ b/packages/experiments/src/components/upload/UploadStep.svelte @@ -0,0 +1,23 @@ + + +
+ {#if status !== 'finished'} + {step} + {:else} + + {/if} +
diff --git a/packages/experiments/src/components/upload/UploadTypes.ts b/packages/experiments/src/components/upload/UploadTypes.ts new file mode 100644 index 000000000..b8d3fa136 --- /dev/null +++ b/packages/experiments/src/components/upload/UploadTypes.ts @@ -0,0 +1,12 @@ +import type { FacingMode } from '$lib/helpers/camera' + +export interface CameraControls { + flash: 'flash-fill' | 'flash' | 'flash-not-available' | 'hide' + flip: { + facingMode: FacingMode + show: boolean + } + timer: 'off' | '5s' | '10s' +} + +export type UploadStatus = 'to-upload' | 'uploading' | 'uploaded' diff --git a/packages/experiments/src/components/video/VideoPlayer.svelte b/packages/experiments/src/components/video/VideoPlayer.svelte new file mode 100644 index 000000000..6021ff3b8 --- /dev/null +++ b/packages/experiments/src/components/video/VideoPlayer.svelte @@ -0,0 +1,268 @@ + + +