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

Audio fullscreen, Tooltip tweaks, Docs

Browse Source
This commit is contained in:
Sam Potts
2015-10-25 11:57:52 +11:00
parent 58f8cdd8c8
commit 125a95e9e1
8 changed files with 277 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/js/plyr.js
View File

@ -78,7 +78,8 @@
fullscreen: {
enabled: true,
fallback: true,
hideControls: true
hideControls: true,
allowAudio: false
},
storage: {
enabled: true,
@ -664,7 +665,7 @@
time = typeof time === 'number' ? time : plyr.media.currentTime;
// If there's no subs available, bail
if(!plyr.captions[plyr.subcount]) {
if (!plyr.captions[plyr.subcount]) {
return;
}
@ -930,9 +931,6 @@
_remove(containers[i]);
}
// Set ID
container.setAttribute('id', id);
// Add embed class for responsive
_toggleClass(plyr.media, config.classes.videoWrapper, true);
_toggleClass(plyr.media, config.classes.embedWrapper, true);
@ -942,6 +940,9 @@
// Create the YouTube container
plyr.media.appendChild(container);
// Set ID
container.setAttribute('id', id);
// Setup API
if (typeof YT === 'object') {
_youTubeReady(videoId, container);
@ -984,7 +985,7 @@
// Wait for fragaloop load
var timer = window.setInterval(function() {
if('$f' in window && iframe.loaded) {
if ('$f' in window && iframe.loaded) {
window.clearInterval(timer);
_vimeoReady.call(iframe);
@ -1122,11 +1123,11 @@
// Vimeo ready
function _vimeoReady() {
/* jshint validthis: true */
// Get the frame with fragaloop lib
plyr.embed = $f(this);
// Setup on ready
plyr.embed.addEvent('ready', function() {
// Create a faux HTML5 API using the Vimeo API
plyr.media.play = function() { plyr.embed.api('play'); };
plyr.media.pause = function() { plyr.embed.api('pause'); };
@ -1178,13 +1179,13 @@
_triggerEvent(plyr.media, 'ended');
});
/*// Always seek to 0
plyr.embed.api('seekTo', 0);
// Always seek to 0
//plyr.embed.api('seekTo', 0);
// Prevent autoplay if needed (seek will play)
if (!config.autoplay) {
plyr.embed.api('pause');
}*/
//if (!config.autoplay) {
// plyr.embed.api('pause');
//}
});
}
@ -1192,7 +1193,7 @@
function _setupCaptions() {
if (plyr.type === 'video') {
// Inject the container
if(!_getElement(config.selectors.captions)) {
if (!_getElement(config.selectors.captions)) {
plyr.videoContainer.insertAdjacentHTML('afterbegin', '<div class="' + _getClassname(config.selectors.captions) + '"><span></span></div>');
}
@ -1340,7 +1341,7 @@
// Setup fullscreen
function _setupFullscreen() {
if (plyr.type != 'audio' && config.fullscreen.enabled) {
if ((plyr.type != 'audio' || config.fullscreen.allowAudio) && config.fullscreen.enabled) {
// Check for native support
var nativeSupport = fullscreen.supportsFullScreen;
@ -1660,18 +1661,21 @@
// If there's no full support, or there's no caption toggle
if (!plyr.supported.full || !plyr.buttons.captions) {
return;
}
}
// If the method is called without parameter, toggle based on current value
if (typeof show !== 'boolean') {
show = (plyr.container.className.indexOf(config.classes.captions.active) === -1);
}
// Set global
plyr.captionsEnabled = show;
// Toggle state
_toggleState(plyr.buttons.captions, show);
_toggleState(plyr.buttons.captions, plyr.captionsEnabled);
// Add class hook
_toggleClass(plyr.container, config.classes.captions.active, show);
_toggleClass(plyr.container, config.classes.captions.active, plyr.captionsEnabled);
}
// Check if media is loading
@ -1753,7 +1757,7 @@
}
// Fallback to 0
if(isNaN(time)) {
if (isNaN(time)) {
time = 0;
}
@ -1798,10 +1802,10 @@
// Add elements to HTML5 media (source, tracks, etc)
function _insertChildElements(type, attributes) {
if(typeof attributes === 'string') {
if (typeof attributes === 'string') {
_insertElement(type, plyr.media, { src: attributes });
}
else if(attributes.constructor === Array) {
else if (attributes.constructor === Array) {
for (var i = attributes.length - 1; i >= 0; i--) {
_insertElement(type, plyr.media, attributes[i]);
}
@ -1811,7 +1815,7 @@
// Update source
// Sources are not checked for support so be careful
function _updateSource(source) {
if(typeof source === 'undefined') {
if (typeof source === 'undefined') {
return;
}
@ -1819,7 +1823,7 @@
_pause();
// Clean up YouTube stuff
if(plyr.type === 'youtube') {
if (plyr.type === 'youtube') {
// Destroy the embed instance
plyr.embed.destroy();
@ -1836,7 +1840,7 @@
_remove(plyr.media);
// Set the new type
if('type' in source && source.type !== plyr.type) {
if ('type' in source && source.type !== plyr.type) {
plyr.type = source.type;
}
@ -1853,7 +1857,7 @@
case 'youtube':
case 'vimeo':
plyr.media = document.createElement('div');
plyr.embedId = source.sources;
plyr.embedId = (typeof source.sources === 'string' ? source.sources : source.sources[0].src);
break;
}
@ -1861,8 +1865,8 @@
_prependChild(plyr.container, plyr.media);
// Set attributes for audio video
if(_inArray(config.types.html5, plyr.type)) {
if(config.crossorigin) {
if (_inArray(config.types.html5, plyr.type)) {
if (config.crossorigin) {
plyr.media.setAttribute('crossorigin', '');
}
if (config.autoplay) {
@ -1879,16 +1883,20 @@
// Classname reset
plyr.container.className = plyr.originalClassName;
// Restore class hooks
_toggleClass(plyr.container, config.classes.fullscreen.active, plyr.isFullscreen);
_toggleClass(plyr.container, config.classes.captions.active, plyr.captionsEnabled);
// Autoplay the new source?
config.autoplay = (source.autoplay || config.autoplay);
// Set media id for embeds
if(_inArray(config.types.embed, plyr.type)) {
if (_inArray(config.types.embed, plyr.type)) {
plyr.embedId = source.sources;
}
// Set new sources for html5
if(_inArray(config.types.html5, plyr.type)) {
if (_inArray(config.types.html5, plyr.type)) {
_insertChildElements('source', source.sources);
}
@ -1899,13 +1907,13 @@
_mediaUpdated();
// HTML5 stuff
if(_inArray(config.types.html5, plyr.type)) {
if (_inArray(config.types.html5, plyr.type)) {
// Set volume
_setVolume();
_updateVolume();
// UI updates
if(plyr.supported.full) {
if (plyr.supported.full) {
// Reset time display
_timeUpdate();
@ -1914,7 +1922,7 @@
}
// Setup captions
if('tracks' in source) {
if ('tracks' in source) {
_insertChildElements('track', source.tracks);
// Captions
@ -1930,7 +1938,7 @@
}
}
if('title' in source) {
if ('title' in source) {
config.title = source.title;
_setupPlayAria();
}
@ -2292,17 +2300,17 @@
// Select the elements
// Assume elements is a NodeList by default
if(typeof elements === 'string') {
if (typeof elements === 'string') {
elements = document.querySelectorAll(elements);
}
// Single HTMLElement passed
else if(elements instanceof HTMLElement) {
else if (elements instanceof HTMLElement) {
elements = [elements];
}
// No selector passed, possibly options as first argument
else if (!(elements instanceof NodeList) && typeof elements !== 'string') {
// If options are the first argument
if(typeof options === 'undefined' && typeof elements === 'object') {
if (typeof options === 'undefined' && typeof elements === 'object') {
options = elements;
}

43
src/less/plyr.less
View File

@ -32,10 +32,12 @@
// Tooltips
@tooltip-bg: @controls-bg;
@tooltip-border-color: @off-white;
@tooltip-border-color: fade(@gray-dark, 10%);
@tooltip-border-width: 1px;
@tooltip-shadow: 0 0 5px @tooltip-border-color, 0 0 0 @tooltip-border-width @tooltip-border-color;
@tooltip-color: @control-color;
@tooltip-padding: @control-spacing;
@tooltip-arrow-size: 5px;
@tooltip-arrow-size: 6px;
@tooltip-radius: 3px;
// Progress
@ -331,32 +333,45 @@
opacity: 0;
background: @tooltip-bg;
border: 1px solid @tooltip-border-color;
box-shadow: @tooltip-shadow;
border-radius: @tooltip-radius;
color: @tooltip-color;
font-size: @font-size-small;
line-height: 1.5;
font-weight: 600;
transform: translate(-50%, (@tooltip-padding * 3)) scale(0);
transform: translate(-50%, (@tooltip-padding * 3)) scale(.8);
transform-origin: 50% 100%;
transition: transform .2s .1s ease, opacity .2s .1s ease;
// Arrow
&::after {
// Arrows
&::after,
&::before {
content: '';
position: absolute;
z-index: 1;
width: 0;
height: 0;
top: 100%;
left: 50%;
display: block;
width: 10px;
height: 10px;
background: @tooltip-bg;
transform: translate(-50%, -50%) rotate(45deg) translateY(1px);
border: 1px solid @tooltip-border-color;
border-width: 0 1px 1px 0;
transform: translateX(-50%);
}
// The border triangle
&::after {
@border-arrow-size: (@tooltip-arrow-size + (@tooltip-border-width * 1));
bottom: -(@border-arrow-size + @tooltip-border-width);
border-right: @border-arrow-size solid transparent;
border-top: @border-arrow-size solid @tooltip-border-color;
border-left: @border-arrow-size solid transparent;
z-index: 1;
}
// The background triangle
&::before {
bottom: -@tooltip-arrow-size;
border-right: @tooltip-arrow-size solid transparent;
border-top: @tooltip-arrow-size solid @tooltip-bg;
border-left: @tooltip-arrow-size solid transparent;
z-index: 2;
}
}
button:hover .plyr-tooltip,
button.tab-focus:focus .plyr-tooltip {

44
src/sass/plyr.scss
View File

@ -44,15 +44,18 @@ $control-color-hover: null !default;
// Tooltips
$tooltip-bg: $controls-bg !default;
$tooltip-border-color: transparentize(@gray-dark, .1) !default;
$tooltip-border-width: 1px;
$tooltip-shadow: 0 0 5px $tooltip-border-color, 0 0 0 $tooltip-border-width $tooltip-border-color;
$tooltip-color: $control-color !default;
$tooltip-padding: $control-spacing !default;
$tooltip-arrow-size: 5px !default;
$tooltip-arrow-size: 6px !default;
$tooltip-radius: 3px !default;
// Progress
$progress-bg: rgba(red($gray), green($gray), blue($gray), .2) !default;
$progress-bg: transparentize($gray, .2) !default;
$progress-playing-bg: $blue !default;
$progress-buffered-bg: rgba(red($gray), green($gray), blue($gray), .25) !default;
$progress-buffered-bg: transparentize($gray, .25) !default;
$progress-loading-size: 40px !default;
$progress-loading-bg: rgba(0,0,0, .15) !default;
@ -334,29 +337,44 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
opacity: 0;
background: $tooltip-bg;
box-shadow: $tooltip-shadow;
border-radius: $tooltip-radius;
color: $tooltip-color;
font-size: $font-size-small;
line-height: 1.5;
font-weight: 600;
transform: translate(-50%, ($tooltip-padding * 3)) scale(0);
transform: translate(-50%, ($tooltip-padding * 3)) scale(.8);
transform-origin: 50% 100%;
transition: transform .2s .1s ease, opacity .2s .1s ease;
&::after {
// Arrows
&::after,
&::before {
content: '';
display: block;
position: absolute;
left: 50%;
bottom: -$tooltip-arrow-size;
margin-left: -$tooltip-arrow-size;
width: 0;
height: 0;
transition: inherit;
border-style: solid;
border-width: $tooltip-arrow-size $tooltip-arrow-size 0 $tooltip-arrow-size;
border-color: $controls-bg transparent transparent;
top: 100%;
left: 50%;
transform: translateX(-50%);
}
// The border triangle
&::after {
$border-arrow-size: ($tooltip-arrow-size + ($tooltip-border-width * 1));
bottom: -($border-arrow-size + $tooltip-border-width);
border-right: $border-arrow-size solid transparent;
border-top: $border-arrow-size solid $tooltip-border-color;
border-left: $border-arrow-size solid transparent;
z-index: 1;
}
// The background triangle
&::before {
bottom: -$tooltip-arrow-size;
border-right: $tooltip-arrow-size solid transparent;
border-top: $tooltip-arrow-size solid $tooltip-bg;
border-left: $tooltip-arrow-size solid transparent;
z-index: 2;
}
}
button:hover .plyr-tooltip,