mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
75 lines
2.8 KiB
Plaintext
75 lines
2.8 KiB
Plaintext
---
|
|
import MuxLogoSmall from '@/assets/logos/mux-small.svg?react';
|
|
import BetaPill from '@/components/BetaPill';
|
|
import FrameworkControl from '@/components/home/FrameworkControl';
|
|
import HeroVideo from '@/components/home/HeroVideo';
|
|
import SkinControl from '@/components/home/SkinControl';
|
|
import { MUX_URL, VJS10_DEMO_VIDEO } from '@/consts';
|
|
|
|
const times = [0, 12.9, 17.61, 15.8, 7.72, 4.8, 3.3];
|
|
const posterTime = times[Math.floor(Math.random() * times.length)];
|
|
const poster = `${VJS10_DEMO_VIDEO.poster}?time=${posterTime}`;
|
|
---
|
|
|
|
<link
|
|
rel="preload"
|
|
href={poster}
|
|
as="image"
|
|
type="image/webp"
|
|
fetchpriority="high"
|
|
slot="priority-head"
|
|
/>
|
|
<header
|
|
class="relative mx-auto mb-25 grid w-full max-w-305 grid-cols-1 px-5 pt-19 [grid-template-areas:var(--grid-template-areas)] md:py-0 md:[grid-template-areas:var(--md-grid-template-areas)]"
|
|
style="--grid-template-areas: 'pill' 'title' 'description' 'video' 'mux' 'control'; --md-grid-template-areas: 'video' 'mux' 'description' 'control'"
|
|
>
|
|
<BetaPill
|
|
className="mb-7 justify-self-center sm:hidden"
|
|
style={{ gridArea: "pill" }}
|
|
/>
|
|
<h1
|
|
class="pointer-events-none z-10 mb-5 w-full self-center justify-self-center text-center font-display text-h2 text-balance uppercase [grid-area:var(--grid-area)] md:mb-0 md:px-5 md:text-h15 md:text-manila-light md:[grid-area:var(--md-grid-area)] lg:text-h1"
|
|
style="--grid-area: title; --md-grid-area: video;"
|
|
>
|
|
The Open Source Player <br class="lg:hidden" /><span
|
|
class="text-stroke-faded-black md:text-stroke-manila-light dark:text-stroke-manila-light"
|
|
>for the Web</span
|
|
>
|
|
</h1>
|
|
{/* the additional px-5 is intentional */}
|
|
<p
|
|
class="mx-auto mb-20 w-full max-w-195 px-5 text-center text-p2 text-balance text-warm-gray md:mb-25 lg:text-p1 dark:text-manila-light"
|
|
style="grid-area:description"
|
|
>
|
|
For over 15 years, Video.js has been the world's web video player. Now
|
|
rebuilt in v10 for modern development and performance.
|
|
</p>
|
|
|
|
<div
|
|
class="relative mb-3 aspect-2/1 md:mb-4 md:aspect-1180/570"
|
|
style="grid-area:video"
|
|
>
|
|
<HeroVideo client:load className="absolute inset-0" poster={poster} />
|
|
</div>
|
|
<p
|
|
class="mb-11 flex items-center justify-center gap-1.5 text-p3 md:mb-20 md:justify-end md:gap-2 md:pr-6 md:font-display md:text-(length:--md-text) md:uppercase"
|
|
style="grid-area:mux;--md-text:0.6875rem;"
|
|
>
|
|
Video hosting sponsored by <a
|
|
class="relative inline-flex w-11 items-center justify-center md:w-12.5"
|
|
href={MUX_URL}
|
|
target="_blank"
|
|
rel="noopener"
|
|
>
|
|
<MuxLogoSmall width="100%" />
|
|
</a>
|
|
</p>
|
|
<div
|
|
class="grid grid-cols-1 items-center justify-center gap-9 md:grid-cols-2"
|
|
style="grid-area:control"
|
|
>
|
|
<SkinControl client:idle />
|
|
<FrameworkControl client:idle className="hidden md:grid" />
|
|
</div>
|
|
</header>
|