Don't show play button while seeking video
This commit is contained in:
parent
0c10bd2c96
commit
d8e739261f
|
@ -321,7 +321,10 @@ async function wrapAudio(audioEl: AudioElement) {
|
||||||
const onLoad = () => {
|
const onLoad = () => {
|
||||||
let launched = false;
|
let launched = false;
|
||||||
|
|
||||||
let progressLine = new MediaProgressLine(audioEl.audio, doc.supportsStreaming);
|
let progressLine = new MediaProgressLine({
|
||||||
|
media: audioEl.audio,
|
||||||
|
streamable: doc.supportsStreaming
|
||||||
|
});
|
||||||
|
|
||||||
audioEl.addAudioListener('ended', () => {
|
audioEl.addAudioListener('ended', () => {
|
||||||
audioEl.classList.remove('audio-show-progress');
|
audioEl.classList.remove('audio-show-progress');
|
||||||
|
|
|
@ -110,7 +110,12 @@ export default class ChatAudio extends PinnedContainer {
|
||||||
const progressWrapper = document.createElement('div');
|
const progressWrapper = document.createElement('div');
|
||||||
progressWrapper.classList.add('pinned-audio-progress-wrapper');
|
progressWrapper.classList.add('pinned-audio-progress-wrapper');
|
||||||
|
|
||||||
this.progressLine = new MediaProgressLine(undefined, undefined, true, true);
|
this.progressLine = new MediaProgressLine({
|
||||||
|
media: undefined,
|
||||||
|
streamable: undefined,
|
||||||
|
withTransition: true,
|
||||||
|
useTransform: true
|
||||||
|
});
|
||||||
this.progressLine.container.classList.add('pinned-audio-progress');
|
this.progressLine.container.classList.add('pinned-audio-progress');
|
||||||
progressWrapper.append(this.progressLine.container);
|
progressWrapper.append(this.progressLine.container);
|
||||||
this.wrapper.insertBefore(progressWrapper, this.wrapperUtils);
|
this.wrapper.insertBefore(progressWrapper, this.wrapperUtils);
|
||||||
|
|
|
@ -16,17 +16,24 @@ export default class MediaProgressLine extends RangeSelector {
|
||||||
protected media: HTMLMediaElement;
|
protected media: HTMLMediaElement;
|
||||||
protected streamable: boolean;
|
protected streamable: boolean;
|
||||||
|
|
||||||
constructor(media?: HTMLAudioElement | HTMLVideoElement, streamable?: boolean, withTransition?: boolean, useTransform?: boolean) {
|
constructor(protected options: {
|
||||||
|
media?: HTMLAudioElement | HTMLVideoElement,
|
||||||
|
streamable?: boolean,
|
||||||
|
withTransition?: boolean,
|
||||||
|
useTransform?: boolean,
|
||||||
|
onSeekStart?: () => void,
|
||||||
|
onSeekEnd?: () => void
|
||||||
|
}) {
|
||||||
super({
|
super({
|
||||||
step: 1000 / 60 / 1000,
|
step: 1000 / 60 / 1000,
|
||||||
min: 0,
|
min: 0,
|
||||||
max: 1,
|
max: 1,
|
||||||
withTransition,
|
withTransition: options.withTransition,
|
||||||
useTransform
|
useTransform: options.useTransform
|
||||||
}, 0);
|
}, 0);
|
||||||
|
|
||||||
if(media) {
|
if(options.media) {
|
||||||
this.setMedia(media, streamable);
|
this.setMedia(options.media, options.streamable);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -57,11 +64,13 @@ export default class MediaProgressLine extends RangeSelector {
|
||||||
onMouseDown: () => {
|
onMouseDown: () => {
|
||||||
wasPlaying = !this.media.paused;
|
wasPlaying = !this.media.paused;
|
||||||
wasPlaying && this.media.pause();
|
wasPlaying && this.media.pause();
|
||||||
|
this.options?.onSeekStart();
|
||||||
},
|
},
|
||||||
|
|
||||||
onMouseUp: (e) => {
|
onMouseUp: (e) => {
|
||||||
// cancelEvent(e.event);
|
// cancelEvent(e.event);
|
||||||
wasPlaying && this.media.play();
|
wasPlaying && this.media.play();
|
||||||
|
this.options?.onSeekEnd();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,7 +18,7 @@ export default function attachGrabListeners(element: HTMLElement,
|
||||||
const onMouseUp = (event: MouseEvent) => {
|
const onMouseUp = (event: MouseEvent) => {
|
||||||
document.removeEventListener('mousemove', onMouseMove);
|
document.removeEventListener('mousemove', onMouseMove);
|
||||||
element.addEventListener('mousedown', onMouseDown, {once: true});
|
element.addEventListener('mousedown', onMouseDown, {once: true});
|
||||||
onEnd && onEnd({x: event.pageX, y: event.pageY, event});
|
onEnd?.({x: event.pageX, y: event.pageY, event});
|
||||||
};
|
};
|
||||||
|
|
||||||
const onMouseDown = (event: MouseEvent) => {
|
const onMouseDown = (event: MouseEvent) => {
|
||||||
|
@ -45,7 +45,8 @@ export default function attachGrabListeners(element: HTMLElement,
|
||||||
const onTouchEnd = (event: TouchEvent) => {
|
const onTouchEnd = (event: TouchEvent) => {
|
||||||
document.removeEventListener('touchmove', onTouchMove);
|
document.removeEventListener('touchmove', onTouchMove);
|
||||||
element.addEventListener('touchstart', onTouchStart, {passive: false, once: true});
|
element.addEventListener('touchstart', onTouchStart, {passive: false, once: true});
|
||||||
onEnd && onEnd({x: event.touches[0].clientX, y: event.touches[0].clientY, isTouch: true, event});
|
const touch = event.touches[0] || event.changedTouches[0];
|
||||||
|
onEnd?.({x: touch.clientX, y: touch.clientY, isTouch: true, event});
|
||||||
};
|
};
|
||||||
|
|
||||||
const onTouchStart = (event: TouchEvent) => {
|
const onTouchStart = (event: TouchEvent) => {
|
||||||
|
|
|
@ -82,7 +82,16 @@ export default class VideoPlayer extends ControlsHover {
|
||||||
|
|
||||||
if(this.skin === 'default') {
|
if(this.skin === 'default') {
|
||||||
const controls = this.wrapper.querySelector('.default__controls.ckin__controls') as HTMLDivElement;
|
const controls = this.wrapper.querySelector('.default__controls.ckin__controls') as HTMLDivElement;
|
||||||
this.progress = new MediaProgressLine(video, streamable);
|
this.progress = new MediaProgressLine({
|
||||||
|
media: video,
|
||||||
|
streamable,
|
||||||
|
onSeekStart: () => {
|
||||||
|
this.wrapper.classList.add('is-seeking');
|
||||||
|
},
|
||||||
|
onSeekEnd: () => {
|
||||||
|
this.wrapper.classList.remove('is-seeking');
|
||||||
|
}
|
||||||
|
});
|
||||||
controls.prepend(this.progress.container);
|
controls.prepend(this.progress.container);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -200,7 +200,9 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-playing, &:not(.played) {
|
&.is-playing,
|
||||||
|
&:not(.played),
|
||||||
|
&.is-seeking {
|
||||||
.default__button--big {
|
.default__button--big {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
@ -212,6 +214,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.is-seeking + .default__button--big {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.player-volume {
|
.player-volume {
|
||||||
--icon-size: 2.25rem;
|
--icon-size: 2.25rem;
|
||||||
--icon-margin-right: .5rem;
|
--icon-margin-right: .5rem;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user