Browse Source

Zoom: hide video controls

master
Eduard Kuzmenko 3 years ago
parent
commit
5ed1160eb1
  1. 15
      src/components/appMediaViewer.ts
  2. 2
      src/components/swipeHandler.ts
  3. 104
      src/lib/mediaPlayer.ts
  4. 13
      src/scss/partials/_ckin.scss
  5. 6
      src/scss/partials/_mediaViewer.scss

15
src/components/appMediaViewer.ts

@ -335,6 +335,10 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
const zoomValue = enable ? ZOOM_INITIAL_VALUE + ZOOM_STEP : 1; const zoomValue = enable ? ZOOM_INITIAL_VALUE + ZOOM_STEP : 1;
this.setZoomValue(zoomValue); this.setZoomValue(zoomValue);
if(this.videoPlayer) {
this.videoPlayer.lockControls(enable ? false : undefined);
}
if(enable) { if(enable) {
if(!this.zoomSwipeHandler) { if(!this.zoomSwipeHandler) {
let lastDiffX: number, lastDiffY: number; let lastDiffX: number, lastDiffY: number;
@ -512,6 +516,10 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
}; };
private onKeyUp = (e: KeyboardEvent) => { private onKeyUp = (e: KeyboardEvent) => {
if(rootScope.overlaysActive > 1) {
return;
}
if(!(e.ctrlKey || e.metaKey)) { if(!(e.ctrlKey || e.metaKey)) {
this.ctrlKeyDown = false; this.ctrlKeyDown = false;
@ -522,6 +530,10 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
}; };
private onWheel = (e: WheelEvent) => { private onWheel = (e: WheelEvent) => {
if(rootScope.overlaysActive > 1) {
return;
}
cancelEvent(e); cancelEvent(e);
if(this.ctrlKeyDown) { if(this.ctrlKeyDown) {
@ -1359,6 +1371,9 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
this.wholeDiv.classList.toggle('has-video-controls', show); this.wholeDiv.classList.toggle('has-video-controls', show);
}); });
this.videoPlayer = player; this.videoPlayer = player;
if(this.isZooming()) {
this.videoPlayer.lockControls(false);
}
/* div.append(video); /* div.append(video);
mover.append(player.wrapper); */ mover.append(player.wrapper); */
}); });

2
src/components/swipeHandler.ts

@ -117,7 +117,7 @@ export default class SwipeHandler {
this.hadMove = true; this.hadMove = true;
if(!isTouchSupported) { if(!isTouchSupported) {
this.element.style.cursor = this.cursor; this.element.style.setProperty('cursor', this.cursor, 'important');
} }
if(this.onFirstSwipe) { if(this.onFirstSwipe) {

104
src/lib/mediaPlayer.ts

@ -179,6 +179,10 @@ export default class VideoPlayer extends EventListenerBase<{
private listenerSetter: ListenerSetter; private listenerSetter: ListenerSetter;
private showControlsTimeout = 0;
private controlsLocked: boolean;
/* private videoParent: HTMLElement; /* private videoParent: HTMLElement;
private videoWhichChild: number; */ private videoWhichChild: number; */
@ -315,46 +319,9 @@ export default class VideoPlayer extends EventListenerBase<{
} }
}); });
const hideControls = () => {
clearTimeout(showControlsTimeout);
showControlsTimeout = 0;
if(this.video.paused || !player.classList.contains('show-controls')) {
return;
}
this.dispatchEvent('toggleControls', false);
player.classList.remove('show-controls');
};
let showControlsTimeout = 0;
const showControls = (setHideTimeout = true) => {
if(showControlsTimeout) {
clearTimeout(showControlsTimeout);
showControlsTimeout = 0;
} else if(!player.classList.contains('show-controls')) {
this.dispatchEvent('toggleControls', true);
player.classList.add('show-controls');
}
if(!setHideTimeout) {
return;
}
showControlsTimeout = window.setTimeout(hideControls, 3e3);
};
const toggleControls = () => {
if(player.classList.contains('show-controls')) {
hideControls();
} else {
showControls();
}
};
if(isTouchSupported) { if(isTouchSupported) {
this.listenerSetter.add(player)('click', () => { this.listenerSetter.add(player)('click', () => {
toggleControls(); this.toggleControls();
}); });
/* this.listenerSetter.add(player)('touchstart', () => { /* this.listenerSetter.add(player)('touchstart', () => {
@ -368,20 +335,20 @@ export default class VideoPlayer extends EventListenerBase<{
}); */ }); */
} else { } else {
this.listenerSetter.add(this.wrapper)('mousemove', () => { this.listenerSetter.add(this.wrapper)('mousemove', () => {
showControls(); this.showControls();
}); });
this.listenerSetter.add(this.wrapper)('mouseenter', () => { this.listenerSetter.add(this.wrapper)('mouseenter', () => {
showControls(false); this.showControls(false);
}); });
this.listenerSetter.add(this.wrapper)('mouseleave', (e) => { this.listenerSetter.add(this.wrapper)('mouseleave', (e) => {
if(findUpClassName(e.relatedTarget, 'media-viewer-caption')) { if(findUpClassName(e.relatedTarget, 'media-viewer-caption')) {
showControls(false); this.showControls(false);
return; return;
} }
hideControls(); this.hideControls();
}); });
this.listenerSetter.add(document)('keydown', (e: KeyboardEvent) => { this.listenerSetter.add(document)('keydown', (e: KeyboardEvent) => {
@ -445,7 +412,7 @@ export default class VideoPlayer extends EventListenerBase<{
}, {once: true}); }, {once: true});
this.listenerSetter.add(video)('pause', () => { this.listenerSetter.add(video)('pause', () => {
showControls(false); this.showControls(false);
}); });
} }
@ -466,6 +433,57 @@ export default class VideoPlayer extends EventListenerBase<{
} }
} }
public hideControls = () => {
clearTimeout(this.showControlsTimeout);
this.showControlsTimeout = 0;
const isShown = this.wrapper.classList.contains('show-controls');
if(this.controlsLocked !== false) {
if(this.video.paused || !isShown || this.controlsLocked) {
return;
}
} else if(!isShown) {
return;
}
this.dispatchEvent('toggleControls', false);
this.wrapper.classList.remove('show-controls');
};
public showControls = (setHideTimeout = true) => {
if(this.showControlsTimeout) {
clearTimeout(this.showControlsTimeout);
this.showControlsTimeout = 0;
} else if(!this.wrapper.classList.contains('show-controls') && this.controlsLocked !== false) {
this.dispatchEvent('toggleControls', true);
this.wrapper.classList.add('show-controls');
}
if(!setHideTimeout || this.controlsLocked) {
return;
}
this.showControlsTimeout = window.setTimeout(this.hideControls, 3e3);
};
public toggleControls = (show?: boolean) => {
const isShown = this.wrapper.classList.contains('show-controls');
if(show === undefined) {
if(isShown) this.hideControls();
else this.showControls();
} else if(show === isShown) return;
else if(show === false) this.hideControls();
else this.showControls();
};
public lockControls(visible: boolean) {
this.controlsLocked = visible;
this.wrapper.classList.toggle('disable-hover', visible === false);
this.toggleControls(visible);
}
protected togglePlay() { protected togglePlay() {
this.video[this.video.paused ? 'play' : 'pause'](); this.video[this.video.paused ? 'play' : 'pause']();
} }

13
src/scss/partials/_ckin.scss

@ -175,7 +175,6 @@
content: $tgico-play; content: $tgico-play;
} }
&.is-playing, &:not(.played) {
.default__gradient-bottom { .default__gradient-bottom {
transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0);
} }
@ -188,26 +187,20 @@
} }
} }
/* html.no-touch &:hover,*/ &.show-controls {
/* &.show-controls.ckin__fullscreen,
&.show-controls:not(.ckin__fullscreen):hover,
html.is-touch */&.show-controls {
.default__gradient-bottom, .default__gradient-bottom,
.default__controls { .default__controls {
transform: translateZ(0); transform: translateZ(0);
} }
} }
&.is-playing {
&:not(.show-controls) { &:not(.show-controls) {
cursor: none; cursor: none;
} }
&:before {
opacity: 0;
visibility: hidden;
transform: translate3d(-50%, -50%, 0) scale(1.3);
} }
&.is-playing, &:not(.played) {
.default__button--big { .default__button--big {
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;

6
src/scss/partials/_mediaViewer.scss

@ -637,6 +637,12 @@ $inactive-opacity: .4;
opacity: 0 !important; opacity: 0 !important;
pointer-events: none; pointer-events: none;
} }
& ~ .media-viewer-movers {
.default__button--big {
opacity: 0 !important;
}
}
} }
} }

Loading…
Cancel
Save