zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(site): audit and encode docs patterns (#535)

Browse Source 
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Darius Cepulis
2026-02-13 14:04:55 -06:00
committed by GitHub
co-authored by Claude Opus 4.6
parent 84b7b0774a
commit b1c8022794
111 changed files with 2680 additions and 4642 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/docs/demos/buffering-indicator/html/css/BasicUsage.css
+5 -5
View File
@@ -1,11 +1,11 @@
.buffering-indicator-basic {
.html-buffering-indicator-basic {
display: flex;
width: 100%;
height: 100%;
position: relative;
}
.buffering-indicator-basic__overlay {
.html-buffering-indicator-basic__overlay {
position: absolute;
inset: 0;
display: flex;
@@ -15,15 +15,15 @@
z-index: 30;
}
.buffering-indicator-basic__overlay .buffering-indicator-basic__spinner {
.html-buffering-indicator-basic__overlay .html-buffering-indicator-basic__spinner {
display: none;
}
.buffering-indicator-basic__overlay[data-visible] .buffering-indicator-basic__spinner {
.html-buffering-indicator-basic__overlay[data-visible] .html-buffering-indicator-basic__spinner {
display: block;
}
.buffering-indicator-basic__spinner {
.html-buffering-indicator-basic__spinner {
width: 48px;
height: 48px;
border: 4px solid rgba(255, 255, 255, 0.3);
site/src/components/docs/demos/buffering-indicator/html/css/BasicUsage.html
+3 -3
View File
@@ -1,4 +1,4 @@
<video-player class="buffering-indicator-basic">
<video-player class="html-buffering-indicator-basic">
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
@@ -6,7 +6,7 @@
playsinline
loop
></video>
<media-buffering-indicator class="buffering-indicator-basic__overlay">
<div class="buffering-indicator-basic__spinner"></div>
<media-buffering-indicator class="html-buffering-indicator-basic__overlay">
<div class="html-buffering-indicator-basic__spinner"></div>
</media-buffering-indicator>
</video-player>
site/src/components/docs/demos/buffering-indicator/react/css/BasicUsage.css
+5 -5
View File
@@ -1,11 +1,11 @@
.buffering-indicator-basic {
.react-buffering-indicator-basic {
display: flex;
width: 100%;
height: 100%;
position: relative;
}
.buffering-indicator-basic__overlay {
.react-buffering-indicator-basic__overlay {
position: absolute;
inset: 0;
display: flex;
@@ -15,15 +15,15 @@
z-index: 30;
}
.buffering-indicator-basic__overlay .buffering-indicator-basic__spinner {
.react-buffering-indicator-basic__overlay .react-buffering-indicator-basic__spinner {
display: none;
}
.buffering-indicator-basic__overlay[data-visible] .buffering-indicator-basic__spinner {
.react-buffering-indicator-basic__overlay[data-visible] .react-buffering-indicator-basic__spinner {
display: block;
}
.buffering-indicator-basic__spinner {
.react-buffering-indicator-basic__spinner {
width: 48px;
height: 48px;
border: 4px solid rgba(255, 255, 255, 0.3);
site/src/components/docs/demos/buffering-indicator/react/css/BasicUsage.tsx
+3 -3
View File
@@ -7,7 +7,7 @@ const Player = createPlayer({ features: [...features.video] });
export default function BasicUsage() {
return (
<Player.Provider>
<Player.Container className="buffering-indicator-basic">
<Player.Container className="react-buffering-indicator-basic">
<Video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoPlay
@@ -16,9 +16,9 @@ export default function BasicUsage() {
loop
/>
<BufferingIndicator
className="buffering-indicator-basic__overlay"
className="react-buffering-indicator-basic__overlay"
render={(props, state) => (
<div {...props}>{state.visible && <div className="buffering-indicator-basic__spinner" />}</div>
<div {...props}>{state.visible && <div className="react-buffering-indicator-basic__spinner" />}</div>
)}
/>
</Player.Container>
site/src/components/docs/demos/controls/html/css/BasicUsage.css
+12 -12
View File
@@ -1,13 +1,13 @@
.controls-basic {
.html-controls-basic {
display: block;
position: relative;
}
.controls-basic video {
.html-controls-basic video {
width: 100%;
}
.controls-basic__root {
.html-controls-basic__root {
position: absolute;
inset: 0;
display: flex;
@@ -18,15 +18,15 @@
transition: opacity 0.25s;
}
.controls-basic__root:not([data-visible]) {
.html-controls-basic__root:not([data-visible]) {
opacity: 0;
}
.controls-basic__bottom {
.html-controls-basic__bottom {
pointer-events: auto;
}
.controls-basic__time {
.html-controls-basic__time {
display: inline-flex;
align-items: center;
gap: 4px;
@@ -40,14 +40,14 @@
font-size: 14px;
}
.controls-basic__bottom {
.html-controls-basic__bottom {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.controls-basic__button {
.html-controls-basic__button {
padding-block: 8px;
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(10px);
@@ -59,15 +59,15 @@
cursor: pointer;
}
.controls-basic__button .show-when-paused,
.controls-basic__button .show-when-playing {
.html-controls-basic__button .show-when-paused,
.html-controls-basic__button .show-when-playing {
display: none;
}
.controls-basic__play[data-paused] .show-when-paused {
.html-controls-basic__play[data-paused] .show-when-paused {
display: inline;
}
.controls-basic__play:not([data-paused]) .show-when-playing {
.html-controls-basic__play:not([data-paused]) .show-when-playing {
display: inline;
}
site/src/components/docs/demos/controls/html/css/BasicUsage.html
+5 -5
View File
@@ -1,4 +1,4 @@
<video-player class="controls-basic">
<video-player class="html-controls-basic">
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
@@ -7,13 +7,13 @@
loop
></video>
<media-controls class="controls-basic__root">
<media-controls-group class="controls-basic__bottom" aria-label="Playback controls">
<media-play-button class="controls-basic__button controls-basic__play">
<media-controls class="html-controls-basic__root">
<media-controls-group class="html-controls-basic__bottom" aria-label="Playback controls">
<media-play-button class="html-controls-basic__button html-controls-basic__play">
<span class="show-when-paused">Play</span>
<span class="show-when-playing">Pause</span>
</media-play-button>
<media-time class="controls-basic__time" type="current"></media-time>
<media-time class="html-controls-basic__time" type="current"></media-time>
</media-controls-group>
</media-controls>
</video-player>
site/src/components/docs/demos/controls/react/css/BasicUsage.css
+8 -8
View File
@@ -1,12 +1,12 @@
.controls-basic {
.react-controls-basic {
position: relative;
}
.controls-basic video {
.react-controls-basic video {
width: 100%;
}
.controls-basic__root {
.react-controls-basic__root {
position: absolute;
inset: 0;
display: flex;
@@ -17,15 +17,15 @@
transition: opacity 0.25s;
}
.controls-basic__root:not([data-visible]) {
.react-controls-basic__root:not([data-visible]) {
opacity: 0;
}
.controls-basic__bottom {
.react-controls-basic__bottom {
pointer-events: auto;
}
.controls-basic__time {
.react-controls-basic__time {
display: inline-flex;
align-items: center;
gap: 4px;
@@ -39,14 +39,14 @@
font-size: 14px;
}
.controls-basic__bottom {
.react-controls-basic__bottom {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.controls-basic__button {
.react-controls-basic__button {
padding-block: 8px;
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(10px);
site/src/components/docs/demos/controls/react/css/BasicUsage.tsx
+5 -5
View File
@@ -7,7 +7,7 @@ const Player = createPlayer({ features: [...features.video] });
export default function BasicUsage() {
return (
<Player.Provider>
<Player.Container className="controls-basic">
<Player.Container className="react-controls-basic">
<Video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoPlay
@@ -16,14 +16,14 @@ export default function BasicUsage() {
loop
/>
<Controls.Root className="controls-basic__root">
<Controls.Group className="controls-basic__bottom" aria-label="Playback controls">
<Controls.Root className="react-controls-basic__root">
<Controls.Group className="react-controls-basic__bottom" aria-label="Playback controls">
<PlayButton
className="controls-basic__button"
className="react-controls-basic__button"
render={(props, state) => <button {...props}>{state.paused ? 'Play' : 'Pause'}</button>}
/>
<Time.Value type="current" className="controls-basic__time" />
<Time.Value type="current" className="react-controls-basic__time" />
</Controls.Group>
</Controls.Root>
</Player.Container>
site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.css
+7 -7
View File
@@ -1,13 +1,13 @@
.fullscreen-button-basic {
.html-fullscreen-button-basic {
display: block;
position: relative;
}
.fullscreen-button-basic video {
.html-fullscreen-button-basic video {
width: 100%;
}
.fullscreen-button-basic__button {
.html-fullscreen-button-basic__button {
padding-block: 8px;
position: absolute;
bottom: 10px;
@@ -21,15 +21,15 @@
cursor: pointer;
}
.fullscreen-button-basic__button .show-when-fullscreen {
.html-fullscreen-button-basic__button .show-when-fullscreen {
display: none;
}
.fullscreen-button-basic__button .show-when-not-fullscreen {
.html-fullscreen-button-basic__button .show-when-not-fullscreen {
display: none;
}
.fullscreen-button-basic__button[data-fullscreen] .show-when-fullscreen {
.html-fullscreen-button-basic__button[data-fullscreen] .show-when-fullscreen {
display: inline;
}
.fullscreen-button-basic__button:not([data-fullscreen]) .show-when-not-fullscreen {
.html-fullscreen-button-basic__button:not([data-fullscreen]) .show-when-not-fullscreen {
display: inline;
}
site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.html
+2 -2
View File
@@ -1,4 +1,4 @@
<video-player class="fullscreen-button-basic">
<video-player class="html-fullscreen-button-basic">
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
@@ -6,7 +6,7 @@
playsinline
loop
></video>
<media-fullscreen-button class="fullscreen-button-basic__button">
<media-fullscreen-button class="html-fullscreen-button-basic__button">
<span class="show-when-fullscreen">Exit Fullscreen</span>
<span class="show-when-not-fullscreen">Fullscreen</span>
</media-fullscreen-button>
site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.css
+3 -3
View File
@@ -1,12 +1,12 @@
.fullscreen-button-basic {
.react-fullscreen-button-basic {
position: relative;
}
.fullscreen-button-basic video {
.react-fullscreen-button-basic video {
width: 100%;
}
.fullscreen-button-basic__button {
.react-fullscreen-button-basic__button {
padding-block: 8px;
position: absolute;
bottom: 10px;
site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.tsx
+2 -2
View File
@@ -7,7 +7,7 @@ const Player = createPlayer({ features: [...features.video] });
export default function BasicUsage() {
return (
<Player.Provider>
<Player.Container className="fullscreen-button-basic">
<Player.Container className="react-fullscreen-button-basic">
<Video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoPlay
@@ -16,7 +16,7 @@ export default function BasicUsage() {
loop
/>
<FullscreenButton
className="fullscreen-button-basic__button"
className="react-fullscreen-button-basic__button"
render={(props, state) => <button {...props}>{state.fullscreen ? 'Exit Fullscreen' : 'Fullscreen'}</button>}
/>
</Player.Container>
site/src/components/docs/demos/mute-button/html/css/BasicUsage.css
+7 -7
View File
@@ -1,12 +1,12 @@
.mute-button-basic {
.html-mute-button-basic {
position: relative;
}
.mute-button-basic video {
.html-mute-button-basic video {
width: 100%;
}
.mute-button-basic__button {
.html-mute-button-basic__button {
padding-block: 8px;
position: absolute;
bottom: 10px;
@@ -20,15 +20,15 @@
cursor: pointer;
}
.mute-button-basic__button .show-when-muted {
.html-mute-button-basic__button .show-when-muted {
display: none;
}
.mute-button-basic__button .show-when-unmuted {
.html-mute-button-basic__button .show-when-unmuted {
display: none;
}
.mute-button-basic__button[data-muted] .show-when-muted {
.html-mute-button-basic__button[data-muted] .show-when-muted {
display: inline;
}
.mute-button-basic__button:not([data-muted]) .show-when-unmuted {
.html-mute-button-basic__button:not([data-muted]) .show-when-unmuted {
display: inline;
}
site/src/components/docs/demos/mute-button/html/css/BasicUsage.html
+2 -2
View File
@@ -1,4 +1,4 @@
<video-player class="mute-button-basic">
<video-player class="html-mute-button-basic">
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
@@ -6,7 +6,7 @@
playsinline
loop
></video>
<media-mute-button class="mute-button-basic__button">
<media-mute-button class="html-mute-button-basic__button">
<span class="show-when-muted">Unmute</span>
<span class="show-when-unmuted">Mute</span>
</media-mute-button>
site/src/components/docs/demos/mute-button/html/css/VolumeLevels.astro
+10
View File
@@ -0,0 +1,10 @@
---
import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
import html from './VolumeLevels.html?raw';
import './VolumeLevels.css';
---
<HtmlDemo html={html} />
<script>
import './VolumeLevels.ts';
</script>
site/src/components/docs/demos/mute-button/html/css/VolumeLevels.css
+41
View File
@@ -0,0 +1,41 @@
.html-mute-button-volume-levels {
position: relative;
}
.html-mute-button-volume-levels video {
width: 100%;
}
.html-mute-button-volume-levels__button {
padding-block: 8px;
position: absolute;
bottom: 10px;
left: 10px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
color: black;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 9999px;
padding-inline: 20px;
cursor: pointer;
}
.html-mute-button-volume-levels__button .level-off,
.html-mute-button-volume-levels__button .level-low,
.html-mute-button-volume-levels__button .level-medium,
.html-mute-button-volume-levels__button .level-high {
display: none;
}
.html-mute-button-volume-levels__button[data-volume-level="off"] .level-off {
display: inline;
}
.html-mute-button-volume-levels__button[data-volume-level="low"] .level-low {
display: inline;
}
.html-mute-button-volume-levels__button[data-volume-level="medium"] .level-medium {
display: inline;
}
.html-mute-button-volume-levels__button[data-volume-level="high"] .level-high {
display: inline;
}
site/src/components/docs/demos/mute-button/html/css/VolumeLevels.html
+15
View File
@@ -0,0 +1,15 @@
<video-player class="html-mute-button-volume-levels">
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<media-mute-button class="html-mute-button-volume-levels__button">
<span class="level-off">Off</span>
<span class="level-low">Low</span>
<span class="level-medium">Medium</span>
<span class="level-high">High</span>
</media-mute-button>
</video-player>
site/src/components/docs/demos/mute-button/html/css/VolumeLevels.ts
+2
View File
@@ -0,0 +1,2 @@
import '@videojs/html/video/player';
import '@videojs/html/ui/mute-button';
site/src/components/docs/demos/mute-button/react/css/BasicUsage.css
+3 -3
View File
@@ -1,12 +1,12 @@
.mute-button-basic {
.react-mute-button-basic {
position: relative;
}
.mute-button-basic video {
.react-mute-button-basic video {
width: 100%;
}
.mute-button-basic__button {
.react-mute-button-basic__button {
padding-block: 8px;
position: absolute;
bottom: 10px;
site/src/components/docs/demos/mute-button/react/css/BasicUsage.tsx
+2 -2
View File
@@ -7,7 +7,7 @@ const Player = createPlayer({ features: [...features.video] });
export default function BasicUsage() {
return (
<Player.Provider>
<Player.Container className="mute-button-basic">
<Player.Container className="react-mute-button-basic">
<Video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoPlay
@@ -16,7 +16,7 @@ export default function BasicUsage() {
loop
/>
<MuteButton
className="mute-button-basic__button"
className="react-mute-button-basic__button"
render={(props, state) => <button {...props}>{state.muted ? 'Unmute' : 'Mute'}</button>}
/>
</Player.Container>
site/src/components/docs/demos/mute-button/react/css/VolumeLevels.css
+21
View File
@@ -0,0 +1,21 @@
.react-mute-button-volume-levels {
position: relative;
}
.react-mute-button-volume-levels video {
width: 100%;
}
.react-mute-button-volume-levels__button {
padding-block: 8px;
position: absolute;
bottom: 10px;
left: 10px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
color: black;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 9999px;
padding-inline: 20px;
cursor: pointer;
}
site/src/components/docs/demos/mute-button/react/css/VolumeLevels.tsx
+35
View File
@@ -0,0 +1,35 @@
import { createPlayer, features, MuteButton, Video } from '@videojs/react';
import './VolumeLevels.css';
const Player = createPlayer({ features: [...features.video] });
export default function VolumeLevels() {
return (
<Player.Provider>
<Player.Container className="react-mute-button-volume-levels">
<Video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoPlay
muted
playsInline
loop
/>
<MuteButton
className="react-mute-button-volume-levels__button"
render={(props, state) => (
<button {...props}>
{state.volumeLevel === 'off'
? 'Off'
: state.volumeLevel === 'low'
? 'Low'
: state.volumeLevel === 'medium'
? 'Medium'
: 'High'}
</button>
)}
/>
</Player.Container>
</Player.Provider>
);
}
site/src/components/docs/demos/pip-button/html/css/BasicUsage.css
+7 -7
View File
@@ -1,13 +1,13 @@
.pip-button-basic {
.html-pip-button-basic {
display: block;
position: relative;
}
.pip-button-basic video {
.html-pip-button-basic video {
width: 100%;
}
.pip-button-basic__button {
.html-pip-button-basic__button {
padding-block: 8px;
position: absolute;
bottom: 10px;
@@ -21,15 +21,15 @@
cursor: pointer;
}
.pip-button-basic__button .show-when-pip {
.html-pip-button-basic__button .show-when-pip {
display: none;
}
.pip-button-basic__button .show-when-not-pip {
.html-pip-button-basic__button .show-when-not-pip {
display: none;
}
.pip-button-basic__button[data-pip] .show-when-pip {
.html-pip-button-basic__button[data-pip] .show-when-pip {
display: inline;
}
.pip-button-basic__button:not([data-pip]) .show-when-not-pip {
.html-pip-button-basic__button:not([data-pip]) .show-when-not-pip {
display: inline;
}
site/src/components/docs/demos/pip-button/html/css/BasicUsage.html
+2 -2
View File
@@ -1,4 +1,4 @@
<video-player class="pip-button-basic">
<video-player class="html-pip-button-basic">
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
@@ -6,7 +6,7 @@
playsinline
loop
></video>
<media-pip-button class="pip-button-basic__button">
<media-pip-button class="html-pip-button-basic__button">
<span class="show-when-pip">Exit PiP</span>
<span class="show-when-not-pip">Enter PiP</span>
</media-pip-button>
site/src/components/docs/demos/pip-button/react/css/BasicUsage.css
+3 -3
View File
@@ -1,12 +1,12 @@
.pip-button-basic {
.react-pip-button-basic {
position: relative;
}
.pip-button-basic video {
.react-pip-button-basic video {
width: 100%;
}
.pip-button-basic__button {
.react-pip-button-basic__button {
padding-block: 8px;
position: absolute;
bottom: 10px;
site/src/components/docs/demos/pip-button/react/css/BasicUsage.tsx
+2 -2
View File
@@ -7,7 +7,7 @@ const Player = createPlayer({ features: [...features.video] });
export default function BasicUsage() {
return (
<Player.Provider>
<Player.Container className="pip-button-basic">
<Player.Container className="react-pip-button-basic">
<Video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoPlay
@@ -16,7 +16,7 @@ export default function BasicUsage() {
loop
/>
<PiPButton
className="pip-button-basic__button"
className="react-pip-button-basic__button"
render={(props, state) => <button {...props}>{state.pip ? 'Exit PiP' : 'Enter PiP'}</button>}
/>
</Player.Container>
site/src/components/docs/demos/play-button/html/css/BasicUsage.css
+19 -7
View File
@@ -1,12 +1,12 @@
.play-button-basic {
.html-play-button-basic {
position: relative;
}
.play-button-basic video {
.html-play-button-basic video {
width: 100%;
}
.play-button-basic__button {
.html-play-button-basic__button {
padding-block: 8px;
position: absolute;
bottom: 10px;
@@ -20,15 +20,27 @@
cursor: pointer;
}
.play-button-basic__button .show-when-paused {
.html-play-button-basic__button .show-when-paused {
display: none;
}
.play-button-basic__button .show-when-playing {
.html-play-button-basic__button .show-when-playing {
display: none;
}
.play-button-basic__button[data-paused] .show-when-paused {
.html-play-button-basic__button .show-when-ended {
display: none;
}
.html-play-button-basic__button[data-paused]:not([data-ended]) .show-when-paused {
display: inline;
}
.play-button-basic__button:not([data-paused]) .show-when-playing {
.html-play-button-basic__button:not([data-paused]) .show-when-playing {
display: inline;
}
.html-play-button-basic__button[data-ended] .show-when-ended {
display: inline;
}
.html-play-button-basic__button[data-ended] .show-when-paused {
display: none;
}
.html-play-button-basic__button[data-ended] .show-when-playing {
display: none;
}
site/src/components/docs/demos/play-button/html/css/BasicUsage.html
+3 -3
View File
@@ -1,13 +1,13 @@
<video-player class="play-button-basic">
<video-player class="html-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">
<media-play-button class="html-play-button-basic__button">
<span class="show-when-paused">Play</span>
<span class="show-when-playing">Pause</span>
<span class="show-when-ended">Replay</span>
</media-play-button>
</video-player>
site/src/components/docs/demos/play-button/react/css/BasicUsage.css
+3 -3
View File
@@ -1,12 +1,12 @@
.play-button-basic {
.react-play-button-basic {
position: relative;
}
.play-button-basic video {
.react-play-button-basic video {
width: 100%;
}
.play-button-basic__button {
.react-play-button-basic__button {
padding-block: 8px;
position: absolute;
bottom: 10px;
site/src/components/docs/demos/play-button/react/css/BasicUsage.tsx
+5 -4
View File
@@ -7,17 +7,18 @@ const Player = createPlayer({ features: [...features.video] });
export default function BasicUsage() {
return (
<Player.Provider>
<Player.Container className="play-button-basic">
<Player.Container className="react-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>}
className="react-play-button-basic__button"
render={(props, state) => (
<button {...props}>{state.ended ? 'Replay' : state.paused ? 'Play' : 'Pause'}</button>
)}
/>
</Player.Container>
</Player.Provider>
site/src/components/docs/demos/poster/html/css/BasicUsage.css
+10 -10
View File
@@ -1,30 +1,30 @@
.poster-basic {
.html-poster-basic {
display: block;
position: relative;
}
.poster-basic video {
.html-poster-basic video {
width: 100%;
}
.poster-basic__poster {
.html-poster-basic__poster {
position: absolute;
inset: 0;
pointer-events: none;
transition: opacity 0.25s;
}
.poster-basic__poster:not([data-visible]) {
.html-poster-basic__poster:not([data-visible]) {
opacity: 0;
}
.poster-basic__poster img {
.html-poster-basic__poster img {
width: 100%;
height: 100%;
object-fit: cover;
}
.poster-basic__button {
.html-poster-basic__button {
position: absolute;
bottom: 10px;
left: 10px;
@@ -38,15 +38,15 @@
cursor: pointer;
}
.poster-basic__button .show-when-paused,
.poster-basic__button .show-when-playing {
.html-poster-basic__button .show-when-paused,
.html-poster-basic__button .show-when-playing {
display: none;
}
.poster-basic__button[data-paused] .show-when-paused {
.html-poster-basic__button[data-paused] .show-when-paused {
display: inline;
}
.poster-basic__button:not([data-paused]) .show-when-playing {
.html-poster-basic__button:not([data-paused]) .show-when-playing {
display: inline;
}
site/src/components/docs/demos/poster/html/css/BasicUsage.html
+3 -3
View File
@@ -1,16 +1,16 @@
<video-player class="poster-basic">
<video-player class="html-poster-basic">
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
playsinline
></video>
<media-poster class="poster-basic__poster">
<media-poster class="html-poster-basic__poster">
<img
src="https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/thumbnail.jpg"
/>
</media-poster>
<media-play-button class="poster-basic__button">
<media-play-button class="html-poster-basic__button">
<span class="show-when-paused">Play</span>
<span class="show-when-playing">Pause</span>
</media-play-button>
site/src/components/docs/demos/poster/react/css/BasicUsage.css
+5 -5
View File
@@ -1,12 +1,12 @@
.poster-basic {
.react-poster-basic {
position: relative;
}
.poster-basic video {
.react-poster-basic video {
width: 100%;
}
.poster-basic__poster {
.react-poster-basic__poster {
position: absolute;
inset: 0;
width: 100%;
@@ -16,11 +16,11 @@
transition: opacity 0.25s;
}
.poster-basic__poster:not([data-visible]) {
.react-poster-basic__poster:not([data-visible]) {
opacity: 0;
}
.poster-basic__button {
.react-poster-basic__button {
position: absolute;
bottom: 10px;
left: 10px;
site/src/components/docs/demos/poster/react/css/BasicUsage.tsx
+3 -3
View File
@@ -7,16 +7,16 @@ const Player = createPlayer({ features: [...features.video] });
export default function BasicUsage() {
return (
<Player.Provider>
<Player.Container className="poster-basic">
<Player.Container className="react-poster-basic">
<Video src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4" playsInline />
<Poster
className="poster-basic__poster"
className="react-poster-basic__poster"
src="https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/thumbnail.jpg"
/>
<PlayButton
className="poster-basic__button"
className="react-poster-basic__button"
render={(props, state) => <button {...props}>{state.paused ? 'Play' : 'Pause'}</button>}
/>
</Player.Container>
site/src/components/docs/demos/seek-button/html/css/BasicUsage.css
+8 -8
View File
@@ -1,12 +1,12 @@
.seek-button-basic {
.html-seek-button-basic {
position: relative;
}
.seek-button-basic video {
.html-seek-button-basic video {
width: 100%;
}
.seek-button-basic__buttons {
.html-seek-button-basic__buttons {
display: flex;
gap: 8px;
position: absolute;
@@ -14,7 +14,7 @@
left: 10px;
}
.seek-button-basic__button {
.html-seek-button-basic__button {
padding-block: 8px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
@@ -26,15 +26,15 @@
cursor: pointer;
}
.seek-button-basic__button .show-when-backward {
.html-seek-button-basic__button .show-when-backward {
display: none;
}
.seek-button-basic__button .show-when-forward {
.html-seek-button-basic__button .show-when-forward {
display: none;
}
.seek-button-basic__button[data-direction="backward"] .show-when-backward {
.html-seek-button-basic__button[data-direction="backward"] .show-when-backward {
display: inline;
}
.seek-button-basic__button[data-direction="forward"] .show-when-forward {
.html-seek-button-basic__button[data-direction="forward"] .show-when-forward {
display: inline;
}
site/src/components/docs/demos/seek-button/html/css/BasicUsage.html
+4 -4
View File
@@ -1,4 +1,4 @@
<video-player class="seek-button-basic">
<video-player class="html-seek-button-basic">
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
@@ -6,11 +6,11 @@
playsinline
loop
></video>
<div class="seek-button-basic__buttons">
<media-seek-button seconds="-5" class="seek-button-basic__button">
<div class="html-seek-button-basic__buttons">
<media-seek-button seconds="-5" class="html-seek-button-basic__button">
<span class="show-when-backward">&#9194; 5s</span>
</media-seek-button>
<media-seek-button seconds="10" class="seek-button-basic__button">
<media-seek-button seconds="10" class="html-seek-button-basic__button">
<span class="show-when-forward">10s &#9193;</span>
</media-seek-button>
</div>
site/src/components/docs/demos/seek-button/react/css/BasicUsage.css
+4 -4
View File
@@ -1,12 +1,12 @@
.seek-button-basic {
.react-seek-button-basic {
position: relative;
}
.seek-button-basic video {
.react-seek-button-basic video {
width: 100%;
}
.seek-button-basic__buttons {
.react-seek-button-basic__buttons {
display: flex;
gap: 8px;
position: absolute;
@@ -14,7 +14,7 @@
left: 10px;
}
.seek-button-basic__button {
.react-seek-button-basic__button {
padding-block: 8px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
site/src/components/docs/demos/seek-button/react/css/BasicUsage.tsx
+4 -4
View File
@@ -7,7 +7,7 @@ const Player = createPlayer({ features: [...features.video] });
export default function BasicUsage() {
return (
<Player.Provider>
<Player.Container className="seek-button-basic">
<Player.Container className="react-seek-button-basic">
<Video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoPlay
@@ -15,10 +15,10 @@ export default function BasicUsage() {
playsInline
loop
/>
<div className="seek-button-basic__buttons">
<div className="react-seek-button-basic__buttons">
<SeekButton
seconds={-5}
className="seek-button-basic__button"
className="react-seek-button-basic__button"
render={(props, state) => (
<button {...props}>
{state.direction === 'backward' ? '\u23EA' : '\u23E9'} {5}s
@@ -27,7 +27,7 @@ export default function BasicUsage() {
/>
<SeekButton
seconds={10}
className="seek-button-basic__button"
className="react-seek-button-basic__button"
render={(props, state) => (
<button {...props}>
{10}s {state.direction === 'forward' ? '\u23E9' : '\u23EA'}
site/src/components/docs/demos/time/html/css/CurrentDuration.css
+3 -3
View File
@@ -1,12 +1,12 @@
.time-current-duration {
.html-time-current-duration {
position: relative;
}
.time-current-duration video {
.html-time-current-duration video {
width: 100%;
}
.time-current-duration__group {
.html-time-current-duration__group {
display: flex;
align-items: center;
gap: 4px;
site/src/components/docs/demos/time/html/css/CurrentDuration.html
+2 -2
View File
@@ -1,4 +1,4 @@
<video-player class="time-current-duration">
<video-player class="html-time-current-duration">
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
@@ -6,7 +6,7 @@
playsinline
loop
></video>
<media-time-group class="time-current-duration__group">
<media-time-group class="html-time-current-duration__group">
<media-time type="current"></media-time>
<media-time-separator></media-time-separator>
<media-time type="duration"></media-time>
site/src/components/docs/demos/time/html/css/CurrentTime.css
+3 -3
View File
@@ -1,12 +1,12 @@
.time-current-time {
.html-time-current-time {
position: relative;
}
.time-current-time video {
.html-time-current-time video {
width: 100%;
}
.time-current-time__value {
.html-time-current-time__value {
position: absolute;
bottom: 10px;
left: 10px;
site/src/components/docs/demos/time/html/css/CurrentTime.html
+2 -2
View File
@@ -1,4 +1,4 @@
<video-player class="time-current-time">
<video-player class="html-time-current-time">
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
@@ -6,5 +6,5 @@
playsinline
loop
></video>
<media-time class="time-current-time__value" type="current"></media-time>
<media-time class="html-time-current-time__value" type="current"></media-time>
</video-player>
site/src/components/docs/demos/time/html/css/CustomNegativeSign.css
+3 -3
View File
@@ -1,12 +1,12 @@
.time-custom-negative-sign {
.html-time-custom-negative-sign {
position: relative;
}
.time-custom-negative-sign video {
.html-time-custom-negative-sign video {
width: 100%;
}
.time-custom-negative-sign__value {
.html-time-custom-negative-sign__value {
position: absolute;
bottom: 10px;
left: 10px;
site/src/components/docs/demos/time/html/css/CustomNegativeSign.html
+2 -2
View File
@@ -1,4 +1,4 @@
<video-player class="time-custom-negative-sign">
<video-player class="html-time-custom-negative-sign">
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
@@ -7,7 +7,7 @@
loop
></video>
<media-time
class="time-custom-negative-sign__value"
class="html-time-custom-negative-sign__value"
type="remaining"
negative-sign="~"
></media-time>
site/src/components/docs/demos/time/html/css/CustomSeparator.css
+3 -3
View File
@@ -1,12 +1,12 @@
.time-custom-separator {
.html-time-custom-separator {
position: relative;
}
.time-custom-separator video {
.html-time-custom-separator video {
width: 100%;
}
.time-custom-separator__group {
.html-time-custom-separator__group {
display: flex;
align-items: center;
gap: 4px;
site/src/components/docs/demos/time/html/css/CustomSeparator.html
+2 -2
View File
@@ -1,4 +1,4 @@
<video-player class="time-custom-separator">
<video-player class="html-time-custom-separator">
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
@@ -6,7 +6,7 @@
playsinline
loop
></video>
<media-time-group class="time-custom-separator__group">
<media-time-group class="html-time-custom-separator__group">
<media-time type="current"></media-time>
<media-time-separator> of </media-time-separator>
<media-time type="duration"></media-time>
site/src/components/docs/demos/time/html/css/Remaining.css
+3 -3
View File
@@ -1,12 +1,12 @@
.time-remaining {
.html-time-remaining {
position: relative;
}
.time-remaining video {
.html-time-remaining video {
width: 100%;
}
.time-remaining__value {
.html-time-remaining__value {
position: absolute;
bottom: 10px;
left: 10px;
site/src/components/docs/demos/time/html/css/Remaining.html
+2 -2
View File
@@ -1,4 +1,4 @@
<video-player class="time-remaining">
<video-player class="html-time-remaining">
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
@@ -6,5 +6,5 @@
playsinline
loop
></video>
<media-time class="time-remaining__value" type="remaining"></media-time>
<media-time class="html-time-remaining__value" type="remaining"></media-time>
</video-player>
site/src/components/docs/demos/time/react/css/CurrentDuration.css
+3 -3
View File
@@ -1,12 +1,12 @@
.time-current-duration {
.react-time-current-duration {
position: relative;
}
.time-current-duration video {
.react-time-current-duration video {
width: 100%;
}
.time-current-duration__group {
.react-time-current-duration__group {
display: flex;
align-items: center;
gap: 4px;
site/src/components/docs/demos/time/react/css/CurrentDuration.tsx
+2 -2
View File
@@ -7,7 +7,7 @@ const Player = createPlayer({ features: [...features.video] });
export default function CurrentDuration() {
return (
<Player.Provider>
<Player.Container className="time-current-duration">
<Player.Container className="react-time-current-duration">
<Video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoPlay
@@ -15,7 +15,7 @@ export default function CurrentDuration() {
playsInline
loop
/>
<Time.Group className="time-current-duration__group">
<Time.Group className="react-time-current-duration__group">
<Time.Value type="current" />
<Time.Separator />
<Time.Value type="duration" />
site/src/components/docs/demos/time/react/css/CurrentTime.css
+3 -3
View File
@@ -1,12 +1,12 @@
.time-current-time {
.react-time-current-time {
position: relative;
}
.time-current-time video {
.react-time-current-time video {
width: 100%;
}
.time-current-time__value {
.react-time-current-time__value {
position: absolute;
bottom: 10px;
left: 10px;
site/src/components/docs/demos/time/react/css/CurrentTime.tsx
+2 -2
View File
@@ -7,7 +7,7 @@ const Player = createPlayer({ features: [...features.video] });
export default function CurrentTime() {
return (
<Player.Provider>
<Player.Container className="time-current-time">
<Player.Container className="react-time-current-time">
<Video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoPlay
@@ -15,7 +15,7 @@ export default function CurrentTime() {
playsInline
loop
/>
<Time.Value type="current" className="time-current-time__value" />
<Time.Value type="current" className="react-time-current-time__value" />
</Player.Container>
</Player.Provider>
);
site/src/components/docs/demos/time/react/css/CustomNegativeSign.css
+3 -3
View File
@@ -1,12 +1,12 @@
.time-custom-negative-sign {
.react-time-custom-negative-sign {
position: relative;
}
.time-custom-negative-sign video {
.react-time-custom-negative-sign video {
width: 100%;
}
.time-custom-negative-sign__value {
.react-time-custom-negative-sign__value {
position: absolute;
bottom: 10px;
left: 10px;
site/src/components/docs/demos/time/react/css/CustomNegativeSign.tsx
+2 -2
View File
@@ -7,7 +7,7 @@ const Player = createPlayer({ features: [...features.video] });
export default function CustomNegativeSign() {
return (
<Player.Provider>
<Player.Container className="time-custom-negative-sign">
<Player.Container className="react-time-custom-negative-sign">
<Video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoPlay
@@ -15,7 +15,7 @@ export default function CustomNegativeSign() {
playsInline
loop
/>
<Time.Value type="remaining" negativeSign="~" className="time-custom-negative-sign__value" />
<Time.Value type="remaining" negativeSign="~" className="react-time-custom-negative-sign__value" />
</Player.Container>
</Player.Provider>
);
site/src/components/docs/demos/time/react/css/CustomSeparator.css
+3 -3
View File
@@ -1,12 +1,12 @@
.time-custom-separator {
.react-time-custom-separator {
position: relative;
}
.time-custom-separator video {
.react-time-custom-separator video {
width: 100%;
}
.time-custom-separator__group {
.react-time-custom-separator__group {
display: flex;
align-items: center;
gap: 4px;
site/src/components/docs/demos/time/react/css/CustomSeparator.tsx
+2 -2
View File
@@ -7,7 +7,7 @@ const Player = createPlayer({ features: [...features.video] });
export default function CustomSeparator() {
return (
<Player.Provider>
<Player.Container className="time-custom-separator">
<Player.Container className="react-time-custom-separator">
<Video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoPlay
@@ -15,7 +15,7 @@ export default function CustomSeparator() {
playsInline
loop
/>
<Time.Group className="time-custom-separator__group">
<Time.Group className="react-time-custom-separator__group">
<Time.Value type="current" />
<Time.Separator> of </Time.Separator>
<Time.Value type="duration" />
site/src/components/docs/demos/time/react/css/Remaining.css
+3 -3
View File
@@ -1,12 +1,12 @@
.time-remaining {
.react-time-remaining {
position: relative;
}
.time-remaining video {
.react-time-remaining video {
width: 100%;
}
.time-remaining__value {
.react-time-remaining__value {
position: absolute;
bottom: 10px;
left: 10px;
site/src/components/docs/demos/time/react/css/Remaining.tsx
+2 -2
View File
@@ -7,7 +7,7 @@ const Player = createPlayer({ features: [...features.video] });
export default function Remaining() {
return (
<Player.Provider>
<Player.Container className="time-remaining">
<Player.Container className="react-time-remaining">
<Video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoPlay
@@ -15,7 +15,7 @@ export default function Remaining() {
playsInline
loop
/>
<Time.Value type="remaining" className="time-remaining__value" />
<Time.Value type="remaining" className="react-time-remaining__value" />
</Player.Container>
</Player.Provider>
);