aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/js/controls.js107
-rw-r--r--src/js/defaults.js10
-rw-r--r--src/js/listeners.js34
-rw-r--r--src/js/plyr.js9
-rw-r--r--src/js/ui.js6
-rw-r--r--src/less/components/buttons.less35
-rw-r--r--src/less/components/controls.less11
-rw-r--r--src/less/settings.less5
8 files changed, 99 insertions, 118 deletions
diff --git a/src/js/controls.js b/src/js/controls.js
index e0b7150c..24c8f72d 100644
--- a/src/js/controls.js
+++ b/src/js/controls.js
@@ -92,8 +92,9 @@ const controls = {
},
// Create hidden text label
- createLabel(type) {
+ createLabel(type, attr) {
let text = this.config.i18n[type];
+ const attributes = Object.assign({}, attr);
switch (type) {
case 'pip':
@@ -108,13 +109,13 @@ const controls = {
break;
}
- return utils.createElement(
- 'span',
- {
- class: this.config.classNames.hidden,
- },
- text
- );
+ if ('class' in attributes) {
+ attributes.class += ` ${this.config.classNames.hidden}`;
+ } else {
+ attributes.class = this.config.classNames.hidden;
+ }
+
+ return utils.createElement('span', attributes, text);
},
// Create a badge
@@ -145,16 +146,19 @@ const controls = {
const button = utils.createElement('button');
const attributes = Object.assign({}, attr);
let type = buttonType;
- let iconDefault;
- let iconToggled;
- let labelKey;
+
+ let toggle = false;
+ let label;
+ let icon;
+ let labelPressed;
+ let iconPressed;
if (!('type' in attributes)) {
attributes.type = 'button';
}
if ('class' in attributes) {
- if (attributes.class.indexOf(this.config.classNames.control) === -1) {
+ if (attributes.class.includes(this.config.classNames.control)) {
attributes.class += ` ${this.config.classNames.control}`;
}
} else {
@@ -163,56 +167,70 @@ const controls = {
// Large play button
switch (type) {
+ case 'play':
+ toggle = true;
+ label = 'play';
+ labelPressed = 'pause';
+ icon = 'play';
+ iconPressed = 'pause';
+ break;
+
case 'mute':
- labelKey = 'toggleMute';
- iconDefault = 'volume';
- iconToggled = 'muted';
+ toggle = true;
+ label = 'mute';
+ labelPressed = 'unmute';
+ icon = 'volume';
+ iconPressed = 'muted';
break;
case 'captions':
- labelKey = 'toggleCaptions';
- iconDefault = 'captions-off';
- iconToggled = 'captions-on';
+ toggle = true;
+ label = 'enableCaptions';
+ labelPressed = 'disableCaptions';
+ icon = 'captions-off';
+ iconPressed = 'captions-on';
break;
case 'fullscreen':
- labelKey = 'toggleFullscreen';
- iconDefault = 'enter-fullscreen';
- iconToggled = 'exit-fullscreen';
+ toggle = true;
+ label = 'enterFullscreen';
+ labelPressed = 'exitFullscreen';
+ icon = 'enter-fullscreen';
+ iconPressed = 'exit-fullscreen';
break;
case 'play-large':
- attributes.class = 'plyr__play-large';
+ attributes.class += ` ${this.config.classNames.control}--overlaid`;
type = 'play';
- labelKey = 'play';
- iconDefault = 'play';
+ label = 'play';
+ icon = 'play';
break;
default:
- labelKey = type;
- iconDefault = type;
+ label = type;
+ icon = type;
}
- // Merge attributes
- utils.extend(attributes, utils.getAttributesFromSelector(this.config.selectors.buttons[type], attributes));
+ // Setup toggle icon and labels
+ if (toggle) {
+ // Icon
+ button.appendChild(controls.createIcon.call(this, iconPressed, { class: 'icon--pressed' }));
+ button.appendChild(controls.createIcon.call(this, icon, { class: 'icon--not-pressed' }));
- // Add toggle icon if needed
- if (utils.is.string(iconToggled)) {
- button.appendChild(
- controls.createIcon.call(this, iconToggled, {
- class: 'icon--pressed',
- })
- );
- button.appendChild(
- controls.createIcon.call(this, iconDefault, {
- class: 'icon--not-pressed',
- })
- );
+ // Label/Tooltip
+ button.appendChild(controls.createLabel.call(this, labelPressed, { class: 'label--pressed' }));
+ button.appendChild(controls.createLabel.call(this, label, { class: 'label--not-pressed' }));
+
+ // Add aria attributes
+ attributes['aria-pressed'] = false;
+ attributes['aria-label'] = this.config.i18n[label];
} else {
- button.appendChild(controls.createIcon.call(this, iconDefault));
+ button.appendChild(controls.createIcon.call(this, icon));
+ button.appendChild(controls.createLabel.call(this, label));
}
- button.appendChild(controls.createLabel.call(this, labelKey));
+ // Merge attributes
+ utils.extend(attributes, utils.getAttributesFromSelector(this.config.selectors.buttons[type], attributes));
utils.setAttributes(button, attributes);
@@ -909,10 +927,10 @@ const controls = {
container.appendChild(controls.createButton.call(this, 'rewind'));
}
- // Play Pause button
+ // Play/Pause button
if (this.config.controls.includes('play')) {
container.appendChild(controls.createButton.call(this, 'play'));
- container.appendChild(controls.createButton.call(this, 'pause'));
+ // container.appendChild(controls.createButton.call(this, 'pause'));
}
// Fast forward button
@@ -1233,6 +1251,7 @@ const controls = {
Array.from(labels).forEach(label => {
utils.toggleClass(label, this.config.classNames.hidden, false);
utils.toggleClass(label, this.config.classNames.tooltip, true);
+ label.setAttribute('role', 'tooltip');
});
}
},
diff --git a/src/js/defaults.js b/src/js/defaults.js
index c9a81842..a1b9c166 100644
--- a/src/js/defaults.js
+++ b/src/js/defaults.js
@@ -133,9 +133,13 @@ const defaults = {
currentTime: 'Current time',
duration: 'Duration',
volume: 'Volume',
- toggleMute: 'Toggle Mute',
- toggleCaptions: 'Toggle Captions',
- toggleFullscreen: 'Toggle Fullscreen',
+ mute: 'Mute',
+ unmute: 'Unmute',
+ enableCaptions: 'Enable captions',
+ disableCaptions: 'Disable captions',
+ fullscreen: 'Fullscreen',
+ enterFullscreen: 'Enter fullscreen',
+ exitFullscreen: 'Exit fullscreen',
frameTitle: 'Player for {title}',
captions: 'Captions',
settings: 'Settings',
diff --git a/src/js/listeners.js b/src/js/listeners.js
index d9cd5bce..ff4b31d5 100644
--- a/src/js/listeners.js
+++ b/src/js/listeners.js
@@ -217,11 +217,11 @@ const listeners = {
}
// Handle user exiting fullscreen by escaping etc
- /* if (fullscreen.enabled) {
+ if (fullscreen.enabled) {
utils.on(document, fullscreen.eventType, event => {
this.toggleFullscreen(event);
});
- } */
+ }
},
// Listen for media events
@@ -372,24 +372,12 @@ const listeners = {
}
};
- // Click play/pause helper
- const togglePlay = () => {
- const play = this.togglePlay();
-
- // Determine which buttons
- const target = this.elements.buttons[play ? 'pause' : 'play'];
-
- // Transfer focus
- if (utils.is.htmlElement(target)) {
- target.focus();
- }
- };
-
- // Play
- utils.on(this.elements.buttons.play, 'click', event => proxy(event, 'play', togglePlay));
-
- // Pause
- utils.on(this.elements.buttons.pause, 'click', event => proxy(event, 'pause', togglePlay));
+ // Play/pause toggle
+ utils.on(this.elements.buttons.play, 'click', event =>
+ proxy(event, 'play', () => {
+ this.togglePlay();
+ })
+ );
// Pause
utils.on(this.elements.buttons.restart, 'click', event =>
@@ -412,21 +400,21 @@ const listeners = {
})
);
- // Mute
+ // Mute toggle
utils.on(this.elements.buttons.mute, 'click', event =>
proxy(event, 'mute', () => {
this.muted = !this.muted;
})
);
- // Captions
+ // Captions toggle
utils.on(this.elements.buttons.captions, 'click', event =>
proxy(event, 'captions', () => {
this.toggleCaptions();
})
);
- // Fullscreen
+ // Fullscreen toggle
utils.on(this.elements.buttons.fullscreen, 'click', event =>
proxy(event, 'fullscreen', () => {
this.toggleFullscreen();
diff --git a/src/js/plyr.js b/src/js/plyr.js
index 4f985a31..83c1b7b8 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -710,22 +710,17 @@ class Plyr {
toggleFullscreen(event) {
// Check for native support
if (fullscreen.enabled) {
- // If it's a fullscreen change event, update the UI
if (utils.is.event(event) && event.type === fullscreen.eventType) {
+ // If it's a fullscreen change event, update the state
this.fullscreen.active = fullscreen.isFullScreen(this.elements.container);
} else {
// Else it's a user request to enter or exit
if (!this.fullscreen.active) {
- // Request full screen
fullscreen.requestFullScreen(this.elements.container);
} else {
- // Bail from fullscreen
fullscreen.cancelFullScreen();
}
- // Check if we're actually full screen (it could fail)
- this.fullscreen.active = fullscreen.isFullScreen(this.elements.container);
-
return this;
}
} else {
@@ -754,7 +749,7 @@ class Plyr {
}
// Set button state
- if (this.elements.buttons && this.elements.buttons.fullscreen) {
+ if (utils.is.htmlElement(this.elements.buttons.fullscreen)) {
utils.toggleState(this.elements.buttons.fullscreen, this.fullscreen.active);
}
diff --git a/src/js/ui.js b/src/js/ui.js
index bc7443b5..6246a71f 100644
--- a/src/js/ui.js
+++ b/src/js/ui.js
@@ -139,10 +139,14 @@ const ui = {
// Check playing state
checkPlaying() {
window.setTimeout(() => {
+ // Class hooks
utils.toggleClass(this.elements.container, this.config.classNames.playing, this.playing);
-
utils.toggleClass(this.elements.container, this.config.classNames.stopped, this.paused);
+ // Set aria state
+ Array.from(this.elements.buttons.play).forEach(button => utils.toggleState(button, this.playing));
+
+ // Toggle controls
this.toggleControls(!this.playing);
}, 100);
},
diff --git a/src/less/components/buttons.less b/src/less/components/buttons.less
index 238f13c9..d0fd0ae5 100644
--- a/src/less/components/buttons.less
+++ b/src/less/components/buttons.less
@@ -20,11 +20,6 @@
pointer-events: none;
}
- // Hide toggle icons by default
- .icon--pressed {
- display: none;
- }
-
// Default focus
&:focus {
outline: 0;
@@ -37,10 +32,10 @@
}
// Change icons on state change
-.plyr__control[aria-pressed='true'] .icon--pressed {
- display: block;
-}
-.plyr__control[aria-pressed='true'] .icon--not-pressed {
+.plyr__control[aria-pressed='false'] .icon--pressed,
+ .plyr__control[aria-pressed='true'] .icon--not-pressed,
+ .plyr__control[aria-pressed='false'] .label--pressed,
+ .plyr__control[aria-pressed='true'] .label--not-pressed {
display: none;
}
@@ -55,7 +50,7 @@
}
// Large play button (video only)
-.plyr__play-large {
+.plyr__control--overlaid {
display: none;
position: absolute;
z-index: 3;
@@ -68,37 +63,25 @@
border-radius: 100%;
box-shadow: 0 1px 1px fade(#000, 15%);
color: @plyr-video-control-color;
- transition: all 0.3s ease;
svg {
position: relative;
left: 2px;
- width: 20px;
- height: 20px;
- display: block;
- fill: currentColor;
- pointer-events: none;
+ width: @plyr-control-icon-size-large;
+ height: @plyr-control-icon-size-large;
}
&:hover,
&:focus {
background: @plyr-video-control-bg-hover;
}
-
- &:focus {
- outline: 0;
- }
-
- &.plyr__tab-focus {
- .plyr-tab-focus();
- }
}
-.plyr--full-ui.plyr--video .plyr__play-large {
+.plyr--full-ui.plyr--video .plyr__control--overlaid {
display: inline-block;
}
-.plyr--playing .plyr__play-large {
+.plyr--playing .plyr__control--overlaid {
opacity: 0;
visibility: hidden;
}
diff --git a/src/less/components/controls.less b/src/less/components/controls.less
index fd89c74e..20a2adf7 100644
--- a/src/less/components/controls.less
+++ b/src/less/components/controls.less
@@ -91,17 +91,6 @@
color: @plyr-audio-control-color;
}
-// States
-.plyr__controls [data-plyr='pause'] {
- display: none;
-}
-.plyr--playing .plyr__controls [data-plyr='play'] {
- display: none;
-}
-.plyr--playing .plyr__controls [data-plyr='pause'] {
- display: inline-block;
-}
-
// Some options are hidden by default
.plyr [data-plyr='captions'],
.plyr [data-plyr='pip'],
diff --git a/src/less/settings.less b/src/less/settings.less
index cdbbbb59..9ddbaa74 100644
--- a/src/less/settings.less
+++ b/src/less/settings.less
@@ -17,12 +17,9 @@
@plyr-font-size-small: 14px;
@plyr-font-size-time: 14px;
@plyr-font-size-badge: 10px;
-
@plyr-font-weight-regular: 500;
@plyr-font-weight-bold: 600;
-
@plyr-line-height: 1.7;
-
@plyr-font-smoothing: on;
// Focus
@@ -38,6 +35,7 @@
// Controls
@plyr-control-icon-size: 18px;
+@plyr-control-icon-size-large: 20px;
@plyr-control-spacing: 10px;
@plyr-control-padding: (@plyr-control-spacing * 0.7);
@plyr-video-controls-bg: #000;
@@ -49,6 +47,7 @@
@plyr-audio-control-color: #565d64;
@plyr-audio-control-color-hover: #fff;
@plyr-audio-control-bg-hover: @plyr-color-main;
+
// Tooltips
@plyr-tooltip-bg: fade(#fff, 90%);
@plyr-tooltip-color: #565d64;
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-08 19:50:06 +0000