mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
fix(site): review cleanup for API reference pages (#685)
- Remove unused BasicUsage demos for time-slider and volume-slider - Strip leading `--` from CSS var names in CSSVarRow ids - Fix dead anchor links in MDX styling sections - Add comments on usesDataAttrs heuristic and type stripping Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Darius Cepulis
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
8ab596ea30
commit
286243746e
@@ -11,7 +11,7 @@ interface Props {
|
||||
|
||||
const { name, description, componentName } = Astro.props;
|
||||
|
||||
const id = `${componentName}-css-var-${name}`;
|
||||
const id = `${componentName}-css-var-${name.replace(/^--/, '')}`;
|
||||
---
|
||||
|
||||
<DetailRow id={id} name={name} type="" description={description} colspan={2}>
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
---
|
||||
import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
|
||||
import html from './BasicUsage.html?raw';
|
||||
import './BasicUsage.css';
|
||||
---
|
||||
|
||||
<HtmlDemo html={html} />
|
||||
<script>
|
||||
import './BasicUsage.ts';
|
||||
</script>
|
||||
@@ -1,30 +0,0 @@
|
||||
.html-time-slider-basic,
|
||||
.html-time-slider-basic media-container {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.html-time-slider-basic video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.html-time-slider-basic__slider {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.html-time-slider-basic__slider::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: var(--media-slider-fill);
|
||||
background: white;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
<video-player class="html-time-slider-basic">
|
||||
<media-container>
|
||||
<video
|
||||
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
|
||||
autoplay
|
||||
muted
|
||||
playsinline
|
||||
loop
|
||||
></video>
|
||||
<media-time-slider class="html-time-slider-basic__slider"></media-time-slider>
|
||||
</media-container>
|
||||
</video-player>
|
||||
@@ -1,2 +0,0 @@
|
||||
import '@videojs/html/video/player';
|
||||
import '@videojs/html/ui/time-slider';
|
||||
@@ -1,28 +0,0 @@
|
||||
.react-time-slider-basic {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.react-time-slider-basic video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.react-time-slider-basic__slider {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.react-time-slider-basic__slider::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: var(--media-slider-fill);
|
||||
background: white;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
import { createPlayer, TimeSlider } from '@videojs/react';
|
||||
import { Video, videoFeatures } from '@videojs/react/video';
|
||||
|
||||
import './BasicUsage.css';
|
||||
|
||||
const Player = createPlayer({ features: videoFeatures });
|
||||
|
||||
export default function BasicUsage() {
|
||||
return (
|
||||
<Player.Provider>
|
||||
<Player.Container className="react-time-slider-basic">
|
||||
<Video
|
||||
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
|
||||
autoPlay
|
||||
muted
|
||||
playsInline
|
||||
loop
|
||||
/>
|
||||
<TimeSlider.Root className="react-time-slider-basic__slider" />
|
||||
</Player.Container>
|
||||
</Player.Provider>
|
||||
);
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
---
|
||||
import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
|
||||
import html from './BasicUsage.html?raw';
|
||||
import './BasicUsage.css';
|
||||
---
|
||||
|
||||
<HtmlDemo html={html} />
|
||||
<script>
|
||||
import './BasicUsage.ts';
|
||||
</script>
|
||||
@@ -1,60 +0,0 @@
|
||||
.html-volume-slider-basic,
|
||||
.html-volume-slider-basic media-container {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.html-volume-slider-basic video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.html-volume-slider-basic__mute-button {
|
||||
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-block: 8px;
|
||||
padding-inline: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.html-volume-slider-basic__mute-button .show-when-muted {
|
||||
display: none;
|
||||
}
|
||||
.html-volume-slider-basic__mute-button .show-when-unmuted {
|
||||
display: none;
|
||||
}
|
||||
.html-volume-slider-basic__mute-button[data-muted] .show-when-muted {
|
||||
display: inline;
|
||||
}
|
||||
.html-volume-slider-basic__mute-button:not([data-muted]) .show-when-unmuted {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.html-volume-slider-basic__slider {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.html-volume-slider-basic__slider::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: var(--media-slider-fill);
|
||||
background: white;
|
||||
border-radius: 9999px;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
<video-player class="html-volume-slider-basic">
|
||||
<media-container>
|
||||
<video
|
||||
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
|
||||
autoplay
|
||||
muted
|
||||
playsinline
|
||||
loop
|
||||
></video>
|
||||
<media-mute-button class="html-volume-slider-basic__mute-button">
|
||||
<span class="show-when-muted">Unmute</span>
|
||||
<span class="show-when-unmuted">Mute</span>
|
||||
</media-mute-button>
|
||||
<media-volume-slider class="html-volume-slider-basic__slider"></media-volume-slider>
|
||||
</media-container>
|
||||
</video-player>
|
||||
@@ -1,3 +0,0 @@
|
||||
import '@videojs/html/video/player';
|
||||
import '@videojs/html/ui/mute-button';
|
||||
import '@videojs/html/ui/volume-slider';
|
||||
@@ -1,45 +0,0 @@
|
||||
.react-volume-slider-basic {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.react-volume-slider-basic video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.react-volume-slider-basic__mute-button {
|
||||
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-block: 8px;
|
||||
padding-inline: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.react-volume-slider-basic__slider {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.react-volume-slider-basic__slider::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: var(--media-slider-fill);
|
||||
background: white;
|
||||
border-radius: 9999px;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
import { createPlayer, MuteButton, VolumeSlider } from '@videojs/react';
|
||||
import { Video, videoFeatures } from '@videojs/react/video';
|
||||
|
||||
import './BasicUsage.css';
|
||||
|
||||
const Player = createPlayer({ features: videoFeatures });
|
||||
|
||||
export default function BasicUsage() {
|
||||
return (
|
||||
<Player.Provider>
|
||||
<Player.Container className="react-volume-slider-basic">
|
||||
<Video
|
||||
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
|
||||
autoPlay
|
||||
muted
|
||||
playsInline
|
||||
loop
|
||||
/>
|
||||
<MuteButton
|
||||
className="react-volume-slider-basic__mute-button"
|
||||
render={(props, state) => <button {...props}>{state.muted ? 'Unmute' : 'Mute'}</button>}
|
||||
/>
|
||||
<VolumeSlider.Root className="react-volume-slider-basic__slider" />
|
||||
</Player.Container>
|
||||
</Player.Provider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user