├── pnpm-workspace.yaml ├── player ├── svelte │ ├── default-theme │ │ ├── src │ │ │ ├── components │ │ │ │ ├── ChapterTitle.svelte │ │ │ │ ├── menus │ │ │ │ │ ├── MenuRadio.svelte │ │ │ │ │ ├── Submenu.svelte │ │ │ │ │ ├── SubmenuButton.svelte │ │ │ │ │ ├── CaptionSubmenu.svelte │ │ │ │ │ ├── SettingsMenu.svelte │ │ │ │ │ └── Menu.svelte │ │ │ │ ├── TimeGroup.svelte │ │ │ │ ├── sliders │ │ │ │ │ └── VolumeSlider.svelte │ │ │ │ ├── Tooltip.svelte │ │ │ │ ├── buttons │ │ │ │ │ ├── SeekBackButton.svelte │ │ │ │ │ ├── SeekForwardButton.svelte │ │ │ │ │ ├── PlayButton.svelte │ │ │ │ │ ├── PIPButton.svelte │ │ │ │ │ ├── CaptionButton.svelte │ │ │ │ │ ├── FullscreenButton.svelte │ │ │ │ │ └── MuteButton.svelte │ │ │ │ ├── VideoCaptions.svelte │ │ │ │ └── AudioCaptions.svelte │ │ │ ├── main.ts │ │ │ ├── tracks.ts │ │ │ └── document.css │ │ ├── public │ │ │ ├── favicon-16x16.png │ │ │ └── favicon-32x32.png │ │ ├── vite.config.ts │ │ ├── postcss.config.js │ │ ├── svelte.config.js │ │ ├── tsconfig.node.json │ │ ├── index.html │ │ ├── tsconfig.json │ │ ├── package.json │ │ └── README.md │ ├── css │ │ ├── public │ │ │ ├── favicon-16x16.png │ │ │ └── favicon-32x32.png │ │ ├── src │ │ │ ├── main.ts │ │ │ ├── components │ │ │ │ ├── TimeGroup.svelte │ │ │ │ ├── menus │ │ │ │ │ ├── CaptionSubmenu.svelte │ │ │ │ │ ├── Submenu.svelte │ │ │ │ │ └── SettingsMenu.svelte │ │ │ │ ├── ChapterTitle.svelte │ │ │ │ └── sliders │ │ │ │ │ └── SliderThumb.svelte │ │ │ ├── tracks.ts │ │ │ └── document.css │ │ ├── vite.config.ts │ │ ├── postcss.config.js │ │ ├── svelte.config.js │ │ ├── tsconfig.node.json │ │ ├── index.html │ │ ├── tsconfig.json │ │ ├── package.json │ │ └── README.md │ ├── tailwind-css │ │ ├── public │ │ │ ├── favicon-16x16.png │ │ │ └── favicon-32x32.png │ │ ├── src │ │ │ ├── main.ts │ │ │ ├── components │ │ │ │ ├── ChapterTitle.svelte │ │ │ │ ├── TimeGroup.svelte │ │ │ │ ├── sliders │ │ │ │ │ ├── SliderThumb.svelte │ │ │ │ │ ├── SliderPreview.svelte │ │ │ │ │ ├── TimeSlider.svelte │ │ │ │ │ └── VolumeSlider.svelte │ │ │ │ ├── menus │ │ │ │ │ ├── CaptionSubmenu.svelte │ │ │ │ │ ├── Submenu.svelte │ │ │ │ │ ├── MenuRadio.svelte │ │ │ │ │ └── SettingsMenu.svelte │ │ │ │ ├── Gestures.svelte │ │ │ │ └── Tooltip.svelte │ │ │ ├── base.css │ │ │ └── tracks.ts │ │ ├── postcss.config.js │ │ ├── vite.config.ts │ │ ├── svelte.config.js │ │ ├── tsconfig.node.json │ │ ├── tsconfig.json │ │ ├── index.html │ │ └── package.json │ └── default-layout │ │ ├── public │ │ ├── favicon-16x16.png │ │ └── favicon-32x32.png │ │ ├── src │ │ ├── main.ts │ │ ├── tracks.ts │ │ └── document.css │ │ ├── vite.config.ts │ │ ├── postcss.config.js │ │ ├── svelte.config.js │ │ ├── tsconfig.node.json │ │ ├── index.html │ │ ├── tsconfig.json │ │ ├── package.json │ │ └── README.md ├── vue │ ├── css │ │ ├── public │ │ │ ├── favicon-16x16.png │ │ │ └── favicon-32x32.png │ │ ├── src │ │ │ ├── main.ts │ │ │ ├── components │ │ │ │ ├── TimeGroup.vue │ │ │ │ ├── ChapterTitle.vue │ │ │ │ ├── menus │ │ │ │ │ ├── CaptionSubmenu.vue │ │ │ │ │ └── Submenu.vue │ │ │ │ └── sliders │ │ │ │ │ └── SliderThumb.vue │ │ │ ├── tracks.ts │ │ │ └── document.css │ │ ├── tsconfig.node.json │ │ ├── vite.config.ts │ │ ├── index.html │ │ ├── package.json │ │ ├── tsconfig.json │ │ └── README.md │ ├── default-theme │ │ ├── src │ │ │ ├── components │ │ │ │ ├── ChapterTitle.vue │ │ │ │ ├── menus │ │ │ │ │ ├── MenuRadio.vue │ │ │ │ │ ├── Submenu.vue │ │ │ │ │ ├── SubmenuButton.vue │ │ │ │ │ ├── CaptionSubmenu.vue │ │ │ │ │ └── SettingsMenu.vue │ │ │ │ ├── TimeGroup.vue │ │ │ │ ├── sliders │ │ │ │ │ └── VolumeSlider.vue │ │ │ │ ├── VideoCaptions.vue │ │ │ │ ├── Tooltip.vue │ │ │ │ ├── buttons │ │ │ │ │ ├── SeekBackButton.vue │ │ │ │ │ ├── SeekForwardButton.vue │ │ │ │ │ ├── PlayButton.vue │ │ │ │ │ ├── PIPButton.vue │ │ │ │ │ ├── CaptionButton.vue │ │ │ │ │ └── FullscreenButton.vue │ │ │ │ └── AudioCaptions.vue │ │ │ ├── main.ts │ │ │ ├── tracks.ts │ │ │ └── document.css │ │ ├── public │ │ │ ├── favicon-16x16.png │ │ │ └── favicon-32x32.png │ │ ├── tsconfig.node.json │ │ ├── vite.config.ts │ │ ├── index.html │ │ ├── package.json │ │ ├── tsconfig.json │ │ └── README.md │ ├── tailwind-css │ │ ├── postcss.config.js │ │ ├── public │ │ │ ├── favicon-16x16.png │ │ │ └── favicon-32x32.png │ │ ├── src │ │ │ ├── main.ts │ │ │ ├── components │ │ │ │ ├── ChapterTitle.vue │ │ │ │ ├── sliders │ │ │ │ │ ├── SliderThumb.vue │ │ │ │ │ ├── SliderPreview.vue │ │ │ │ │ └── TimeSlider.vue │ │ │ │ ├── TimeGroup.vue │ │ │ │ ├── menus │ │ │ │ │ ├── CaptionSubmenu.vue │ │ │ │ │ ├── MenuRadio.vue │ │ │ │ │ └── Submenu.vue │ │ │ │ ├── Gestures.vue │ │ │ │ └── Tooltip.vue │ │ │ ├── base.css │ │ │ └── tracks.ts │ │ ├── tsconfig.node.json │ │ ├── vite.config.ts │ │ ├── index.html │ │ ├── package.json │ │ └── tsconfig.json │ └── default-layout │ │ ├── public │ │ ├── favicon-16x16.png │ │ └── favicon-32x32.png │ │ ├── src │ │ ├── main.ts │ │ ├── tracks.ts │ │ └── document.css │ │ ├── tsconfig.node.json │ │ ├── vite.config.ts │ │ ├── index.html │ │ ├── package.json │ │ ├── tsconfig.json │ │ └── README.md ├── react │ ├── css │ │ ├── public │ │ │ ├── favicon-16x16.png │ │ │ └── favicon-32x32.png │ │ ├── vite.config.ts │ │ ├── tsconfig.node.json │ │ ├── src │ │ │ ├── main.tsx │ │ │ ├── styles │ │ │ │ ├── time-group.module.css │ │ │ │ └── chapter-title.module.css │ │ │ ├── components │ │ │ │ └── time-group.tsx │ │ │ ├── document.css │ │ │ └── tracks.ts │ │ ├── index.html │ │ ├── package.json │ │ ├── tsconfig.json │ │ └── README.md │ ├── tailwind-css │ │ ├── public │ │ │ ├── favicon-16x16.png │ │ │ └── favicon-32x32.png │ │ ├── postcss.config.js │ │ ├── src │ │ │ ├── base.css │ │ │ ├── main.tsx │ │ │ ├── components │ │ │ │ ├── title.tsx │ │ │ │ ├── time-group.tsx │ │ │ │ └── layouts │ │ │ │ │ └── video-layout.module.css │ │ │ └── tracks.ts │ │ ├── vite.config.ts │ │ ├── tsconfig.node.json │ │ ├── index.html │ │ ├── tsconfig.json │ │ └── package.json │ ├── default-layout │ │ ├── public │ │ │ ├── favicon-16x16.png │ │ │ └── favicon-32x32.png │ │ ├── vite.config.ts │ │ ├── tsconfig.node.json │ │ ├── src │ │ │ ├── main.tsx │ │ │ ├── document.css │ │ │ └── tracks.ts │ │ ├── index.html │ │ ├── package.json │ │ ├── tsconfig.json │ │ └── README.md │ ├── default-theme │ │ ├── public │ │ │ ├── favicon-16x16.png │ │ │ └── favicon-32x32.png │ │ ├── vite.config.ts │ │ ├── tsconfig.node.json │ │ ├── src │ │ │ ├── main.tsx │ │ │ ├── layouts │ │ │ │ └── shared │ │ │ │ │ └── time-group.tsx │ │ │ ├── document.css │ │ │ └── tracks.ts │ │ ├── index.html │ │ ├── package.json │ │ ├── tsconfig.json │ │ └── README.md │ └── radix+tailwind │ │ ├── public │ │ ├── favicon-16x16.png │ │ └── favicon-32x32.png │ │ ├── postcss.config.js │ │ ├── src │ │ ├── base.css │ │ ├── main.tsx │ │ ├── components │ │ │ ├── title.tsx │ │ │ └── time-group.tsx │ │ └── tracks.ts │ │ ├── vite.config.ts │ │ ├── tsconfig.node.json │ │ ├── index.html │ │ └── tsconfig.json ├── solid │ ├── css │ │ ├── public │ │ │ ├── favicon-16x16.png │ │ │ └── favicon-32x32.png │ │ ├── vite.config.ts │ │ ├── src │ │ │ ├── components │ │ │ │ ├── captions.tsx │ │ │ │ ├── sliders │ │ │ │ │ ├── slider-thumb.tsx │ │ │ │ │ ├── volume-slider.tsx │ │ │ │ │ ├── slider-chapters.tsx │ │ │ │ │ ├── slider-preview.tsx │ │ │ │ │ ├── time-slider.module.css │ │ │ │ │ ├── slider-preview.module.css │ │ │ │ │ ├── time-slider.tsx │ │ │ │ │ └── slider-thumb.module.css │ │ │ │ ├── chapter-title.tsx │ │ │ │ ├── menus │ │ │ │ │ ├── caption-submenu.module.css │ │ │ │ │ ├── settings-menu.module.css │ │ │ │ │ ├── submenu.module.css │ │ │ │ │ ├── menu-radio.tsx │ │ │ │ │ ├── caption-submenu.tsx │ │ │ │ │ ├── submenu.tsx │ │ │ │ │ ├── submenu-button.tsx │ │ │ │ │ └── settings-menu.tsx │ │ │ │ ├── buttons │ │ │ │ │ ├── pip-button.module.css │ │ │ │ │ ├── caption-button.module.css │ │ │ │ │ ├── fullscreen-button.module.css │ │ │ │ │ ├── mute-button.module.css │ │ │ │ │ └── play-button.module.css │ │ │ │ ├── time-group.module.css │ │ │ │ ├── time-group.tsx │ │ │ │ ├── chapter-title.module.css │ │ │ │ ├── gestures.tsx │ │ │ │ ├── tooltip.tsx │ │ │ │ └── gestures.module.css │ │ │ ├── main.tsx │ │ │ ├── tracks.ts │ │ │ └── document.css │ │ ├── tsconfig.node.json │ │ ├── index.html │ │ ├── package.json │ │ ├── README.md │ │ └── tsconfig.json │ ├── tailwind-css │ │ ├── public │ │ │ ├── favicon-16x16.png │ │ │ └── favicon-32x32.png │ │ ├── postcss.config.js │ │ ├── vite.config.ts │ │ ├── src │ │ │ ├── base.css │ │ │ ├── main.tsx │ │ │ ├── components │ │ │ │ ├── chapter-title.tsx │ │ │ │ ├── time-group.tsx │ │ │ │ ├── sliders │ │ │ │ │ ├── slider-thumb.tsx │ │ │ │ │ └── time-slider.tsx │ │ │ │ ├── captions.tsx │ │ │ │ ├── layouts │ │ │ │ │ └── video-layout.module.css │ │ │ │ ├── menus │ │ │ │ │ ├── caption-submenu.tsx │ │ │ │ │ ├── menu-radio.tsx │ │ │ │ │ ├── submenu.tsx │ │ │ │ │ └── settings-menu.tsx │ │ │ │ ├── gestures.tsx │ │ │ │ └── tooltip.tsx │ │ │ └── tracks.ts │ │ ├── tsconfig.node.json │ │ ├── index.html │ │ ├── package.json │ │ └── tsconfig.json │ ├── default-layout │ │ ├── public │ │ │ ├── favicon-16x16.png │ │ │ └── favicon-32x32.png │ │ ├── vite.config.ts │ │ ├── src │ │ │ ├── main.tsx │ │ │ ├── tracks.ts │ │ │ ├── document.css │ │ │ └── player.css │ │ ├── tsconfig.node.json │ │ ├── package.json │ │ ├── index.html │ │ ├── tsconfig.json │ │ └── README.md │ └── default-theme │ │ ├── public │ │ ├── favicon-16x16.png │ │ └── favicon-32x32.png │ │ ├── src │ │ ├── components │ │ │ ├── chapter-title.tsx │ │ │ ├── audio-captions.tsx │ │ │ ├── video-captions.tsx │ │ │ ├── menus │ │ │ │ ├── menu-radio.tsx │ │ │ │ ├── caption-submenu.tsx │ │ │ │ ├── submenu.tsx │ │ │ │ ├── submenu-button.tsx │ │ │ │ └── settings-menu.tsx │ │ │ ├── time-group.tsx │ │ │ ├── video-captions.module.css │ │ │ ├── sliders │ │ │ │ └── volume-slider.tsx │ │ │ ├── audio-captions.module.css │ │ │ ├── tooltip.tsx │ │ │ ├── video-gestures.tsx │ │ │ ├── buttons │ │ │ │ ├── seek-back-button.tsx │ │ │ │ ├── seek-forward-button.tsx │ │ │ │ └── play-button.tsx │ │ │ ├── video-gestures.module.css │ │ │ └── layouts │ │ │ │ ├── video-layout.module.css │ │ │ │ └── audio-layout.module.css │ │ ├── main.tsx │ │ ├── tracks.ts │ │ └── document.css │ │ ├── vite.config.ts │ │ ├── tsconfig.node.json │ │ ├── index.html │ │ ├── package.json │ │ ├── README.md │ │ └── tsconfig.json └── web-components │ ├── css │ ├── public │ │ ├── favicon-16x16.png │ │ └── favicon-32x32.png │ ├── package.json │ ├── src │ │ ├── styles │ │ │ ├── poster.css │ │ │ ├── time.css │ │ │ └── chapter-title.css │ │ └── document.css │ ├── tsconfig.json │ └── README.md │ ├── tailwind-css │ ├── postcss.config.js │ ├── public │ │ ├── favicon-16x16.png │ │ └── favicon-32x32.png │ ├── src │ │ └── base.css │ ├── tsconfig.json │ └── package.json │ ├── default-theme │ ├── public │ │ ├── favicon-16x16.png │ │ └── favicon-32x32.png │ ├── package.json │ ├── index.html │ ├── tsconfig.json │ ├── src │ │ └── document.css │ └── README.md │ └── default-layout │ ├── public │ ├── favicon-16x16.png │ └── favicon-32x32.png │ ├── package.json │ └── tsconfig.json ├── .prettierignore ├── .editorconfig └── README.md /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'player/**' 3 | -------------------------------------------------------------------------------- /player/svelte/default-theme/src/components/ChapterTitle.svelte: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /player/vue/css/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/vue/css/public/favicon-16x16.png -------------------------------------------------------------------------------- /player/vue/css/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/vue/css/public/favicon-32x32.png -------------------------------------------------------------------------------- /player/react/css/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/react/css/public/favicon-16x16.png -------------------------------------------------------------------------------- /player/react/css/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/react/css/public/favicon-32x32.png -------------------------------------------------------------------------------- /player/solid/css/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/solid/css/public/favicon-16x16.png -------------------------------------------------------------------------------- /player/solid/css/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/solid/css/public/favicon-32x32.png -------------------------------------------------------------------------------- /player/svelte/css/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/svelte/css/public/favicon-16x16.png -------------------------------------------------------------------------------- /player/svelte/css/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/svelte/css/public/favicon-32x32.png -------------------------------------------------------------------------------- /player/vue/default-theme/src/components/ChapterTitle.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /player/vue/tailwind-css/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /player/react/tailwind-css/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/react/tailwind-css/public/favicon-16x16.png -------------------------------------------------------------------------------- /player/react/tailwind-css/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/react/tailwind-css/public/favicon-32x32.png -------------------------------------------------------------------------------- /player/solid/tailwind-css/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/solid/tailwind-css/public/favicon-16x16.png -------------------------------------------------------------------------------- /player/solid/tailwind-css/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/solid/tailwind-css/public/favicon-32x32.png -------------------------------------------------------------------------------- /player/svelte/css/src/main.ts: -------------------------------------------------------------------------------- 1 | import Player from './Player.svelte'; 2 | 3 | new Player({ 4 | target: document.getElementById('player')!, 5 | }); 6 | -------------------------------------------------------------------------------- /player/vue/default-layout/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/vue/default-layout/public/favicon-16x16.png -------------------------------------------------------------------------------- /player/vue/default-layout/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/vue/default-layout/public/favicon-32x32.png -------------------------------------------------------------------------------- /player/vue/default-theme/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/vue/default-theme/public/favicon-16x16.png -------------------------------------------------------------------------------- /player/vue/default-theme/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/vue/default-theme/public/favicon-32x32.png -------------------------------------------------------------------------------- /player/vue/tailwind-css/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/vue/tailwind-css/public/favicon-16x16.png -------------------------------------------------------------------------------- /player/vue/tailwind-css/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/vue/tailwind-css/public/favicon-32x32.png -------------------------------------------------------------------------------- /player/web-components/css/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/web-components/css/public/favicon-16x16.png -------------------------------------------------------------------------------- /player/web-components/css/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/web-components/css/public/favicon-32x32.png -------------------------------------------------------------------------------- /player/react/default-layout/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/react/default-layout/public/favicon-16x16.png -------------------------------------------------------------------------------- /player/react/default-layout/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/react/default-layout/public/favicon-32x32.png -------------------------------------------------------------------------------- /player/react/default-theme/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/react/default-theme/public/favicon-16x16.png -------------------------------------------------------------------------------- /player/react/default-theme/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/react/default-theme/public/favicon-32x32.png -------------------------------------------------------------------------------- /player/react/radix+tailwind/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/react/radix+tailwind/public/favicon-16x16.png -------------------------------------------------------------------------------- /player/react/radix+tailwind/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/react/radix+tailwind/public/favicon-32x32.png -------------------------------------------------------------------------------- /player/solid/default-layout/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/solid/default-layout/public/favicon-16x16.png -------------------------------------------------------------------------------- /player/solid/default-layout/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/solid/default-layout/public/favicon-32x32.png -------------------------------------------------------------------------------- /player/solid/default-theme/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/solid/default-theme/public/favicon-16x16.png -------------------------------------------------------------------------------- /player/solid/default-theme/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/solid/default-theme/public/favicon-32x32.png -------------------------------------------------------------------------------- /player/svelte/default-theme/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/svelte/default-theme/public/favicon-16x16.png -------------------------------------------------------------------------------- /player/svelte/default-theme/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/svelte/default-theme/public/favicon-32x32.png -------------------------------------------------------------------------------- /player/svelte/tailwind-css/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/svelte/tailwind-css/public/favicon-16x16.png -------------------------------------------------------------------------------- /player/svelte/tailwind-css/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/svelte/tailwind-css/public/favicon-32x32.png -------------------------------------------------------------------------------- /player/web-components/tailwind-css/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /player/svelte/default-layout/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/svelte/default-layout/public/favicon-16x16.png -------------------------------------------------------------------------------- /player/svelte/default-layout/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/svelte/default-layout/public/favicon-32x32.png -------------------------------------------------------------------------------- /player/svelte/default-layout/src/main.ts: -------------------------------------------------------------------------------- 1 | import Player from './Player.svelte'; 2 | 3 | new Player({ 4 | target: document.getElementById('player')!, 5 | }); 6 | -------------------------------------------------------------------------------- /player/svelte/default-theme/src/main.ts: -------------------------------------------------------------------------------- 1 | import Player from './Player.svelte'; 2 | 3 | new Player({ 4 | target: document.getElementById('player')!, 5 | }); 6 | -------------------------------------------------------------------------------- /player/svelte/tailwind-css/src/main.ts: -------------------------------------------------------------------------------- 1 | import Player from './Player.svelte'; 2 | 3 | new Player({ 4 | target: document.getElementById('player')!, 5 | }); 6 | -------------------------------------------------------------------------------- /player/solid/default-theme/src/components/chapter-title.tsx: -------------------------------------------------------------------------------- 1 | export function ChapterTitle() { 2 | return ; 3 | } 4 | -------------------------------------------------------------------------------- /player/vue/css/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | 3 | import Player from './Player.vue'; 4 | 5 | const app = createApp(Player); 6 | app.mount('#player'); 7 | -------------------------------------------------------------------------------- /player/web-components/default-theme/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/web-components/default-theme/public/favicon-16x16.png -------------------------------------------------------------------------------- /player/web-components/default-theme/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/web-components/default-theme/public/favicon-32x32.png -------------------------------------------------------------------------------- /player/web-components/tailwind-css/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/web-components/tailwind-css/public/favicon-16x16.png -------------------------------------------------------------------------------- /player/web-components/tailwind-css/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/web-components/tailwind-css/public/favicon-32x32.png -------------------------------------------------------------------------------- /player/web-components/default-layout/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/web-components/default-layout/public/favicon-16x16.png -------------------------------------------------------------------------------- /player/web-components/default-layout/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vidstack/examples/HEAD/player/web-components/default-layout/public/favicon-32x32.png -------------------------------------------------------------------------------- /player/react/tailwind-css/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | 'tailwindcss/nesting': {}, 4 | tailwindcss: {}, 5 | autoprefixer: {}, 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /player/solid/tailwind-css/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | 'tailwindcss/nesting': {}, 4 | tailwindcss: {}, 5 | autoprefixer: {}, 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /player/vue/default-theme/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | 3 | import Player from './Player.vue'; 4 | 5 | const app = createApp(Player); 6 | app.mount('#player'); 7 | -------------------------------------------------------------------------------- /player/vue/tailwind-css/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | 3 | import Player from './Player.vue'; 4 | 5 | const app = createApp(Player); 6 | app.mount('#player'); 7 | -------------------------------------------------------------------------------- /player/react/radix+tailwind/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | 'tailwindcss/nesting': {}, 4 | tailwindcss: {}, 5 | autoprefixer: {}, 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /player/solid/css/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import solid from 'vite-plugin-solid'; 3 | 4 | export default defineConfig({ 5 | plugins: [solid()], 6 | }); 7 | -------------------------------------------------------------------------------- /player/svelte/tailwind-css/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | 'tailwindcss/nesting': {}, 4 | tailwindcss: {}, 5 | autoprefixer: {}, 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /player/vue/default-layout/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | 3 | import Player from './Player.vue'; 4 | 5 | const app = createApp(Player); 6 | app.mount('#player'); 7 | -------------------------------------------------------------------------------- /player/solid/css/src/components/captions.tsx: -------------------------------------------------------------------------------- 1 | import styles from './captions.module.css'; 2 | 3 | export function Captions() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .code 2 | globals.d.ts 3 | *.png 4 | *.jpeg 5 | *.mp4 6 | *.mp3 7 | *.vtt 8 | *.ico 9 | 10 | **/dist 11 | 12 | .gitignore 13 | .gitkeep 14 | .prettierignore 15 | 16 | -------------------------------------------------------------------------------- /player/solid/css/src/components/sliders/slider-thumb.tsx: -------------------------------------------------------------------------------- 1 | import styles from './slider-thumb.module.css'; 2 | 3 | export function SliderThumb() { 4 | return
; 5 | } 6 | -------------------------------------------------------------------------------- /player/solid/default-theme/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import solid from 'vite-plugin-solid'; 3 | 4 | export default defineConfig({ 5 | plugins: [solid()], 6 | }); 7 | -------------------------------------------------------------------------------- /player/solid/tailwind-css/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import solid from 'vite-plugin-solid'; 3 | 4 | export default defineConfig({ 5 | plugins: [solid()], 6 | }); 7 | -------------------------------------------------------------------------------- /player/react/radix+tailwind/src/base.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | --media-brand: 245 245 245; 7 | --media-focus: 78 156 246; 8 | } 9 | -------------------------------------------------------------------------------- /player/react/tailwind-css/src/base.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | --media-brand: 245 245 245; 7 | --media-focus: 78 156 246; 8 | } 9 | -------------------------------------------------------------------------------- /player/solid/default-layout/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import solid from 'vite-plugin-solid'; 3 | 4 | export default defineConfig({ 5 | plugins: [solid()], 6 | }); 7 | -------------------------------------------------------------------------------- /player/solid/tailwind-css/src/base.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | --media-brand: 245 245 245; 7 | --media-focus: 78 156 246; 8 | } 9 | -------------------------------------------------------------------------------- /player/solid/css/src/components/chapter-title.tsx: -------------------------------------------------------------------------------- 1 | import styles from './chapter-title.module.css'; 2 | 3 | export function ChapterTitle() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /player/react/css/vite.config.ts: -------------------------------------------------------------------------------- 1 | import react from '@vitejs/plugin-react'; 2 | import { defineConfig } from 'vite'; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /player/svelte/default-theme/src/components/menus/MenuRadio.svelte: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 | -------------------------------------------------------------------------------- /player/solid/css/src/components/menus/caption-submenu.module.css: -------------------------------------------------------------------------------- 1 | .radioGroup { 2 | width: 100%; 3 | display: flex; 4 | flex-direction: column; 5 | } 6 | 7 | .icon { 8 | width: 22px; 9 | height: 22px; 10 | } 11 | -------------------------------------------------------------------------------- /player/react/default-layout/vite.config.ts: -------------------------------------------------------------------------------- 1 | import react from '@vitejs/plugin-react'; 2 | import { defineConfig } from 'vite'; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /player/react/default-theme/vite.config.ts: -------------------------------------------------------------------------------- 1 | import react from '@vitejs/plugin-react'; 2 | import { defineConfig } from 'vite'; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /player/react/radix+tailwind/vite.config.ts: -------------------------------------------------------------------------------- 1 | import react from '@vitejs/plugin-react'; 2 | import { defineConfig } from 'vite'; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /player/react/tailwind-css/vite.config.ts: -------------------------------------------------------------------------------- 1 | import react from '@vitejs/plugin-react'; 2 | import { defineConfig } from 'vite'; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /player/solid/css/src/main.tsx: -------------------------------------------------------------------------------- 1 | /* @refresh reload */ 2 | import { render } from 'solid-js/web'; 3 | 4 | import { Player } from './player'; 5 | 6 | const root = document.getElementById('player'); 7 | render(() => , root!); 8 | -------------------------------------------------------------------------------- /player/solid/default-theme/src/components/audio-captions.tsx: -------------------------------------------------------------------------------- 1 | import styles from './audio-captions.module.css'; 2 | 3 | export function AudioCaptions() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /player/solid/default-theme/src/components/video-captions.tsx: -------------------------------------------------------------------------------- 1 | import styles from './video-captions.module.css'; 2 | 3 | export function VideoCaptions() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /player/svelte/css/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { svelte } from '@sveltejs/vite-plugin-svelte'; 2 | import { defineConfig } from 'vite'; 3 | 4 | // https://vitejs.dev/config 5 | export default defineConfig({ 6 | plugins: [svelte()], 7 | }); 8 | -------------------------------------------------------------------------------- /player/solid/default-layout/src/main.tsx: -------------------------------------------------------------------------------- 1 | /* @refresh reload */ 2 | import { render } from 'solid-js/web'; 3 | 4 | import { Player } from './player'; 5 | 6 | const root = document.getElementById('player'); 7 | render(() => , root!); 8 | -------------------------------------------------------------------------------- /player/solid/default-theme/src/main.tsx: -------------------------------------------------------------------------------- 1 | /* @refresh reload */ 2 | import { render } from 'solid-js/web'; 3 | 4 | import { Player } from './player'; 5 | 6 | const root = document.getElementById('player'); 7 | render(() => , root!); 8 | -------------------------------------------------------------------------------- /player/solid/tailwind-css/src/main.tsx: -------------------------------------------------------------------------------- 1 | /* @refresh reload */ 2 | import { render } from 'solid-js/web'; 3 | 4 | import { Player } from './player'; 5 | 6 | const root = document.getElementById('player'); 7 | render(() => , root!); 8 | -------------------------------------------------------------------------------- /player/svelte/css/postcss.config.js: -------------------------------------------------------------------------------- 1 | // Only using PostCSS because Svelte doesn't handle `data-*` attributes in ` 12 | -------------------------------------------------------------------------------- /player/solid/css/src/components/buttons/fullscreen-button.module.css: -------------------------------------------------------------------------------- 1 | media-fullscreen-button[data-active] .enterIcon, 2 | media-fullscreen-button:not([data-active]) .exitIcon { 3 | display: none; 4 | } 5 | 6 | media-player[data-fullscreen] .enterTooltipText, 7 | media-player:not([data-fullscreen]) .exitTooltipText { 8 | display: none; 9 | } 10 | -------------------------------------------------------------------------------- /player/solid/tailwind-css/src/components/time-group.tsx: -------------------------------------------------------------------------------- 1 | export function TimeGroup() { 2 | return ( 3 |
4 | 5 |
/
6 | 7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /player/svelte/tailwind-css/src/components/TimeGroup.svelte: -------------------------------------------------------------------------------- 1 |
2 | 3 |
/
4 | 5 |
6 | 7 | 12 | -------------------------------------------------------------------------------- /player/svelte/tailwind-css/src/components/sliders/SliderThumb.svelte: -------------------------------------------------------------------------------- 1 |
4 | -------------------------------------------------------------------------------- /player/react/css/src/styles/time-group.module.css: -------------------------------------------------------------------------------- 1 | .group { 2 | display: flex; 3 | align-items: center; 4 | margin-left: 8px; 5 | } 6 | 7 | .time { 8 | display: inline-block; 9 | contain: content; 10 | font-size: 14px; 11 | font-weight: 400; 12 | letter-spacing: 0.025em; 13 | } 14 | 15 | .divider { 16 | margin: 0 2.5px; 17 | color: #e0e0e0; 18 | } 19 | -------------------------------------------------------------------------------- /player/solid/css/src/components/time-group.module.css: -------------------------------------------------------------------------------- 1 | .group { 2 | display: flex; 3 | align-items: center; 4 | margin-left: 8px; 5 | } 6 | 7 | .time { 8 | display: inline-block; 9 | contain: content; 10 | font-size: 14px; 11 | font-weight: 400; 12 | letter-spacing: 0.025em; 13 | } 14 | 15 | .divider { 16 | margin: 0 2.5px; 17 | color: #e0e0e0; 18 | } 19 | -------------------------------------------------------------------------------- /player/vue/default-theme/src/components/TimeGroup.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /player/react/tailwind-css/src/components/title.tsx: -------------------------------------------------------------------------------- 1 | import { ChapterTitle } from '@vidstack/react'; 2 | 3 | export function Title() { 4 | return ( 5 | 6 | | 7 | 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /player/solid/css/src/components/time-group.tsx: -------------------------------------------------------------------------------- 1 | import styles from './time-group.module.css'; 2 | 3 | export function TimeGroup() { 4 | return ( 5 |
6 | 7 |
/
8 | 9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /player/vue/tailwind-css/src/components/sliders/SliderThumb.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /player/react/radix+tailwind/src/components/title.tsx: -------------------------------------------------------------------------------- 1 | import { ChapterTitle } from '@vidstack/react'; 2 | 3 | export function Title() { 4 | return ( 5 | 6 | | 7 | 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /player/react/default-theme/src/layouts/shared/time-group.tsx: -------------------------------------------------------------------------------- 1 | import { Time } from '@vidstack/react'; 2 | 3 | export function TimeGroup() { 4 | return ( 5 |
6 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /player/vue/css/vite.config.ts: -------------------------------------------------------------------------------- 1 | import vue from '@vitejs/plugin-vue'; 2 | import { defineConfig } from 'vite'; 3 | 4 | // https://vitejs.dev/config 5 | export default defineConfig({ 6 | plugins: [ 7 | vue({ 8 | template: { 9 | compilerOptions: { 10 | isCustomElement: (tag) => tag.startsWith('media-'), 11 | }, 12 | }, 13 | }), 14 | ], 15 | }); 16 | -------------------------------------------------------------------------------- /player/vue/tailwind-css/src/components/TimeGroup.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /player/solid/css/src/components/buttons/mute-button.module.css: -------------------------------------------------------------------------------- 1 | media-mute-button:not([data-muted]) .muteIcon, 2 | media-mute-button:not([data-state='low']) .volumeLowIcon, 3 | media-mute-button:not([data-state='high']) .volumeHighIcon { 4 | display: none; 5 | } 6 | 7 | media-player:not([data-muted]) .muteTooltipText, 8 | media-player[data-muted] .unmuteTooltipText { 9 | display: none; 10 | } 11 | -------------------------------------------------------------------------------- /player/vue/default-layout/vite.config.ts: -------------------------------------------------------------------------------- 1 | import vue from '@vitejs/plugin-vue'; 2 | import { defineConfig } from 'vite'; 3 | 4 | // https://vitejs.dev/config 5 | export default defineConfig({ 6 | plugins: [ 7 | vue({ 8 | template: { 9 | compilerOptions: { 10 | isCustomElement: (tag) => tag.startsWith('media-'), 11 | }, 12 | }, 13 | }), 14 | ], 15 | }); 16 | -------------------------------------------------------------------------------- /player/vue/default-theme/vite.config.ts: -------------------------------------------------------------------------------- 1 | import vue from '@vitejs/plugin-vue'; 2 | import { defineConfig } from 'vite'; 3 | 4 | // https://vitejs.dev/config 5 | export default defineConfig({ 6 | plugins: [ 7 | vue({ 8 | template: { 9 | compilerOptions: { 10 | isCustomElement: (tag) => tag.startsWith('media-'), 11 | }, 12 | }, 13 | }), 14 | ], 15 | }); 16 | -------------------------------------------------------------------------------- /player/vue/tailwind-css/vite.config.ts: -------------------------------------------------------------------------------- 1 | import vue from '@vitejs/plugin-vue'; 2 | import { defineConfig } from 'vite'; 3 | 4 | // https://vitejs.dev/config 5 | export default defineConfig({ 6 | plugins: [ 7 | vue({ 8 | template: { 9 | compilerOptions: { 10 | isCustomElement: (tag) => tag.startsWith('media-'), 11 | }, 12 | }, 13 | }), 14 | ], 15 | }); 16 | -------------------------------------------------------------------------------- /player/react/tailwind-css/src/components/time-group.tsx: -------------------------------------------------------------------------------- 1 | import { Time } from '@vidstack/react'; 2 | 3 | export function TimeGroup() { 4 | return ( 5 |
6 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /player/vue/tailwind-css/src/base.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | --media-brand: 245 245 245; 7 | --media-focus: 78 156 246; 8 | } 9 | 10 | /* 11 | * Prevent FOUC - you don't need this if you're loading styles via link tags or server-side 12 | * rendering with a framework like Nuxt. 13 | */ 14 | *:not(:defined) { 15 | opacity: 0; 16 | } 17 | -------------------------------------------------------------------------------- /player/react/radix+tailwind/src/components/time-group.tsx: -------------------------------------------------------------------------------- 1 | import { Time } from '@vidstack/react'; 2 | 3 | export function TimeGroup() { 4 | return ( 5 |
6 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /player/solid/tailwind-css/src/components/sliders/slider-thumb.tsx: -------------------------------------------------------------------------------- 1 | export function SliderThumb() { 2 | return ( 3 |
4 | ); 5 | } 6 | -------------------------------------------------------------------------------- /player/svelte/tailwind-css/src/base.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | --media-brand: 245 245 245; 7 | --media-focus: 78 156 246; 8 | } 9 | 10 | /* 11 | * Prevent FOUC - you don't need this if you're loading styles via link tags or server-side 12 | * rendering with a framework like Nuxt. 13 | */ 14 | *:not(:defined) { 15 | opacity: 0; 16 | } 17 | -------------------------------------------------------------------------------- /player/svelte/default-theme/src/components/sliders/VolumeSlider.svelte: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 | 5 | 6 | 7 |
8 | 9 | -------------------------------------------------------------------------------- /player/solid/default-theme/src/components/video-captions.module.css: -------------------------------------------------------------------------------- 1 | .captions { 2 | z-index: 10; 3 | bottom: 0; 4 | transition: bottom 0.15s linear; 5 | } 6 | 7 | /* Pull captions up when controls are visible. */ 8 | media-player[data-controls] .captions { 9 | bottom: 80px; 10 | } 11 | 12 | /* Hide captions when interacting with time slider. */ 13 | media-player[data-preview] .captions { 14 | opacity: 0; 15 | } 16 | -------------------------------------------------------------------------------- /player/solid/tailwind-css/src/components/captions.tsx: -------------------------------------------------------------------------------- 1 | import styles from './captions.module.css'; 2 | 3 | export function Captions() { 4 | return ( 5 | 8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /player/react/css/src/components/time-group.tsx: -------------------------------------------------------------------------------- 1 | import styles from '../styles/time-group.module.css'; 2 | 3 | import { Time } from '@vidstack/react'; 4 | 5 | export function TimeGroup() { 6 | return ( 7 |
8 |
12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /player/svelte/default-theme/src/components/menus/Submenu.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /player/solid/tailwind-css/src/components/layouts/video-layout.module.css: -------------------------------------------------------------------------------- 1 | .controls { 2 | /* These CSS variables are supported out of the box to easily apply offsets to all tooltips/menus. */ 3 | --media-tooltip-y-offset: 30px; 4 | --media-menu-y-offset: 30px; 5 | } 6 | 7 | .controls media-volume-slider { 8 | --media-slider-preview-offset: 30px; 9 | } 10 | 11 | .controls media-menu[data-open] media-tooltip-content { 12 | display: none; 13 | } 14 | -------------------------------------------------------------------------------- /player/web-components/default-layout/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wc-default-layout", 3 | "version": "1.0.0", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite dev --host", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "vidstack": "^1.9.7" 13 | }, 14 | "devDependencies": { 15 | "typescript": "^5.3.0", 16 | "vite": "^5.0.0" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /player/svelte/default-theme/src/components/Tooltip.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /player/vue/default-theme/src/components/sliders/VolumeSlider.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /player/web-components/css/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wc-css", 3 | "version": "1.0.0", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite dev --host", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "media-icons": "^1.0.0", 13 | "vidstack": "^1.9.7" 14 | }, 15 | "devDependencies": { 16 | "typescript": "^5.3.0", 17 | "vite": "^5.0.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /player/solid/css/src/components/buttons/play-button.module.css: -------------------------------------------------------------------------------- 1 | media-play-button:not([data-paused]) .playIcon, 2 | media-play-button[data-ended] .playIcon, 3 | media-play-button[data-paused] .pauseIcon, 4 | media-play-button[data-ended] .pauseIcon, 5 | media-play-button:not([data-ended]) .replayIcon { 6 | display: none; 7 | } 8 | 9 | :global(media-player:not([data-paused])) .playTooltipText, 10 | :global(media-player[data-paused]) .pauseTooltipText { 11 | display: none; 12 | } 13 | -------------------------------------------------------------------------------- /player/web-components/default-theme/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wc-default-theme", 3 | "version": "1.0.0", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite dev --host", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "media-icons": "^1.0.0", 13 | "vidstack": "^1.9.7" 14 | }, 15 | "devDependencies": { 16 | "typescript": "^5.3.0", 17 | "vite": "^5.0.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /player/react/tailwind-css/src/components/layouts/video-layout.module.css: -------------------------------------------------------------------------------- 1 | .controls { 2 | /* 3 | * These CSS variables are supported out of the box to easily apply offsets to all popups. 4 | * You can also offset via props on `Tooltip.Content`, `Menu.Content`, and slider previews. 5 | */ 6 | --media-tooltip-y-offset: 30px; 7 | --media-menu-y-offset: 30px; 8 | } 9 | 10 | .controls :global(.volume-slider) { 11 | --media-slider-preview-offset: 30px; 12 | margin-left: 1.5px; 13 | } 14 | -------------------------------------------------------------------------------- /player/svelte/tailwind-css/src/components/menus/CaptionSubmenu.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /player/svelte/css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CSS Example 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /player/vue/css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CSS Example 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /player/react/css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CSS Example 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /player/solid/css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CSS Example 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /player/svelte/default-theme/src/components/menus/SubmenuButton.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | {label} 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /player/solid/default-layout/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "solid-default-layout", 3 | "version": "1.0.0", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite dev --host", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "solid-js": "^1.7.11", 13 | "vidstack": "^1.9.7" 14 | }, 15 | "devDependencies": { 16 | "typescript": "^5.3.0", 17 | "vite": "^5.0.0", 18 | "vite-plugin-solid": "^2.8.0" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /player/solid/default-theme/src/components/sliders/volume-slider.tsx: -------------------------------------------------------------------------------- 1 | export function VolumeSlider() { 2 | return ( 3 | 4 |
5 |
6 | 7 | 8 | 9 |
10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /player/svelte/default-theme/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Default Theme Example 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /player/vue/default-layout/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Default Layout Example 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /player/vue/default-theme/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Default Theme Example 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /player/react/default-theme/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Default Theme Example 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /player/solid/default-theme/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Default Theme Example 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /player/solid/tailwind-css/src/components/menus/caption-submenu.tsx: -------------------------------------------------------------------------------- 1 | import { MenuRadio } from './menu-radio'; 2 | import { Submenu } from './submenu'; 3 | 4 | export function CaptionSubmenu() { 5 | return ( 6 | }> 7 | 8 | 11 | 12 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /player/svelte/default-layout/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Default Layout Example 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /player/react/default-layout/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Default Layout Example 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /player/solid/default-layout/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Default Layout Example 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /player/solid/css/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "solid-css", 3 | "version": "1.0.0", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite dev --host", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "media-icons": "^1.0.0", 13 | "solid-js": "^1.7.11", 14 | "vidstack": "^1.9.7" 15 | }, 16 | "devDependencies": { 17 | "typescript": "^5.3.0", 18 | "vite": "^5.0.0", 19 | "vite-plugin-solid": "^2.8.0" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /player/svelte/default-theme/src/components/buttons/SeekBackButton.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Seek Backward 15 | 16 | -------------------------------------------------------------------------------- /player/svelte/default-theme/src/components/buttons/SeekForwardButton.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Seek Forward 15 | 16 | -------------------------------------------------------------------------------- /player/svelte/default-theme/src/components/menus/CaptionSubmenu.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 10 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /player/svelte/tailwind-css/src/components/menus/Submenu.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 | 16 | 17 | -------------------------------------------------------------------------------- /player/vue/default-layout/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-default-layout", 3 | "version": "1.0.0", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite dev --host", 8 | "build": "vue-tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "vidstack": "^1.9.7", 13 | "vue": "^3.3.4" 14 | }, 15 | "devDependencies": { 16 | "@vitejs/plugin-vue": "^4.3.4", 17 | "typescript": "^5.3.0", 18 | "vite": "^5.0.0", 19 | "vue-tsc": "^1.8.11" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /player/vue/default-theme/src/components/VideoCaptions.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | -------------------------------------------------------------------------------- /player/svelte/css/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "isolatedModules": true, 7 | "module": "ESNext", 8 | "resolveJsonModule": true, 9 | "target": "ESNext", 10 | "types": ["svelte", "vidstack/svelte"], 11 | "useDefineForClassFields": true, 12 | "verbatimModuleSyntax": true 13 | }, 14 | "include": ["src/**/*.js", "src/**/*.ts", "src/**/*.svelte"], 15 | "references": [{ "path": "./tsconfig.node.json" }] 16 | } 17 | -------------------------------------------------------------------------------- /player/svelte/default-theme/src/components/VideoCaptions.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 20 | -------------------------------------------------------------------------------- /player/solid/default-theme/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "solid-default-theme", 3 | "version": "1.0.0", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite dev --host", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "media-icons": "^1.0.0", 13 | "solid-js": "^1.7.11", 14 | "vidstack": "^1.9.7" 15 | }, 16 | "devDependencies": { 17 | "typescript": "^5.3.0", 18 | "vite": "^5.0.0", 19 | "vite-plugin-solid": "^2.8.0" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /player/svelte/default-layout/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "isolatedModules": true, 7 | "module": "ESNext", 8 | "resolveJsonModule": true, 9 | "target": "ESNext", 10 | "types": ["svelte", "vidstack/svelte"], 11 | "useDefineForClassFields": true, 12 | "verbatimModuleSyntax": true 13 | }, 14 | "include": ["src/**/*.js", "src/**/*.ts", "src/**/*.svelte"], 15 | "references": [{ "path": "./tsconfig.node.json" }] 16 | } 17 | -------------------------------------------------------------------------------- /player/svelte/default-theme/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "isolatedModules": true, 7 | "module": "ESNext", 8 | "resolveJsonModule": true, 9 | "target": "ESNext", 10 | "types": ["svelte", "vidstack/svelte"], 11 | "useDefineForClassFields": true, 12 | "verbatimModuleSyntax": true 13 | }, 14 | "include": ["src/**/*.js", "src/**/*.ts", "src/**/*.svelte"], 15 | "references": [{ "path": "./tsconfig.node.json" }] 16 | } 17 | -------------------------------------------------------------------------------- /player/svelte/tailwind-css/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "isolatedModules": true, 7 | "module": "ESNext", 8 | "resolveJsonModule": true, 9 | "target": "ESNext", 10 | "types": ["svelte", "vidstack/svelte"], 11 | "useDefineForClassFields": true, 12 | "verbatimModuleSyntax": true 13 | }, 14 | "include": ["src/**/*.js", "src/**/*.ts", "src/**/*.svelte"], 15 | "references": [{ "path": "./tsconfig.node.json" }] 16 | } 17 | -------------------------------------------------------------------------------- /player/vue/css/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-css", 3 | "version": "1.0.0", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite dev --host", 8 | "build": "vue-tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "media-icons": "^1.0.0", 13 | "vidstack": "^1.9.7", 14 | "vue": "^3.3.4" 15 | }, 16 | "devDependencies": { 17 | "@vitejs/plugin-vue": "^4.3.4", 18 | "typescript": "^5.3.0", 19 | "vite": "^5.0.0", 20 | "vue-tsc": "^1.8.11" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /player/vue/default-theme/src/components/Tooltip.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 19 | -------------------------------------------------------------------------------- /player/solid/default-theme/src/components/audio-captions.module.css: -------------------------------------------------------------------------------- 1 | .captions { 2 | --cue-font-size: 14px; 3 | display: inline-block; 4 | position: absolute; 5 | width: 100%; 6 | top: unset; 7 | bottom: calc(100% + 2px); 8 | text-align: center; 9 | background-color: transparent; 10 | } 11 | 12 | .captions [data-part='cue'] { 13 | color: white; 14 | border: rgb(255 255 255 / 0.1); 15 | background-color: black; 16 | } 17 | 18 | /* Hide captions when interacting with time slider. */ 19 | media-player[data-preview] .captions { 20 | opacity: 0; 21 | } 22 | -------------------------------------------------------------------------------- /player/solid/css/src/components/menus/caption-submenu.tsx: -------------------------------------------------------------------------------- 1 | import styles from './caption-submenu.module.css'; 2 | 3 | import { MenuRadio } from './menu-radio'; 4 | import { Submenu } from './submenu'; 5 | 6 | export function CaptionSubmenu() { 7 | return ( 8 | }> 9 | 10 | 13 | 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /player/svelte/tailwind-css/src/components/menus/MenuRadio.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 11 | -------------------------------------------------------------------------------- /player/vue/default-theme/src/components/menus/Submenu.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 21 | -------------------------------------------------------------------------------- /player/react/css/src/styles/chapter-title.module.css: -------------------------------------------------------------------------------- 1 | .title { 2 | display: inline-block; 3 | font-size: 14px; 4 | font-weight: 500; 5 | font-family: sans-serif; 6 | color: rgba(255 255 255 / 0.64); 7 | flex: 1 1 0%; 8 | padding-inline: 8px; 9 | overflow: hidden; 10 | white-space: nowrap; 11 | text-overflow: ellipsis; 12 | } 13 | 14 | .title::before { 15 | content: '\2022'; 16 | display: inline-block; 17 | margin-right: 6px; 18 | color: rgba(255 255 255 / 0.64); 19 | } 20 | 21 | .title:empty::before { 22 | content: ''; 23 | margin-left: 0; 24 | } 25 | -------------------------------------------------------------------------------- /player/solid/css/src/components/chapter-title.module.css: -------------------------------------------------------------------------------- 1 | .title { 2 | display: inline-block; 3 | font-size: 14px; 4 | font-weight: 500; 5 | font-family: sans-serif; 6 | color: rgba(255 255 255 / 0.64); 7 | flex: 1 1 0%; 8 | padding-inline: 8px; 9 | overflow: hidden; 10 | white-space: nowrap; 11 | text-overflow: ellipsis; 12 | } 13 | 14 | .title::before { 15 | content: '\2022'; 16 | display: inline-block; 17 | margin-right: 6px; 18 | color: rgba(255 255 255 / 0.64); 19 | } 20 | 21 | .title:empty::before { 22 | content: ''; 23 | margin-left: 0; 24 | } 25 | -------------------------------------------------------------------------------- /player/vue/default-theme/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-default-theme", 3 | "version": "1.0.0", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite dev --host", 8 | "build": "vue-tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "media-icons": "^1.0.0", 13 | "vidstack": "^1.9.7", 14 | "vue": "^3.3.4" 15 | }, 16 | "devDependencies": { 17 | "@vitejs/plugin-vue": "^4.3.4", 18 | "typescript": "^5.3.0", 19 | "vite": "^5.0.0", 20 | "vue-tsc": "^1.8.11" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /player/solid/default-theme/src/components/menus/caption-submenu.tsx: -------------------------------------------------------------------------------- 1 | import { MenuRadio } from './menu-radio'; 2 | import { Submenu } from './submenu'; 3 | 4 | export function CaptionSubmenu() { 5 | return ( 6 | } 9 | > 10 | 11 | 14 | 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /player/solid/default-theme/src/components/menus/submenu.tsx: -------------------------------------------------------------------------------- 1 | import type { JSX } from 'solid-js'; 2 | 3 | import { SubmenuButton } from './submenu-button'; 4 | 5 | export function Submenu(props: SubmenuProps) { 6 | return ( 7 | 8 | {props.iconSlot} 9 | {props.children} 10 | 11 | ); 12 | } 13 | 14 | export interface SubmenuProps { 15 | label: string; 16 | iconSlot: JSX.Element; 17 | children: JSX.Element; 18 | } 19 | -------------------------------------------------------------------------------- /player/vue/default-theme/src/components/menus/SubmenuButton.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /player/web-components/css/src/styles/poster.css: -------------------------------------------------------------------------------- 1 | /************************************************************************************************* 2 | * Poster 3 | *************************************************************************************************/ 4 | 5 | media-poster { 6 | display: block; 7 | position: absolute; 8 | top: 0; 9 | left: 0; 10 | opacity: 0; 11 | width: 100%; 12 | height: 100%; 13 | } 14 | 15 | media-poster img { 16 | width: 100%; 17 | height: 100%; 18 | object-fit: cover; 19 | } 20 | 21 | media-poster[data-visible] { 22 | opacity: 1; 23 | } 24 | -------------------------------------------------------------------------------- /player/svelte/css/src/components/TimeGroup.svelte: -------------------------------------------------------------------------------- 1 |
2 | 3 |
/
4 | 5 |
6 | 7 | 27 | -------------------------------------------------------------------------------- /player/svelte/tailwind-css/src/components/Gestures.svelte: -------------------------------------------------------------------------------- 1 | 6 | 11 | 16 | 21 | -------------------------------------------------------------------------------- /player/vue/tailwind-css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Tailwind CSS Example 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /player/web-components/css/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "allowSyntheticDefaultImports": true, 5 | "esModuleInterop": true, 6 | "forceConsistentCasingInFileNames": true, 7 | "isolatedModules": true, 8 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 9 | "module": "ESNext", 10 | "moduleResolution": "bundler", 11 | "noEmit": true, 12 | "resolveJsonModule": true, 13 | "skipLibCheck": true, 14 | "strict": true, 15 | "target": "ESNext", 16 | "useDefineForClassFields": true, 17 | "verbatimModuleSyntax": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /player/web-components/default-theme/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Default Theme Examples 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 | Audio Player 14 | Video Player 15 |
16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /player/react/css/src/document.css: -------------------------------------------------------------------------------- 1 | /************************************************************************************************* 2 | * Document 3 | *************************************************************************************************/ 4 | 5 | * { 6 | box-sizing: border-box; 7 | } 8 | 9 | html, 10 | body { 11 | margin: 0; 12 | padding: 0; 13 | width: 100vw; 14 | height: 100vh; 15 | } 16 | 17 | body { 18 | display: flex; 19 | align-items: center; 20 | justify-content: center; 21 | } 22 | 23 | main { 24 | width: 100%; 25 | max-width: 980px; 26 | margin-inline: auto; 27 | } 28 | -------------------------------------------------------------------------------- /player/react/radix+tailwind/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Radix Example 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /player/solid/css/src/components/sliders/volume-slider.tsx: -------------------------------------------------------------------------------- 1 | import styles from './volume-slider.module.css'; 2 | 3 | import { SliderPreview } from './slider-preview'; 4 | import { SliderThumb } from './slider-thumb'; 5 | 6 | export function VolumeSlider() { 7 | return ( 8 | 9 |
10 |
11 | 12 | 13 | 14 | 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /player/svelte/tailwind-css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Tailwind CSS Example 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /player/vue/css/src/components/TimeGroup.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 29 | -------------------------------------------------------------------------------- /player/vue/tailwind-css/src/components/menus/CaptionSubmenu.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 20 | -------------------------------------------------------------------------------- /player/web-components/css/src/styles/time.css: -------------------------------------------------------------------------------- 1 | /************************************************************************************************* 2 | * Time 3 | *************************************************************************************************/ 4 | 5 | .media-time-group { 6 | display: flex; 7 | align-items: center; 8 | margin-left: 8px; 9 | } 10 | 11 | media-time { 12 | display: inline-block; 13 | contain: content; 14 | font-size: 14px; 15 | font-weight: 400; 16 | letter-spacing: 0.025em; 17 | } 18 | 19 | .media-time-divider { 20 | margin: 0 2.5px; 21 | color: #e0e0e0; 22 | } 23 | -------------------------------------------------------------------------------- /player/web-components/tailwind-css/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "allowSyntheticDefaultImports": true, 5 | "esModuleInterop": true, 6 | "forceConsistentCasingInFileNames": true, 7 | "isolatedModules": true, 8 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 9 | "module": "ESNext", 10 | "moduleResolution": "bundler", 11 | "noEmit": true, 12 | "resolveJsonModule": true, 13 | "skipLibCheck": true, 14 | "strict": true, 15 | "target": "ESNext", 16 | "useDefineForClassFields": true, 17 | "verbatimModuleSyntax": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /player/react/tailwind-css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Tailwind CSS Example 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /player/solid/css/src/components/menus/submenu.tsx: -------------------------------------------------------------------------------- 1 | import styles from './submenu.module.css'; 2 | 3 | import type { JSX } from 'solid-js'; 4 | 5 | import { SubmenuButton } from './submenu-button'; 6 | 7 | export function Submenu(props: SubmenuProps) { 8 | return ( 9 | 10 | {props.iconSlot} 11 | {props.children} 12 | 13 | ); 14 | } 15 | 16 | export interface SubmenuProps { 17 | label: string; 18 | iconSlot: JSX.Element; 19 | children: JSX.Element; 20 | } 21 | -------------------------------------------------------------------------------- /player/solid/tailwind-css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Tailwind CSS Example 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /player/vue/tailwind-css/src/components/menus/MenuRadio.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /player/web-components/css/src/document.css: -------------------------------------------------------------------------------- 1 | /************************************************************************************************* 2 | * Document 3 | *************************************************************************************************/ 4 | 5 | * { 6 | box-sizing: border-box; 7 | } 8 | 9 | html, 10 | body { 11 | margin: 0; 12 | padding: 0; 13 | width: 100vw; 14 | height: 100vh; 15 | } 16 | 17 | body { 18 | display: flex; 19 | align-items: center; 20 | justify-content: center; 21 | } 22 | 23 | main { 24 | width: 100%; 25 | max-width: 980px; 26 | margin-inline: auto; 27 | } 28 | -------------------------------------------------------------------------------- /player/web-components/default-layout/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "allowSyntheticDefaultImports": true, 5 | "esModuleInterop": true, 6 | "forceConsistentCasingInFileNames": true, 7 | "isolatedModules": true, 8 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 9 | "module": "ESNext", 10 | "moduleResolution": "bundler", 11 | "noEmit": true, 12 | "resolveJsonModule": true, 13 | "skipLibCheck": true, 14 | "strict": true, 15 | "target": "ESNext", 16 | "useDefineForClassFields": true, 17 | "verbatimModuleSyntax": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /player/web-components/default-theme/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "allowSyntheticDefaultImports": true, 5 | "esModuleInterop": true, 6 | "forceConsistentCasingInFileNames": true, 7 | "isolatedModules": true, 8 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 9 | "module": "ESNext", 10 | "moduleResolution": "bundler", 11 | "noEmit": true, 12 | "resolveJsonModule": true, 13 | "skipLibCheck": true, 14 | "strict": true, 15 | "target": "ESNext", 16 | "useDefineForClassFields": true, 17 | "verbatimModuleSyntax": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /player/react/default-layout/src/document.css: -------------------------------------------------------------------------------- 1 | /************************************************************************************************* 2 | * Document 3 | *************************************************************************************************/ 4 | 5 | * { 6 | box-sizing: border-box; 7 | } 8 | 9 | html, 10 | body { 11 | margin: 0; 12 | padding: 0; 13 | width: 100vw; 14 | height: 100vh; 15 | } 16 | 17 | body { 18 | display: flex; 19 | align-items: center; 20 | justify-content: center; 21 | } 22 | 23 | main { 24 | width: 100%; 25 | max-width: 980px; 26 | margin-inline: auto; 27 | } 28 | -------------------------------------------------------------------------------- /player/react/default-theme/src/document.css: -------------------------------------------------------------------------------- 1 | /************************************************************************************************* 2 | * Document 3 | *************************************************************************************************/ 4 | 5 | * { 6 | box-sizing: border-box; 7 | } 8 | 9 | html, 10 | body { 11 | margin: 0; 12 | padding: 0; 13 | width: 100vw; 14 | height: 100vh; 15 | } 16 | 17 | body { 18 | display: flex; 19 | align-items: center; 20 | justify-content: center; 21 | } 22 | 23 | main { 24 | width: 100%; 25 | max-width: 980px; 26 | margin-inline: auto; 27 | } 28 | -------------------------------------------------------------------------------- /player/web-components/tailwind-css/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wc-tailwind-css", 3 | "version": "1.0.0", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite dev --host", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "media-icons": "^1.0.0", 13 | "vidstack": "^1.9.7" 14 | }, 15 | "devDependencies": { 16 | "autoprefixer": "^10.4.2", 17 | "postcss": "^8.4.0", 18 | "tailwindcss": "^3.0.0", 19 | "tailwindcss-animate": "^1.0.7", 20 | "typescript": "^5.3.0", 21 | "vite": "^5.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /player/svelte/default-theme/src/components/menus/SettingsMenu.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | Settings 17 | 18 | -------------------------------------------------------------------------------- /player/solid/css/src/components/sliders/slider-chapters.tsx: -------------------------------------------------------------------------------- 1 | import styles from './slider-chapters.module.css'; 2 | 3 | export function SliderChapters() { 4 | return ( 5 | 6 | 9 | 10 | ); 11 | } 12 | 13 | function SliderChapter() { 14 | return ( 15 |
16 |
17 |
18 |
19 |
20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /player/react/css/src/tracks.ts: -------------------------------------------------------------------------------- 1 | export const textTracks = [ 2 | // Subtitles 3 | { 4 | src: 'https://files.vidstack.io/sprite-fight/subs/english.vtt', 5 | label: 'English', 6 | language: 'en-US', 7 | kind: 'subtitles', 8 | default: true, 9 | }, 10 | { 11 | src: 'https://files.vidstack.io/sprite-fight/subs/spanish.vtt', 12 | label: 'Spanish', 13 | language: 'es-ES', 14 | kind: 'subtitles', 15 | }, 16 | // Chapters 17 | { 18 | src: 'https://files.vidstack.io/sprite-fight/chapters.vtt', 19 | kind: 'chapters', 20 | language: 'en-US', 21 | default: true, 22 | }, 23 | ] as const; 24 | -------------------------------------------------------------------------------- /player/react/default-layout/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-default-layout", 3 | "version": "1.0.0", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite dev --host", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@vidstack/react": "^1.9.7", 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.18", 18 | "@types/react-dom": "^18.2.7", 19 | "@vitejs/plugin-react": "^4.2.0", 20 | "typescript": "^5.3.0", 21 | "vite": "^5.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /player/solid/css/src/components/gestures.tsx: -------------------------------------------------------------------------------- 1 | import styles from './gestures.module.css'; 2 | 3 | export function Gestures() { 4 | return ( 5 | <> 6 | 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /player/react/css/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-css", 3 | "version": "1.0.0", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite dev --host", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@vidstack/react": "^1.9.7", 13 | "media-icons": "^1.0.0", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0" 16 | }, 17 | "devDependencies": { 18 | "@types/react": "^18.2.18", 19 | "@types/react-dom": "^18.2.7", 20 | "@vitejs/plugin-react": "^4.2.0", 21 | "typescript": "^5.3.0", 22 | "vite": "^5.0.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /player/react/default-layout/src/tracks.ts: -------------------------------------------------------------------------------- 1 | export const textTracks = [ 2 | // Subtitles 3 | { 4 | src: 'https://files.vidstack.io/sprite-fight/subs/english.vtt', 5 | label: 'English', 6 | language: 'en-US', 7 | kind: 'subtitles', 8 | default: true, 9 | }, 10 | { 11 | src: 'https://files.vidstack.io/sprite-fight/subs/spanish.vtt', 12 | label: 'Spanish', 13 | language: 'es-ES', 14 | kind: 'subtitles', 15 | }, 16 | // Chapters 17 | { 18 | src: 'https://files.vidstack.io/sprite-fight/chapters.vtt', 19 | kind: 'chapters', 20 | language: 'en-US', 21 | default: true, 22 | }, 23 | ] as const; 24 | -------------------------------------------------------------------------------- /player/react/default-theme/src/tracks.ts: -------------------------------------------------------------------------------- 1 | export const textTracks = [ 2 | // Subtitles 3 | { 4 | src: 'https://files.vidstack.io/sprite-fight/subs/english.vtt', 5 | label: 'English', 6 | language: 'en-US', 7 | kind: 'subtitles', 8 | default: true, 9 | }, 10 | { 11 | src: 'https://files.vidstack.io/sprite-fight/subs/spanish.vtt', 12 | label: 'Spanish', 13 | language: 'es-ES', 14 | kind: 'subtitles', 15 | }, 16 | // Chapters 17 | { 18 | src: 'https://files.vidstack.io/sprite-fight/chapters.vtt', 19 | kind: 'chapters', 20 | language: 'en-US', 21 | default: true, 22 | }, 23 | ] as const; 24 | -------------------------------------------------------------------------------- /player/react/radix+tailwind/src/tracks.ts: -------------------------------------------------------------------------------- 1 | export const textTracks = [ 2 | // Subtitles 3 | { 4 | src: 'https://files.vidstack.io/sprite-fight/subs/english.vtt', 5 | label: 'English', 6 | language: 'en-US', 7 | kind: 'subtitles', 8 | default: true, 9 | }, 10 | { 11 | src: 'https://files.vidstack.io/sprite-fight/subs/spanish.vtt', 12 | label: 'Spanish', 13 | language: 'es-ES', 14 | kind: 'subtitles', 15 | }, 16 | // Chapters 17 | { 18 | src: 'https://files.vidstack.io/sprite-fight/chapters.vtt', 19 | kind: 'chapters', 20 | language: 'en-US', 21 | default: true, 22 | }, 23 | ] as const; 24 | -------------------------------------------------------------------------------- /player/react/tailwind-css/src/tracks.ts: -------------------------------------------------------------------------------- 1 | export const textTracks = [ 2 | // Subtitles 3 | { 4 | src: 'https://files.vidstack.io/sprite-fight/subs/english.vtt', 5 | label: 'English', 6 | language: 'en-US', 7 | kind: 'subtitles', 8 | default: true, 9 | }, 10 | { 11 | src: 'https://files.vidstack.io/sprite-fight/subs/spanish.vtt', 12 | label: 'Spanish', 13 | language: 'es-ES', 14 | kind: 'subtitles', 15 | }, 16 | // Chapters 17 | { 18 | src: 'https://files.vidstack.io/sprite-fight/chapters.vtt', 19 | kind: 'chapters', 20 | language: 'en-US', 21 | default: true, 22 | }, 23 | ] as const; 24 | -------------------------------------------------------------------------------- /player/vue/default-theme/src/components/menus/CaptionSubmenu.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 20 | -------------------------------------------------------------------------------- /player/solid/tailwind-css/src/components/menus/menu-radio.tsx: -------------------------------------------------------------------------------- 1 | export function MenuRadio() { 2 | return ( 3 | 4 | 5 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /player/solid/default-theme/src/components/tooltip.tsx: -------------------------------------------------------------------------------- 1 | import type { JSX } from 'solid-js'; 2 | import type { TooltipPlacement } from 'vidstack'; 3 | 4 | export function Tooltip(props: TooltipProps) { 5 | return ( 6 | 7 | {props.triggerSlot} 8 | 9 | {props.contentSlot} 10 | 11 | 12 | ); 13 | } 14 | 15 | export interface TooltipProps { 16 | triggerSlot: JSX.Element; 17 | contentSlot: JSX.Element; 18 | placement: TooltipPlacement; 19 | } 20 | -------------------------------------------------------------------------------- /player/solid/default-theme/src/components/video-gestures.tsx: -------------------------------------------------------------------------------- 1 | import styles from './video-gestures.module.css'; 2 | 3 | export function VideoGestures() { 4 | return ( 5 | <> 6 | 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /player/react/default-theme/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-default-theme", 3 | "version": "1.0.0", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite dev --host", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@vidstack/react": "^1.9.7", 13 | "media-icons": "^1.0.0", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0" 16 | }, 17 | "devDependencies": { 18 | "@types/react": "^18.2.18", 19 | "@types/react-dom": "^18.2.7", 20 | "@vitejs/plugin-react": "^4.2.0", 21 | "typescript": "^5.3.0", 22 | "vite": "^5.0.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /player/vue/tailwind-css/src/components/Gestures.vue: -------------------------------------------------------------------------------- 1 | 23 | -------------------------------------------------------------------------------- /player/vue/tailwind-css/src/components/menus/Submenu.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 23 | -------------------------------------------------------------------------------- /player/solid/default-theme/src/components/buttons/seek-back-button.tsx: -------------------------------------------------------------------------------- 1 | import type { TooltipPlacement } from 'vidstack'; 2 | 3 | import { Tooltip } from '../tooltip'; 4 | 5 | export function SeekBackButton(props: SeekBackButtonProps) { 6 | return ( 7 | 11 | 12 | 13 | } 14 | contentSlot={Seek Backward} 15 | /> 16 | ); 17 | } 18 | 19 | export interface SeekBackButtonProps { 20 | tooltipPlacement: TooltipPlacement; 21 | } 22 | -------------------------------------------------------------------------------- /player/solid/css/src/components/sliders/slider-preview.tsx: -------------------------------------------------------------------------------- 1 | import styles from './slider-preview.module.css'; 2 | 3 | import { Show, type JSX } from 'solid-js'; 4 | 5 | export function SliderPreview(props: SliderPreviewProps) { 6 | return ( 7 | 8 | 9 | 10 | 11 | 12 | {props.children} 13 | 14 | ); 15 | } 16 | 17 | export interface SliderPreviewProps { 18 | thumbnails?: string; 19 | noClamp?: boolean; 20 | children: JSX.Element; 21 | } 22 | -------------------------------------------------------------------------------- /player/solid/css/src/components/sliders/time-slider.module.css: -------------------------------------------------------------------------------- 1 | .slider { 2 | display: inline-flex; 3 | align-items: center; 4 | width: 100%; 5 | height: 40px; 6 | position: relative; 7 | contain: layout style; 8 | outline: none; 9 | pointer-events: auto; 10 | cursor: pointer; 11 | user-select: none; 12 | touch-action: none; 13 | /** Prevent thumb flowing out of slider (15px = thumb width). */ 14 | margin: 0 calc(15px / 2); 15 | -webkit-user-select: none; 16 | -webkit-tap-highlight-color: transparent; 17 | } 18 | 19 | .chapterTitle { 20 | margin-top: 8px; 21 | font-size: 14px; 22 | } 23 | 24 | .value { 25 | font-size: 13px; 26 | margin-top: 2px; 27 | } 28 | -------------------------------------------------------------------------------- /player/solid/default-theme/src/components/buttons/seek-forward-button.tsx: -------------------------------------------------------------------------------- 1 | import type { TooltipPlacement } from 'vidstack'; 2 | 3 | import { Tooltip } from '../tooltip'; 4 | 5 | export function SeekForwardButton(props: SeekForwardButtonProps) { 6 | return ( 7 | 11 | 12 | 13 | } 14 | contentSlot={Seek Forward} 15 | /> 16 | ); 17 | } 18 | 19 | export interface SeekForwardButtonProps { 20 | tooltipPlacement: TooltipPlacement; 21 | } 22 | -------------------------------------------------------------------------------- /player/svelte/default-layout/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-default-layout", 3 | "version": "1.0.0", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite dev --host", 8 | "build": "vite build", 9 | "preview": "vite preview", 10 | "check": "svelte-check --tsconfig ./tsconfig.json" 11 | }, 12 | "dependencies": { 13 | "vidstack": "^1.9.7" 14 | }, 15 | "devDependencies": { 16 | "@sveltejs/vite-plugin-svelte": "^3.0.0", 17 | "@tsconfig/svelte": "^5.0.2", 18 | "postcss": "^8.4.0", 19 | "svelte": "^4.2.0", 20 | "svelte-check": "^3.5.1", 21 | "typescript": "^5.3.0", 22 | "vite": "^5.0.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /player/vue/css/src/components/ChapterTitle.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 31 | -------------------------------------------------------------------------------- /player/solid/tailwind-css/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "solid-tailwind-css", 3 | "version": "1.0.0", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite dev --host", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "media-icons": "^1.0.0", 13 | "solid-js": "^1.7.11", 14 | "vidstack": "^1.9.7" 15 | }, 16 | "devDependencies": { 17 | "autoprefixer": "^10.4.2", 18 | "postcss": "^8.4.0", 19 | "tailwindcss": "^3.0.0", 20 | "tailwindcss-animate": "^1.0.7", 21 | "typescript": "^5.3.0", 22 | "vite": "^5.0.0", 23 | "vite-plugin-solid": "^2.8.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /player/svelte/css/src/components/menus/CaptionSubmenu.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 12 | 13 | 14 | 15 | 27 | -------------------------------------------------------------------------------- /player/solid/css/src/components/tooltip.tsx: -------------------------------------------------------------------------------- 1 | import styles from './tooltip.module.css'; 2 | 3 | import type { JSX } from 'solid-js'; 4 | import type { TooltipPlacement } from 'vidstack'; 5 | 6 | export function Tooltip(props: TooltipProps) { 7 | return ( 8 | 9 | {props.triggerSlot} 10 | 11 | {props.contentSlot} 12 | 13 | 14 | ); 15 | } 16 | 17 | export interface TooltipProps { 18 | triggerSlot: JSX.Element; 19 | contentSlot: JSX.Element; 20 | placement: TooltipPlacement; 21 | } 22 | -------------------------------------------------------------------------------- /player/solid/tailwind-css/src/components/menus/submenu.tsx: -------------------------------------------------------------------------------- 1 | import type { JSX } from 'solid-js'; 2 | 3 | import { SubmenuButton } from './submenu-button'; 4 | 5 | export function Submenu(props: SubmenuProps) { 6 | return ( 7 | 8 | {props.iconSlot} 9 | 12 | 13 | ); 14 | } 15 | 16 | export interface SubmenuProps { 17 | label: string; 18 | iconSlot: JSX.Element; 19 | children: JSX.Element; 20 | } 21 | -------------------------------------------------------------------------------- /player/svelte/css/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-css", 3 | "version": "1.0.0", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite dev --host", 8 | "build": "vite build", 9 | "preview": "vite preview", 10 | "check": "svelte-check --tsconfig ./tsconfig.json" 11 | }, 12 | "dependencies": { 13 | "media-icons": "^1.0.0", 14 | "vidstack": "^1.9.7" 15 | }, 16 | "devDependencies": { 17 | "@sveltejs/vite-plugin-svelte": "^3.0.0", 18 | "@tsconfig/svelte": "^5.0.2", 19 | "postcss": "^8.4.0", 20 | "svelte": "^4.2.0", 21 | "svelte-check": "^3.5.1", 22 | "typescript": "^5.3.0", 23 | "vite": "^5.0.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /player/svelte/css/src/components/ChapterTitle.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 29 | -------------------------------------------------------------------------------- /player/vue/default-theme/src/components/buttons/SeekBackButton.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 24 | -------------------------------------------------------------------------------- /player/vue/default-theme/src/components/buttons/SeekForwardButton.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 24 | -------------------------------------------------------------------------------- /player/solid/css/src/tracks.ts: -------------------------------------------------------------------------------- 1 | import type { TextTrackInit } from 'vidstack'; 2 | 3 | export const textTracks: TextTrackInit[] = [ 4 | // Subtitles 5 | { 6 | src: 'https://files.vidstack.io/sprite-fight/subs/english.vtt', 7 | label: 'English', 8 | language: 'en-US', 9 | kind: 'subtitles', 10 | default: true, 11 | }, 12 | { 13 | src: 'https://files.vidstack.io/sprite-fight/subs/spanish.vtt', 14 | label: 'Spanish', 15 | language: 'es-ES', 16 | kind: 'subtitles', 17 | }, 18 | // Chapters 19 | { 20 | src: 'https://files.vidstack.io/sprite-fight/chapters.vtt', 21 | kind: 'chapters', 22 | language: 'en-US', 23 | default: true, 24 | }, 25 | ]; 26 | -------------------------------------------------------------------------------- /player/svelte/css/src/tracks.ts: -------------------------------------------------------------------------------- 1 | import type { TextTrackInit } from 'vidstack'; 2 | 3 | export const textTracks: TextTrackInit[] = [ 4 | // Subtitles 5 | { 6 | src: 'https://files.vidstack.io/sprite-fight/subs/english.vtt', 7 | label: 'English', 8 | language: 'en-US', 9 | kind: 'subtitles', 10 | default: true, 11 | }, 12 | { 13 | src: 'https://files.vidstack.io/sprite-fight/subs/spanish.vtt', 14 | label: 'Spanish', 15 | language: 'es-ES', 16 | kind: 'subtitles', 17 | }, 18 | // Chapters 19 | { 20 | src: 'https://files.vidstack.io/sprite-fight/chapters.vtt', 21 | kind: 'chapters', 22 | language: 'en-US', 23 | default: true, 24 | }, 25 | ]; 26 | -------------------------------------------------------------------------------- /player/vue/css/src/tracks.ts: -------------------------------------------------------------------------------- 1 | import type { TextTrackInit } from 'vidstack'; 2 | 3 | export const textTracks: TextTrackInit[] = [ 4 | // Subtitles 5 | { 6 | src: 'https://files.vidstack.io/sprite-fight/subs/english.vtt', 7 | label: 'English', 8 | language: 'en-US', 9 | kind: 'subtitles', 10 | default: true, 11 | }, 12 | { 13 | src: 'https://files.vidstack.io/sprite-fight/subs/spanish.vtt', 14 | label: 'Spanish', 15 | language: 'es-ES', 16 | kind: 'subtitles', 17 | }, 18 | // Chapters 19 | { 20 | src: 'https://files.vidstack.io/sprite-fight/chapters.vtt', 21 | kind: 'chapters', 22 | language: 'en-US', 23 | default: true, 24 | }, 25 | ]; 26 | -------------------------------------------------------------------------------- /player/vue/default-theme/src/components/AudioCaptions.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 28 | -------------------------------------------------------------------------------- /player/solid/default-theme/src/components/menus/submenu-button.tsx: -------------------------------------------------------------------------------- 1 | import type { JSX } from 'solid-js'; 2 | 3 | export function SubmenuButton(props: SubmenuButtonProps) { 4 | return ( 5 | 6 | 7 | {props.children} 8 | {props.label} 9 | 10 | 11 | 12 | ); 13 | } 14 | 15 | export interface SubmenuButtonProps { 16 | label: string; 17 | children: JSX.Element; 18 | } 19 | -------------------------------------------------------------------------------- /player/solid/default-layout/src/tracks.ts: -------------------------------------------------------------------------------- 1 | import type { TextTrackInit } from 'vidstack'; 2 | 3 | export const textTracks: TextTrackInit[] = [ 4 | // Subtitles 5 | { 6 | src: 'https://files.vidstack.io/sprite-fight/subs/english.vtt', 7 | label: 'English', 8 | language: 'en-US', 9 | kind: 'subtitles', 10 | default: true, 11 | }, 12 | { 13 | src: 'https://files.vidstack.io/sprite-fight/subs/spanish.vtt', 14 | label: 'Spanish', 15 | language: 'es-ES', 16 | kind: 'subtitles', 17 | }, 18 | // Chapters 19 | { 20 | src: 'https://files.vidstack.io/sprite-fight/chapters.vtt', 21 | kind: 'chapters', 22 | language: 'en-US', 23 | default: true, 24 | }, 25 | ]; 26 | -------------------------------------------------------------------------------- /player/solid/default-theme/src/tracks.ts: -------------------------------------------------------------------------------- 1 | import type { TextTrackInit } from 'vidstack'; 2 | 3 | export const textTracks: TextTrackInit[] = [ 4 | // Subtitles 5 | { 6 | src: 'https://files.vidstack.io/sprite-fight/subs/english.vtt', 7 | label: 'English', 8 | language: 'en-US', 9 | kind: 'subtitles', 10 | default: true, 11 | }, 12 | { 13 | src: 'https://files.vidstack.io/sprite-fight/subs/spanish.vtt', 14 | label: 'Spanish', 15 | language: 'es-ES', 16 | kind: 'subtitles', 17 | }, 18 | // Chapters 19 | { 20 | src: 'https://files.vidstack.io/sprite-fight/chapters.vtt', 21 | kind: 'chapters', 22 | language: 'en-US', 23 | default: true, 24 | }, 25 | ]; 26 | -------------------------------------------------------------------------------- /player/solid/tailwind-css/src/tracks.ts: -------------------------------------------------------------------------------- 1 | import type { TextTrackInit } from 'vidstack'; 2 | 3 | export const textTracks: TextTrackInit[] = [ 4 | // Subtitles 5 | { 6 | src: 'https://files.vidstack.io/sprite-fight/subs/english.vtt', 7 | label: 'English', 8 | language: 'en-US', 9 | kind: 'subtitles', 10 | default: true, 11 | }, 12 | { 13 | src: 'https://files.vidstack.io/sprite-fight/subs/spanish.vtt', 14 | label: 'Spanish', 15 | language: 'es-ES', 16 | kind: 'subtitles', 17 | }, 18 | // Chapters 19 | { 20 | src: 'https://files.vidstack.io/sprite-fight/chapters.vtt', 21 | kind: 'chapters', 22 | language: 'en-US', 23 | default: true, 24 | }, 25 | ]; 26 | -------------------------------------------------------------------------------- /player/svelte/default-theme/src/components/AudioCaptions.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 26 | -------------------------------------------------------------------------------- /player/svelte/default-theme/src/tracks.ts: -------------------------------------------------------------------------------- 1 | import type { TextTrackInit } from 'vidstack'; 2 | 3 | export const textTracks: TextTrackInit[] = [ 4 | // Subtitles 5 | { 6 | src: 'https://files.vidstack.io/sprite-fight/subs/english.vtt', 7 | label: 'English', 8 | language: 'en-US', 9 | kind: 'subtitles', 10 | default: true, 11 | }, 12 | { 13 | src: 'https://files.vidstack.io/sprite-fight/subs/spanish.vtt', 14 | label: 'Spanish', 15 | language: 'es-ES', 16 | kind: 'subtitles', 17 | }, 18 | // Chapters 19 | { 20 | src: 'https://files.vidstack.io/sprite-fight/chapters.vtt', 21 | kind: 'chapters', 22 | language: 'en-US', 23 | default: true, 24 | }, 25 | ]; 26 | -------------------------------------------------------------------------------- /player/svelte/tailwind-css/src/tracks.ts: -------------------------------------------------------------------------------- 1 | import type { TextTrackInit } from 'vidstack'; 2 | 3 | export const textTracks: TextTrackInit[] = [ 4 | // Subtitles 5 | { 6 | src: 'https://files.vidstack.io/sprite-fight/subs/english.vtt', 7 | label: 'English', 8 | language: 'en-US', 9 | kind: 'subtitles', 10 | default: true, 11 | }, 12 | { 13 | src: 'https://files.vidstack.io/sprite-fight/subs/spanish.vtt', 14 | label: 'Spanish', 15 | language: 'es-ES', 16 | kind: 'subtitles', 17 | }, 18 | // Chapters 19 | { 20 | src: 'https://files.vidstack.io/sprite-fight/chapters.vtt', 21 | kind: 'chapters', 22 | language: 'en-US', 23 | default: true, 24 | }, 25 | ]; 26 | -------------------------------------------------------------------------------- /player/vue/default-layout/src/tracks.ts: -------------------------------------------------------------------------------- 1 | import type { TextTrackInit } from 'vidstack'; 2 | 3 | export const textTracks: TextTrackInit[] = [ 4 | // Subtitles 5 | { 6 | src: 'https://files.vidstack.io/sprite-fight/subs/english.vtt', 7 | label: 'English', 8 | language: 'en-US', 9 | kind: 'subtitles', 10 | default: true, 11 | }, 12 | { 13 | src: 'https://files.vidstack.io/sprite-fight/subs/spanish.vtt', 14 | label: 'Spanish', 15 | language: 'es-ES', 16 | kind: 'subtitles', 17 | }, 18 | // Chapters 19 | { 20 | src: 'https://files.vidstack.io/sprite-fight/chapters.vtt', 21 | kind: 'chapters', 22 | language: 'en-US', 23 | default: true, 24 | }, 25 | ]; 26 | -------------------------------------------------------------------------------- /player/vue/default-theme/src/tracks.ts: -------------------------------------------------------------------------------- 1 | import type { TextTrackInit } from 'vidstack'; 2 | 3 | export const textTracks: TextTrackInit[] = [ 4 | // Subtitles 5 | { 6 | src: 'https://files.vidstack.io/sprite-fight/subs/english.vtt', 7 | label: 'English', 8 | language: 'en-US', 9 | kind: 'subtitles', 10 | default: true, 11 | }, 12 | { 13 | src: 'https://files.vidstack.io/sprite-fight/subs/spanish.vtt', 14 | label: 'Spanish', 15 | language: 'es-ES', 16 | kind: 'subtitles', 17 | }, 18 | // Chapters 19 | { 20 | src: 'https://files.vidstack.io/sprite-fight/chapters.vtt', 21 | kind: 'chapters', 22 | language: 'en-US', 23 | default: true, 24 | }, 25 | ]; 26 | -------------------------------------------------------------------------------- /player/vue/tailwind-css/src/tracks.ts: -------------------------------------------------------------------------------- 1 | import type { TextTrackInit } from 'vidstack'; 2 | 3 | export const textTracks: TextTrackInit[] = [ 4 | // Subtitles 5 | { 6 | src: 'https://files.vidstack.io/sprite-fight/subs/english.vtt', 7 | label: 'English', 8 | language: 'en-US', 9 | kind: 'subtitles', 10 | default: true, 11 | }, 12 | { 13 | src: 'https://files.vidstack.io/sprite-fight/subs/spanish.vtt', 14 | label: 'Spanish', 15 | language: 'es-ES', 16 | kind: 'subtitles', 17 | }, 18 | // Chapters 19 | { 20 | src: 'https://files.vidstack.io/sprite-fight/chapters.vtt', 21 | kind: 'chapters', 22 | language: 'en-US', 23 | default: true, 24 | }, 25 | ]; 26 | -------------------------------------------------------------------------------- /player/svelte/default-layout/src/tracks.ts: -------------------------------------------------------------------------------- 1 | import type { TextTrackInit } from 'vidstack'; 2 | 3 | export const textTracks: TextTrackInit[] = [ 4 | // Subtitles 5 | { 6 | src: 'https://files.vidstack.io/sprite-fight/subs/english.vtt', 7 | label: 'English', 8 | language: 'en-US', 9 | kind: 'subtitles', 10 | default: true, 11 | }, 12 | { 13 | src: 'https://files.vidstack.io/sprite-fight/subs/spanish.vtt', 14 | label: 'Spanish', 15 | language: 'es-ES', 16 | kind: 'subtitles', 17 | }, 18 | // Chapters 19 | { 20 | src: 'https://files.vidstack.io/sprite-fight/chapters.vtt', 21 | kind: 'chapters', 22 | language: 'en-US', 23 | default: true, 24 | }, 25 | ]; 26 | -------------------------------------------------------------------------------- /player/svelte/default-theme/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-default-theme", 3 | "version": "1.0.0", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite dev --host", 8 | "build": "vite build", 9 | "preview": "vite preview", 10 | "check": "svelte-check --tsconfig ./tsconfig.json" 11 | }, 12 | "dependencies": { 13 | "media-icons": "^1.0.0", 14 | "vidstack": "^1.9.7" 15 | }, 16 | "devDependencies": { 17 | "@sveltejs/vite-plugin-svelte": "^3.0.0", 18 | "@tsconfig/svelte": "^5.0.2", 19 | "postcss": "^8.4.0", 20 | "svelte": "^4.2.0", 21 | "svelte-check": "^3.5.1", 22 | "typescript": "^5.3.0", 23 | "vite": "^5.0.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /player/svelte/default-theme/src/components/buttons/PlayButton.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | Play 17 | Pause 18 | 19 | 20 | -------------------------------------------------------------------------------- /player/svelte/tailwind-css/src/components/menus/SettingsMenu.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 17 | 18 | Settings 19 | 20 | -------------------------------------------------------------------------------- /player/vue/tailwind-css/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-tailwind-css", 3 | "version": "1.0.0", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite dev --host", 8 | "build": "vue-tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "media-icons": "^1.0.0", 13 | "vidstack": "^1.9.7", 14 | "vue": "^3.3.4" 15 | }, 16 | "devDependencies": { 17 | "@vitejs/plugin-vue": "^4.3.4", 18 | "autoprefixer": "^10.4.2", 19 | "postcss": "^8.4.0", 20 | "tailwindcss": "^3.0.0", 21 | "tailwindcss-animate": "^1.0.7", 22 | "typescript": "^5.3.0", 23 | "vite": "^5.0.0", 24 | "vue-tsc": "^1.8.11" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /player/solid/css/src/components/gestures.module.css: -------------------------------------------------------------------------------- 1 | .gesture { 2 | display: block; 3 | position: absolute; 4 | top: 0; 5 | left: 0; 6 | width: 100%; 7 | height: 100%; 8 | z-index: 0; 9 | } 10 | 11 | .gesture[action='seek:-10'], 12 | .gesture[action='seek:10'] { 13 | width: 20%; 14 | z-index: 1; 15 | } 16 | 17 | .gesture[action='seek:10'] { 18 | left: unset; 19 | right: 0; 20 | } 21 | 22 | /* Remove toggle to pause on touch. */ 23 | @media (pointer: coarse) { 24 | .gesture[action='toggle:paused'] { 25 | display: none; 26 | } 27 | } 28 | 29 | /* Remove toggle controls on mouse. */ 30 | @media not (pointer: coarse) { 31 | .gesture[action='toggle:controls'] { 32 | display: none; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /player/solid/default-theme/src/components/menus/settings-menu.tsx: -------------------------------------------------------------------------------- 1 | import type { MenuPlacement, TooltipPlacement } from 'vidstack'; 2 | 3 | import { CaptionSubmenu } from './caption-submenu'; 4 | import { Menu } from './menu'; 5 | 6 | export function SettingsMenu(props: SettingsMenuProps) { 7 | return ( 8 | } 11 | tooltipPlacement={props.tooltipPlacement} 12 | tooltipSlot={Settings} 13 | > 14 | 15 | 16 | ); 17 | } 18 | 19 | export interface SettingsMenuProps { 20 | placement: MenuPlacement; 21 | tooltipPlacement: TooltipPlacement; 22 | } 23 | -------------------------------------------------------------------------------- /player/svelte/tailwind-css/src/components/sliders/SliderPreview.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 10 | {#if thumbnails} 11 | 15 | {/if} 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /player/svelte/css/src/components/menus/Submenu.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 30 | -------------------------------------------------------------------------------- /player/svelte/tailwind-css/src/components/sliders/TimeSlider.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /player/react/default-layout/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "allowSyntheticDefaultImports": true, 5 | "esModuleInterop": true, 6 | "forceConsistentCasingInFileNames": true, 7 | "isolatedModules": true, 8 | "jsx": "react-jsx", 9 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 10 | "module": "ESNext", 11 | "moduleResolution": "bundler", 12 | "noEmit": true, 13 | "resolveJsonModule": true, 14 | "skipLibCheck": true, 15 | "strict": true, 16 | "target": "ESNext", 17 | "useDefineForClassFields": true, 18 | "verbatimModuleSyntax": true 19 | }, 20 | "include": ["src/**/*.ts", "src/**/*.tsx"], 21 | "references": [{ "path": "./tsconfig.node.json" }] 22 | } 23 | -------------------------------------------------------------------------------- /player/solid/default-theme/src/components/video-gestures.module.css: -------------------------------------------------------------------------------- 1 | .gesture { 2 | display: block; 3 | position: absolute; 4 | top: 0; 5 | left: 0; 6 | width: 100%; 7 | height: 100%; 8 | z-index: 0; 9 | } 10 | 11 | .gesture[action='seek:-10'], 12 | .gesture[action='seek:10'] { 13 | width: 20%; 14 | z-index: 1; 15 | } 16 | 17 | .gesture[action='seek:10'] { 18 | left: unset; 19 | right: 0; 20 | } 21 | 22 | /* Remove toggle to pause on touch. */ 23 | @media (pointer: coarse) { 24 | .gesture[action='toggle:paused'] { 25 | display: none; 26 | } 27 | } 28 | 29 | /* Remove toggle controls on mouse. */ 30 | @media not (pointer: coarse) { 31 | .gesture[action='toggle:controls'] { 32 | display: none; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /player/solid/css/src/components/menus/submenu-button.tsx: -------------------------------------------------------------------------------- 1 | import styles from './submenu-button.module.css'; 2 | 3 | import type { JSX } from 'solid-js'; 4 | 5 | export function SubmenuButton(props: SubmenuButtonProps) { 6 | return ( 7 | 8 | 9 |
{props.children}
10 | {props.label} 11 | 12 | 13 | 14 | ); 15 | } 16 | 17 | export interface SubmenuButtonProps { 18 | label: string; 19 | children: JSX.Element; 20 | } 21 | -------------------------------------------------------------------------------- /player/solid/default-theme/src/components/layouts/video-layout.module.css: -------------------------------------------------------------------------------- 1 | .controls media-time-slider { 2 | --media-slider-height: 40px; 3 | } 4 | 5 | .controls media-time-slider media-slider-value { 6 | background-color: unset; 7 | } 8 | 9 | .controls media-volume-slider { 10 | --media-slider-height: 40px; 11 | --media-slider-preview-offset: 32px; 12 | margin-left: 1.5px; 13 | max-width: 80px; 14 | } 15 | 16 | .controls :global(.vds-time-group) { 17 | margin-left: 8px; 18 | } 19 | 20 | .controlsGroup { 21 | display: flex; 22 | align-items: center; 23 | width: 100%; 24 | } 25 | 26 | .controlsGroup { 27 | padding-inline: 8px; 28 | } 29 | 30 | .controlsGroup:last-child { 31 | margin-top: -4px; 32 | padding-bottom: 8px; 33 | } 34 | -------------------------------------------------------------------------------- /player/svelte/default-theme/src/components/buttons/PIPButton.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | Enter PIP 17 | Exit PIP 18 | 19 | 20 | -------------------------------------------------------------------------------- /player/react/css/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "allowSyntheticDefaultImports": true, 5 | "esModuleInterop": true, 6 | "forceConsistentCasingInFileNames": true, 7 | "isolatedModules": true, 8 | "jsx": "react-jsx", 9 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 10 | "module": "ESNext", 11 | "moduleResolution": "bundler", 12 | "noEmit": true, 13 | "resolveJsonModule": true, 14 | "skipLibCheck": true, 15 | "strict": true, 16 | "target": "ESNext", 17 | "useDefineForClassFields": true, 18 | "verbatimModuleSyntax": true, 19 | "types": ["vite/client"] 20 | }, 21 | "include": ["src/**/*.ts", "src/**/*.tsx"], 22 | "references": [{ "path": "./tsconfig.node.json" }] 23 | } 24 | -------------------------------------------------------------------------------- /player/react/tailwind-css/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "allowSyntheticDefaultImports": true, 5 | "esModuleInterop": true, 6 | "forceConsistentCasingInFileNames": true, 7 | "isolatedModules": true, 8 | "jsx": "react-jsx", 9 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 10 | "module": "ESNext", 11 | "moduleResolution": "bundler", 12 | "noEmit": true, 13 | "resolveJsonModule": true, 14 | "skipLibCheck": true, 15 | "strict": true, 16 | "target": "ESNext", 17 | "useDefineForClassFields": true, 18 | "verbatimModuleSyntax": true, 19 | "types": ["vite/client"] 20 | }, 21 | "include": ["src/**/*.ts", "src/**/*.tsx"], 22 | "references": [{ "path": "./tsconfig.node.json" }] 23 | } 24 | -------------------------------------------------------------------------------- /player/react/default-theme/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "allowSyntheticDefaultImports": true, 5 | "esModuleInterop": true, 6 | "forceConsistentCasingInFileNames": true, 7 | "isolatedModules": true, 8 | "jsx": "react-jsx", 9 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 10 | "module": "ESNext", 11 | "moduleResolution": "bundler", 12 | "noEmit": true, 13 | "resolveJsonModule": true, 14 | "skipLibCheck": true, 15 | "strict": true, 16 | "target": "ESNext", 17 | "useDefineForClassFields": true, 18 | "verbatimModuleSyntax": true, 19 | "types": ["vite/client"] 20 | }, 21 | "include": ["src/**/*.ts", "src/**/*.tsx"], 22 | "references": [{ "path": "./tsconfig.node.json" }] 23 | } 24 | -------------------------------------------------------------------------------- /player/react/radix+tailwind/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "allowSyntheticDefaultImports": true, 5 | "esModuleInterop": true, 6 | "forceConsistentCasingInFileNames": true, 7 | "isolatedModules": true, 8 | "jsx": "react-jsx", 9 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 10 | "module": "ESNext", 11 | "moduleResolution": "bundler", 12 | "noEmit": true, 13 | "resolveJsonModule": true, 14 | "skipLibCheck": true, 15 | "strict": true, 16 | "target": "ESNext", 17 | "useDefineForClassFields": true, 18 | "verbatimModuleSyntax": true, 19 | "types": ["vite/client"] 20 | }, 21 | "include": ["src/**/*.ts", "src/**/*.tsx"], 22 | "references": [{ "path": "./tsconfig.node.json" }] 23 | } 24 | -------------------------------------------------------------------------------- /player/solid/css/src/components/sliders/slider-preview.module.css: -------------------------------------------------------------------------------- 1 | .preview { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | opacity: 0; 6 | border-radius: 2px; 7 | pointer-events: none; 8 | transition: opacity 0.2s ease-out; 9 | will-change: left, opacity; 10 | contain: layout paint style; 11 | } 12 | 13 | .preview[data-visible] { 14 | opacity: 1; 15 | transition: opacity 0.2s ease-in; 16 | } 17 | 18 | .thumbnail { 19 | display: block; 20 | width: var(--thumbnail-width); 21 | height: var(--thumbnail-height); 22 | background-color: black; 23 | border: 1px solid white; 24 | contain: strict; 25 | overflow: hidden; 26 | min-width: 120px; 27 | min-height: 80px; 28 | max-width: 180px; 29 | max-height: 160px; 30 | } 31 | -------------------------------------------------------------------------------- /player/svelte/default-theme/src/components/buttons/CaptionButton.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | Closed-Captions Off 17 | Closed-Captions On 18 | 19 | 20 | -------------------------------------------------------------------------------- /player/svelte/default-theme/src/components/buttons/FullscreenButton.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | Enter Fullscreen 17 | Exit Fullscreen 18 | 19 | 20 | -------------------------------------------------------------------------------- /player/solid/css/src/components/menus/settings-menu.tsx: -------------------------------------------------------------------------------- 1 | import styles from './settings-menu.module.css'; 2 | 3 | import type { MenuPlacement, TooltipPlacement } from 'vidstack'; 4 | 5 | import { CaptionSubmenu } from './caption-submenu'; 6 | import { Menu } from './menu'; 7 | 8 | export function SettingsMenu(props: SettingsMenuProps) { 9 | return ( 10 | } 13 | tooltipPlacement={props.tooltipPlacement} 14 | tooltipSlot={Settings} 15 | > 16 | 17 | 18 | ); 19 | } 20 | 21 | export interface SettingsMenuProps { 22 | placement: MenuPlacement; 23 | tooltipPlacement: TooltipPlacement; 24 | } 25 | -------------------------------------------------------------------------------- /player/solid/css/src/components/sliders/time-slider.tsx: -------------------------------------------------------------------------------- 1 | import styles from './time-slider.module.css'; 2 | 3 | import { SliderChapters } from './slider-chapters'; 4 | import { SliderPreview } from './slider-preview'; 5 | import { SliderThumb } from './slider-thumb'; 6 | 7 | export function TimeSlider(props: TimeSliderProps) { 8 | return ( 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | ); 18 | } 19 | 20 | export interface TimeSliderProps { 21 | thumbnails?: string; 22 | } 23 | -------------------------------------------------------------------------------- /player/vue/tailwind-css/src/components/sliders/SliderPreview.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 22 | -------------------------------------------------------------------------------- /player/react/css/README.md: -------------------------------------------------------------------------------- 1 | # Player: React (CSS) 2 | 3 | This example demonstrates setting up your custom video player layout with CSS using Vidstack Player 4 | React. 5 | 6 | The CSS option we're building on provides you with a minimal starting point and completely 7 | unstyled components. All components including the player itself provide styling hooks via data 8 | attributes and support animations. This option is best when you want to build your player yourself 9 | from scratch using vanilla CSS. 10 | 11 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)][stackblitz-demo] 12 | 13 | [stackblitz-demo]: https://stackblitz.com/fork/github/vidstack/examples/tree/main/player/react/css?title=Vidstack%20Player%20-%20React%20%28CSS%29&file=src/main.ts&showSidebar=1 14 | -------------------------------------------------------------------------------- /player/svelte/default-theme/src/components/buttons/MuteButton.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | Unmute 18 | Mute 19 | 20 | 21 | -------------------------------------------------------------------------------- /player/svelte/tailwind-css/src/components/Tooltip.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 | 15 | 16 | 17 | 18 | 19 | 24 | -------------------------------------------------------------------------------- /player/vue/css/src/components/menus/CaptionSubmenu.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 20 | 21 | 33 | -------------------------------------------------------------------------------- /player/vue/css/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowImportingTsExtensions": true, 4 | "allowJs": true, 5 | "allowSyntheticDefaultImports": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "isolatedModules": true, 9 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 10 | "module": "ESNext", 11 | "moduleResolution": "bundler", 12 | "noEmit": true, 13 | "resolveJsonModule": true, 14 | "skipLibCheck": true, 15 | "strict": true, 16 | "target": "ESNext", 17 | "types": ["vidstack/vue"], 18 | "useDefineForClassFields": true, 19 | "verbatimModuleSyntax": true 20 | }, 21 | "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"], 22 | "references": [{ "path": "./tsconfig.node.json" }] 23 | } 24 | -------------------------------------------------------------------------------- /player/react/tailwind-css/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-tailwind-css", 3 | "version": "1.0.0", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite dev --host", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@vidstack/react": "^1.9.7", 13 | "media-icons": "^1.0.0", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0" 16 | }, 17 | "devDependencies": { 18 | "@types/react": "^18.2.18", 19 | "@types/react-dom": "^18.2.7", 20 | "@vitejs/plugin-react": "^4.2.0", 21 | "autoprefixer": "^10.4.2", 22 | "postcss": "^8.4.0", 23 | "tailwindcss": "^3.0.0", 24 | "tailwindcss-animate": "^1.0.7", 25 | "typescript": "^5.3.0", 26 | "vite": "^5.0.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /player/svelte/default-theme/src/components/menus/Menu.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /player/vue/css/README.md: -------------------------------------------------------------------------------- 1 | # Player: Vue (CSS) 2 | 3 | This example demonstrates setting up your custom video player layout with CSS using Vidstack Player 4 | Web Components with Vue. 5 | 6 | The CSS option we're building on provides you with a minimal starting point and completely 7 | unstyled components. All components including the player itself provide styling hooks via data 8 | attributes and support animations. This option is best when you want to build your player yourself 9 | from scratch using vanilla CSS. 10 | 11 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)][stackblitz-demo] 12 | 13 | [stackblitz-demo]: https://stackblitz.com/fork/github/vidstack/examples/tree/main/player/vue/css?title=Vidstack%20Player%20-%20Vue%20%28CSS%29&file=src/main.ts&showSidebar=1 14 | -------------------------------------------------------------------------------- /player/react/default-theme/README.md: -------------------------------------------------------------------------------- 1 | # Player: React (Default Theme) 2 | 3 | This example demonstrates setting up an audio and video layout by customizing the Default Theme 4 | using Vidstack Player React. 5 | 6 | The Default Theme is best when you want to build your own player but you don't want to 7 | design each component from zero. Our default styles have been built to be extremely easy to 8 | customize! We provide the shell and base styles and you provide the content and customization. 9 | 10 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)][stackblitz-demo] 11 | 12 | [stackblitz-demo]: https://stackblitz.com/fork/github/vidstack/examples/tree/main/player/react/default-theme?title=Vidstack%20Player%20-%20React%20%28Default%20Theme%29&file=src/main.ts&showSidebar=1 13 | -------------------------------------------------------------------------------- /player/solid/tailwind-css/src/components/gestures.tsx: -------------------------------------------------------------------------------- 1 | export function Gestures() { 2 | return ( 3 | <> 4 | 9 | 14 | 19 | 24 | 25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /player/vue/default-layout/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowImportingTsExtensions": true, 4 | "allowJs": true, 5 | "allowSyntheticDefaultImports": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "isolatedModules": true, 9 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 10 | "module": "ESNext", 11 | "moduleResolution": "bundler", 12 | "noEmit": true, 13 | "resolveJsonModule": true, 14 | "skipLibCheck": true, 15 | "strict": true, 16 | "target": "ESNext", 17 | "types": ["vidstack/vue"], 18 | "useDefineForClassFields": true, 19 | "verbatimModuleSyntax": true 20 | }, 21 | "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"], 22 | "references": [{ "path": "./tsconfig.node.json" }] 23 | } 24 | -------------------------------------------------------------------------------- /player/vue/default-theme/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowImportingTsExtensions": true, 4 | "allowJs": true, 5 | "allowSyntheticDefaultImports": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "isolatedModules": true, 9 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 10 | "module": "ESNext", 11 | "moduleResolution": "bundler", 12 | "noEmit": true, 13 | "resolveJsonModule": true, 14 | "skipLibCheck": true, 15 | "strict": true, 16 | "target": "ESNext", 17 | "types": ["vidstack/vue"], 18 | "useDefineForClassFields": true, 19 | "verbatimModuleSyntax": true 20 | }, 21 | "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"], 22 | "references": [{ "path": "./tsconfig.node.json" }] 23 | } 24 | -------------------------------------------------------------------------------- /player/vue/tailwind-css/src/components/sliders/TimeSlider.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 23 | -------------------------------------------------------------------------------- /player/vue/tailwind-css/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowImportingTsExtensions": true, 4 | "allowJs": true, 5 | "allowSyntheticDefaultImports": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "isolatedModules": true, 9 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 10 | "module": "ESNext", 11 | "moduleResolution": "bundler", 12 | "noEmit": true, 13 | "resolveJsonModule": true, 14 | "skipLibCheck": true, 15 | "strict": true, 16 | "target": "ESNext", 17 | "types": ["vidstack/vue"], 18 | "useDefineForClassFields": true, 19 | "verbatimModuleSyntax": true 20 | }, 21 | "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"], 22 | "references": [{ "path": "./tsconfig.node.json" }] 23 | } 24 | -------------------------------------------------------------------------------- /player/solid/css/README.md: -------------------------------------------------------------------------------- 1 | # Player: Solid (CSS) 2 | 3 | This example demonstrates setting up your custom video player layout with CSS using Vidstack Player 4 | Web Components with Solid. 5 | 6 | The CSS option we're building on provides you with a minimal starting point and completely 7 | unstyled components. All components including the player itself provide styling hooks via data 8 | attributes and support animations. This option is best when you want to build your player yourself 9 | from scratch using vanilla CSS. 10 | 11 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)][stackblitz-demo] 12 | 13 | [stackblitz-demo]: https://stackblitz.com/fork/github/vidstack/examples/tree/main/player/solid/css?title=Vidstack%20Player%20-%20Solid%20%28CSS%29&file=src/main.ts&showSidebar=1 14 | -------------------------------------------------------------------------------- /player/solid/default-layout/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "allowSyntheticDefaultImports": true, 5 | "esModuleInterop": true, 6 | "forceConsistentCasingInFileNames": true, 7 | "isolatedModules": true, 8 | "jsx": "preserve", 9 | "jsxImportSource": "solid-js", 10 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 11 | "module": "ESNext", 12 | "moduleResolution": "bundler", 13 | "noEmit": true, 14 | "resolveJsonModule": true, 15 | "skipLibCheck": true, 16 | "strict": true, 17 | "target": "ESNext", 18 | "types": ["vidstack/solid"], 19 | "useDefineForClassFields": true, 20 | "verbatimModuleSyntax": true 21 | }, 22 | "include": ["src/**/*.ts", "src/**/*.tsx"], 23 | "references": [{ "path": "./tsconfig.node.json" }] 24 | } 25 | -------------------------------------------------------------------------------- /player/svelte/css/README.md: -------------------------------------------------------------------------------- 1 | # Player: Svelte (CSS) 2 | 3 | This example demonstrates setting up your custom video player layout with CSS using Vidstack Player 4 | Web Components with Svelte. 5 | 6 | The CSS option we're building on provides you with a minimal starting point and completely 7 | unstyled components. All components including the player itself provide styling hooks via data 8 | attributes and support animations. This option is best when you want to build your player yourself 9 | from scratch using vanilla CSS. 10 | 11 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)][stackblitz-demo] 12 | 13 | [stackblitz-demo]: https://stackblitz.com/fork/github/vidstack/examples/tree/main/player/svelte/css?title=Vidstack%20Player%20-%20Svelte%20%28CSS%29&file=src/main.ts&showSidebar=1 14 | -------------------------------------------------------------------------------- /player/vue/css/src/document.css: -------------------------------------------------------------------------------- 1 | /************************************************************************************************* 2 | * Document 3 | *************************************************************************************************/ 4 | 5 | * { 6 | box-sizing: border-box; 7 | } 8 | 9 | /* 10 | * Prevent FOUC - you don't need this if you're loading styles via link tags or server-side 11 | * rendering with a framework like Nuxt. 12 | */ 13 | *:not(:defined) { 14 | opacity: 0; 15 | } 16 | 17 | html, 18 | body { 19 | margin: 0; 20 | padding: 0; 21 | width: 100vw; 22 | height: 100vh; 23 | } 24 | 25 | body { 26 | display: flex; 27 | align-items: center; 28 | justify-content: center; 29 | } 30 | 31 | main { 32 | width: 100%; 33 | max-width: 980px; 34 | margin-inline: auto; 35 | } 36 | -------------------------------------------------------------------------------- /player/vue/default-theme/README.md: -------------------------------------------------------------------------------- 1 | # Player: Vue (Default Theme) 2 | 3 | This example demonstrates setting up an audio and video layout by customizing the Default Theme 4 | using Vidstack Player Web Components with Vue. 5 | 6 | The Default Theme is best when you want to build your own player but you don't want to 7 | design each component from zero. Our default styles have been built to be extremely easy to 8 | customize! We provide the shell and base styles and you provide the content and customization. 9 | 10 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)][stackblitz-demo] 11 | 12 | [stackblitz-demo]: https://stackblitz.com/fork/github/vidstack/examples/tree/main/player/vue/default-theme?title=Vidstack%20Player%20-%20Vue%20%28Default%20Theme%29&file=src/main.ts&showSidebar=1 13 | -------------------------------------------------------------------------------- /player/web-components/css/src/styles/chapter-title.css: -------------------------------------------------------------------------------- 1 | /************************************************************************************************* 2 | * Chapter Title 3 | *************************************************************************************************/ 4 | 5 | media-chapter-title { 6 | display: inline-block; 7 | font-size: 14px; 8 | font-weight: 500; 9 | color: rgba(255 255 255 / 0.64); 10 | flex: 1 1 0%; 11 | padding-inline: 8px; 12 | overflow: hidden; 13 | white-space: nowrap; 14 | text-overflow: ellipsis; 15 | } 16 | 17 | media-chapter-title::before { 18 | content: '\2022'; 19 | display: inline-block; 20 | margin-right: 6px; 21 | color: rgba(255 255 255 / 0.64); 22 | } 23 | 24 | media-chapter-title:empty::before { 25 | content: ''; 26 | margin-left: 0; 27 | } 28 | -------------------------------------------------------------------------------- /player/web-components/default-theme/src/document.css: -------------------------------------------------------------------------------- 1 | /************************************************************************************************* 2 | * Document 3 | *************************************************************************************************/ 4 | 5 | * { 6 | box-sizing: border-box; 7 | } 8 | 9 | html, 10 | body { 11 | margin: 0; 12 | padding: 0; 13 | width: 100vw; 14 | height: 100vh; 15 | } 16 | 17 | body { 18 | display: flex; 19 | align-items: center; 20 | justify-content: center; 21 | } 22 | 23 | main { 24 | width: 100%; 25 | max-width: 980px; 26 | margin-inline: auto; 27 | } 28 | 29 | .player-links { 30 | display: flex; 31 | align-items: center; 32 | justify-content: center; 33 | } 34 | 35 | .player-links > a:nth-child(2) { 36 | margin-left: 12px; 37 | } 38 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vidstack Examples 2 | 3 | This repository is dedicated to showing you how to get started with Vidstack using various 4 | JavaScript frameworks and CSS libraries. 5 | 6 | ## Local 7 | 8 | You can run the examples locally by following these steps: 9 | 10 | 1. `git clone git@github.com:vidstack/examples.git vidstack-examples` 11 | 2. `cd vidstack-examples` 12 | 3. `pnpm i` 13 | 4. `pnpm start` - launches a process for you to select which example to run. 14 | 15 | ## Remote (recommended) 16 | 17 | Each example has a README which contains an "Open in StackBlitz" link. If you click it, it'll 18 | fork and launch the project in [StackBlitz](https://stackblitz.com). You can run the code, edit it, 19 | and preview it inside their development environment. This is the easiest way to start playing with 20 | the examples. 21 | -------------------------------------------------------------------------------- /player/solid/css/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "allowSyntheticDefaultImports": true, 5 | "esModuleInterop": true, 6 | "forceConsistentCasingInFileNames": true, 7 | "isolatedModules": true, 8 | "jsx": "preserve", 9 | "jsxImportSource": "solid-js", 10 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 11 | "module": "ESNext", 12 | "moduleResolution": "bundler", 13 | "noEmit": true, 14 | "resolveJsonModule": true, 15 | "skipLibCheck": true, 16 | "strict": true, 17 | "target": "ESNext", 18 | "useDefineForClassFields": true, 19 | "types": ["vite/client", "vidstack/solid"], 20 | "verbatimModuleSyntax": true 21 | }, 22 | "include": ["src/**/*.ts", "src/**/*.tsx"], 23 | "references": [{ "path": "./tsconfig.node.json" }] 24 | } 25 | -------------------------------------------------------------------------------- /player/solid/tailwind-css/src/components/sliders/time-slider.tsx: -------------------------------------------------------------------------------- 1 | import { SliderChapters } from './slider-chapters'; 2 | import { SliderPreview } from './slider-preview'; 3 | import { SliderThumb } from './slider-thumb'; 4 | 5 | export function TimeSlider(props: TimeSliderProps) { 6 | return ( 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | ); 16 | } 17 | 18 | export interface TimeSliderProps { 19 | thumbnails?: string; 20 | } 21 | -------------------------------------------------------------------------------- /player/svelte/css/src/document.css: -------------------------------------------------------------------------------- 1 | /************************************************************************************************* 2 | * Document 3 | *************************************************************************************************/ 4 | 5 | * { 6 | box-sizing: border-box; 7 | } 8 | 9 | /* 10 | * Prevent FOUC - you don't need this if you're loading styles via link tags or server-side 11 | * rendering with a framework like Nuxt. 12 | */ 13 | *:not(:defined) { 14 | opacity: 0; 15 | } 16 | 17 | html, 18 | body { 19 | margin: 0; 20 | padding: 0; 21 | width: 100vw; 22 | height: 100vh; 23 | } 24 | 25 | body { 26 | display: flex; 27 | align-items: center; 28 | justify-content: center; 29 | } 30 | 31 | main { 32 | width: 100%; 33 | max-width: 980px; 34 | margin-inline: auto; 35 | } 36 | -------------------------------------------------------------------------------- /player/svelte/tailwind-css/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-tailwind-css", 3 | "version": "1.0.0", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite dev --host", 8 | "build": "vite build", 9 | "preview": "vite preview", 10 | "check": "svelte-check --tsconfig ./tsconfig.json" 11 | }, 12 | "dependencies": { 13 | "media-icons": "^1.0.0", 14 | "vidstack": "^1.9.7" 15 | }, 16 | "devDependencies": { 17 | "@sveltejs/vite-plugin-svelte": "^3.0.0", 18 | "@tsconfig/svelte": "^5.0.2", 19 | "autoprefixer": "^10.4.2", 20 | "postcss": "^8.4.0", 21 | "svelte": "^4.2.0", 22 | "svelte-check": "^3.5.1", 23 | "tailwindcss": "^3.0.0", 24 | "tailwindcss-animate": "^1.0.7", 25 | "typescript": "^5.3.0", 26 | "vite": "^5.0.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /player/solid/css/src/document.css: -------------------------------------------------------------------------------- 1 | /************************************************************************************************* 2 | * Document 3 | *************************************************************************************************/ 4 | 5 | * { 6 | box-sizing: border-box; 7 | } 8 | 9 | /* 10 | * Prevent FOUC - you don't need this if you're loading styles via link tags or server-side 11 | * rendering with a framework like SolidStart. 12 | */ 13 | *:not(:defined) { 14 | opacity: 0; 15 | } 16 | 17 | html, 18 | body { 19 | margin: 0; 20 | padding: 0; 21 | width: 100vw; 22 | height: 100vh; 23 | } 24 | 25 | body { 26 | display: flex; 27 | align-items: center; 28 | justify-content: center; 29 | } 30 | 31 | main { 32 | width: 100%; 33 | max-width: 980px; 34 | margin-inline: auto; 35 | } 36 | -------------------------------------------------------------------------------- /player/solid/default-theme/README.md: -------------------------------------------------------------------------------- 1 | # Player: Solid (Default Theme) 2 | 3 | This example demonstrates setting up an audio and video layout by customizing the Default Theme 4 | using Vidstack Player Web Components with Solid. 5 | 6 | The Default Theme is best when you want to build your own player but you don't want to 7 | design each component from zero. Our default styles have been built to be extremely easy to 8 | customize! We provide the shell and base styles and you provide the content and customization. 9 | 10 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)][stackblitz-demo] 11 | 12 | [stackblitz-demo]: https://stackblitz.com/fork/github/vidstack/examples/tree/main/player/solid/default-theme?title=Vidstack%20Player%20-%20Solid%20%28Default%20Theme%29&file=src/main.ts&showSidebar=1 13 | -------------------------------------------------------------------------------- /player/vue/default-layout/src/document.css: -------------------------------------------------------------------------------- 1 | /************************************************************************************************* 2 | * Document 3 | *************************************************************************************************/ 4 | 5 | * { 6 | box-sizing: border-box; 7 | } 8 | 9 | /* 10 | * Prevent FOUC - you don't need this if you're loading styles via link tags or server-side 11 | * rendering with a framework like Nuxt. 12 | */ 13 | *:not(:defined) { 14 | opacity: 0; 15 | } 16 | 17 | html, 18 | body { 19 | margin: 0; 20 | padding: 0; 21 | width: 100vw; 22 | height: 100vh; 23 | } 24 | 25 | body { 26 | display: flex; 27 | align-items: center; 28 | justify-content: center; 29 | } 30 | 31 | main { 32 | width: 100%; 33 | max-width: 980px; 34 | margin-inline: auto; 35 | } 36 | -------------------------------------------------------------------------------- /player/vue/default-theme/src/components/buttons/PlayButton.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 26 | -------------------------------------------------------------------------------- /player/vue/default-theme/src/components/menus/SettingsMenu.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 26 | -------------------------------------------------------------------------------- /player/vue/default-theme/src/document.css: -------------------------------------------------------------------------------- 1 | /************************************************************************************************* 2 | * Document 3 | *************************************************************************************************/ 4 | 5 | * { 6 | box-sizing: border-box; 7 | } 8 | 9 | /* 10 | * Prevent FOUC - you don't need this if you're loading styles via link tags or server-side 11 | * rendering with a framework like Nuxt. 12 | */ 13 | *:not(:defined) { 14 | opacity: 0; 15 | } 16 | 17 | html, 18 | body { 19 | margin: 0; 20 | padding: 0; 21 | width: 100vw; 22 | height: 100vh; 23 | } 24 | 25 | body { 26 | display: flex; 27 | align-items: center; 28 | justify-content: center; 29 | } 30 | 31 | main { 32 | width: 100%; 33 | max-width: 980px; 34 | margin-inline: auto; 35 | } 36 | -------------------------------------------------------------------------------- /player/solid/default-theme/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "allowSyntheticDefaultImports": true, 5 | "esModuleInterop": true, 6 | "forceConsistentCasingInFileNames": true, 7 | "isolatedModules": true, 8 | "jsx": "preserve", 9 | "jsxImportSource": "solid-js", 10 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 11 | "module": "ESNext", 12 | "moduleResolution": "bundler", 13 | "noEmit": true, 14 | "resolveJsonModule": true, 15 | "skipLibCheck": true, 16 | "strict": true, 17 | "target": "ESNext", 18 | "useDefineForClassFields": true, 19 | "types": ["vite/client", "vidstack/solid"], 20 | "verbatimModuleSyntax": true 21 | }, 22 | "include": ["src/**/*.ts", "src/**/*.tsx"], 23 | "references": [{ "path": "./tsconfig.node.json" }] 24 | } 25 | -------------------------------------------------------------------------------- /player/solid/tailwind-css/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "allowSyntheticDefaultImports": true, 5 | "esModuleInterop": true, 6 | "forceConsistentCasingInFileNames": true, 7 | "isolatedModules": true, 8 | "jsx": "preserve", 9 | "jsxImportSource": "solid-js", 10 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 11 | "module": "ESNext", 12 | "moduleResolution": "bundler", 13 | "noEmit": true, 14 | "resolveJsonModule": true, 15 | "skipLibCheck": true, 16 | "strict": true, 17 | "target": "ESNext", 18 | "useDefineForClassFields": true, 19 | "types": ["vite/client", "vidstack/solid"], 20 | "verbatimModuleSyntax": true 21 | }, 22 | "include": ["src/**/*.ts", "src/**/*.tsx"], 23 | "references": [{ "path": "./tsconfig.node.json" }] 24 | } 25 | -------------------------------------------------------------------------------- /player/svelte/default-layout/src/document.css: -------------------------------------------------------------------------------- 1 | /************************************************************************************************* 2 | * Document 3 | *************************************************************************************************/ 4 | 5 | * { 6 | box-sizing: border-box; 7 | } 8 | 9 | /* 10 | * Prevent FOUC - you don't need this if you're loading styles via link tags or server-side 11 | * rendering with a framework like Nuxt. 12 | */ 13 | *:not(:defined) { 14 | opacity: 0; 15 | } 16 | 17 | html, 18 | body { 19 | margin: 0; 20 | padding: 0; 21 | width: 100vw; 22 | height: 100vh; 23 | } 24 | 25 | body { 26 | display: flex; 27 | align-items: center; 28 | justify-content: center; 29 | } 30 | 31 | main { 32 | width: 100%; 33 | max-width: 980px; 34 | margin-inline: auto; 35 | } 36 | -------------------------------------------------------------------------------- /player/svelte/default-theme/README.md: -------------------------------------------------------------------------------- 1 | # Player: Svelte (Default Theme) 2 | 3 | This example demonstrates setting up an audio and video layout by customizing the Default Theme 4 | using Vidstack Player Web Components with Svelte. 5 | 6 | The Default Theme is best when you want to build your own player but you don't want to 7 | design each component from zero. Our default styles have been built to be extremely easy to 8 | customize! We provide the shell and base styles and you provide the content and customization. 9 | 10 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)][stackblitz-demo] 11 | 12 | [stackblitz-demo]: https://stackblitz.com/fork/github/vidstack/examples/tree/main/player/svelte/default-theme?title=Vidstack%20Player%20-%20Svelte%20%28Default%20Theme%29&file=src/main.ts&showSidebar=1 13 | -------------------------------------------------------------------------------- /player/vue/css/src/components/sliders/SliderThumb.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 33 | -------------------------------------------------------------------------------- /player/solid/default-layout/src/document.css: -------------------------------------------------------------------------------- 1 | /************************************************************************************************* 2 | * Document 3 | *************************************************************************************************/ 4 | 5 | * { 6 | box-sizing: border-box; 7 | } 8 | 9 | /* 10 | * Prevent FOUC - you don't need this if you're loading styles via link tags or server-side 11 | * rendering with a framework like SolidStart. 12 | */ 13 | *:not(:defined) { 14 | opacity: 0; 15 | } 16 | 17 | html, 18 | body { 19 | margin: 0; 20 | padding: 0; 21 | width: 100vw; 22 | height: 100vh; 23 | } 24 | 25 | body { 26 | display: flex; 27 | align-items: center; 28 | justify-content: center; 29 | } 30 | 31 | main { 32 | width: 100%; 33 | max-width: 980px; 34 | margin-inline: auto; 35 | } 36 | -------------------------------------------------------------------------------- /player/solid/default-theme/src/document.css: -------------------------------------------------------------------------------- 1 | /************************************************************************************************* 2 | * Document 3 | *************************************************************************************************/ 4 | 5 | * { 6 | box-sizing: border-box; 7 | } 8 | 9 | /* 10 | * Prevent FOUC - you don't need this if you're loading styles via link tags or server-side 11 | * rendering with a framework like SolidStart. 12 | */ 13 | *:not(:defined) { 14 | opacity: 0; 15 | } 16 | 17 | html, 18 | body { 19 | margin: 0; 20 | padding: 0; 21 | width: 100vw; 22 | height: 100vh; 23 | } 24 | 25 | body { 26 | display: flex; 27 | align-items: center; 28 | justify-content: center; 29 | } 30 | 31 | main { 32 | width: 100%; 33 | max-width: 980px; 34 | margin-inline: auto; 35 | } 36 | -------------------------------------------------------------------------------- /player/svelte/default-theme/src/document.css: -------------------------------------------------------------------------------- 1 | /************************************************************************************************* 2 | * Document 3 | *************************************************************************************************/ 4 | 5 | * { 6 | box-sizing: border-box; 7 | } 8 | 9 | /* 10 | * Prevent FOUC - you don't need this if you're loading styles via link tags or server-side 11 | * rendering with a framework like SvelteKit. 12 | */ 13 | *:not(:defined) { 14 | opacity: 0; 15 | } 16 | 17 | html, 18 | body { 19 | margin: 0; 20 | padding: 0; 21 | width: 100vw; 22 | height: 100vh; 23 | } 24 | 25 | body { 26 | display: flex; 27 | align-items: center; 28 | justify-content: center; 29 | } 30 | 31 | main { 32 | width: 100%; 33 | max-width: 980px; 34 | margin-inline: auto; 35 | } 36 | -------------------------------------------------------------------------------- /player/vue/css/src/components/menus/Submenu.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 21 | 22 | 36 | -------------------------------------------------------------------------------- /player/solid/css/src/components/sliders/slider-thumb.module.css: -------------------------------------------------------------------------------- 1 | .thumb { 2 | position: absolute; 3 | top: 50%; 4 | left: var(--slider-fill); 5 | opacity: 0; 6 | contain: layout size style; 7 | width: 15px; 8 | height: 15px; 9 | border: 1px solid #cacaca; 10 | border-radius: 9999px; 11 | background-color: #fff; 12 | transform: translate(-50%, -50%) translateZ(0); 13 | transition: opacity 0.15s ease-in; 14 | pointer-events: none; 15 | will-change: left; 16 | z-index: 2; /** above track fill. */ 17 | } 18 | 19 | media-time-slider[data-active] .thumb, 20 | media-volume-slider[data-active] .thumb { 21 | opacity: 1; 22 | transition: opacity 0.2s ease-in; 23 | } 24 | 25 | media-time-slider[data-dragging] .thumb, 26 | media-volume-slider[data-dragging] .thumb { 27 | box-shadow: 0 0 0 3px hsla(0, 0%, 100%, 0.4); 28 | } 29 | -------------------------------------------------------------------------------- /player/solid/default-layout/src/player.css: -------------------------------------------------------------------------------- 1 | .player { 2 | --brand-color: #f5f5f5; 3 | --focus-color: #4e9cf6; 4 | 5 | --audio-brand: var(--brand-color); 6 | --audio-focus-ring-color: var(--focus-color); 7 | --audio-border-radius: 2px; 8 | 9 | --video-brand: var(--brand-color); 10 | --video-focus-ring-color: var(--focus-color); 11 | --video-border-radius: 2px; 12 | 13 | /* 👉 https://vidstack.io/docs/player/components/layouts/default#css-variables for more. */ 14 | } 15 | 16 | .player[data-view-type='audio'] media-poster { 17 | display: none; 18 | } 19 | 20 | .player[data-view-type='video'] { 21 | aspect-ratio: 16 /9; 22 | } 23 | 24 | .src-buttons { 25 | display: flex; 26 | align-items: center; 27 | justify-content: space-evenly; 28 | margin-top: 40px; 29 | margin-inline: auto; 30 | max-width: 300px; 31 | } 32 | -------------------------------------------------------------------------------- /player/web-components/css/README.md: -------------------------------------------------------------------------------- 1 | # Player: Web Components (CSS) 2 | 3 | This example demonstrates setting up your custom video player layout with CSS using Vidstack Player 4 | Web Components. 5 | 6 | The CSS option we're building on provides you with a minimal starting point and completely 7 | unstyled components. All components including the player itself provide styling hooks via data 8 | attributes and support animations. This option is best when you want to build your player yourself 9 | from scratch using vanilla CSS. 10 | 11 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)][stackblitz-demo] 12 | 13 | [stackblitz-demo]: https://stackblitz.com/fork/github/vidstack/examples/tree/main/player/web-components/css?title=Vidstack%20Player%20-%20Web%20Components%20%28CSS%29&file=src/main.ts&showSidebar=1 14 | -------------------------------------------------------------------------------- /player/react/default-layout/README.md: -------------------------------------------------------------------------------- 1 | # Player: React (Default Layout) 2 | 3 | This example demonstrates setting up and customizing the Default Layout using Vidstack Player React. 4 | 5 | The [Default Layout][default-layout] is our production-ready player UI. If you're looking for 6 | something pre-designed and ready out of the box then this is the best option. You can easily 7 | customize the icons, branding, colors, and components to your liking. 8 | 9 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)][stackblitz-demo] 10 | 11 | [default-layout]: https://vidstack.io/docs/player/components/layouts/default-layout 12 | [stackblitz-demo]: https://stackblitz.com/fork/github/vidstack/examples/tree/main/player/react/default-layout?title=Vidstack%20Player%20-%20React%20%28Default%20Layout%29&file=src/main.ts&showSidebar=1 13 | -------------------------------------------------------------------------------- /player/web-components/default-theme/README.md: -------------------------------------------------------------------------------- 1 | # Player: Web Components (Default Theme) 2 | 3 | This example demonstrates setting up an audio and video layout by customizing the Default Theme 4 | using Vidstack Player Web Components. 5 | 6 | The Default Theme is best when you want to build your own player but you don't want to 7 | design each component from zero. Our default styles have been built to be extremely easy to 8 | customize! We provide the shell and base styles and you provide the content and customization. 9 | 10 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)][stackblitz-demo] 11 | 12 | [stackblitz-demo]: https://stackblitz.com/fork/github/vidstack/examples/tree/main/player/web-components/default-theme?title=Vidstack%20Player%20-%20Web%20Components%20%28Default%20Theme%29&file=src/main.ts&showSidebar=1 13 | -------------------------------------------------------------------------------- /player/solid/default-theme/src/components/buttons/play-button.tsx: -------------------------------------------------------------------------------- 1 | import type { TooltipPlacement } from 'vidstack'; 2 | 3 | import { Tooltip } from '../tooltip'; 4 | 5 | export function PlayButton(props: PlayButtonProps) { 6 | return ( 7 | 11 | 12 | 13 | 14 | } 15 | contentSlot={ 16 | <> 17 | Play 18 | Pause 19 | 20 | } 21 | /> 22 | ); 23 | } 24 | 25 | export interface PlayButtonProps { 26 | tooltipPlacement: TooltipPlacement; 27 | } 28 | -------------------------------------------------------------------------------- /player/svelte/css/src/components/sliders/SliderThumb.svelte: -------------------------------------------------------------------------------- 1 |
2 | 3 | 31 | -------------------------------------------------------------------------------- /player/svelte/css/src/components/menus/SettingsMenu.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | Settings 15 | 16 | 17 | 27 | -------------------------------------------------------------------------------- /player/solid/default-theme/src/components/layouts/audio-layout.module.css: -------------------------------------------------------------------------------- 1 | .controls { 2 | border-radius: var(--media-border-radius); 3 | } 4 | 5 | media-player[data-focus]:not([data-playing]) .controls { 6 | box-shadow: var(--media-focus-ring); 7 | } 8 | 9 | .controls media-time-slider { 10 | --media-slider-height: 36px; 11 | --media-slider-preview-offset: 8px; 12 | } 13 | 14 | .controls :global(.vds-time-group) { 15 | margin-left: 8px; 16 | } 17 | 18 | .controls media-volume-slider { 19 | --media-slider-width: 72px; 20 | --media-slider-height: 40px; 21 | --media-slider-preview-offset: 40px; 22 | margin-left: 1.5px; 23 | margin-right: 8px; 24 | } 25 | 26 | .controlsGroup { 27 | display: flex; 28 | align-items: center; 29 | width: 100%; 30 | } 31 | 32 | .controlsGroup:nth-child(2) { 33 | padding-inline: 8px; 34 | padding-bottom: 8px; 35 | } 36 | -------------------------------------------------------------------------------- /player/solid/tailwind-css/src/components/menus/settings-menu.tsx: -------------------------------------------------------------------------------- 1 | import type { MenuPlacement, TooltipPlacement } from 'vidstack'; 2 | 3 | import { CaptionSubmenu } from './caption-submenu'; 4 | import { Menu } from './menu'; 5 | 6 | export function SettingsMenu(props: SettingsMenuProps) { 7 | return ( 8 | 15 | } 16 | tooltipPlacement={props.tooltipPlacement} 17 | tooltipSlot={Settings} 18 | > 19 | 20 | 21 | ); 22 | } 23 | 24 | export interface SettingsMenuProps { 25 | placement: MenuPlacement; 26 | tooltipPlacement: TooltipPlacement; 27 | } 28 | -------------------------------------------------------------------------------- /player/vue/default-layout/README.md: -------------------------------------------------------------------------------- 1 | # Player: Vue (Default Layout) 2 | 3 | This example demonstrates setting up and customizing the Default Layout using Vidstack Player 4 | Web Components with Vue. 5 | 6 | The [Default Layout][default-layout] is our production-ready player UI. If you're looking for 7 | something pre-designed and ready out of the box then this is the best option. You can easily 8 | customize the icons, branding, colors, and components to your liking. 9 | 10 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)][stackblitz-demo] 11 | 12 | [default-layout]: https://vidstack.io/docs/wc/player/components/layouts/default-layout 13 | [stackblitz-demo]: https://stackblitz.com/fork/github/vidstack/examples/tree/main/player/vue/default-layout?title=Vidstack%20Player%20-%20Vue%20%28Default%20Layout%29&file=src/main.ts&showSidebar=1 14 | -------------------------------------------------------------------------------- /player/solid/default-layout/README.md: -------------------------------------------------------------------------------- 1 | # Player: Solid (Default Layout) 2 | 3 | This example demonstrates setting up and customizing the Default Layout using Vidstack Player 4 | Web Components with Solid JS. 5 | 6 | The [Default Layout][default-layout] is our production-ready player UI. If you're looking for 7 | something pre-designed and ready out of the box then this is the best option. You can easily 8 | customize the icons, branding, colors, and components to your liking. 9 | 10 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)][stackblitz-demo] 11 | 12 | [default-layout]: https://vidstack.io/docs/wc/player/components/layouts/default-layout 13 | [stackblitz-demo]: https://stackblitz.com/fork/github/vidstack/examples/tree/main/player/solid/default-layout?title=Vidstack%20Player%20-%20Solid%20%28Default%20Layout%29&file=src/main.ts&showSidebar=1 14 | -------------------------------------------------------------------------------- /player/solid/tailwind-css/src/components/tooltip.tsx: -------------------------------------------------------------------------------- 1 | import type { JSX } from 'solid-js'; 2 | import type { TooltipPlacement } from 'vidstack'; 3 | 4 | export function Tooltip(props: TooltipProps) { 5 | return ( 6 | 7 | {props.triggerSlot} 8 | 12 | {props.contentSlot} 13 | 14 | 15 | ); 16 | } 17 | 18 | export interface TooltipProps { 19 | triggerSlot: JSX.Element; 20 | contentSlot: JSX.Element; 21 | placement: TooltipPlacement; 22 | } 23 | -------------------------------------------------------------------------------- /player/vue/default-theme/src/components/buttons/PIPButton.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 26 | -------------------------------------------------------------------------------- /player/svelte/default-layout/README.md: -------------------------------------------------------------------------------- 1 | # Player: Svelte (Default Layout) 2 | 3 | This example demonstrates setting up and customizing the Default Layout using Vidstack Player 4 | Web Components with Svelte. 5 | 6 | The [Default Layout][default-layout] is our production-ready player UI. If you're looking for 7 | something pre-designed and ready out of the box then this is the best option. You can easily 8 | customize the icons, branding, colors, and components to your liking. 9 | 10 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)][stackblitz-demo] 11 | 12 | [default-layout]: https://vidstack.io/docs/wc/player/components/layouts/default-layout 13 | [stackblitz-demo]: https://stackblitz.com/fork/github/vidstack/examples/tree/main/player/svelte/default-layout?title=Vidstack%20Player%20-%20Svelte%20%28Default%20Layout%29&file=src/main.ts&showSidebar=1 14 | -------------------------------------------------------------------------------- /player/vue/default-theme/src/components/buttons/CaptionButton.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 26 | -------------------------------------------------------------------------------- /player/svelte/tailwind-css/src/components/sliders/VolumeSlider.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 9 | 10 |
13 |
16 |
17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /player/vue/default-theme/src/components/buttons/FullscreenButton.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 26 | -------------------------------------------------------------------------------- /player/vue/tailwind-css/src/components/Tooltip.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 22 | 23 | 28 | --------------------------------------------------------------------------------