ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Small tweaks

Browse Source
This commit is contained in:
Sam Potts
2017-07-23 21:13:11 +10:00
parent dfc516baf6
commit 7b60e473fa
11 changed files with 125 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
bower.json
View File

@ -6,7 +6,7 @@
"Audio",
"Video",
"HTML5 Audio",
"HTml5 Video"
"HTML5 Video"
],
"authors": [
"Sam Potts <sam@potts.es>"

2
demo/dist/demo.css vendored
View File

File diff suppressed because one or more lines are too long

2
demo/dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

9
demo/src/less/lib/fontface.less
View File

@ -4,15 +4,16 @@
@font-face {
font-family: "Avenir";
src: url("//cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"),
url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff");
src: url("https://cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"),
url("https://cdn.plyr.io/fonts/avenir-medium.woff") format("woff");
font-style: normal;
font-weight: @font-weight-base;
}
@font-face {
font-family: "Avenir";
src: url("//cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"),
url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff");
src: url("https://cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"),
url("https://cdn.plyr.io/fonts/avenir-bold.woff") format("woff");
font-style: normal;
font-weight: @font-weight-bold;
}

4
demo/src/less/variables.less
View File

@ -24,8 +24,8 @@
@font-size-base: 16;
@font-size-small: 14;
@font-size-h1: 64;
@font-weight-base: 400;
@font-weight-bold: 500;
@font-weight-base: 500;
@font-weight-bold: 600;
// Elements
@link-color: @brand-primary;

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

4
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

13
notes.md
View File

@ -8,12 +8,12 @@
[ ] Handle quality change for YouTube
[ ] Handle speed change for YouTube
[ ] Set quality when loading YouTube vid
[ ] Set "home" values
[ ] Hide unsupported menu items (+ on source change)
[ ] Set default values
[ ] Hide unsupported menu items on source change
[ ] Test PiP (need MacOS Sierra)
[ ] Test AirPlay (need MacOS Sierra)
[ ] Add `controlshidden` and `controlsshown` events
[ ] Test custom controls (without settings support for now)
[ ] Test custom controls still works (without settings support for now)
[ ] Tidy up small UI for iOS inline
[ ] Finish new loop setup and display in seek bar
[ ] Update docs for removal of setup
@ -21,7 +21,7 @@
#### Later
[ ] Wistia player
[ ] Inlined sprite option
[ ] Start / end options for all players?
[ ] Start / end time options for all players?
[ ] Get quality options for HTML5 somehow (multi source?)
[ ] Download button - grab first <source> or src attribute (or maybe use currentSrc?) for HTML5 and links for embedded players
[ ] Scale captions size based on video size (in lieu of element queries)
@ -69,12 +69,15 @@
- decreaseVolume (new)
- togglePictureInPicture (new)
- airPlay (new)
- Added `.off` API method
#### Other breaking changes
- New config options for loop
- Selectors changes (new `input` and `display` object) - DOCUMENT
- Custom HTML option now `controls` which accepts a string (HTML), a function (your own template engine) or array (use built in controls)
- .setup() is removed in favour of a constructor
- `.setup()` is removed in favour of a constructor
- `.loadSprite` removed
- `.support` removed
#### Added
- Seek i8n label

133
src/js/plyr.js
View File

@ -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);

25
src/less/plyr.less
View File

@ -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;
}

10
src/less/variables.less
View File

@ -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