Fix touch vs click issue
This commit is contained in:
parent
7dc4d9cd22
commit
62d80e6b76
2
demo/dist/demo.css
vendored
2
demo/dist/demo.css
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.css
vendored
2
dist/plyr.css
vendored
File diff suppressed because one or more lines are too long
26
dist/plyr.js
vendored
26
dist/plyr.js
vendored
@ -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
2
dist/plyr.js.map
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.min.js
vendored
2
dist/plyr.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.min.js.map
vendored
2
dist/plyr.min.js.map
vendored
File diff suppressed because one or more lines are too long
3
src/js/controls.js
vendored
3
src/js/controls.js
vendored
@ -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:
|
||||
|
@ -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',
|
||||
);
|
||||
|
@ -94,7 +94,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.plyr--playing .plyr__control--overlaid {
|
||||
.plyr--hide-controls .plyr__control--overlaid {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user