diff --git a/Dockerfile b/Dockerfile index f2bffb4..8cb017b 100644 --- a/Dockerfile +++ b/Dockerfile @@ -13,13 +13,13 @@ WORKDIR /usr/voka COPY package*.json . COPY develop.sh . +COPY vendors . RUN < Title + diff --git a/develop.sh b/develop.sh index 319198b..9a58dff 100644 --- a/develop.sh +++ b/develop.sh @@ -1,7 +1,7 @@ #!/bin/bash # Start nodemon -nodemon --watch src -e ts --exec npm run build & +nodemon --watch src --watch vendors -e ts --exec npm run build & # Start lite-server lite-server -c configs/lite-server-config.json \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index a6e4075..5a851f7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,7 @@ "": { "name": "voka-player", "version": "0.0.1", + "hasInstallScript": true, "license": "ISC", "dependencies": { "@types/node": "^22.10.10", @@ -6553,6 +6554,20 @@ "node": ">=8" } }, + "node_modules/yaml": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz", + "integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==", + "license": "ISC", + "optional": true, + "peer": true, + "bin": { + "yaml": "bin.mjs" + }, + "engines": { + "node": ">= 14.6" + } + }, "node_modules/yn": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz", @@ -6561,6 +6576,48 @@ "engines": { "node": ">=6" } + }, + "vendors/@silvermine/videojs-chromecast": { + "version": "1.5.0", + "extraneous": true, + "license": "MIT", + "dependencies": { + "webcomponents.js": "git+https://git@github.com/webcomponents/webcomponentsjs.git#v0.7.24" + }, + "devDependencies": { + "@babel/core": "7.20.7", + "@babel/preset-env": "7.20.2", + "@commitlint/cli": "8.3.5", + "@commitlint/travis-cli": "8.3.5", + "@silvermine/eslint-config": "3.0.1", + "@silvermine/standardization": "2.2.0", + "autoprefixer": "8.6.5", + "babel-eslint": "10.1.0", + "babelify": "10.0.0", + "check-node-version": "4.0.3", + "core-js": "3.11.0", + "coveralls": "3.0.2", + "eslint": "6.8.0", + "expect.js": "0.3.1", + "grunt": "1.4.0", + "grunt-browserify": "5.3.0", + "grunt-contrib-clean": "2.0.0", + "grunt-contrib-copy": "1.0.0", + "grunt-contrib-uglify": "3.0.1", + "grunt-contrib-watch": "1.1.0", + "grunt-postcss": "0.9.0", + "grunt-sass": "3.1.0", + "mocha": "8.4.0", + "mocha-lcov-reporter": "1.3.0", + "nyc": "15.1.0", + "rewire": "2.5.2", + "sass": "1.52.3", + "silvermine-serverless-utils": "git+https://github.com/silvermine/serverless-utils.git#910f1149af824fc8d0fa840878079c7d3df0f414", + "sinon": "2.3.5" + }, + "peerDependencies": { + "video.js": ">= 6 < 9" + } } } } diff --git a/package.json b/package.json index bbc1bff..124f886 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,8 @@ "scripts": { "lint:fix": "npm run lint -- --fix", "build": "tsup --env.NODE_ENV development", - "build-prod": "tsup --env.NODE_ENV production" + "build-prod": "tsup --env.NODE_ENV production", + "postinstall": "npm install ./vendors/@silvermine/videojs-chromecast --no-package-lock --no-save" }, "lint-staged": { "**/*.ts": [ diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss index 087cf54..5c86477 100644 --- a/src/assets/scss/main.scss +++ b/src/assets/scss/main.scss @@ -3,6 +3,9 @@ @use "../scss/mixins"; @use "../scss/utilities"; +// External Components +@use "~@silvermine/videojs-chromecast/src/scss/videojs-chromecast"; + // Components @use "../scss/components/layout"; @use "../scss/components/svg"; diff --git a/src/components/Skin.ts b/src/components/Skin.ts index e5b6ae4..6d17bae 100644 --- a/src/components/Skin.ts +++ b/src/components/Skin.ts @@ -40,6 +40,14 @@ class Skin extends Component { } super(player, options_) + + // Укажем controlBar явно, так как у нас кастомный скин, а controlBar используется + // плагином chromecast для авто добавления кнопки + const controlBar = this.getChild('BottomPanel'); + if (controlBar) { + // Добавим в player для совместимости с плагинами и API + (player as any).controlBar = controlBar; + } } /** diff --git a/src/internal/player/VokaCorePlayer.ts b/src/internal/player/VokaCorePlayer.ts index 206649e..e508d60 100755 --- a/src/internal/player/VokaCorePlayer.ts +++ b/src/internal/player/VokaCorePlayer.ts @@ -1,5 +1,6 @@ import videojs from 'video.js' import Player from 'video.js/dist/types/player' +import chromecastPlugin from '@silvermine/videojs-chromecast/' import { EventBus } from 'ts-bus' import { ITimeRange} from '@/public/IVokaPlayer' import { AutoplayChecker } from '@/internal/utils/AutoplayChecker' @@ -311,6 +312,9 @@ namespace VokaCorePlayer { playableContent['subtitlesUrl'] = content.subtitlesUrl this.player.src(playableContent) + // hls.js в процессе работы может менять исходник на blob, а такое + // не подходит для хромкаст. Временное решение для сохранения исходника. + this.player._originalSrc = playableContent this.bus.publish(VokaBusEvent.switchContent(content)) this.bus.publish( VokaBusEvent.adsMarkersSet({ @@ -360,6 +364,9 @@ namespace VokaCorePlayer { videojs.log.level('debug') + // Явная регистрация плагина chromecast нужна из-за структуры плагина + chromecastPlugin(videojs) + const playerOptions = this.initOptions(options) const player = videojs( playerContainer, @@ -422,7 +429,7 @@ namespace VokaCorePlayer { plugins.vokaMetricsPlugin = { bus: this.bus, } - + plugins.chromecast = { buttonPositionIndex: -2, addCastLabelToButton: true } const childrenComponents = [ // Non-visual component, not in UI layer list. 'mediaLoader' // Required loader, that load tech list! @@ -444,6 +451,7 @@ namespace VokaCorePlayer { autoplay: options.autoplay == "muted" || options.autoplay == "true", bus: options.bus, techOrder: [ + 'chromecast', VokaWebOSTech.TECH_NAME, VokaTizenTech.TECH_NAME, VokaAppleTech.TECH_NAME, diff --git a/vendors/@silvermine/videojs-chromecast/.github/workflows/ci.yml b/vendors/@silvermine/videojs-chromecast/.github/workflows/ci.yml new file mode 100644 index 0000000..1ef8456 --- /dev/null +++ b/vendors/@silvermine/videojs-chromecast/.github/workflows/ci.yml @@ -0,0 +1,38 @@ +name: CI + +on: [ push, pull_request ] + +jobs: + build: + runs-on: ubuntu-latest + steps: + - + uses: actions/checkout@v3 + with: + fetch-depth: 0 # Fetch all history + - + uses: actions/setup-node@v3 + with: + node-version-file: '.nvmrc' + - run: npm i -g npm@8.5.5 + - run: npm ci + - run: npm run standards + test: + needs: [ build ] + runs-on: ubuntu-latest + strategy: + fail-fast: false + matrix: + node-version: [ 12, 14, 16, 'lts/*', 'latest' ] + steps: + - uses: actions/checkout@v3 + - + name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v3 + with: + node-version: ${{ matrix.node-version }} + - run: npm i -g npm@8.5.5 + - run: npm ci # Reinstall the dependencies to ensure they install with the current version of node + - run: npm test + - name: Coveralls + uses: coverallsapp/github-action@v1 diff --git a/vendors/@silvermine/videojs-chromecast/.jsdoc b/vendors/@silvermine/videojs-chromecast/.jsdoc new file mode 100644 index 0000000..831f1dc --- /dev/null +++ b/vendors/@silvermine/videojs-chromecast/.jsdoc @@ -0,0 +1,3 @@ +{ + "plugins": [ "plugins/markdown" ] +} diff --git a/vendors/@silvermine/videojs-chromecast/.nvmrc b/vendors/@silvermine/videojs-chromecast/.nvmrc new file mode 100644 index 0000000..99cdd80 --- /dev/null +++ b/vendors/@silvermine/videojs-chromecast/.nvmrc @@ -0,0 +1 @@ +16.15.0 diff --git a/vendors/@silvermine/videojs-chromecast/.nycrc.json b/vendors/@silvermine/videojs-chromecast/.nycrc.json new file mode 100644 index 0000000..11f0896 --- /dev/null +++ b/vendors/@silvermine/videojs-chromecast/.nycrc.json @@ -0,0 +1,16 @@ +{ + "include": [ + "src/**/*.js" + ], + "extension": [ + ".js" + ], + "reporter": [ + "text-summary", + "html", + "lcov" + ], + "instrument": true, + "sourceMap": true, + "all": true +} diff --git a/vendors/@silvermine/videojs-chromecast/.stylelintrc.yml b/vendors/@silvermine/videojs-chromecast/.stylelintrc.yml new file mode 100644 index 0000000..40396ee --- /dev/null +++ b/vendors/@silvermine/videojs-chromecast/.stylelintrc.yml @@ -0,0 +1 @@ +extends: ./node_modules/@silvermine/standardization/.stylelintrc.yml diff --git a/vendors/@silvermine/videojs-chromecast/CHANGELOG.md b/vendors/@silvermine/videojs-chromecast/CHANGELOG.md new file mode 100644 index 0000000..1353ab0 --- /dev/null +++ b/vendors/@silvermine/videojs-chromecast/CHANGELOG.md @@ -0,0 +1,42 @@ +# Changelog + +All notable changes to this project will be documented in this file. +See [our coding standards][commit-messages] for commit guidelines. + +## [1.5.0](https://github.com/silvermine/videojs-chromecast/compare/v1.4.1...v1.5.0) (2023-11-07) + + +### Features + +* Allow modifying the load request ([#123](https://github.com/silvermine/videojs-chromecast/issues/123), [#141](https://github.com/silvermine/videojs-chromecast/issues/141)) ([7cee052](https://github.com/silvermine/videojs-chromecast/commit/7cee052dcd5473448f882d67bb5bc9d8e9a1763c)) + + +### Bug Fixes + +* Clear the close session timeout after new source starts playing ([4a8eb31](https://github.com/silvermine/videojs-chromecast/commit/4a8eb31faa241235c54c1f8dec897571360e7f19)) + + +### [1.4.1](https://github.com/silvermine/videojs-chromecast/compare/v1.4.0...v1.4.1) (2023-03-21) + + +### Bug Fixes + +* remove deprecated `.extend` method ([994b5b9](https://github.com/silvermine/videojs-chromecast/commit/994b5b9ae6df89f657e2ff4a920056826094b54f)), closes [#152](https://github.com/silvermine/videojs-chromecast/issues/152) [#147](https://github.com/silvermine/videojs-chromecast/issues/147) + + +## [1.4.0](https://github.com/silvermine/videojs-chromecast/compare/v1.3.4...v1.4.0) (2023-03-21) + + +### Features + +* Add optional "Cast" label to button component ([220c362](https://github.com/silvermine/videojs-chromecast/commit/220c36247c9ac992b757b97257e24e665ac3feb5)) +* Change label to "Disconnect Cast" when connected ([a7f495b](https://github.com/silvermine/videojs-chromecast/commit/a7f495b78d8472322079a75a834440fd20858b3c)) +* Set image on cast device if the video has a poster ([902464c](https://github.com/silvermine/videojs-chromecast/commit/902464cecf468c554fb062bd93d09bae9e303922)) + + +### Bug Fixes + +* Chromecast button with label styling breaking on cast/disconnect ([2a181de](https://github.com/silvermine/videojs-chromecast/commit/2a181dea847927050b57453f9474a2f47028fdca)) + + +[commit-messages]: https://github.com/silvermine/silvermine-info/blob/master/commit-history.md#commit-messages diff --git a/vendors/@silvermine/videojs-chromecast/LICENSE b/vendors/@silvermine/videojs-chromecast/LICENSE new file mode 100644 index 0000000..873928e --- /dev/null +++ b/vendors/@silvermine/videojs-chromecast/LICENSE @@ -0,0 +1,20 @@ +The MIT License (MIT) +Copyright (c) 2017 Jeremy Thomerson + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies +of the Software, and to permit persons to whom the Software is furnished to do +so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/vendors/@silvermine/videojs-chromecast/README.md b/vendors/@silvermine/videojs-chromecast/README.md new file mode 100644 index 0000000..5cad381 --- /dev/null +++ b/vendors/@silvermine/videojs-chromecast/README.md @@ -0,0 +1,369 @@ +# Silvermine VideoJS Chromecast Plugin + + +[![Build Status](https://travis-ci.org/silvermine/videojs-chromecast.svg?branch=master)](https://travis-ci.org/silvermine/videojs-chromecast) +[![Coverage Status](https://coveralls.io/repos/github/silvermine/videojs-chromecast/badge.svg?branch=master)](https://coveralls.io/github/silvermine/videojs-chromecast?branch=master) +[![Dependency Status](https://david-dm.org/silvermine/videojs-chromecast.svg)](https://david-dm.org/silvermine/videojs-chromecast) +[![Dev Dependency Status](https://david-dm.org/silvermine/videojs-chromecast/dev-status.svg)](https://david-dm.org/silvermine/videojs-chromecast#info=devDependencies&view=table) + + + +## What is it? + +A plugin for [videojs](http://videojs.com/) versions 6+ that adds a button to the control +bar which will cast videos to a Chromecast. + + +## How do I use it? + +The `@silvermine/videojs-chromecast` plugin includes 3 types of assets: JavaScript, CSS, +and images. + +You can either build the plugin locally and use the assets that are output from the build +process directly, or you can install the plugin as an NPM module, include the +JavaScript and SCSS source in your project using a Common-JS module loader and SASS build +process, and copy the images from the image source folder to your project. + +Note that regardless of whether you are using this plugin via the pre-built JS or as a +module, the Chromecast framework will need to be included after the plugin. For example: + +```html + + + +``` + +### Building the plugin locally + + 1. Either clone this repository or install the `@silvermine/videojs-chromecast` module + using `npm install @silvermine/videojs-chromecast`. + 2. Ensure that `@silvermine/videojs-chromecast`'s `devDependencies` are installed by + running `npm install` from within the `videojs-chromecast` folder. + 3. Run `grunt build` to build and copy the JavaScript, CSS and image files to the + `videojs-chromecast/dist` folder. + 4. Copy the plugin's files from the `dist` folder into your project as needed. + 5. Ensure that the images in the `dist/images` folder are accessible at `./images/`, + relative to where the plugin's CSS is located. If, for example, your CSS is located + at `https://example.com/plugins/silvermine-videojs-chromecast.css`, then the + plugin's images should be located at `https://example.com/plugins/images/`. + 6. Follow the steps in the "Configuration" section below. + +Note: when adding the plugin's JavaScript to your web page, include the +`silvermine-videojs-chromecast.min.js` JavaScript file in your HTML *after* loading +Video.js. The plugin's built JavaScript file expects there to be a reference to Video.js +at `window.videojs` and will throw an error if it does not exist. + +### Initialization options + + * **`preloadWebComponents`** (default: `false`) - The Chromecast framework relies on + the `webcomponents.js` polyfill when a browser does not have + `document.registerElement` in order to create the `` custom + component (which is not used by this plugin). If you are using jQuery, this polyfill + must be loaded and initialized before jQuery is initialized. Unfortunately, the + Chromecast framework loads the `webcomponents.js` polyfill via a dynamically created + ` + +``` + +### Configuration + +Once the plugin has been loaded and registered, configure it and add it to your Video.js +player using Video.js' plugin configuration option (see the section under the heading +"Setting up a Plugin" on [Video.js' plugin documentation page][videojs-docs]. + +**Important: In addition to defining plugin configuration, you are required to define the +player's `techOrder` option, setting `'chromecast'` as the first Tech in the list.** Below +is an example of the minimum required configuration for the Chromecast plugin to function: + +```js +var options; + +options = { + controls: true, + techOrder: [ 'chromecast', 'html5' ], // You may have more Tech, such as Flash or HLS + plugins: { + chromecast: {} + } +}; + +videojs(document.getElementById('myVideoElement'), options); +``` + +Please note that even if you choose not to use any of the configuration options, you must +either provide a `chromecast` entry in the `plugins` option for Video.js to initialize the +plugin for you: + +```js +options = { + plugins: { + chromecast: {} + } +}; +``` + +or you must initialize the plugin manually: + +```js +var player = videojs(document.getElementById('myVideoElement')); + +player.chromecast(); // initializes the Chromecast plugin +``` + +#### Configuration options + +##### Plugin configuration + + * **`plugins.chromecast.receiverAppID`** - the string ID of a custom [Chromecast + receiver app][cast-receiver] to use. Defaults to the [default Media Receiver + ID][def-cast-id]. + * **`plugins.chromecast.addButtonToControlBar`** - a `boolean` flag that tells the + plugin whether or not it should automatically add the Chromecast button to the + Video.js player's control bar component. Defaults to `true`. + * **`plugins.chromecast.buttonPositionIndex`** - a zero-based number specifying the + index of the Chromecast button among the control bar's child components (if + `addButtonToControlBar` is set to `true`). By default the Chromecast Button is added + as the last child of the control bar. A value less than 0 puts the button at the + specified position from the end of the control bar. Note that it's likely not all + child components of the control bar are visible. + * **`plugins.chromecast.addCastLabelToButton`** (default: `false`) - by default, the + Chromecast button component will display only an icon. Setting `addCastLabelToButton` + to `true` will display a label titled `"Cast"` alongside the default icon. + +##### Chromecast Tech configuration + + * **`chromecast.requestTitleFn`** - a function that this plugin calls when it needs a + string that will be the title shown in the UI that is shown when a Chromecast session + is active and connected. When the this plugin calls the `requestTitleFn`, it passes + it the [current `source` object][player-source] and expects a string in return. If + nothing is returned or if this option is not defined, no title will be shown. + * **`chromecast.requestSubtitleFn`** - a function that this plugin calls when it needs + a string that will be the sub-title shown in the UI that is shown when a Chromecast + session is active and connected. When the this plugin calls the `requestSubtitleFn`, + it passes it the [current `source` object][player-source] and expects a string in + return. If nothing is returned or if this option is not defined, no sub-title will be + shown. + * **`chromecast.requestCustomDataFn`** - a function that this plugin calls when it + needs an object that contains custom information necessary for a Chromecast receiver + app when a session is active and connected. When the this plugin calls the + `requestCustomDataFn`, it passes it the [current `source` object][player-source] and + expects an object in return. If nothing is returned or if this option is not defined, + no custom data will be sent. This option is intended to be used with a [custom + receiver][custom-receiver] application to extend its default capabilities. + * **`chromecast.modifyLoadRequestFn`** - a function that this plugin calls before doing + the request to [load media][chromecast-load-media]. The function gets called with + the [LoadRequest][chromecast-load-request] object as argument and expects it in + return. + +Here is an example configuration object that makes full use of all required and optional +configuration: + +```js +var titles, subtitles, customData, options; + +titles = { + 'https://example.com/videos/video-1.mp4': 'Example Title', + 'https://example.com/videos/video-2.mp4': 'Example Title2', +}; + +subtitles = { + 'https://example.com/videos/video-1.mp4': 'Subtitle', + 'https://example.com/videos/video-2.mp4': 'Subtitle2', +}; + +customData = { + 'https://example.com/videos/video-1.mp4': { 'customColor': '#0099ee' }, + 'https://example.com/videos/video-2.mp4': { 'customColor': '#000080' }, +}; + +options = { + // Must specify the 'chromecast' Tech first + techOrder: [ 'chromecast', 'html5' ], // Required + // Configuration for the Chromecast Tech + chromecast: { + requestTitleFn: function(source) { // Not required + return titles[source.url]; + }, + requestSubtitleFn: function(source) { // Not required + return subtitles[source.url]; + }, + requestCustomDataFn: function(source) { // Not required + return customData[source.url]; + }, + modifyLoadRequestFn: function (loadRequest) { // HLS support + loadRequest.media.hlsSegmentFormat = 'fmp4'; + loadRequest.media.hlsVideoSegmentFormat = 'fmp4'; + return loadRequest; + } + }, + plugins: { + chromecast: { + receiverAppID: '1234' // Not required + addButtonToControlBar: false, // Defaults to true + }, + } +}; +``` + +##### Localization + +The `ChromecastButton` component has two translated strings: "Open Chromecast menu" and +"Cast". + + * The "Open Chromecast menu" string appears in both of the standard places for Button + component accessibility text: inside the `.vjs-control-text` span and as the + ` - - - - - - - - - - diff --git a/vendors/videojs/sandbox/descriptions.html.example b/vendors/videojs/sandbox/descriptions.html.example deleted file mode 100644 index 27286ff..0000000 --- a/vendors/videojs/sandbox/descriptions.html.example +++ /dev/null @@ -1,40 +0,0 @@ - - - - - Video.js Text Descriptions, Chapters & Captions Example - - - - - - - - - - - - - diff --git a/vendors/videojs/sandbox/docpip.html.example b/vendors/videojs/sandbox/docpip.html.example deleted file mode 100644 index 724aa58..0000000 --- a/vendors/videojs/sandbox/docpip.html.example +++ /dev/null @@ -1,52 +0,0 @@ - - - - - Video.js Sandbox - - - - - -
-

You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the index.html

- 
npm start
- 
open http://localhost:9999/sandbox/index.html
-
- -

Document Picture-in-Picture is available in Chrome version 111 onwards.

- - - - - - - - diff --git a/vendors/videojs/sandbox/double-sub-video.html.example b/vendors/videojs/sandbox/double-sub-video.html.example deleted file mode 100644 index dc3dc74..0000000 --- a/vendors/videojs/sandbox/double-sub-video.html.example +++ /dev/null @@ -1,55 +0,0 @@ - - - - - Video.js Text Descriptions, Chapters & Captions Example - - - - - - - - - - - - - - diff --git a/vendors/videojs/sandbox/embeds.html.example b/vendors/videojs/sandbox/embeds.html.example deleted file mode 100644 index 173475c..0000000 --- a/vendors/videojs/sandbox/embeds.html.example +++ /dev/null @@ -1,155 +0,0 @@ - - - - - Video.js Sandbox - - - - - - - - - -

All the various ways to embed and source video elements.

-

Pastel color background represent programmatic setup.

-

Vibrant color background represent data-setup.

-
-
-

js setup with source element

-

video-js embed", source element

- - - -

Video embed, source element

- -

injested div el, source element

-
- -
-
-
-

js setup with sources options

-

video-js embed", js source

- - -

Video embed, js source

- -

injested div el, js source

-
- -
-
-
-

js setup with js method sources

-

video-js embed", js source

- - -

Video embed, js source

- -

injested div el, js source

-
- -
-
-
-

data-setup with sourrce elements

-

video-js embed", source element

- - - -

Video embed, source element

- -

injested div el, source element

-
- -
-
-
-

data-setup embeds with sources options

-

video-js embed", source element

- - -

Video embed, source element

- -

injested div el, source element

-
- -
-
-
-

js setup with js method sources

-

video-js embed", js source

- - -

Video embed, js source

- -

injested div el, js source

-
- -
-
-
- - - diff --git a/vendors/videojs/sandbox/focus-visible.html.example b/vendors/videojs/sandbox/focus-visible.html.example deleted file mode 100644 index a737959..0000000 --- a/vendors/videojs/sandbox/focus-visible.html.example +++ /dev/null @@ -1,36 +0,0 @@ - - - - - Video.js Sandbox - - - - - - - -
-

You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the focus-visible.html

- 
npm start
- 
open http://localhost:9999/sandbox/focus-visible.html
-
- - -

This demo shows how to implement polyfill for the :focus-visible selector. You can read more about the polyfill here.

- - - - diff --git a/vendors/videojs/sandbox/hls.html.example b/vendors/videojs/sandbox/hls.html.example deleted file mode 100644 index 7d162e7..0000000 --- a/vendors/videojs/sandbox/hls.html.example +++ /dev/null @@ -1,35 +0,0 @@ - - - - - Video.js Sandbox - - - - -
-

You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started make a copy of index.html.example and rename it to index.html.

- 
cp sandbox/index.html.example sandbox/index.html
- 
npm run start
- 
open http://localhost:9999/sandbox/index.html
-
- - - - -

To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

- - - - - - diff --git a/vendors/videojs/sandbox/hotkeys.html.example b/vendors/videojs/sandbox/hotkeys.html.example deleted file mode 100644 index c279aff..0000000 --- a/vendors/videojs/sandbox/hotkeys.html.example +++ /dev/null @@ -1,158 +0,0 @@ - - - - - Video.js Hotkeys - Sandbox - - - - - -

Video.js Hotkeys

-

All the various ways to configure hotkeys.

-
-
-

Default (no) hotkeys

- - - - - -

To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

- -
-
-

Disable hotkeys

- - - - - -

To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

- -
-
-

Enable default hotkeys (k = play/pause, m = mute/unmute, f = fullscreen)

- - - - - -

To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

- -
-
-

Custom hotkey function (x = pause, y = play)

- - - - - -

To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

- -
-
-

Customize specific hotkeys (z = play/pause, v = fullscreen)

- - - - - -

To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

- -
-
- - - - diff --git a/vendors/videojs/sandbox/icons.html.example b/vendors/videojs/sandbox/icons.html.example deleted file mode 100644 index 7453a6d..0000000 --- a/vendors/videojs/sandbox/icons.html.example +++ /dev/null @@ -1,66 +0,0 @@ - - - - - Video.js Icons Sandbox - - - - - - -

Video.js Icons

-

This is a list of all of the icons available in the Video.js base stylesheet. The appropriate class is to the right of each icon.

- -
    -
  • .vjs-icon-play
    • -
  • .vjs-icon-play-circle
    • -
  • .vjs-icon-pause
    • -
  • .vjs-icon-volume-mute
    • -
  • .vjs-icon-volume-low
    • -
  • .vjs-icon-volume-mid
    • -
  • .vjs-icon-volume-high
    • -
  • .vjs-icon-fullscreen-enter
    • -
  • .vjs-icon-fullscreen-exit
    • -
  • .vjs-icon-spinner
    • -
  • .vjs-icon-subtitles
    • -
  • .vjs-icon-captions
    • -
  • .vjs-icon-hd
    • -
  • .vjs-icon-chapters
    • -
  • .vjs-icon-downloading
    • -
  • .vjs-icon-file-download
    • -
  • .vjs-icon-file-download-download
    • -
  • .vjs-icon-file-download-off
    • -
  • .vjs-icon-share
    • -
  • .vjs-icon-cog
    • -
  • .vjs-icon-square
    • -
  • .vjs-icon-circle
    • -
  • .vjs-icon-circle-outline
    • -
  • .vjs-icon-circle-inner-circle
    • -
  • .vjs-icon-cancel
    • -
  • .vjs-icon-repeat
    • -
  • .vjs-icon-replay
    • -
  • .vjs-icon-replay-5
    • -
  • .vjs-icon-replay-10
    • -
  • .vjs-icon-replay-30
    • -
  • .vjs-icon-forward-5
    • -
  • .vjs-icon-forward-10
    • -
  • .vjs-icon-forward-30
    • -
  • .vjs-icon-audio
    • -
  • .vjs-next-item
    • -
  • .vjs-icon-previous-item
    • -
  • .vjs-icon-shuffle
    • -
  • .vjs-icon-cast
    • -
  • .vjs-icon-picture-in-picture-enter
    • -
  • .vjs-icon-picture-in-picture-exit
    • -
  • .vjs-icon-facebook
    • -
  • .vjs-icon-linkedin
    • -
  • .vjs-icon-twitter
    • -
  • .vjs-icon-tumblr
    • -
  • .vjs-icon-pinterest
    • -
  • .vjs-icon-audio-description
    • -
- - diff --git a/vendors/videojs/sandbox/index.html.example b/vendors/videojs/sandbox/index.html.example deleted file mode 100644 index 80ebf99..0000000 --- a/vendors/videojs/sandbox/index.html.example +++ /dev/null @@ -1,37 +0,0 @@ - - - - - Video.js Sandbox - - - - -
-

You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the index.html

- 
npm start
- 
open http://localhost:9999/sandbox/index.html
-
- - - - - - -

To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

- - - - - - diff --git a/vendors/videojs/sandbox/language.html.example b/vendors/videojs/sandbox/language.html.example deleted file mode 100644 index 74ef640..0000000 --- a/vendors/videojs/sandbox/language.html.example +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - VideoJS Languages Demo - - - - - - - - - - - - - - - - diff --git a/vendors/videojs/sandbox/live.html.example b/vendors/videojs/sandbox/live.html.example deleted file mode 100644 index 41a2f55..0000000 --- a/vendors/videojs/sandbox/live.html.example +++ /dev/null @@ -1,29 +0,0 @@ - - - - - Video.js Sandbox - - - - -
-

You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the live.html

- 
npm start
- 
open http://localhost:9999/sandbox/live.html
-
- - - -

To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

- - - - - - diff --git a/vendors/videojs/sandbox/liveui.html.example b/vendors/videojs/sandbox/liveui.html.example deleted file mode 100644 index 3fdd60a..0000000 --- a/vendors/videojs/sandbox/liveui.html.example +++ /dev/null @@ -1,33 +0,0 @@ - - - - - Video.js Sandbox - - - - -
-

You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the liveui.html

- 
npm start
- 
open http://localhost:9999/sandbox/liveui.html
-
- - - -

To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

- - - - - - diff --git a/vendors/videojs/sandbox/load-media.html.example b/vendors/videojs/sandbox/load-media.html.example deleted file mode 100644 index f6fc119..0000000 --- a/vendors/videojs/sandbox/load-media.html.example +++ /dev/null @@ -1,52 +0,0 @@ - - - - - Video.js loadMedia Demo - - - - -

Video.js loadMedia Demo

-

This shows how the loadMedia method is used and the effect it has on the player.

- - - - - - - - diff --git a/vendors/videojs/sandbox/middleware-instances.html.example b/vendors/videojs/sandbox/middleware-instances.html.example deleted file mode 100644 index b33e6b6..0000000 --- a/vendors/videojs/sandbox/middleware-instances.html.example +++ /dev/null @@ -1,71 +0,0 @@ - - - - - Video.js Sandbox - - - - - -
-

You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the index.html

- 
npm start
- 
open http://localhost:9999/sandbox/index.html
-
- -
-

- In developer console, Sources tab, look for clearCacheForPlayer function. - Place a logpoint at function closing. Logpoint content should be: -

- 
'middlewareInstances nr', Object.keys(middlewareInstances).length
-

- When one or more players are removed, the number of instances should *NOT* grow. -

-
- -
- - -
- -
- - - - - diff --git a/vendors/videojs/sandbox/middleware-play.html.example b/vendors/videojs/sandbox/middleware-play.html.example deleted file mode 100644 index ebe0748..0000000 --- a/vendors/videojs/sandbox/middleware-play.html.example +++ /dev/null @@ -1,152 +0,0 @@ - - - - - Video.js Sandbox - - - - - - - - - - - - - Terminate the play/pause middleware - - - - - - diff --git a/vendors/videojs/sandbox/noUITitleAttributes.html.example b/vendors/videojs/sandbox/noUITitleAttributes.html.example deleted file mode 100644 index ef6a6fe..0000000 --- a/vendors/videojs/sandbox/noUITitleAttributes.html.example +++ /dev/null @@ -1,35 +0,0 @@ - - - - - Video.js without title attribute on UI controls example - - - - - - -
-

You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started make a copy of index.html.example and rename it to index.html.

- 
npm start will automatically copy these files over from .example if they don't already exist.
- 
open http://localhost:9999/sandbox/noUITitleAttributes.html
-
- - -

This demo shows the effect of setting the noUITitleAttributes option for video.js. It also includes the :focus-visible polyfill (see focus-visible.html)

- - - - diff --git a/vendors/videojs/sandbox/pip-disabled.html.example b/vendors/videojs/sandbox/pip-disabled.html.example deleted file mode 100644 index ffab2e5..0000000 --- a/vendors/videojs/sandbox/pip-disabled.html.example +++ /dev/null @@ -1,72 +0,0 @@ - - - - - Video.js Sandbox - - - - -
-

You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the index.html

- 
npm start
- 
open http://localhost:9999/sandbox/index.html
-
- - - - - - -

To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

- -

- PiP disabled via disablepictureinpicture attribute. -

- - - - - -

To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

- -

- PiP disabled via disablePictureInPicture player option. -

- - - - - diff --git a/vendors/videojs/sandbox/plugin.html.example b/vendors/videojs/sandbox/plugin.html.example deleted file mode 100644 index 2f4c154..0000000 --- a/vendors/videojs/sandbox/plugin.html.example +++ /dev/null @@ -1,45 +0,0 @@ - - - - - Video.js Plugin Example - - - - - - - -

This page shows you how to create, register and initialize a Video.js plugin.

- - - - - - - diff --git a/vendors/videojs/sandbox/quality-levels.html.example b/vendors/videojs/sandbox/quality-levels.html.example deleted file mode 100644 index 7716428..0000000 --- a/vendors/videojs/sandbox/quality-levels.html.example +++ /dev/null @@ -1,109 +0,0 @@ - - - - - Video.js Sandbox - - - - - -
-

You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, - except files that end in .example (so don't edit or add those files). To get started make a copy of - index.html.example and rename it to index.html.

- 
cp sandbox/index.html.example sandbox/index.html
- 
npm run start
- 
open http://localhost:9999/sandbox/index.html
-
-
- - -

To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

- -
-
- -
- - - diff --git a/vendors/videojs/sandbox/responsive.html.example b/vendors/videojs/sandbox/responsive.html.example deleted file mode 100644 index b108c74..0000000 --- a/vendors/videojs/sandbox/responsive.html.example +++ /dev/null @@ -1,160 +0,0 @@ - - - - - - Video.js Sandbox - Responsive - - - - - -

- The following boxes indicate which breakpoint should be applied to the - player when it fills the width of its containing viewport. -

-

- Use these to validate that the default breakpoints match up with how - CSS media queries work. -

-

- Because these bars are updated by CSS, they will change before the playerresize event occurs! -

-
-
vjs-layout-tiny (0px-210px)
-
vjs-layout-x-small (211px-320px)
-
vjs-layout-small (321px-425px)
-
vjs-layout-medium (426px-768px)
-
vjs-layout-large (769px-1440px)
-
vjs-layout-x-large (1441px-2560px)
-
vjs-layout-huge (2561px+)
-
- - - - - - -

To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

- - -

- Each time the player size changes, a row is prepended to this table. -

- - - - - - - - - -
ClassPlayer Width
- - - - - diff --git a/vendors/videojs/sandbox/shadow-dom.html.example b/vendors/videojs/sandbox/shadow-dom.html.example deleted file mode 100644 index 90ea348..0000000 --- a/vendors/videojs/sandbox/shadow-dom.html.example +++ /dev/null @@ -1,79 +0,0 @@ - - - - - Video.js Sandbox - - - - - -
-

You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the index.html

- 
npm start
- 
open http://localhost:9999/sandbox/index.html
-
- -

Tap on video to play/pause

- - - - - - - diff --git a/vendors/videojs/sandbox/skip-buttons.html.example b/vendors/videojs/sandbox/skip-buttons.html.example deleted file mode 100644 index b921058..0000000 --- a/vendors/videojs/sandbox/skip-buttons.html.example +++ /dev/null @@ -1,114 +0,0 @@ - - - - - Video.js Sandbox - - - - -
-

Forward: 5, Backward: 10

- - - - - -

- To view this video please enable JavaScript, and consider upgrading to - a web browser that - supports HTML5 video -

- -
- -
-

Forward: 10, Backward: 30

- - - - - -

- To view this video please enable JavaScript, and consider upgrading to - a web browser that - supports HTML5 video -

- -
- -
-

Forward: 10

- - - - - -

- To view this video please enable JavaScript, and consider upgrading to - a web browser that - supports HTML5 video -

- -
- - - - diff --git a/vendors/videojs/sandbox/svg-icons-enabled.html.example b/vendors/videojs/sandbox/svg-icons-enabled.html.example deleted file mode 100644 index 49dbb6b..0000000 --- a/vendors/videojs/sandbox/svg-icons-enabled.html.example +++ /dev/null @@ -1,36 +0,0 @@ - - - - - Video.js Sandbox - - - - -
-

You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the svg-icons-enabled.html

- 
npm start
- 
open http://localhost:9999/sandbox/svg-icons-enabled.html
-
- - - - - - -

To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

- - - - - - diff --git a/vendors/videojs/sandbox/svg-icons.html.example b/vendors/videojs/sandbox/svg-icons.html.example deleted file mode 100644 index e0dda3c..0000000 --- a/vendors/videojs/sandbox/svg-icons.html.example +++ /dev/null @@ -1,414 +0,0 @@ - - - - - VideoJS - - - - -

VideoJS SVG Icons

-

In order to use SVG icons, the experimentalSvgIcons option must be enabled on the player. See: experimentalSvgIcons

-

SVG Icons are expected to be added to the player through components. Example: myButton.setIcon('play');

-
-
- - - - - - play -
-
- - - - - - play-circle -
-
- - - - - - pause -
-
- - - - - - volume-mute -
-
- - - - - - volume-low -
-
- - - - - - volume-medium -
-
- - - - - - volume-high -
-
- - - - - - fullscreen-enter -
-
- - - - - - fullscreen-exit -
-
- - - - - - spinner -
-
- - - - - - subtitles -
-
- - - - - - captions -
-
- - - - - - hd -
-
- - - - - - chapters -
-
- - - - - - downloading -
-
- - - - - - file-download -
-
- - - - - - file-download-done -
-
- - - - - - file-download-off -
-
- - - - - - share -
-
- - - - - - cog -
-
- - - - - - square -
-
- - - - - - circle -
-
- - - - - - circle-outline -
-
- - - - - - circle-inner-circle -
-
- - - - - - cancel -
-
- - - - - - repeat -
-
- - - - - - replay -
-
- - - - - - replay-5 -
-
- - - - - - replay-10 -
-
- - - - - - replay-30 -
-
- - - - - - forward-5 -
-
- - - - - - forward-10 -
-
- - - - - - forward-30 -
-
- - - - - - audio -
-
- - - - - - next-item -
-
- - - - - - previous-item -
-
- - - - - - shuffle -
-
- - - - - - cast -
-
- - - - - - picture-in-picture-enter -
-
- - - - - - picture-in-picture-exit -
-
- - - - - - facebook -
-
- - - - - - linkedin -
-
- - - - - - twitter -
-
- - - - - - tumblr -
-
- - - - - - pinterest -
-
- - - - - - audio-description -
-
- - diff --git a/vendors/videojs/sandbox/transient-button.html.example b/vendors/videojs/sandbox/transient-button.html.example deleted file mode 100644 index 2006abb..0000000 --- a/vendors/videojs/sandbox/transient-button.html.example +++ /dev/null @@ -1,121 +0,0 @@ - - - - - Video.js Sandbox - - - - - -
-

Transient button demo

- - - - - - -
-

An unmute transient button will show after playback starts if muted.

-

- Transient buttons to skip into / credits / recap display at times defined - in a metadata track. -

- - - diff --git a/vendors/videojs/sandbox/userAction-click.html.example b/vendors/videojs/sandbox/userAction-click.html.example deleted file mode 100644 index dcb16cd..0000000 --- a/vendors/videojs/sandbox/userAction-click.html.example +++ /dev/null @@ -1,48 +0,0 @@ - - - - - Video.js Sandbox - - - - -
-

You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the index.html

- 
npm start
- 
open http://localhost:9999/sandbox/index.html
-
- - - - - - -

To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

- - - - - - diff --git a/vendors/videojs/sandbox/vertical-volume.html.example b/vendors/videojs/sandbox/vertical-volume.html.example deleted file mode 100644 index 56ada4a..0000000 --- a/vendors/videojs/sandbox/vertical-volume.html.example +++ /dev/null @@ -1,36 +0,0 @@ - - - - - Video.js Sandbox - - - - -
-

You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the vertical-volume.html

- 
npm start
- 
open http://localhost:9999/sandbox/vertical-volume.html
-
- - - - - - -

To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

- - - - - - diff --git a/vendors/videojs/src/css/_icons.scss b/vendors/videojs/src/css/_icons.scss deleted file mode 100644 index fc0f974..0000000 --- a/vendors/videojs/src/css/_icons.scss +++ /dev/null @@ -1,29 +0,0 @@ -// CSS styles for SVG icons used throughout video.js. -// -// The goal is to replace all icons from the font family pulled from videojs/font entirely. -// This project currently uses fonts. We want to replace this with SVGs from -// images/icons.svg. This will ensure consitency between versions, as well as simplified -// and straight-forward customization. - -// Default styling for all SVG icons -.vjs-svg-icon { - display: inline-block; - background-repeat: no-repeat; - background-position: center; - - fill: currentColor; - height: 1.8em; - width: 1.8em; - - // Overwrite any font content - &:before { - content: none !important; - } -} - -// SVG shadow on hover and focus -.vjs-svg-icon:hover, -.vjs-control:focus .vjs-svg-icon { - -webkit-filter: drop-shadow(0 0 0.25em #fff); - filter: drop-shadow(0 0 0.25em #fff); -} diff --git a/vendors/videojs/src/css/_print.scss b/vendors/videojs/src/css/_print.scss deleted file mode 100644 index 7a10c4e..0000000 --- a/vendors/videojs/src/css/_print.scss +++ /dev/null @@ -1,5 +0,0 @@ -@media print { - .video-js > *:not(.vjs-tech):not(.vjs-poster) { - visibility:hidden; - } -} diff --git a/vendors/videojs/src/css/_private-variables.scss b/vendors/videojs/src/css/_private-variables.scss deleted file mode 100644 index 410121e..0000000 --- a/vendors/videojs/src/css/_private-variables.scss +++ /dev/null @@ -1,20 +0,0 @@ -// Text, icons, hover states -$primary-foreground-color: #fff !default; - -// Control backgrounds (control bar, big play, menus) -$primary-background-color: #2B333F !default; -$primary-background-transparency: 0.7 !default; - -// Hover states, slider backgrounds -$secondary-background-color: lighten($primary-background-color, 33%) !default; -$secondary-background-transparency: 0.5 !default; - -// Avoiding helvetica: issue #376 -$text-font-family: Arial, Helvetica, sans-serif !default; - -// Using the '--' naming for component-specific styles -$big-play-button--border-size: 0.06666em !default; -$big-play-button--width: 3em !default; -$big-play-button--line-height: 1.5em !default; -$big-play-button--height: $big-play-button--line-height + ($big-play-button--border-size * 2) !default; -$big-play-button--transparency: 0.8 !default; diff --git a/vendors/videojs/src/css/_utilities.scss b/vendors/videojs/src/css/_utilities.scss deleted file mode 100644 index 7dd1cce..0000000 --- a/vendors/videojs/src/css/_utilities.scss +++ /dev/null @@ -1,81 +0,0 @@ -@import "utilities/linear-gradient"; - -@mixin background-color-with-alpha($color, $alpha) { - background-color: $color; - background-color: rgba($color, $alpha); -} - -@mixin transform($transform) { - transform: $transform; -} - -@mixin transition($string: $transition--default) { - transition: $string; -} - -@mixin hide-visually { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} - -@mixin border-radius($radius) { - border-radius: $radius; -} - -@mixin animation($string: spin 1s infinite linear) { - animation: $string; -} - -@mixin display-flex($alignment: '', $justification: '') { - display: flex; - - @if $alignment != '' { - align-items: $alignment; - } - - @if $justification != '' { - justify-content: $justification; - } -} - -@mixin flex($value) { - flex: $value; -} - -// https://developer.mozilla.org/en-US/docs/Web/CSS/user-select -// https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting-using-css (version: January, 2017) -@mixin user-select($string: none) { - /* iOS Safari */ - -webkit-touch-callout: $string; - /* Safari, and Chrome 53 */ - -webkit-user-select: $string; - /* Non-prefixed version, currently supported by Chrome and Opera */ - user-select: $string; -} - -// https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow -@mixin box-shadow ($string: 0 0 1em rgba(0, 0, 0, 0.25)) { - box-shadow: $string; -} - -@mixin order($value) { - order: $value; -} - -%fill-parent { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -%icon-default { - @extend %fill-parent; - text-align: center; -} diff --git a/vendors/videojs/src/css/_variables.scss b/vendors/videojs/src/css/_variables.scss deleted file mode 100644 index 0ed69c2..0000000 --- a/vendors/videojs/src/css/_variables.scss +++ /dev/null @@ -1 +0,0 @@ -$icon-font-path: 'font' !default; diff --git a/vendors/videojs/src/css/components/_adaptive.scss b/vendors/videojs/src/css/components/_adaptive.scss deleted file mode 100644 index 8977438..0000000 --- a/vendors/videojs/src/css/components/_adaptive.scss +++ /dev/null @@ -1,71 +0,0 @@ -// When the player is "medium" and higher, display everything by default. -// -// When the player is "small", display only: -// - Play button -// - Volume Mute button -// - Progress bar -// - Track buttons -// - Native PiP button -// - Fullscreen button -// -// When the player is "x-small", display only: -// - Play button -// - Volume Mute button -// - Spacer -// - Track buttons -// - Native PiP button -// - Fullscreen button -// -// When the player is "tiny", display only: -// - Play button -// - Volume Mute button -// - Track buttons -// - Native PiP button -// - Fullscreen Button -// -.video-js { - - &.vjs-layout-small, - &.vjs-layout-x-small, - &.vjs-layout-tiny { - .vjs-current-time, - .vjs-time-divider, - .vjs-duration, - .vjs-remaining-time, - .vjs-playback-rate, - .vjs-volume-control { - display: none; - } - - // Reset the size of the volume panel to the default so we don't see a big - // empty space to the right of the mute button. - .vjs-volume-panel.vjs-volume-panel-horizontal { - &:hover, - &:active, - &.vjs-slider-active, - &.vjs-hover { - width: auto; - width: initial; - } - } - } - - // At x-small and tiny, the progress control is too narrow to be useful. - &.vjs-layout-x-small, - &.vjs-layout-tiny { - - .vjs-progress-control { - display: none; - } - } - - // At x-small, the buttons alone leave a large gap on the right. Fill it with - // the spacer element. - &.vjs-layout-x-small { - - .vjs-custom-control-spacer { - @include flex(auto); - display: block; - } - } -} diff --git a/vendors/videojs/src/css/components/_audio.scss b/vendors/videojs/src/css/components/_audio.scss deleted file mode 100644 index 3f7d703..0000000 --- a/vendors/videojs/src/css/components/_audio.scss +++ /dev/null @@ -1,19 +0,0 @@ -.video-js .vjs-audio-button .vjs-icon-placeholder { - @extend .vjs-icon-audio; -} - -.video-js .vjs-audio-button + .vjs-menu .vjs-descriptions-menu-item .vjs-menu-item-text .vjs-icon-placeholder, -.video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder { - vertical-align: middle; - display: inline-block; - margin-bottom: -0.1em; -} - -// Mark a main-desc-menu-item (main + description) or description item with a trailing Audio Description icon -.video-js .vjs-audio-button + .vjs-menu .vjs-descriptions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before, -.video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before { - font-family: VideoJS; - content: " \f12e"; - font-size: 1.5em; - line-height: inherit; -} diff --git a/vendors/videojs/src/css/components/_big-play.scss b/vendors/videojs/src/css/components/_big-play.scss deleted file mode 100644 index 7af937a..0000000 --- a/vendors/videojs/src/css/components/_big-play.scss +++ /dev/null @@ -1,62 +0,0 @@ -@use "sass:math"; - -.video-js .vjs-big-play-button { - font-size: 3em; - line-height: $big-play-button--line-height; - height: $big-play-button--height; - width: $big-play-button--width; // Firefox bug: For some reason without width the icon wouldn't show up. Switched to using width and removed padding. - display: block; - position: absolute; - top: 50%; - left: 50%; - padding: 0; - margin-top: -(math.div($big-play-button--height, 2)); - margin-left: -(math.div($big-play-button--width, 2)); - cursor: pointer; - opacity: 1; - border: $big-play-button--border-size solid $primary-foreground-color; - - // Need a slightly gray bg so it can be seen on black backgrounds - @include background-color-with-alpha($primary-background-color, $primary-background-transparency); - @include border-radius(0.3em); - @include transition(all 0.4s); - - // Since the big play button doesn't inherit from vjs-control, we need to specify a bit more than - // other buttons for the icon. - & .vjs-icon-placeholder:before { - @extend .vjs-icon-play; - - @extend %icon-default; - } -} - -.vjs-big-play-button .vjs-svg-icon { - width: 1em; - height: 1em; - position: absolute; - top: 50%; - left: 50%; - line-height: 1; - transform: translate(-50%, -50%); -} - -.video-js:hover .vjs-big-play-button, -.video-js .vjs-big-play-button:focus { - border-color: $primary-foreground-color; - - @include background-color-with-alpha($secondary-background-color, $secondary-background-transparency); - @include transition(all 0s); -} - -// Hide if controls are disabled, the video is playing, or native controls are used. -.vjs-controls-disabled .vjs-big-play-button, -.vjs-has-started .vjs-big-play-button, -.vjs-using-native-controls .vjs-big-play-button, -.vjs-error .vjs-big-play-button { - display: none; -} - -// Show big play button if video is paused and .vjs-show-big-play-button-on-pause is set on video element -.vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause:not(.vjs-seeking, .vjs-scrubbing, .vjs-error) .vjs-big-play-button { - display: block; -} diff --git a/vendors/videojs/src/css/components/_button.scss b/vendors/videojs/src/css/components/_button.scss deleted file mode 100644 index e14a921..0000000 --- a/vendors/videojs/src/css/components/_button.scss +++ /dev/null @@ -1,27 +0,0 @@ -.video-js button { - background: none; - border: none; - color: inherit; - display: inline-block; - - font-size: inherit; // IE in general. WTF. - line-height: inherit; - text-transform: none; - text-decoration: none; - transition: none; - - // Chrome < 83 - -webkit-appearance: none; - appearance: none; -} - -// Replacement for focus in case spatial navigation is enabled -.video-js.vjs-spatial-navigation-enabled .vjs-button:focus { - outline: 0.0625em solid rgba($primary-foreground-color, 1); - box-shadow: none; -} - -.vjs-control .vjs-button { - width: 100%; - height: 100%; -} diff --git a/vendors/videojs/src/css/components/_captions-settings.scss b/vendors/videojs/src/css/components/_captions-settings.scss deleted file mode 100644 index 29c7bfd..0000000 --- a/vendors/videojs/src/css/components/_captions-settings.scss +++ /dev/null @@ -1,121 +0,0 @@ -.vjs-modal-dialog.vjs-text-track-settings { - background-color: $primary-background-color; - background-color: rgba($primary-background-color, 0.75); - color: $primary-foreground-color; - height: 70%; - - // When Spatial Navigation is enabled - .vjs-spatial-navigation-enabled & { - height: 80%; - } -} - -// Hide if an error occurs -.vjs-error .vjs-text-track-settings { - display: none; -} - -// Layout divs -.vjs-text-track-settings .vjs-modal-dialog-content { - display: table; -} - -.vjs-text-track-settings .vjs-track-settings-colors, -.vjs-text-track-settings .vjs-track-settings-font, -.vjs-text-track-settings .vjs-track-settings-controls { - display: table-cell; -} - -.vjs-text-track-settings .vjs-track-settings-controls { - text-align: right; - vertical-align: bottom; -} - -// code that will only run if CSS Grid is supported by the browser -@supports (display: grid) { - .vjs-text-track-settings .vjs-modal-dialog-content { - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr; - // Flex and Grid for Firefox, IE, and Edge remove the bottom padding/margin in a container as size decreases - // so we add bottom padding/margin to the last item in the grid instead of here - // see https://stackoverflow.com/a/23754080 - padding: 20px 24px 0px 24px; - } - - // see the comment for padding above - .vjs-track-settings-controls .vjs-default-button { - margin-bottom: 20px; - } - - .vjs-text-track-settings .vjs-track-settings-controls { - // make this take up both columns - grid-column: 1 / -1; - } - - // 1 column for small players - .vjs-layout-small .vjs-text-track-settings .vjs-modal-dialog-content , - .vjs-layout-x-small .vjs-text-track-settings .vjs-modal-dialog-content, - .vjs-layout-tiny .vjs-text-track-settings .vjs-modal-dialog-content { - grid-template-columns: 1fr; - } - -} - -// Form elements -.vjs-text-track-settings select { - font-size: inherit; -} - -.vjs-track-setting > select { - margin-right: 1em; - margin-bottom: 0.5em; -} - -.vjs-text-track-settings fieldset { - margin: 10px; - border: none; -} - -.vjs-text-track-settings fieldset span { - display: inline-block; - padding: 0 .6em .8em; -} - -// style the second select for text colors -.vjs-text-track-settings fieldset span > select { - max-width: 7.3em; -} - -.vjs-text-track-settings legend { - color: $primary-foreground-color; - font-weight: bold; - font-size: 1.2em; -} - -.vjs-text-track-settings .vjs-label { - margin: 0 .5em .5em 0; -} - -.vjs-track-settings-controls button:focus, -.vjs-track-settings-controls button:active { - outline-style: solid; - outline-width: medium; - background-image: linear-gradient(0deg, $primary-foreground-color 88%, $secondary-background-color 100%); -} - -.vjs-track-settings-controls button:hover { - color: rgba(#2B333F, 0.75); -} - -.vjs-track-settings-controls button { - background-color: $primary-foreground-color; - background-image: linear-gradient(-180deg, $primary-foreground-color 88%, $secondary-background-color 100%); - color: #2B333F; - cursor: pointer; - border-radius: 2px; -} - -.vjs-track-settings-controls .vjs-default-button { - margin-right: 1em; -} diff --git a/vendors/videojs/src/css/components/_captions.scss b/vendors/videojs/src/css/components/_captions.scss deleted file mode 100644 index 8cffef9..0000000 --- a/vendors/videojs/src/css/components/_captions.scss +++ /dev/null @@ -1,7 +0,0 @@ -.video-js .vjs-captions-button .vjs-icon-placeholder { - @extend .vjs-icon-captions; -} - -.video-js.vjs-audio-only-mode .vjs-captions-button { - display: none; -} diff --git a/vendors/videojs/src/css/components/_chapters.scss b/vendors/videojs/src/css/components/_chapters.scss deleted file mode 100644 index 7eab3e8..0000000 --- a/vendors/videojs/src/css/components/_chapters.scss +++ /dev/null @@ -1,7 +0,0 @@ -.video-js .vjs-chapters-button .vjs-icon-placeholder { - @extend .vjs-icon-chapters; -} - -.vjs-chapters-button .vjs-menu ul { - width: 24em; -} diff --git a/vendors/videojs/src/css/components/_close-button.scss b/vendors/videojs/src/css/components/_close-button.scss deleted file mode 100644 index 07193e7..0000000 --- a/vendors/videojs/src/css/components/_close-button.scss +++ /dev/null @@ -1,12 +0,0 @@ -.video-js .vjs-control.vjs-close-button { - cursor: pointer; - height: 3em; - position: absolute; - right: 0; - top: 0.5em; - z-index: 2; - - & .vjs-icon-placeholder { - @extend .vjs-icon-cancel; - } -} diff --git a/vendors/videojs/src/css/components/_control-bar.scss b/vendors/videojs/src/css/components/_control-bar.scss deleted file mode 100644 index 3679539..0000000 --- a/vendors/videojs/src/css/components/_control-bar.scss +++ /dev/null @@ -1,63 +0,0 @@ -.video-js .vjs-control-bar { - display: none; - width: 100%; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 3.0em; - - @include background-color-with-alpha($primary-background-color, $primary-background-transparency); -} - -.video-js.vjs-spatial-navigation-enabled .vjs-control-bar { - gap: 1px; -} - -// Locks the display only if: -// - controls are not disabled -// - native controls are not used -// - there is no error -.video-js:not(.vjs-controls-disabled, .vjs-using-native-controls, .vjs-error) .vjs-control-bar.vjs-lock-showing { - display: flex !important; -} - -// Video has started playing or we are in audioOnlyMode -.vjs-has-started .vjs-control-bar, -.vjs-audio-only-mode .vjs-control-bar { - @include display-flex; - visibility: visible; - opacity: 1; - - $trans: visibility 0.1s, opacity 0.1s; // Var needed because of comma - @include transition($trans); -} - -// Video has started playing AND user is inactive -.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar { - // Remain visible for screen reader and keyboard users - visibility: visible; - opacity: 0; - // prevent a click/tap from interacting with vjs-lock-showing menu's - // or other controls while we are inactive/hidden - pointer-events: none; - - $trans: visibility 1.0s, opacity 1.0s; - @include transition($trans); - -} - -.vjs-controls-disabled .vjs-control-bar, -.vjs-using-native-controls .vjs-control-bar, -.vjs-error .vjs-control-bar { - // !important is ok in this context. - display: none !important; -} - -// Don't hide the control bar if it's audio or in audioOnlyMode -.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar, -.vjs-audio-only-mode.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar { - opacity: 1; - visibility: visible; - pointer-events: auto; -} diff --git a/vendors/videojs/src/css/components/_control-spacer.scss b/vendors/videojs/src/css/components/_control-spacer.scss deleted file mode 100644 index 010751b..0000000 --- a/vendors/videojs/src/css/components/_control-spacer.scss +++ /dev/null @@ -1,3 +0,0 @@ -.video-js .vjs-custom-control-spacer { - display: none; -} diff --git a/vendors/videojs/src/css/components/_control.scss b/vendors/videojs/src/css/components/_control.scss deleted file mode 100644 index 6dd7b6b..0000000 --- a/vendors/videojs/src/css/components/_control.scss +++ /dev/null @@ -1,45 +0,0 @@ -// vjs-control might be better named vjs-button now. -// It's used on both real buttons (play button) -// and div buttons (menu buttons) -.video-js .vjs-control { - position: relative; - text-align: center; - margin: 0; - padding: 0; - height: 100%; - width: 4em; - @include flex(none); -} - -.video-js .vjs-control.vjs-visible-text { - width: auto; - padding-left: 1em; - padding-right: 1em; -} - -.vjs-button > .vjs-icon-placeholder:before { - font-size: 1.8em; - line-height: 1.67; - - @extend %icon-default; -} - -.vjs-button > .vjs-icon-placeholder { - display: block; -} - -.vjs-button > .vjs-svg-icon { - display: inline-block; -} - -// Replacement for focus outline -.video-js .vjs-control:focus:before, -.video-js .vjs-control:hover:before, -.video-js .vjs-control:focus { - text-shadow: 0em 0em 1em rgba($primary-foreground-color, 1); -} - -// Hide control text visually, but have it available for screenreaders -.video-js *:not(.vjs-visible-text) > .vjs-control-text { - @include hide-visually; -} diff --git a/vendors/videojs/src/css/components/_descriptions.scss b/vendors/videojs/src/css/components/_descriptions.scss deleted file mode 100644 index 9cf8d95..0000000 --- a/vendors/videojs/src/css/components/_descriptions.scss +++ /dev/null @@ -1,7 +0,0 @@ -.video-js .vjs-descriptions-button .vjs-icon-placeholder { - @extend .vjs-icon-audio-description; -} - -.video-js.vjs-audio-only-mode .vjs-descriptions-button { - display: none; -} diff --git a/vendors/videojs/src/css/components/_error.scss b/vendors/videojs/src/css/components/_error.scss deleted file mode 100644 index 118e262..0000000 --- a/vendors/videojs/src/css/components/_error.scss +++ /dev/null @@ -1,4 +0,0 @@ -.vjs-error .vjs-error-display .vjs-modal-dialog-content { - font-size: 1.4em; - text-align: center; -} diff --git a/vendors/videojs/src/css/components/_fullscreen.scss b/vendors/videojs/src/css/components/_fullscreen.scss deleted file mode 100644 index f682341..0000000 --- a/vendors/videojs/src/css/components/_fullscreen.scss +++ /dev/null @@ -1,18 +0,0 @@ -.video-js .vjs-fullscreen-control { - cursor: pointer; - @include flex(none); - - & .vjs-icon-placeholder { - @extend .vjs-icon-fullscreen-enter; - } -} - -.video-js.vjs-audio-only-mode .vjs-fullscreen-control, -.vjs-pip-window .vjs-fullscreen-control { - display: none; -} - -// Switch to the exit icon when the player is in fullscreen -.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder { - @extend .vjs-icon-fullscreen-exit; -} diff --git a/vendors/videojs/src/css/components/_layout.scss b/vendors/videojs/src/css/components/_layout.scss deleted file mode 100644 index fdf9d25..0000000 --- a/vendors/videojs/src/css/components/_layout.scss +++ /dev/null @@ -1,211 +0,0 @@ -@use "sass:math"; - -.video-js { - display: inline-block; - // Make video.js videos align top when next to video elements - vertical-align: top; - box-sizing: border-box; - - color: $primary-foreground-color; - background-color: #000; - position: relative; - padding: 0; - // Start with 10px for base font size so other dimensions can be em based and - // easily calculable. - font-size: 10px; - line-height: 1; - - // Provide some basic defaults for fonts - font-weight: normal; - font-style: normal; - // Avoiding helvetica: issue #376 - font-family: $text-font-family; - - // reset word-break inside the player div - word-break: initial; - - // Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when - // checking fullScreenEnabled. - &:-moz-full-screen { position: absolute; } - - &:-webkit-full-screen { - width: 100% !important; - height: 100% !important; - } -} - -.video-js[tabindex="-1"] { - outline: none; -} - -// All elements inherit border-box sizing -.video-js *, -.video-js *:before, -.video-js *:after { - box-sizing: inherit; -} - -// List style reset -.video-js ul { - font-family: inherit; - font-size: inherit; - line-height: inherit; - list-style-position: outside; - - // Important to specify each - margin-left: 0; - margin-right: 0; - margin-top: 0; - margin-bottom: 0; -} - -// Fill the width of the containing element and use padding to create the -// desired aspect ratio. Default to 16x9 unless another ratio is given. -@mixin apply-aspect-ratio($width, $height) { - padding-top: 100% * math.div($height, $width); -} - -// Not including a default AR in vjs-fluid because it would override -// the user set AR injected into the header. -.video-js.vjs-fluid, -.video-js.vjs-16-9, -.video-js.vjs-4-3, -.video-js.vjs-9-16, -.video-js.vjs-1-1 { - width: 100%; - max-width: 100%; -} - -.video-js.vjs-fluid:not(.vjs-audio-only-mode), -.video-js.vjs-16-9:not(.vjs-audio-only-mode), -.video-js.vjs-4-3:not(.vjs-audio-only-mode), -.video-js.vjs-9-16:not(.vjs-audio-only-mode), -.video-js.vjs-1-1:not(.vjs-audio-only-mode) { - height: 0; -} - -.video-js.vjs-16-9:not(.vjs-audio-only-mode) { - @include apply-aspect-ratio(16, 9); -} - -.video-js.vjs-4-3:not(.vjs-audio-only-mode) { - @include apply-aspect-ratio(4, 3); -} - -.video-js.vjs-9-16:not(.vjs-audio-only-mode) { - @include apply-aspect-ratio(9, 16); -} - -.video-js.vjs-1-1:not(.vjs-audio-only-mode) { - @include apply-aspect-ratio(1, 1); -} - -.video-js.vjs-fill:not(.vjs-audio-only-mode) { - width: 100%; - height: 100%; -} - -// Playback technology elements expand to the width/height of the containing div -//