Fix touch vs click issue

This commit is contained in:
Sam Potts 2018-09-25 20:43:09 +10:00
parent 7dc4d9cd22
commit 62d80e6b76
9 changed files with 30 additions and 30 deletions

2
demo/dist/demo.css vendored

File diff suppressed because one or more lines are too long

2
dist/plyr.css vendored

File diff suppressed because one or more lines are too long

26
dist/plyr.js vendored
View File

@ -1559,9 +1559,12 @@ typeof navigator === "object" && (function (global, factory) {
case 'play-large':
attributes.class += ' ' + this.config.classNames.control + '--overlaid';
toggle = true;
type = 'play';
label = 'play';
labelPressed = 'pause';
icon = 'play';
iconPressed = 'pause';
break;
default:
@ -4514,14 +4517,14 @@ typeof navigator === "object" && (function (global, factory) {
break;
/* case 73:
this.setLoop('start');
break;
case 76:
this.setLoop();
break;
case 79:
this.setLoop('end');
break; */
this.setLoop('start');
break;
case 76:
this.setLoop();
break;
case 79:
this.setLoop('end');
break; */
default:
break;
@ -4767,7 +4770,7 @@ typeof navigator === "object" && (function (global, factory) {
}
// On click play, pause ore restart
on.call(player, elements.container, 'click touchstart', function (event) {
on.call(player, elements.container, 'click', function (event) {
var targets = [elements.container, wrapper];
// Ignore if click if not container or in video wrapper
@ -4775,9 +4778,8 @@ typeof navigator === "object" && (function (global, factory) {
return;
}
// First touch on touch devices will just show controls (if we're hiding controls)
// If controls are shown then it'll toggle like a pointer device
if (player.config.hideControls && player.touch && hasClass(elements.container, player.config.classNames.hideControls)) {
// Touch devices will just show controls (if hidden)
if (player.touch && player.config.hideControls) {
return;
}

2
dist/plyr.js.map vendored

File diff suppressed because one or more lines are too long

2
dist/plyr.min.js vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

3
src/js/controls.js vendored
View File

@ -219,9 +219,12 @@ const controls = {
case 'play-large':
attributes.class += ` ${this.config.classNames.control}--overlaid`;
toggle = true;
type = 'play';
label = 'play';
labelPressed = 'pause';
icon = 'play';
iconPressed = 'pause';
break;
default:

View File

@ -45,7 +45,7 @@ class Listeners {
// Seek by the number keys
const seekByKey = () => {
// Divide the max duration into 10th's and times by the number value
player.currentTime = player.duration / 10 * (code - 48);
player.currentTime = (player.duration / 10) * (code - 48);
};
// Handle the key on keydown
@ -146,7 +146,7 @@ class Listeners {
player.loop = !player.loop;
break;
/* case 73:
/* case 73:
this.setLoop('start');
break;
@ -372,7 +372,7 @@ class Listeners {
}
// On click play, pause ore restart
on.call(player, elements.container, 'click touchstart', event => {
on.call(player, elements.container, 'click', event => {
const targets = [elements.container, wrapper];
// Ignore if click if not container or in video wrapper
@ -380,13 +380,8 @@ class Listeners {
return;
}
// First touch on touch devices will just show controls (if we're hiding controls)
// If controls are shown then it'll toggle like a pointer device
if (
player.config.hideControls &&
player.touch &&
hasClass(elements.container, player.config.classNames.hideControls)
) {
// Touch devices will just show controls (if hidden)
if (player.touch && player.config.hideControls) {
return;
}
@ -596,7 +591,7 @@ class Listeners {
// Set range input alternative "value", which matches the tooltip time (#954)
this.bind(elements.inputs.seek, 'mousedown mousemove', event => {
const rect = elements.progress.getBoundingClientRect();
const percent = 100 / rect.width * (event.pageX - rect.left);
const percent = (100 / rect.width) * (event.pageX - rect.left);
event.currentTarget.setAttribute('seek-value', percent);
});
@ -650,7 +645,7 @@ class Listeners {
seek.removeAttribute('seek-value');
player.currentTime = seekTo / seek.max * player.duration;
player.currentTime = (seekTo / seek.max) * player.duration;
},
'seek',
);

View File

@ -94,7 +94,7 @@
}
}
.plyr--playing .plyr__control--overlaid {
.plyr--hide-controls .plyr__control--overlaid {
opacity: 0;
visibility: hidden;
}