mirror of
https://github.com/zoriya/v10.git
synced 2026-08-05 13:48:14 +00:00
chore: consolidate eject examples (#162)
This commit is contained in:
Darius Cepulis
@@ -0,0 +1,134 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HTML Frosted Ejected</title>
|
||||
<link rel="preconnect" href="https://rsms.me/" />
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
|
||||
<style>
|
||||
body {
|
||||
font-family:
|
||||
InterVariable, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
||||
'Noto Color Emoji';
|
||||
margin: 0;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="display: flex; flex-direction: column; min-height: 100vh; max-width: 960px; padding: 1rem">
|
||||
<h1>Frosted Skin (ejected)</h1>
|
||||
<a href="/">← Back to index</a>
|
||||
<video-provider style="display: block">
|
||||
<media-container
|
||||
style="
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 2rem;
|
||||
max-width: 960px;
|
||||
margin: 2rem auto;
|
||||
aspect-ratio: 16/9;
|
||||
"
|
||||
>
|
||||
<video
|
||||
slot="media"
|
||||
src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4"
|
||||
playsinline
|
||||
poster="https://image.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/thumbnail.webp"
|
||||
></video>
|
||||
|
||||
<div class="overlay"></div>
|
||||
|
||||
<div class="control-bar surface">
|
||||
<media-play-button commandfor="play-tooltip" class="button">
|
||||
<media-play-icon class="icon play-icon"></media-play-icon>
|
||||
<media-pause-icon class="icon pause-icon"></media-pause-icon>
|
||||
</media-play-button>
|
||||
<media-tooltip
|
||||
id="play-tooltip"
|
||||
class="surface popup-animation"
|
||||
popover="manual"
|
||||
delay="500"
|
||||
side="top"
|
||||
side-offset="12"
|
||||
collision-padding="12"
|
||||
>
|
||||
<span class="tooltip play-tooltip">Play</span>
|
||||
<span class="tooltip pause-tooltip">Pause</span>
|
||||
</media-tooltip>
|
||||
|
||||
<div class="time-controls">
|
||||
<!-- Use the show-remaining attribute to show count down/remaining time -->
|
||||
<media-current-time-display></media-current-time-display>
|
||||
|
||||
<media-time-slider commandfor="time-slider-tooltip" class="slider">
|
||||
<media-time-slider-track class="slider-track">
|
||||
<media-time-slider-progress class="slider-progress"></media-time-slider-progress>
|
||||
<media-time-slider-pointer class="slider-pointer"></media-time-slider-pointer>
|
||||
</media-time-slider-track>
|
||||
<media-time-slider-thumb class="slider-thumb"></media-time-slider-thumb>
|
||||
</media-time-slider>
|
||||
<media-tooltip
|
||||
id="time-slider-tooltip"
|
||||
class="surface popup-animation"
|
||||
popover="manual"
|
||||
track-cursor-axis="x"
|
||||
side="top"
|
||||
side-offset="18"
|
||||
collision-padding="12"
|
||||
>
|
||||
<media-preview-time-display></media-preview-time-display>
|
||||
</media-tooltip>
|
||||
|
||||
<media-duration-display></media-duration-display>
|
||||
</div>
|
||||
|
||||
<media-mute-button commandfor="volume-slider-popover" command="toggle-popover" class="button">
|
||||
<media-volume-high-icon class="icon volume-high-icon"></media-volume-high-icon>
|
||||
<media-volume-low-icon class="icon volume-low-icon"></media-volume-low-icon>
|
||||
<media-volume-off-icon class="icon volume-off-icon"></media-volume-off-icon>
|
||||
</media-mute-button>
|
||||
<media-popover
|
||||
id="volume-slider-popover"
|
||||
class="surface popup-animation"
|
||||
popover="manual"
|
||||
open-on-hover
|
||||
delay="200"
|
||||
close-delay="100"
|
||||
side="top"
|
||||
side-offset="12"
|
||||
collision-padding="12"
|
||||
>
|
||||
<media-volume-slider class="slider" orientation="vertical">
|
||||
<media-volume-slider-track class="slider-track">
|
||||
<media-volume-slider-indicator class="slider-progress"></media-volume-slider-indicator>
|
||||
</media-volume-slider-track>
|
||||
<media-volume-slider-thumb class="slider-thumb"></media-volume-slider-thumb>
|
||||
</media-volume-slider>
|
||||
</media-popover>
|
||||
|
||||
<media-fullscreen-button commandfor="fullscreen-tooltip" class="button">
|
||||
<media-fullscreen-enter-icon class="icon fullscreen-enter-icon"></media-fullscreen-enter-icon>
|
||||
<media-fullscreen-exit-icon class="icon fullscreen-exit-icon"></media-fullscreen-exit-icon>
|
||||
</media-fullscreen-button>
|
||||
<media-tooltip
|
||||
id="fullscreen-tooltip"
|
||||
class="surface popup-animation"
|
||||
popover="manual"
|
||||
delay="500"
|
||||
side="top"
|
||||
side-offset="12"
|
||||
collision-padding="12"
|
||||
>
|
||||
<span class="tooltip fullscreen-enter-tooltip">Enter Fullscreen</span>
|
||||
<span class="tooltip fullscreen-exit-tooltip">Exit Fullscreen</span>
|
||||
</media-tooltip>
|
||||
</div>
|
||||
</media-container>
|
||||
</video-provider>
|
||||
<script type="module" src="/src/frosted-eject.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -2,7 +2,8 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React Frosted Ejected</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>VJS HTML Demo</title>
|
||||
<link rel="preconnect" href="https://rsms.me/" />
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
|
||||
<style>
|
||||
@@ -17,8 +18,10 @@
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
<body style="display: flex; flex-direction: column; min-height: 100vh; max-width: 960px; padding: 1rem">
|
||||
<h1>Frosted Skin</h1>
|
||||
<a href="/">← Back to index</a>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/frosted.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,15 @@
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
<body style="display: flex; flex-direction: column; min-height: 100vh; max-width: 960px; padding: 1rem">
|
||||
<h1>Video.js 10 HTML Demos</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/minimal.html">Minimal Skin (imported)</a></li>
|
||||
<li><a href="/minimal-eject.html">Minimal Skin (ejected)</a></li>
|
||||
<li><a href="/frosted.html">Frosted Skin (imported)</a></li>
|
||||
<li><a href="/frosted-eject.html">Frosted Skin (ejected)</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,141 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HTML Minimal Ejected</title>
|
||||
<link rel="preconnect" href="https://rsms.me/" />
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
|
||||
<style>
|
||||
body {
|
||||
font-family:
|
||||
InterVariable, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
||||
'Noto Color Emoji';
|
||||
margin: 0;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="display: flex; flex-direction: column; min-height: 100vh; max-width: 960px; padding: 1rem">
|
||||
<h1>Minimal Skin (ejected)</h1>
|
||||
<a href="/">← Back to index</a>
|
||||
<video-provider style="display: block">
|
||||
<media-container
|
||||
style="
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 2rem;
|
||||
max-width: 960px;
|
||||
margin: 2rem auto;
|
||||
aspect-ratio: 16/9;
|
||||
"
|
||||
>
|
||||
<video
|
||||
slot="media"
|
||||
src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4"
|
||||
playsinline
|
||||
poster="https://image.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/thumbnail.webp"
|
||||
></video>
|
||||
|
||||
<div class="overlay"></div>
|
||||
|
||||
<div class="control-bar">
|
||||
<!-- NOTE: We can decide if we further want to provide a further, "themed" media-play-button that comes with baked in default styles and icons. (CJP) -->
|
||||
|
||||
<media-play-button commandfor="play-tooltip" class="button">
|
||||
<media-play-icon class="icon play-icon"></media-play-icon>
|
||||
<media-pause-icon class="icon pause-icon"></media-pause-icon>
|
||||
</media-play-button>
|
||||
<media-tooltip
|
||||
id="play-tooltip"
|
||||
class="popup-animation"
|
||||
popover="manual"
|
||||
delay="500"
|
||||
side="top"
|
||||
side-offset="6"
|
||||
collision-padding="12"
|
||||
>
|
||||
<span class="tooltip play-tooltip">Play</span>
|
||||
<span class="tooltip pause-tooltip">Pause</span>
|
||||
</media-tooltip>
|
||||
|
||||
<div class="time-display-group">
|
||||
<!-- Use the show-remaining attribute to show count down/remaining time -->
|
||||
<media-current-time-display></media-current-time-display>
|
||||
|
||||
<span class="duration-display">
|
||||
/
|
||||
<media-duration-display></media-duration-display>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<media-time-slider commandfor="time-slider-tooltip" class="slider">
|
||||
<media-time-slider-track class="slider-track">
|
||||
<media-time-slider-progress class="slider-progress"></media-time-slider-progress>
|
||||
<media-time-slider-pointer class="slider-pointer"></media-time-slider-pointer>
|
||||
</media-time-slider-track>
|
||||
<media-time-slider-thumb class="slider-thumb"></media-time-slider-thumb>
|
||||
</media-time-slider>
|
||||
<media-tooltip
|
||||
id="time-slider-tooltip"
|
||||
class="popup-animation"
|
||||
popover="manual"
|
||||
track-cursor-axis="x"
|
||||
side="top"
|
||||
side-offset="12"
|
||||
collision-padding="12"
|
||||
>
|
||||
<media-preview-time-display></media-preview-time-display>
|
||||
</media-tooltip>
|
||||
|
||||
<div class="button-group">
|
||||
<media-mute-button commandfor="volume-slider-popover" command="toggle-popover" class="button">
|
||||
<media-volume-high-icon class="icon volume-high-icon"></media-volume-high-icon>
|
||||
<media-volume-low-icon class="icon volume-low-icon"></media-volume-low-icon>
|
||||
<media-volume-off-icon class="icon volume-off-icon"></media-volume-off-icon>
|
||||
</media-mute-button>
|
||||
<media-popover
|
||||
id="volume-slider-popover"
|
||||
class="popup-animation"
|
||||
popover="manual"
|
||||
open-on-hover
|
||||
delay="200"
|
||||
close-delay="100"
|
||||
side="top"
|
||||
side-offset="2"
|
||||
collision-padding="12"
|
||||
>
|
||||
<media-volume-slider class="slider" orientation="vertical">
|
||||
<media-volume-slider-track class="slider-track">
|
||||
<media-volume-slider-indicator class="slider-progress"></media-volume-slider-indicator>
|
||||
</media-volume-slider-track>
|
||||
<media-volume-slider-thumb class="slider-thumb"></media-volume-slider-thumb>
|
||||
</media-volume-slider>
|
||||
</media-popover>
|
||||
|
||||
<media-fullscreen-button commandfor="fullscreen-tooltip" class="button">
|
||||
<media-fullscreen-enter-alt-icon class="icon fullscreen-enter-icon"></media-fullscreen-enter-alt-icon>
|
||||
<media-fullscreen-exit-alt-icon class="icon fullscreen-exit-icon"></media-fullscreen-exit-alt-icon>
|
||||
</media-fullscreen-button>
|
||||
<media-tooltip
|
||||
id="fullscreen-tooltip"
|
||||
class="popup-animation"
|
||||
popover="manual"
|
||||
delay="500"
|
||||
side="top"
|
||||
side-offset="6"
|
||||
collision-padding="12"
|
||||
>
|
||||
<span class="tooltip fullscreen-enter-tooltip">Enter Fullscreen</span>
|
||||
<span class="tooltip fullscreen-exit-tooltip">Exit Fullscreen</span>
|
||||
</media-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</media-container>
|
||||
</video-provider>
|
||||
<script type="module" src="/src/minimal-eject.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -2,7 +2,8 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React Minimal Ejected</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>VJS HTML Demo</title>
|
||||
<link rel="preconnect" href="https://rsms.me/" />
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
|
||||
<style>
|
||||
@@ -17,8 +18,10 @@
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
<body style="display: flex; flex-direction: column; min-height: 100vh; max-width: 960px; padding: 1rem">
|
||||
<h1>Minimal Skin</h1>
|
||||
<a href="/">← Back to index</a>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/minimal.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,4 +1,4 @@
|
||||
import './minimal.css';
|
||||
import './frosted-eject.css';
|
||||
import '@videojs/html/icons';
|
||||
// be sure to import video-provider first
|
||||
import '@videojs/html/define/video-provider';
|
||||
@@ -0,0 +1,14 @@
|
||||
import '@videojs/html/skins/frosted';
|
||||
|
||||
document.getElementById('app').innerHTML = /* html */ `
|
||||
<video-provider>
|
||||
<media-skin-frosted style="border-radius: 2rem; width: 100%; margin: 2rem auto; aspect-ratio: 16/9">
|
||||
<video
|
||||
slot="media"
|
||||
src="https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/high.mp4"
|
||||
poster="https://image.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/thumbnail.webp"
|
||||
playsinline
|
||||
></video>
|
||||
</media-skin-frosted>
|
||||
</video-provider>
|
||||
`;
|
||||
@@ -1,28 +0,0 @@
|
||||
import '@videojs/html/skins/frosted';
|
||||
import '@videojs/html/skins/minimal';
|
||||
|
||||
document.body.innerHTML = /* html */ `
|
||||
<div style="display: flex; flex-direction: column; justify-content: center; min-height: 100vh; gap: 2rem; padding: 1rem; ">
|
||||
<video-provider>
|
||||
<media-skin-frosted style="border-radius: 2rem; width: 100%; max-width: 960px; margin: 2rem auto; aspect-ratio: 16/9">
|
||||
<video
|
||||
slot="media"
|
||||
src="https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/high.mp4"
|
||||
poster="https://image.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/thumbnail.webp"
|
||||
playsinline
|
||||
></video>
|
||||
</media-skin-frosted>
|
||||
</video-provider>
|
||||
|
||||
<video-provider>
|
||||
<media-skin-minimal style="border-radius: 0.75rem; width: 100%; max-width: 960px; margin: 2rem auto; aspect-ratio: 16/9">
|
||||
<video
|
||||
slot="media"
|
||||
src="https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/high.mp4"
|
||||
poster="https://image.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/thumbnail.webp"
|
||||
playsinline
|
||||
></video>
|
||||
</media-skin-minimal>
|
||||
</video-provider>
|
||||
</div>
|
||||
`;
|
||||
@@ -1,4 +1,4 @@
|
||||
import './frosted.css';
|
||||
import './minimal-eject.css';
|
||||
import '@videojs/html/icons';
|
||||
// be sure to import video-provider first
|
||||
import '@videojs/html/define/video-provider';
|
||||
@@ -0,0 +1,14 @@
|
||||
import '@videojs/html/skins/minimal';
|
||||
|
||||
document.getElementById('app').innerHTML = /* html */ `
|
||||
<video-provider>
|
||||
<media-skin-minimal style="border-radius: 0.75rem; width: 100%; margin: 2rem auto; aspect-ratio: 16/9">
|
||||
<video
|
||||
slot="media"
|
||||
src="https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/high.mp4"
|
||||
poster="https://image.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/thumbnail.webp"
|
||||
playsinline
|
||||
></video>
|
||||
</media-skin-minimal>
|
||||
</video-provider>
|
||||
`;
|
||||
@@ -1,3 +1,4 @@
|
||||
import { resolve } from 'node:path';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
// https://vitejs.dev/config
|
||||
@@ -8,4 +9,15 @@ export default defineConfig({
|
||||
optimizeDeps: {
|
||||
exclude: ['@vjs/html'],
|
||||
},
|
||||
build: {
|
||||
rollupOptions: {
|
||||
input: {
|
||||
main: resolve(__dirname, 'index.html'),
|
||||
minimal: resolve(__dirname, 'minimal.html'),
|
||||
'minimal-eject': resolve(__dirname, 'minimal-eject.html'),
|
||||
frosted: resolve(__dirname, 'frosted.html'),
|
||||
'frosted-eject': resolve(__dirname, 'frosted-eject.html'),
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,143 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HTML Frosted Ejected</title>
|
||||
<link rel="preconnect" href="https://rsms.me/" />
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
|
||||
<style>
|
||||
body {
|
||||
font-family:
|
||||
InterVariable, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
||||
'Noto Color Emoji';
|
||||
margin: 0;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
gap: 2rem;
|
||||
padding: 1rem;
|
||||
"
|
||||
>
|
||||
<media-provider style="display: block">
|
||||
<media-container
|
||||
style="
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 2rem;
|
||||
max-width: 960px;
|
||||
margin: 2rem auto;
|
||||
aspect-ratio: 16/9;
|
||||
"
|
||||
>
|
||||
<video
|
||||
slot="media"
|
||||
src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4"
|
||||
playsinline
|
||||
poster="https://image.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/thumbnail.webp"
|
||||
></video>
|
||||
|
||||
<div class="overlay"></div>
|
||||
|
||||
<div class="control-bar surface">
|
||||
<media-play-button commandfor="play-tooltip" class="button">
|
||||
<media-play-icon class="icon play-icon"></media-play-icon>
|
||||
<media-pause-icon class="icon pause-icon"></media-pause-icon>
|
||||
</media-play-button>
|
||||
<media-tooltip
|
||||
id="play-tooltip"
|
||||
class="surface popup-animation"
|
||||
popover="manual"
|
||||
delay="500"
|
||||
side="top"
|
||||
side-offset="12"
|
||||
collision-padding="12"
|
||||
>
|
||||
<span class="tooltip play-tooltip">Play</span>
|
||||
<span class="tooltip pause-tooltip">Pause</span>
|
||||
</media-tooltip>
|
||||
|
||||
<div class="time-controls">
|
||||
<!-- Use the show-remaining attribute to show count down/remaining time -->
|
||||
<media-current-time-display></media-current-time-display>
|
||||
|
||||
<media-time-slider commandfor="time-slider-tooltip" class="slider">
|
||||
<media-time-slider-track class="slider-track">
|
||||
<media-time-slider-progress class="slider-progress"></media-time-slider-progress>
|
||||
<media-time-slider-pointer class="slider-pointer"></media-time-slider-pointer>
|
||||
</media-time-slider-track>
|
||||
<media-time-slider-thumb class="slider-thumb"></media-time-slider-thumb>
|
||||
</media-time-slider>
|
||||
<media-tooltip
|
||||
id="time-slider-tooltip"
|
||||
class="surface popup-animation"
|
||||
popover="manual"
|
||||
track-cursor-axis="x"
|
||||
side="top"
|
||||
side-offset="18"
|
||||
collision-padding="12"
|
||||
>
|
||||
<media-preview-time-display></media-preview-time-display>
|
||||
</media-tooltip>
|
||||
|
||||
<media-duration-display></media-duration-display>
|
||||
</div>
|
||||
|
||||
<media-mute-button commandfor="volume-slider-popover" command="toggle-popover" class="button">
|
||||
<media-volume-high-icon class="icon volume-high-icon"></media-volume-high-icon>
|
||||
<media-volume-low-icon class="icon volume-low-icon"></media-volume-low-icon>
|
||||
<media-volume-off-icon class="icon volume-off-icon"></media-volume-off-icon>
|
||||
</media-mute-button>
|
||||
<media-popover
|
||||
id="volume-slider-popover"
|
||||
class="surface popup-animation"
|
||||
popover="manual"
|
||||
open-on-hover
|
||||
delay="200"
|
||||
close-delay="100"
|
||||
side="top"
|
||||
side-offset="12"
|
||||
collision-padding="12"
|
||||
>
|
||||
<media-volume-slider class="slider" orientation="vertical">
|
||||
<media-volume-slider-track class="slider-track">
|
||||
<media-volume-slider-indicator class="slider-progress"></media-volume-slider-indicator>
|
||||
</media-volume-slider-track>
|
||||
<media-volume-slider-thumb class="slider-thumb"></media-volume-slider-thumb>
|
||||
</media-volume-slider>
|
||||
</media-popover>
|
||||
|
||||
<media-fullscreen-button commandfor="fullscreen-tooltip" class="button">
|
||||
<media-fullscreen-enter-icon class="icon fullscreen-enter-icon"></media-fullscreen-enter-icon>
|
||||
<media-fullscreen-exit-icon class="icon fullscreen-exit-icon"></media-fullscreen-exit-icon>
|
||||
</media-fullscreen-button>
|
||||
<media-tooltip
|
||||
id="fullscreen-tooltip"
|
||||
class="surface popup-animation"
|
||||
popover="manual"
|
||||
delay="500"
|
||||
side="top"
|
||||
side-offset="12"
|
||||
collision-padding="12"
|
||||
>
|
||||
<span class="tooltip fullscreen-enter-tooltip">Enter Fullscreen</span>
|
||||
<span class="tooltip fullscreen-exit-tooltip">Exit Fullscreen</span>
|
||||
</media-tooltip>
|
||||
</div>
|
||||
</media-container>
|
||||
</media-provider>
|
||||
</div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,19 +0,0 @@
|
||||
{
|
||||
"name": "html-eject-frosted",
|
||||
"type": "module",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"description": "HTML example for Video.js 10",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@videojs/html": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5.9.2",
|
||||
"vite": "^7.1.6"
|
||||
}
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": "."
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
// https://vitejs.dev/config
|
||||
export default defineConfig({
|
||||
server: {
|
||||
port: 5174,
|
||||
},
|
||||
optimizeDeps: {
|
||||
exclude: ['@vjs/html'],
|
||||
},
|
||||
});
|
||||
@@ -1,150 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HTML Minimal Ejected</title>
|
||||
<link rel="preconnect" href="https://rsms.me/" />
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
|
||||
<style>
|
||||
body {
|
||||
font-family:
|
||||
InterVariable, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
||||
'Noto Color Emoji';
|
||||
margin: 0;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
gap: 2rem;
|
||||
padding: 1rem;
|
||||
"
|
||||
>
|
||||
<video-provider style="display: block">
|
||||
<media-container
|
||||
style="
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 2rem;
|
||||
max-width: 960px;
|
||||
margin: 2rem auto;
|
||||
aspect-ratio: 16/9;
|
||||
"
|
||||
>
|
||||
<video
|
||||
slot="media"
|
||||
src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4"
|
||||
playsinline
|
||||
poster="https://image.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/thumbnail.webp"
|
||||
></video>
|
||||
|
||||
<div class="overlay"></div>
|
||||
|
||||
<div class="control-bar">
|
||||
<!-- NOTE: We can decide if we further want to provide a further, "themed" media-play-button that comes with baked in default styles and icons. (CJP) -->
|
||||
|
||||
<media-play-button commandfor="play-tooltip" class="button">
|
||||
<media-play-icon class="icon play-icon"></media-play-icon>
|
||||
<media-pause-icon class="icon pause-icon"></media-pause-icon>
|
||||
</media-play-button>
|
||||
<media-tooltip
|
||||
id="play-tooltip"
|
||||
class="popup-animation"
|
||||
popover="manual"
|
||||
delay="500"
|
||||
side="top"
|
||||
side-offset="6"
|
||||
collision-padding="12"
|
||||
>
|
||||
<span class="tooltip play-tooltip">Play</span>
|
||||
<span class="tooltip pause-tooltip">Pause</span>
|
||||
</media-tooltip>
|
||||
|
||||
<div class="time-display-group">
|
||||
<!-- Use the show-remaining attribute to show count down/remaining time -->
|
||||
<media-current-time-display></media-current-time-display>
|
||||
|
||||
<span class="duration-display">
|
||||
/
|
||||
<media-duration-display></media-duration-display>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<media-time-slider commandfor="time-slider-tooltip" class="slider">
|
||||
<media-time-slider-track class="slider-track">
|
||||
<media-time-slider-progress class="slider-progress"></media-time-slider-progress>
|
||||
<media-time-slider-pointer class="slider-pointer"></media-time-slider-pointer>
|
||||
</media-time-slider-track>
|
||||
<media-time-slider-thumb class="slider-thumb"></media-time-slider-thumb>
|
||||
</media-time-slider>
|
||||
<media-tooltip
|
||||
id="time-slider-tooltip"
|
||||
class="popup-animation"
|
||||
popover="manual"
|
||||
track-cursor-axis="x"
|
||||
side="top"
|
||||
side-offset="12"
|
||||
collision-padding="12"
|
||||
>
|
||||
<media-preview-time-display></media-preview-time-display>
|
||||
</media-tooltip>
|
||||
|
||||
<div class="button-group">
|
||||
<media-mute-button commandfor="volume-slider-popover" command="toggle-popover" class="button">
|
||||
<media-volume-high-icon class="icon volume-high-icon"></media-volume-high-icon>
|
||||
<media-volume-low-icon class="icon volume-low-icon"></media-volume-low-icon>
|
||||
<media-volume-off-icon class="icon volume-off-icon"></media-volume-off-icon>
|
||||
</media-mute-button>
|
||||
<media-popover
|
||||
id="volume-slider-popover"
|
||||
class="popup-animation"
|
||||
popover="manual"
|
||||
open-on-hover
|
||||
delay="200"
|
||||
close-delay="100"
|
||||
side="top"
|
||||
side-offset="2"
|
||||
collision-padding="12"
|
||||
>
|
||||
<media-volume-slider class="slider" orientation="vertical">
|
||||
<media-volume-slider-track class="slider-track">
|
||||
<media-volume-slider-indicator class="slider-progress"></media-volume-slider-indicator>
|
||||
</media-volume-slider-track>
|
||||
<media-volume-slider-thumb class="slider-thumb"></media-volume-slider-thumb>
|
||||
</media-volume-slider>
|
||||
</media-popover>
|
||||
|
||||
<media-fullscreen-button commandfor="fullscreen-tooltip" class="button">
|
||||
<media-fullscreen-enter-alt-icon class="icon fullscreen-enter-icon"></media-fullscreen-enter-alt-icon>
|
||||
<media-fullscreen-exit-alt-icon class="icon fullscreen-exit-icon"></media-fullscreen-exit-alt-icon>
|
||||
</media-fullscreen-button>
|
||||
<media-tooltip
|
||||
id="fullscreen-tooltip"
|
||||
class="popup-animation"
|
||||
popover="manual"
|
||||
delay="500"
|
||||
side="top"
|
||||
side-offset="6"
|
||||
collision-padding="12"
|
||||
>
|
||||
<span class="tooltip fullscreen-enter-tooltip">Enter Fullscreen</span>
|
||||
<span class="tooltip fullscreen-exit-tooltip">Exit Fullscreen</span>
|
||||
</media-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</media-container>
|
||||
</video-provider>
|
||||
</div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,19 +0,0 @@
|
||||
{
|
||||
"name": "html-eject-minimal",
|
||||
"type": "module",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"description": "HTML example for Video.js 10",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@videojs/html": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5.9.2",
|
||||
"vite": "^7.1.6"
|
||||
}
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": "."
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
// https://vitejs.dev/config
|
||||
export default defineConfig({
|
||||
server: {
|
||||
port: 5174,
|
||||
},
|
||||
optimizeDeps: {
|
||||
exclude: ['@vjs/html'],
|
||||
},
|
||||
});
|
||||
@@ -3,14 +3,16 @@ import type { ChangeEventHandler } from 'react';
|
||||
import { FrostedSkin, MinimalSkin, Video, VideoProvider } from '@videojs/react';
|
||||
import { FullscreenEnterAltIcon, FullscreenExitAltIcon } from '@videojs/react/icons';
|
||||
import clsx from 'clsx';
|
||||
|
||||
// import FrostedSkin from './skins/frosted/FrostedSkin';
|
||||
// import MinimalSkin from './skins/toasted/MinimalSkin';
|
||||
import { useCallback, useMemo, useRef, useState } from 'react';
|
||||
import { useFullscreen } from './hooks/useFullscreen';
|
||||
|
||||
// NOTE: Commented out imports are for testing locally/externally defined skins.
|
||||
// import { VideoProvider, Video } from '@videojs/react';
|
||||
import { useCallback, useMemo, useRef, useState } from 'react';
|
||||
import { useFullscreen } from './hooks/useFullscreen';
|
||||
// import FrostedSkin from './skins/frosted/FrostedSkin';
|
||||
// import MinimalSkin from './skins/toasted/MinimalSkin';
|
||||
|
||||
import FrostedEjectedSkin from './skins/frosted-eject/FrostedSkin';
|
||||
import MinimalEjectedSkin from './skins/minimal-eject/MinimalSkin';
|
||||
import '@videojs/react/skins/frosted.css';
|
||||
import '@videojs/react/skins/minimal.css';
|
||||
import './globals.css';
|
||||
@@ -18,14 +20,24 @@ import './globals.css';
|
||||
const skins = [
|
||||
{
|
||||
key: 'frosted',
|
||||
name: 'Frosted',
|
||||
name: 'Frosted (imported)',
|
||||
component: FrostedSkin,
|
||||
},
|
||||
{
|
||||
key: 'frosted-eject',
|
||||
name: 'Frosted (ejected)',
|
||||
component: FrostedEjectedSkin,
|
||||
},
|
||||
{
|
||||
key: 'minimal',
|
||||
name: 'Minimal',
|
||||
name: 'Minimal (imported)',
|
||||
component: MinimalSkin,
|
||||
},
|
||||
{
|
||||
key: 'minimal-eject',
|
||||
name: 'Minimal (ejected)',
|
||||
component: MinimalEjectedSkin,
|
||||
},
|
||||
] as const;
|
||||
|
||||
type SkinKey = (typeof skins)[number]['key'];
|
||||
@@ -111,9 +123,11 @@ export default function App(): JSX.Element {
|
||||
const skinClassName = useMemo(() => {
|
||||
switch (skinKey) {
|
||||
case 'frosted':
|
||||
return 'aspect-video rounded-4xl shadow shadow-lg shadow-black/15';
|
||||
case 'frosted-eject':
|
||||
return 'aspect-video !rounded-4xl shadow shadow-lg shadow-black/15';
|
||||
case 'minimal':
|
||||
return 'aspect-video rounded-2xl shadow shadow-lg shadow-black/15';
|
||||
case 'minimal-eject':
|
||||
return 'aspect-video !rounded-2xl shadow shadow-lg shadow-black/15';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
{
|
||||
"name": "react-eject-frosted",
|
||||
"type": "module",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"description": "React example for Video.js 10",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@videojs/react": "workspace:*",
|
||||
"clsx": "^2.1.1",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"screenfull": "^6.0.2",
|
||||
"tailwindcss": "^4.1.13"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/vite": "^4.1.0",
|
||||
"@types/react": "^18.0.0",
|
||||
"@types/react-dom": "^18.0.0",
|
||||
"@vitejs/plugin-react": "^5.0.3",
|
||||
"typescript": "^5.9.2",
|
||||
"vite": "^7.1.6"
|
||||
}
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
import { Video, VideoProvider } from '@videojs/react';
|
||||
import { StrictMode } from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
|
||||
import FrostedSkin from './FrostedSkin';
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<VideoProvider>
|
||||
<FrostedSkin>
|
||||
<Video
|
||||
// @ts-expect-error -- types are incorrect
|
||||
src="https://stream.mux.com/UZMwOY6MgmhFNXLbSFXAuPKlRPss5XNA.m3u8"
|
||||
poster="https://image.mux.com/UZMwOY6MgmhFNXLbSFXAuPKlRPss5XNA/thumbnail.webp"
|
||||
playsInline
|
||||
/>
|
||||
</FrostedSkin>
|
||||
</VideoProvider>
|
||||
</StrictMode>,
|
||||
);
|
||||
@@ -1,9 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "react",
|
||||
"baseUrl": "."
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import tailwindcss from '@tailwindcss/vite';
|
||||
|
||||
import react from '@vitejs/plugin-react';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
// https://vitejs.dev/config
|
||||
export default defineConfig({
|
||||
plugins: [react(), tailwindcss()],
|
||||
server: {
|
||||
port: 5173,
|
||||
},
|
||||
optimizeDeps: {
|
||||
exclude: ['@videojs/react'],
|
||||
},
|
||||
});
|
||||
@@ -1,28 +0,0 @@
|
||||
{
|
||||
"name": "react-eject-minimal",
|
||||
"type": "module",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"description": "React example for Video.js 10",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@videojs/react": "workspace:*",
|
||||
"clsx": "^2.1.1",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"screenfull": "^6.0.2",
|
||||
"tailwindcss": "^4.1.13"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/vite": "^4.1.0",
|
||||
"@types/react": "^18.0.0",
|
||||
"@types/react-dom": "^18.0.0",
|
||||
"@vitejs/plugin-react": "^5.0.3",
|
||||
"typescript": "^5.9.2",
|
||||
"vite": "^7.1.6"
|
||||
}
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
import { Video, VideoProvider } from '@videojs/react';
|
||||
import { StrictMode } from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
|
||||
import MinimalSkin from './MinimalSkin';
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<VideoProvider>
|
||||
<MinimalSkin>
|
||||
<Video
|
||||
// @ts-expect-error -- types are incorrect
|
||||
src="https://stream.mux.com/UZMwOY6MgmhFNXLbSFXAuPKlRPss5XNA.m3u8"
|
||||
poster="https://image.mux.com/UZMwOY6MgmhFNXLbSFXAuPKlRPss5XNA/thumbnail.webp"
|
||||
playsInline
|
||||
/>
|
||||
</MinimalSkin>
|
||||
</VideoProvider>
|
||||
</StrictMode>,
|
||||
);
|
||||
@@ -1,9 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "react",
|
||||
"baseUrl": "."
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import tailwindcss from '@tailwindcss/vite';
|
||||
|
||||
import react from '@vitejs/plugin-react';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
// https://vitejs.dev/config
|
||||
export default defineConfig({
|
||||
plugins: [react(), tailwindcss()],
|
||||
server: {
|
||||
port: 5173,
|
||||
},
|
||||
optimizeDeps: {
|
||||
exclude: ['@videojs/react'],
|
||||
},
|
||||
});
|
||||
Generated
-106
@@ -94,32 +94,6 @@ importers:
|
||||
specifier: ^7.1.6
|
||||
version: 7.1.6(@types/node@22.18.6)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.1)
|
||||
|
||||
examples/html-eject-frosted:
|
||||
dependencies:
|
||||
'@videojs/html':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/html
|
||||
devDependencies:
|
||||
typescript:
|
||||
specifier: ^5.9.2
|
||||
version: 5.9.3
|
||||
vite:
|
||||
specifier: ^7.1.6
|
||||
version: 7.1.6(@types/node@22.18.6)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.1)
|
||||
|
||||
examples/html-eject-minimal:
|
||||
dependencies:
|
||||
'@videojs/html':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/html
|
||||
devDependencies:
|
||||
typescript:
|
||||
specifier: ^5.9.2
|
||||
version: 5.9.3
|
||||
vite:
|
||||
specifier: ^7.1.6
|
||||
version: 7.1.6(@types/node@22.18.6)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.1)
|
||||
|
||||
examples/next-demo:
|
||||
dependencies:
|
||||
next:
|
||||
@@ -200,86 +174,6 @@ importers:
|
||||
specifier: ^7.1.6
|
||||
version: 7.1.6(@types/node@22.18.6)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.1)
|
||||
|
||||
examples/react-eject-frosted:
|
||||
dependencies:
|
||||
'@videojs/react':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/react
|
||||
clsx:
|
||||
specifier: ^2.1.1
|
||||
version: 2.1.1
|
||||
react:
|
||||
specifier: ^18.0.0
|
||||
version: 18.3.1
|
||||
react-dom:
|
||||
specifier: ^18.0.0
|
||||
version: 18.3.1(react@18.3.1)
|
||||
screenfull:
|
||||
specifier: ^6.0.2
|
||||
version: 6.0.2
|
||||
tailwindcss:
|
||||
specifier: ^4.1.13
|
||||
version: 4.1.14
|
||||
devDependencies:
|
||||
'@tailwindcss/vite':
|
||||
specifier: ^4.1.0
|
||||
version: 4.1.14(vite@7.1.6(@types/node@22.18.6)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.1))
|
||||
'@types/react':
|
||||
specifier: ^18.0.0
|
||||
version: 18.3.24
|
||||
'@types/react-dom':
|
||||
specifier: ^18.0.0
|
||||
version: 18.3.7(@types/react@18.3.24)
|
||||
'@vitejs/plugin-react':
|
||||
specifier: ^5.0.3
|
||||
version: 5.0.3(vite@7.1.6(@types/node@22.18.6)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.1))
|
||||
typescript:
|
||||
specifier: ^5.9.2
|
||||
version: 5.9.3
|
||||
vite:
|
||||
specifier: ^7.1.6
|
||||
version: 7.1.6(@types/node@22.18.6)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.1)
|
||||
|
||||
examples/react-eject-minimal:
|
||||
dependencies:
|
||||
'@videojs/react':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/react
|
||||
clsx:
|
||||
specifier: ^2.1.1
|
||||
version: 2.1.1
|
||||
react:
|
||||
specifier: ^18.0.0
|
||||
version: 18.3.1
|
||||
react-dom:
|
||||
specifier: ^18.0.0
|
||||
version: 18.3.1(react@18.3.1)
|
||||
screenfull:
|
||||
specifier: ^6.0.2
|
||||
version: 6.0.2
|
||||
tailwindcss:
|
||||
specifier: ^4.1.13
|
||||
version: 4.1.14
|
||||
devDependencies:
|
||||
'@tailwindcss/vite':
|
||||
specifier: ^4.1.0
|
||||
version: 4.1.14(vite@7.1.6(@types/node@22.18.6)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.1))
|
||||
'@types/react':
|
||||
specifier: ^18.0.0
|
||||
version: 18.3.24
|
||||
'@types/react-dom':
|
||||
specifier: ^18.0.0
|
||||
version: 18.3.7(@types/react@18.3.24)
|
||||
'@vitejs/plugin-react':
|
||||
specifier: ^5.0.3
|
||||
version: 5.0.3(vite@7.1.6(@types/node@22.18.6)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.1))
|
||||
typescript:
|
||||
specifier: ^5.9.2
|
||||
version: 5.9.3
|
||||
vite:
|
||||
specifier: ^7.1.6
|
||||
version: 7.1.6(@types/node@22.18.6)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.1)
|
||||
|
||||
packages/core:
|
||||
dependencies:
|
||||
'@videojs/utils':
|
||||
|
||||
Reference in New Issue
Block a user