aboutsummaryrefslogtreecommitdiffstats
path: root/src/js
diff options
context:
space:
mode:
Diffstat (limited to 'src/js')
-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
5 files changed, 88 insertions, 78 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);
},
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-08 16:39:37 +0000