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

Tidy up, fixing destroy

Browse Source
This commit is contained in:
Sam Potts 2017-06-04 18:30:37 +10:00
parent 3605989226
commit bc61dac4c5
14 changed files with 252 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

34
demo/index.html
View File

@ -64,10 +64,36 @@
</video> </video>
<ul> <ul>
<li class="plyr__cite plyr__cite--video"><small><a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> &copy; Brainfarm</small></li> <li class="plyr__cite plyr__cite--video" hidden>
<li class="plyr__cite plyr__cite--audio"><small><a href="http://www.kishibashi.com/" target="_blank">Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;</a> &copy; Kishi Bashi</small></li> <small>
<li class="plyr__cite plyr__cite--youtube"><small><a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on <span class="color--youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</span></small></li> <a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> &copy; Brainfarm
<li class="plyr__cite plyr__cite--vimeo"><small><a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on <span class="color--vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</span></small></li> </small>
</li>
<li class="plyr__cite plyr__cite--audio" hidden>
<small>
<a href="http://www.kishibashi.com/" target="_blank">Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;</a> &copy; Kishi Bashi
</small>
</li>
<li class="plyr__cite plyr__cite--youtube" hidden>
<small>
<a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on
<span class="color--youtube">
<svg class="icon">
<use xlink:href="#icon-youtube"/>
</svg> YouTube
</span>
</small>
</li>
<li class="plyr__cite plyr__cite--vimeo" hidden>
<small>
<a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on
<span class="color--vimeo">
<svg class="icon">
<use xlink:href="#icon-vimeo"/>
</svg> Vimeo
</span>
</small>
</li>
</ul> </ul>
</section> </section>
</main> </main>

6
demo/src/js/main.js
View File

@ -185,6 +185,12 @@
// Set active on parent // Set active on parent
toggleClass(document.querySelector('[data-source="' + type + '"]').parentElement, 'active', true); toggleClass(document.querySelector('[data-source="' + type + '"]').parentElement, 'active', true);
// Show cite
[].forEach.call(document.querySelectorAll('.plyr__cite'), function(cite) {
cite.setAttribute('hidden', '');
});
document.querySelector('.plyr__cite--' + type).removeAttribute('hidden');
} }
})(); })();

10
demo/src/less/components/base.less
View File

@ -15,11 +15,11 @@
// Base // Base
html { html {
height: 100%; background: @body-background;
background: @body-background fixed;
} }
body { body {
margin: 0; max-width: @container-width;
margin: auto;
padding: (@padding-base / 2); padding: (@padding-base / 2);
} }
@ -31,6 +31,7 @@ header {
p { p {
.font-size(18); .font-size(18);
} }
@media (min-width: @screen-sm) { @media (min-width: @screen-sm) {
padding-top: (@padding-base * 3); padding-top: (@padding-base * 3);
padding-bottom: (@padding-base * 3); padding-bottom: (@padding-base * 3);
@ -39,8 +40,7 @@ header {
// Sections // Sections
section { section {
max-width: @example-width-video; margin-bottom: @padding-base;
margin: 0 auto @padding-base;
@media (min-width: @screen-sm) { @media (min-width: @screen-sm) {
margin-bottom: (@padding-base * 2); margin-bottom: (@padding-base * 2);

240
demo/src/less/components/buttons.less
View File

@ -3,170 +3,162 @@
// ========================================================================== // ==========================================================================
nav { nav {
ul { ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 0; font-size: 0;
} }
li { li {
display: inline-block; display: inline-block;
margin-top: (@padding-base / 2); margin-top: (@padding-base / 2);
.font-size(); .font-size();
white-space: nowrap; white-space: nowrap;
} }
li + li { li + li {
margin-left: @padding-base; margin-left: @padding-base;
} }
} }
// Tabs // Tabs
.btn__bar { .btn__bar {
position: relative; position: relative;
margin: 0 auto @padding-base; margin: 0 auto @padding-base;
max-width: @example-width-video; white-space: nowrap;
white-space: nowrap;
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 0; left: 0;
right: 0; right: 0;
height: 1px; height: 1px;
background: @gray-lighter; background: @off-white;
} }
ul { ul {
position: relative; position: relative;
z-index: 1; z-index: 1;
display: inline-block; display: inline-block;
user-select: none; }
} li {
li { margin: 0;
margin: 0;
&:first-child .btn { &:first-child .btn {
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
} }
&:last-child .btn { &:last-child .btn {
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
} }
& + li .btn { & + li .btn {
margin-left: -1px; margin-left: -1px;
} }
&.active .btn { &.active .btn {
&:extend(.btn--primary); &:extend(.btn--primary);
box-shadow: inset 0 1px 1px rgba(0,0,0, .2); position: relative;
position: relative; z-index: 1;
z-index: 1;
.icon { .icon {
color: inherit; color: inherit;
} }
} }
&.active + li .btn:hover { &.active + li .btn:hover {
z-index: 0; z-index: 0;
} }
} }
.btn { .btn {
position: relative; position: relative;
display: block; display: block;
border-radius: 0; border-radius: 0;
&:hover, &:hover,
&:focus { &:focus {
z-index: 1; z-index: 1;
} }
} }
@media (min-width: 560px) { @media (min-width: 560px) {
margin-bottom: (@padding-base * 2); margin-bottom: (@padding-base * 2);
} }
} }
// Shared // Shared
.btn, .btn,
.btn__count { .btn__count {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
border-radius: @border-radius-base; border-radius: @border-radius-base;
user-select: none; user-select: none;
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
} }
// Buttons // Buttons
.btn { .btn {
padding: (@padding-base / 2) ((@padding-base / 2) + 2); padding: (@padding-base / 2) ((@padding-base / 2) + 2);
background: linear-gradient(lighten(@off-white, 2%), darken(@off-white, 3%)); background: #fff;
border: 1px solid @gray-light; border: 1px solid @gray-lighter;
box-shadow: 0 1px 1px rgba(0,0,0, .05); color: @gray;
text-shadow: 0 1px 1px #fff; transition: all .2s ease;
color: @gray; .font-size(@font-size-small);
transition: background .1s ease, color .1s ease;
.font-size(@font-size-small);
&:hover, &:hover,
&:focus { &:focus {
border-color: darken(@gray-light, 8%); border-color: @gray-light;
color: @gray; }
outline: 0;
}
} }
// Sizes // Sizes
.btn--large { .btn--large {
padding: (@padding-base / 2) @padding-base; padding: (@padding-base / 2) @padding-base;
.font-size(); .font-size();
} }
// Styles // Styles
.btn--primary { .btn--primary {
background-image: linear-gradient(@link-color, darken(@link-color, 5%)); @border-color: darken(@link-color, 5%);
background-color: @link-color; background-image: linear-gradient(@link-color, @border-color);
border-color: darken(@link-color, 10%); background-color: @link-color;
box-shadow: 0 1px 1px rgba(0,0,0, .15); border-color: @border-color;
text-shadow: 0 1px 1px rgba(0,0,0, .1); color: #fff;
color: #fff;
&:hover, &:hover,
&:focus { &:focus {
color: #fff; color: #fff;
border-color: darken(@link-color, 20%); border-color: darken(@border-color, 5%);
} }
} }
.btn--youtube .icon { .btn--youtube .icon {
color: @color-youtube; color: @color-youtube;
} }
.btn--vimeo .icon { .btn--vimeo .icon {
color: @color-vimeo; color: @color-vimeo;
} }
.btn--twitter .icon { .btn--twitter .icon {
color: @color-twitter; color: @color-twitter;
} }
// Count bubble // Count bubble
.btn__count { .btn__count {
position: relative; position: relative;
margin-left: (@padding-base / 2); margin-left: (@padding-base / 2);
padding: (@padding-base / 2) (@padding-base * .75); padding: (@padding-base / 2) (@padding-base * .75);
background: #fff; background: #fff;
border: 1px solid @gray-light; border: 1px solid @gray-lighter;
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
display: block; display: block;
width: @arrow-size; width: @arrow-size;
height: @arrow-size; height: @arrow-size;
left: 1px; left: 1px;
top: 50%; top: 50%;
margin-top: -(@arrow-size / 2); margin-top: -(@arrow-size / 2);
background: inherit; background: inherit;
border: inherit; border: inherit;
border-width: 1px 0 0 1px; border-width: 1px 0 0 1px;
transform: rotate(-45deg) translate(-50%, -50%); transform: rotate(-45deg) translate(-50%, -50%);
} }
} }

12
demo/src/less/components/examples.less
View File

@ -30,17 +30,5 @@ video {
// Style full supported player // Style full supported player
.plyr__cite { .plyr__cite {
display: none;
margin-top: @padding-base; margin-top: @padding-base;
.icon {
margin-right: (@padding-base / 4);
}
}
.plyr--video:not(.plyr--youtube):not(.plyr--vimeo) ~ ul .plyr__cite--video,
.plyr--audio ~ ul .plyr__cite--audio,
.plyr--youtube ~ ul .plyr__cite--youtube,
.plyr--vimeo ~ ul .plyr__cite--vimeo {
display: block;
} }

12
demo/src/less/components/type.less
View File

@ -51,22 +51,22 @@ li {
a { a {
text-decoration: none; text-decoration: none;
color: @link-color; color: @link-color;
border-bottom: 1px dotted currentColor; transition: color .3s ease;
transition: background .3s ease, color .3s ease, border .3s ease;
&:hover, &:hover,
&:focus { &:focus {
color: @gray-dark; color: @gray-dark;
border-bottom-color: rgba(0,0,0,0);
}
&:focus {
.tab-focus();
} }
&.logo { &.logo {
border: 0; border: 0;
} }
} }
a:focus,
button:focus {
.tab-focus();
}
.color--vimeo { .color--vimeo {
color: @color-vimeo; color: @color-vimeo;
} }

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

@ -9,7 +9,7 @@
@gray-lighter: #dbe3e8; @gray-lighter: #dbe3e8;
@off-white: #f2f5f7; @off-white: #f2f5f7;
@brand-primary: #3498db; @brand-primary: #22b5ff;
@brand-secondary: #02BD9B; @brand-secondary: #02BD9B;
// Brands // Brands
@ -18,7 +18,7 @@
@color-vimeo: #19b7ed; @color-vimeo: #19b7ed;
// Base // Base
@body-background: @off-white; //linear-gradient(to left top, @brand-secondary, @brand-primary); @body-background: #fff;
// Type // Type
@font-size-base: 16; @font-size-base: 16;
@ -45,4 +45,4 @@
// Examples // Examples
@example-width-audio: 520px; @example-width-audio: 520px;
@example-width-video: 1200px; @container-width: 800px;

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

2
notes.md
View File

@ -24,6 +24,8 @@
[ ] Start / end options for all players? [ ] Start / end options for all players?
[ ] Get quality options for HTML5 somehow (multi source?) [ ] 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 [ ] 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)
[ ] Allow passing YouTube/Vimeo iframe to setup
#### Bugs #### Bugs
[ ] Fix audio setup bug when calling `.setup()` again [ ] Fix audio setup bug when calling `.setup()` again

150
src/js/plyr.js
View File

@ -721,6 +721,12 @@
// Toggle event listener // Toggle event listener
toggleListener: function(elements, events, callback, toggle, passive, capture) { toggleListener: function(elements, events, callback, toggle, passive, capture) {
// Bail if no elements
if (elements === null || utils.is.undefined(elements)) {
return;
}
// Allow multiple events
events = events.split(' '); events = events.split(' ');
// Whether the listener is a capturing listener or not // Whether the listener is a capturing listener or not
@ -774,16 +780,12 @@
// Bind event handler // Bind event handler
on: function(element, events, callback, passive, capture) { on: function(element, events, callback, passive, capture) {
if (!utils.is.undefined(element)) { utils.toggleListener(element, events, callback, true, passive, capture);
utils.toggleListener(element, events, callback, true, passive, capture);
}
}, },
// Unbind event handler // Unbind event handler
off: function(element, events, callback, passive, capture) { off: function(element, events, callback, passive, capture) {
if (!utils.is.undefined(element)) { utils.toggleListener(element, events, callback, false, passive, capture);
utils.toggleListener(element, events, callback, false, passive, capture);
}
}, },
// Trigger event // Trigger event
@ -1189,8 +1191,8 @@
reducedMotion: 'matchMedia' in window && window.matchMedia('(prefers-reduced-motion)').matches reducedMotion: 'matchMedia' in window && window.matchMedia('(prefers-reduced-motion)').matches
}; };
// Player instance // Plyr instance
function Player(media, options) { function Plyr(media, options) {
var player = this; var player = this;
var timers = {}; var timers = {};
var api = {}; var api = {};
@ -3403,9 +3405,6 @@
// Setup new source // Setup new source
function setup() { function setup() {
// Reset embed object
player.embed = null;
// Remove media // Remove media
removeElement(player.media); removeElement(player.media);
@ -4111,7 +4110,9 @@
player.ready = true; player.ready = true;
// Ready event at end of execution stack // Ready event at end of execution stack
trigger(player.elements.container, 'ready', true); window.setTimeout(function() {
trigger(player.elements.container, 'ready', true);
}, 0);
// Autoplay // Autoplay
if (player.config.autoplay) { if (player.config.autoplay) {
@ -4120,13 +4121,20 @@
} }
// Setup a player // Setup a player
function setup(target) { function setup(media) {
// We need an element to setup // We need an element to setup
if (target === null || utils.is.undefined(target) || !utils.is.htmlElement(target)) { if (media === null || utils.is.undefined(media) || !utils.is.htmlElement(media)) {
error('Setup failed: no suitable element passed'); error('Setup failed: no suitable element passed');
return; return;
} }
// Bail if the element is initialized
if (media.plyr) {
warn('Target already setup');
player = media.plyr;
return;
}
// Bail if not enabled // Bail if not enabled
if (!player.config.enabled) { if (!player.config.enabled) {
error('Setup failed: disabled by config'); error('Setup failed: disabled by config');
@ -4140,21 +4148,18 @@
return; return;
} }
// Bail if the element is initialized // Cache original element state for .destroy()
if (target.plyr) { player.elements.original = media.cloneNode(true);
log('Target already setup');
return target.plyr;
}
// Set media type based on tag or data attribute // Set media type based on tag or data attribute
// Supported: video, audio, vimeo, youtube // Supported: video, audio, vimeo, youtube
var type = target.tagName.toLowerCase(); var type = media.tagName.toLowerCase();
// Different setup based on type // Different setup based on type
switch (type) { switch (type) {
case 'div': case 'div':
player.type = target.getAttribute('data-type'); player.type = media.getAttribute('data-type');
player.embedId = target.getAttribute('data-video-id'); player.embedId = media.getAttribute('data-video-id');
if (utils.is.empty(player.type)) { if (utils.is.empty(player.type)) {
error('Setup failed: embed type missing'); error('Setup failed: embed type missing');
@ -4167,26 +4172,26 @@
} }
// Clean up // Clean up
target.removeAttribute('data-type'); media.removeAttribute('data-type');
target.removeAttribute('data-video-id'); media.removeAttribute('data-video-id');
break; break;
case 'iframe': case 'iframe':
// Do something with the iframe // TODO: Handle passing an iframe for true progressive enhancement
break; break;
case 'video': case 'video':
case 'audio': case 'audio':
player.type = type; player.type = type;
player.config.crossorigin = target.getAttribute('crossorigin') !== null; player.config.crossorigin = media.getAttribute('crossorigin') !== null;
player.config.autoplay = player.config.autoplay || (target.getAttribute('autoplay') !== null); player.config.autoplay = player.config.autoplay || (media.getAttribute('autoplay') !== null);
player.config.inline = target.getAttribute('playsinline') !== null; player.config.inline = media.getAttribute('playsinline') !== null;
player.config.loop.active = player.config.loop || (target.getAttribute('loop') !== null); player.config.loop.active = player.config.loop || (media.getAttribute('loop') !== null);
break; break;
default: default:
error('Setup failed: unsupported type'); error('Setup failed: unsupported type');
return false; return;
} }
// Sniff out the browser // Sniff out the browser
@ -4201,14 +4206,14 @@
// If no native support, bail // If no native support, bail
if (!player.supported.basic) { if (!player.supported.basic) {
error('Setup failed: no support'); error('Setup failed: no support');
return false; return;
} }
// Wrap media // Store reference
player.elements.container = utils.wrap(target, utils.createElement('div')); media.plyr = player;
// Cache original element state for .destroy() // Wrap media
player.elements.original = target.cloneNode(true); player.elements.container = utils.wrap(media, utils.createElement('div'));
// Allow focus to be captured // Allow focus to be captured
player.elements.container.setAttribute('tabindex', 0); player.elements.container.setAttribute('tabindex', 0);
@ -4227,7 +4232,7 @@
var events = player.config.events.concat(['setup', 'statechange', 'enterfullscreen', 'exitfullscreen', 'captionsenabled', 'captionsdisabled']); var events = player.config.events.concat(['setup', 'statechange', 'enterfullscreen', 'exitfullscreen', 'captionsenabled', 'captionsdisabled']);
utils.on(player.elements.container, events.join(' '), function(event) { utils.on(player.elements.container, events.join(' '), function(event) {
log(['event:', event.type].join(' ').trim()); log('event: ' + event.type);
}); });
} }
@ -4273,7 +4278,7 @@
// API // API
// --------------------------------------- // ---------------------------------------
// Play // Play
Player.prototype.play = function() { Plyr.prototype.play = function() {
var player = this; var player = this;
if ('play' in player.media) { if ('play' in player.media) {
@ -4285,7 +4290,7 @@
}; };
// Pause // Pause
Player.prototype.pause = function() { Plyr.prototype.pause = function() {
var player = this; var player = this;
if ('pause' in player.media) { if ('pause' in player.media) {
@ -4297,7 +4302,7 @@
}; };
// Toggle playback // Toggle playback
Player.prototype.togglePlay = function(toggle) { Plyr.prototype.togglePlay = function(toggle) {
var player = this; var player = this;
// True toggle if nothing passed // True toggle if nothing passed
@ -4315,7 +4320,7 @@
}; };
// Stop // Stop
Player.prototype.stop = function() { Plyr.prototype.stop = function() {
var player = this; var player = this;
player.restart(); player.restart();
@ -4326,7 +4331,7 @@
}; };
// Restart // Restart
Player.prototype.restart = function() { Plyr.prototype.restart = function() {
var player = this; var player = this;
// Seek to 0 // Seek to 0
@ -4337,7 +4342,7 @@
}; };
// Rewind // Rewind
Player.prototype.rewind = function(seekTime) { Plyr.prototype.rewind = function(seekTime) {
var player = this; var player = this;
// Use default if needed // Use default if needed
@ -4352,7 +4357,7 @@
}; };
// Fast forward // Fast forward
Player.prototype.forward = function(seekTime) { Plyr.prototype.forward = function(seekTime) {
var player = this; var player = this;
// Use default if needed // Use default if needed
@ -4368,7 +4373,7 @@
// Seek to time // Seek to time
// The input parameter can be an event or a number // The input parameter can be an event or a number
Player.prototype.seek = function(input) { Plyr.prototype.seek = function(input) {
var player = this; var player = this;
var targetTime = 0; var targetTime = 0;
var paused = player.media.paused; var paused = player.media.paused;
@ -4389,11 +4394,6 @@
player.core.updateSeekDisplay(targetTime); player.core.updateSeekDisplay(targetTime);
// Set the current time // Set the current time
// Try/catch incase the media isn't set and we're calling seek() from source() and IE moans
try {
player.media.currentTime = targetTime.toFixed(4);
} catch (e) {}
// Embeds // Embeds
if (utils.inArray(types.embed, player.type)) { if (utils.inArray(types.embed, player.type)) {
switch (player.type) { switch (player.type) {
@ -4423,6 +4423,8 @@
// Trigger seeking // Trigger seeking
player.core.trigger(player.media, 'seeking'); player.core.trigger(player.media, 'seeking');
} else {
player.media.currentTime = targetTime.toFixed(4);
} }
// Logging // Logging
@ -4433,7 +4435,7 @@
}; };
// Set volume // Set volume
Player.prototype.setVolume = function(volume) { Plyr.prototype.setVolume = function(volume) {
var player = this; var player = this;
var max = 10; var max = 10;
var min = 0; var min = 0;
@ -4494,7 +4496,7 @@
}; };
// Increase volume // Increase volume
Player.prototype.increaseVolume = function(step) { Plyr.prototype.increaseVolume = function(step) {
var player = this; var player = this;
var volume = player.media.muted ? 0 : (player.media.volume * 10); var volume = player.media.muted ? 0 : (player.media.volume * 10);
@ -4509,7 +4511,7 @@
}; };
// Decrease volume // Decrease volume
Player.prototype.decreaseVolume = function(step) { Plyr.prototype.decreaseVolume = function(step) {
var player = this; var player = this;
var volume = player.media.muted ? 0 : (player.media.volume * 10); var volume = player.media.muted ? 0 : (player.media.volume * 10);
@ -4524,7 +4526,7 @@
}; };
// Toggle mute // Toggle mute
Player.prototype.toggleMute = function(muted) { Plyr.prototype.toggleMute = function(muted) {
var player = this; var player = this;
// If the method is called without parameter, toggle based on current value // If the method is called without parameter, toggle based on current value
@ -4566,7 +4568,7 @@
}; };
// Set playback speed // Set playback speed
Player.prototype.setSpeed = function(speed) { Plyr.prototype.setSpeed = function(speed) {
var player = this; var player = this;
// Load speed from storage or default value // Load speed from storage or default value
@ -4606,7 +4608,7 @@
// Toggle loop // Toggle loop
// TODO: Finish logic // TODO: Finish logic
// TODO: Set the indicator on load as user may pass loop as config // TODO: Set the indicator on load as user may pass loop as config
Player.prototype.loop = function(type) { Plyr.prototype.loop = function(type) {
var player = this; var player = this;
// Set default to be a true toggle // Set default to be a true toggle
@ -4689,7 +4691,7 @@
}; };
// Add common function to retrieve media source // Add common function to retrieve media source
Player.prototype.source = function(source) { Plyr.prototype.source = function(source) {
var player = this; var player = this;
// If object or string, parse it // If object or string, parse it
@ -4727,7 +4729,7 @@
}; };
// Set or get poster // Set or get poster
Player.prototype.poster = function(source) { Plyr.prototype.poster = function(source) {
var player = this; var player = this;
if (!utils.is.string(source)) { if (!utils.is.string(source)) {
@ -4743,7 +4745,7 @@
}; };
// Toggle captions // Toggle captions
Player.prototype.toggleCaptions = function(show) { Plyr.prototype.toggleCaptions = function(show) {
var player = this; var player = this;
// If there's no full support, or there's no caption toggle // If there's no full support, or there's no caption toggle
@ -4778,7 +4780,7 @@
}; };
// Select active caption // Select active caption
Player.prototype.language = function(language) { Plyr.prototype.language = function(language) {
var player = this; var player = this;
if (utils.is.string(language)) { if (utils.is.string(language)) {
@ -4801,7 +4803,7 @@
// Toggle fullscreen // Toggle fullscreen
// Requires user input event // Requires user input event
Player.prototype.toggleFullscreen = function(event) { Plyr.prototype.toggleFullscreen = function(event) {
var player = this; var player = this;
// Save scroll position // Save scroll position
@ -4873,7 +4875,7 @@
// Toggle picture-in-picture // Toggle picture-in-picture
// TODO: update player with state, support, enabled // TODO: update player with state, support, enabled
// TODO: detect outside changes // TODO: detect outside changes
Player.prototype.togglePictureInPicture = function(toggle) { Plyr.prototype.togglePictureInPicture = function(toggle) {
var player = this; var player = this;
var states = { var states = {
pip: 'picture-in-picture', pip: 'picture-in-picture',
@ -4899,7 +4901,7 @@
// Trigger airplay // Trigger airplay
// TODO: update player with state, support, enabled // TODO: update player with state, support, enabled
Player.prototype.airPlay = function() { Plyr.prototype.airPlay = function() {
var player = this; var player = this;
// Bail if no support // Bail if no support
@ -4915,7 +4917,7 @@
}; };
// Show the player controls in fullscreen mode // Show the player controls in fullscreen mode
Player.prototype.toggleControls = function(toggle) { Plyr.prototype.toggleControls = function(toggle) {
var player = this; var player = this;
// Don't hide if config says not to, it's audio, or not ready or loading // Don't hide if config says not to, it's audio, or not ready or loading
@ -4987,9 +4989,10 @@
}; };
// Event listener // Event listener
Player.prototype.on = function(event, callback) { Plyr.prototype.on = function(event, callback) {
var player = this; var player = this;
// Listen for events on container
utils.on(player.elements.container, event, callback); utils.on(player.elements.container, event, callback);
// Allow chaining // Allow chaining
@ -4997,14 +5000,14 @@
}; };
// Check for support // Check for support
Player.prototype.supports = function(mimeType) { Plyr.prototype.supports = function(mimeType) {
return support.mime(this, mimeType); return support.mime(this, mimeType);
}; };
// Destroy an instance // Destroy an instance
// Event listeners are removed when elements are removed // Event listeners are removed when elements are removed
// http://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory // http://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory
Player.prototype.destroy = function(callback, restore) { Plyr.prototype.destroy = function(callback, restore) {
var player = this; var player = this;
// Type specific stuff // Type specific stuff
@ -5045,7 +5048,7 @@
function done() { function done() {
// Bail if already destroyed // Bail if already destroyed
if (!player.ready) { if (player === null) {
return; return;
} }
@ -5066,9 +5069,6 @@
} }
} }
// Remove ready state
player.ready = false;
// Event // Event
player.core.trigger(player.elements.original, 'destroyed', true); player.core.trigger(player.elements.original, 'destroyed', true);
@ -5076,14 +5076,14 @@
if (utils.is.function(callback)) { if (utils.is.function(callback)) {
callback.call(player.elements.original); callback.call(player.elements.original);
} }
}
// Allow chaining // Allow chaining
return player; player = null;
}
}; };
// Get the duration (or custom if set) // Get the duration (or custom if set)
Player.prototype.getDuration = function() { Plyr.prototype.getDuration = function() {
var player = this; var player = this;
// It should be a number, but parse it just incase // It should be a number, but parse it just incase
@ -5101,5 +5101,5 @@
return (isNaN(duration) ? mediaDuration : duration); return (isNaN(duration) ? mediaDuration : duration);
}; };
return Player; return Plyr;
}); });

2
src/less/variables.less
View File

@ -9,7 +9,7 @@
@plyr-sr-only-important: true; @plyr-sr-only-important: true;
// Colors // Colors
@plyr-color-main: #3498db; @plyr-color-main: #22b5ff;
// Font // Font
@plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif; @plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;