WIP on better seeking
This commit is contained in:
Sam Potts
parent
617ae146c1
commit
93e3f7cdd9
@ -22,6 +22,8 @@ This is the default `html` option from `plyr.js`.
|
||||
```javascript
|
||||
["<div class='player-controls'>",
|
||||
"<div class='player-progress'>",
|
||||
"<label for='seek{id}' class='sr-only'>Seek</label>",
|
||||
"<input id='seek{id}' class='player-progress-seek' type='range' min='0' max='100' step='0.5' value='0' data-player='seek'>",
|
||||
"<progress class='player-progress-played' max='100' value='0'>",
|
||||
"<span>0</span>% played",
|
||||
"</progress>",
|
||||
@ -36,7 +38,7 @@ This is the default `html` option from `plyr.js`.
|
||||
"</button>",
|
||||
"<button type='button' data-player='rewind'>",
|
||||
"<svg><use xlink:href='#icon-rewind'></use></svg>",
|
||||
"<span class='sr-only'>Rewind <span class='player-seek-time'>{seektime}</span> seconds</span>",
|
||||
"<span class='sr-only'>Rewind {seektime} seconds</span>",
|
||||
"</button>",
|
||||
"<button type='button' data-player='play'>",
|
||||
"<svg><use xlink:href='#icon-play'></use></svg>",
|
||||
@ -48,7 +50,7 @@ This is the default `html` option from `plyr.js`.
|
||||
"</button>",
|
||||
"<button type='button' data-player='fast-forward'>",
|
||||
"<svg><use xlink:href='#icon-fast-forward'></use></svg>",
|
||||
"<span class='sr-only'>Fast forward <span class='player-seek-time'>{seektime}</span> seconds</span>",
|
||||
"<span class='sr-only'>Fast forward {seektime} seconds</span>",
|
||||
"</button>",
|
||||
"<span class='player-time'>",
|
||||
"<span class='sr-only'>Time</span>",
|
||||
|
||||
2
dist/plyr.css
vendored
2
dist/plyr.css
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.js
vendored
2
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/docs.js
vendored
2
docs/dist/docs.js
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/templates.js
vendored
2
docs/dist/templates.js
vendored
@ -1,2 +1,2 @@
|
||||
var templates = {};
|
||||
templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b(" <div class=\"player-progress\">");t.b("\n" + i);t.b(" <progress class=\"player-progress-played\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% played");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" <progress class=\"player-progress-buffer\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% buffered");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" <span class=\"player-controls-playback\">");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"restart\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-restart\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Restart</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"rewind\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-rewind\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Rewind <span class=\"player-seek-time\">{seektime}</span> seconds</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"play\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-play\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Play</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"pause\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-pause\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Pause</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fast-forward\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-fast-forward\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Fast forward <span class=\"player-seek-time\">{seektime}</span> seconds</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <span class=\"player-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Time</span>");t.b("\n" + i);t.b(" <span class=\"player-duration\">00:00</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"player-controls-sound\">");t.b("\n" + i);t.b(" <input class=\"inverted sr-only\" id=\"mute{id}\" type=\"checkbox\" data-player=\"mute\">");t.b("\n" + i);t.b(" <label id=\"mute{id}\" for=\"mute{id}\">");t.b("\n" + i);t.b(" <svg class=\"icon-muted\"><use xlink:href=\"#icon-muted\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-volume\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Mute</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <label for=\"volume{id}\" class=\"sr-only\">Volume</label>");t.b("\n" + i);t.b(" <input id=\"volume{id}\" class=\"player-volume\" type=\"range\" min=\"0\" max=\"10\" value=\"5\" data-player=\"volume\">");t.b("\n");t.b("\n" + i);t.b(" <input class=\"sr-only\" id=\"captions{id}\" type=\"checkbox\" data-player=\"captions\">");t.b("\n" + i);t.b(" <label for=\"captions{id}\">");t.b("\n" + i);t.b(" <svg class=\"icon-captions-on\"><use xlink:href=\"#icon-captions-on\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-captions-off\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Captions</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fullscreen\">");t.b("\n" + i);t.b(" <svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-exit-fullscreen\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-enter-fullscreen\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle fullscreen</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: { }});
|
||||
templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b(" <div class=\"player-progress\">");t.b("\n" + i);t.b(" <label for=\"seek{id}\" class=\"sr-only\">Seek</label>");t.b("\n" + i);t.b(" <input id=\"seek{id}\" class=\"player-progress-seek\" type=\"range\" min=\"0\" max=\"100\" step=\"0.5\" value=\"0\" data-player=\"seek\">");t.b("\n" + i);t.b(" <progress class=\"player-progress-played\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% played");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" <progress class=\"player-progress-buffer\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% buffered");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" <span class=\"player-controls-playback\">");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"restart\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-restart\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Restart</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"rewind\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-rewind\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Rewind {seektime} seconds</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"play\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-play\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Play</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"pause\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-pause\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Pause</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fast-forward\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-fast-forward\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Fast forward {seektime} seconds</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <span class=\"player-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Time</span>");t.b("\n" + i);t.b(" <span class=\"player-duration\">00:00</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"player-controls-sound\">");t.b("\n" + i);t.b(" <input class=\"inverted sr-only\" id=\"mute{id}\" type=\"checkbox\" data-player=\"mute\">");t.b("\n" + i);t.b(" <label id=\"mute{id}\" for=\"mute{id}\">");t.b("\n" + i);t.b(" <svg class=\"icon-muted\"><use xlink:href=\"#icon-muted\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-volume\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Mute</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <label for=\"volume{id}\" class=\"sr-only\">Volume</label>");t.b("\n" + i);t.b(" <input id=\"volume{id}\" class=\"player-volume\" type=\"range\" min=\"0\" max=\"10\" step=\"0.5\" value=\"0\" data-player=\"volume\">");t.b("\n");t.b("\n" + i);t.b(" <input class=\"sr-only\" id=\"captions{id}\" type=\"checkbox\" data-player=\"captions\">");t.b("\n" + i);t.b(" <label for=\"captions{id}\">");t.b("\n" + i);t.b(" <svg class=\"icon-captions-on\"><use xlink:href=\"#icon-captions-on\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-captions-off\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Captions</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fullscreen\">");t.b("\n" + i);t.b(" <svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-exit-fullscreen\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-enter-fullscreen\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle fullscreen</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: { }});
|
||||
@ -1,5 +1,7 @@
|
||||
<div class="player-controls">
|
||||
<div class="player-progress">
|
||||
<label for="seek{id}" class="sr-only">Seek</label>
|
||||
<input id="seek{id}" class="player-progress-seek" type="range" min="0" max="100" step="0.5" value="0" data-player="seek">
|
||||
<progress class="player-progress-played" max="100" value="0">
|
||||
<span>0</span>% played
|
||||
</progress>
|
||||
@ -14,7 +16,7 @@
|
||||
</button>
|
||||
<button type="button" data-player="rewind">
|
||||
<svg><use xlink:href="#icon-rewind"></use></svg>
|
||||
<span class="sr-only">Rewind <span class="player-seek-time">{seektime}</span> seconds</span>
|
||||
<span class="sr-only">Rewind {seektime} seconds</span>
|
||||
</button>
|
||||
<button type="button" data-player="play">
|
||||
<svg><use xlink:href="#icon-play"></use></svg>
|
||||
@ -26,7 +28,7 @@
|
||||
</button>
|
||||
<button type="button" data-player="fast-forward">
|
||||
<svg><use xlink:href="#icon-fast-forward"></use></svg>
|
||||
<span class="sr-only">Fast forward <span class="player-seek-time">{seektime}</span> seconds</span>
|
||||
<span class="sr-only">Fast forward {seektime} seconds</span>
|
||||
</button>
|
||||
<span class="player-time">
|
||||
<span class="sr-only">Time</span>
|
||||
@ -42,7 +44,7 @@
|
||||
</label>
|
||||
|
||||
<label for="volume{id}" class="sr-only">Volume</label>
|
||||
<input id="volume{id}" class="player-volume" type="range" min="0" max="10" value="5" data-player="volume">
|
||||
<input id="volume{id}" class="player-volume" type="range" min="0" max="10" step="0.5" value="0" data-player="volume">
|
||||
|
||||
<input class="sr-only" id="captions{id}" type="checkbox" data-player="captions">
|
||||
<label for="captions{id}">
|
||||
|
||||
@ -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 ["<div class='player-controls'>",
|
||||
"<div class='player-progress'>",
|
||||
"<label for='seek{id}' class='sr-only'>Seek</label>",
|
||||
"<input id='seek{id}' class='player-progress-seek' type='range' min='0' max='100' step='0.5' value='0' data-player='seek'>",
|
||||
"<progress class='player-progress-played' max='100' value='0'>",
|
||||
"<span>0</span>% played",
|
||||
"</progress>",
|
||||
@ -86,7 +88,7 @@
|
||||
"</button>",
|
||||
"<button type='button' data-player='rewind'>",
|
||||
"<svg><use xlink:href='#icon-rewind'></use></svg>",
|
||||
"<span class='sr-only'>Rewind <span class='player-seek-time'>{seektime}</span> seconds</span>",
|
||||
"<span class='sr-only'>Rewind {seektime} seconds</span>",
|
||||
"</button>",
|
||||
"<button type='button' data-player='play'>",
|
||||
"<svg><use xlink:href='#icon-play'></use></svg>",
|
||||
@ -98,7 +100,7 @@
|
||||
"</button>",
|
||||
"<button type='button' data-player='fast-forward'>",
|
||||
"<svg><use xlink:href='#icon-fast-forward'></use></svg>",
|
||||
"<span class='sr-only'>Fast forward <span class='player-seek-time'>{seektime}</span> seconds</span>",
|
||||
"<span class='sr-only'>Fast forward {seektime} seconds</span>",
|
||||
"</button>",
|
||||
"<span class='player-time'>",
|
||||
"<span class='sr-only'>Time</span>",
|
||||
@ -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);
|
||||
});
|
||||
|
||||
// Playing progress
|
||||
_on(player.media, "timeupdate", _updateProgress);
|
||||
// Seek
|
||||
_on(player.buttons.seek, "change input", function(event) {
|
||||
// Update progress elements
|
||||
_updateProgress(event);
|
||||
|
||||
// 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();
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
&-buffer,
|
||||
&-played {
|
||||
&::-webkit-progress-bar {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-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
|
||||
// <input[type='range']> 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user