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

Prep for v1.5

Browse Source
This commit is contained in:
Sam 2016-01-10 15:08:58 +11:00
parent 30529ee4e4
commit 592bcc8d7e
6 changed files with 138 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
changelog.md
View File

@ -1,21 +1,26 @@
# Changelog # Changelog
# v1.3.5 # v1.5.0
- *Beta* Vimeo support (please report bugs)
- New options for initialization (see docs)
-
## v1.3.5
- Fixed bug with API use on basic supported browsers - Fixed bug with API use on basic supported browsers
# v1.3.4 ## v1.3.4
- Code cleanup by @calvintam236 - Code cleanup by @calvintam236
# v1.3.3 ## v1.3.3
- Removed captions being read by screen readers - Removed captions being read by screen readers
# v1.3.2 ## v1.3.2
- Voiceover fix for captions - Voiceover fix for captions
# v1.3.1 ## v1.3.1
- ARIA improvements for captions being read - ARIA improvements for captions being read
# v1.3.0 ## v1.3.0
- Internationalization support (i18n) using default controls (required markup changes to controls) - Internationalization support (i18n) using default controls (required markup changes to controls)
- ARIA enhancements for controls (required markup changes to controls) - ARIA enhancements for controls (required markup changes to controls)
- Captions legibility improvements - Captions legibility improvements
@ -55,10 +60,10 @@
- Bug fix for Chrome Canary - Bug fix for Chrome Canary
## v1.1.11 ## v1.1.11
- Bug fix - Bug fix
## v1.1.10 ## v1.1.10
- Bug fix - Bug fix
## v1.1.9 ## v1.1.9
- Bug fix for 1.1.8 - Bug fix for 1.1.8

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "plyr", "name": "plyr",
"version": "1.4.0", "version": "1.5.0",
"description": "A simple HTML5 media player using custom controls", "description": "A simple HTML5 media player using custom controls",
"homepage": "http://plyr.io", "homepage": "http://plyr.io",
"main": "gulpfile.js", "main": "gulpfile.js",

144
src/js/plyr.js
View File

@ -1,13 +1,26 @@
// ========================================================================== // ==========================================================================
// Plyr // Plyr
// plyr.js v1.4.0 // plyr.js v1.5.0
// https://github.com/selz/plyr // https://github.com/selz/plyr
// License: The MIT License (MIT) // License: The MIT License (MIT)
// ========================================================================== // ==========================================================================
// Credits: http://paypal.github.io/accessible-html5-video-player/ // Credits: http://paypal.github.io/accessible-html5-video-player/
// ========================================================================== // ==========================================================================
(function (api) { (function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(null, factory);
} else if (typeof exports === 'object') {
// Node, CommonJS-like
module.exports = factory();
} else {
// Browser globals (root is window)
root.plyr = factory();
}
}(this, function () {
var api = {};
'use strict'; 'use strict';
/*global YT,$f*/ /*global YT,$f*/
@ -103,7 +116,7 @@
}, },
types: { types: {
embed: ['youtube','vimeo'], embed: ['youtube','vimeo'],
html5: ['video', 'audio'] html5: ['video', 'audio']
}, },
urls: { urls: {
vimeo: { vimeo: {
@ -298,7 +311,7 @@
name = 'Firefox'; name = 'Firefox';
fullVersion = nAgt.substring(verOffset + 8); fullVersion = nAgt.substring(verOffset + 8);
} }
// In most other browsers, 'name/version' is at the end of userAgent // In most other browsers, 'name/version' is at the end of userAgent
else if ((nameOffset=nAgt.lastIndexOf(' ') + 1) < (verOffset=nAgt.lastIndexOf('/'))) { else if ((nameOffset=nAgt.lastIndexOf(' ') + 1) < (verOffset=nAgt.lastIndexOf('/'))) {
name = nAgt.substring(nameOffset,verOffset); name = nAgt.substring(nameOffset,verOffset);
fullVersion = nAgt.substring(verOffset + 1); fullVersion = nAgt.substring(verOffset + 1);
@ -330,7 +343,7 @@
} }
// Check for mime type support against a player instance // Check for mime type support against a player instance
// Credits: http://diveintohtml5.info/everything.html // Credits: http://diveintohtml5.info/everything.html
// Related: http://www.leanbackplyr.com/test/h5mt.html // Related: http://www.leanbackplyr.com/test/h5mt.html
function _supportMime(plyr, mimeType) { function _supportMime(plyr, mimeType) {
var media = plyr.media; var media = plyr.media;
@ -353,7 +366,7 @@
case 'audio/ogg': return !!(media.canPlayType && media.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, '')); case 'audio/ogg': return !!(media.canPlayType && media.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, ''));
case 'audio/wav': return !!(media.canPlayType && media.canPlayType('audio/wav; codecs="1"').replace(/no/, '')); case 'audio/wav': return !!(media.canPlayType && media.canPlayType('audio/wav; codecs="1"').replace(/no/, ''));
} }
} }
// If we got this far, we're stuffed // If we got this far, we're stuffed
return false; return false;
@ -375,7 +388,7 @@
function _inArray(haystack, needle) { function _inArray(haystack, needle) {
return Array.prototype.indexOf && (haystack.indexOf(needle) != -1); return Array.prototype.indexOf && (haystack.indexOf(needle) != -1);
} }
// Replace all // Replace all
function _replaceAll(string, find, replace) { function _replaceAll(string, find, replace) {
return string.replace(new RegExp(find.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g, '\\$1'), 'g'), replace); return string.replace(new RegExp(find.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g, '\\$1'), 'g'), replace);
@ -386,28 +399,28 @@
// Convert `elements` to an array, if necessary. // Convert `elements` to an array, if necessary.
if (!elements.length) { if (!elements.length) {
elements = [elements]; elements = [elements];
} }
// Loops backwards to prevent having to clone the wrapper on the // Loops backwards to prevent having to clone the wrapper on the
// first element (see `child` below). // first element (see `child` below).
for (var i = elements.length - 1; i >= 0; i--) { for (var i = elements.length - 1; i >= 0; i--) {
var child = (i > 0) ? wrapper.cloneNode(true) : wrapper; var child = (i > 0) ? wrapper.cloneNode(true) : wrapper;
var element = elements[i]; var element = elements[i];
// Cache the current parent and sibling. // Cache the current parent and sibling.
var parent = element.parentNode; var parent = element.parentNode;
var sibling = element.nextSibling; var sibling = element.nextSibling;
// Wrap the element (is automatically removed from its current // Wrap the element (is automatically removed from its current
// parent). // parent).
child.appendChild(element); child.appendChild(element);
// If the element had a sibling, insert the wrapper before // If the element had a sibling, insert the wrapper before
// the sibling to maintain the HTML structure; otherwise, just // the sibling to maintain the HTML structure; otherwise, just
// append it to the parent. // append it to the parent.
if (sibling) { if (sibling) {
parent.insertBefore(child, sibling); parent.insertBefore(child, sibling);
} }
else { else {
parent.appendChild(child); parent.appendChild(child);
} }
@ -526,10 +539,10 @@
function _toggleState(target, state) { function _toggleState(target, state) {
// Get state // Get state
state = (typeof state === 'boolean' ? state : !target.getAttribute('aria-pressed')); state = (typeof state === 'boolean' ? state : !target.getAttribute('aria-pressed'));
// Set the attribute on target // Set the attribute on target
target.setAttribute('aria-pressed', state); target.setAttribute('aria-pressed', state);
return state; return state;
} }
@ -549,7 +562,7 @@
if (source[property] && source[property].constructor && source[property].constructor === Object) { if (source[property] && source[property].constructor && source[property].constructor === Object) {
destination[property] = destination[property] || {}; destination[property] = destination[property] || {};
_extend(destination[property], source[property]); _extend(destination[property], source[property]);
} }
else { else {
destination[property] = source[property]; destination[property] = source[property];
} }
@ -634,7 +647,7 @@
supported: (function() { supported: (function() {
try { try {
return 'localStorage' in window && window.localStorage !== null; return 'localStorage' in window && window.localStorage !== null;
} }
catch(e) { catch(e) {
return false; return false;
} }
@ -678,7 +691,7 @@
} }
// Check if the next caption is in the current time range // Check if the next caption is in the current time range
if (plyr.media.currentTime.toFixed(1) >= _timecodeMin(plyr.captions[plyr.subcount][0]) && if (plyr.media.currentTime.toFixed(1) >= _timecodeMin(plyr.captions[plyr.subcount][0]) &&
plyr.media.currentTime.toFixed(1) <= _timecodeMax(plyr.captions[plyr.subcount][0])) { plyr.media.currentTime.toFixed(1) <= _timecodeMax(plyr.captions[plyr.subcount][0])) {
plyr.currentCaption = plyr.captions[plyr.subcount][1]; plyr.currentCaption = plyr.captions[plyr.subcount][1];
@ -755,7 +768,7 @@
function _inFrame() { function _inFrame() {
try { try {
return window.self !== window.top; return window.self !== window.top;
} }
catch (e) { catch (e) {
return true; return true;
} }
@ -879,13 +892,13 @@
if (plyr.supported.full) { if (plyr.supported.full) {
// Remove native video controls // Remove native video controls
plyr.media.removeAttribute('controls'); plyr.media.removeAttribute('controls');
// Add type class // Add type class
_toggleClass(plyr.container, config.classes.type.replace('{0}', plyr.type), true); _toggleClass(plyr.container, config.classes.type.replace('{0}', plyr.type), true);
// If there's no autoplay attribute, assume the video is stopped and add state class // If there's no autoplay attribute, assume the video is stopped and add state class
_toggleClass(plyr.container, config.classes.stopped, config.autoplay); _toggleClass(plyr.container, config.classes.stopped, config.autoplay);
// Add iOS class // Add iOS class
if (plyr.browser.ios) { if (plyr.browser.ios) {
_toggleClass(plyr.container, 'ios', true); _toggleClass(plyr.container, 'ios', true);
@ -974,7 +987,7 @@
}); });
container.appendChild(iframe); container.appendChild(iframe);
plyr.media.appendChild(container); plyr.media.appendChild(container);
// Setup API // Setup API
if (typeof Froogaloop === 'function') { if (typeof Froogaloop === 'function') {
_on(iframe, 'load', _vimeoReady); _on(iframe, 'load', _vimeoReady);
@ -1058,7 +1071,7 @@
plyr.timer.buffering = window.setInterval(function() { plyr.timer.buffering = window.setInterval(function() {
// Get loaded % from YouTube // Get loaded % from YouTube
plyr.media.buffered = instance.getVideoLoadedFraction(); plyr.media.buffered = instance.getVideoLoadedFraction();
// Trigger progress // Trigger progress
_triggerEvent(plyr.media, 'progress'); _triggerEvent(plyr.media, 'progress');
@ -1089,9 +1102,9 @@
// 1 Playing // 1 Playing
// 2 Paused // 2 Paused
// 3 Buffering // 3 Buffering
// 5 Video cued // 5 Video cued
switch (event.data) { switch (event.data) {
case 0: case 0:
plyr.media.paused = true; plyr.media.paused = true;
_triggerEvent(plyr.media, 'ended'); _triggerEvent(plyr.media, 'ended');
break; break;
@ -1185,7 +1198,7 @@
// Prevent autoplay if needed (seek will play) // Prevent autoplay if needed (seek will play)
//if (!config.autoplay) { //if (!config.autoplay) {
// plyr.embed.api('pause'); // plyr.embed.api('pause');
//} //}
}); });
} }
@ -1236,7 +1249,7 @@
} }
// If caption file exists, process captions // If caption file exists, process captions
else { else {
// Turn off native caption rendering to avoid double captions // Turn off native caption rendering to avoid double captions
// This doesn't seem to work in Safari 7+, so the <track> elements are removed from the dom below // This doesn't seem to work in Safari 7+, so the <track> elements are removed from the dom below
var tracks = plyr.media.textTracks; var tracks = plyr.media.textTracks;
for (var x = 0; x < tracks.length; x++) { for (var x = 0; x < tracks.length; x++) {
@ -1247,9 +1260,9 @@
_showCaptions(plyr); _showCaptions(plyr);
// Disable unsupported browsers than report false positive // Disable unsupported browsers than report false positive
if ((plyr.browser.name === 'IE' && plyr.browser.version >= 10) || if ((plyr.browser.name === 'IE' && plyr.browser.version >= 10) ||
(plyr.browser.name === 'Firefox' && plyr.browser.version >= 31) || (plyr.browser.name === 'Firefox' && plyr.browser.version >= 31) ||
(plyr.browser.name === 'Chrome' && plyr.browser.version >= 43) || (plyr.browser.name === 'Chrome' && plyr.browser.version >= 43) ||
(plyr.browser.name === 'Safari' && plyr.browser.version >= 7)) { (plyr.browser.name === 'Safari' && plyr.browser.version >= 7)) {
// Debugging // Debugging
_log('Detected unsupported browser for HTML5 captions. Using fallback.'); _log('Detected unsupported browser for HTML5 captions. Using fallback.');
@ -1262,7 +1275,7 @@
// Native support required - http://caniuse.com/webvtt // Native support required - http://caniuse.com/webvtt
if (plyr.usingTextTracks) { if (plyr.usingTextTracks) {
_log('TextTracks supported.'); _log('TextTracks supported.');
for (var y = 0; y < tracks.length; y++) { for (var y = 0; y < tracks.length; y++) {
var track = tracks[y]; var track = tracks[y];
@ -1310,13 +1323,13 @@
plyr.captions.shift(); plyr.captions.shift();
_log('Successfully loaded the caption file via AJAX.'); _log('Successfully loaded the caption file via AJAX.');
} }
else { else {
_log('There was a problem loading the caption file via AJAX.', true); _log('There was a problem loading the caption file via AJAX.', true);
} }
} }
}; };
xhr.open('get', captionSrc, true); xhr.open('get', captionSrc, true);
xhr.send(); xhr.send();
@ -1329,7 +1342,7 @@
// Find all <track> elements // Find all <track> elements
tracks = plyr.media.getElementsByTagName('track'); tracks = plyr.media.getElementsByTagName('track');
// Loop through and remove one by one // Loop through and remove one by one
for (var t = 0; t < tracks.length; t++) { for (var t = 0; t < tracks.length; t++) {
plyr.media.removeChild(tracks[t]); plyr.media.removeChild(tracks[t]);
@ -1362,7 +1375,7 @@
if (config.fullscreen.hideControls) { if (config.fullscreen.hideControls) {
_toggleClass(plyr.container, config.classes.fullscreen.hideControls, true); _toggleClass(plyr.container, config.classes.fullscreen.hideControls, true);
} }
} }
} }
// Play media // Play media
@ -1517,7 +1530,7 @@
// Set button state // Set button state
_toggleState(plyr.buttons.fullscreen, plyr.isFullscreen); _toggleState(plyr.buttons.fullscreen, plyr.isFullscreen);
// Toggle controls visibility based on mouse movement and location // Toggle controls visibility based on mouse movement and location
var hoverTimer, isMouseOver = false; var hoverTimer, isMouseOver = false;
@ -1554,7 +1567,7 @@
} }
} }
// Bail from faux-fullscreen // Bail from faux-fullscreen
function _handleEscapeFullscreen(event) { function _handleEscapeFullscreen(event) {
// If it's a keypress and not escape, bail // If it's a keypress and not escape, bail
if ((event.which || event.charCode || event.keyCode) === 27 && plyr.isFullscreen) { if ((event.which || event.charCode || event.keyCode) === 27 && plyr.isFullscreen) {
@ -1606,7 +1619,7 @@
} }
else { else {
volume = config.volume; volume = config.volume;
} }
} }
// Maximum is 10 // Maximum is 10
@ -1642,7 +1655,7 @@
// Toggle muted state // Toggle muted state
if (plyr.media.muted && volume > 0) { if (plyr.media.muted && volume > 0) {
_toggleMute(); _toggleMute();
} }
} }
// Update volume UI and storage // Update volume UI and storage
@ -1662,7 +1675,7 @@
// Toggle class if muted // Toggle class if muted
_toggleClass(plyr.container, config.classes.muted, (volume === 0)); _toggleClass(plyr.container, config.classes.muted, (volume === 0));
// Update checkbox for mute state // Update checkbox for mute state
if (plyr.supported.full && plyr.buttons.mute) { if (plyr.supported.full && plyr.buttons.mute) {
_toggleState(plyr.buttons.mute, (volume === 0)); _toggleState(plyr.buttons.mute, (volume === 0));
@ -1674,7 +1687,7 @@
// If there's no full support, or there's no caption toggle // If there's no full support, or there's no caption toggle
if (!plyr.supported.full || !plyr.buttons.captions) { if (!plyr.supported.full || !plyr.buttons.captions) {
return; return;
} }
// If the method is called without parameter, toggle based on current value // If the method is called without parameter, toggle based on current value
if (typeof show !== 'boolean') { if (typeof show !== 'boolean') {
@ -1721,7 +1734,7 @@
if (event.type == 'timeupdate' && plyr.buttons.seek) { if (event.type == 'timeupdate' && plyr.buttons.seek) {
plyr.buttons.seek.value = value; plyr.buttons.seek.value = value;
} }
break; break;
// Events from seek range // Events from seek range
@ -1780,7 +1793,7 @@
// Do we need to display hours? // Do we need to display hours?
var displayHours = (parseInt(((plyr.media.duration / 60) / 60) % 60) > 0); var displayHours = (parseInt(((plyr.media.duration / 60) / 60) % 60) > 0);
// Ensure it's two digits. For example, 03 rather than 3. // Ensure it's two digits. For example, 03 rather than 3.
plyr.secs = ('0' + plyr.secs).slice(-2); plyr.secs = ('0' + plyr.secs).slice(-2);
plyr.mins = ('0' + plyr.mins).slice(-2); plyr.mins = ('0' + plyr.mins).slice(-2);
@ -1848,7 +1861,7 @@
// Remove video wrapper // Remove video wrapper
_remove(plyr.videoContainer); _remove(plyr.videoContainer);
} }
// Remove the old media // Remove the old media
_remove(plyr.media); _remove(plyr.media);
@ -1902,10 +1915,10 @@
// Autoplay the new source? // Autoplay the new source?
config.autoplay = (source.autoplay || config.autoplay); config.autoplay = (source.autoplay || config.autoplay);
// Set media id for embeds // Set media id for embeds
if (_inArray(config.types.embed, plyr.type)) { if (_inArray(config.types.embed, plyr.type)) {
plyr.embedId = source.sources; plyr.embedId = source.sources;
} }
// Set new sources for html5 // Set new sources for html5
@ -1914,7 +1927,7 @@
} }
// Set up from scratch // Set up from scratch
_setupMedia(); _setupMedia();
// Trigger media updated // Trigger media updated
_mediaUpdated(); _mediaUpdated();
@ -1948,13 +1961,13 @@
// Play if autoplay attribute is present // Play if autoplay attribute is present
if (config.autoplay) { if (config.autoplay) {
_play(); _play();
} }
} }
if ('title' in source) { if ('title' in source) {
config.title = source.title; config.title = source.title;
_setupPlayAria(); _setupPlayAria();
} }
} }
// Update poster // Update poster
@ -2020,7 +2033,7 @@
// Fast forward // Fast forward
_on(plyr.buttons.forward, 'click', _forward); _on(plyr.buttons.forward, 'click', _forward);
// Seek // Seek
_on(plyr.buttons.seek, inputEvent, _seek); _on(plyr.buttons.seek, inputEvent, _seek);
// Set volume // Set volume
@ -2038,7 +2051,7 @@
if (fullscreen.supportsFullScreen) { if (fullscreen.supportsFullScreen) {
_on(document, fullscreen.fullScreenEventName, _toggleFullscreen); _on(document, fullscreen.fullScreenEventName, _toggleFullscreen);
} }
// Time change on media // Time change on media
_on(plyr.media, 'timeupdate seeking', _timeUpdate); _on(plyr.media, 'timeupdate seeking', _timeUpdate);
@ -2053,7 +2066,7 @@
// Handle the media finishing // Handle the media finishing
_on(plyr.media, 'ended', function() { _on(plyr.media, 'ended', function() {
// Clear // Clear
if (plyr.type === 'video') { if (plyr.type === 'video') {
plyr.captionsContainer.innerHTML = ''; plyr.captionsContainer.innerHTML = '';
} }
@ -2140,7 +2153,7 @@
return null; return null;
} }
// Setup the fullscreen api // Setup the fullscreen api
fullscreen = _fullscreen(); fullscreen = _fullscreen();
// Sniff out the browser // Sniff out the browser
@ -2169,7 +2182,7 @@
config.autoplay = (config.autoplay || (plyr.media.getAttribute('autoplay') !== null)); config.autoplay = (config.autoplay || (plyr.media.getAttribute('autoplay') !== null));
config.loop = (config.loop || (plyr.media.getAttribute('loop') !== null)); config.loop = (config.loop || (plyr.media.getAttribute('loop') !== null));
} }
// Check for full support // Check for full support
plyr.supported = api.supported(plyr.type); plyr.supported = api.supported(plyr.type);
@ -2239,7 +2252,7 @@
_listeners(); _listeners();
} }
// Initialize instance // Initialize instance
_init(); _init();
// If init failed, return an empty object // If init failed, return an empty object
@ -2269,7 +2282,7 @@
}; };
} }
// Check for support // Check for support
api.supported = function(type) { api.supported = function(type) {
var browser = _browserSniff(), var browser = _browserSniff(),
oldIE = (browser.name === 'IE' && browser.version <= 9), oldIE = (browser.name === 'IE' && browser.version <= 9),
@ -2279,18 +2292,18 @@
basic, full; basic, full;
switch (type) { switch (type) {
case 'video': case 'video':
basic = video; basic = video;
full = (basic && (!oldIE && !iPhone)); full = (basic && (!oldIE && !iPhone));
break; break;
case 'audio': case 'audio':
basic = audio; basic = audio;
full = (basic && !oldIE); full = (basic && !oldIE);
break; break;
case 'vimeo': case 'vimeo':
case 'youtube': case 'youtube':
basic = true; basic = true;
full = (!oldIE && !iPhone); full = (!oldIE && !iPhone);
break; break;
@ -2308,8 +2321,8 @@
// Expose setup function // Expose setup function
api.setup = function(elements, options) { api.setup = function(elements, options) {
// Get the players // Get the players
var instances = []; var instances = [], elements = [];
// Select the elements // Select the elements
// Assume elements is a NodeList by default // Assume elements is a NodeList by default
@ -2336,7 +2349,7 @@
// Bail if disabled or no basic support // Bail if disabled or no basic support
// You may want to disable certain UAs etc // You may want to disable certain UAs etc
if (!config.enabled || !api.supported().basic) { if (!config.enabled || !api.supported().basic || !elements.length) {
return false; return false;
} }
@ -2366,4 +2379,5 @@
return instances; return instances;
}; };
}(this.plyr = this.plyr || {})); return api;
}));

72
src/less/plyr.less
View File

@ -21,7 +21,7 @@
// Captions // Captions
@font-size-captions-base: ceil(@font-size-base * 1.25); @font-size-captions-base: ceil(@font-size-base * 1.25);
@font-size-captions-medium: ceil(@font-size-base * 1.5); @font-size-captions-medium: ceil(@font-size-base * 1.5);
@font-size-captions-large: (@font-size-base * 2); @font-size-captions-large: (@font-size-base * 2);
// Controls // Controls
@control-spacing: 10px; @control-spacing: 10px;
@ -36,7 +36,7 @@
@tooltip-border-width: 1px; @tooltip-border-width: 1px;
@tooltip-shadow: 0 0 5px @tooltip-border-color, 0 0 0 @tooltip-border-width @tooltip-border-color; @tooltip-shadow: 0 0 5px @tooltip-border-color, 0 0 0 @tooltip-border-width @tooltip-border-color;
@tooltip-color: @control-color; @tooltip-color: @control-color;
@tooltip-padding: @control-spacing; @tooltip-padding: @control-spacing;
@tooltip-arrow-size: 6px; @tooltip-arrow-size: 6px;
@tooltip-radius: 3px; @tooltip-radius: 3px;
@ -94,7 +94,7 @@
// Contain floats: nicolasgallagher.com/micro-clearfix-hack/ // Contain floats: nicolasgallagher.com/micro-clearfix-hack/
.clearfix() { .clearfix() {
zoom: 1; zoom: 1;
&:before, &:before,
&:after { content: ""; display: table; } &:after { content: ""; display: table; }
&:after { clear: both; } &:after { clear: both; }
} }
@ -110,9 +110,19 @@
width: @volume-thumb-width; width: @volume-thumb-width;
background: @volume-thumb-bg; background: @volume-thumb-bg;
border: 0; border: 0;
border-radius: (@volume-thumb-height / 2); border-radius: 100%;
transition: background .3s ease; transition: background .3s ease, transform .2s ease;
cursor: ew-resize; cursor: ew-resize;
&:hover {
transform: scale(110%);
}
&:active {
height: @volume-thumb-height + 3;
width: @volume-thumb-width + 3;
border: 2px solid @control-bg-hover;
background: #fff !important;
}
} }
.volume-track() { .volume-track() {
height: @volume-track-height; height: @volume-track-height;
@ -145,7 +155,7 @@
// Styles // Styles
// ------------------------------- // -------------------------------
// Base // Base
.plyr { .plyr {
position: relative; position: relative;
max-width: 100%; max-width: 100%;
@ -156,8 +166,8 @@
&, &,
*, *,
*::after, *::after,
*::before { *::before {
box-sizing: border-box; box-sizing: border-box;
} }
// For video // For video
@ -177,7 +187,7 @@
height: 0; height: 0;
overflow: hidden; overflow: hidden;
background: #000; background: #000;
iframe { iframe {
position: absolute; position: absolute;
top: 0; top: 0;
@ -254,7 +264,7 @@
margin-top: 0; margin-top: 0;
} }
} }
// Buttons // Buttons
button { button {
display: inline-block; display: inline-block;
@ -268,7 +278,7 @@
cursor: pointer; cursor: pointer;
color: @control-color; color: @control-color;
transition: background .3s ease, color .3s ease, opacity .3s ease; transition: background .3s ease, color .3s ease, opacity .3s ease;
svg { svg {
width: 18px; width: 18px;
height: 18px; height: 18px;
@ -276,7 +286,7 @@
fill: currentColor; fill: currentColor;
transition: fill .3s ease; transition: fill .3s ease;
} }
// Hover and tab focus // Hover and tab focus
&.tab-focus, &.tab-focus,
&:hover { &:hover {
@ -343,7 +353,7 @@
transform: translate(-50%, (@tooltip-padding * 3)) scale(.8); transform: translate(-50%, (@tooltip-padding * 3)) scale(.8);
transform-origin: 50% 100%; transform-origin: 50% 100%;
transition: transform .2s .1s ease, opacity .2s .1s ease; transition: transform .2s .1s ease, opacity .2s .1s ease;
// Arrows // Arrows
&::after, &::after,
&::before { &::before {
@ -363,15 +373,15 @@
border-top: @border-arrow-size solid @tooltip-border-color; border-top: @border-arrow-size solid @tooltip-border-color;
border-left: @border-arrow-size solid transparent; border-left: @border-arrow-size solid transparent;
z-index: 1; z-index: 1;
} }
// The background triangle // The background triangle
&::before { &::before {
bottom: -@tooltip-arrow-size; bottom: -@tooltip-arrow-size;
border-right: @tooltip-arrow-size solid transparent; border-right: @tooltip-arrow-size solid transparent;
border-top: @tooltip-arrow-size solid @tooltip-bg; border-top: @tooltip-arrow-size solid @tooltip-bg;
border-left: @tooltip-arrow-size solid transparent; border-left: @tooltip-arrow-size solid transparent;
z-index: 2; z-index: 2;
} }
} }
button:hover .plyr-tooltip, button:hover .plyr-tooltip,
button.tab-focus:focus .plyr-tooltip { button.tab-focus:focus .plyr-tooltip {
@ -411,7 +421,7 @@
background: transparent; background: transparent;
} }
&-buffer[value], &-buffer[value],
&-played[value] { &-played[value] {
&::-webkit-progress-bar { &::-webkit-progress-bar {
background: transparent; background: transparent;
} }
@ -457,7 +467,7 @@
-moz-appearance: none; -moz-appearance: none;
.seek-thumb(); .seek-thumb();
} }
// Microsoft // Microsoft
&::-ms-track { &::-ms-track {
color: transparent; color: transparent;
@ -487,13 +497,13 @@
background-repeat: repeat-x; background-repeat: repeat-x;
background-color: @progress-buffered-bg; background-color: @progress-buffered-bg;
background-image: linear-gradient( background-image: linear-gradient(
-45deg, -45deg,
@progress-loading-bg 25%, @progress-loading-bg 25%,
transparent 25%, transparent 25%,
transparent 50%, transparent 50%,
@progress-loading-bg 50%, @progress-loading-bg 50%,
@progress-loading-bg 75%, @progress-loading-bg 75%,
transparent 75%, transparent 75%,
transparent); transparent);
color: transparent; color: transparent;
} }
@ -517,11 +527,11 @@
-moz-appearance: none; -moz-appearance: none;
width: 100px; width: 100px;
margin: 0 @control-spacing 0 0; margin: 0 @control-spacing 0 0;
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
background: transparent; background: transparent;
border: none; border: none;
// Webkit // Webkit
&::-webkit-slider-runnable-track { &::-webkit-slider-runnable-track {
.volume-track(); .volume-track();
@ -530,6 +540,10 @@
-webkit-appearance: none; -webkit-appearance: none;
margin-top: -((@volume-thumb-height - @volume-track-height) / 2); margin-top: -((@volume-thumb-height - @volume-track-height) / 2);
.volume-thumb(); .volume-thumb();
&:active {
margin-top: -(((@volume-thumb-height - @volume-track-height) / 2) + 1);
}
} }
// Mozilla // Mozilla
@ -539,7 +553,7 @@
&::-moz-range-thumb { &::-moz-range-thumb {
.volume-thumb(); .volume-thumb();
} }
// Microsoft // Microsoft
&::-ms-track { &::-ms-track {
height: @volume-track-height; height: @volume-track-height;
@ -614,7 +628,7 @@
.plyr-video-wrapper { .plyr-video-wrapper {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.plyr-controls { .plyr-controls {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -669,4 +683,4 @@
&.fullscreen-enabled [data-plyr='fullscreen'] { &.fullscreen-enabled [data-plyr='fullscreen'] {
display: inline-block; display: inline-block;
} }
} }