Skip to content

Commit 1639f3a

Browse files
zhensherlockzhensherlock
committed
feat(docs): add protocol launcher promo videos
1 parent b9a3051 commit 1639f3a

8 files changed

Lines changed: 114 additions & 5 deletions

File tree

‎apps/docs/.vitepress/theme/Layout.vue‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script setup lang="ts">
2+
import DefaultTheme from 'vitepress/theme'
3+
import HomePromoVideo from './components/HomePromoVideo.vue'
4+
5+
const { Layout } = DefaultTheme
6+
</script>
7+
8+
<template>
9+
<Layout>
10+
<template #home-hero-after>
11+
<HomePromoVideo />
12+
</template>
13+
</Layout>
14+
</template>

‎apps/docs/.vitepress/theme/components/HomePromoVideo.vue‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<script setup lang="ts">
2+
import { useData, withBase } from 'vitepress'
3+
import { computed, onMounted, ref, watch } from 'vue'
4+
5+
const { lang } = useData()
6+
const videoRef = ref<HTMLVideoElement>()
7+
8+
const videoSrc = computed(() =>
9+
withBase(lang.value.startsWith('zh') ? '/protocol-launcher-promo.zh.mp4' : '/protocol-launcher-promo.en.mp4'),
10+
)
11+
12+
const playVideo = () => {
13+
if (!videoRef.value) {
14+
return
15+
}
16+
17+
videoRef.value.defaultMuted = true
18+
videoRef.value.muted = true
19+
void videoRef.value.play().catch(() => {})
20+
}
21+
22+
onMounted(() => {
23+
playVideo()
24+
})
25+
26+
watch(videoSrc, () => {
27+
videoRef.value?.load()
28+
playVideo()
29+
})
30+
</script>
31+
32+
<template>
33+
<section class="HomePromoVideo" aria-label="Protocol Launcher promo video">
34+
<div class="container">
35+
<video ref="videoRef" :src="videoSrc" autoplay muted loop playsinline preload="metadata" />
36+
</div>
37+
</section>
38+
</template>
39+
40+
<style scoped>
41+
.HomePromoVideo {
42+
padding: 0 24px 16px;
43+
}
44+
45+
.container {
46+
margin: 0 auto;
47+
max-width: 1152px;
48+
}
49+
50+
video {
51+
display: block;
52+
width: 100%;
53+
aspect-ratio: 16 / 9;
54+
border: 1px solid var(--vp-c-divider);
55+
border-radius: 8px;
56+
background: var(--vp-c-bg-soft);
57+
box-shadow: var(--vp-shadow-3);
58+
}
59+
60+
@media (min-width: 640px) {
61+
.HomePromoVideo {
62+
padding: 8px 48px 24px;
63+
}
64+
}
65+
66+
@media (min-width: 960px) {
67+
.HomePromoVideo {
68+
padding: 16px 64px 32px;
69+
}
70+
}
71+
</style>

‎apps/docs/.vitepress/theme/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@ import DefaultTheme from 'vitepress/theme'
33
import 'virtual:group-icons.css'
44
import '../styles/custom.css'
55
import type { EnhanceAppContext } from 'vitepress/client'
6+
import Layout from './Layout.vue'
67

78
export default {
89
...DefaultTheme,
10+
Layout,
911
enhanceApp: async ({ app }: EnhanceAppContext) => {
1012
const store = createPinia()
1113
app.use(store)

‎apps/docs/public/protocol-launcher-promo.en.mp4‎

2.64 MB
Binary file not shown.

‎apps/docs/public/protocol-launcher-promo.zh.mp4‎

2.6 MB
Binary file not shown.

‎apps/docs/tsconfig.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
{
22
"extends": "../../tsconfig.root.json",
3+
"compilerOptions": {
4+
"lib": ["ES2022", "DOM", "DOM.Iterable"]
5+
},
36
"include": ["./.vitepress/**/*", "./**/*"]
47
}

‎apps/promo-video/index.html‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -711,7 +711,15 @@
711711
</style>
712712
</head>
713713
<body>
714-
<div id="root" data-composition-id="main" data-start="0" data-duration="42" data-width="1920" data-height="1080">
714+
<div
715+
id="root"
716+
data-composition-id="main"
717+
data-start="0"
718+
data-duration="42"
719+
data-width="1920"
720+
data-height="1080"
721+
data-composition-variables='{"lang":"zh"}'
722+
>
715723
<audio
716724
id="background-music"
717725
data-start="0"
@@ -1057,11 +1065,18 @@ <h2 class="headline" style="font-size: 78px; max-width: 850px;" data-i18n-html="
10571065
return queryStart === -1 ? new URLSearchParams() : new URLSearchParams(window.location.hash.slice(queryStart + 1));
10581066
}
10591067

1068+
function readRenderVariables() {
1069+
if (typeof window.__hyperframes?.getVariables !== "function") return {};
1070+
return window.__hyperframes.getVariables() || {};
1071+
}
1072+
10601073
function readPromoLocale() {
10611074
const searchParams = new URLSearchParams(window.location.search);
1075+
const renderVariables = readRenderVariables();
10621076
return normalizePromoLocale(
10631077
searchParams.get("lang") ||
10641078
getHashParams().get("lang") ||
1079+
renderVariables.lang ||
10651080
window.PROTOCOL_LAUNCHER_PROMO?.lang ||
10661081
window.PROTOCOL_LAUNCHER_PROMO_LANG ||
10671082
document.documentElement.dataset.locale,

‎apps/promo-video/package.json‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,16 @@
44
"type": "module",
55
"scripts": {
66
"dev": "npx --yes hyperframes@0.5.7 preview --port 6001",
7-
"build": "npx --yes hyperframes@0.5.7 render",
7+
"build": "pnpm run render:mp4",
88
"check": "npx --yes hyperframes@0.5.7 lint && npx --yes hyperframes@0.5.7 validate && npx --yes hyperframes@0.5.7 inspect",
9-
"render": "npx --yes hyperframes@0.5.7 render",
10-
"render:mp4": "npx --yes hyperframes@0.5.7 render --format mp4 --output renders/protocol-launcher-promo.mp4",
9+
"render": "pnpm run render:mp4",
10+
"render:mp4": "pnpm run render:mp4:i18n",
11+
"render:mp4:zh": "npx --yes hyperframes@0.5.7 render --format mp4 --crf 30 --variables '{\"lang\":\"zh\"}' --output renders/protocol-launcher-promo.zh.mp4",
12+
"render:mp4:en": "npx --yes hyperframes@0.5.7 render --format mp4 --crf 30 --variables '{\"lang\":\"en\"}' --output renders/protocol-launcher-promo.en.mp4",
13+
"render:mp4:i18n": "pnpm run render:mp4:en && pnpm run render:mp4:zh",
14+
"render:mp4:standard": "npx --yes hyperframes@0.5.7 render --format mp4 --output renders/protocol-launcher-promo.mp4",
1115
"render:webm": "npx --yes hyperframes@0.5.7 render --format webm --output renders/protocol-launcher-promo.webm",
12-
"render:all": "pnpm render:mp4 && pnpm render:webm",
16+
"render:all": "pnpm run render:mp4:i18n",
1317
"publish": "npx --yes hyperframes@0.5.7 publish"
1418
}
1519
}

0 commit comments

Comments
 (0)