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/CHANGELOG.md b/CHANGELOG.md
index 5635915e..23eceb47 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,22 @@
+### 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: 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)
@@ -61,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
@@ -106,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)
@@ -121,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)
@@ -155,7 +171,7 @@ _Note:_ This update contains CSS changes.
### 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
+- 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
@@ -518,7 +534,7 @@ This is a massive release. A _mostly_ complete rewrite in ES6. What started out
### Other stuff
-- Now using SASS exclusively. Sorry, LESS folk it just made sense to maintain one method as SASS is what the cool kids use. It may come back if we work out an automated way to convert the SASS
+- Now using Sass exclusively. Sorry, LESS folk it just made sense to maintain one method as Sass is what the cool kids use. It may come back if we work out an automated way to convert the Sass
- Moved to ES6. All the rage these days. You'll need to look at polyfills. The demo uses [polyfill.io](https://polyfill.io)
- Added basic looping support
- Added an aspect ratio option for those that can't leave the 90s and want 4:3
@@ -751,7 +767,7 @@ And some other changes and bug fixes:
## v1.7.0
-- SASS cleanup (fixes #265)
+- Sass cleanup (fixes #265)
- Docs tidy up to help quick start (fixes #253)
- Fix for issues with data attribute options passing (fixes #257)
- **_(Important)_** Removed the requirement for a wrapper div to setup Plyr and removed the dependency on the `plyr` classname as a JS hook. By default it will now look for `
`
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.9/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. |  `#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. |  `#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` |
-| `--plyr-badge-text-color` | The text color for badges. |  `#ffffff` |
+| `--plyr-badge-background` | The background color for badges in the menu. |  `#4a5464` |
+| `--plyr-badge-text-color` | The text color for badges. |  `#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` |
+| `--plyr-captions-text-color` | The color used for the captions 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` |
-| `--plyr-video-control-color-hover` | The text/icon color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent). |  `#ffffff` |
+| `--plyr-video-control-color` | The text/icon color for video controls. |  `#ffffff` |
+| `--plyr-video-control-color-hover` | The text/icon color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent). |  `#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` |
-| `--plyr-audio-control-color` | The text/icon color for audio controls. |  `#4a5464` |
-| `--plyr-audio-control-color-hover` | The text/icon color used when audio controls are `:hover`, `:focus` and `:focus-visible` (equivalent). |  `#ffffff` |
+| `--plyr-audio-controls-background` | The background for the audio controls. |  `#ffffff` |
+| `--plyr-audio-control-color` | The text/icon color for audio controls. |  `#4a5464` |
+| `--plyr-audio-control-color-hover` | The text/icon color used when audio controls are `:hover`, `:focus` and `:focus-visible` (equivalent). |  `#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` |
+| `--plyr-menu-color` | The text/icon color for menu items. |  `#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` |
+| `--plyr-menu-item-arrow-color` | The color of the arrows in the menu. |  `#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` |
-| `--plyr-menu-border-shadow-color` | The shadow below the border of the back button in the top of the sub menu pages. |  `#ffffff` |
+| `--plyr-menu-border-color` | The border color for the bottom of the back button in the top of the sub menu pages. |  `#dcdfe5` |
+| `--plyr-menu-border-shadow-color` | The shadow below the border of the back button in the top of the sub menu pages. |  `#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` |
+| `--plyr-range-thumb-background` | The background of the scrubber handle/thumb. |  `#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` |
+| `--plyr-tooltip-color` | The text color for tooltips. |  `#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,14 +270,12 @@ You can set them in your CSS for all players:
...or in your HTML:
```html
-
+
```
-### SASS
+### Sass
-You can use `plyr.scss` file included in `/src/sass` as part of your build and change variables to suit your design. The SASS requires you to
+You can use `plyr.scss` file included in `/src/sass` as part of your build and change variables to suit your design. The Sass requires you to
use [autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) (you should be already!) as all declarations use the W3C definitions.
The HTML markup uses the BEM methodology with `plyr` as the block, e.g. `.plyr__controls`. You can change the class hooks in the options to match any custom CSS
@@ -344,7 +345,7 @@ The HTMLElement or string selector can be the target `