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

Added tooltip option (Fixes #50)

Browse Source
This commit is contained in:
Sam Potts
2015-03-09 00:47:38 +11:00
parent 5370fc5c83
commit 1532f2ab23
15 changed files with 177 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/js/plyr.js
View File

@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
// plyr.js v1.0.23
// plyr.js v1.0.24
// https://github.com/sampotts/plyr
// License: The MIT License (MIT)
// ==========================================================================
@ -20,9 +20,11 @@
seekTime: 10,
volume: 5,
click: true,
tooltips: false,
selectors: {
container: ".player",
controls: ".player-controls",
labels: "[data-player] .sr-only, label .sr-only",
buttons: {
seek: "[data-player='seek']",
play: "[data-player='play']",
@ -51,6 +53,8 @@
playing: "playing",
muted: "muted",
loading: "loading",
tooltip: "player-tooltip",
hidden: "sr-only",
captions: {
enabled: "captions-enabled",
active: "captions-active"
@ -68,7 +72,8 @@
fallback: true
},
storage: {
enabled: true
enabled: true,
key: "plyr_volume"
},
html: (function() {
return [
@ -90,7 +95,7 @@
"</button>",
"<button type='button' data-player='rewind'>",
"<svg><use xlink:href='#icon-rewind'></use></svg>",
"<span class='sr-only'>Rewind {seektime} seconds</span>",
"<span class='sr-only'>Rewind {seektime} secs</span>",
"</button>",
"<button type='button' data-player='play'>",
"<svg><use xlink:href='#icon-play'></use></svg>",
@ -102,7 +107,7 @@
"</button>",
"<button type='button' data-player='fast-forward'>",
"<svg><use xlink:href='#icon-fast-forward'></use></svg>",
"<span class='sr-only'>Fast forward {seektime} seconds</span>",
"<span class='sr-only'>Forward {seektime} secs</span>",
"</button>",
"<span class='player-time'>",
"<span class='sr-only'>Time</span>",
@ -127,7 +132,7 @@
"<button type='button' data-player='fullscreen'>",
"<svg class='icon-exit-fullscreen'><use xlink:href='#icon-exit-fullscreen'></use></svg>",
"<svg><use xlink:href='#icon-enter-fullscreen'></use></svg>",
"<span class='sr-only'>Toggle fullscreen</span>",
"<span class='sr-only'>Toggle Fullscreen</span>",
"</button>",
"</span>",
"</div>"
@ -553,6 +558,18 @@
// Inject into the container
player.container.insertAdjacentHTML("beforeend", html);
// Setup tooltips
if(config.tooltips) {
var labels = _getElements(config.selectors.labels);
for (var i = labels.length - 1; i >= 0; i--) {
var label = labels[i];
_toggleClass(label, config.classes.hidden, false);
_toggleClass(label, config.classes.tooltip, true);
}
}
}
// Find the UI controls and store references
@ -941,7 +958,7 @@
// Use default if needed
if(typeof volume === "undefined") {
if(config.storage.enabled && _storage().supported) {
volume = window.localStorage.plyr_volume || config.volume;
volume = window.localStorage[config.storage.key] || config.volume;
}
else {
volume = config.volume;

63
src/less/plyr.less
View File

@ -23,6 +23,13 @@
@control-color-inactive: @gray;
@control-color-hover: #fff;
// Tooltips
@tooltip-bg: @controls-bg;
@tooltip-color: #fff;
@tooltip-padding: @control-spacing;
@tooltip-arrow-size: 5px;
@tooltip-radius: 3px;
// Progress
@progress-bg: lighten(@gray, 10%);
@progress-playing-bg: @blue;
@ -119,7 +126,6 @@
position: relative;
max-width: 100%;
min-width: 290px;
overflow: hidden; // For the controls
// border-box everything
// http://paulirish.com/2012/box-sizing-border-box-ftw/
@ -227,10 +233,11 @@
overflow: hidden;
}
// Specificity for overriding .inverted
button:focus,
button:hover,
input:focus + label,
input + label:hover {
[type="checkbox"]:focus + label,
[type="checkbox"] + label:hover {
background: @control-bg-hover;
color: @control-color-hover;
}
@ -254,6 +261,54 @@
}
}
// Tooltips
&-tooltip {
visibility: hidden;
position: absolute;
z-index: 2;
bottom: 100%;
margin-bottom: @tooltip-padding;
padding: @tooltip-padding (@tooltip-padding * 1.5);
opacity: 0;
background: @tooltip-bg;
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));
transition: transform .2s .2s ease, opacity .2s .2s ease;
&::after {
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;
}
}
label:hover .player-tooltip,
input:focus + label .player-tooltip,
button:hover .player-tooltip,
button:focus .player-tooltip {
visibility: visible;
opacity: 1;
transform: translate(-50%, 0);
}
label:hover .player-tooltip,
button:hover .player-tooltip {
z-index: 3;
}
// Player progress
// <progress> element
&-progress {
@ -308,7 +363,7 @@
// <input[type='range']> element
// Specificity is for bootstrap compatibility
&-seek[type=range] {
z-index: 3;
z-index: 4;
cursor: pointer;
outline: 0;

56
src/sass/plyr.scss
View File

@ -23,6 +23,13 @@ $control-color: $gray-light;
$control-color-inactive: $gray;
$control-color-hover: #fff;
// Tooltips
$tooltip-bg: $controls-bg;
$tooltip-color: #fff;
$tooltip-padding: $control-spacing;
$tooltip-arrow-size: 5px;
$tooltip-radius: 3px;
// Progress
$progress-bg: lighten($gray, 10%);
$progress-playing-bg: $blue;
@ -125,7 +132,6 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
position: relative;
max-width: 100%;
min-width: 290px;
overflow: hidden; // For the controls
// border-box everything
// http://paulirish.com/2012/box-sizing-border-box-ftw/
@ -258,6 +264,54 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
}
}
// Tooltips
&-tooltip {
visibility: hidden;
position: absolute;
z-index: 2;
bottom: 100%;
margin-bottom: $tooltip-padding;
padding: $tooltip-padding ($tooltip-padding * 1.5);
opacity: 0;
background: $tooltip-bg;
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));
transition: transform .2s .2s ease, opacity .2s .2s ease;
&::after {
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;
}
}
label:hover .player-tooltip,
input:focus + label .player-tooltip,
button:hover .player-tooltip,
button:focus .player-tooltip {
visibility: visible;
opacity: 1;
transform: translate(-50%, 0);
}
label:hover .player-tooltip,
button:hover .player-tooltip {
z-index: 3;
}
// Player progress
// <progress> element
&-progress {