diff --git a/examples/html-demo/frosted-eject.html b/examples/html-demo/frosted-eject.html new file mode 100644 index 00000000..6fc81660 --- /dev/null +++ b/examples/html-demo/frosted-eject.html @@ -0,0 +1,134 @@ + + + + + + HTML Frosted Ejected + + + + + +

Frosted Skin (ejected)

+ ← Back to index + + + + +
+ +
+ + + + + + Play + Pause + + +
+ + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + Enter Fullscreen + Exit Fullscreen + +
+ + + + + diff --git a/examples/react-eject-frosted/index.html b/examples/html-demo/frosted.html similarity index 58% rename from examples/react-eject-frosted/index.html rename to examples/html-demo/frosted.html index 32220ada..f101da31 100644 --- a/examples/react-eject-frosted/index.html +++ b/examples/html-demo/frosted.html @@ -2,7 +2,8 @@ - React Frosted Ejected + + VJS HTML Demo - -
- + +

Frosted Skin

+ ← Back to index +
+ diff --git a/examples/html-demo/index.html b/examples/html-demo/index.html index d70e9b88..848981cf 100644 --- a/examples/html-demo/index.html +++ b/examples/html-demo/index.html @@ -18,8 +18,15 @@ } - -
- + +

Video.js 10 HTML Demos

+ diff --git a/examples/html-demo/minimal-eject.html b/examples/html-demo/minimal-eject.html new file mode 100644 index 00000000..d894a924 --- /dev/null +++ b/examples/html-demo/minimal-eject.html @@ -0,0 +1,141 @@ + + + + + + HTML Minimal Ejected + + + + + +

Minimal Skin (ejected)

+ ← Back to index + + + + +
+ +
+ + + + + + + + Play + Pause + + +
+ + + + + / + + +
+ + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + Enter Fullscreen + Exit Fullscreen + +
+
+ + + + + diff --git a/examples/react-eject-minimal/index.html b/examples/html-demo/minimal.html similarity index 58% rename from examples/react-eject-minimal/index.html rename to examples/html-demo/minimal.html index 497b4a8a..28d865d4 100644 --- a/examples/react-eject-minimal/index.html +++ b/examples/html-demo/minimal.html @@ -2,7 +2,8 @@ - React Minimal Ejected + + VJS HTML Demo - -
- + +

Minimal Skin

+ ← Back to index +
+ diff --git a/examples/html-eject-frosted/src/frosted.css b/examples/html-demo/src/frosted-eject.css similarity index 100% rename from examples/html-eject-frosted/src/frosted.css rename to examples/html-demo/src/frosted-eject.css diff --git a/examples/html-eject-minimal/src/main.ts b/examples/html-demo/src/frosted-eject.ts similarity index 95% rename from examples/html-eject-minimal/src/main.ts rename to examples/html-demo/src/frosted-eject.ts index fdb61959..8d60c4d8 100644 --- a/examples/html-eject-minimal/src/main.ts +++ b/examples/html-demo/src/frosted-eject.ts @@ -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'; diff --git a/examples/html-demo/src/frosted.ts b/examples/html-demo/src/frosted.ts new file mode 100644 index 00000000..0dc590ac --- /dev/null +++ b/examples/html-demo/src/frosted.ts @@ -0,0 +1,14 @@ +import '@videojs/html/skins/frosted'; + +document.getElementById('app').innerHTML = /* html */ ` + + + + + +`; diff --git a/examples/html-demo/src/main.ts b/examples/html-demo/src/main.ts deleted file mode 100644 index 022fe7a9..00000000 --- a/examples/html-demo/src/main.ts +++ /dev/null @@ -1,28 +0,0 @@ -import '@videojs/html/skins/frosted'; -import '@videojs/html/skins/minimal'; - -document.body.innerHTML = /* html */ ` -
- - - - - - - - - - - -
-`; diff --git a/examples/html-eject-minimal/src/minimal.css b/examples/html-demo/src/minimal-eject.css similarity index 100% rename from examples/html-eject-minimal/src/minimal.css rename to examples/html-demo/src/minimal-eject.css diff --git a/examples/html-eject-frosted/src/main.ts b/examples/html-demo/src/minimal-eject.ts similarity index 95% rename from examples/html-eject-frosted/src/main.ts rename to examples/html-demo/src/minimal-eject.ts index 49aada20..a0d011e5 100644 --- a/examples/html-eject-frosted/src/main.ts +++ b/examples/html-demo/src/minimal-eject.ts @@ -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'; diff --git a/examples/html-demo/src/minimal.ts b/examples/html-demo/src/minimal.ts new file mode 100644 index 00000000..e371d3ae --- /dev/null +++ b/examples/html-demo/src/minimal.ts @@ -0,0 +1,14 @@ +import '@videojs/html/skins/minimal'; + +document.getElementById('app').innerHTML = /* html */ ` + + + + + +`; diff --git a/examples/html-demo/vite.config.ts b/examples/html-demo/vite.config.ts index c9d7dbf3..63cd4cad 100644 --- a/examples/html-demo/vite.config.ts +++ b/examples/html-demo/vite.config.ts @@ -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'), + }, + }, + }, }); diff --git a/examples/html-eject-frosted/index.html b/examples/html-eject-frosted/index.html deleted file mode 100644 index 72a559ac..00000000 --- a/examples/html-eject-frosted/index.html +++ /dev/null @@ -1,143 +0,0 @@ - - - - - - HTML Frosted Ejected - - - - - -
- - - - -
- -
- - - - - - Play - Pause - - -
- - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - Enter Fullscreen - Exit Fullscreen - -
- - -
- - - diff --git a/examples/html-eject-frosted/package.json b/examples/html-eject-frosted/package.json deleted file mode 100644 index a1e2bf54..00000000 --- a/examples/html-eject-frosted/package.json +++ /dev/null @@ -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" - } -} diff --git a/examples/html-eject-frosted/tsconfig.json b/examples/html-eject-frosted/tsconfig.json deleted file mode 100644 index 50b8061b..00000000 --- a/examples/html-eject-frosted/tsconfig.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "baseUrl": "." - }, - "include": ["src"] -} diff --git a/examples/html-eject-frosted/vite.config.ts b/examples/html-eject-frosted/vite.config.ts deleted file mode 100644 index c9d7dbf3..00000000 --- a/examples/html-eject-frosted/vite.config.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { defineConfig } from 'vite'; - -// https://vitejs.dev/config -export default defineConfig({ - server: { - port: 5174, - }, - optimizeDeps: { - exclude: ['@vjs/html'], - }, -}); diff --git a/examples/html-eject-minimal/index.html b/examples/html-eject-minimal/index.html deleted file mode 100644 index 515e5915..00000000 --- a/examples/html-eject-minimal/index.html +++ /dev/null @@ -1,150 +0,0 @@ - - - - - - HTML Minimal Ejected - - - - - -
- - - - -
- -
- - - - - - - - Play - Pause - - -
- - - - - / - - -
- - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - Enter Fullscreen - Exit Fullscreen - -
-
- - -
- - - diff --git a/examples/html-eject-minimal/package.json b/examples/html-eject-minimal/package.json deleted file mode 100644 index e3aea64b..00000000 --- a/examples/html-eject-minimal/package.json +++ /dev/null @@ -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" - } -} diff --git a/examples/html-eject-minimal/tsconfig.json b/examples/html-eject-minimal/tsconfig.json deleted file mode 100644 index 50b8061b..00000000 --- a/examples/html-eject-minimal/tsconfig.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "baseUrl": "." - }, - "include": ["src"] -} diff --git a/examples/html-eject-minimal/vite.config.ts b/examples/html-eject-minimal/vite.config.ts deleted file mode 100644 index c9d7dbf3..00000000 --- a/examples/html-eject-minimal/vite.config.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { defineConfig } from 'vite'; - -// https://vitejs.dev/config -export default defineConfig({ - server: { - port: 5174, - }, - optimizeDeps: { - exclude: ['@vjs/html'], - }, -}); diff --git a/examples/react-demo/src/App.tsx b/examples/react-demo/src/App.tsx index d104c30a..077280c7 100644 --- a/examples/react-demo/src/App.tsx +++ b/examples/react-demo/src/App.tsx @@ -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 ''; } diff --git a/examples/react-eject-frosted/src/FrostedSkin.tsx b/examples/react-demo/src/skins/frosted-eject/FrostedSkin.tsx similarity index 100% rename from examples/react-eject-frosted/src/FrostedSkin.tsx rename to examples/react-demo/src/skins/frosted-eject/FrostedSkin.tsx diff --git a/examples/react-eject-frosted/src/frosted.css b/examples/react-demo/src/skins/frosted-eject/frosted.css similarity index 100% rename from examples/react-eject-frosted/src/frosted.css rename to examples/react-demo/src/skins/frosted-eject/frosted.css diff --git a/examples/react-eject-minimal/src/MinimalSkin.tsx b/examples/react-demo/src/skins/minimal-eject/MinimalSkin.tsx similarity index 100% rename from examples/react-eject-minimal/src/MinimalSkin.tsx rename to examples/react-demo/src/skins/minimal-eject/MinimalSkin.tsx diff --git a/examples/react-eject-minimal/src/minimal.css b/examples/react-demo/src/skins/minimal-eject/minimal.css similarity index 100% rename from examples/react-eject-minimal/src/minimal.css rename to examples/react-demo/src/skins/minimal-eject/minimal.css diff --git a/examples/react-eject-frosted/package.json b/examples/react-eject-frosted/package.json deleted file mode 100644 index 1cd669f9..00000000 --- a/examples/react-eject-frosted/package.json +++ /dev/null @@ -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" - } -} diff --git a/examples/react-eject-frosted/src/main.tsx b/examples/react-eject-frosted/src/main.tsx deleted file mode 100644 index a1e89e22..00000000 --- a/examples/react-eject-frosted/src/main.tsx +++ /dev/null @@ -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( - - - - - - , -); diff --git a/examples/react-eject-frosted/tsconfig.json b/examples/react-eject-frosted/tsconfig.json deleted file mode 100644 index 40aa8ebc..00000000 --- a/examples/react-eject-frosted/tsconfig.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "jsx": "react-jsx", - "jsxImportSource": "react", - "baseUrl": "." - }, - "include": ["src"] -} diff --git a/examples/react-eject-frosted/vite.config.ts b/examples/react-eject-frosted/vite.config.ts deleted file mode 100644 index 6869bb0a..00000000 --- a/examples/react-eject-frosted/vite.config.ts +++ /dev/null @@ -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'], - }, -}); diff --git a/examples/react-eject-minimal/package.json b/examples/react-eject-minimal/package.json deleted file mode 100644 index 2fe5ef4c..00000000 --- a/examples/react-eject-minimal/package.json +++ /dev/null @@ -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" - } -} diff --git a/examples/react-eject-minimal/src/main.tsx b/examples/react-eject-minimal/src/main.tsx deleted file mode 100644 index 2296632d..00000000 --- a/examples/react-eject-minimal/src/main.tsx +++ /dev/null @@ -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( - - - - - - , -); diff --git a/examples/react-eject-minimal/tsconfig.json b/examples/react-eject-minimal/tsconfig.json deleted file mode 100644 index 40aa8ebc..00000000 --- a/examples/react-eject-minimal/tsconfig.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "jsx": "react-jsx", - "jsxImportSource": "react", - "baseUrl": "." - }, - "include": ["src"] -} diff --git a/examples/react-eject-minimal/vite.config.ts b/examples/react-eject-minimal/vite.config.ts deleted file mode 100644 index 6869bb0a..00000000 --- a/examples/react-eject-minimal/vite.config.ts +++ /dev/null @@ -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'], - }, -}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c50893d9..35e7b2e8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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':