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

Fix touch vs click issue

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/dist/demo.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.css vendored
View File

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

2
dist/plyr.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.min.js.map vendored
View File

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': case 'play-large':
attributes.class += ` ${this.config.classNames.control}--overlaid`; attributes.class += ` ${this.config.classNames.control}--overlaid`;
toggle = true;
type = 'play'; type = 'play';
label = 'play'; label = 'play';
labelPressed = 'pause';
icon = 'play'; icon = 'play';
iconPressed = 'pause';
break; break;
default: default:

19
src/js/listeners.js
View File

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

2
src/sass/components/control.scss
View File

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