From 69e20fc11381bdc94c416f11527289a34ffb89ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs?= Date: Fri, 11 Feb 2022 11:08:56 -0500 Subject: update from upstream --- .nvmrc | 2 +- .stylelintrc.json | 10 +- .vscode/extensions.json | 12 + .vscode/launch.json | 15 + .vscode/settings.json | 1 + CHANGELOG.md | 37 +- CONTROLS.md | 54 +- README.md | 125 +- demo/error.html | 46 +- demo/index.html | 468 ++-- demo/src/sass/bundles/demo.scss | 2 +- demo/src/sass/components/buttons.scss | 4 +- demo/src/sass/components/header.scss | 2 +- demo/src/sass/components/icons.scss | 4 +- demo/src/sass/components/links.scss | 4 +- demo/src/sass/components/players.scss | 4 +- demo/src/sass/layout/core.scss | 4 +- demo/src/sass/lib/animation.scss | 7 +- demo/src/sass/lib/fontface.scss | 10 +- demo/src/sass/lib/mixins.scss | 6 +- demo/src/sass/lib/normalize.scss | 17 +- demo/src/sass/settings/colors.scss | 10 +- demo/src/sass/settings/type.scss | 4 - demo/src/sass/type/base.scss | 4 +- demo/src/sass/type/headings.scss | 1 + package.json | 61 +- plyr.code-workspace | 2 + src/js/captions.js | 4 +- src/js/config/defaults.js | 3 +- src/js/controls.js | 3 +- src/js/fullscreen.js | 4 +- src/js/html5.js | 2 +- src/js/listeners.js | 4 +- src/js/plugins/ads.js | 4 +- src/js/plugins/vimeo.js | 37 +- src/js/plyr.d.ts | 21 +- src/js/plyr.js | 26 +- src/js/plyr.polyfilled.js | 2 +- src/js/storage.js | 8 +- src/js/support.js | 2 +- src/js/ui.js | 7 +- src/js/utils/animation.js | 2 +- src/js/utils/events.js | 2 +- src/js/utils/fetch.js | 6 +- src/js/utils/is.js | 2 +- src/js/utils/load-sprite.js | 16 +- src/js/utils/urls.js | 2 +- src/sass/base.scss | 1 + src/sass/components/control.scss | 2 +- src/sass/components/controls.scss | 1 + src/sass/components/menus.scss | 7 +- src/sass/components/sliders.scss | 39 +- src/sass/components/tooltips.scss | 1 + src/sass/lib/css-vars.scss | 31 +- src/sass/lib/functions.scss | 4 - src/sass/lib/mixins.scss | 4 +- src/sass/plugins/ads.scss | 4 +- src/sass/plyr.scss | 10 +- src/sass/settings/captions.scss | 1 - src/sass/settings/colors.scss | 24 +- src/sass/settings/controls.scss | 5 +- src/sass/settings/menus.scss | 2 - src/sass/settings/sliders.scss | 1 - src/sass/settings/type.scss | 4 - src/sass/states/fullscreen.scss | 20 +- src/sass/types/video.scss | 8 +- tasks/build.js | 2 +- yarn.lock | 4382 ++++++++++++++++----------------- 68 files changed, 2796 insertions(+), 2830 deletions(-) create mode 100644 .vscode/extensions.json create mode 100644 .vscode/launch.json create mode 100644 .vscode/settings.json diff --git a/.nvmrc b/.nvmrc index 8351c193..b6a7d89c 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -14 +16 diff --git a/.stylelintrc.json b/.stylelintrc.json index fc13954d..ff4f14af 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,6 +1,7 @@ { - "plugins": ["stylelint-selector-bem-pattern", "stylelint-scss"], - "extends": ["stylelint-config-recommended", "stylelint-config-sass-guidelines", "stylelint-config-prettier"], + "plugins": ["stylelint-selector-bem-pattern"], + "extends": ["stylelint-config-sass-guidelines", "stylelint-config-prettier"], + "customSyntax": "postcss-scss", "rules": { "selector-class-pattern": null, "selector-no-qualifying-type": [ @@ -9,10 +10,7 @@ "ignore": ["attribute", "class"] } ], - "string-no-newline": null, - "indentation": 2, - "string-quotes": "single", - "max-nesting-depth": 2, + "max-nesting-depth": 4, "plugin/selector-bem-pattern": { "preset": "bem", "componentName": "(([a-z0-9]+(?!-$)-?)+)", diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 00000000..5685abff --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,12 @@ +{ + // See http://go.microsoft.com/fwlink/?LinkId=827846 + // for the documentation about the extensions.json format + "recommendations": [ + "dbaeumer.vscode-eslint", + "esbenp.prettier-vscode", + "wayou.vscode-todo-highlight", + "wix.vscode-import-cost", + "stylelint.vscode-stylelint", + "pflannery.vscode-versionlens" + ] +} diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 00000000..3e037998 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost/dev/plyr/demo", + "webRoot": "${workspaceFolder}" + } + ] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..9e26dfee --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index 43eab0e3..e9898f5b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,34 @@ +### v3.6.12 + +- Fix: remove division logic from ads.scss (fixes #2370) + +### v3.6.11 + +- Fix: Replace `list.slash` added in 3.6.10 with `calc` +- Chore: Package upgrades +- Chore: SASS clean up +- Chore: Improvements to style linting + +### v3.6.10 + +- Fix: Use `list.slash` instead of deprecated syntax +- Chore: Clean up demo + +### v3.6.9 + +- Fix: SASS issue with division (thanks @ROL4ND909 and @le0pard) +- Fix: Captions when switching sources (thanks @zexingguo) +- Fix: Icons loading within iframes (thanks @ajgagnon) +- Chore: Update TypeScript types (thanks @Jackie1210 and @AntLevin) +- Fix: iOS fullscreen centering (thanks @hemratna) +- Feat: Added getter and setter for preview thumbnails (thanks @Benny739) +- Fix: Change fullscreen element to player rootnode (thanks @Walter van den Houten) +- Fix: Fixed errors when Plyr instance is destroyed before constructor setTimeout() functions execute (thanks @emilis-ideait) +- Fix: Invalid CSS selector syntax (thanks @BjornBrandewallNaviga) +- Fix: Video height issues +- Feat: Improve support for Vimeo private videos (thanks @Frosch) +- Fix: YouTube duration issues (thanks @liesahead) + ### v3.6.8 - Typings: add FullscreenOptions.container to typing files (thanks @MeguminSama!) @@ -46,7 +77,7 @@ - Fix "A `ReferenceError: _classCallCheck is not defined` error has occurred." error (thanks @hex-ci) - Fix issue with CSS custom property check (thanks @syedhusain-appspace) - Fix for slow loading videos not autoplaying (thanks @DanielHuntleySBG) -- Fix for betwork requests are not cancelled after the player is destroyed (thanks @DanielHuntleySBG) +- Fix for network requests are not cancelled after the player is destroyed (thanks @DanielHuntleySBG) - Added option to disable custom controls for YouTube and Vimeo ### v3.6.2 @@ -91,7 +122,7 @@ ### v3.5.8 - Added `flex-direction` property to fix some issues introduced in v3.5.7 when using custom CSS -- Cleaned up the organisation of some of the SCSS files (should not effect CSS output) +- Cleaned up the organization of some of the SCSS files (should not effect CSS output) - Added `referrerPolicy` option for Vimeo to prevent an issue present in the demo site - Remove all Vimeo controls for Pro & Premium accounts - Improve thumbnail size calculations when size is set per css (thanks @ydylla) @@ -106,7 +137,7 @@ - Accessibility tweak for the play button (thanks @lunika) - Fix for ads configuration (thanks @SoftCreatR) - Fix handling listener return value (thanks @taion) -- Added localisation key for PIP (picture-in-picture) (thanks @lmislm) +- Added localization key for PIP (picture-in-picture) (thanks @lmislm) - Preserve viewBox attribute in SVG sprite symbols (thanks @bseib) - Fix being unable to unmute autoplayed video on iOS (thanks @sumanbh) - Fixed Plyr container not resizing responsively (thanks @shravan2x) diff --git a/CONTROLS.md b/CONTROLS.md index b7b08c58..73959937 100644 --- a/CONTROLS.md +++ b/CONTROLS.md @@ -2,11 +2,11 @@ This is the markup that is rendered for the Plyr controls. You can use the default controls or provide a customized version of markup based on your needs. You can pass the following to the `controls` option: -- `Array` of options (this builds the default controls based on your choices) -- `Element` with the controls -- `String` containing the desired HTML -- `false` (or empty string or array) to disable all controls -- `Function` that will be executed and should return one of the above +- `Array` of options (this builds the default controls based on your choices) +- `Element` with the controls +- `String` containing the desired HTML +- `false` (or empty string or array) to disable all controls +- `Function` that will be executed and should return one of the above ## Using default controls @@ -14,28 +14,28 @@ If you want to use the standard controls as they are, you don't need to pass any ```javascript controls: [ - 'play-large', // The large play button in the center - 'restart', // Restart playback - 'rewind', // Rewind by the seek time (default 10 seconds) - 'play', // Play/pause playback - 'fast-forward', // Fast forward by the seek time (default 10 seconds) - 'progress', // The progress bar and scrubber for playback and buffering - 'current-time', // The current time of playback - 'duration', // The full duration of the media - 'mute', // Toggle mute - 'volume', // Volume control - 'captions', // Toggle captions - 'settings', // Settings menu - 'pip', // Picture-in-picture (currently Safari only) - 'airplay', // Airplay (currently Safari only) - 'download', // Show a download button with a link to either the current source or a custom URL you specify in your options - 'fullscreen', // Toggle fullscreen + 'play-large', // The large play button in the center + 'restart', // Restart playback + 'rewind', // Rewind by the seek time (default 10 seconds) + 'play', // Play/pause playback + 'fast-forward', // Fast forward by the seek time (default 10 seconds) + 'progress', // The progress bar and scrubber for playback and buffering + 'current-time', // The current time of playback + 'duration', // The full duration of the media + 'mute', // Toggle mute + 'volume', // Volume control + 'captions', // Toggle captions + 'settings', // Settings menu + 'pip', // Picture-in-picture (currently Safari only) + 'airplay', // Airplay (currently Safari only) + 'download', // Show a download button with a link to either the current source or a custom URL you specify in your options + 'fullscreen', // Toggle fullscreen ]; ``` ### Internationalization using default controls -You can provide an `i18n` object as one of your options when initialising the plugin which we be used when rendering the controls. +You can provide an `i18n` object as one of your options when initializing the plugin which we be used when rendering the controls. #### Example @@ -84,14 +84,14 @@ The classes and data attributes used in your template should match the `selector You need to add several placeholders to your HTML template that are replaced when rendering: -- `{id}` - the dynamically generated ID for the player (for form controls) -- `{seektime}` - the seek time specified in options for fast forward and rewind -- `{title}` - the title of your media, if specified +- `{id}` - the dynamically generated ID for the player (for form controls) +- `{seektime}` - the seek time specified in options for fast forward and rewind +- `{title}` - the title of your media, if specified ### Limitations -- Currently the settings menus are not supported with custom controls HTML -- AirPlay and PiP buttons can be added but you will have to manage feature detection +- Currently the settings menus are not supported with custom controls HTML +- AirPlay and PiP buttons can be added but you will have to manage feature detection ### Example diff --git a/README.md b/README.md index 67b65679..336d3282 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,6 @@ +🎉 | [Plyr is merging into Vidstack](https://github.com/sampotts/plyr/issues/2408) | 🎉 +:---: | :---: | :--- + Plyr is a simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports [_modern_](#browser-support) browsers. [Checkout the demo](https://plyr.io) - [Donate](#donate) - [Slack](https://bit.ly/plyr--chat) @@ -131,21 +134,21 @@ Alternatively you can include the `plyr.js` script before the closing `` See [initialising](#initialising) for more information on advanced setups. -You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills seperately as part of your application but to make life easier you can use the polyfilled build. +You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills separately as part of your application but to make life easier you can use the polyfilled build. ```html - + ``` ...or... ```html - + ``` ## CSS -Include the `plyr.css` stylsheet into your ``. +Include the `plyr.css` stylesheet into your ``. ```html @@ -154,13 +157,13 @@ Include the `plyr.css` stylsheet into your ``. If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following: ```html - + ``` ## SVG Sprite The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For -reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.6.8/plyr.svg`. +reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.6.12/plyr.svg`. # Ads @@ -184,43 +187,43 @@ Here's a list of the properties and what they are used for: | Name | Description | Default / Fallback | | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | -| `--plyr-color-main` | The primary UI color. | ![#f03c15](https://place-hold.it/15/00b3ff/000000?text=+) `#00b3ff` | -| `--plyr-video-background` | The background color of video and poster wrappers for using alpha channel videos and poster images. | `rgba(0, 0, 0, 1)` | +| `--plyr-color-main` | The primary UI color. | ![#f03c15](https://place-hold.it/15/00b3ff/000000?text=+) `#00b3ff` | +| `--plyr-video-background` | The background color of video and poster wrappers for using alpha channel videos and poster images. | `rgba(0, 0, 0, 1)` | | `--plyr-tab-focus-color` | The color used for the dotted outline when an element is `:focus-visible` (equivalent) keyboard focus. | `--plyr-color-main` | -| `--plyr-badge-background` | The background color for badges in the menu. | ![#4a5464](https://place-hold.it/15/4a5464/000000?text=+) `#4a5464` | -| `--plyr-badge-text-color` | The text color for badges. | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | +| `--plyr-badge-background` | The background color for badges in the menu. | ![#4a5464](https://place-hold.it/15/4a5464/000000?text=+) `#4a5464` | +| `--plyr-badge-text-color` | The text color for badges. | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | | `--plyr-badge-border-radius` | The border radius used for badges. | `2px` | | `--plyr-tab-focus-color` | The color used to highlight tab (keyboard) focus. | `--plyr-color-main` | | `--plyr-captions-background` | The color for the background of captions. | `rgba(0, 0, 0, 0.8)` | -| `--plyr-captions-text-color` | The color used for the captions text. | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | +| `--plyr-captions-text-color` | The color used for the captions text. | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | | `--plyr-control-icon-size` | The size of the icons used in the controls. | `18px` | | `--plyr-control-spacing` | The space between controls (sometimes used in a multiple - e.g. `10px / 2 = 5px`). | `10px` | | `--plyr-control-padding` | The padding inside controls. | `--plyr-control-spacing * 0.7` (`7px`) | | `--plyr-control-radius` | The border radius used on controls. | `3px` | | `--plyr-control-toggle-checked-background` | The background color used for checked menu items. | `--plyr-color-main` | | `--plyr-video-controls-background` | The background for the video controls. | `linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75))` | -| `--plyr-video-control-color` | The text/icon color for video controls. | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | -| `--plyr-video-control-color-hover` | The text/icon color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | +| `--plyr-video-control-color` | The text/icon color for video controls. | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | +| `--plyr-video-control-color-hover` | The text/icon color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | | `--plyr-video-control-background-hover` | The background color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | `--plyr-color-main` | -| `--plyr-audio-controls-background` | The background for the audio controls. | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | -| `--plyr-audio-control-color` | The text/icon color for audio controls. | ![#4a5464](https://place-hold.it/15/4a5464/000000?text=+) `#4a5464` | -| `--plyr-audio-control-color-hover` | The text/icon color used when audio controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | +| `--plyr-audio-controls-background` | The background for the audio controls. | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | +| `--plyr-audio-control-color` | The text/icon color for audio controls. | ![#4a5464](https://place-hold.it/15/4a5464/000000?text=+) `#4a5464` | +| `--plyr-audio-control-color-hover` | The text/icon color used when audio controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | | `--plyr-audio-control-background-hover` | The background color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | `--plyr-color-main` | | `--plyr-menu-background` | The background color for menus. | `rgba(255, 255, 255, 0.9)` | -| `--plyr-menu-color` | The text/icon color for menu items. | ![#4a5464](https://place-hold.it/15/4a5464/000000?text=+) `#4a5464` | +| `--plyr-menu-color` | The text/icon color for menu items. | ![#4a5464](https://place-hold.it/15/4a5464/000000?text=+) `#4a5464` | | `--plyr-menu-shadow` | The shadow used on menus. | `0 1px 2px rgba(0, 0, 0, 0.15)` | | `--plyr-menu-radius` | The border radius on the menu. | `4px` | | `--plyr-menu-arrow-size` | The size of the arrow on the bottom of the menu. | `6px` | -| `--plyr-menu-item-arrow-color` | The color of the arrows in the menu. | ![#728197](https://place-hold.it/15/728197/000000?text=+) `#728197` | +| `--plyr-menu-item-arrow-color` | The color of the arrows in the menu. | ![#728197](https://place-hold.it/15/728197/000000?text=+) `#728197` | | `--plyr-menu-item-arrow-size` | The size of the arrows in the menu. | `4px` | -| `--plyr-menu-border-color` | The border color for the bottom of the back button in the top of the sub menu pages. | ![#dcdfe5](https://place-hold.it/15/dcdfe5/000000?text=+) `#dcdfe5` | -| `--plyr-menu-border-shadow-color` | The shadow below the border of the back button in the top of the sub menu pages. | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | +| `--plyr-menu-border-color` | The border color for the bottom of the back button in the top of the sub menu pages. | ![#dcdfe5](https://place-hold.it/15/dcdfe5/000000?text=+) `#dcdfe5` | +| `--plyr-menu-border-shadow-color` | The shadow below the border of the back button in the top of the sub menu pages. | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | | `--plyr-progress-loading-size` | The size of the stripes in the loading state in the scrubber. | `25px` | | `--plyr-progress-loading-background` | The background color on the loading state in the scrubber. | `rgba(35, 40, 47, 0.6)` | | `--plyr-video-progress-buffered-background` | The fill color for the buffer indication in the scrubber for video. | `rgba(255, 255, 255, 0.25)` | | `--plyr-audio-progress-buffered-background` | The fill color for the buffer indication in the scrubber for audio. | `rgba(193, 200, 209, 0.6)` | | `--plyr-range-thumb-height` | The height of the scrubber handle/thumb. | `13px` | -| `--plyr-range-thumb-background` | The background of the scrubber handle/thumb. | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | +| `--plyr-range-thumb-background` | The background of the scrubber handle/thumb. | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | | `--plyr-range-thumb-shadow` | The shadow of the scrubber handle/thumb. | `0 1px 1px rgba(215, 26, 18, 0.15), 0 0 0 1px rgba(215, 26, 18, 0.2)` | | `--plyr-range-thumb-active-shadow-width` | The width of the shadow when the scrubber handle/thumb is `:active` (pressed). | `3px` | | `--plyr-range-track-height` | The height of the scrubber/progress track. | `5px` | @@ -230,7 +233,7 @@ Here's a list of the properties and what they are used for: | `--plyr-audio-range-track-background` | The background of the scrubber/progress. | `--plyr-video-progress-buffered-background` | | `--plyr-audio-range-thumb-active-shadow-color` | The color of the shadow when the audio scrubber handle/thumb is `:active` (pressed). | `rgba(215, 26, 18, 0.1)` | | `--plyr-tooltip-background` | The background color for tooltips. | `rgba(255, 255, 255, 0.9)` | -| `--plyr-tooltip-color` | The text color for tooltips. | ![#4a5464](https://place-hold.it/15/4a5464/000000?text=+) `#4a5464` | +| `--plyr-tooltip-color` | The text color for tooltips. | ![#4a5464](https://place-hold.it/15/4a5464/000000?text=+) `#4a5464` | | `--plyr-tooltip-padding` | The padding for tooltips. | `calc(var(--plyr-control-spacing) / 2))` | | `--plyr-tooltip-arrow-size` | The size of the arrow under tooltips. | `4px` | | `--plyr-tooltip-radius` | The border radius on tooltips. | `3px` | @@ -267,9 +270,7 @@ You can set them in your CSS for all players: ...or in your HTML: ```html - + ``` ### SASS @@ -344,7 +345,7 @@ The HTMLElement or string selector can be the target `