From e48b1d11ce37960bc5803056561ec2b3996258c3 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Fri, 24 Apr 2020 00:47:41 +1000 Subject: Housekeeping --- .github/issue_template.md | 2 +- .npmignore | 2 +- .nvmrc | 2 +- CHANGELOG.md | 1157 +++++++++++++++++++++++++++++++++++++++++++++ CONTRIBUTING.md | 54 +++ CONTROLS.md | 154 ++++++ LICENSE.md | 21 + README.md | 879 ++++++++++++++++++++++++++++++++++ changelog.md | 1153 -------------------------------------------- contributing.md | 52 -- controls.md | 154 ------ demo/src/js/demo.js | 2 +- deploy.json | 20 +- license.md | 21 - plyr.code-workspace | 58 +-- readme.md | 879 ---------------------------------- src/js/plyr.d.ts | 2 +- tasks/build.js | 270 +++++------ tasks/deploy.js | 355 +++++++------- 19 files changed, 2622 insertions(+), 2615 deletions(-) create mode 100644 CHANGELOG.md create mode 100644 CONTRIBUTING.md create mode 100644 CONTROLS.md create mode 100644 LICENSE.md create mode 100644 README.md delete mode 100644 changelog.md delete mode 100644 contributing.md delete mode 100644 controls.md delete mode 100644 license.md delete mode 100644 readme.md diff --git a/.github/issue_template.md b/.github/issue_template.md index 54f4550b..44e1fcbf 100644 --- a/.github/issue_template.md +++ b/.github/issue_template.md @@ -1,3 +1,3 @@ PLEASE USE OUR SPECIFIC ISSUE TEMPLATES for bug reports, features and improvement suggestions. -Our issue tracker is not for support questions. If you need help, follow our support instructions: https://github.com/sampotts/plyr/blob/master/contributing.md#support +Our issue tracker is not for support questions. If you need help, follow our support instructions: https://github.com/sampotts/plyr/blob/master/CONTRIBUTING.md#support diff --git a/.npmignore b/.npmignore index 34fa1755..1caa61f0 100644 --- a/.npmignore +++ b/.npmignore @@ -9,4 +9,4 @@ yarn.lock package-lock.json *.mp4 *.webm -!dist/blank.mp4 \ No newline at end of file +!dist/blank.mp4 diff --git a/.nvmrc b/.nvmrc index 12591bdf..4e8c43e7 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v13.8.0 \ No newline at end of file +v13.8.0 diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 00000000..d73b6dcf --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,1157 @@ +## v3.6.0 + +- You can now easily change colors using CSS Custom Properties. + +### v3.5.10 + +- iOS volume display fix + +### v3.5.9 + +- Fix for regression with volume control width +- Ensure poster image is not downloaded again for HTML5 videos + +### 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) +- 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) +- Add previewThumbnails source setter (thanks @ydylla) +- More speed setting logic improvements + +### v3.5.7 + +- Typescript typings (thanks @ondratra) +- `togglePlay` now also returns a `Promise` (thanks @azizhk) +- Documentation improvements and typo fixes (thanks @ffpetrovic, @skerbis, @ayunami2000, @pjbaert, @MaxGiting, @0xflotus and @thatrobotdev) +- 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) +- 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) +- Change vimeo demo video (thanks @thatrobotdev) +- Fix for `Uncaught RangeError: Maximum call stack size exceeded` (thanks @laukstein) +- Improve fullscreen experience on some devices (thanks @savroff) +- Improvements to buffering state for embedded players (thanks @doostinharrell) +- Prevents IE11 with resetOnEnd option set to true to play video again (thanks @Felipe K. De Boni) +- Fix for multiple poster image downloads (use the native poster only for HTML5 videos) +- Various presentational fixes +- Removed logic to hide/show volume controls based on audio track detection due to it's problematic nature. If you want to hide volume control, use the `controls` option to do so. +- Fix preview thumbnail scrubbing not working on mobile touch devices (thanks @ydylla) +- Add download attribute to download button (thanks @Code1110) +- Trap keyboard focus only when fullscreen (thanks @k-jensen) +- Improvements to speed options - you can now specify all options in the UI (YouTube and Vimeo only accept 0.5-2) (thanks @ydylla) +- Improve/fix quality change state restoring (thanks @ydylla) + +_Note:_ This update contains CSS changes. + +### v3.5.6 + +- Another Edge fix (thanks Nick Hawk via Slack) + +### v3.5.5 + +- YouTube fix for when there are other embeds on the page (thanks @aFarkas) +- Separated demo dependencies into their own package.json +- Fix for Edge controls flexbox issue when resizing the player (thanks Nick Hawk via Slack) +- More aspect ratio fixes + +### v3.5.4 + +- Added: Set download URL via new setter +- Improvement: The order of the `controls` option now effects the order in the DOM - i.e. you can re-order the controls - Note: this may break any custom CSS you have setup. Please see the changes in the PR to the default SASS +- Fixed issue with empty controls and preview thumbs +- Fixed issue with setGutter call (from Sentry) +- Fixed issue with initial selected speed not working +- Added notes on `autoplay` config option and browser compatibility +- Fixed issue with ads volume not matching current content volume +- Fixed race condition where ads were loading during source change +- Improvement: Automatic aspect ratio for YouTube is now supported, meaning all aspect ratios are set based on media content - Note: we're now using a different API to get YouTube video metadata so you may need to adjust any CSPs you have setup +- Fix for menu in the Shadow DOM (thanks @emielbeinema) + +### v3.5.3 + +- Improved the usage of the `ratio` config option; it now works as expected and for all video types. The default has not changed, it is to dynamically, where possible (except YouTube where 16:9 is used) determine the ratio from the media source so this is not a breaking change. +- Added new `ratio` getter and setter +- Fix: Properly clear all timeouts on destroy +- Fix: Allow absolute paths in preview thumbnails +- Improvement: Allow optional hours and ms in VTT parser in preview thumbnails + +### v3.5.2 + +- Fixed issue where the preview thumbnail was present while scrubbing + +### v3.5.1 + +- Fixed build issues with babel and browserslist + +## v3.5.0 + +- Preview seek/scrubbing thumbnails (thanks @jamesoflol) +- Fixes for proxy listeners (thanks @gurupras) +- Fix for buffer progress transition on WebKit (thanks @samuelgozi) +- Fix for error when mime type not specified (fixes #1274) +- Support YouTube noCookie (thanks Omar Khatib) +- Add Angular plugin reference (thanks @smnbbrv) +- Use `Math.trunc` instead of `parseInt` (thanks @taion) +- Many fixes for fullscreen in embedded players with non 16:9 screens or videos +- Added 'force' fallback option for fullscreen +- [RangeTouch](https://rangetouch.com) is now bundled with Plyr as a dependency to fix the scrubber on touch devices + +### v3.4.8 + +- Calling customized controls function with proper arguments (thanks @a60814billy) + +### v3.4.7 + +- Fix for Vimeo fullscreen with non native aspect ratios (fixes #854) + +### v3.4.6 + +- Added picture-in-picture support for Chrome 70+ +- Fixed issue with versioning the SVG sprite in the gulp build script + +### v3.4.5 + +- Added download button option to download either current source or a custom URL you specify in options +- Prevent immediate hiding of controls on mobile (thanks @jamesoflol) +- Don't hide controls on focusout event (fixes #1122) (thanks @jamesoflol) +- Fix HTML5 quality settings being incorrectly set in local storage (thanks @TechGuard) + +### v3.4.4 + +- Fixed issue with double binding for `click` and `touchstart` for `clickToPlay` option +- Improved "faux" fullscreen on iPhone X/XS phones with notch +- Babel 7 upgrade (which reduced the polyfilled build by ~10kb!) + +### v3.4.3 + +- Fixed issue with nodeList for custom playback controls + +### v3.4.2 + +- Fix play/pause button state + +### v3.4.1 + +- Bug fix for custom controls (fixes #1161) + +## v3.4.0 + +- Accessibility improvements (see #905) +- Improvements to the way the controls work on iOS +- Demo code clean up +- YouTube quality selection removed due to their poor support for it. As a result, the `qualityrequested` event has been removed +- Controls spacing improvements +- Fix for pressed property missing with custom controls (Fixes #1062) +- Fix #1153: Captions language fallback (thanks @friday) +- Fix for setting pressed property of undefined (Fixes #1102) + +### v3.3.23 + +- Add support for YouTube's hl param (thanks @renaudleo) +- Fix for captions positioning when no controls (thanks @friday and @mjfwebb) +- Fix #1108: Make sure youtube.onReady doesn't run twice (thanks @friday) +- Fix for WebKit repaint loop on the `` elements + +### v3.3.22 + +- Travis & CI improvements (thanks @friday) +- Add navigator.languages fallback for iOS 9 (thanks @friday) + +### v3.3.21 + +- Hide currentTime and progress for streams (thanks @mimse) +- Fixed condition check (thanks @mimse) +- Handle undefined this.player.elements.buttons.play (thanks @klassicd) +- Fix captions.toggle() if there is no toggle button (thanks @friday) + +### v3.3.20 + +- Fix for bug where controls wouldn't show on hover over YouTube video + +### v3.3.19 + +- Remove `pointer-events: none` on embed ` + +``` + +_Note_: The `plyr__video-embed` classname will make the player a responsive 16:9 (most common) iframe embed. When plyr itself kicks in, your custom `ratio` config option will be used. + +Or the `
` non progressively enhanced method: + +```html +
+``` + +_Note_: The `data-plyr-embed-id` can either be the video ID or URL for the media. + +### Vimeo + +Much the same as YouTube above. + +```html +
+ +
+``` + +Or the `
` non progressively enhanced method: + +```html +
+``` + +## JavaScript + +You can use Plyr as an ES6 module as follows: + +```javascript +import Plyr from 'plyr'; + +const player = new Plyr('#player'); +``` + +Alternatively you can include the `plyr.js` script before the closing `` tag and then in your JS create a new instance of Plyr as below. + +```html + + +``` + +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. + +```html + +``` + +...or... + +```html + +``` + +## CSS + +Include the `plyr.css` stylsheet into your ``. + +```html + +``` + +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.5.10/plyr.svg`. + +# Ads + +Plyr has partnered up with [vi.ai](https://vi.ai/publisher-video-monetization/?aid=plyrio) to offer monetization options for your videos. Getting setup is easy: + +- [Sign up for a vi.ai account](https://vi.ai/publisher-video-monetization/?aid=plyrio) +- Grab your publisher ID from the code snippet +- Enable ads in the [config options](#options) and enter your publisher ID + +Any questions regarding the ads can be sent straight to vi.ai and any issues with rendering raised through GitHub issues. + +If you do not wish to use Vi, you can set your own `ads.tagUrl` [option](#options). + +# Advanced + +## Customizing the CSS + +If you want to change any design tokens used for the rendering of the player, you can do so using [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). + +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://placehold.it/15/00b3ff/000000?text=+) `#00b3ff` | +| `--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://placehold.it/15/4a5464/000000?text=+) `#4a5464` | +| `--plyr-badge-text-color` | The text color for badges. | ![#ffffff](https://placehold.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://placehold.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://placehold.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://placehold.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://placehold.it/15/ffffff/000000?text=+) `#ffffff` | +| `--plyr-audio-control-color` | The text/icon color for audio controls. | ![#4a5464](https://placehold.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://placehold.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://placehold.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://placehold.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://placehold.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://placehold.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://placehold.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` | +| `--plyr-range-fill-background` | The fill color of the scrubber/progress. | `--plyr-color-main` | +| `--plyr-video-range-track-background` | The background of the scrubber/progress. | `--plyr-video-progress-buffered-background` | +| `--plyr-video-range-thumb-active-shadow-color` | The color of the shadow when the video scrubber handle/thumb is `:active` (pressed). | `rgba(255, 255, 255, 0.5)` | +| `--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://placehold.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` | +| `--plyr-tooltip-shadow` | The shadow on tooltips. | `0 1px 2px rgba(0, 0, 0, 0.15)` | +| `--plyr-font-family` | The font family used in the player. | | +| `--plyr-font-size-base` | The base font size. Mainly used for captions. | `15px` | +| `--plyr-font-size-small` | The smaller font size. Mainly used for captions. | `13px` | +| `--plyr-font-size-large` | The larger font size. Mainly used for captions. | `18px` | +| `--plyr-font-size-xlarge` | The even larger font size. Mainly used for captions. | `21px` | +| `--plyr-font-size-time` | The font size for the time. | `--plyr-font-size-small` | +| `--plyr-font-size-menu` | The font size used in the menu. | `--plyr-font-size-small` | +| `--plyr-font-size-badge` | The font size used for badges. | `9px` | +| `--plyr-font-weight-regular` | The regular font weight. | `400` | +| `--plyr-font-weight-bold` | The bold font weight. | `600` | +| `--plyr-line-height` | The line height used within the player. | `1.7` | +| `--plyr-font-smoothing` | Whether to enable font antialiasing within the player. | `false` | + +You can set them in your CSS for all players: + +```css +:root { + --plyr-color-main: #1ac266; +} +``` + +...or for a specific class name: + +```css +.player { + --plyr-color-main: #1ac266; +} +``` + +...or in your HTML: + +```html +