Compare commits
21 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 20bf5a8833 | |||
| de0402bebf | |||
| db1b89b1c1 | |||
| ea3675fcdc | |||
| e8beabd6a8 | |||
| 433acd6f41 | |||
| 69ced1313a | |||
| 511a7db7c2 | |||
| 6a62e3d085 | |||
| aba00d0ab6 | |||
| c115dfc6a6 | |||
| 6030b300f6 | |||
| fff26351c9 | |||
| e0fb524382 | |||
| ebda039395 | |||
| ed456197f5 | |||
| 66187c348a | |||
| cacaef7def | |||
| 42b8f7bdab | |||
| c90f044dac | |||
| 5f2cb90bc6 |
@@ -0,0 +1 @@
|
|||||||
|
16.18.1
|
||||||
+20
-1
@@ -1,7 +1,26 @@
|
|||||||
|
### v3.7.3
|
||||||
|
|
||||||
|
- Fix: force nowrap in progress tooltips (related: #2549) (thanks @raad-altaie!)
|
||||||
|
- Feat(i18n): Make captions autodetect text direction (#2540) (thanks @ebraminio!)
|
||||||
|
- Fix: fixed menu border radius bug (#2548) (thanks @raad-altaie!)
|
||||||
|
- Chore: navigator.platform is deprecated (#2530) (thanks @stamat!)
|
||||||
|
- Feat: Added configurable property to elements for re-use (#2489) (thanks @NoirHusky!)
|
||||||
|
- Docs: Replace example video ID with one that still works (#2518) (thanks @luvejo!)
|
||||||
|
- Fix: Improve accessibility on control buttons with aria-pressed (#2523) (thanks @emilkarl!)
|
||||||
|
- Fix: Fix for calc() in newer Dart Sass versions (#2519) (thanks @ckhicks!)
|
||||||
|
- Fix: simplify logic for isFunction assertion method
|
||||||
|
- Chore: update types to include string for controls
|
||||||
|
- Chore: upgrade packages
|
||||||
|
- Chore: use `.node-version` instead of `.nvmrc`
|
||||||
|
|
||||||
|
### v3.7.2
|
||||||
|
|
||||||
|
- Fix: Add `@babel/plugin-proposal-optional-chaining` to transform optional chaining in build output
|
||||||
|
|
||||||
### v3.7.1
|
### v3.7.1
|
||||||
|
|
||||||
- Feat: Minor styling improvements to the preview thumbnails (🚨 Requires a SCSS/CSS update 🚨)
|
- Feat: Minor styling improvements to the preview thumbnails (🚨 Requires a SCSS/CSS update 🚨)
|
||||||
- Fix: fix invalid CSS @charset rule in Sass files (thanks @Hashen110!)
|
- Fix: Fix invalid CSS @charset rule in Sass files (thanks @Hashen110!)
|
||||||
- Chore: Replace deprecated KeyboardEvent `keyCode` references to use `key` instead (thanks @Hashen110!)
|
- Chore: Replace deprecated KeyboardEvent `keyCode` references to use `key` instead (thanks @Hashen110!)
|
||||||
- Various other code clean up and typo fixes (thanks @Hashen110!)
|
- Various other code clean up and typo fixes (thanks @Hashen110!)
|
||||||
|
|
||||||
|
|||||||
@@ -137,13 +137,13 @@ 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 separately 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
|
```html
|
||||||
<script src="https://cdn.plyr.io/3.7.1/plyr.js"></script>
|
<script src="https://cdn.plyr.io/3.7.3/plyr.js"></script>
|
||||||
```
|
```
|
||||||
|
|
||||||
...or...
|
...or...
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<script src="https://cdn.plyr.io/3.7.1/plyr.polyfilled.js"></script>
|
<script src="https://cdn.plyr.io/3.7.3/plyr.polyfilled.js"></script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## CSS
|
## CSS
|
||||||
@@ -157,13 +157,13 @@ Include the `plyr.css` stylesheet into your `<head>`.
|
|||||||
If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:
|
If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.1/plyr.css" />
|
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.3/plyr.css" />
|
||||||
```
|
```
|
||||||
|
|
||||||
## SVG Sprite
|
## 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
|
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.7.1/plyr.svg`.
|
reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.7.3/plyr.svg`.
|
||||||
|
|
||||||
# Ads
|
# Ads
|
||||||
|
|
||||||
@@ -613,7 +613,7 @@ player.source = {
|
|||||||
type: 'video',
|
type: 'video',
|
||||||
sources: [
|
sources: [
|
||||||
{
|
{
|
||||||
src: '143418951',
|
src: '76979871',
|
||||||
provider: 'vimeo',
|
provider: 'vimeo',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
@@ -846,6 +846,7 @@ Plyr costs money to run, not only my time. I donate my time for free as I enjoy
|
|||||||
- [STROLLÿN: Work with a View](https://strollyn.com)
|
- [STROLLÿN: Work with a View](https://strollyn.com)
|
||||||
- [CFDA Runway360](https://runway360.cfda.com/)
|
- [CFDA Runway360](https://runway360.cfda.com/)
|
||||||
- [NKLAV | Filmmaker](https://nklav.com)
|
- [NKLAV | Filmmaker](https://nklav.com)
|
||||||
|
- [GDI.JS.ORG - Google Drive Index](https://gitlab.com/GoogleDriveIndex/Google-Drive-Index)
|
||||||
|
|
||||||
If you want to be added to the list, open a pull request. It'd be awesome to see how you're using Plyr 😎
|
If you want to be added to the list, open a pull request. It'd be awesome to see how you're using Plyr 😎
|
||||||
|
|
||||||
|
|||||||
+22
-21
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "plyr",
|
"name": "plyr",
|
||||||
"version": "3.7.1",
|
"version": "3.7.3",
|
||||||
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
|
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
|
||||||
"homepage": "https://plyr.io",
|
"homepage": "https://plyr.io",
|
||||||
"author": "Sam Potts <sam@potts.es>",
|
"author": "Sam Potts <sam@potts.es>",
|
||||||
@@ -40,18 +40,19 @@
|
|||||||
"start": "gulp"
|
"start": "gulp"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.17.9",
|
"@babel/core": "^7.20.2",
|
||||||
"@babel/plugin-proposal-class-properties": "^7.16.7",
|
"@babel/plugin-proposal-class-properties": "^7.18.6",
|
||||||
"@babel/preset-env": "^7.16.11",
|
"@babel/plugin-proposal-optional-chaining": "^7.18.9",
|
||||||
|
"@babel/preset-env": "^7.20.2",
|
||||||
"@sampotts/eslint-config": "1.1.7",
|
"@sampotts/eslint-config": "1.1.7",
|
||||||
"autoprefixer": "^10.4.4",
|
"autoprefixer": "^10.4.13",
|
||||||
"aws-sdk": "^2.1116.0",
|
"aws-sdk": "^2.1256.0",
|
||||||
"babel-eslint": "^10.1.0",
|
"babel-eslint": "^10.1.0",
|
||||||
"browser-sync": "^2.27.9",
|
"browser-sync": "^2.27.10",
|
||||||
"colorette": "2.0.16",
|
"colorette": "2.0.19",
|
||||||
"cspell": "^5.19.7",
|
"cspell": "^6.14.2",
|
||||||
"cssnano": "^5.1.7",
|
"cssnano": "^5.1.14",
|
||||||
"del": "^6.0.0",
|
"del": "^6.1.1",
|
||||||
"eslint": "^7.23.0",
|
"eslint": "^7.23.0",
|
||||||
"fancy-log": "^2.0.0",
|
"fancy-log": "^2.0.0",
|
||||||
"git-branch": "^2.0.1",
|
"git-branch": "^2.0.1",
|
||||||
@@ -73,25 +74,25 @@
|
|||||||
"gulp-sourcemaps": "^3.0.0",
|
"gulp-sourcemaps": "^3.0.0",
|
||||||
"gulp-svgstore": "^9.0.0",
|
"gulp-svgstore": "^9.0.0",
|
||||||
"gulp-terser": "^2.1.0",
|
"gulp-terser": "^2.1.0",
|
||||||
"postcss": "^8.4.12",
|
"postcss": "^8.4.19",
|
||||||
"postcss-custom-properties": "^12.1.7",
|
"postcss-custom-properties": "^12.1.9",
|
||||||
"postcss-scss": "^4.0.3",
|
"postcss-scss": "^4.0.5",
|
||||||
"prettier-eslint": "^12.0.0",
|
"prettier-eslint": "^12.0.0",
|
||||||
"prettier-stylelint": "^0.4.2",
|
"prettier-stylelint": "^0.4.2",
|
||||||
"remark-cli": "^10.0.1",
|
"remark-cli": "^11.0.0",
|
||||||
"remark-validate-links": "^11.0.2",
|
"remark-validate-links": "^12.1.0",
|
||||||
"rollup": "^2.70.2",
|
"rollup": "^3.3.0",
|
||||||
"rollup-plugin-babel": "^4.4.0",
|
"rollup-plugin-babel": "^4.4.0",
|
||||||
"rollup-plugin-commonjs": "^10.1.0",
|
"rollup-plugin-commonjs": "^10.1.0",
|
||||||
"rollup-plugin-node-resolve": "^5.2.0",
|
"rollup-plugin-node-resolve": "^5.2.0",
|
||||||
"sass": "^1.50.0",
|
"sass": "^1.56.1",
|
||||||
"stylelint": "^14.7.1",
|
"stylelint": "^14.15.0",
|
||||||
"stylelint-config-prettier": "^9.0.3",
|
"stylelint-config-prettier": "^9.0.4",
|
||||||
"stylelint-config-sass-guidelines": "^9.0.1",
|
"stylelint-config-sass-guidelines": "^9.0.1",
|
||||||
"stylelint-selector-bem-pattern": "^2.1.1"
|
"stylelint-selector-bem-pattern": "^2.1.1"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"core-js": "^3.22.0",
|
"core-js": "^3.26.1",
|
||||||
"custom-event-polyfill": "^1.0.7",
|
"custom-event-polyfill": "^1.0.7",
|
||||||
"loadjs": "^4.2.0",
|
"loadjs": "^4.2.0",
|
||||||
"rangetouch": "^2.0.1",
|
"rangetouch": "^2.0.1",
|
||||||
|
|||||||
@@ -47,6 +47,7 @@ const captions = {
|
|||||||
// Inject the container
|
// Inject the container
|
||||||
if (!is.element(this.elements.captions)) {
|
if (!is.element(this.elements.captions)) {
|
||||||
this.elements.captions = createElement('div', getAttributesFromSelector(this.config.selectors.captions));
|
this.elements.captions = createElement('div', getAttributesFromSelector(this.config.selectors.captions));
|
||||||
|
this.elements.captions.setAttribute('dir', 'auto');
|
||||||
|
|
||||||
insertAfter(this.elements.captions, this.elements.wrapper);
|
insertAfter(this.elements.captions, this.elements.wrapper);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -61,7 +61,7 @@ const defaults = {
|
|||||||
// Sprite (for icons)
|
// Sprite (for icons)
|
||||||
loadSprite: true,
|
loadSprite: true,
|
||||||
iconPrefix: 'plyr',
|
iconPrefix: 'plyr',
|
||||||
iconUrl: 'https://cdn.plyr.io/3.7.1/plyr.svg',
|
iconUrl: 'https://cdn.plyr.io/3.7.3/plyr.svg',
|
||||||
|
|
||||||
// Blank video (used to prevent errors on source change)
|
// Blank video (used to prevent errors on source change)
|
||||||
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
|
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
|
||||||
|
|||||||
Vendored
+4
@@ -1715,13 +1715,17 @@ const controls = {
|
|||||||
if (!is.empty(this.elements.buttons)) {
|
if (!is.empty(this.elements.buttons)) {
|
||||||
const addProperty = (button) => {
|
const addProperty = (button) => {
|
||||||
const className = this.config.classNames.controlPressed;
|
const className = this.config.classNames.controlPressed;
|
||||||
|
button.setAttribute('aria-pressed', 'false');
|
||||||
|
|
||||||
Object.defineProperty(button, 'pressed', {
|
Object.defineProperty(button, 'pressed', {
|
||||||
|
configurable: true,
|
||||||
enumerable: true,
|
enumerable: true,
|
||||||
get() {
|
get() {
|
||||||
return hasClass(button, className);
|
return hasClass(button, className);
|
||||||
},
|
},
|
||||||
set(pressed = false) {
|
set(pressed = false) {
|
||||||
toggleClass(button, className, pressed);
|
toggleClass(button, className, pressed);
|
||||||
|
button.setAttribute('aria-pressed', pressed ? 'true' : 'false');
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|||||||
Vendored
+4
-4
@@ -341,7 +341,7 @@ declare namespace Plyr {
|
|||||||
* id (the unique id for the player), seektime (the seektime step in seconds), and title (the media title). See CONTROLS.md for more info on how the html needs to be structured.
|
* id (the unique id for the player), seektime (the seektime step in seconds), and title (the media title). See CONTROLS.md for more info on how the html needs to be structured.
|
||||||
* Defaults to ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen']
|
* Defaults to ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen']
|
||||||
*/
|
*/
|
||||||
controls?: string[] | ((id: string, seektime: number, title: string) => unknown) | Element;
|
controls?: string | string[] | ((id: string, seektime: number, title: string) => unknown) | Element;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* If you're using the default controls are used then you can specify which settings to show in the menu
|
* If you're using the default controls are used then you can specify which settings to show in the menu
|
||||||
@@ -459,7 +459,7 @@ declare namespace Plyr {
|
|||||||
* Allows binding of event listeners to the controls before the default handlers. See the defaults.js for available listeners.
|
* Allows binding of event listeners to the controls before the default handlers. See the defaults.js for available listeners.
|
||||||
* If your handler prevents default on the event (event.preventDefault()), the default handler will not fire.
|
* If your handler prevents default on the event (event.preventDefault()), the default handler will not fire.
|
||||||
*/
|
*/
|
||||||
listeners?: {[key: string]: (error: PlyrEvent) => void};
|
listeners?: { [key: string]: (error: PlyrEvent) => void };
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* active: Toggles if captions should be active by default. language: Sets the default language to load (if available). 'auto' uses the browser language.
|
* active: Toggles if captions should be active by default. language: Sets the default language to load (if available). 'auto' uses the browser language.
|
||||||
@@ -606,7 +606,7 @@ declare namespace Plyr {
|
|||||||
|
|
||||||
interface MarkersOptions {
|
interface MarkersOptions {
|
||||||
enabled: boolean;
|
enabled: boolean;
|
||||||
points: MarkersPoints[]
|
points: MarkersPoints[];
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Elements {
|
export interface Elements {
|
||||||
@@ -700,7 +700,7 @@ declare namespace Plyr {
|
|||||||
}
|
}
|
||||||
|
|
||||||
interface PlyrEvent extends CustomEvent {
|
interface PlyrEvent extends CustomEvent {
|
||||||
readonly detail: {readonly plyr: Plyr};
|
readonly detail: { readonly plyr: Plyr };
|
||||||
}
|
}
|
||||||
|
|
||||||
enum YoutubeState {
|
enum YoutubeState {
|
||||||
|
|||||||
+1
-1
@@ -1,6 +1,6 @@
|
|||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
// Plyr
|
// Plyr
|
||||||
// plyr.js v3.7.1
|
// plyr.js v3.7.3
|
||||||
// https://github.com/sampotts/plyr
|
// https://github.com/sampotts/plyr
|
||||||
// License: The MIT License (MIT)
|
// License: The MIT License (MIT)
|
||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
// Plyr Polyfilled Build
|
// Plyr Polyfilled Build
|
||||||
// plyr.js v3.7.1
|
// plyr.js v3.7.3
|
||||||
// https://github.com/sampotts/plyr
|
// https://github.com/sampotts/plyr
|
||||||
// License: The MIT License (MIT)
|
// License: The MIT License (MIT)
|
||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
|
|||||||
@@ -38,6 +38,9 @@ const support = {
|
|||||||
// Picture-in-picture support
|
// Picture-in-picture support
|
||||||
// Safari & Chrome only currently
|
// Safari & Chrome only currently
|
||||||
pip: (() => {
|
pip: (() => {
|
||||||
|
// While iPhone's support picture-in-picture for some apps, seemingly Safari isn't one of them
|
||||||
|
// It will throw the following error when trying to enter picture-in-picture
|
||||||
|
// `NotSupportedError: The Picture-in-Picture mode is not supported.`
|
||||||
if (browser.isIPhone) {
|
if (browser.isIPhone) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,12 +5,10 @@
|
|||||||
|
|
||||||
const browser = {
|
const browser = {
|
||||||
isIE: Boolean(window.document.documentMode),
|
isIE: Boolean(window.document.documentMode),
|
||||||
isEdge: window.navigator.userAgent.includes('Edge'),
|
isEdge: /Edge/g.test(navigator.userAgent),
|
||||||
isWebkit: 'WebkitAppearance' in document.documentElement.style && !/Edge/.test(navigator.userAgent),
|
isWebkit: 'WebkitAppearance' in document.documentElement.style && !/Edge/g.test(navigator.userAgent),
|
||||||
isIPhone: /(iPhone|iPod)/gi.test(navigator.platform),
|
isIPhone: /iPhone|iPod/gi.test(navigator.userAgent) && navigator.maxTouchPoints > 1,
|
||||||
isIos:
|
isIos: /iPad|iPhone|iPod/gi.test(navigator.userAgent) && navigator.maxTouchPoints > 1,
|
||||||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) ||
|
|
||||||
/(iPad|iPhone|iPod)/gi.test(navigator.platform),
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default browser;
|
export default browser;
|
||||||
|
|||||||
+1
-1
@@ -9,7 +9,7 @@ const isObject = (input) => getConstructor(input) === Object;
|
|||||||
const isNumber = (input) => getConstructor(input) === Number && !Number.isNaN(input);
|
const isNumber = (input) => getConstructor(input) === Number && !Number.isNaN(input);
|
||||||
const isString = (input) => getConstructor(input) === String;
|
const isString = (input) => getConstructor(input) === String;
|
||||||
const isBoolean = (input) => getConstructor(input) === Boolean;
|
const isBoolean = (input) => getConstructor(input) === Boolean;
|
||||||
const isFunction = (input) => getConstructor(input) === Function;
|
const isFunction = (input) => typeof input === 'function';
|
||||||
const isArray = (input) => Array.isArray(input);
|
const isArray = (input) => Array.isArray(input);
|
||||||
const isWeakMap = (input) => instanceOf(input, WeakMap);
|
const isWeakMap = (input) => instanceOf(input, WeakMap);
|
||||||
const isNodeList = (input) => instanceOf(input, NodeList);
|
const isNodeList = (input) => instanceOf(input, NodeList);
|
||||||
|
|||||||
@@ -26,7 +26,7 @@
|
|||||||
&__container {
|
&__container {
|
||||||
animation: plyr-popup 0.2s ease;
|
animation: plyr-popup 0.2s ease;
|
||||||
background: $plyr-menu-background;
|
background: $plyr-menu-background;
|
||||||
border-radius: 4px;
|
border-radius: $plyr-menu-radius;
|
||||||
bottom: 100%;
|
bottom: 100%;
|
||||||
box-shadow: $plyr-menu-shadow;
|
box-shadow: $plyr-menu-shadow;
|
||||||
color: $plyr-menu-color;
|
color: $plyr-menu-color;
|
||||||
@@ -192,7 +192,7 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: calc((#{$plyr-control-padding} - 2) * -1);
|
margin-right: calc((#{$plyr-control-padding} - 2px) * -1);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding-left: calc(#{$plyr-control-padding} * 3.5);
|
padding-left: calc(#{$plyr-control-padding} * 3.5);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|||||||
@@ -27,7 +27,6 @@ $plyr-progress-offset: $plyr-range-thumb-height;
|
|||||||
left: 0;
|
left: 0;
|
||||||
max-width: 120px;
|
max-width: 120px;
|
||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
white-space: normal;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
+1
-1
@@ -118,7 +118,7 @@ Object.entries(build.js).forEach(([filename, entry]) => {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
],
|
],
|
||||||
plugins: ['@babel/plugin-proposal-class-properties'],
|
plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-optional-chaining'],
|
||||||
babelrc: false,
|
babelrc: false,
|
||||||
exclude: [/\/core-js\//],
|
exclude: [/\/core-js\//],
|
||||||
}),
|
}),
|
||||||
|
|||||||
Reference in New Issue
Block a user