├── .editorconfig ├── .eslintrc.json ├── .gitattributes ├── .github ├── ARCHITECTURE.md ├── CONTRIBUTING.md ├── PROVIDERS.md ├── PULL_REQUEST_TEMPLATE.md └── UI.md ├── .gitignore ├── .husky ├── .gitignore └── pre-commit ├── .nvmrc ├── .scripts ├── preinstall.js ├── release.js ├── run-build.js ├── run-example.js ├── run-sandbox.js └── sandbox-create.js ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── docs ├── README.md ├── babel.config.js ├── docs │ ├── getting-started │ │ ├── controls.md │ │ ├── i18n.md │ │ ├── installation.md │ │ ├── player.md │ │ ├── providers.md │ │ ├── settings.md │ │ ├── styling.md │ │ └── ui.md │ └── welcome │ │ ├── contributing.md │ │ ├── design-principles.md │ │ ├── introduction.md │ │ └── release-notes.md ├── docusaurus.config.js ├── helpers │ └── components-sidebar.cjs ├── now.json ├── package-lock.json ├── package.json ├── sidebars.cjs ├── src │ ├── components │ │ ├── demo │ │ │ ├── CodePreview.js │ │ │ ├── DemoPlayer.js │ │ │ ├── LoadableDemoPlayer.js │ │ │ ├── Prism.js │ │ │ ├── codeBuilder.js │ │ │ └── editorPanel.js │ │ └── players │ │ │ ├── BasicPlayer.tsx │ │ │ ├── ClickPlayer.tsx │ │ │ ├── CustomControlsPlayer.tsx │ │ │ ├── CustomSettingsPlayer.tsx │ │ │ ├── DefaultControlsPlayer.tsx │ │ │ ├── IntroPlayer.tsx │ │ │ ├── LoadableBasicPlayer.tsx │ │ │ ├── LoadableClickPlayer.tsx │ │ │ ├── LoadableCustomControlsPlayer.tsx │ │ │ ├── LoadableCustomSettingsPlayer.tsx │ │ │ ├── LoadableDefaultControlsPlayer.tsx │ │ │ ├── LoadableIntroPlayer.tsx │ │ │ ├── TapSidesToSeek.module.css │ │ │ └── TapSidesToSeek.tsx │ ├── css │ │ ├── admonitions.css │ │ └── custom.css │ ├── pages │ │ ├── demo.js │ │ └── demo.module.css │ ├── seo.js │ └── sw.js ├── static │ ├── .nojekyll │ ├── img │ │ ├── favicon.ico │ │ ├── icons │ │ │ ├── icon-128x128.png │ │ │ ├── icon-144x144.png │ │ │ ├── icon-152x152.png │ │ │ ├── icon-192x192.png │ │ │ ├── icon-384x384.png │ │ │ ├── icon-512x512.png │ │ │ ├── icon-72x72.png │ │ │ └── icon-96x96.png │ │ ├── prop-doc.png │ │ ├── social.png │ │ ├── vime.png │ │ └── vime.svg │ └── manifest.json ├── versioned_docs │ ├── version-1.x │ │ ├── complete │ │ │ ├── api │ │ │ │ ├── player.md │ │ │ │ ├── plugin-role.md │ │ │ │ ├── plugin.md │ │ │ │ ├── plugins-manager.md │ │ │ │ └── registry.md │ │ │ ├── customization.md │ │ │ └── setup.md │ │ ├── guides │ │ │ └── loading-media.md │ │ ├── integrations │ │ │ ├── sapper.md │ │ │ └── svelte.md │ │ ├── lite │ │ │ ├── api │ │ │ │ ├── embed.md │ │ │ │ └── player.md │ │ │ ├── setup.md │ │ │ └── usage.md │ │ ├── plugins │ │ │ ├── api │ │ │ │ ├── action-display.md │ │ │ │ ├── boot.md │ │ │ │ ├── captions.md │ │ │ │ ├── click-to-play.md │ │ │ │ ├── controls │ │ │ │ │ ├── control-group.md │ │ │ │ │ ├── control │ │ │ │ │ │ ├── big-playback-control.md │ │ │ │ │ │ ├── caption-control.md │ │ │ │ │ │ ├── control-interface.md │ │ │ │ │ │ ├── control-new-line.md │ │ │ │ │ │ ├── control-spacer.md │ │ │ │ │ │ ├── control.md │ │ │ │ │ │ ├── fullscreen-control.md │ │ │ │ │ │ ├── live-indicator.md │ │ │ │ │ │ ├── mute-control.md │ │ │ │ │ │ ├── pip-control.md │ │ │ │ │ │ ├── playback-control.md │ │ │ │ │ │ ├── scrubber-control.md │ │ │ │ │ │ ├── seek-backward-control.md │ │ │ │ │ │ ├── seek-control.md │ │ │ │ │ │ ├── seek-forward-control.md │ │ │ │ │ │ ├── settings-control.md │ │ │ │ │ │ ├── time │ │ │ │ │ │ │ ├── current-time.md │ │ │ │ │ │ │ ├── end-time.md │ │ │ │ │ │ │ ├── time-divider.md │ │ │ │ │ │ │ ├── time-progress.md │ │ │ │ │ │ │ └── time.md │ │ │ │ │ │ ├── toggle-control.md │ │ │ │ │ │ └── volume-control.md │ │ │ │ │ └── controls.md │ │ │ │ ├── dbl-click-fullscreen.md │ │ │ │ ├── icons.md │ │ │ │ ├── keyboard │ │ │ │ │ ├── keyboard-shortcut.md │ │ │ │ │ └── keyboard.md │ │ │ │ ├── poster.md │ │ │ │ ├── scrim.md │ │ │ │ ├── settings │ │ │ │ │ ├── menu │ │ │ │ │ │ ├── menu-control.md │ │ │ │ │ │ ├── menu-item-radio.md │ │ │ │ │ │ ├── menu-item.md │ │ │ │ │ │ ├── menu-options.md │ │ │ │ │ │ ├── menu.md │ │ │ │ │ │ └── submenu │ │ │ │ │ │ │ ├── select-submenu.md │ │ │ │ │ │ │ └── submenu.md │ │ │ │ │ └── settings.md │ │ │ │ ├── spinner.md │ │ │ │ └── tooltips │ │ │ │ │ ├── tooltip.md │ │ │ │ │ └── tooltips.md │ │ │ ├── getting-started.md │ │ │ └── how-it-works.md │ │ ├── preview │ │ │ ├── api.md │ │ │ └── setup.md │ │ ├── standard │ │ │ ├── api │ │ │ │ ├── media-type.md │ │ │ │ ├── player-state.md │ │ │ │ ├── player.md │ │ │ │ └── video-quality.md │ │ │ ├── notes.md │ │ │ └── setup.md │ │ └── welcome │ │ │ ├── getting-started.md │ │ │ └── introduction.md │ └── version-4.x │ │ ├── components │ │ ├── core │ │ │ ├── embed.md │ │ │ ├── player.md │ │ │ └── playground.md │ │ ├── providers │ │ │ ├── audio.md │ │ │ ├── dailymotion.md │ │ │ ├── dash.md │ │ │ ├── faketube.md │ │ │ ├── file.md │ │ │ ├── hls.md │ │ │ ├── video.md │ │ │ ├── vimeo.md │ │ │ └── youtube.md │ │ └── ui │ │ │ ├── captions.md │ │ │ ├── click-to-play.md │ │ │ ├── controls │ │ │ ├── caption-control.md │ │ │ ├── control-group.md │ │ │ ├── control-spacer.md │ │ │ ├── control.md │ │ │ ├── controls.md │ │ │ ├── default-controls.md │ │ │ ├── fullscreen-control.md │ │ │ ├── mute-control.md │ │ │ ├── pip-control.md │ │ │ ├── playback-control.md │ │ │ ├── scrubber-control.md │ │ │ ├── settings-control.md │ │ │ └── volume-control.md │ │ │ ├── dbl-click-fullscreen.md │ │ │ ├── default-ui.md │ │ │ ├── icon.md │ │ │ ├── icons.md │ │ │ ├── live-indicator.md │ │ │ ├── poster.md │ │ │ ├── scrim.md │ │ │ ├── settings │ │ │ ├── default-settings.md │ │ │ ├── menu-item.md │ │ │ ├── menu-radio-group.md │ │ │ ├── menu-radio.md │ │ │ ├── menu.md │ │ │ ├── settings.md │ │ │ └── submenu.md │ │ │ ├── skeleton.md │ │ │ ├── slider.md │ │ │ ├── spinner.md │ │ │ ├── time │ │ │ ├── current-time.md │ │ │ ├── end-time.md │ │ │ ├── time-progress.md │ │ │ └── time.md │ │ │ ├── tooltip.md │ │ │ └── ui.md │ │ ├── getting-started │ │ ├── controls.md │ │ ├── i18n.md │ │ ├── installation.md │ │ ├── player.md │ │ ├── providers.md │ │ ├── settings.md │ │ ├── styling.md │ │ └── ui.md │ │ ├── src │ │ ├── components │ │ │ ├── demo │ │ │ │ ├── CodePreview.js │ │ │ │ ├── DemoPlayer.js │ │ │ │ ├── LoadableDemoPlayer.js │ │ │ │ ├── Prism.js │ │ │ │ ├── codeBuilder.js │ │ │ │ └── editorPanel.js │ │ │ └── players │ │ │ │ ├── BasicPlayer.tsx │ │ │ │ ├── ClickPlayer.tsx │ │ │ │ ├── CustomControlsPlayer.tsx │ │ │ │ ├── CustomSettingsPlayer.tsx │ │ │ │ ├── DefaultControlsPlayer.tsx │ │ │ │ ├── LoadableBasicPlayer.tsx │ │ │ │ ├── LoadableClickPlayer.tsx │ │ │ │ ├── LoadableCustomControlsPlayer.tsx │ │ │ │ ├── LoadableCustomSettingsPlayer.tsx │ │ │ │ ├── LoadableDefaultControlsPlayer.tsx │ │ │ │ ├── TapSidesToSeek.module.css │ │ │ │ └── TapSidesToSeek.tsx │ │ └── seo.js │ │ └── welcome │ │ ├── contributing.md │ │ ├── design-principles.md │ │ └── introduction.md ├── versioned_sidebars │ ├── version-1.x-sidebars.json │ └── version-4.x-sidebars.json └── versions.json ├── examples ├── angular │ ├── .browserslistrc │ ├── CHANGELOG.md │ ├── README.md │ ├── angular.json │ ├── package.json │ ├── src │ │ ├── app │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ └── tap-sides-to-seek │ │ │ │ ├── tap-sides-to-seek.component.html │ │ │ │ └── tap-sides-to-seek.component.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ └── styles.css │ ├── tsconfig.app.json │ ├── tsconfig.base.json │ └── tsconfig.json ├── html │ ├── README.md │ ├── index.html │ └── package.json ├── react │ ├── CHANGELOG.md │ ├── README.md │ ├── craco.config.js │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── TapSidesToSeek.css │ │ ├── TapSidesToSeek.tsx │ │ ├── index.css │ │ ├── index.tsx │ │ └── react-app-env.d.ts │ └── tsconfig.json ├── rollup │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── public │ │ ├── global.css │ │ └── index.html │ ├── rollup.config.js │ └── src │ │ └── index.js ├── stencil │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── assets │ │ │ └── icon │ │ │ │ ├── favicon.ico │ │ │ │ └── icon.png │ │ ├── components.d.ts │ │ ├── components │ │ │ ├── app-home │ │ │ │ ├── app-home.css │ │ │ │ └── app-home.tsx │ │ │ ├── app-root │ │ │ │ └── app-root.tsx │ │ │ └── tap-sides-to-seek │ │ │ │ ├── tap-sides-to-seek.css │ │ │ │ └── tap-sides-to-seek.tsx │ │ ├── global │ │ │ ├── app.css │ │ │ └── app.ts │ │ ├── index.html │ │ ├── index.ts │ │ └── manifest.json │ ├── stencil.config.ts │ └── tsconfig.json ├── svelte │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.png │ │ ├── global.css │ │ └── index.html │ ├── src │ │ ├── App.svelte │ │ ├── TapSidesToSeek.svelte │ │ └── main.ts │ ├── tsconfig.json │ └── webpack.config.js ├── vue-next │ ├── CHANGELOG.md │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── src │ │ ├── App.vue │ │ ├── TapSidesToSeek.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── main.ts │ │ └── shims-vue.d.ts │ └── tsconfig.json ├── vue │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── src │ │ ├── App.vue │ │ ├── TapSidesToSeek.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── main.ts │ │ ├── shims-tsx.d.ts │ │ └── shims-vue.d.ts │ └── tsconfig.json └── webpack │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── public │ ├── global.css │ └── index.html │ ├── src │ └── index.js │ └── webpack.config.js ├── package.json ├── packages ├── angular │ ├── .scripts │ │ ├── prepublish.mjs │ │ └── validate.cjs │ ├── CHANGELOG.md │ ├── README.md │ ├── angular.json │ ├── package.json │ ├── projects │ │ └── vime │ │ │ ├── README.md │ │ │ ├── ng-package.json │ │ │ ├── package.json │ │ │ ├── src │ │ │ ├── VimeComponent.ts │ │ │ ├── lib.ts │ │ │ └── public-api.ts │ │ │ ├── tsconfig.lib.json │ │ │ └── tsconfig.lib.prod.json │ └── tsconfig.json ├── core │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── components.d.ts │ │ ├── components │ │ │ ├── core │ │ │ │ ├── embed │ │ │ │ │ ├── embed.css │ │ │ │ │ ├── embed.tsx │ │ │ │ │ └── usage │ │ │ │ │ │ ├── angular.md │ │ │ │ │ │ ├── html.md │ │ │ │ │ │ ├── react.md │ │ │ │ │ │ ├── stencil.md │ │ │ │ │ │ ├── svelte.md │ │ │ │ │ │ └── vue.md │ │ │ │ └── player │ │ │ │ │ ├── LazyLoader.ts │ │ │ │ │ ├── MediaPlayer.ts │ │ │ │ │ ├── MediaType.ts │ │ │ │ │ ├── PlayerDispatcher.ts │ │ │ │ │ ├── PlayerEvents.ts │ │ │ │ │ ├── PlayerLogger.ts │ │ │ │ │ ├── PlayerMethods.ts │ │ │ │ │ ├── PlayerProps.ts │ │ │ │ │ ├── ViewType.ts │ │ │ │ │ ├── findPlayer.ts │ │ │ │ │ ├── fullscreen │ │ │ │ │ └── FullscreenController.ts │ │ │ │ │ ├── lang │ │ │ │ │ ├── Translation.ts │ │ │ │ │ └── en.ts │ │ │ │ │ ├── player.css │ │ │ │ │ ├── player.tsx │ │ │ │ │ ├── usage │ │ │ │ │ ├── angular.md │ │ │ │ │ ├── html.md │ │ │ │ │ ├── react.md │ │ │ │ │ ├── stencil.md │ │ │ │ │ ├── svelte.md │ │ │ │ │ └── vue.md │ │ │ │ │ ├── withAutopause.ts │ │ │ │ │ ├── withComponentRegistry.ts │ │ │ │ │ ├── withPlayerContext.ts │ │ │ │ │ ├── withPlayerEvents.ts │ │ │ │ │ └── withPlayerScheduler.ts │ │ │ ├── providers │ │ │ │ ├── MediaProvider.ts │ │ │ │ ├── Provider.ts │ │ │ │ ├── ProviderConnect.ts │ │ │ │ ├── ProviderDispatcher.ts │ │ │ │ ├── ProviderProps.ts │ │ │ │ ├── adapters │ │ │ │ │ ├── AudioAdapter.ts │ │ │ │ │ ├── CaptionsAdapter.ts │ │ │ │ │ ├── FullscreenAdapter.ts │ │ │ │ │ └── PiPAdapter.ts │ │ │ │ ├── audio │ │ │ │ │ ├── audio.tsx │ │ │ │ │ └── usage │ │ │ │ │ │ ├── angular.md │ │ │ │ │ │ ├── html.md │ │ │ │ │ │ ├── react.md │ │ │ │ │ │ ├── stencil.md │ │ │ │ │ │ ├── svelte.md │ │ │ │ │ │ └── vue.md │ │ │ │ ├── dailymotion │ │ │ │ │ ├── DailymotionCommand.ts │ │ │ │ │ ├── DailymotionEvent.ts │ │ │ │ │ ├── DailymotionMessage.ts │ │ │ │ │ ├── DailymotionParams.ts │ │ │ │ │ ├── dailymotion.css │ │ │ │ │ ├── dailymotion.tsx │ │ │ │ │ └── usage │ │ │ │ │ │ ├── angular.md │ │ │ │ │ │ ├── html.md │ │ │ │ │ │ ├── react.md │ │ │ │ │ │ ├── stencil.md │ │ │ │ │ │ ├── svelte.md │ │ │ │ │ │ └── vue.md │ │ │ │ ├── dash │ │ │ │ │ ├── dash.css │ │ │ │ │ ├── dash.tsx │ │ │ │ │ └── usage │ │ │ │ │ │ ├── angular.md │ │ │ │ │ │ ├── html.md │ │ │ │ │ │ ├── react.md │ │ │ │ │ │ ├── stencil.md │ │ │ │ │ │ ├── svelte.md │ │ │ │ │ │ └── vue.md │ │ │ │ ├── file │ │ │ │ │ ├── MediaFileProvider.ts │ │ │ │ │ ├── MediaResource.ts │ │ │ │ │ ├── VideoFullscreenController.ts │ │ │ │ │ ├── VideoPresentationController.ts │ │ │ │ │ ├── WebkitPresentationMode.ts │ │ │ │ │ ├── file.css │ │ │ │ │ ├── file.tsx │ │ │ │ │ └── utils.ts │ │ │ │ ├── hls │ │ │ │ │ ├── hls.tsx │ │ │ │ │ └── usage │ │ │ │ │ │ ├── angular.md │ │ │ │ │ │ ├── html.md │ │ │ │ │ │ ├── react.md │ │ │ │ │ │ ├── stencil.md │ │ │ │ │ │ ├── svelte.md │ │ │ │ │ │ └── vue.md │ │ │ │ ├── templates │ │ │ │ │ └── _provider.tsx │ │ │ │ ├── video │ │ │ │ │ ├── usage │ │ │ │ │ │ ├── angular.md │ │ │ │ │ │ ├── html.md │ │ │ │ │ │ ├── react.md │ │ │ │ │ │ ├── stencil.md │ │ │ │ │ │ ├── svelte.md │ │ │ │ │ │ └── vue.md │ │ │ │ │ └── video.tsx │ │ │ │ ├── vimeo │ │ │ │ │ ├── VimeoCommand.ts │ │ │ │ │ ├── VimeoEvent.ts │ │ │ │ │ ├── VimeoMessage.ts │ │ │ │ │ ├── VimeoParams.ts │ │ │ │ │ ├── usage │ │ │ │ │ │ ├── angular.md │ │ │ │ │ │ ├── html.md │ │ │ │ │ │ ├── react.md │ │ │ │ │ │ ├── stencil.md │ │ │ │ │ │ ├── svelte.md │ │ │ │ │ │ └── vue.md │ │ │ │ │ ├── vimeo.css │ │ │ │ │ └── vimeo.tsx │ │ │ │ ├── withProviderContext.ts │ │ │ │ └── youtube │ │ │ │ │ ├── YouTubeCommand.ts │ │ │ │ │ ├── YouTubeEvent.ts │ │ │ │ │ ├── YouTubeMessage.ts │ │ │ │ │ ├── YouTubeParams.ts │ │ │ │ │ ├── YouTubePlaybackQuality.ts │ │ │ │ │ ├── YouTubePlayerState.ts │ │ │ │ │ ├── usage │ │ │ │ │ ├── angular.md │ │ │ │ │ ├── html.md │ │ │ │ │ ├── react.md │ │ │ │ │ ├── stencil.md │ │ │ │ │ ├── svelte.md │ │ │ │ │ └── vue.md │ │ │ │ │ ├── youtube.css │ │ │ │ │ └── youtube.tsx │ │ │ └── ui │ │ │ │ ├── captions │ │ │ │ ├── captions.css │ │ │ │ ├── captions.png │ │ │ │ ├── captions.tsx │ │ │ │ └── usage │ │ │ │ │ ├── angular.md │ │ │ │ │ ├── html.md │ │ │ │ │ ├── react.md │ │ │ │ │ ├── stencil.md │ │ │ │ │ ├── svelte.md │ │ │ │ │ └── vue.md │ │ │ │ ├── click-to-play │ │ │ │ ├── click-to-play.css │ │ │ │ ├── click-to-play.tsx │ │ │ │ └── usage │ │ │ │ │ ├── angular.md │ │ │ │ │ ├── html.md │ │ │ │ │ ├── react.md │ │ │ │ │ ├── stencil.md │ │ │ │ │ ├── svelte.md │ │ │ │ │ └── vue.md │ │ │ │ ├── controls │ │ │ │ ├── caption-control │ │ │ │ │ ├── caption-control.css │ │ │ │ │ ├── caption-control.png │ │ │ │ │ ├── caption-control.tsx │ │ │ │ │ └── usage │ │ │ │ │ │ ├── angular.md │ │ │ │ │ │ ├── html.md │ │ │ │ │ │ ├── react.md │ │ │ │ │ │ ├── stencil.md │ │ │ │ │ │ ├── svelte.md │ │ │ │ │ │ └── vue.md │ │ │ │ ├── control-group │ │ │ │ │ ├── control-group.css │ │ │ │ │ ├── control-group.png │ │ │ │ │ ├── control-group.tsx │ │ │ │ │ └── usage │ │ │ │ │ │ ├── angular.md │ │ │ │ │ │ ├── html.md │ │ │ │ │ │ ├── react.md │ │ │ │ │ │ ├── stencil.md │ │ │ │ │ │ ├── svelte.md │ │ │ │ │ │ └── vue.md │ │ │ │ ├── control-spacer │ │ │ │ │ ├── control-spacer.css │ │ │ │ │ ├── control-spacer.png │ │ │ │ │ ├── control-spacer.tsx │ │ │ │ │ └── usage │ │ │ │ │ │ ├── angular.md │ │ │ │ │ │ ├── html.md │ │ │ │ │ │ ├── react.md │ │ │ │ │ │ ├── stencil.md │ │ │ │ │ │ ├── svelte.md │ │ │ │ │ │ └── vue.md │ │ │ │ ├── control │ │ │ │ │ ├── KeyboardControl.ts │ │ │ │ │ ├── control.css │ │ │ │ │ ├── control.png │ │ │ │ │ ├── control.tsx │ │ │ │ │ └── usage │ │ │ │ │ │ ├── angular.md │ │ │ │ │ │ ├── html.md │ │ │ │ │ │ ├── react.md │ │ │ │ │ │ ├── stencil.md │ │ │ │ │ │ ├── svelte.md │ │ │ │ │ │ ├── vue 2.md │ │ │ │ │ │ └── vue 3.md │ │ │ │ ├── controls │ │ │ │ │ ├── controls.css │ │ │ │ │ ├── controls.png │ │ │ │ │ ├── controls.tsx │ │ │ │ │ ├── usage │ │ │ │ │ │ ├── angular.md │ │ │ │ │ │ ├── html.md │ │ │ │ │ │ ├── react.md │ │ │ │ │ │ ├── stencil.md │ │ │ │ │ │ ├── svelte.md │ │ │ │ │ │ └── vue.md │ │ │ │ │ └── withControlsCollisionDetection.ts │ │ │ │ ├── default-controls │ │ │ │ │ ├── default-controls.css │ │ │ │ │ ├── default-controls.tsx │ │ │ │ │ └── usage │ │ │ │ │ │ ├── angular.md │ │ │ │ │ │ ├── html.md │ │ │ │ │ │ ├── react.md │ │ │ │ │ │ ├── stencil.md │ │ │ │ │ │ ├── svelte.md │ │ │ │ │ │ └── vue.md │ │ │ │ ├── fullscreen-control │ │ │ │ │ ├── fullscreen-control.css │ │ │ │ │ ├── fullscreen-control.png │ │ │ │ │ ├── fullscreen-control.tsx │ │ │ │ │ └── usage │ │ │ │ │ │ ├── angular.md │ │ │ │ │ │ ├── html.md │ │ │ │ │ │ ├── react.md │ │ │ │ │ │ ├── stencil.md │ │ │ │ │ │ ├── svelte.md │ │ │ │ │ │ └── vue.md │ │ │ │ ├── mute-control │ │ │ │ │ ├── mute-control.png │ │ │ │ │ ├── mute-control.tsx │ │ │ │ │ └── usage │ │ │ │ │ │ ├── angular.md │ │ │ │ │ │ ├── html.md │ │ │ │ │ │ ├── react.md │ │ │ │ │ │ ├── stencil.md │ │ │ │ │ │ ├── svelte.md │ │ │ │ │ │ └── vue.md │ │ │ │ ├── pip-control │ │ │ │ │ ├── pip-control.css │ │ │ │ │ ├── pip-control.png │ │ │ │ │ ├── pip-control.tsx │ │ │ │ │ └── usage │ │ │ │ │ │ ├── angular.md │ │ │ │ │ │ ├── html.md │ │ │ │ │ │ ├── react.md │ │ │ │ │ │ ├── stencil.md │ │ │ │ │ │ ├── svelte.md │ │ │ │ │ │ └── vue.md │ │ │ │ ├── playback-control │ │ │ │ │ ├── playback-control.png │ │ │ │ │ ├── playback-control.tsx │ │ │ │ │ └── usage │ │ │ │ │ │ ├── angular.md │ │ │ │ │ │ ├── html.md │ │ │ │ │ │ ├── react.md │ │ │ │ │ │ ├── stencil.md │ │ │ │ │ │ ├── svelte.md │ │ │ │ │ │ └── vue.md │ │ │ │ ├── scrubber-control │ │ │ │ │ ├── scrubber-control.css │ │ │ │ │ ├── scrubber-control.png │ │ │ │ │ ├── scrubber-control.tsx │ │ │ │ │ └── usage │ │ │ │ │ │ ├── angular.md │ │ │ │ │ │ ├── html.md │ │ │ │ │ │ ├── react.md │ │ │ │ │ │ ├── stencil.md │ │ │ │ │ │ ├── svelte.md │ │ │ │ │ │ └── vue.md │ │ │ │ ├── settings-control │ │ │ │ │ ├── settings-control.css │ │ │ │ │ ├── settings-control.png │ │ │ │ │ ├── settings-control.tsx │ │ │ │ │ └── usage │ │ │ │ │ │ ├── angular.md │ │ │ │ │ │ ├── html.md │ │ │ │ │ │ ├── react.md │ │ │ │ │ │ ├── stencil.md │ │ │ │ │ │ ├── svelte.md │ │ │ │ │ │ └── vue.md │ │ │ │ └── volume-control │ │ │ │ │ ├── usage │ │ │ │ │ ├── angular.md │ │ │ │ │ ├── html.md │ │ │ │ │ ├── react.md │ │ │ │ │ ├── stencil.md │ │ │ │ │ ├── svelte.md │ │ │ │ │ └── vue.md │ │ │ │ │ ├── volume-control.css │ │ │ │ │ ├── volume-control.png │ │ │ │ │ └── volume-control.tsx │ │ │ │ ├── dbl-click-fullscreen │ │ │ │ ├── dbl-click-fullscreen.css │ │ │ │ ├── dbl-click-fullscreen.tsx │ │ │ │ └── usage │ │ │ │ │ ├── angular.md │ │ │ │ │ ├── html.md │ │ │ │ │ ├── react.md │ │ │ │ │ ├── stencil.md │ │ │ │ │ ├── svelte.md │ │ │ │ │ └── vue.md │ │ │ │ ├── default-ui │ │ │ │ ├── default-ui--audio.png │ │ │ │ ├── default-ui--desktop.png │ │ │ │ ├── default-ui--mobile.png │ │ │ │ ├── default-ui.css │ │ │ │ ├── default-ui.tsx │ │ │ │ └── usage │ │ │ │ │ ├── angular.md │ │ │ │ │ ├── html.md │ │ │ │ │ ├── react.md │ │ │ │ │ ├── stencil.md │ │ │ │ │ ├── svelte.md │ │ │ │ │ └── vue.md │ │ │ │ ├── icon-library │ │ │ │ ├── IconRegistry.ts │ │ │ │ ├── icon-library.tsx │ │ │ │ └── usage │ │ │ │ │ ├── angular.md │ │ │ │ │ ├── html.md │ │ │ │ │ ├── react.md │ │ │ │ │ ├── stencil.md │ │ │ │ │ ├── svelte.md │ │ │ │ │ └── vue.md │ │ │ │ ├── icon │ │ │ │ ├── icon.css │ │ │ │ ├── icon.tsx │ │ │ │ ├── requestIcon.ts │ │ │ │ └── usage │ │ │ │ │ ├── angular.md │ │ │ │ │ ├── html.md │ │ │ │ │ ├── react.md │ │ │ │ │ ├── stencil.md │ │ │ │ │ ├── svelte.md │ │ │ │ │ └── vue.md │ │ │ │ ├── live-indicator │ │ │ │ ├── live-indicator.css │ │ │ │ ├── live-indicator.png │ │ │ │ ├── live-indicator.tsx │ │ │ │ └── usage │ │ │ │ │ ├── angular.md │ │ │ │ │ ├── html.md │ │ │ │ │ ├── react.md │ │ │ │ │ ├── stencil.md │ │ │ │ │ ├── svelte.md │ │ │ │ │ └── vue.md │ │ │ │ ├── loading-screen │ │ │ │ ├── loading-screen.css │ │ │ │ ├── loading-screen.tsx │ │ │ │ └── usage │ │ │ │ │ ├── angular.md │ │ │ │ │ ├── html.md │ │ │ │ │ ├── react.md │ │ │ │ │ ├── stencil.md │ │ │ │ │ ├── svelte.md │ │ │ │ │ └── vue.md │ │ │ │ ├── poster │ │ │ │ ├── poster.css │ │ │ │ ├── poster.png │ │ │ │ ├── poster.tsx │ │ │ │ └── usage │ │ │ │ │ ├── angular.md │ │ │ │ │ ├── html.md │ │ │ │ │ ├── react.md │ │ │ │ │ ├── stencil.md │ │ │ │ │ ├── svelte.md │ │ │ │ │ └── vue.md │ │ │ │ ├── scrim │ │ │ │ ├── scrim.css │ │ │ │ ├── scrim.tsx │ │ │ │ └── usage │ │ │ │ │ ├── angular.md │ │ │ │ │ ├── html.md │ │ │ │ │ ├── react.md │ │ │ │ │ ├── stencil.md │ │ │ │ │ ├── svelte.md │ │ │ │ │ └── vue.md │ │ │ │ ├── settings │ │ │ │ ├── default-settings │ │ │ │ │ ├── default-settings.css │ │ │ │ │ ├── default-settings.png │ │ │ │ │ ├── default-settings.tsx │ │ │ │ │ └── usage │ │ │ │ │ │ ├── angular.md │ │ │ │ │ │ ├── html.md │ │ │ │ │ │ ├── react.md │ │ │ │ │ │ ├── stencil.md │ │ │ │ │ │ ├── svelte.md │ │ │ │ │ │ └── vue.md │ │ │ │ ├── menu-item │ │ │ │ │ ├── menu-item.css │ │ │ │ │ ├── menu-item.png │ │ │ │ │ ├── menu-item.tsx │ │ │ │ │ └── usage │ │ │ │ │ │ ├── angular.md │ │ │ │ │ │ ├── html.md │ │ │ │ │ │ ├── react.md │ │ │ │ │ │ ├── stencil.md │ │ │ │ │ │ ├── svelte.md │ │ │ │ │ │ └── vue.md │ │ │ │ ├── menu-radio-group │ │ │ │ │ ├── menu-radio-group.png │ │ │ │ │ ├── menu-radio-group.tsx │ │ │ │ │ └── usage │ │ │ │ │ │ ├── angular.md │ │ │ │ │ │ ├── html.md │ │ │ │ │ │ ├── react.md │ │ │ │ │ │ ├── stencil.md │ │ │ │ │ │ ├── svelte.md │ │ │ │ │ │ └── vue.md │ │ │ │ ├── menu-radio │ │ │ │ │ ├── menu-radio.png │ │ │ │ │ ├── menu-radio.tsx │ │ │ │ │ └── usage │ │ │ │ │ │ ├── angular.md │ │ │ │ │ │ ├── html.md │ │ │ │ │ │ ├── react.md │ │ │ │ │ │ ├── stencil.md │ │ │ │ │ │ ├── svelte.md │ │ │ │ │ │ └── vue.md │ │ │ │ ├── menu │ │ │ │ │ ├── menu.css │ │ │ │ │ ├── menu.png │ │ │ │ │ ├── menu.tsx │ │ │ │ │ ├── menuItemHunter.ts │ │ │ │ │ └── usage │ │ │ │ │ │ ├── angular.md │ │ │ │ │ │ ├── html.md │ │ │ │ │ │ ├── react.md │ │ │ │ │ │ ├── stencil.md │ │ │ │ │ │ ├── svelte.md │ │ │ │ │ │ └── vue.md │ │ │ │ ├── settings │ │ │ │ │ ├── SettingsController.ts │ │ │ │ │ ├── settings.css │ │ │ │ │ ├── settings.png │ │ │ │ │ ├── settings.tsx │ │ │ │ │ └── usage │ │ │ │ │ │ ├── angular.md │ │ │ │ │ │ ├── html.md │ │ │ │ │ │ ├── react.md │ │ │ │ │ │ ├── stencil.md │ │ │ │ │ │ ├── svelte.md │ │ │ │ │ │ └── vue.md │ │ │ │ └── submenu │ │ │ │ │ ├── submenu.png │ │ │ │ │ ├── submenu.tsx │ │ │ │ │ └── usage │ │ │ │ │ ├── angular.md │ │ │ │ │ ├── html.md │ │ │ │ │ ├── react.md │ │ │ │ │ ├── stencil.md │ │ │ │ │ ├── svelte.md │ │ │ │ │ └── vue.md │ │ │ │ ├── skeleton │ │ │ │ ├── skeleton.css │ │ │ │ ├── skeleton.tsx │ │ │ │ └── usage │ │ │ │ │ ├── angular.md │ │ │ │ │ ├── html.md │ │ │ │ │ ├── react.md │ │ │ │ │ ├── stencil.md │ │ │ │ │ ├── svelte.md │ │ │ │ │ └── vue.md │ │ │ │ ├── slider │ │ │ │ ├── slider.css │ │ │ │ ├── slider.png │ │ │ │ ├── slider.tsx │ │ │ │ └── usage │ │ │ │ │ ├── angular.md │ │ │ │ │ ├── html.md │ │ │ │ │ ├── react.md │ │ │ │ │ ├── stencil.md │ │ │ │ │ ├── svelte.md │ │ │ │ │ └── vue.md │ │ │ │ ├── spinner │ │ │ │ ├── spinner.css │ │ │ │ ├── spinner.png │ │ │ │ ├── spinner.tsx │ │ │ │ └── usage │ │ │ │ │ ├── angular.md │ │ │ │ │ ├── html.md │ │ │ │ │ ├── react.md │ │ │ │ │ ├── stencil.md │ │ │ │ │ ├── svelte.md │ │ │ │ │ └── vue.md │ │ │ │ ├── time │ │ │ │ ├── current-time │ │ │ │ │ ├── current-time.css │ │ │ │ │ ├── current-time.png │ │ │ │ │ ├── current-time.tsx │ │ │ │ │ └── usage │ │ │ │ │ │ ├── angular.md │ │ │ │ │ │ ├── html.md │ │ │ │ │ │ ├── react.md │ │ │ │ │ │ ├── stencil.md │ │ │ │ │ │ ├── svelte.md │ │ │ │ │ │ └── vue.md │ │ │ │ ├── end-time │ │ │ │ │ ├── end-time.css │ │ │ │ │ ├── end-time.png │ │ │ │ │ ├── end-time.tsx │ │ │ │ │ └── usage │ │ │ │ │ │ ├── angular.md │ │ │ │ │ │ ├── html.md │ │ │ │ │ │ ├── react.md │ │ │ │ │ │ ├── stencil.md │ │ │ │ │ │ ├── svelte.md │ │ │ │ │ │ └── vue.md │ │ │ │ ├── time-progress │ │ │ │ │ ├── time-progress.css │ │ │ │ │ ├── time-progress.png │ │ │ │ │ ├── time-progress.tsx │ │ │ │ │ └── usage │ │ │ │ │ │ ├── angular.md │ │ │ │ │ │ ├── html.md │ │ │ │ │ │ ├── react.md │ │ │ │ │ │ ├── stencil.md │ │ │ │ │ │ ├── svelte.md │ │ │ │ │ │ └── vue.md │ │ │ │ └── time │ │ │ │ │ ├── time.css │ │ │ │ │ ├── time.png │ │ │ │ │ ├── time.tsx │ │ │ │ │ └── usage │ │ │ │ │ ├── angular.md │ │ │ │ │ ├── html.md │ │ │ │ │ ├── react.md │ │ │ │ │ ├── stencil.md │ │ │ │ │ ├── svelte.md │ │ │ │ │ └── vue.md │ │ │ │ ├── tooltip │ │ │ │ ├── tooltip.css │ │ │ │ ├── tooltip.png │ │ │ │ ├── tooltip.tsx │ │ │ │ ├── types.ts │ │ │ │ └── usage │ │ │ │ │ ├── angular.md │ │ │ │ │ ├── html.md │ │ │ │ │ ├── react.md │ │ │ │ │ ├── stencil.md │ │ │ │ │ ├── svelte.md │ │ │ │ │ └── vue.md │ │ │ │ └── ui │ │ │ │ ├── ui.css │ │ │ │ ├── ui.tsx │ │ │ │ └── usage │ │ │ │ ├── angular.md │ │ │ │ ├── html.md │ │ │ │ ├── react.md │ │ │ │ ├── stencil.md │ │ │ │ ├── svelte.md │ │ │ │ └── vue.md │ │ ├── icons │ │ │ ├── material │ │ │ │ ├── md-captions-off.svg │ │ │ │ ├── md-captions-on.svg │ │ │ │ ├── md-check.svg │ │ │ │ ├── md-fast-forward.svg │ │ │ │ ├── md-fullscreen-enter.svg │ │ │ │ ├── md-fullscreen-exit.svg │ │ │ │ ├── md-pause.svg │ │ │ │ ├── md-pip-enter.svg │ │ │ │ ├── md-pip-exit.svg │ │ │ │ ├── md-play.svg │ │ │ │ ├── md-rewind.svg │ │ │ │ ├── md-settings.svg │ │ │ │ ├── md-volume-high.svg │ │ │ │ ├── md-volume-low.svg │ │ │ │ └── md-volume-mute.svg │ │ │ └── vime │ │ │ │ ├── vm-captions-off.svg │ │ │ │ ├── vm-captions-on.svg │ │ │ │ ├── vm-check.svg │ │ │ │ ├── vm-fast-forward.svg │ │ │ │ ├── vm-fullscreen-enter.svg │ │ │ │ ├── vm-fullscreen-exit.svg │ │ │ │ ├── vm-pause.svg │ │ │ │ ├── vm-pip-enter.svg │ │ │ │ ├── vm-pip-exit.svg │ │ │ │ ├── vm-play.svg │ │ │ │ ├── vm-rewind.svg │ │ │ │ ├── vm-settings.svg │ │ │ │ ├── vm-volume-high.svg │ │ │ │ ├── vm-volume-low.svg │ │ │ │ └── vm-volume-mute.svg │ │ ├── index.ts │ │ ├── themes │ │ │ ├── default.css │ │ │ └── light.css │ │ └── utils │ │ │ ├── Disposal.ts │ │ │ ├── array.ts │ │ │ ├── dom.ts │ │ │ ├── formatters.ts │ │ │ ├── network.ts │ │ │ ├── promise.ts │ │ │ ├── stencil.ts │ │ │ ├── string.ts │ │ │ ├── support.ts │ │ │ ├── target.ts │ │ │ ├── timing.ts │ │ │ └── unit.ts │ ├── stencil.config.ts │ ├── targets │ │ ├── angular │ │ │ ├── generateAngularComponent.ts │ │ │ ├── generateAngularFiles.ts │ │ │ └── index.ts │ │ ├── docs │ │ │ ├── index.ts │ │ │ └── markdown │ │ │ │ ├── markdown-css-props.ts │ │ │ │ ├── markdown-dependencies.ts │ │ │ │ ├── markdown-events.ts │ │ │ │ ├── markdown-methods.ts │ │ │ │ ├── markdown-props.ts │ │ │ │ ├── markdown-slots.ts │ │ │ │ ├── markdown-usage.ts │ │ │ │ └── markdown-utils.ts │ │ ├── react │ │ │ ├── generateReactComponent.ts │ │ │ ├── generateReactFiles.ts │ │ │ └── index.ts │ │ ├── svelte │ │ │ ├── SvelteTargetConfig.ts │ │ │ ├── generateSvelteComponent.ts │ │ │ ├── generateSvelteFiles.ts │ │ │ ├── generateSvelteTypings.ts │ │ │ └── index.ts │ │ ├── vue-next │ │ │ ├── generateVueNextComponent.ts │ │ │ ├── generateVueNextFiles.ts │ │ │ └── index.ts │ │ └── vue │ │ │ ├── generateVueComponent.ts │ │ │ ├── generateVueFiles.ts │ │ │ └── index.ts │ └── tsconfig.json ├── react │ ├── .scripts │ │ └── validate.cjs │ ├── CHANGELOG.md │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src │ │ ├── hooks.ts │ │ ├── index.ts │ │ └── lib.tsx │ └── tsconfig.json ├── svelte │ ├── .scripts │ │ └── validate.cjs │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── index.ts │ │ ├── lib.js │ │ ├── lib.ts │ │ ├── svelte.js │ │ └── usePlayerStore.ts │ └── tsconfig.json ├── vue-next │ ├── .scripts │ │ └── validate.cjs │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── composition.ts │ │ ├── index.ts │ │ └── lib.ts │ └── tsconfig.json └── vue │ ├── .scripts │ └── validate.cjs │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ ├── index.ts │ ├── lib.ts │ └── mixins.ts │ └── tsconfig.json ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── sandbox └── .gitkeep ├── static ├── identity │ ├── vime.png │ └── vime.svg ├── player │ └── video.png └── sponsors │ ├── cypress.png │ ├── mux.png │ └── vercel.png └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = lf 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | insert_final_newline = false 15 | trim_trailing_whitespace = false 16 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto eol=lf 2 | *.{cmd,[cC][mM][dD]} text eol=crlf 3 | *.{bat,[bB][aA][tT]} text eol=crlf -------------------------------------------------------------------------------- /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx --no-install lint-staged 5 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 16.10.0 2 | -------------------------------------------------------------------------------- /.scripts/preinstall.js: -------------------------------------------------------------------------------- 1 | if (!/pnpm/.test(process.env.npm_execpath || '')) { 2 | console.warn( 3 | `⚠️ \u001b[33mThis repository requires using pnpm as the package manager ` + 4 | ` for scripts to work properly.\u001b[39m\n` + 5 | '\n@see https://pnpm.io/installation\n', 6 | ); 7 | 8 | process.exit(1); 9 | } 10 | -------------------------------------------------------------------------------- /.scripts/sandbox-create.js: -------------------------------------------------------------------------------- 1 | console.log('WIP'); 2 | -------------------------------------------------------------------------------- /docs/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [require.resolve('@docusaurus/core/lib/babel/preset')], 3 | }; 4 | -------------------------------------------------------------------------------- /docs/now.json: -------------------------------------------------------------------------------- 1 | { 2 | "github": { 3 | "silent": true 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /docs/src/components/demo/LoadableDemoPlayer.js: -------------------------------------------------------------------------------- 1 | import loadable from '@loadable/component'; 2 | 3 | export default loadable(() => import('./DemoPlayer')); 4 | -------------------------------------------------------------------------------- /docs/src/components/players/IntroPlayer.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Player, Hls, DefaultUi } from '@vime/react'; 3 | 4 | const IntroPlayer = () => ( 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | ); 16 | 17 | export default IntroPlayer; 18 | -------------------------------------------------------------------------------- /docs/src/components/players/LoadableBasicPlayer.tsx: -------------------------------------------------------------------------------- 1 | import loadable from '@loadable/component'; 2 | export default loadable(() => import('./BasicPlayer')); 3 | -------------------------------------------------------------------------------- /docs/src/components/players/LoadableClickPlayer.tsx: -------------------------------------------------------------------------------- 1 | import loadable from '@loadable/component'; 2 | export default loadable(() => import('./ClickPlayer')); 3 | -------------------------------------------------------------------------------- /docs/src/components/players/LoadableCustomControlsPlayer.tsx: -------------------------------------------------------------------------------- 1 | import loadable from '@loadable/component'; 2 | export default loadable(() => import('./CustomControlsPlayer')); 3 | -------------------------------------------------------------------------------- /docs/src/components/players/LoadableCustomSettingsPlayer.tsx: -------------------------------------------------------------------------------- 1 | import loadable from '@loadable/component'; 2 | export default loadable(() => import('./CustomSettingsPlayer')); 3 | -------------------------------------------------------------------------------- /docs/src/components/players/LoadableDefaultControlsPlayer.tsx: -------------------------------------------------------------------------------- 1 | import loadable from '@loadable/component'; 2 | export default loadable(() => import('./DefaultControlsPlayer')); 3 | -------------------------------------------------------------------------------- /docs/src/components/players/LoadableIntroPlayer.tsx: -------------------------------------------------------------------------------- 1 | import loadable from '@loadable/component'; 2 | export default loadable(() => import('./IntroPlayer')); 3 | -------------------------------------------------------------------------------- /docs/src/components/players/TapSidesToSeek.module.css: -------------------------------------------------------------------------------- 1 | .tapSidesToSeek { 2 | display: flex; 3 | position: absolute; 4 | top: 0; 5 | left: 0; 6 | width: 100%; 7 | height: 100%; 8 | pointer-events: none; 9 | } 10 | 11 | .tapTarget { 12 | width: 7.5%; 13 | height: 100%; 14 | pointer-events: auto; 15 | } 16 | -------------------------------------------------------------------------------- /docs/src/sw.js: -------------------------------------------------------------------------------- 1 | import { registerRoute } from 'workbox-routing'; 2 | import { StaleWhileRevalidate } from 'workbox-strategies'; 3 | 4 | export default function swCustom() { 5 | registerRoute( 6 | context => 7 | [/cdn.jsdelivr.net/, /github.com\/vime-js\/vime/].some(regex => 8 | context.url.href.match(regex), 9 | ), 10 | new StaleWhileRevalidate(), 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /docs/static/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/docs/static/.nojekyll -------------------------------------------------------------------------------- /docs/static/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/docs/static/img/favicon.ico -------------------------------------------------------------------------------- /docs/static/img/icons/icon-128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/docs/static/img/icons/icon-128x128.png -------------------------------------------------------------------------------- /docs/static/img/icons/icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/docs/static/img/icons/icon-144x144.png -------------------------------------------------------------------------------- /docs/static/img/icons/icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/docs/static/img/icons/icon-152x152.png -------------------------------------------------------------------------------- /docs/static/img/icons/icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/docs/static/img/icons/icon-192x192.png -------------------------------------------------------------------------------- /docs/static/img/icons/icon-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/docs/static/img/icons/icon-384x384.png -------------------------------------------------------------------------------- /docs/static/img/icons/icon-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/docs/static/img/icons/icon-512x512.png -------------------------------------------------------------------------------- /docs/static/img/icons/icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/docs/static/img/icons/icon-72x72.png -------------------------------------------------------------------------------- /docs/static/img/icons/icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/docs/static/img/icons/icon-96x96.png -------------------------------------------------------------------------------- /docs/static/img/prop-doc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/docs/static/img/prop-doc.png -------------------------------------------------------------------------------- /docs/static/img/social.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/docs/static/img/social.png -------------------------------------------------------------------------------- /docs/static/img/vime.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/docs/static/img/vime.png -------------------------------------------------------------------------------- /docs/static/img/vime.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/versioned_docs/version-1.x/plugins/api/controls/control/big-playback-control.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: BigPlaybackControl 3 | sidebar_label: BigPlaybackControl 4 | --- 5 | 6 | **ID:** `vBigPlaybackControl` | **Type:** [`Control`](./control-interface.md) 7 | 8 | A large [`PlaybackControl`](./playback-control.md). 9 | 10 | ## Methods 11 | 12 | ### `getPlaybackControl` 13 | 14 | **Return Type:** [`PlaybackControl`](./playback-control.md) 15 | 16 | The underlying `PlaybackControl` instance. 17 | -------------------------------------------------------------------------------- /docs/versioned_docs/version-1.x/plugins/api/controls/control/caption-control.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: CaptionControl 3 | sidebar_label: CaptionControl 4 | --- 5 | 6 | **ID:** `vCaptionControl` | **LABEL:** `toggleCaptions` | **Type:** [`Control`](./control-interface.md) 7 | 8 | A control that toggles the visibility state of captions/subtitles. 9 | 10 | ## Methods 11 | 12 | ### `getToggle` 13 | 14 | **Return Type:** [`ToggleControl`](./toggle-control.md) 15 | 16 | The underlying `ToggleControl` instance. 17 | -------------------------------------------------------------------------------- /docs/versioned_docs/version-1.x/plugins/api/controls/control/control-new-line.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ControlNewLine 3 | sidebar_label: ControlNewLine 4 | --- 5 | 6 | **LABEL:** `addNewLine` | **Type:** [`Control`](./control-interface.md) 7 | 8 | This component is used to force controls that proceed it in a group to be on a new line. 9 | -------------------------------------------------------------------------------- /docs/versioned_docs/version-1.x/plugins/api/controls/control/control-spacer.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ControlSpacer 3 | sidebar_label: ControlSpacer 4 | --- 5 | 6 | **LABEL:** `addSpace` | **Type:** [`Control`](./control-interface.md) 7 | 8 | This component is used to space out controls in a group. 9 | -------------------------------------------------------------------------------- /docs/versioned_docs/version-1.x/plugins/api/controls/control/fullscreen-control.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: FullscreenControl 3 | sidebar_label: FullscreenControl 4 | --- 5 | 6 | **ID:** `vFullscreenControl` | **LABEL:** `toggleFullscreen` | **Type:** [`Control`](./control-interface.md) 7 | 8 | A control that toggles the fullscreen state of the player. 9 | 10 | ## Methods 11 | 12 | ### `getToggle` 13 | 14 | **Return Type:** [`ToggleControl`](./toggle-control.md) 15 | 16 | The underlying `ToggleControl` instance. 17 | -------------------------------------------------------------------------------- /docs/versioned_docs/version-1.x/plugins/api/controls/control/live-indicator.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: LiveIndicator 3 | sidebar_label: LiveIndicator 4 | --- 5 | 6 | **ID:** `vLiveIndicator` | **LABEL:** `liveStreamIndicator` | **Type:** [`Control`](./control-interface.md) 7 | 8 | A block of styled text that is used to notify the user that the current media is a live stream. 9 | -------------------------------------------------------------------------------- /docs/versioned_docs/version-1.x/plugins/api/controls/control/mute-control.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: MuteControl 3 | sidebar_label: MuteControl 4 | --- 5 | 6 | **ID:** `vMuteControl` | **LABEL:** `toggleMute` | **Type:** [`Control`](./control-interface.md) 7 | 8 | A control that toggles the muted state of the player. 9 | 10 | ## Methods 11 | 12 | ### `getToggle` 13 | 14 | **Return Type:** [`ToggleControl`](./toggle-control.md) 15 | 16 | The underlying `ToggleControl` instance. 17 | -------------------------------------------------------------------------------- /docs/versioned_docs/version-1.x/plugins/api/controls/control/pip-control.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: PiPControl 3 | sidebar_label: PiPControl 4 | --- 5 | 6 | **ID:** `vPiPControl` | **LABEL:** `togglePiP` | **Type:** [`Control`](./control-interface.md) 7 | 8 | A control that toggles the picture-in-picture mode between on/off. 9 | 10 | ## Methods 11 | 12 | ### `getToggle` 13 | 14 | **Return Type:** [`ToggleControl`](./toggle-control.md) 15 | 16 | The underlying `ToggleControl` instance. 17 | -------------------------------------------------------------------------------- /docs/versioned_docs/version-1.x/plugins/api/controls/control/playback-control.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: PlaybackControl 3 | sidebar_label: PlaybackControl 4 | --- 5 | 6 | **ID:** `vPlaybackControl` | **LABEL:** `togglePlayback` | **Type:** [`Control`](./control-interface.md) 7 | 8 | A control that toggles the paused state of the player. 9 | 10 | ## Methods 11 | 12 | ### `getToggle` 13 | 14 | **Return Type:** [`ToggleControl`](./toggle-control.md) 15 | 16 | The underlying `ToggleControl` instance. 17 | -------------------------------------------------------------------------------- /docs/versioned_docs/version-1.x/plugins/api/controls/control/seek-backward-control.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: SeekBackwardControl 3 | sidebar_label: SeekBackwardControl 4 | --- 5 | 6 | **ID:** `vSeekBackwardControl` | **LABEL:** `seekBackward` | **Type:** [`Control`](./control-interface.md) 7 | 8 | A control that allows the user to seek backward by a set amount on each press. 9 | 10 | ## Methods 11 | 12 | ### `getSeekControl` 13 | 14 | **Return Type:** [`SeekControl`](./seek-control.md) 15 | 16 | The underlying `SeekControl` instance. 17 | -------------------------------------------------------------------------------- /docs/versioned_docs/version-1.x/plugins/api/controls/control/seek-forward-control.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: SeekForwardControl 3 | sidebar_label: SeekForwardControl 4 | --- 5 | 6 | **ID:** `vSeekForwardControl` | **LABEL:** `seekForward` | **Type:** [`Control`](./control-interface.md) 7 | 8 | A control that allows the user to seek forward by a set amount on each press. 9 | 10 | ## Methods 11 | 12 | ### `getSeekControl` 13 | 14 | **Return Type:** [`SeekControl`](./seek-control.md) 15 | 16 | The underlying `SeekControl` instance. 17 | -------------------------------------------------------------------------------- /docs/versioned_docs/version-1.x/plugins/api/controls/control/time/current-time.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: CurrentTime 3 | sidebar_label: CurrentTime 4 | --- 5 | 6 | **ID:** `vCurrentTime` | **LABEL:** `displayCurrentTime` | **Type:** [`Control`](../control-interface.md) 7 | 8 | Formats and displays the current time of playback. 9 | -------------------------------------------------------------------------------- /docs/versioned_docs/version-1.x/plugins/api/controls/control/time/end-time.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: EndTime 3 | sidebar_label: EndTime 4 | --- 5 | 6 | **ID:** `vEndTime` | **LABEL:** `displayEndTime` | **Type:** [`Control`](../control-interface.md) 7 | 8 | Formats and displays the duration of the media. 9 | -------------------------------------------------------------------------------- /docs/versioned_docs/version-1.x/plugins/api/controls/control/time/time-divider.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: TimeDivider 3 | sidebar_label: TimeDivider 4 | --- 5 | 6 | **ID:** `vTimeDivider` | **LABEL:** `displayTimeDivider` | **Type:** [`Control`](../control-interface.md) 7 | 8 | Displays a small divider used to seperate blocks of time. 9 | -------------------------------------------------------------------------------- /docs/versioned_docs/version-1.x/plugins/api/controls/control/time/time-progress.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: TimeProgress 3 | sidebar_label: TimeProgress 4 | --- 5 | 6 | **ID:** `vTimeProgress` | **LABEL:** `displayTimeProgress` | **Type:** [`Control`](../control-interface.md) 7 | 8 | Format and display the progress of playback in the form `{currentTime} / {duration}`. 9 | -------------------------------------------------------------------------------- /docs/versioned_docs/version-1.x/plugins/api/controls/control/time/time.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Time 3 | sidebar_label: Time 4 | --- 5 | 6 | **Type:** `Component` 7 | 8 | Takes a time represented in seconds and displays it in the form `hh:mm:ss`. 9 | 10 | ## Props 11 | 12 | ### `seconds` 13 | 14 | **Type:** `int` | **Default:** `0` 15 | 16 | The seconds to be formatted. 17 | -------------------------------------------------------------------------------- /docs/versioned_docs/version-1.x/plugins/api/keyboard/keyboard-shortcut.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: KeyboardShortcut 3 | sidebar_label: KeyboardShortcut 4 | --- 5 | 6 | **Type:** `interface` 7 | 8 | ## Props 9 | 10 | ### `hint` 11 | 12 | **Type:** `string` 13 | 14 | Text that helps the user understand what key to press to use this shortcut. 15 | 16 | ### `keys` 17 | 18 | **Type:** `int[]` 19 | 20 | The [JS key codes][js-keycodes] to listen to. 21 | 22 | [js-keycodes]: https://keycode.info 23 | 24 | ### `action` 25 | 26 | **Type:** `() => void` 27 | 28 | A callback to call when the key is pressed. 29 | -------------------------------------------------------------------------------- /docs/versioned_docs/version-4.x/src/components/demo/LoadableDemoPlayer.js: -------------------------------------------------------------------------------- 1 | import loadable from '@loadable/component'; 2 | 3 | export default loadable(() => import('./DemoPlayer')); 4 | -------------------------------------------------------------------------------- /docs/versioned_docs/version-4.x/src/components/players/LoadableBasicPlayer.tsx: -------------------------------------------------------------------------------- 1 | import loadable from '@loadable/component'; 2 | export default loadable(() => import('./BasicPlayer')); 3 | -------------------------------------------------------------------------------- /docs/versioned_docs/version-4.x/src/components/players/LoadableClickPlayer.tsx: -------------------------------------------------------------------------------- 1 | import loadable from '@loadable/component'; 2 | export default loadable(() => import('./ClickPlayer')); 3 | -------------------------------------------------------------------------------- /docs/versioned_docs/version-4.x/src/components/players/LoadableCustomControlsPlayer.tsx: -------------------------------------------------------------------------------- 1 | import loadable from '@loadable/component'; 2 | export default loadable(() => import('./CustomControlsPlayer')); 3 | -------------------------------------------------------------------------------- /docs/versioned_docs/version-4.x/src/components/players/LoadableCustomSettingsPlayer.tsx: -------------------------------------------------------------------------------- 1 | import loadable from '@loadable/component'; 2 | export default loadable(() => import('./CustomSettingsPlayer')); 3 | -------------------------------------------------------------------------------- /docs/versioned_docs/version-4.x/src/components/players/LoadableDefaultControlsPlayer.tsx: -------------------------------------------------------------------------------- 1 | import loadable from '@loadable/component'; 2 | export default loadable(() => import('./DefaultControlsPlayer')); 3 | -------------------------------------------------------------------------------- /docs/versioned_docs/version-4.x/src/components/players/TapSidesToSeek.module.css: -------------------------------------------------------------------------------- 1 | .tapSidesToSeek { 2 | display: flex; 3 | position: absolute; 4 | top: 0; 5 | left: 0; 6 | width: 100%; 7 | height: 100%; 8 | z-index: 21; 9 | pointer-events: none; 10 | } 11 | 12 | .tapTarget { 13 | width: 7.5%; 14 | height: 100%; 15 | pointer-events: auto; 16 | } 17 | -------------------------------------------------------------------------------- /docs/versions.json: -------------------------------------------------------------------------------- 1 | ["4.x", "1.x"] 2 | -------------------------------------------------------------------------------- /examples/angular/.browserslistrc: -------------------------------------------------------------------------------- 1 | last 1 Chrome version 2 | last 1 Firefox version 3 | last 2 Edge major versions 4 | last 2 Safari major versions 5 | last 2 iOS major versions 6 | Firefox ESR 7 | not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line. 8 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. 9 | -------------------------------------------------------------------------------- /examples/angular/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ViewChild } from '@angular/core'; 2 | import { Player } from '@vime/angular'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | templateUrl: './app.component.html', 7 | }) 8 | export class AppComponent { 9 | // Obtain a ref if you need to call any methods. 10 | @ViewChild('player') player!: Player; 11 | 12 | onPlaybackReady() { 13 | // ... 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /examples/angular/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { VimeModule } from '@vime/angular'; 4 | 5 | import { AppComponent } from './app.component'; 6 | import { TapSidesToSeekComponent } from './tap-sides-to-seek/tap-sides-to-seek.component'; 7 | 8 | @NgModule({ 9 | declarations: [AppComponent, TapSidesToSeekComponent], 10 | imports: [BrowserModule, VimeModule], 11 | providers: [], 12 | bootstrap: [AppComponent], 13 | }) 14 | export class AppModule {} 15 | -------------------------------------------------------------------------------- /examples/angular/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/examples/angular/src/assets/.gitkeep -------------------------------------------------------------------------------- /examples/angular/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true, 3 | }; 4 | -------------------------------------------------------------------------------- /examples/angular/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/examples/angular/src/favicon.ico -------------------------------------------------------------------------------- /examples/angular/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | @vime/angular-example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/angular/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic() 12 | .bootstrapModule(AppModule) 13 | .catch(err => console.error(err)); 14 | -------------------------------------------------------------------------------- /examples/angular/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | import 'zone.js/dist/zone'; 2 | -------------------------------------------------------------------------------- /examples/angular/src/styles.css: -------------------------------------------------------------------------------- 1 | /* Default theme. */ 2 | @import '~@vime/core/themes/default.css'; 3 | 4 | /* Optional light theme (extends default). */ 5 | /* @import "~@vime/core/themes/light.css"; */ 6 | 7 | html, 8 | body { 9 | width: 100%; 10 | height: 100%; 11 | margin: 0; 12 | } 13 | -------------------------------------------------------------------------------- /examples/angular/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.base.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": ["src/main.ts", "src/polyfills.ts"], 9 | "include": ["src/**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /examples/angular/tsconfig.base.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "baseUrl": "./", 6 | "outDir": "./dist/out-tsc", 7 | "sourceMap": true, 8 | "declaration": false, 9 | "downlevelIteration": true, 10 | "experimentalDecorators": true, 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "module": "es2020", 15 | "lib": ["es2018", "dom"] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* 2 | This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience. 3 | It is not intended to be used to perform a compilation. 4 | 5 | To learn more about this file see: https://angular.io/config/solution-tsconfig. 6 | */ 7 | { 8 | "files": [], 9 | "references": [ 10 | { 11 | "path": "./tsconfig.app.json" 12 | } 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /examples/html/README.md: -------------------------------------------------------------------------------- 1 | # @vime/html-example 2 | 3 | This example demonstrates how to setup Vime with HTML via the `@vime/core` package. See [`index.html`](./index.html). 4 | 5 | ## Usage 6 | 7 | Run the following commands to serve the example. 8 | 9 | ```bash 10 | $: git clone https://github.com/vime-js/vime --depth=1 11 | 12 | $: cd vime/examples/html 13 | 14 | $: npm install 15 | 16 | $: npm run dev 17 | ``` 18 | -------------------------------------------------------------------------------- /examples/html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vime/html-example", 3 | "version": "5.4.1", 4 | "private": true, 5 | "scripts": { 6 | "dev": "sirv --dev --port 4444" 7 | }, 8 | "dependencies": { 9 | "sirv-cli": "^1.0.6" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/react/README.md: -------------------------------------------------------------------------------- 1 | # @vime/react-example 2 | 3 | This example was bootstrapped with [Create React App](https://github.com/facebook/create-react-app), 4 | and demonstrates how to setup Vime with React via the `@vime/react` package. The main 5 | file to look at is [`App.tsx`](./src/App.tsx), and if you're interested in building custom 6 | components see [`TapSidesToSeek.tsx`](./src/TapSidesToSeek.tsx). 7 | 8 | ## Usage 9 | 10 | ```bash 11 | $: git clone https://github.com/vime-js/vime --depth=1 12 | 13 | $: cd vime/examples/react 14 | 15 | $: npm install 16 | 17 | $: npm run dev 18 | ``` 19 | -------------------------------------------------------------------------------- /examples/react/craco.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | webpack: { 5 | alias: { 6 | react: path.resolve(__dirname, './node_modules/react'), 7 | 'react-dom': path.resolve(__dirname, './node_modules/react-dom'), 8 | }, 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /examples/react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/examples/react/public/favicon.ico -------------------------------------------------------------------------------- /examples/react/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/examples/react/public/logo192.png -------------------------------------------------------------------------------- /examples/react/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/examples/react/public/logo512.png -------------------------------------------------------------------------------- /examples/react/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /examples/react/src/App.css: -------------------------------------------------------------------------------- 1 | #container { 2 | width: 100%; 3 | max-width: 960px; 4 | } 5 | -------------------------------------------------------------------------------- /examples/react/src/index.css: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | #root { 4 | width: 100%; 5 | height: 100%; 6 | margin: 0; 7 | } 8 | 9 | #root { 10 | margin: 0; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | } 15 | -------------------------------------------------------------------------------- /examples/react/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root'), 11 | ); 12 | -------------------------------------------------------------------------------- /examples/react/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "noEmit": true, 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "module": "esnext", 9 | "resolveJsonModule": true, 10 | "isolatedModules": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "jsx": "react-jsx", 13 | "jsxFactory": "React.createElement" 14 | }, 15 | "include": ["src"] 16 | } 17 | -------------------------------------------------------------------------------- /examples/rollup/public/global.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | width: 100%; 4 | height: 100%; 5 | } 6 | 7 | body { 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | margin: 0px; 12 | padding: 0px; 13 | } 14 | 15 | #container { 16 | width: 100%; 17 | max-width: 960px; 18 | } 19 | -------------------------------------------------------------------------------- /examples/stencil/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vime/stencil-example", 3 | "version": "5.4.1", 4 | "private": true, 5 | "scripts": { 6 | "dev": "stencil build --dev --watch --serve", 7 | "build": "stencil build" 8 | }, 9 | "dependencies": { 10 | "@vime/core": "5.4.1" 11 | }, 12 | "devDependencies": { 13 | "@stencil/core": "2.5.2", 14 | "@stencil/router": "^1.0.1" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/stencil/src/assets/icon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/examples/stencil/src/assets/icon/favicon.ico -------------------------------------------------------------------------------- /examples/stencil/src/assets/icon/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/examples/stencil/src/assets/icon/icon.png -------------------------------------------------------------------------------- /examples/stencil/src/components/app-home/app-home.css: -------------------------------------------------------------------------------- 1 | /* Default theme. */ 2 | @import '../../../node_modules/@vime/core/themes/default.css'; 3 | 4 | /* Optional light theme (extends default). */ 5 | /* @import "../../../node_modules/@vime/core/themes/light.css"; */ 6 | 7 | :host { 8 | width: 100%; 9 | height: 100%; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | } 14 | 15 | .container { 16 | width: 100%; 17 | max-width: 960px; 18 | } 19 | -------------------------------------------------------------------------------- /examples/stencil/src/components/app-root/app-root.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'app-root', 5 | shadow: true, 6 | }) 7 | export class AppRoot { 8 | render() { 9 | return ( 10 | 11 | 12 | 13 | 14 | 15 | ); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/stencil/src/global/app.css: -------------------------------------------------------------------------------- 1 | /* 2 | Global App CSS 3 | ---------------------- 4 | Use this file for styles that should be applied to all components. 5 | For example, "font-family" within the "body" selector is a CSS property 6 | most apps will want applied to all components. 7 | 8 | Any global CSS variables should also be applied here. 9 | */ 10 | 11 | html, 12 | body { 13 | width: 100%; 14 | height: 100%; 15 | } 16 | 17 | body { 18 | margin: 0px; 19 | padding: 0px; 20 | } 21 | -------------------------------------------------------------------------------- /examples/stencil/src/global/app.ts: -------------------------------------------------------------------------------- 1 | export default async () => { 2 | /** 3 | * The code to be executed should be placed within a default function that is 4 | * exported by the global script. Ensure all of the code in the global script 5 | * is wrapped in the function() that is exported. 6 | */ 7 | }; 8 | -------------------------------------------------------------------------------- /examples/stencil/src/index.ts: -------------------------------------------------------------------------------- 1 | import '@stencil/router'; 2 | import '@vime/core'; 3 | 4 | export { Components, JSX } from './components.d'; 5 | -------------------------------------------------------------------------------- /examples/stencil/src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vime/stencil-example", 3 | "short_name": "@vime/stencil-example", 4 | "start_url": "/", 5 | "display": "standalone", 6 | "icons": [ 7 | { 8 | "src": "assets/icon/icon.png", 9 | "sizes": "512x512", 10 | "type": "image/png" 11 | } 12 | ], 13 | "background_color": "#16161d", 14 | "theme_color": "#16161d" 15 | } 16 | -------------------------------------------------------------------------------- /examples/stencil/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { Config } from '@stencil/core'; 2 | 3 | // https://stenciljs.com/docs/config 4 | 5 | export const config: Config = { 6 | globalStyle: 'src/global/app.css', 7 | globalScript: 'src/global/app.ts', 8 | taskQueue: 'async', 9 | outputTargets: [ 10 | { 11 | type: 'www', 12 | serviceWorker: null, 13 | baseUrl: 'https://myapp.local/', 14 | copy: [ 15 | { 16 | src: '../node_modules/@vime/core/icons', 17 | dest: 'icons', 18 | }, 19 | ], 20 | }, 21 | ], 22 | }; 23 | -------------------------------------------------------------------------------- /examples/stencil/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": true, 4 | "allowUnreachableCode": false, 5 | "declaration": false, 6 | "experimentalDecorators": true, 7 | "lib": ["dom", "es2015"], 8 | "moduleResolution": "node", 9 | "module": "esnext", 10 | "target": "es2017", 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "jsx": "react", 14 | "jsxFactory": "h" 15 | }, 16 | "include": ["src"], 17 | "exclude": ["node_modules"] 18 | } 19 | -------------------------------------------------------------------------------- /examples/svelte/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | ## [5.0.35](https://github.com/vime-js/vime/compare/v5.0.34...v5.0.35) (2021-11-05) 7 | 8 | **Note:** Version bump only for package @vime/svelte-example 9 | 10 | 11 | 12 | 13 | 14 | ## [5.0.34](https://github.com/vime-js/vime/compare/v5.0.33...v5.0.34) (2021-10-10) 15 | 16 | **Note:** Version bump only for package @vime/svelte-example 17 | -------------------------------------------------------------------------------- /examples/svelte/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/examples/svelte/public/favicon.png -------------------------------------------------------------------------------- /examples/svelte/public/global.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | position: relative; 4 | width: 100%; 5 | height: 100%; 6 | } 7 | 8 | body { 9 | margin: 0; 10 | box-sizing: border-box; 11 | } 12 | -------------------------------------------------------------------------------- /examples/svelte/src/main.ts: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body, 5 | }); 6 | 7 | export default app; 8 | -------------------------------------------------------------------------------- /examples/svelte/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | "include": ["src/**/*"], 4 | "exclude": ["node_modules/*", "__sapper__/*", "public/*"], 5 | "compilerOptions": { 6 | "sourceMap": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /examples/vue-next/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | ## [5.0.35](https://github.com/vime-js/vime/compare/v5.0.34...v5.0.35) (2021-11-05) 7 | 8 | **Note:** Version bump only for package @vime/vue-next-example 9 | 10 | 11 | 12 | 13 | 14 | ## [5.0.34](https://github.com/vime-js/vime/compare/v5.0.33...v5.0.34) (2021-10-10) 15 | 16 | **Note:** Version bump only for package @vime/vue-next-example 17 | -------------------------------------------------------------------------------- /examples/vue-next/README.md: -------------------------------------------------------------------------------- 1 | # @vime/vue-next-example 2 | 3 | > Looking for [Vue 2](../vue)? 4 | 5 | This example was bootstrapped with [Vue CLI](https://cli.vuejs.org), and demonstrates how to setup 6 | Vime with Vue 3 via the `@vime/vue-next` package. See [`src/App.vue`](./src/App.vue), and if you're 7 | interested in building custom components see [`src/TapSidesToSeek.vue`](./src/TapSidesToSeek.vue). 8 | 9 | ## Usage 10 | 11 | ```bash 12 | $: git clone https://github.com/vime-js/vime --depth=1 13 | 14 | $: cd vime/examples/vue-next 15 | 16 | $: npm install 17 | 18 | $: npm run dev 19 | ``` 20 | -------------------------------------------------------------------------------- /examples/vue-next/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/cli-plugin-babel/preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /examples/vue-next/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/examples/vue-next/public/favicon.ico -------------------------------------------------------------------------------- /examples/vue-next/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/examples/vue-next/src/assets/logo.png -------------------------------------------------------------------------------- /examples/vue-next/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | 4 | createApp(App).mount('#app'); 5 | -------------------------------------------------------------------------------- /examples/vue-next/src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import type { DefineComponent } from 'vue'; 3 | 4 | const component: DefineComponent<{}, {}, any>; 5 | export default component; 6 | } 7 | -------------------------------------------------------------------------------- /examples/vue/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | ## [5.0.35](https://github.com/vime-js/vime/compare/v5.0.34...v5.0.35) (2021-11-05) 7 | 8 | **Note:** Version bump only for package @vime/vue-example 9 | 10 | 11 | 12 | 13 | 14 | ## [5.0.34](https://github.com/vime-js/vime/compare/v5.0.33...v5.0.34) (2021-10-10) 15 | 16 | **Note:** Version bump only for package @vime/vue-example 17 | -------------------------------------------------------------------------------- /examples/vue/README.md: -------------------------------------------------------------------------------- 1 | # @vime/vue-example 2 | 3 | > Looking for [Vue 3](../vue-next)? 4 | 5 | This example was bootstrapped with [Vue CLI](https://cli.vuejs.org), and demonstrates how to setup 6 | Vime with Vue 2 via the `@vime/vue` package. See [`src/App.vue`](./src/App.vue), and if you're 7 | interested in building custom components see [`src/TapSidesToSeek.vue`](./src/TapSidesToSeek.vue). 8 | 9 | ## Usage 10 | 11 | ```bash 12 | $: git clone https://github.com/vime-js/vime --depth=1 13 | 14 | $: cd vime/examples/vue 15 | 16 | $: npm install 17 | 18 | $: npm run dev 19 | ``` 20 | -------------------------------------------------------------------------------- /examples/vue/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/examples/vue/public/favicon.ico -------------------------------------------------------------------------------- /examples/vue/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/examples/vue/src/assets/logo.png -------------------------------------------------------------------------------- /examples/vue/src/main.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app'); 9 | -------------------------------------------------------------------------------- /examples/vue/src/shims-tsx.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-unused-vars */ 2 | 3 | import Vue, { VNode } from 'vue'; 4 | 5 | declare global { 6 | namespace JSX { 7 | // tslint:disable no-empty-interface 8 | interface Element extends VNode {} 9 | // tslint:disable no-empty-interface 10 | interface ElementClass extends Vue {} 11 | interface IntrinsicElements { 12 | [elem: string]: any; 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /examples/vue/src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import Vue from 'vue'; 3 | 4 | export default Vue; 5 | } 6 | -------------------------------------------------------------------------------- /examples/webpack/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vime/webpack-example", 3 | "version": "5.4.1", 4 | "private": true, 5 | "scripts": { 6 | "dev": "webpack serve --open true", 7 | "build": "cross-env NODE_ENV=production webpack" 8 | }, 9 | "dependencies": { 10 | "@vime/core": "5.4.1" 11 | }, 12 | "devDependencies": { 13 | "cross-env": "^7.0.2", 14 | "css-loader": "^5.0.0", 15 | "mini-css-extract-plugin": "^1.2.1", 16 | "webpack": "^5.3.2", 17 | "webpack-cli": "^4.1.0", 18 | "webpack-dev-server": "^3.11.0" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/webpack/public/global.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | width: 100%; 4 | height: 100%; 5 | } 6 | 7 | body { 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | margin: 0px; 12 | padding: 0px; 13 | } 14 | 15 | #container { 16 | width: 100%; 17 | max-width: 960px; 18 | } 19 | -------------------------------------------------------------------------------- /packages/angular/.scripts/validate.cjs: -------------------------------------------------------------------------------- 1 | try { 2 | require('@vime/core'); 3 | } catch (e) { 4 | console.log( 5 | '\n\n', 6 | '\x1b[31m****************************************************************************', 7 | '\033[1m\x1b[31m\n 🚨 `@vime/core` was moved to peer dependencies, run `npm install @vime/core`', 8 | '\x1b[0m\x1b[31m\n ****************************************************************************', 9 | '\x1b[0m\n\n', 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /packages/angular/projects/vime/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist", 4 | "lib": { 5 | "entryFile": "src/public-api.ts", 6 | "umdModuleIds": { 7 | "@vime/core": "Vime" 8 | } 9 | }, 10 | "allowedNonPeerDependencies": ["@vime/core"] 11 | } 12 | -------------------------------------------------------------------------------- /packages/angular/projects/vime/src/public-api.ts: -------------------------------------------------------------------------------- 1 | export { 2 | PlayerProp, 3 | PlayerProps, 4 | PlayerMethods, 5 | PlayerEvent, 6 | PlayerEvents, 7 | ViewType, 8 | MediaType, 9 | Translation, 10 | Provider, 11 | AdapterHost, 12 | MediaProviderAdapter, 13 | watchComponentRegistry, 14 | } from '@vime/core'; 15 | 16 | export * from './components'; 17 | export * from './VimeComponent'; 18 | export { VimeModule } from './VimeModule'; 19 | -------------------------------------------------------------------------------- /packages/angular/projects/vime/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/lib", 6 | "target": "ES5", 7 | "declaration": true, 8 | "declarationMap": true, 9 | "inlineSources": true, 10 | "types": [], 11 | "lib": ["DOM", "ES2018"] 12 | }, 13 | "angularCompilerOptions": { 14 | "skipTemplateCodegen": true, 15 | "strictMetadataEmit": true, 16 | "enableResourceInlining": true 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/angular/projects/vime/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.lib.json", 4 | "compilerOptions": { 5 | "declarationMap": false 6 | }, 7 | "angularCompilerOptions": { 8 | "enableIvy": false 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/core/src/components/core/embed/embed.css: -------------------------------------------------------------------------------- 1 | :host { 2 | z-index: var(--vm-media-z-index); 3 | } 4 | 5 | iframe { 6 | position: absolute; 7 | top: 0; 8 | left: 0; 9 | border: 0; 10 | width: 100%; 11 | height: 100%; 12 | user-select: none; 13 | } 14 | -------------------------------------------------------------------------------- /packages/core/src/components/core/embed/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html 2 | 8 | 9 | 17 | ``` 18 | -------------------------------------------------------------------------------- /packages/core/src/components/core/embed/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx 2 | class Example { 3 | private onMessage(event: CustomEvent) { 4 | const message = event.detail; 5 | // ... 6 | } 7 | 8 | render() { 9 | return ( 10 | 17 | ); 18 | } 19 | } 20 | ``` 21 | -------------------------------------------------------------------------------- /packages/core/src/components/core/player/MediaType.ts: -------------------------------------------------------------------------------- 1 | export enum MediaType { 2 | Audio = 'audio', 3 | Video = 'video', 4 | } 5 | -------------------------------------------------------------------------------- /packages/core/src/components/core/player/PlayerLogger.ts: -------------------------------------------------------------------------------- 1 | import { isUndefined } from '../../../utils/unit'; 2 | 3 | export class Logger { 4 | public silent = false; 5 | 6 | log(...args: any[]) { 7 | if (!this.silent && !isUndefined(console)) 8 | console.log('[Vime tip]:', ...args); 9 | } 10 | 11 | warn(...args: any[]) { 12 | if (!this.silent && !isUndefined(console)) 13 | console.error('[Vime warn]:', ...args); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/core/src/components/core/player/ViewType.ts: -------------------------------------------------------------------------------- 1 | export enum ViewType { 2 | Audio = 'audio', 3 | Video = 'video', 4 | } 5 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/Provider.ts: -------------------------------------------------------------------------------- 1 | export enum Provider { 2 | Audio = 'audio', 3 | Video = 'video', 4 | HLS = 'hls', 5 | Dash = 'dash', 6 | YouTube = 'youtube', 7 | Vimeo = 'vimeo', 8 | Dailymotion = 'dailymotion', 9 | } 10 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/adapters/AudioAdapter.ts: -------------------------------------------------------------------------------- 1 | export interface AudioAdapter { 2 | setCurrentAudioTrack?(trackId: number): Promise; 3 | } 4 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/adapters/CaptionsAdapter.ts: -------------------------------------------------------------------------------- 1 | export interface CaptionsAdapter { 2 | setCurrentTextTrack?(trackId: number): Promise; 3 | setTextTrackVisibility?(isVisible: boolean): Promise; 4 | } 5 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/adapters/FullscreenAdapter.ts: -------------------------------------------------------------------------------- 1 | export interface FullscreenAdapter { 2 | canSetFullscreen?(): Promise; 3 | enterFullscreen?(options?: FullscreenOptions): Promise; 4 | exitFullscreen?(): Promise; 5 | } 6 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/adapters/PiPAdapter.ts: -------------------------------------------------------------------------------- 1 | export interface PiPAdapter { 2 | canSetPiP?(): Promise; 3 | enterPiP?(): Promise; 4 | exitPiP?(): Promise; 5 | } 6 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/audio/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {2-5} title="example.html" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/audio/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {2-5} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/audio/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {2,7-10} 2 | import React from 'react'; 3 | import { Player, Audio } from '@vime/react'; 4 | 5 | function Example() { 6 | return ( 7 | 8 | 12 | {/* ... */} 13 | 14 | ); 15 | } 16 | ``` 17 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/audio/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {5-8} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | 7 | 8 | {/* and elements are placed here. */} 9 | 10 | {/* ... */} 11 | 12 | ); 13 | } 14 | } 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/audio/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {2-5,10} title="example.svelte" 2 | 3 | 7 | 8 | 9 | 10 | 13 | ``` 14 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/audio/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {3-6,12,17} title="example.vue" 2 | 11 | 12 | 22 | ``` 23 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/dailymotion/DailymotionMessage.ts: -------------------------------------------------------------------------------- 1 | import { DailymotionEvent } from './DailymotionEvent'; 2 | 3 | export interface DailymotionMessage { 4 | time?: string; 5 | volume?: string; 6 | muted?: string; 7 | duration?: string; 8 | qualities?: string[]; 9 | quality?: string; 10 | title?: string; 11 | fullscreen?: string; 12 | error?: string; 13 | event?: DailymotionEvent; 14 | } 15 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/dailymotion/dailymotion.css: -------------------------------------------------------------------------------- 1 | :host { 2 | z-index: var(--vm-media-z-index); 3 | } 4 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/dailymotion/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {2-5} title="example.html" 2 | 3 | 4 | 5 | 6 | ``` 7 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/dailymotion/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {2} 2 | 3 | 4 | 5 | 6 | ``` 7 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/dailymotion/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {2,7} 2 | import React from 'react'; 3 | import { Player, Dailymotion } from '@vime/react'; 4 | 5 | function Example() { 6 | return ( 7 | 8 | 9 | {/* ... */} 10 | 11 | ); 12 | } 13 | ``` 14 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/dailymotion/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {5} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | 7 | {/* ... */} 8 | 9 | ); 10 | } 11 | } 12 | ``` 13 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/dailymotion/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {2,7} title="example.svelte" 2 | 3 | 4 | 5 | 6 | 7 | 10 | ``` 11 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/dailymotion/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {3,9,14} title="example.vue" 2 | 8 | 9 | 19 | ``` 20 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/dash/dash.css: -------------------------------------------------------------------------------- 1 | :host { 2 | z-index: var(--vm-media-z-index); 3 | } 4 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/dash/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {2-7} title="example.html" 2 | 3 | 9 | 10 | 11 | ``` 12 | 13 | ```ts title="example.ts" 14 | class Example { 15 | /** 16 | * @see https://github.com/Dash-Industry-Forum/dash.js. 17 | */ 18 | dashConfig = { 19 | // ... 20 | }; 21 | } 22 | ``` 23 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/dash/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {2-6} 2 | 3 | 8 | 9 | 10 | ``` 11 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/dash/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {2,14-19} 2 | import React from 'react'; 3 | import { Player, Dash } from '@vime/react'; 4 | 5 | function Example() { 6 | /** 7 | * @see https://github.com/Dash-Industry-Forum/dash.js. 8 | */ 9 | const dashConfig = { 10 | // ... 11 | }; 12 | 13 | return ( 14 | 15 | 21 | {/* ... */} 22 | 23 | ); 24 | } 25 | ``` 26 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/dash/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {5-9} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | 11 | {/* ... */} 12 | 13 | ); 14 | } 15 | } 16 | ``` 17 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/dash/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {2-7,12} title="example.svelte" 2 | 3 | 9 | 10 | 11 | 12 | 22 | ``` 23 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/file/MediaResource.ts: -------------------------------------------------------------------------------- 1 | export interface MediaResource { 2 | src: string; 3 | quality?: string; 4 | media?: string; 5 | ref: HTMLSourceElement; 6 | } 7 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/file/WebkitPresentationMode.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @see https://developer.apple.com/documentation/webkitjs/htmlvideoelement/1631913-webkitpresentationmode 3 | */ 4 | export const enum WebkitPresentationMode { 5 | PiP = 'picture-in-picture', 6 | Inline = 'inline', 7 | Fullscreen = 'fullscreen', 8 | } 9 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/file/file.css: -------------------------------------------------------------------------------- 1 | audio, 2 | video { 3 | border-radius: inherit; 4 | vertical-align: middle; 5 | width: 100%; 6 | outline: 0; 7 | } 8 | 9 | video { 10 | position: absolute; 11 | top: 0; 12 | left: 0; 13 | border: 0; 14 | height: 100%; 15 | user-select: none; 16 | } 17 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/file/utils.ts: -------------------------------------------------------------------------------- 1 | export const audioRegex = /\.(m4a|mp4a|mpga|mp2|mp2a|mp3|m2a|m3a|wav|weba|aac|oga|spx)($|\?)/i; 2 | export const videoRegex = /\.(mp4|og[gv]|webm|mov|m4v)($|\?)/i; 3 | export const hlsRegex = /\.(m3u8)($|\?)/i; 4 | export const hlsTypeRegex = /^application\/(x-mpegURL|vnd\.apple\.mpegURL)$/i; 5 | export const dashRegex = /\.(mpd)($|\?)/i; 6 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/hls/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {2-4} title="example.html" 2 | 3 | 4 | 5 | 6 | 7 | 8 | ``` 9 | 10 | ```ts title="example.ts" 11 | class Example { 12 | /** 13 | * @see https://hls-js.netlify.app/api-docs/file/src/config.ts.html. 14 | */ 15 | hlsConfig = { 16 | // ... 17 | }; 18 | } 19 | ``` 20 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/hls/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {2-4} 2 | 3 | 4 | 5 | 6 | 7 | 8 | ``` 9 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/hls/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {5-7} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | 7 | 8 | 9 | {/* ... */} 10 | 11 | ); 12 | } 13 | } 14 | ``` 15 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/hls/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {2-4,9} title="example.svelte" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 19 | ``` 20 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/video/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {2-17} title="example.html" 2 | 3 | 4 | 5 | 12 | 18 | 19 | 20 | 21 | ``` 22 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/video/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {2-17} 2 | 3 | 4 | 5 | 12 | 18 | 19 | 20 | 21 | ``` 22 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/vimeo/VimeoMessage.ts: -------------------------------------------------------------------------------- 1 | import { VimeoCommand } from './VimeoCommand'; 2 | import { VimeoDataEvent } from './VimeoEvent'; 3 | 4 | export interface VimeoMessage { 5 | data?: any; 6 | value?: any; 7 | method?: VimeoCommand; 8 | event?: VimeoDataEvent; 9 | } 10 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/vimeo/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {2} title="example.html" 2 | 3 | 4 | 5 | 6 | ``` 7 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/vimeo/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {2} 2 | 3 | 4 | 5 | 6 | ``` 7 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/vimeo/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {2,7} 2 | import React from 'react'; 3 | import { Player, Vimeo } from '@vime/react'; 4 | 5 | function Example() { 6 | return ( 7 | 8 | 9 | {/* ... */} 10 | 11 | ); 12 | } 13 | ``` 14 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/vimeo/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {5} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | 7 | {/* ... */} 8 | 9 | ); 10 | } 11 | } 12 | ``` 13 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/vimeo/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {2,7} title="example.svelte" 2 | 3 | 4 | 5 | 6 | 7 | 10 | ``` 11 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/vimeo/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {3,9,14} title="example.vue" 2 | 8 | 9 | 19 | ``` 20 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/vimeo/vimeo.css: -------------------------------------------------------------------------------- 1 | :host { 2 | z-index: var(--vm-media-z-index); 3 | } 4 | 5 | vm-embed { 6 | position: absolute; 7 | top: 0; 8 | left: 0; 9 | width: 100%; 10 | height: 100%; 11 | } 12 | 13 | vm-embed.hideControls { 14 | display: block; 15 | width: 100%; 16 | height: auto; 17 | position: relative; 18 | } 19 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/withProviderContext.ts: -------------------------------------------------------------------------------- 1 | import { PlayerProp } from '../core/player/PlayerProps'; 2 | import { withPlayerContext } from '../core/player/withPlayerContext'; 3 | import { MediaProvider } from './MediaProvider'; 4 | 5 | export const withProviderContext = ( 6 | provider: MediaProvider, 7 | additionalProps: PlayerProp[] = [], 8 | ) => 9 | withPlayerContext(provider, [ 10 | 'autoplay', 11 | 'controls', 12 | 'language', 13 | 'muted', 14 | 'logger', 15 | 'loop', 16 | 'aspectRatio', 17 | 'playsinline', 18 | ...additionalProps, 19 | ]); 20 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/youtube/YouTubeEvent.ts: -------------------------------------------------------------------------------- 1 | export const enum YouTubeEvent { 2 | InitialDelivery = 'initialDelivery', 3 | Ready = 'onReady', 4 | InfoDelivery = 'infoDelivery', 5 | ApiInfoDelivery = 'apiInfoDelivery', 6 | } 7 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/youtube/YouTubePlayerState.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @see https://developers.google.com/youtube/iframe_api_reference#onStateChange 3 | */ 4 | export const enum YouTubePlayerState { 5 | Unstarted = -1, 6 | Ended = 0, 7 | Playing = 1, 8 | Paused = 2, 9 | Buffering = 3, 10 | Cued = 5, 11 | } 12 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/youtube/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {2} title="example.html" 2 | 3 | 4 | 5 | 6 | ``` 7 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/youtube/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {2} 2 | 3 | 4 | 5 | 6 | ``` 7 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/youtube/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {2,7} 2 | import React from 'react'; 3 | import { Player, Youtube } from '@vime/react'; 4 | 5 | function Example() { 6 | return ( 7 | 8 | 9 | {/* ... */} 10 | 11 | ); 12 | } 13 | ``` 14 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/youtube/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {5} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | 7 | {/* ... */} 8 | 9 | ); 10 | } 11 | } 12 | ``` 13 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/youtube/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {2,7} title="example.svelte" 2 | 3 | 4 | 5 | 6 | 7 | 10 | ``` 11 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/youtube/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {3,9,14} title="example.vue" 2 | 8 | 9 | 19 | ``` 20 | -------------------------------------------------------------------------------- /packages/core/src/components/providers/youtube/youtube.css: -------------------------------------------------------------------------------- 1 | :host { 2 | z-index: var(--vm-media-z-index); 3 | } 4 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/captions/captions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/captions/captions.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/captions/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {5} title="example.html" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/captions/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {5} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/captions/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {2,10} 2 | import React from 'react'; 3 | import { Player, Ui, Captions } from '@vime/react'; 4 | 5 | function Example() { 6 | return ( 7 | 8 | {/* ... */} 9 | 10 | {/* ... */} 11 | 12 | 13 | 14 | ); 15 | } 16 | ``` 17 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/captions/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {8} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | {/* ... */} 7 | 8 | {/* ... */} 9 | 10 | 11 | 12 | ); 13 | } 14 | } 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/captions/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {5,10} title="example.svelte" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 13 | ``` 14 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/captions/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {6,12,18} title="example.vue" 2 | 11 | 12 | 23 | ``` 24 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/click-to-play/click-to-play.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @prop --vm-click-to-play-z-index: The position in the UI z-axis stack inside the player. 3 | */ 4 | :host { 5 | position: absolute; 6 | top: 0; 7 | left: 0; 8 | width: 100%; 9 | height: 100%; 10 | pointer-events: none; 11 | z-index: var(--vm-click-to-play-z-index); 12 | } 13 | 14 | .clickToPlay { 15 | display: none; 16 | width: 100%; 17 | height: 100%; 18 | pointer-events: none; 19 | } 20 | 21 | .clickToPlay.enabled { 22 | display: inline-block; 23 | pointer-events: auto; 24 | } 25 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/click-to-play/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {5} title="example.html" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/click-to-play/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {5} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/click-to-play/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {2,10} 2 | import React from 'react'; 3 | import { Player, Ui, ClickToPlay } from '@vime/react'; 4 | 5 | function Example() { 6 | return ( 7 | 8 | {/* ... */} 9 | 10 | {/* ... */} 11 | 12 | 13 | 14 | ); 15 | } 16 | ``` 17 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/click-to-play/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {8} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | {/* ... */} 7 | 8 | {/* ... */} 9 | 10 | 11 | 12 | ); 13 | } 14 | } 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/click-to-play/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {5,10} title="example.svelte" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 13 | ``` 14 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/click-to-play/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {6,12,18} title="example.vue" 2 | 11 | 12 | 23 | ``` 24 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/caption-control/caption-control.css: -------------------------------------------------------------------------------- 1 | :host([hidden]) { 2 | display: none; 3 | } 4 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/caption-control/caption-control.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/controls/caption-control/caption-control.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/caption-control/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {7} title="example.html" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | ``` 13 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/caption-control/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {7} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | ``` 13 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/caption-control/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {6,16} 2 | import React from 'react'; 3 | import { Player, Ui, Controls, CaptionControl } from '@vime/react'; 4 | 5 | function Example() { 6 | return ( 7 | 8 | {/* ... */} 9 | 10 | {/* ... */} 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | } 18 | ``` 19 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/caption-control/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {9} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | {/* ... */} 7 | 8 | {/* ... */} 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | } 17 | ``` 18 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/caption-control/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {6,16} title="example.svelte" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/caption-control/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {7,18,26} title="example.vue" 2 | 13 | 14 | 26 | ``` 27 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/control-group/control-group.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/controls/control-group/control-group.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/control-group/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {6-8,10-14} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | ``` 20 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/control-group/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {6-8,10-13} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | ``` 19 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/control-spacer/control-spacer.css: -------------------------------------------------------------------------------- 1 | :host { 2 | flex: 1; 3 | } 4 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/control-spacer/control-spacer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/controls/control-spacer/control-spacer.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/control-spacer/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {8} title="example.html" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | ``` 15 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/control-spacer/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {8} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | ``` 15 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/control-spacer/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {11} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | {/* ... */} 7 | 8 | {/* ... */} 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | } 19 | } 20 | ``` 21 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/control/KeyboardControl.ts: -------------------------------------------------------------------------------- 1 | export interface KeyboardControl { 2 | /** 3 | * A slash (`/`) separated string of JS keyboard keys (`KeyboardEvent.key`), that when caught in 4 | * a `keydown` event, will trigger a `click` event on the control. 5 | * 6 | * @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key 7 | * 8 | * @example `f/Esc` 9 | */ 10 | keys?: string; 11 | } 12 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/control/control.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/controls/control/control.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/control/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {6-9} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Play (k) 10 | 11 | 12 | 13 | 14 | ``` 15 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/controls/controls.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/controls/controls/controls.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/controls/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {5-7} title="example.html" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/controls/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {5-7} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/controls/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {2,10-12} 2 | import React from 'react'; 3 | import { Player, Ui, Controls } from '@vime/react'; 4 | 5 | function Example() { 6 | return ( 7 | 8 | {/* ... */} 9 | 10 | {/* ... */} 11 | 12 | {/* ... */} 13 | 14 | 15 | 16 | ); 17 | } 18 | ``` 19 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/controls/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {8-10} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | {/* ... */} 7 | 8 | {/* ... */} 9 | 10 | {/* ... */} 11 | 12 | 13 | 14 | ); 15 | } 16 | } 17 | ``` 18 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/controls/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```tsx {5-7} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | ``` 12 | 13 | ```html {2} 14 | 17 | ``` 18 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/controls/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {5-7,13,19} title="example.vue" 2 | 12 | 13 | 24 | ``` 25 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/default-controls/default-controls.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: contents; 3 | pointer-events: none; 4 | z-index: var(--vm-controls-z-index); 5 | } 6 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/default-controls/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {5} title="example.html" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/default-controls/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {5} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/default-controls/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {2,10} 2 | import React from 'react'; 3 | import { Player, Ui, DefaultControls } from '@vime/react'; 4 | 5 | function Example() { 6 | return ( 7 | 8 | {/* ... */} 9 | 10 | {/* ... */} 11 | 12 | 13 | 14 | ); 15 | } 16 | ``` 17 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/default-controls/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {8} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | {/* ... */} 7 | 8 | {/* ... */} 9 | 10 | 11 | 12 | ); 13 | } 14 | } 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/default-controls/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```tsx {5} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ``` 10 | 11 | ```html {2} 12 | 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/default-controls/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {6,12,18} title="example.vue" 2 | 11 | 12 | 23 | ``` 24 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/fullscreen-control/fullscreen-control.css: -------------------------------------------------------------------------------- 1 | :host([hidden]) { 2 | display: none; 3 | } 4 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/fullscreen-control/fullscreen-control.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/controls/fullscreen-control/fullscreen-control.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/fullscreen-control/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {7} title="example.html" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | ``` 13 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/fullscreen-control/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {7} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | ``` 13 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/fullscreen-control/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {6,16} 2 | import React from 'react'; 3 | import { Player, Ui, Controls, FullscreenControl } from '@vime/react'; 4 | 5 | function Example() { 6 | return ( 7 | 8 | {/* ... */} 9 | 10 | {/* ... */} 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | } 18 | ``` 19 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/fullscreen-control/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {9} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | {/* ... */} 7 | 8 | {/* ... */} 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | } 17 | ``` 18 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/fullscreen-control/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {6,16} title="example.svelte" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/fullscreen-control/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {7,18,26} title="example.vue" 2 | 13 | 14 | 26 | ``` 27 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/mute-control/mute-control.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/controls/mute-control/mute-control.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/mute-control/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {7} title="example.html" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | ``` 13 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/mute-control/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {7} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | ``` 13 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/mute-control/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {2,11} 2 | import React from 'react'; 3 | import { Player, Ui, Controls, MuteControl } from '@vime/react'; 4 | 5 | function Example() { 6 | return ( 7 | 8 | {/* ... */} 9 | 10 | {/* ... */} 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | } 18 | ``` 19 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/mute-control/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {9} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | {/* ... */} 7 | 8 | {/* ... */} 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | } 17 | ``` 18 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/mute-control/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {6,16} title="example.svelte" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/mute-control/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {7,14,21} title="example.vue" 2 | 13 | 14 | 26 | ``` 27 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/pip-control/pip-control.css: -------------------------------------------------------------------------------- 1 | :host([hidden]) { 2 | display: none; 3 | } 4 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/pip-control/pip-control.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/controls/pip-control/pip-control.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/pip-control/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {7} title="example.html" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | ``` 13 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/pip-control/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {7} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | ``` 13 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/pip-control/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {2,11} 2 | import React from 'react'; 3 | import { Player, Ui, Controls, PipControl } from '@vime/react'; 4 | 5 | function Example() { 6 | return ( 7 | 8 | {/* ... */} 9 | 10 | {/* ... */} 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | } 18 | ``` 19 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/pip-control/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {9} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | {/* ... */} 7 | 8 | {/* ... */} 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | } 17 | ``` 18 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/pip-control/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {6,16} title="example.svelte" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/pip-control/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {7,14,21} title="example.vue" 2 | 13 | 14 | 26 | ``` 27 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/playback-control/playback-control.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/controls/playback-control/playback-control.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/playback-control/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {7} title="example.html" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | ``` 13 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/playback-control/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {7} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | ``` 13 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/playback-control/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {6,16} 2 | import React from 'react'; 3 | import { Player, Ui, Controls, PlaybackControl } from '@vime/react'; 4 | 5 | function Example() { 6 | return ( 7 | 8 | {/* ... */} 9 | 10 | {/* ... */} 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | } 18 | ``` 19 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/playback-control/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {9} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | {/* ... */} 7 | 8 | {/* ... */} 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | } 17 | ``` 18 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/playback-control/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {6,16} title="example.svelte" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/playback-control/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {7,18,26} title="example.vue" 2 | 13 | 14 | 26 | ``` 27 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/scrubber-control/scrubber-control.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/controls/scrubber-control/scrubber-control.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/scrubber-control/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {7} title="example.html" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | ``` 13 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/scrubber-control/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {7} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | ``` 13 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/scrubber-control/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {6,16} 2 | import React from 'react'; 3 | import { Player, Ui, Controls, ScrubberControl } from '@vime/react'; 4 | 5 | function Example() { 6 | return ( 7 | 8 | {/* ... */} 9 | 10 | {/* ... */} 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | } 18 | ``` 19 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/scrubber-control/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {9} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | {/* ... */} 7 | 8 | {/* ... */} 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | } 17 | ``` 18 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/scrubber-control/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {6,16} title="example.svelte" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/scrubber-control/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {7,18,26} title="example.vue" 2 | 13 | 14 | 26 | ``` 27 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/settings-control/settings-control.css: -------------------------------------------------------------------------------- 1 | .settingsControl.hidden { 2 | display: none; 3 | } 4 | 5 | .settingsControl { 6 | --vm-icon-transition: transform 0.3s ease; 7 | } 8 | 9 | .settingsControl.active { 10 | --vm-icon-transform: rotate(90deg); 11 | } 12 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/settings-control/settings-control.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/controls/settings-control/settings-control.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/settings-control/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {7} title="example.html" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | ``` 13 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/settings-control/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {7} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | ``` 13 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/settings-control/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {6,16} 2 | import React from 'react'; 3 | import { Player, Ui, Controls, SettingsControl } from '@vime/react'; 4 | 5 | function Example() { 6 | return ( 7 | 8 | {/* ... */} 9 | 10 | {/* ... */} 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | } 18 | ``` 19 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/settings-control/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {9} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | {/* ... */} 7 | 8 | {/* ... */} 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | } 17 | ``` 18 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/settings-control/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {6,16} title="example.svelte" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/settings-control/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {7,18,26} title="example.vue" 2 | 13 | 14 | 26 | ``` 27 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/volume-control/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {7} title="example.html" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | ``` 13 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/volume-control/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {7} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | ``` 13 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/volume-control/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {6,16} 2 | import React from 'react'; 3 | import { Player, Ui, Controls, VolumeControl } from '@vime/react'; 4 | 5 | function Example() { 6 | return ( 7 | 8 | {/* ... */} 9 | 10 | {/* ... */} 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | } 18 | ``` 19 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/volume-control/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {9} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | {/* ... */} 7 | 8 | {/* ... */} 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | } 17 | ``` 18 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/volume-control/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {6,16} title="example.svelte" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/volume-control/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {7,18,26} title="example.vue" 2 | 13 | 14 | 26 | ``` 27 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/controls/volume-control/volume-control.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/controls/volume-control/volume-control.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/dbl-click-fullscreen/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {5} title="example.html" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/dbl-click-fullscreen/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {5} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/dbl-click-fullscreen/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {2,10} 2 | import React from 'react'; 3 | import { Player, Ui, DblClickFullscreen } from '@vime/react'; 4 | 5 | function Example() { 6 | return ( 7 | 8 | {/* ... */} 9 | 10 | {/* ... */} 11 | 12 | 13 | 14 | ); 15 | } 16 | ``` 17 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/dbl-click-fullscreen/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {8} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | {/* ... */} 7 | 8 | {/* ... */} 9 | 10 | 11 | 12 | ); 13 | } 14 | } 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/dbl-click-fullscreen/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {5,10} title="example.svelte" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 13 | ``` 14 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/dbl-click-fullscreen/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {6,12,18} title="example.vue" 2 | 11 | 12 | 23 | ``` 24 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/default-ui/default-ui--audio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/default-ui/default-ui--audio.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/default-ui/default-ui--desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/default-ui/default-ui--desktop.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/default-ui/default-ui--mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/default-ui/default-ui--mobile.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/default-ui/default-ui.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: contents; 3 | pointer-events: none; 4 | } 5 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/default-ui/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {3} title="example.html" 2 | 3 | 4 | 5 | 6 | ``` 7 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/default-ui/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {3} 2 | 3 | 4 | 5 | 6 | ``` 7 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/default-ui/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {2,8} 2 | import React from 'react'; 3 | import { Player, DefaultUi } from '@vime/react'; 4 | 5 | function Example() { 6 | return ( 7 | 8 | {/* ... */} 9 | 10 | 11 | ); 12 | } 13 | ``` 14 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/default-ui/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {6} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | {/* ... */} 7 | 8 | 9 | ); 10 | } 11 | } 12 | ``` 13 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/default-ui/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {3,7} title="example.svelte" 2 | 3 | 4 | 5 | 6 | 7 | 10 | ``` 11 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/default-ui/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {4,9,14} title="example.vue" 2 | 8 | 9 | 19 | ``` 20 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/icon-library/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {5,8,15} title="example.html" 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | ``` 14 | 15 | ```ts title="example.ts" 16 | class Example { 17 | customResolver = (iconName: string) => `/icons/${iconName}.svg`; 18 | } 19 | ``` 20 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/icon-library/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {5,8,14-15} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/icon-library/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {2,10,13} 2 | import React from "react"; 3 | import { Player, Ui, IconLibrary } from "@vime/react"; 4 | 5 | function Example() { 6 | return ( 7 | {/* Change the icons property to the name of the library you'd like to use. */} 8 | 9 | {/* ... */} 10 | 11 | {/* Register a custom icon library. */} 12 | `/icons/${iconName}.svg`} /> 13 | 14 | 15 | ); 16 | } 17 | ``` 18 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/icon-library/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {8,11} 2 | class Example { 3 | render() { 4 | return ( 5 | {/* Change the icons property to the name of the library you'd like to use. */} 6 | 7 | {/* ... */} 8 | 9 | {/* Register a custom icon library. */} 10 | `/icons/${iconName}.svg`} /> 11 | 12 | 13 | ); 14 | } 15 | } 16 | ``` 17 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/icon-library/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```tsx {5,8,13} title="example.svelte" 2 | 3 | 4 | 5 | 6 | 7 | `/icons/${iconName}.svg`} /> 8 | 9 | 10 | ``` 11 | 12 | ```html 13 | 16 | ``` 17 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/icon/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html title="example.html" 2 | 3 | 4 | 5 | 6 | 7 | ``` 8 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/icon/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html 2 | 3 | 4 | 5 | 6 | 7 | ``` 8 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/icon/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {2,8,11} 2 | import React from 'react'; 3 | import { Icon } from '@vime/react'; 4 | 5 | function Example() { 6 | return ( 7 |
8 | {/* Src. */} 9 | 10 | 11 | {/* Icon library. */} 12 | 13 |
14 | ); 15 | } 16 | ``` 17 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/icon/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {6,9} 2 | class Example { 3 | render() { 4 | return ( 5 |
6 | {/* Src. */} 7 | 8 | 9 | {/* Icon library. */} 10 | 11 |
12 | ); 13 | } 14 | } 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/icon/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {2,5,8} title="example.svelte" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 21 | ``` 22 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/live-indicator/live-indicator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/live-indicator/live-indicator.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/live-indicator/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {7} title="example.html" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | ``` 13 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/live-indicator/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {7} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | ``` 13 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/live-indicator/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {6,16} 2 | import React from 'react'; 3 | import { Player, Ui, Controls, LiveIndicator } from '@vime/react'; 4 | 5 | function Example() { 6 | return ( 7 | 8 | {/* ... */} 9 | 10 | {/* ... */} 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | } 18 | ``` 19 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/live-indicator/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {9} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | {/* ... */} 7 | 8 | {/* ... */} 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | } 17 | ``` 18 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/live-indicator/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {6,17} title="example.svelte" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/live-indicator/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {7,18,26} title="example.vue" 2 | 13 | 14 | 26 | ``` 27 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/loading-screen/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {5-7} title="example.html" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/loading-screen/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {5-7} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/loading-screen/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {2,10-12} 2 | import React from 'react'; 3 | import { Player, Ui, LoadingScreen } from '@vime/react'; 4 | 5 | function Example() { 6 | return ( 7 | 8 | {/* ... */} 9 | 10 | {/* ... */} 11 | 12 | {/* Pass in content here such as a logo (optional). */} 13 | 14 | 15 | 16 | ); 17 | } 18 | ``` 19 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/loading-screen/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {8-10} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | {/* ... */} 7 | 8 | {/* ... */} 9 | 10 | {/* Pass in content here such as a logo (optional). */} 11 | 12 | 13 | 14 | ); 15 | } 16 | } 17 | ``` 18 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/loading-screen/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {5-7,12} title="example.svelte" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/loading-screen/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {6-8,14,20} title="example.vue" 2 | 13 | 14 | 25 | ``` 26 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/poster/poster.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/poster/poster.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/poster/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {5} title="example.html" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/poster/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {5} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/poster/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {2,10} 2 | import React from 'react'; 3 | import { Player, Ui, Poster } from '@vime/react'; 4 | 5 | function Example() { 6 | return ( 7 | 8 | {/* ... */} 9 | 10 | {/* ... */} 11 | 12 | 13 | 14 | ); 15 | } 16 | ``` 17 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/poster/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {8} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | {/* ... */} 7 | 8 | {/* ... */} 9 | 10 | 11 | 12 | ); 13 | } 14 | } 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/poster/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {5,10} title="example.svelte" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 13 | ``` 14 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/poster/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {6,12,18} title="example.vue" 2 | 11 | 12 | 23 | ``` 24 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/scrim/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {5} title="example.html" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/scrim/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {5} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/scrim/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {2,10} 2 | import React from 'react'; 3 | import { Player, Ui, Scrim } from '@vime/react'; 4 | 5 | function Example() { 6 | return ( 7 | 8 | {/* ... */} 9 | 10 | {/* ... */} 11 | 12 | 13 | 14 | ); 15 | } 16 | ``` 17 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/scrim/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {8} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | {/* ... */} 7 | 8 | {/* ... */} 9 | 10 | 11 | 12 | ); 13 | } 14 | } 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/scrim/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {5,10} title="example.svelte" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 13 | ``` 14 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/scrim/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {6,12,18} title="example.vue" 2 | 11 | 12 | 23 | ``` 24 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/default-settings/default-settings.css: -------------------------------------------------------------------------------- 1 | :host { 2 | z-index: var(--vm-menu-z-index); 3 | } 4 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/default-settings/default-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/settings/default-settings/default-settings.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/default-settings/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {5} title="example.html" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/default-settings/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {5} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/default-settings/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {2,10} 2 | import React from 'react'; 3 | import { Player, Ui, DefaultSettings } from '@vime/react'; 4 | 5 | function Example() { 6 | return ( 7 | 8 | {/* ... */} 9 | 10 | {/* ... */} 11 | 12 | 13 | 14 | ); 15 | } 16 | ``` 17 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/default-settings/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {8} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | {/* ... */} 7 | 8 | {/* ... */} 9 | 10 | 11 | 12 | ); 13 | } 14 | } 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/default-settings/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {5,10} title="example.svelte" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 13 | ``` 14 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/default-settings/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {6,12,18} title="example.vue" 2 | 11 | 12 | 23 | ``` 24 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/menu-item/menu-item.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/settings/menu-item/menu-item.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/menu-item/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {6} title="example.html" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/menu-item/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {6} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/menu-item/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {2,11} 2 | import React from 'react'; 3 | import { Player, Ui, Settings, MenuItem } from '@vime/react'; 4 | 5 | function Example() { 6 | return ( 7 | 8 | {/* ... */} 9 | 10 | {/* ... */} 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | } 18 | ``` 19 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/menu-item/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {9} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | {/* ... */} 7 | 8 | {/* ... */} 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | } 17 | ``` 18 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/menu-item/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {6,16} title="example.svelte" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/menu-item/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {7,14,21} title="example.vue" 2 | 13 | 14 | 26 | ``` 27 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/menu-radio-group/menu-radio-group.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/settings/menu-radio-group/menu-radio-group.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/menu-radio-group/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {7-11} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ``` 18 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/menu-radio/menu-radio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/settings/menu-radio/menu-radio.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/menu-radio/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {8-10} title="example.html" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ``` 18 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/menu-radio/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {8-10} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ``` 18 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/menu/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/settings/menu/menu.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/menu/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {5-7} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/settings/SettingsController.ts: -------------------------------------------------------------------------------- 1 | export interface SettingsController extends HTMLElement { 2 | menu?: string; 3 | expanded: boolean; 4 | } 5 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/settings/settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/settings/settings/settings.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/settings/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {5-7} title="example.html" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/settings/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {5-7} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/settings/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {2,10} 2 | import React from 'react'; 3 | import { Player, Ui, Settings } from '@vime/react'; 4 | 5 | function Example() { 6 | return ( 7 | 8 | {/* ... */} 9 | 10 | {/* ... */} 11 | {/* ... */} 12 | 13 | 14 | ); 15 | } 16 | ``` 17 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/settings/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {8} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | {/* ... */} 7 | 8 | {/* ... */} 9 | {/* ... */} 10 | 11 | 12 | ); 13 | } 14 | } 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/settings/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {5-7,12} title="example.svelte" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/settings/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {6-8,14,20} title="example.vue" 2 | 13 | 14 | 25 | ``` 26 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/submenu/submenu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/settings/submenu/submenu.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/submenu/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {6-8} title="example.html" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | ``` 14 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/submenu/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {6-8} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | ``` 14 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/submenu/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {2,11} 2 | import React from 'react'; 3 | import { Player, Ui, Settings, Submenu } from '@vime/react'; 4 | 5 | function Example() { 6 | return ( 7 | 8 | {/* ... */} 9 | 10 | {/* ... */} 11 | 12 | {/* ... */} 13 | 14 | 15 | 16 | ); 17 | } 18 | ``` 19 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/submenu/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {8-10} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | {/* ... */} 7 | 8 | {/* ... */} 9 | 10 | {/* ... */} 11 | 12 | 13 | 14 | ); 15 | } 16 | } 17 | ``` 18 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/settings/submenu/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {6-8,18} title="example.svelte" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | ``` 18 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/skeleton/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {5} title="example.html" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/skeleton/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {5} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/skeleton/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {2,10} 2 | import React from 'react'; 3 | import { Player, Ui, Skeleton } from '@vime/react'; 4 | 5 | function Example() { 6 | return ( 7 | 8 | {/* ... */} 9 | 10 | {/* ... */} 11 | 12 | 13 | 14 | ); 15 | } 16 | ``` 17 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/skeleton/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {8} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | {/* ... */} 7 | 8 | {/* ... */} 9 | 10 | 11 | 12 | ); 13 | } 14 | } 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/skeleton/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {5,10} title="example.svelte" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 13 | ``` 14 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/skeleton/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {6,12,18} title="example.vue" 2 | 11 | 12 | 23 | ``` 24 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/slider/slider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/slider/slider.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/slider/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html title="example.html" 2 | 9 | ``` 10 | 11 | ```ts title="example.ts" 12 | class Example { 13 | value = 50; 14 | 15 | onValueChange(event: CustomEvent) { 16 | this.value = event.detail; 17 | } 18 | } 19 | ``` 20 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/slider/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html 2 | 3 | 4 | 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/slider/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {2,12-18} 2 | import React, { useState } from 'react'; 3 | import { Slider } from '@vime/react'; 4 | 5 | function Example() { 6 | const [value, setValue] = useState(50); 7 | 8 | const onValueChange = (event: CustomEvent) => { 9 | setValue(event.detail); 10 | }; 11 | 12 | return ( 13 | 20 | ); 21 | } 22 | ``` 23 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/slider/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {10-16} 2 | class Example { 3 | @State() value = 50; 4 | 5 | private onValueChange(event: CustomEvent) { 6 | this.value = event.detail; 7 | } 8 | 9 | render() { 10 | return ( 11 | 18 | ); 19 | } 20 | } 21 | ``` 22 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/slider/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```tsx 2 | 9 | ``` 10 | 11 | ```html {2} 12 | 21 | ``` 22 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/slider/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {2-8,12,16} title="example.vue" 2 | 11 | 12 | 29 | ``` 30 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/spinner/spinner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/spinner/spinner.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/spinner/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html {5} title="example.html" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/spinner/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html {5} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/spinner/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {2,10} 2 | import React from 'react'; 3 | import { Player, Ui, Spinner } from '@vime/react'; 4 | 5 | function Example() { 6 | return ( 7 | 8 | {/* ... */} 9 | 10 | {/* ... */} 11 | 12 | 13 | 14 | ); 15 | } 16 | ``` 17 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/spinner/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {8} 2 | class Example { 3 | render() { 4 | return ( 5 | 6 | {/* ... */} 7 | 8 | {/* ... */} 9 | 10 | 11 | 12 | ); 13 | } 14 | } 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/spinner/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {5,10} title="example.svelte" 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 13 | ``` 14 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/spinner/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {6,12,18} title="example.vue" 2 | 11 | 12 | 23 | ``` 24 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/time/current-time/current-time.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | } 6 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/time/current-time/current-time.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/time/current-time/current-time.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/time/current-time/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html title="example.html" 2 | 3 | ``` 4 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/time/current-time/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html 2 | 3 | ``` 4 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/time/current-time/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {2,5} 2 | import React from 'react'; 3 | import { CurrentTime } from '@vime/react'; 4 | 5 | function Example() { 6 | return ; 7 | } 8 | ``` 9 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/time/current-time/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {3} 2 | class Example { 3 | render() { 4 | return ; 5 | } 6 | } 7 | ``` 8 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/time/current-time/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {1,4} title="example.svelte" 2 | 3 | 4 | 7 | ``` 8 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/time/current-time/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {2,6,10} title="example.vue" 2 | 5 | 6 | 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/time/end-time/end-time.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | } 6 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/time/end-time/end-time.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/time/end-time/end-time.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/time/end-time/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html title="example.html" 2 | 3 | ``` 4 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/time/end-time/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html 2 | 3 | ``` 4 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/time/end-time/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {2,5} 2 | import React from 'react'; 3 | import { EndTime } from '@vime/react'; 4 | 5 | function Example() { 6 | return ; 7 | } 8 | ``` 9 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/time/end-time/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {3} 2 | class Example { 3 | render() { 4 | return ; 5 | } 6 | } 7 | ``` 8 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/time/end-time/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {1,4} title="example.svelte" 2 | 3 | 4 | 7 | ``` 8 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/time/end-time/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {2,6,10} title="example.vue" 2 | 5 | 6 | 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/time/time-progress/time-progress.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @prop --vm-time-color: The color of the text displaying the time. 3 | */ 4 | .timeProgress { 5 | display: flex; 6 | width: 100%; 7 | height: 100%; 8 | align-items: center; 9 | color: var(--vm-time-color); 10 | } 11 | 12 | .separator { 13 | margin: 0 4px; 14 | } 15 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/time/time-progress/time-progress.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/time/time-progress/time-progress.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/time/time-progress/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html title="example.html" 2 | 3 | ``` 4 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/time/time-progress/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html 2 | 3 | ``` 4 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/time/time-progress/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {2,5} 2 | import React from 'react'; 3 | import { TimeProgress } from '@vime/react'; 4 | 5 | function Example() { 6 | return ; 7 | } 8 | ``` 9 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/time/time-progress/usage/stencil.md: -------------------------------------------------------------------------------- 1 | ```tsx {3} 2 | class Example { 3 | render() { 4 | return ; 5 | } 6 | } 7 | ``` 8 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/time/time-progress/usage/svelte.md: -------------------------------------------------------------------------------- 1 | ```html {1,4} title="example.svelte" 2 | 3 | 4 | 7 | ``` 8 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/time/time-progress/usage/vue.md: -------------------------------------------------------------------------------- 1 | ```html {2,6,10} title="example.vue" 2 | 5 | 6 | 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/time/time/time.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @prop --vm-time-color: The color of the text displaying the time. 3 | * @prop --vm-time-font-size: The size of the font displaying the time. 4 | * @prop --vm-time-font-weight: The weight of the font displaying the time. 5 | */ 6 | .time { 7 | display: flex; 8 | align-items: center; 9 | color: var(--vm-time-color); 10 | font-size: var(--vm-time-font-size); 11 | font-weight: var(--vm-time-font-weight); 12 | } 13 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/time/time/time.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vime-js/vime/295690d7b33b64c34da982015d56b3993cf27a04/packages/core/src/components/ui/time/time/time.png -------------------------------------------------------------------------------- /packages/core/src/components/ui/time/time/usage/angular.md: -------------------------------------------------------------------------------- 1 | ```html title="example.html" 2 | 3 | ``` 4 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/time/time/usage/html.md: -------------------------------------------------------------------------------- 1 | ```html 2 | 3 | ``` 4 | -------------------------------------------------------------------------------- /packages/core/src/components/ui/time/time/usage/react.md: -------------------------------------------------------------------------------- 1 | ```tsx {2,5} 2 | import React from 'react'; 3 | import { Time } from '@vime/react'; 4 | 5 | function Example() { 6 | return