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

Loading state handling

Browse Source 
Fixes #36
This commit is contained in:
Sam Potts
2015-03-08 01:24:23 +11:00
parent 8482a1a320
commit 5370fc5c83
10 changed files with 103 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/js/plyr.js
View File

@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
// plyr.js v1.0.22
// plyr.js v1.0.23
// https://github.com/sampotts/plyr
// License: The MIT License (MIT)
// ==========================================================================
@ -50,6 +50,7 @@
stopped: "stopped",
playing: "playing",
muted: "muted",
loading: "loading",
captions: {
enabled: "captions-enabled",
active: "captions-active"
@ -626,7 +627,7 @@
player.media.removeAttribute("controls");
// Set media type
player.type = (player.media.tagName.toLowerCase() == "video" ? "video" : "audio");
player.type = (player.media.tagName == "VIDEO" ? "video" : "audio");
// Add type class
_toggleClass(player.container, config.classes[player.type], true);
@ -994,6 +995,19 @@
_toggleClass(player.container, config.classes.muted, (player.media.volume === 0 || player.media.muted));
}
// Check if media is loading
function _checkLoading(event) {
var loading = (event.type === "waiting");
// Clear timer
clearTimeout(player.loadingTimer);
// Timer to prevent flicker when seeking
player.loadingTimer = setTimeout(function() {
_toggleClass(player.container, config.classes.loading, loading);
}, (loading ? 250 : 0));
}
// Update <progress> elements
function _updateProgress(event) {
var progress = player.progress.played.bar,
@ -1232,6 +1246,9 @@
// Handle native play/pause
_on(player.media, "play pause", _checkPlaying);
// Loading
_on(player.media, "waiting canplay seeked", _checkLoading);
}
function _init() {
@ -1321,6 +1338,13 @@
// Get the current element
var element = elements[i];
// Disabled for <video> for iPhone
// Since it doesn't allow customisation
if (element.querySelectorAll("audio, video")[0].tagName === "VIDEO"
&& /iPhone/i.test(navigator.userAgent)) {
continue;
}
// Setup a player instance and add to the element
if(typeof element.plyr === "undefined") {
element.plyr = new Plyr(element);

29
src/less/plyr.less
View File

@ -27,6 +27,8 @@
@progress-bg: lighten(@gray, 10%);
@progress-playing-bg: @blue;
@progress-buffered-bg: @gray;
@progress-loading-size: 40px;
@progress-loading-bg: rgba(0,0,0, .15);
// Volume
@volume-track-height: 6px;
@ -59,13 +61,18 @@
&:after { content: ""; display: table; }
&:after { clear: both; }
}
// Tab focus styles
.tab-focus() {
outline: thin dotted #000;
outline-offset: 0;
}
// Animation
// ---------------------------------------
@keyframes progress {
to { background-position: @progress-loading-size 0; }
}
// <input type="range"> styling
// ---------------------------------------
.volume-thumb() {
@ -86,7 +93,7 @@
.seek-thumb() {
background: transparent;
border: 0;
width: 2px;
width: (@control-spacing * 2);
height: @control-spacing;
}
.seek-track() {
@ -345,6 +352,24 @@
}
}
// Loading state
&.loading .player-progress-buffer {
animation: progress 1s linear infinite;
background-size: @progress-loading-size @progress-loading-size;
background-repeat: repeat-x;
background-color: @progress-buffered-bg;
background-image: linear-gradient(
-45deg,
@progress-loading-bg 25%,
transparent 25%,
transparent 50%,
@progress-loading-bg 50%,
@progress-loading-bg 75%,
transparent 75%,
transparent);
color: transparent;
}
// States
&-controls [data-player='pause'],
&.playing .player-controls [data-player='play'] {

30
src/sass/plyr.scss
View File

@ -21,13 +21,14 @@ $controls-bg: $gray-dark;
$control-bg-hover: $blue;
$control-color: $gray-light;
$control-color-inactive: $gray;
$control-color-focus: #fff;
$control-color-hover: #fff;
// Progress
$progress-bg: lighten($gray, 10%);
$progress-playing-bg: $blue;
$progress-buffered-bg: $gray;
$progress-loading-size: 40px;
$progress-loading-bg: rgba(0,0,0, .15);
// Range
$volume-track-height: 6px;
@ -61,7 +62,6 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
&:after { content: ""; display: table; }
&:after { clear: both; }
}
// Tab focus styles
@mixin tab-focus()
{
@ -69,6 +69,12 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
outline-offset: 0;
}
// Animation
// ---------------------------------------
@keyframes progress {
to { background-position: @progress-loading-size 0; }
}
// <input type="range"> styling
// ---------------------------------------
@mixin volume-thumb()
@ -91,7 +97,7 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
@mixin seek-thumb() {
background: transparent;
border: 0;
width: 2px;
width: ($control-spacing * 2);
height: $control-spacing;
}
@mixin seek-track() {
@ -350,6 +356,24 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
}
}
// Loading state
&.loading .player-progress-buffer {
animation: progress 1s linear infinite;
background-size: $progress-loading-size $progress-loading-size;
background-repeat: repeat-x;
background-color: $progress-buffered-bg;
background-image: linear-gradient(
-45deg,
$progress-loading-bg 25%,
transparent 25%,
transparent 50%,
$progress-loading-bg 50%,
$progress-loading-bg 75%,
transparent 75%,
transparent);
color: transparent;
}
// States
&-controls [data-player='pause'],
&.playing .player-controls [data-player='play'] {