Small tweaks
This commit is contained in:
Sam Potts
135
src/js/plyr.js
135
src/js/plyr.js
@ -44,41 +44,6 @@
|
||||
showPosterOnEnd: false,
|
||||
disableContextMenu: true,
|
||||
|
||||
// Quality settings
|
||||
quality: {
|
||||
default: 'auto',
|
||||
selected: 'auto'
|
||||
},
|
||||
|
||||
// Set loops
|
||||
loop: {
|
||||
active: false,
|
||||
start: 0,
|
||||
end: null,
|
||||
indicator: {
|
||||
start: 0,
|
||||
end: 0
|
||||
}
|
||||
},
|
||||
|
||||
// Speed up/down
|
||||
speed: {
|
||||
selected: 1,
|
||||
options: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2]
|
||||
},
|
||||
|
||||
// Keyboard shortcut settings
|
||||
keyboardShortcuts: {
|
||||
focused: true,
|
||||
global: false
|
||||
},
|
||||
|
||||
// Display tooltips
|
||||
tooltips: {
|
||||
controls: false,
|
||||
seek: true
|
||||
},
|
||||
|
||||
// Selectors
|
||||
// Change these to match your template if using custom HTML
|
||||
selectors: {
|
||||
@ -164,6 +129,41 @@
|
||||
tabFocus: 'tab-focus'
|
||||
},
|
||||
|
||||
// Quality settings
|
||||
quality: {
|
||||
default: 'auto',
|
||||
selected: 'auto'
|
||||
},
|
||||
|
||||
// Set loops
|
||||
loop: {
|
||||
active: false,
|
||||
start: 0,
|
||||
end: null,
|
||||
indicator: {
|
||||
start: 0,
|
||||
end: 0
|
||||
}
|
||||
},
|
||||
|
||||
// Speed up/down
|
||||
speed: {
|
||||
selected: 1,
|
||||
options: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2]
|
||||
},
|
||||
|
||||
// Keyboard shortcut settings
|
||||
keyboardShortcuts: {
|
||||
focused: true,
|
||||
global: false
|
||||
},
|
||||
|
||||
// Display tooltips
|
||||
tooltips: {
|
||||
controls: false,
|
||||
seek: true
|
||||
},
|
||||
|
||||
// Captions settings
|
||||
captions: {
|
||||
active: false,
|
||||
@ -1290,6 +1290,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Add elements to HTML5 media (source, tracks, etc)
|
||||
function insertElements(type, attributes) {
|
||||
if (utils.is.string(attributes)) {
|
||||
utils.insertElement(type, player.media, {
|
||||
src: attributes
|
||||
});
|
||||
} else if (utils.is.array(attributes)) {
|
||||
attributes.forEach(function(attribute) {
|
||||
utils.insertElement(type, player.media, attribute);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Trap focus inside container
|
||||
function focusTrap() {
|
||||
var tabbables = getElements('input:not([disabled]), button:not([disabled])');
|
||||
@ -1315,19 +1328,6 @@
|
||||
utils.on(player.elements.container, 'keydown', checkFocus, false);
|
||||
}
|
||||
|
||||
// Add elements to HTML5 media (source, tracks, etc)
|
||||
function insertElements(type, attributes) {
|
||||
if (utils.is.string(attributes)) {
|
||||
utils.insertElement(type, player.media, {
|
||||
src: attributes
|
||||
});
|
||||
} else if (utils.is.array(attributes)) {
|
||||
attributes.forEach(function(attribute) {
|
||||
utils.insertElement(type, player.media, attribute);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Get icon URL
|
||||
function getIconUrl() {
|
||||
return {
|
||||
@ -1536,7 +1536,13 @@
|
||||
}
|
||||
|
||||
// Build the default HTML
|
||||
// TODO: Set order based on order in the config.controls array?
|
||||
function createControls(data) {
|
||||
// Do nothing if we want no controls
|
||||
if (utils.is.empty(player.config.controls)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Create the container
|
||||
var controls = utils.createElement('div', utils.getAttributesFromSelector(player.config.selectors.controls.wrapper));
|
||||
|
||||
@ -1643,7 +1649,7 @@
|
||||
}
|
||||
|
||||
// Settings button / menu
|
||||
if (utils.inArray(player.config.controls, 'settings')) {
|
||||
if (utils.inArray(player.config.controls, 'settings') && !utils.is.empty(player.config.settings)) {
|
||||
var menu = utils.createElement('div', {
|
||||
class: 'plyr__menu'
|
||||
});
|
||||
@ -2269,7 +2275,7 @@
|
||||
}
|
||||
|
||||
// Find the UI controls and store references in custom controls
|
||||
// TODO: Allow settings menus with custom controls (coming soon!)
|
||||
// TODO: Allow settings menus with custom controls
|
||||
function findElements() {
|
||||
try {
|
||||
player.elements.controls = getElement(player.config.selectors.controls.wrapper);
|
||||
@ -2329,7 +2335,7 @@
|
||||
utils.toggleClass(player.elements.container, player.config.selectors.container.replace('.', ''), player.supported.full);
|
||||
}
|
||||
|
||||
// Toggle native controls
|
||||
// Toggle native HTML5 media controls
|
||||
function toggleNativeControls(toggle) {
|
||||
if (toggle && utils.inArray(types.html5, player.type)) {
|
||||
player.media.setAttribute('controls', '');
|
||||
@ -2709,10 +2715,14 @@
|
||||
// YouTube needs a call to `stopVideo` before playing again
|
||||
instance.stopVideo();
|
||||
instance.playVideo();
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
player.media.paused = true;
|
||||
|
||||
trigger(player.media, 'ended');
|
||||
|
||||
break;
|
||||
|
||||
case 1:
|
||||
@ -2724,6 +2734,7 @@
|
||||
}
|
||||
|
||||
player.media.seeking = false;
|
||||
|
||||
trigger(player.media, 'play');
|
||||
trigger(player.media, 'playing');
|
||||
|
||||
@ -2753,7 +2764,9 @@
|
||||
|
||||
case 2:
|
||||
player.media.paused = true;
|
||||
|
||||
trigger(player.media, 'pause');
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
@ -3208,9 +3221,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
if (utils.is.number(player.config.loop.start) && utils.is.number(player.config.loop.end) && player.media.currentTime >= player.config.loop.end) {
|
||||
// TODO: Loop - this shouldn't be here
|
||||
/*if (utils.is.number(player.config.loop.start) && utils.is.number(player.config.loop.end) && player.media.currentTime >= player.config.loop.end) {
|
||||
console.warn('Looping');
|
||||
player.seek(player.config.loop.start);
|
||||
}
|
||||
}*/
|
||||
|
||||
setProgress(progress, value);
|
||||
}
|
||||
@ -4988,7 +5003,7 @@
|
||||
return player;
|
||||
};
|
||||
|
||||
// Event listener
|
||||
// Event listeners
|
||||
Plyr.prototype.on = function(event, callback) {
|
||||
var player = this;
|
||||
|
||||
@ -4999,6 +5014,16 @@
|
||||
return player;
|
||||
};
|
||||
|
||||
Plyr.prototype.off = function(event, callback) {
|
||||
var player = this;
|
||||
|
||||
// Listen for events on container
|
||||
utils.off(player.elements.container, event, callback);
|
||||
|
||||
// Allow chaining
|
||||
return player;
|
||||
};
|
||||
|
||||
// Check for support
|
||||
Plyr.prototype.supports = function(mimeType) {
|
||||
return support.mime(this, mimeType);
|
||||
@ -5102,4 +5127,4 @@
|
||||
};
|
||||
|
||||
return Plyr;
|
||||
});
|
||||
});
|
||||
@ -78,14 +78,13 @@
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: transparent;
|
||||
|
||||
// WebKit
|
||||
-webkit-appearance: none;
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
.plyr-range-track();
|
||||
}
|
||||
@ -413,9 +412,9 @@
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: @plyr-control-spacing;
|
||||
background: @plyr-video-control-bg-hover;
|
||||
border: 4px solid currentColor;
|
||||
padding: ceil(@plyr-control-spacing * 1.25);
|
||||
background: fade(@plyr-video-control-bg-hover, 80%);
|
||||
border: 3px solid currentColor;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 1px 1px fade(#000, 15%);
|
||||
color: @plyr-video-control-color;
|
||||
@ -431,6 +430,11 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: @plyr-video-control-bg-hover;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 1px dotted fade(@plyr-video-control-color, 50%);
|
||||
}
|
||||
@ -759,10 +763,13 @@
|
||||
margin: -(@plyr-range-track-height / 2) 0 0;
|
||||
padding: 0;
|
||||
vertical-align: top;
|
||||
appearance: none;
|
||||
|
||||
border: none;
|
||||
border-radius: 100px;
|
||||
|
||||
// WebKit
|
||||
-webkit-appearance: none;
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background: transparent;
|
||||
}
|
||||
@ -771,11 +778,15 @@
|
||||
border-radius: 100px;
|
||||
min-width: @plyr-range-track-height;
|
||||
}
|
||||
|
||||
// Mozilla
|
||||
&::-moz-progress-bar {
|
||||
background: currentColor;
|
||||
border-radius: 100px;
|
||||
min-width: @plyr-range-track-height;
|
||||
}
|
||||
|
||||
// Microsoft
|
||||
&::-ms-fill {
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
@ -15,11 +15,11 @@
|
||||
@plyr-font-family: inherit; //Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
|
||||
@plyr-font-size-small: 14px;
|
||||
@plyr-font-size-base: 16px;
|
||||
@plyr-font-weight-normal: 400;
|
||||
@plyr-font-weight-normal: 500;
|
||||
@plyr-font-weight-bold: 600;
|
||||
|
||||
// Captions
|
||||
@plyr-captions-bg: fade(#000, 60%);
|
||||
@plyr-captions-bg: fade(#343f4a, 80%);
|
||||
@plyr-captions-color: #fff;
|
||||
@plyr-font-size-captions-base: @plyr-font-size-base;
|
||||
@plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.5);
|
||||
@ -29,13 +29,13 @@
|
||||
@plyr-control-icon-size: 18px;
|
||||
@plyr-control-spacing: 10px;
|
||||
@plyr-control-padding: (@plyr-control-spacing * .7);
|
||||
@plyr-video-controls-bg: #000;
|
||||
@plyr-video-controls-bg: #343f4a;
|
||||
@plyr-video-control-color: #fff;
|
||||
@plyr-video-control-color-hover: #fff;
|
||||
@plyr-video-control-bg-hover: @plyr-color-main;
|
||||
@plyr-audio-controls-bg: #fff;
|
||||
@plyr-audio-controls-border: 1px solid #dbe3e8;
|
||||
@plyr-audio-control-color: #565D64;
|
||||
@plyr-audio-control-color: #565d64;
|
||||
@plyr-audio-control-color-hover: #fff;
|
||||
@plyr-audio-control-bg-hover: @plyr-color-main;
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
@plyr-progress-loading-bg: fade(#343f4a, 20%);
|
||||
@plyr-video-progress-bg: fade(#fff, 25%);
|
||||
@plyr-video-progress-buffered-bg: @plyr-video-progress-bg;
|
||||
@plyr-audio-progress-bg: fade(#C6D6DB, 66%);
|
||||
@plyr-audio-progress-bg: fade(#c6d6db, 66%);
|
||||
@plyr-audio-progress-buffered-bg: @plyr-audio-progress-bg;
|
||||
|
||||
// Range sliders
|
||||
|
||||
Reference in New Issue
Block a user