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

Seek fixes for touch

Browse Source
This commit is contained in:
Sam Potts
2016-01-25 11:25:32 +11:00
parent b006b73c69
commit a327056789
8 changed files with 54 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/js/plyr.js
View File

@ -2048,7 +2048,7 @@
// Update hover tooltip for seeking
function _updateSeekTooltip(event) {
// Bail if setting not true
if (!config.tooltips.seek) {
if (!config.tooltips.seek || plyr.browser.touch) {
return;
}
@ -2251,11 +2251,11 @@
// Load HTML5 sources
plyr.media.load();
// Display duration if available
_displayDuration();
// Setup interface
_setupInterface();
// Display duration if available
_displayDuration();
}
// Play if autoplay attribute is present

20
src/less/plyr.less
View File

@ -110,8 +110,11 @@
.seek-thumb() {
background: transparent;
border: 0;
width: (@plyr-control-spacing * 4);
width: 1px;
height: @plyr-control-spacing;
}
.seek-thumb-touch() {
width: (@plyr-control-spacing * 4);
transform: translateX(-50%);
}
.seek-track() {
@ -495,6 +498,21 @@
}
}
// Touch seek wider handle
&--is-touch &--seek[type='range'] {
&::-webkit-slider-thumb {
.seek-thumb-touch();
}
// Mozilla
&::-moz-range-thumb {
.seek-thumb-touch();
}
// Microsoft
&::-ms-thumb {
.seek-thumb-touch();
}
}
// Loading state
&--loading .plyr__progress--buffer {
animation: plyr-progress 1s linear infinite;

20
src/sass/plyr.scss
View File

@ -111,8 +111,11 @@ $plyr-bp-captions-large: 768px !default; // When captions jump to the la
@mixin seek-thumb() {
background: transparent;
border: 0;
width: ($plyr-control-spacing * 4);
width: 1px;
height: $plyr-control-spacing;
}
@mixin seek-thumb-touch() {
width: ($plyr-control-spacing * 4);
transform: translateX(-50%);
}
@mixin seek-track() {
@ -496,6 +499,21 @@ $plyr-bp-captions-large: 768px !default; // When captions jump to the la
}
}
// Touch seek wider handle
&--is-touch &--seek[type='range'] {
&::-webkit-slider-thumb {
@include seek-thumb-touch();
}
// Mozilla
&::-moz-range-thumb {
@include seek-thumb-touch();
}
// Microsoft
&::-ms-thumb {
@include seek-thumb-touch();
}
}
// Loading state
&--loading .plyr__progress--buffer {
animation: plyr-progress 1s linear infinite;