feat(site): simple api reference examples (#472)

2026-08-16 02:45:09 +00:00 · 2026-02-09 14:38:01 -06:00
parent 6b67428de3
commit fe56d8ca65
50 changed files with 1084 additions and 2 deletions
@@ -0,0 +1,38 @@
+---
+import type { BundledLanguage } from 'shiki';
+
+import ServerCode from '@/components/Code/ServerCode.astro';
+import { Tab, TabsList, TabsPanel, TabsRoot } from '@/components/Tabs';
+
+interface FileTab {
+  title: string;
+  code: string;
+  lang: BundledLanguage;
+}
+
+interface Props {
+  files: FileTab[];
+}
+
+const { files } = Astro.props;
+---
+
+<div class="my-6 w-full max-w-3xl mx-auto flex flex-col rounded-lg overflow-hidden border border-light-40 dark:border-dark-80">
+  <div class="relative z-20 p-6 bg-light-80 dark:bg-dark-100">
+    <slot />
+  </div>
+  <TabsRoot client:idle maxWidth={false} className="my-0 rounded-none border-0 border-t border-light-40 dark:border-dark-80">
+    <TabsList client:idle label="Demo source code">
+      {files.map((file, i) => (
+        <Tab client:idle value={file.title} initial={i === 0}>
+          {file.title}
+        </Tab>
+      ))}
+    </TabsList>
+    {files.map((file, i) => (
+      <TabsPanel client:idle value={file.title} initial={i === 0}>
+        <ServerCode code={file.code} lang={file.lang} />
+      </TabsPanel>
+    ))}
+  </TabsRoot>
+</div>
@@ -0,0 +1,8 @@
+---
+interface Props {
+  html: string;
+}
+const { html } = Astro.props;
+---
+
+<Fragment set:html={html} />
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './BasicUsage.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import './BasicUsage.ts';
+</script>
@@ -0,0 +1,41 @@
+<style>
+  .fullscreen-button-basic {
+    display: block;
+    position: relative;
+  }
+
+  .fullscreen-button-basic video {
+    width: 100%;
+    border-radius: 0.5rem;
+  }
+
+  .fullscreen-button-basic__button {
+    height: 50px;
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    padding-inline: 12px;
+    background-color: black;
+    color: white;
+    cursor: pointer;
+  }
+
+  .fullscreen-button-basic__button .show-when-fullscreen { display: none; }
+  .fullscreen-button-basic__button .show-when-not-fullscreen { display: none; }
+  .fullscreen-button-basic__button[data-fullscreen] .show-when-fullscreen { display: inline; }
+  .fullscreen-button-basic__button:not([data-fullscreen]) .show-when-not-fullscreen { display: inline; }
+</style>
+
+<video-player class="fullscreen-button-basic">
+  <video
+    src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+    autoplay
+    muted
+    playsinline
+    loop
+  ></video>
+  <media-fullscreen-button class="fullscreen-button-basic__button">
+    <span class="show-when-fullscreen">Exit Fullscreen</span>
+    <span class="show-when-not-fullscreen">Fullscreen</span>
+  </media-fullscreen-button>
+</video-player>
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/fullscreen-button';
@@ -0,0 +1,19 @@
+.fullscreen-button-basic {
+  position: relative;
+}
+
+.fullscreen-button-basic video {
+  width: 100%;
+  border-radius: 0.5rem;
+}
+
+.fullscreen-button-basic__button {
+  height: 50px;
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  padding-inline: 12px;
+  background-color: black;
+  color: white;
+  cursor: pointer;
+}
@@ -0,0 +1,25 @@
+import { createPlayer, FullscreenButton, features, Video } from '@videojs/react';
+
+import './BasicUsage.css';
+
+const Player = createPlayer({ features: [...features.video] });
+
+export default function BasicUsage() {
+  return (
+    <Player.Provider>
+      <Player.Container className="fullscreen-button-basic">
+        <Video
+          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <FullscreenButton
+          className="fullscreen-button-basic__button"
+          render={(props, state) => <button {...props}>{state.fullscreen ? 'Exit Fullscreen' : 'Fullscreen'}</button>}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './BasicUsage.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import './BasicUsage.ts';
+</script>
@@ -0,0 +1,40 @@
+<style>
+  .mute-button-basic {
+    position: relative;
+  }
+
+  .mute-button-basic video {
+    width: 100%;
+    border-radius: 0.5rem;
+  }
+
+  .mute-button-basic__button {
+    height: 50px;
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+    padding-inline: 12px;
+    background-color: black;
+    color: white;
+    cursor: pointer;
+  }
+
+  .mute-button-basic__button .show-when-muted { display: none; }
+  .mute-button-basic__button .show-when-unmuted { display: none; }
+  .mute-button-basic__button[data-muted] .show-when-muted { display: inline; }
+  .mute-button-basic__button:not([data-muted]) .show-when-unmuted { display: inline; }
+</style>
+
+<video-player class="mute-button-basic">
+  <video
+    src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+    autoplay
+    muted
+    playsinline
+    loop
+  ></video>
+  <media-mute-button class="mute-button-basic__button">
+    <span class="show-when-muted">Unmute</span>
+    <span class="show-when-unmuted">Mute</span>
+  </media-mute-button>
+</video-player>
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/mute-button';
@@ -0,0 +1,19 @@
+.mute-button-basic {
+  position: relative;
+}
+
+.mute-button-basic video {
+  width: 100%;
+  border-radius: 0.5rem;
+}
+
+.mute-button-basic__button {
+  height: 50px;
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  padding-inline: 12px;
+  background-color: black;
+  color: white;
+  cursor: pointer;
+}
@@ -0,0 +1,25 @@
+import { createPlayer, features, MuteButton, Video } from '@videojs/react';
+
+import './BasicUsage.css';
+
+const Player = createPlayer({ features: [...features.video] });
+
+export default function BasicUsage() {
+  return (
+    <Player.Provider>
+      <Player.Container className="mute-button-basic">
+        <Video
+          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <MuteButton
+          className="mute-button-basic__button"
+          render={(props, state) => <button {...props}>{state.muted ? 'Unmute' : 'Mute'}</button>}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './BasicUsage.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import './BasicUsage.ts';
+</script>
@@ -0,0 +1,40 @@
+<style>
+  .play-button-basic {
+    position: relative;
+  }
+
+  .play-button-basic video {
+    width: 100%;
+    border-radius: 0.5rem;
+  }
+
+  .play-button-basic__button {
+    height: 50px;
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+    padding-inline: 12px;
+    background-color: black;
+    color: white;
+    cursor: pointer;
+  }
+
+  .play-button-basic__button .show-when-paused { display: none; }
+  .play-button-basic__button .show-when-playing { display: none; }
+  .play-button-basic__button[data-paused] .show-when-paused { display: inline; }
+  .play-button-basic__button:not([data-paused]) .show-when-playing { display: inline; }
+</style>
+
+<video-player class="play-button-basic">
+  <video
+    src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+    autoplay
+    muted
+    playsinline
+    loop
+  ></video>
+  <media-play-button class="play-button-basic__button">
+    <span class="show-when-paused">Play</span>
+    <span class="show-when-playing">Pause</span>
+  </media-play-button>
+</video-player>
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/play-button';
@@ -0,0 +1,19 @@
+.play-button-basic {
+  position: relative;
+}
+
+.play-button-basic video {
+  width: 100%;
+  border-radius: 0.5rem;
+}
+
+.play-button-basic__button {
+  height: 50px;
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  padding-inline: 12px;
+  background-color: black;
+  color: white;
+  cursor: pointer;
+}
@@ -0,0 +1,25 @@
+import { createPlayer, features, PlayButton, Video } from '@videojs/react';
+
+import './BasicUsage.css';
+
+const Player = createPlayer({ features: [...features.video] });
+
+export default function BasicUsage() {
+  return (
+    <Player.Provider>
+      <Player.Container className="play-button-basic">
+        <Video
+          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <PlayButton
+          className="play-button-basic__button"
+          render={(props, state) => <button {...props}>{state.paused ? 'Play' : 'Pause'}</button>}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './CurrentDuration.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import './CurrentDuration.ts';
+</script>
@@ -0,0 +1,29 @@
+<style>
+  .time-current-duration {
+    position: relative;
+  }
+
+  .time-current-duration video {
+    width: 100%;
+    border-radius: 0.5rem;
+  }
+
+  .time-current-duration__group {
+    font-variant-numeric: tabular-nums;
+  }
+</style>
+
+<video-player class="time-current-duration">
+  <video
+    src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+    autoplay
+    muted
+    playsinline
+    loop
+  ></video>
+  <media-time-group class="time-current-duration__group">
+    <media-time type="current"></media-time>
+    <media-time-separator></media-time-separator>
+    <media-time type="duration"></media-time>
+  </media-time-group>
+</video-player>
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/time';
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './CurrentTime.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import './CurrentTime.ts';
+</script>
@@ -0,0 +1,25 @@
+<style>
+  .time-current-time {
+    position: relative;
+  }
+
+  .time-current-time video {
+    width: 100%;
+    border-radius: 0.5rem;
+  }
+
+  .time-current-time__value {
+    font-variant-numeric: tabular-nums;
+  }
+</style>
+
+<video-player class="time-current-time">
+  <video
+    src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+    autoplay
+    muted
+    playsinline
+    loop
+  ></video>
+  <media-time class="time-current-time__value" type="current"></media-time>
+</video-player>
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/time';
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './CustomNegativeSign.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import './CustomNegativeSign.ts';
+</script>
@@ -0,0 +1,25 @@
+<style>
+  .time-custom-negative-sign {
+    position: relative;
+  }
+
+  .time-custom-negative-sign video {
+    width: 100%;
+    border-radius: 0.5rem;
+  }
+
+  .time-custom-negative-sign__value {
+    font-variant-numeric: tabular-nums;
+  }
+</style>
+
+<video-player class="time-custom-negative-sign">
+  <video
+    src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+    autoplay
+    muted
+    playsinline
+    loop
+  ></video>
+  <media-time class="time-custom-negative-sign__value" type="remaining" negative-sign="&#x2212;"></media-time>
+</video-player>
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/time';
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './CustomSeparator.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import './CustomSeparator.ts';
+</script>
@@ -0,0 +1,29 @@
+<style>
+  .time-custom-separator {
+    position: relative;
+  }
+
+  .time-custom-separator video {
+    width: 100%;
+    border-radius: 0.5rem;
+  }
+
+  .time-custom-separator__group {
+    font-variant-numeric: tabular-nums;
+  }
+</style>
+
+<video-player class="time-custom-separator">
+  <video
+    src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+    autoplay
+    muted
+    playsinline
+    loop
+  ></video>
+  <media-time-group class="time-custom-separator__group">
+    <media-time type="current"></media-time>
+    <media-time-separator> of </media-time-separator>
+    <media-time type="duration"></media-time>
+  </media-time-group>
+</video-player>
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/time';
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './Remaining.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import './Remaining.ts';
+</script>
@@ -0,0 +1,25 @@
+<style>
+  .time-remaining {
+    position: relative;
+  }
+
+  .time-remaining video {
+    width: 100%;
+    border-radius: 0.5rem;
+  }
+
+  .time-remaining__value {
+    font-variant-numeric: tabular-nums;
+  }
+</style>
+
+<video-player class="time-remaining">
+  <video
+    src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+    autoplay
+    muted
+    playsinline
+    loop
+  ></video>
+  <media-time class="time-remaining__value" type="remaining"></media-time>
+</video-player>
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/time';
@@ -0,0 +1,12 @@
+.time-current-duration {
+  position: relative;
+}
+
+.time-current-duration video {
+  width: 100%;
+  border-radius: 0.5rem;
+}
+
+.time-current-duration__group {
+  font-variant-numeric: tabular-nums;
+}
@@ -0,0 +1,26 @@
+import { createPlayer, features, Time, Video } from '@videojs/react';
+
+import './CurrentDuration.css';
+
+const Player = createPlayer({ features: [...features.video] });
+
+export default function CurrentDuration() {
+  return (
+    <Player.Provider>
+      <Player.Container className="time-current-duration">
+        <Video
+          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <Time.Group className="time-current-duration__group">
+          <Time.Value type="current" />
+          <Time.Separator />
+          <Time.Value type="duration" />
+        </Time.Group>
+      </Player.Container>
+    </Player.Provider>
+  );
+}
@@ -0,0 +1,12 @@
+.time-current-time {
+  position: relative;
+}
+
+.time-current-time video {
+  width: 100%;
+  border-radius: 0.5rem;
+}
+
+.time-current-time__value {
+  font-variant-numeric: tabular-nums;
+}
@@ -0,0 +1,22 @@
+import { createPlayer, features, Time, Video } from '@videojs/react';
+
+import './CurrentTime.css';
+
+const Player = createPlayer({ features: [...features.video] });
+
+export default function CurrentTime() {
+  return (
+    <Player.Provider>
+      <Player.Container className="time-current-time">
+        <Video
+          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <Time.Value type="current" className="time-current-time__value" />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
@@ -0,0 +1,12 @@
+.time-custom-negative-sign {
+  position: relative;
+}
+
+.time-custom-negative-sign video {
+  width: 100%;
+  border-radius: 0.5rem;
+}
+
+.time-custom-negative-sign__value {
+  font-variant-numeric: tabular-nums;
+}
@@ -0,0 +1,22 @@
+import { createPlayer, features, Time, Video } from '@videojs/react';
+
+import './CustomNegativeSign.css';
+
+const Player = createPlayer({ features: [...features.video] });
+
+export default function CustomNegativeSign() {
+  return (
+    <Player.Provider>
+      <Player.Container className="time-custom-negative-sign">
+        <Video
+          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <Time.Value type="remaining" negativeSign={'\u2212'} className="time-custom-negative-sign__value" />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
@@ -0,0 +1,12 @@
+.time-custom-separator {
+  position: relative;
+}
+
+.time-custom-separator video {
+  width: 100%;
+  border-radius: 0.5rem;
+}
+
+.time-custom-separator__group {
+  font-variant-numeric: tabular-nums;
+}
@@ -0,0 +1,26 @@
+import { createPlayer, features, Time, Video } from '@videojs/react';
+
+import './CustomSeparator.css';
+
+const Player = createPlayer({ features: [...features.video] });
+
+export default function CustomSeparator() {
+  return (
+    <Player.Provider>
+      <Player.Container className="time-custom-separator">
+        <Video
+          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <Time.Group className="time-custom-separator__group">
+          <Time.Value type="current" />
+          <Time.Separator> of </Time.Separator>
+          <Time.Value type="duration" />
+        </Time.Group>
+      </Player.Container>
+    </Player.Provider>
+  );
+}
@@ -0,0 +1,12 @@
+.time-remaining {
+  position: relative;
+}
+
+.time-remaining video {
+  width: 100%;
+  border-radius: 0.5rem;
+}
+
+.time-remaining__value {
+  font-variant-numeric: tabular-nums;
+}
@@ -0,0 +1,22 @@
+import { createPlayer, features, Time, Video } from '@videojs/react';
+
+import './Remaining.css';
+
+const Player = createPlayer({ features: [...features.video] });
+
+export default function Remaining() {
+  return (
+    <Player.Provider>
+      <Player.Container className="time-remaining">
+        <Video
+          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <Time.Value type="remaining" className="time-remaining__value" />
+      </Player.Container>
+    </Player.Provider>
+  );
+}