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

2
src/components/swipeHandler.ts

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

104
src/lib/mediaPlayer.ts

@ -179,6 +179,10 @@ export default class VideoPlayer extends EventListenerBase<{ @@ -179,6 +179,10 @@ export default class VideoPlayer extends EventListenerBase<{
private listenerSetter: ListenerSetter;
private showControlsTimeout = 0;
private controlsLocked: boolean;
/* private videoParent: HTMLElement;
private videoWhichChild: number; */
@ -315,46 +319,9 @@ export default class VideoPlayer extends EventListenerBase<{ @@ -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) {
this.listenerSetter.add(player)('click', () => {
toggleControls();
this.toggleControls();
});
/* this.listenerSetter.add(player)('touchstart', () => {
@ -368,20 +335,20 @@ export default class VideoPlayer extends EventListenerBase<{ @@ -368,20 +335,20 @@ export default class VideoPlayer extends EventListenerBase<{
}); */
} else {
this.listenerSetter.add(this.wrapper)('mousemove', () => {
showControls();
this.showControls();
});
this.listenerSetter.add(this.wrapper)('mouseenter', () => {
showControls(false);
this.showControls(false);
});
this.listenerSetter.add(this.wrapper)('mouseleave', (e) => {
if(findUpClassName(e.relatedTarget, 'media-viewer-caption')) {
showControls(false);
this.showControls(false);
return;
}
hideControls();
this.hideControls();
});
this.listenerSetter.add(document)('keydown', (e: KeyboardEvent) => {
@ -445,7 +412,7 @@ export default class VideoPlayer extends EventListenerBase<{ @@ -445,7 +412,7 @@ export default class VideoPlayer extends EventListenerBase<{
}, {once: true});
this.listenerSetter.add(video)('pause', () => {
showControls(false);
this.showControls(false);
});
}
@ -466,6 +433,57 @@ export default class VideoPlayer extends EventListenerBase<{ @@ -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() {
this.video[this.video.paused ? 'play' : 'pause']();
}

39
src/scss/partials/_ckin.scss

@ -175,39 +175,32 @@ @@ -175,39 +175,32 @@
content: $tgico-play;
}
&.is-playing, &:not(.played) {
.default__gradient-bottom {
transform: translate3d(0, 50px, 0);
}
.default__gradient-bottom {
transform: translate3d(0, 50px, 0);
}
.default__controls {
transform: translate3d(0, 52px, 0);
.default__controls {
transform: translate3d(0, 52px, 0);
@include respond-to(handhelds) {
transform: translate3d(0, 65px, 0);
}
@include respond-to(handhelds) {
transform: translate3d(0, 65px, 0);
}
}
/* html.no-touch &:hover,*/
/* &.show-controls.ckin__fullscreen,
&.show-controls:not(.ckin__fullscreen):hover,
html.is-touch */&.show-controls {
.default__gradient-bottom,
.default__controls {
transform: translateZ(0);
}
&.show-controls {
.default__gradient-bottom,
.default__controls {
transform: translateZ(0);
}
}
&.is-playing {
&:not(.show-controls) {
cursor: none;
}
}
&:before {
opacity: 0;
visibility: hidden;
transform: translate3d(-50%, -50%, 0) scale(1.3);
}
&.is-playing, &:not(.played) {
.default__button--big {
opacity: 0;
visibility: hidden;

6
src/scss/partials/_mediaViewer.scss

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

Loading…
Cancel
Save