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

Work on touch controls

Browse Source
This commit is contained in:
Sam Potts
2017-11-22 00:04:11 +11:00
parent 4b82e89845
commit 7382553a78
12 changed files with 52 additions and 47 deletions
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

4
demo/index.html
View File

@ -85,7 +85,7 @@
<video controls crossorigin playsinline poster="media/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player">
<!-- Video files -->
<source src="media/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
<source src="media/View_From_A_Blue_Moon_Trailer-UHD.mp4" type="video/mp4">
<!--<source src="media/View_From_A_Blue_Moon_Trailer-UHD.mp4" type="video/mp4">-->
<!-- Text track file -->
<track kind="captions" label="English" srclang="en" src="media/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>
@ -152,7 +152,7 @@
c-0.5,0-1-0.2-1.5-0.4c0,0,0,0,0,0c0,1.6,1.1,2.9,2.6,3.2C3,9.4,2.7,9.4,2.4,9.4c-0.2,0-0.4,0-0.6-0.1c0.4,1.3,1.6,2.3,3.1,2.3
c-1.1,0.9-2.5,1.4-4.1,1.4c-0.3,0-0.5,0-0.8,0c1.5,0.9,3.2,1.5,5,1.5c6,0,9.3-5,9.3-9.3c0-0.1,0-0.3,0-0.4C15,4.3,15.6,3.7,16,3z"></path>
</svg>
<p>If you think others would like Plyr,
<p>If you think Plyr's good,
<a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts"
target="_blank" data-shr-network="twitter">tweet it</a>
</p>

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.js.map vendored
View File

File diff suppressed because one or more lines are too long

32
src/js/listeners.js
View File

@ -24,7 +24,12 @@ const listeners = {
const handleKey = event => {
const code = getKeyCode(event);
const pressed = event.type === 'keydown';
const held = pressed && code === last;
const repeat = pressed && code === last;
// Bail if a modifier key is set
if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
return;
}
// If the event is bubbled from the media element
// Firefox doesn't get the keycode for whatever reason
@ -92,7 +97,7 @@ const listeners = {
case 56:
case 57:
// 0-9
if (!held) {
if (!repeat) {
seekByKey();
}
break;
@ -100,7 +105,7 @@ const listeners = {
case 32:
case 75:
// Space and K key
if (!held) {
if (!repeat) {
this.togglePlay();
}
break;
@ -117,7 +122,7 @@ const listeners = {
case 77:
// M key
if (!held) {
if (!repeat) {
this.muted = !this.muted;
}
break;
@ -139,7 +144,7 @@ const listeners = {
case 67:
// C key
if (!held) {
if (!repeat) {
this.toggleCaptions();
}
break;
@ -209,7 +214,7 @@ const listeners = {
// Toggle controls on mouse events and entering fullscreen
utils.on(
this.elements.container,
'click mouseenter mouseleave mousemove touchmove enterfullscreen exitfullscreen',
'mouseenter mouseleave mousemove touchstart touchend touchmove enterfullscreen exitfullscreen',
event => {
this.toggleControls(event);
}
@ -269,13 +274,10 @@ const listeners = {
const wrapper = utils.getElement.call(this, `.${this.config.classNames.video}`);
// Bail if there's no wrapper (this should never happen)
if (!wrapper) {
if (!utils.is.htmlElement(wrapper)) {
return;
}
// Set cursor
wrapper.style.cursor = 'pointer';
// On click play, pause ore restart
utils.on(wrapper, 'click', () => {
// Touch devices will just show controls (if we're hiding controls)
@ -527,15 +529,9 @@ const listeners = {
});
// Focus in/out on controls
// TODO: Check we need capture here
utils.on(
this.elements.controls,
'focusin focusout',
event => {
utils.on(this.elements.controls, 'focusin focusout', event => {
this.toggleControls(event);
},
true
);
});
}
// Mouse wheel for volume

30
src/js/plyr.js
View File

@ -290,7 +290,7 @@ class Plyr {
* Get playing state
*/
get playing() {
return !this.paused && !this.ended && (this.isHTML5 ? this.media.readyState > 2: true);
return !this.paused && !this.ended && (this.isHTML5 ? this.media.readyState > 2 : true);
}
/**
@ -912,8 +912,8 @@ class Plyr {
return this;
}
// Don't hide if config says not to, it's audio, or not ready or loading
if (!this.supported.ui || !this.config.hideControls || this.type === 'audio') {
// Don't hide if no UI support or it's audio
if (!this.supported.ui || this.type === 'audio') {
return this;
}
@ -928,10 +928,10 @@ class Plyr {
isEnterFullscreen = toggle.type === 'enterfullscreen';
// Whether to show controls
show = ['click', 'mousemove', 'touchmove', 'mouseenter', 'focusin'].includes(toggle.type);
show = ['mouseenter', 'mousemove', 'touchstart', 'touchmove', 'focusin'].includes(toggle.type);
// Delay hiding on move events
if (['mousemove', 'touchmove'].includes(toggle.type)) {
if (['mousemove', 'touchmove', 'touchend'].includes(toggle.type)) {
delay = 2000;
}
@ -945,11 +945,11 @@ class Plyr {
}
}
// Clear timer every movement
window.clearTimeout(this.timers.hover);
// Clear timer on every call
window.clearTimeout(this.timers.controls);
// If the mouse is not over the controls, set a timeout to hide them
if (show || this.media.paused || this.loading) {
if (show || this.paused || this.loading) {
// Check if controls toggled
const toggled = utils.toggleClass(this.elements.container, this.config.classNames.hideControls, false);
@ -959,7 +959,7 @@ class Plyr {
}
// Always show controls when paused or if touch
if (this.media.paused || this.loading) {
if (this.paused || this.loading) {
return this;
}
@ -971,8 +971,16 @@ class Plyr {
// If toggle is false or if we're playing (regardless of toggle),
// then set the timer to hide the controls
if (!show || !this.media.paused) {
this.timers.hover = window.setTimeout(() => {
if (!show || this.playing) {
this.timers.controls = window.setTimeout(() => {
console.warn({
pressed: this.elements.controls.pressed,
hover: this.elements.controls.pressed,
playing: this.playing,
paused: this.paused,
loading: this.loading,
});
// If the mouse is over the controls (and not entering fullscreen), bail
if ((this.elements.controls.pressed || this.elements.controls.hover) && !isEnterFullscreen) {
return;

4
src/js/ui.js
View File

@ -143,7 +143,7 @@ const ui = {
utils.toggleClass(this.elements.container, this.config.classNames.stopped, this.paused);
// Set aria state
if (utils.is.array(this.elements.buttons.play)) {
if (utils.is.nodeList(this.elements.buttons.play)) {
Array.from(this.elements.buttons.play).forEach(button => utils.toggleState(button, this.playing));
}
@ -179,7 +179,7 @@ const ui = {
ui.setRange.call(this, this.elements.inputs.volume, this.muted ? 0 : this.volume);
}
// Update checkbox for mute state
// Update mute state
if (utils.is.htmlElement(this.elements.buttons.mute)) {
utils.toggleState(this.elements.buttons.mute, this.muted || this.volume === 0);
}

3
src/js/utils.js
View File

@ -559,7 +559,8 @@ const utils = {
}
// Get state
const state = utils.is.boolean(input) ? input : !element.getAttribute('aria-pressed');
const pressed = element.getAttribute('aria-pressed') === 'true';
const state = utils.is.boolean(input) ? input : !pressed;
// Set the attribute on target
element.setAttribute('aria-pressed', state);

8
src/less/components/buttons.less
View File

@ -33,9 +33,9 @@
// Change icons on state change
.plyr__control[aria-pressed='false'] .icon--pressed,
.plyr__control[aria-pressed='true'] .icon--not-pressed,
.plyr__control[aria-pressed='false'] .label--pressed,
.plyr__control[aria-pressed='true'] .label--not-pressed {
.plyr__control[aria-pressed='true'] .icon--not-pressed,
.plyr__control[aria-pressed='false'] .label--pressed,
.plyr__control[aria-pressed='true'] .label--not-pressed {
display: none;
}
@ -53,7 +53,7 @@
.plyr__control--overlaid {
display: none;
position: absolute;
z-index: 3;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

2
src/less/components/captions.less
View File

@ -26,7 +26,7 @@
background: @plyr-captions-bg;
box-decoration-break: clone;
line-height: 185%;
white-space: pre;
white-space: pre-wrap;
// Firefox adds a <div> when using getCueAsHTML()
div {

6
src/less/components/volume.less
View File

@ -13,11 +13,11 @@
@media (min-width: @plyr-bp-screen-sm) {
display: block;
max-width: 60px;
max-width: 50px;
}
@media (min-width: @plyr-bp-screen-md) {
max-width: 100px;
max-width: 80px;
}
}
@ -25,6 +25,6 @@
// It's not supported to change volume using JavaScript:
// https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
.plyr--is-ios .plyr__volume,
.plyr--is-ios [data-plyr='mute'] {
.plyr--is-ios [data-plyr='mute'] {
display: none !important;
}