aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/js/config/defaults.js2
-rw-r--r--src/js/controls.js2
-rw-r--r--src/js/html5.js13
-rw-r--r--src/js/listeners.js8
-rw-r--r--src/js/plugins/vimeo.js23
-rw-r--r--src/js/plyr.js2
-rw-r--r--src/js/plyr.polyfilled.js2
-rw-r--r--src/js/source.js10
-rw-r--r--src/js/support.js26
-rw-r--r--src/js/utils/elements.js2
-rw-r--r--src/sass/components/progress.scss2
-rw-r--r--src/sass/settings/sliders.scss2
-rw-r--r--src/sass/settings/type.scss2
13 files changed, 62 insertions, 34 deletions
diff --git a/src/js/config/defaults.js b/src/js/config/defaults.js
index 6ac21f23..fd56f196 100644
--- a/src/js/config/defaults.js
+++ b/src/js/config/defaults.js
@@ -60,7 +60,7 @@ const defaults = {
// Sprite (for icons)
loadSprite: true,
iconPrefix: 'plyr',
- iconUrl: 'https://cdn.plyr.io/3.4.6/plyr.svg',
+ iconUrl: 'https://cdn.plyr.io/3.4.7/plyr.svg',
// Blank video (used to prevent errors on source change)
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
diff --git a/src/js/controls.js b/src/js/controls.js
index 4f453e6a..f414f6d6 100644
--- a/src/js/controls.js
+++ b/src/js/controls.js
@@ -1587,7 +1587,7 @@ const controls = {
// If function, run it and use output
if (is.function(this.config.controls)) {
- this.config.controls = this.config.controls.call(this.props);
+ this.config.controls = this.config.controls.call(this, props);
}
// Convert falsy controls to empty array (primarily for empty strings)
diff --git a/src/js/html5.js b/src/js/html5.js
index 0876211a..3266a58e 100644
--- a/src/js/html5.js
+++ b/src/js/html5.js
@@ -5,6 +5,7 @@
import support from './support';
import { removeElement } from './utils/elements';
import { triggerEvent } from './utils/events';
+import is from './utils/is';
const html5 = {
getSources() {
@@ -14,8 +15,16 @@ const html5 = {
const sources = Array.from(this.media.querySelectorAll('source'));
- // Filter out unsupported sources
- return sources.filter(source => support.mime.call(this, source.getAttribute('type')));
+ // Filter out unsupported sources (if type is specified)
+ return sources.filter(source => {
+ const type = source.getAttribute('type');
+
+ if (is.empty(type)) {
+ return true;
+ }
+
+ return support.mime.call(this, type);
+ });
},
// Get quality levels
diff --git a/src/js/listeners.js b/src/js/listeners.js
index f8ea997f..f073f5cb 100644
--- a/src/js/listeners.js
+++ b/src/js/listeners.js
@@ -317,7 +317,7 @@ class Listeners {
// Check for audio tracks on load
// We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point
- on.call(player, player.media, 'canplay', () => {
+ on.call(player, player.media, 'canplay loadeddata', () => {
toggleHidden(elements.volume, !player.hasAudio);
toggleHidden(elements.buttons.mute, !player.hasAudio);
});
@@ -386,10 +386,10 @@ class Listeners {
}
if (player.ended) {
- player.restart();
- player.play();
+ this.proxy(event, player.restart, 'restart');
+ this.proxy(event, player.play, 'play');
} else {
- player.togglePlay();
+ this.proxy(event, player.togglePlay, 'play');
}
});
}
diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js
index 3c3dee20..2d9ba6e2 100644
--- a/src/js/plugins/vimeo.js
+++ b/src/js/plugins/vimeo.js
@@ -70,8 +70,9 @@ const vimeo = {
// Set aspect ratio
// For Vimeo we have an extra 300% height <div> to hide the standard controls and UI
setAspectRatio(input) {
- const [x, y] = (is.string(input) ? input : this.config.ratio).split(':');
+ const [x, y] = (is.string(input) ? input : this.config.ratio).split(':').map(Number);
const padding = (100 / x) * y;
+ vimeo.padding = padding;
this.elements.wrapper.style.paddingBottom = `${padding}%`;
if (this.supported.ui) {
@@ -299,8 +300,8 @@ const vimeo = {
// Set aspect ratio based on video size
Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(dimensions => {
- const ratio = getAspectRatio(dimensions[0], dimensions[1]);
- vimeo.setAspectRatio.call(this, ratio);
+ vimeo.ratio = getAspectRatio(dimensions[0], dimensions[1]);
+ vimeo.setAspectRatio.call(this, vimeo.ratio);
});
// Set autopause
@@ -404,6 +405,22 @@ const vimeo = {
triggerEvent.call(player, player.media, 'error');
});
+ // Set height/width on fullscreen
+ player.on('enterfullscreen exitfullscreen', event => {
+ const { target } = player.fullscreen;
+
+ // Ignore for iOS native
+ if (target !== player.elements.container) {
+ return;
+ }
+
+ const toggle = event.type === 'enterfullscreen';
+ const [x, y] = vimeo.ratio.split(':').map(Number);
+ const dimension = x > y ? 'width' : 'height';
+
+ target.style[dimension] = toggle ? `${vimeo.padding}%` : null;
+ });
+
// Rebuild UI
setTimeout(() => ui.build.call(player), 0);
},
diff --git a/src/js/plyr.js b/src/js/plyr.js
index 49fc7c5a..872eb927 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
-// plyr.js v3.4.6
+// plyr.js v3.4.7
// https://github.com/sampotts/plyr
// License: The MIT License (MIT)
// ==========================================================================
diff --git a/src/js/plyr.polyfilled.js b/src/js/plyr.polyfilled.js
index a518fda5..ac6d1c28 100644
--- a/src/js/plyr.polyfilled.js
+++ b/src/js/plyr.polyfilled.js
@@ -1,6 +1,6 @@
// ==========================================================================
// Plyr Polyfilled Build
-// plyr.js v3.4.6
+// plyr.js v3.4.7
// https://github.com/sampotts/plyr
// License: The MIT License (MIT)
// ==========================================================================
diff --git a/src/js/source.js b/src/js/source.js
index 8c9fdf44..337c949c 100644
--- a/src/js/source.js
+++ b/src/js/source.js
@@ -114,12 +114,9 @@ const source = {
// HTML5 stuff
if (this.isHTML5) {
// Setup captions
- if ('tracks' in input) {
+ if (Object.keys(input).includes('tracks')) {
source.insertElements.call(this, 'track', input.tracks);
}
-
- // Load HTML5 sources
- this.media.load();
}
// If HTML5 or embed but not fully supported, setupInterface and call ready now
@@ -128,6 +125,11 @@ const source = {
ui.build.call(this);
}
+ if (this.isHTML5) {
+ // Load HTML5 sources
+ this.media.load();
+ }
+
// Update the fullscreen support
this.fullscreen.update();
},
diff --git a/src/js/support.js b/src/js/support.js
index 59f27c3b..81965867 100644
--- a/src/js/support.js
+++ b/src/js/support.js
@@ -68,27 +68,27 @@ const support = {
// Check for mime type support against a player instance
// Credits: http://diveintohtml5.info/everything.html
// Related: http://www.leanbackplayer.com/test/h5mt.html
- mime(inputType) {
- const [mediaType] = inputType.split('/');
+ mime(input) {
+ if (is.empty(input)) {
+ return false;
+ }
+
+ const [mediaType] = input.split('/');
+ let type = input;
+
+ // Verify we're using HTML5 and there's no media type mismatch
if (!this.isHTML5 || mediaType !== this.type) {
return false;
}
- let type;
- if (inputType && inputType.includes('codecs=')) {
- // Use input directly
- type = inputType;
- } else if (inputType === 'audio/mpeg') {
- // Skip codec
- type = 'audio/mpeg;';
- } else if (inputType in defaultCodecs) {
- // Use codec
- type = `${inputType}; codecs="${defaultCodecs[inputType]}"`;
+ // Add codec if required
+ if (Object.keys(defaultCodecs).includes(type)) {
+ type += `; codecs="${defaultCodecs[input]}"`;
}
try {
return Boolean(type && this.media.canPlayType(type).replace(/no/, ''));
- } catch (err) {
+ } catch (e) {
return false;
}
},
diff --git a/src/js/utils/elements.js b/src/js/utils/elements.js
index a6722da2..6be634e5 100644
--- a/src/js/utils/elements.js
+++ b/src/js/utils/elements.js
@@ -293,7 +293,7 @@ export function setFocus(element = null, tabFocus = false) {
}
// Set regular focus
- element.focus();
+ element.focus({ preventScroll: true });
// If we want to mimic keyboard focus via tab
if (tabFocus) {
diff --git a/src/sass/components/progress.scss b/src/sass/components/progress.scss
index 16992808..f28a19ca 100644
--- a/src/sass/components/progress.scss
+++ b/src/sass/components/progress.scss
@@ -42,13 +42,13 @@
&::-webkit-progress-bar {
background: transparent;
- transition: width 0.2s ease;
}
&::-webkit-progress-value {
background: currentColor;
border-radius: 100px;
min-width: $plyr-range-track-height;
+ transition: width 0.2s ease;
}
// Mozilla
diff --git a/src/sass/settings/sliders.scss b/src/sass/settings/sliders.scss
index 3c75b797..86d8de54 100644
--- a/src/sass/settings/sliders.scss
+++ b/src/sass/settings/sliders.scss
@@ -12,7 +12,7 @@ $plyr-range-thumb-border: 2px solid transparent !default;
$plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gunmetal, 0.2) !default;
// Track
-$plyr-range-track-height: 6px !default;
+$plyr-range-track-height: 4px !default;
$plyr-range-max-height: ($plyr-range-thumb-active-shadow-width * 2) + $plyr-range-thumb-height !default;
// Fill
diff --git a/src/sass/settings/type.scss b/src/sass/settings/type.scss
index 351ebd18..79cb57de 100644
--- a/src/sass/settings/type.scss
+++ b/src/sass/settings/type.scss
@@ -17,4 +17,4 @@ $plyr-font-weight-bold: 600 !default;
$plyr-line-height: 1.7 !default;
-$plyr-font-smoothing: true !default;
+$plyr-font-smoothing: false !default;
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-08 18:22:00 +0000