Skip to content

Commit

Permalink
Merge pull request #20 from amowu/feature/progress-bar-hover-effect
Browse files Browse the repository at this point in the history 
feat: add hover effect for progress bar
  • Loading branch information
@amowu
amowu authored Nov 7, 2016
2 parents f4f752d + 98f861b commit 6dc216e
Show file tree
Hide file tree
Showing 6 changed files with 185 additions and 87 deletions.
2 changes: 1 addition & 1 deletion dist/plyr.css
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/plyr.js
View file

Large diffs are not rendered by default.

112 changes: 81 additions & 31 deletions src/js/plyr.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -942,6 +942,7 @@
'<ul>'
);

// Captions menu button
if (_inArray(config.controls, 'captions')) {
html.push(
'<li role="tab">',
Expand All @@ -951,6 +952,7 @@
);
}

// Speeds menu button
if (_inArray(config.controls, 'speed')) {
html.push(
'<li role="tab">',
Expand All @@ -960,6 +962,7 @@
);
}

// Qualities menu button
if (_inArray(config.controls, 'quality')) {
html.push(
'<li role="tab">',
Expand All @@ -971,40 +974,23 @@

html.push(
'</ul>',
'</div>', // End of .plyr__menu__primary
'</div>' // End of .plyr__menu__primary
);

// Captions menu item
html.push(
'<div class="plyr__menu__secondary" id="plyr-settings-{id}-captions" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-captions-toggle" role="tabpanel" tabindex="-1">',
'<ul>',
'<li role="tab">',
'<button type="button" class="plyr__menu__btn plyr__menu__btn--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">', config.i18n.captions,
'</button>',
'</li>'
);

var tracks = plyr.media.textTracks;
for (var i = 0; i < tracks.length; i++) {
html.push(
'<li>',
'<button type="button" class="',
(((plyr.storage.captionsEnabled === true || plyr.storage.captionsEnabled === undefined) && i === 0) ? 'plyr__menu__btn--active' : ''),
'" data-plyr="caption" data-plyr-caption="' + i + '">' + tracks[i].label,
'</button>',
'</li>'
);
}

html.push(
'<li>',
'<button type="button" class="',
((plyr.storage.captionsEnabled === false) ?
'plyr__menu__btn--active' : ''),
'" data-plyr="caption" data-plyr-caption="false">',
config.i18n.disableCaptions,
'</button>',
'</li>',
'</ul>',
'</div>', // End of .plyr__menu__secondary
'</div>' // End of .plyr__menu__secondary
);

// Speeds menu item
html.push(
'<div class="plyr__menu__secondary" id="plyr-settings-{id}-speed" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-speed-toggle" role="tabpanel" tabindex="-1">',
'<ul>',
'<li role="tab">',
Expand All @@ -1014,6 +1000,7 @@
'</li>'
);

// Inject speeds menu item
config.speeds.forEach(function(speed) {
html.push(
'<li>',
Expand All @@ -1025,10 +1012,14 @@
);
});

// Close menu button
html.push(
'</ul>',
'</div>', // End of .plyr__menu__secondary
'</div>' // End of .plyr__menu__secondary
);

// Qualities menu item
html.push(
'<div class="plyr__menu__secondary" id="plyr-settings-{id}-quality" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-quality-toggle" role="tabpanel" tabindex="-1">',
'<ul>',
'<li role="tab">',
Expand Down Expand Up @@ -1563,13 +1554,14 @@
if (_inArray(config.controls, 'captions')) {
var captionMenuButton = getMenuButton('captions');
plyr.currentCaptionLabel = new DataBind(captionMenuButton, 'textContent', config.i18n.disableCaptions);
// Inject caption menu item
_buildCaptionControl();
}

// Binding quality value for menu
if (_inArray(config.controls, 'quality')) {
var qualityMenuButton = getMenuButton('quality');
plyr.currentQualityLabel = new DataBind(qualityMenuButton, 'textContent', _getCurrentQuality());

// Inject quality menu item
_buildQualityControl();
}
Expand Down Expand Up @@ -2592,7 +2584,7 @@
// Toggle captions
function _toggleCaptions(show) {
// If there's no full support, or there's no caption toggle
if (!plyr.supported.full || !plyr.buttons.captions) {
if (!plyr.supported.full || !_inArray(config.controls, 'captions')) {
return;
}

Expand Down Expand Up @@ -2953,6 +2945,10 @@
sources = Array.prototype.slice.call(_getElements('source')),
tracks = Array.prototype.slice.call(_getElements('track'));

if (_inArray(config.controls, 'quality') === false) {
return;
}

// Pause current playback
if (isPlaying) {
_pause();
Expand Down Expand Up @@ -3117,19 +3113,73 @@
return sources;
}

// Build caption menu items
function _buildCaptionControl() {
var i,
buttons = _getElements('li > button[data-plyr=captions]');

// Remove exist captions menu items
for (i=0; i<buttons.length; i++) {
buttons[i].parentNode.remove();
}

// Build HTML
var query = '#plyr-settings-' + plyr.controlsId + '-captions > ul',
ul = _getElement(query),
html = [];

var tracks = plyr.media.textTracks,
j;
for (j = 0; j < tracks.length; j++) {
var hasCaption = ((plyr.storage.captionsEnabled === true || plyr.storage.captionsEnabled === undefined) && j === 0);
html.push(
'<li>',
'<button type="button" class="',
(hasCaption ? 'plyr__menu__btn--active' : ''),
'" data-plyr="captions" data-plyr-captions="' + j + '">' + tracks[j].label,
'</button>',
'</li>'
);
// Update menu button text
if (hasCaption) {
plyr.currentCaptionLabel.change(tracks[j].label);
}
}

html.push(
'<li>',
'<button type="button" class="',
((plyr.storage.captionsEnabled === false) ?
'plyr__menu__btn--active' : ''),
'" data-plyr="captions" data-plyr-captions="false">',
config.i18n.disableCaptions,
'</button>',
'</li>'
);

// To string
html = html.join('');

// Inser HTML
ul.insertAdjacentHTML('beforeend', html);
}

// Build quality menu items
function _buildQualityControl() {
var HD_RESOLUTION = 720,
// Remove exist quality menu items
i,
buttons = _getElements('li > button[data-plyr=quality]');

// Remove exist quality menu items
for (i=0; i<buttons.length; i++) {
buttons[i].parentNode.remove();
}

// Build HTML
var query = '#plyr-settings-' + plyr.controlsId + '-quality > ul',
ul = _getElement(query),
html = [];

Array.prototype.slice.call(_getElements('source'))
// ex: [{ label: '720p', res: 720 }, { label: '1080p', res: 1080 }, ...]
.map(function(source) {
Expand Down Expand Up @@ -3260,6 +3310,7 @@
// If not null or undefined, parse it
if (!_is.undefined(source)) {
_updateSource(source);
_buildCaptionControl();
_buildQualityControl();
return;
}
Expand Down Expand Up @@ -3693,7 +3744,7 @@
// Handle menu item
if (!_is.htmlElement(target)) {
var settingsObj = {
'data-plyr-caption': _toggleCaptionIndex,
'data-plyr-captions': _toggleCaptionIndex,
'data-plyr-speed': _speed,
'data-plyr-quality': _setQuality
};
Expand Down Expand Up @@ -4081,7 +4132,6 @@
plyr.init = true;

// Switch video quality

var quality = _findInQuality(plyr.storage.quality);
if (quality) {
_setQuality(quality);
Expand Down
29 changes: 29 additions & 0 deletions src/less/mixins.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,4 +26,33 @@
background: @plyr-range-thumb-active-bg;
border-color: @plyr-range-thumb-active-border-color;
transform: scale(@plyr-range-thumb-active-scale);
}
.plyr-progress-range-track() {
transform: scaleY(unit(@plyr-progress-range-track-height/@plyr-progress-range-track-hover-height));
transition: transform .1s ease;

&::-webkit-progress-value {
min-width: @plyr-progress-range-track-height;
transition: transform .1s ease;
}
&::-moz-progress-bar {
min-width: @plyr-progress-range-track-height;
transition: transform .1s ease;
}
}
.plyr-progress-range-track-hover() {
.plyr__progress--buffer,
.plyr__progress--played {
transform: none;

&::-webkit-progress-value {
min-width: @plyr-progress-range-track-hover-height;
}
&::-moz-progress-bar {
min-width: @plyr-progress-range-track-hover-height;
}
}
.plyr__progress--buffer {
opacity: @plyr-progress-range-track-hover-height;
}
}
17 changes: 16 additions & 1 deletion src/less/plyr.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -785,7 +785,16 @@
}
}
.plyr .plyr__progress {
display: inline-block;
display: flex;
flex-direction: column;
justify-content: center;
height: @plyr-progress-range-track-hover-height;
margin-bottom: @plyr-control-padding;

// Hoverd styles
&:hover {
.plyr-progress-range-track-hover();
}
}

.plyr__progress--buffer,
Expand Down Expand Up @@ -845,7 +854,13 @@
display: none;
}
}
.plyr__progress--buffer,
.plyr__progress--played {
.plyr-progress-range-track();
}
.plyr__progress--buffer {
opacity: @plyr-progress-range-track-opacity;

&::-webkit-progress-value {
transition: width .2s ease;
}
Expand Down
Loading

0 comments on commit 6dc216e

Please sign in to comment.