From 26bd4d08334c6a93aeb5fdde0cfe76c7acae56f1 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 2 Mar 2015 20:16:44 +1100 Subject: Fix for fullscreen issues on Firefox Fixes #38 --- src/js/plyr.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/js/plyr.js b/src/js/plyr.js index 034b4d56..67d77e20 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.0.17 +// plyr.js v1.0.19 // https://github.com/sampotts/plyr // ========================================================================== // Credits: http://paypal.github.io/accessible-html5-video-player/ @@ -795,12 +795,12 @@ } // Toggle fullscreen - function _toggleFullscreen() { + function _toggleFullscreen(event) { // Check for native support var nativeSupport = fullscreen.supportsFullScreen; // If it's a fullscreen change event, it's probably a native close - if(event.type === fullscreen.fullScreenEventName) { + if(event && event.type === fullscreen.fullScreenEventName) { config.fullscreen.active = fullscreen.isFullScreen(); } // If there's native support, use it -- cgit v1.2.3 From 722b153fcdf9d36f15c68be8b4407fc913a0560d Mon Sep 17 00:00:00 2001 From: Pascal Borreli Date: Tue, 3 Mar 2015 14:04:27 +0000 Subject: Fixed typos --- src/less/plyr.less | 2 +- src/sass/plyr.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/less/plyr.less b/src/less/plyr.less index 1bce3877..232f9b9c 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -306,7 +306,7 @@ // Volume control // element - // Specificty is for bootstrap compatibility + // Specificity is for bootstrap compatibility &-volume[type=range] { display: inline-block; vertical-align: middle; diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index 998398bb..00e5c459 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -312,7 +312,7 @@ $bp-captions-large: 768px; // When captions jump to the larger font size // Volume control // element - // Specificty is for bootstrap compatibility + // Specificity is for bootstrap compatibility &-volume[type=range] { vertical-align: middle; -webkit-appearance: none; -- cgit v1.2.3 From 4d483bf66c8985ce21b22107653ae0b1a65636c3 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Wed, 4 Mar 2015 08:08:38 +1100 Subject: Bug fixes and improvements --- src/js/plyr.js | 72 +++++++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 66 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/js/plyr.js b/src/js/plyr.js index 67d77e20..e8d852e8 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,7 +1,8 @@ // ========================================================================== // Plyr -// plyr.js v1.0.19 +// plyr.js v1.0.20 // https://github.com/sampotts/plyr +// License: The MIT License (MIT) // ========================================================================== // Credits: http://paypal.github.io/accessible-html5-video-player/ // ========================================================================== @@ -67,7 +68,65 @@ }, storage: { enabled: true - } + }, + html: (function() { + return ["
", + "
", + "", + "0% played", + "", + "", + "0% buffered", + "", + "
", + "", + "", + "", + "", + "", + "", + "", + "Time", + "00:00", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "
"].join("\n"); + })() }; // Debugging @@ -489,11 +548,11 @@ // Setup aria attributes function _setupAria() { - var label = player.buttons.play.innerText; + var label = player.buttons.play.innerText || "Play"; // If there's a media title set, use that for the label if (typeof(config.title) !== "undefined" && config.title.length) { - label = player.buttons.play.innerText + ", " + config.title; + label += ", " + config.title; } player.buttons.play.setAttribute("aria-label", label); @@ -974,8 +1033,9 @@ // Fast forward _on(player.buttons.forward, "click", _forward); - // Get the HTML5 range input element and append audio volume adjustment on change - _on(player.volume, "change", function() { + // Get the HTML5 range input element and append audio volume adjustment on change/input + // IE10 doesn't support the "input" event so they have to wait for change + _on(player.volume, "change input", function() { _setVolume(this.value); }); -- cgit v1.2.3 From 3459387f0437913d462377904971bfc65362dfdc Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Wed, 4 Mar 2015 21:28:25 +1100 Subject: Updated icons to make them more obvious --- src/js/plyr.js | 15 ++++++++------- src/less/plyr.less | 30 ++++++++++++------------------ src/sprite/icon-bubble.svg | 6 ------ src/sprite/icon-captions-off.svg | 10 ++++++++++ src/sprite/icon-captions-on.svg | 13 +++++++++++++ src/sprite/icon-collapse.svg | 13 ------------- src/sprite/icon-enter-fullscreen.svg | 13 +++++++++++++ src/sprite/icon-exit-fullscreen.svg | 13 +++++++++++++ src/sprite/icon-expand.svg | 13 ------------- src/sprite/icon-refresh.svg | 7 ------- src/sprite/icon-restart.svg | 10 ++++++++++ src/sprite/icon-sound.svg | 7 ------- src/sprite/icon-volume.svg | 7 +++++++ 13 files changed, 86 insertions(+), 71 deletions(-) delete mode 100755 src/sprite/icon-bubble.svg create mode 100644 src/sprite/icon-captions-off.svg create mode 100644 src/sprite/icon-captions-on.svg delete mode 100644 src/sprite/icon-collapse.svg create mode 100644 src/sprite/icon-enter-fullscreen.svg create mode 100644 src/sprite/icon-exit-fullscreen.svg delete mode 100644 src/sprite/icon-expand.svg delete mode 100755 src/sprite/icon-refresh.svg create mode 100644 src/sprite/icon-restart.svg delete mode 100755 src/sprite/icon-sound.svg create mode 100755 src/sprite/icon-volume.svg (limited to 'src') diff --git a/src/js/plyr.js b/src/js/plyr.js index e8d852e8..f91985ae 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -81,7 +81,7 @@ "", "", "", "", "", diff --git a/src/less/plyr.less b/src/less/plyr.less index 232f9b9c..9a53715b 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -196,13 +196,13 @@ transition: fill .3s ease; } } - input + label, - input.inverted:checked + label { + [type="checkbox"] + label, + .inverted:checked + label { color: @control-color-inactive; } button, - input.inverted + label, - input:checked + label { + .inverted + label, + [type="checkbox"]:checked + label { color: @control-color; } button { @@ -210,18 +210,19 @@ background: transparent; overflow: hidden; } - input:focus + label, + [type="checkbox"]:focus + label, button:focus { .tab-focus(); color: @control-color-focus; } button:hover, - input + label:hover { + [type="checkbox"] + label:hover { background: @control-bg-hover; color: @control-color-hover; } .icon-exit-fullscreen, - .icon-muted { + .icon-muted, + .icon-captions-on { display: none; } .player-time { @@ -295,15 +296,6 @@ display: inline-block; } - // Muted - &.muted .player-controls .icon-muted { - display: block; - - & + svg { - display: none; - } - } - // Volume control // element // Specificity is for bootstrap compatibility @@ -407,8 +399,10 @@ } } - // When true full screen, show exit fullscreen icon - &.fullscreen-active .icon-exit-fullscreen { + // Change icons on state change + &.fullscreen-active .icon-exit-fullscreen, + &.muted .player-controls .icon-muted, + &.captions-active .player-controls .icon-captions-on { display: block; & + svg { diff --git a/src/sprite/icon-bubble.svg b/src/sprite/icon-bubble.svg deleted file mode 100755 index 0b279b7c..00000000 --- a/src/sprite/icon-bubble.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/src/sprite/icon-captions-off.svg b/src/sprite/icon-captions-off.svg new file mode 100644 index 00000000..56fc708d --- /dev/null +++ b/src/sprite/icon-captions-off.svg @@ -0,0 +1,10 @@ + + + + icon-captions-off + Created with Sketch. + + + + + \ No newline at end of file diff --git a/src/sprite/icon-captions-on.svg b/src/sprite/icon-captions-on.svg new file mode 100644 index 00000000..4e388e41 --- /dev/null +++ b/src/sprite/icon-captions-on.svg @@ -0,0 +1,13 @@ + + + + icon-captions-on + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/src/sprite/icon-collapse.svg b/src/sprite/icon-collapse.svg deleted file mode 100644 index d41e0402..00000000 --- a/src/sprite/icon-collapse.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - collapse - Created with Sketch. - - - - - - - - \ No newline at end of file diff --git a/src/sprite/icon-enter-fullscreen.svg b/src/sprite/icon-enter-fullscreen.svg new file mode 100644 index 00000000..5fd651bd --- /dev/null +++ b/src/sprite/icon-enter-fullscreen.svg @@ -0,0 +1,13 @@ + + + + expand + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/src/sprite/icon-exit-fullscreen.svg b/src/sprite/icon-exit-fullscreen.svg new file mode 100644 index 00000000..d41e0402 --- /dev/null +++ b/src/sprite/icon-exit-fullscreen.svg @@ -0,0 +1,13 @@ + + + + collapse + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/src/sprite/icon-expand.svg b/src/sprite/icon-expand.svg deleted file mode 100644 index 5fd651bd..00000000 --- a/src/sprite/icon-expand.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - expand - Created with Sketch. - - - - - - - - \ No newline at end of file diff --git a/src/sprite/icon-refresh.svg b/src/sprite/icon-refresh.svg deleted file mode 100755 index 10ffb198..00000000 --- a/src/sprite/icon-refresh.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/src/sprite/icon-restart.svg b/src/sprite/icon-restart.svg new file mode 100644 index 00000000..3a18dfad --- /dev/null +++ b/src/sprite/icon-restart.svg @@ -0,0 +1,10 @@ + + + + icon-restart + Created with Sketch. + + + + + \ No newline at end of file diff --git a/src/sprite/icon-sound.svg b/src/sprite/icon-sound.svg deleted file mode 100755 index 6c6ca54d..00000000 --- a/src/sprite/icon-sound.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/src/sprite/icon-volume.svg b/src/sprite/icon-volume.svg new file mode 100755 index 00000000..6c6ca54d --- /dev/null +++ b/src/sprite/icon-volume.svg @@ -0,0 +1,7 @@ + + + + + + + -- cgit v1.2.3 From 617ae146c1487df481fc7a1ff54049958fb81b4b Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Wed, 4 Mar 2015 21:44:41 +1100 Subject: SASS updated for icon changes --- src/sass/plyr.scss | 30 ++++++++++++------------------ 1 file changed, 12 insertions(+), 18 deletions(-) (limited to 'src') diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index 00e5c459..51eae73d 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -202,13 +202,13 @@ $bp-captions-large: 768px; // When captions jump to the larger font size transition: fill .3s ease; } } - input + label, - input.inverted:checked + label { + [type="checkbox"] + label, + .inverted:checked + label { color: $control-color-inactive; } button, - input.inverted + label, - input:checked + label { + .inverted + label, + [type="checkbox"]:checked + label { color: $control-color; } button { @@ -216,18 +216,19 @@ $bp-captions-large: 768px; // When captions jump to the larger font size background: transparent; overflow: hidden; } - input:focus + label, + [type="checkbox"]:focus + label, button:focus { @include tab-focus(); color: $control-color-focus; } button:hover, - input + label:hover { + [type="checkbox"] + label:hover { background: $control-bg-hover; color: $control-color-hover; } .icon-exit-fullscreen, - .icon-muted { + .icon-muted, + .icon-captions-on { display: none; } .player-time { @@ -301,15 +302,6 @@ $bp-captions-large: 768px; // When captions jump to the larger font size display: inline-block; } - // Muted - &.muted .player-controls .icon-muted { - display: block; - - & + svg { - display: none; - } - } - // Volume control // element // Specificity is for bootstrap compatibility @@ -412,8 +404,10 @@ $bp-captions-large: 768px; // When captions jump to the larger font size } } - // When true full screen, show exit fullscreen icon - &.fullscreen-active .icon-exit-fullscreen { + // Change icons on state change + &.fullscreen-active .icon-exit-fullscreen, + &.muted .player-controls .icon-muted, + &.captions-active .player-controls .icon-captions-on { display: block; & + svg { -- cgit v1.2.3 From 93e3f7cdd9f0e52b8c5d293c9caa6eaaadfb2718 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 5 Mar 2015 00:41:42 +1100 Subject: WIP on better seeking --- src/js/plyr.js | 89 ++++++++++++---------------- src/less/plyr.less | 171 ++++++++++++++++++++++++++++++++++++----------------- 2 files changed, 155 insertions(+), 105 deletions(-) (limited to 'src') diff --git a/src/js/plyr.js b/src/js/plyr.js index f91985ae..86144e9d 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -24,6 +24,7 @@ container: ".player", controls: ".player-controls", buttons: { + seek: "[data-player='seek']", play: "[data-player='play']", pause: "[data-player='pause']", restart: "[data-player='restart']", @@ -40,8 +41,7 @@ played: ".player-progress-played" }, captions: ".player-captions", - duration: ".player-duration", - seekTime: ".player-seek-time" + duration: ".player-duration" }, classes: { video: "player-video", @@ -72,6 +72,8 @@ html: (function() { return ["
", "
", + "", + "", "", "0% played", "", @@ -86,7 +88,7 @@ "", "", "", "", "", "Time", @@ -275,33 +277,6 @@ return Math.floor((current / max) * 100); } - // Get click position relative to parent - // http://www.kirupa.com/html5/getting_mouse_click_position.htm - function _getClickPosition(event) { - var parentPosition = _fullscreen().isFullScreen() ? { x: 0, y: 0 } : _getPosition(event.currentTarget); - - return { - x: event.clientX - parentPosition.x, - y: event.clientY - parentPosition.y - }; - } - // Get element position - function _getPosition(element) { - var xPosition = 0; - var yPosition = 0; - - while (element) { - xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft); - yPosition += (element.offsetTop - element.scrollTop + element.clientTop); - element = element.offsetParent; - } - - return { - x: xPosition, - y: yPosition - }; - } - // Deep extend/merge two Objects // http://andrewdupont.net/2009/08/28/deep-extending-objects-in-javascript/ // Removed call to arguments.callee (used explicit function name instead) @@ -509,6 +484,7 @@ // Buttons player.buttons = {}; + player.buttons.seek = _getElement(config.selectors.buttons.seek); player.buttons.play = _getElement(config.selectors.buttons.play); player.buttons.pause = _getElement(config.selectors.buttons.pause); player.buttons.restart = _getElement(config.selectors.buttons.restart); @@ -757,13 +733,6 @@ } } - // Setup seeking - function _setupSeeking() { - // Update number of seconds in rewind and fast forward buttons - player.seekTime[0].innerHTML = config.seekTime; - player.seekTime[1].innerHTML = config.seekTime; - } - // Setup fullscreen function _setupFullscreen() { if(player.type === "video" && config.fullscreen.enabled) { @@ -973,8 +942,21 @@ progress = player.progress.played.bar; text = player.progress.played.text; value = _getPercentage(player.media.currentTime, player.media.duration); + + // Set seeking value + player.buttons.seek.value = value; + break; + // Seeking + case "change": + case "input": + progress = player.progress.played.bar; + text = player.progress.played.text; + value = event.target.value; + break; + + // Check buffer status case "playing": case "progress": @@ -996,6 +978,8 @@ progress.value = value; text.innerHTML = value; } + + //_log(event); } // Update the displayed play time @@ -1066,17 +1050,25 @@ }); } - // Duration - _on(player.media, "timeupdate", _updateTimeDisplay); + // Time change on media + _on(player.media, "timeupdate", function(event) { + // Duration + _updateTimeDisplay(); + // Playing progress + _updateProgress(event); + }); + + // Seek + _on(player.buttons.seek, "change input", function(event) { + // Update progress elements + _updateProgress(event); - // Playing progress - _on(player.media, "timeupdate", _updateProgress); + // Update the text label + _updateTimeDisplay(); + + // Seek to the selected time + player.media.currentTime = ((this.value / this.max) * player.media.duration); - // Skip when clicking progress bar - _on(player.progress.played.bar, "click", function(event) { - player.pos = _getClickPosition(event).x / this.offsetWidth; - player.media.currentTime = player.pos * player.media.duration; - // Special handling for "manual" captions if (!player.isTextTracks && player.type === "video") { _adjustManualCaptions(player); @@ -1154,9 +1146,6 @@ // Setup fullscreen _setupFullscreen(); - // Seeking - _setupSeeking(); - // Listeners _listeners(); } diff --git a/src/less/plyr.less b/src/less/plyr.less index 9a53715b..11bcd701 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -21,7 +21,6 @@ @control-bg-hover: @blue; @control-color: @gray-light; @control-color-inactive: @gray; -@control-color-focus: #fff; @control-color-hover: #fff; // Progress @@ -29,13 +28,13 @@ @progress-playing-bg: @blue; @progress-buffered-bg: @gray; -// Range -@range-track-height: 6px; -@range-track-bg: @gray; -@range-thumb-height: (@range-track-height * 2); -@range-thumb-width: (@range-track-height * 2); -@range-thumb-bg: @control-color; -@range-thumb-bg-focus: @control-bg-hover; +// Volume +@volume-track-height: 6px; +@volume-track-bg: @gray; +@volume-thumb-height: (@volume-track-height * 2); +@volume-thumb-width: (@volume-track-height * 2); +@volume-thumb-bg: @control-color; +@volume-thumb-bg-focus: @control-bg-hover; // Breakpoints @bp-control-split: 560px; // When controls split into left/right @@ -64,25 +63,35 @@ // Tab focus styles .tab-focus() { outline: thin dotted #000; - outline-offset: 1px; + outline-offset: 0; } // Range styling // --------------------------------------- -.range-thumb() { - height: @range-thumb-height; - width: @range-thumb-width; - background: @range-thumb-bg; +.volume-thumb() { + height: @volume-thumb-height; + width: @volume-thumb-width; + background: @volume-thumb-bg; border: 0; - border-radius: (@range-thumb-height / 2); + border-radius: (@volume-thumb-height / 2); transition: background .3s ease; cursor: ew-resize; } -.range-track() { - height: @range-track-height; - background: @range-track-bg; +.volume-track() { + height: @volume-track-height; + background: @volume-track-bg; + border: 0; + border-radius: (@volume-track-height / 2); +} +.seek-thumb() { + background: transparent; + border: 0; + width: 2px; + height: @control-spacing; +} +.seek-track() { + background: none; border: 0; - border-radius: (@range-track-height / 2); } // Font smoothing @@ -210,16 +219,18 @@ background: transparent; overflow: hidden; } - [type="checkbox"]:focus + label, - button:focus { - .tab-focus(); - color: @control-color-focus; - } + + button:focus, button:hover, + [type="checkbox"]:focus + label, [type="checkbox"] + label:hover { background: @control-bg-hover; color: @control-color-hover; } + button:focus, + [type="checkbox"]:focus + label { + outline: 0; + } .icon-exit-fullscreen, .icon-muted, .icon-captions-on { @@ -248,43 +259,93 @@ background: @progress-bg; &-buffer, - &-played { + &-played, + &-seek[type=range] { position: absolute; left: 0; top: 0; width: 100%; - height: 100%; + height: @control-spacing; margin: 0; + padding: 0; vertical-align: top; - - &[value] { - -webkit-appearance: none; - border: none; - background: transparent; - &::-webkit-progress-bar { - background: transparent; - } + -webkit-appearance: none; + -moz-appearance: none; + border: none; + background: transparent; + } + &-buffer, + &-played { + &::-webkit-progress-bar { + background: transparent; + } - // Inherit from currentColor; - &::-webkit-progress-value { - background: currentColor; - } - &::-moz-progress-bar { - background: currentColor; - } + // Inherit from currentColor; + &::-webkit-progress-value { + background: currentColor; + } + &::-moz-progress-bar { + background: currentColor; } } &-played { z-index: 2; } - &-played[value] { - cursor: pointer; + &-played{ color: @progress-playing-bg; } - &-buffer[value] { + &-buffer { color: @progress-buffered-bg; } + + // Seek control + // element + // Specificity is for bootstrap compatibility + &-seek[type=range] { + z-index: 3; + cursor: pointer; + outline: 0; + + // Webkit + &::-webkit-slider-runnable-track { + .seek-track(); + } + &::-webkit-slider-thumb { + -webkit-appearance: none; + .seek-thumb(); + } + + // Mozilla + &::-moz-range-track { + .seek-track(); + } + &::-moz-range-thumb { + -moz-appearance: none; + .seek-thumb(); + } + + // Microsoft + &::-ms-track { + color: transparent; + .seek-track(); + } + &::-ms-fill-lower, + &::-ms-fill-upper { + .seek-track(); + } + &::-ms-thumb { + .seek-thumb(); + } + + &:focus { + //.tab-focus(); + outline: 0; + } + &::-moz-focus-outer { + border: 0; + } + } } // States @@ -312,49 +373,49 @@ // Webkit &::-webkit-slider-runnable-track { - .range-track(); + .volume-track(); } &::-webkit-slider-thumb { -webkit-appearance: none; - margin-top: -((@range-thumb-height - @range-track-height) / 2); - .range-thumb(); + margin-top: -((@volume-thumb-height - @volume-track-height) / 2); + .volume-thumb(); } // Mozilla &::-moz-range-track { - .range-track(); + .volume-track(); } &::-moz-range-thumb { - .range-thumb(); + .volume-thumb(); } // Microsoft &::-ms-track { - height: @range-track-height; + height: @volume-track-height; background: transparent; border-color: transparent; - border-width: ((@range-thumb-height - @range-track-height) / 2) 0; + border-width: ((@volume-thumb-height - @volume-track-height) / 2) 0; color: transparent; } &::-ms-fill-lower, &::-ms-fill-upper { - .range-track(); + .volume-track(); } &::-ms-thumb { - .range-thumb(); + .volume-thumb(); } &:focus { outline: 0; &::-webkit-slider-thumb { - background: @range-thumb-bg-focus; + background: @volume-thumb-bg-focus; } &::-moz-range-thumb { - background: @range-thumb-bg-focus; + background: @volume-thumb-bg-focus; } &::-ms-thumb { - background: @range-thumb-bg-focus; + background: @volume-thumb-bg-focus; } } } -- cgit v1.2.3