Browse Source

Fix autoplay video for safari & volume controls

master
morethanwords 4 years ago
parent
commit
2ecce82a4d
  1. 1
      src/lib/appManagers/appMediaViewer.ts
  2. 67
      src/lib/mediaPlayer.ts

1
src/lib/appManagers/appMediaViewer.ts

@ -15,6 +15,7 @@ import { isSafari, mediaSizes, touchSupport } from "../config";
import appAudio from "../../components/appAudio"; import appAudio from "../../components/appAudio";
import { deferredPromise } from "../polyfill"; import { deferredPromise } from "../polyfill";
import { MTDocument } from "../../types"; import { MTDocument } from "../../types";
import idbFileStorage from "../idb";
// TODO: масштабирование картинок (не SVG) при ресайзе, и правильный возврат на исходную позицию // TODO: масштабирование картинок (не SVG) при ресайзе, и правильный возврат на исходную позицию
// TODO: картинки "обрезаются" если возвращаются или появляются с места, где есть их перекрытие (топбар, поле ввода) // TODO: картинки "обрезаются" если возвращаются или появляются с места, где есть их перекрытие (топбар, поле ввода)

67
src/lib/mediaPlayer.ts

@ -269,8 +269,16 @@ export default class VideoPlayer {
controls.prepend(this.progress.container); controls.prepend(this.progress.container);
} }
if(play) { if(play && video.paused) {
(this.wrapper.querySelector('.toggle') as HTMLButtonElement).click(); const promise = video.play();
promise.catch((err: Error) => {
if(err.name == 'NotAllowedError') {
video.muted = true;
video.autoplay = true;
video.play();
}
});
//(this.wrapper.querySelector('.toggle') as HTMLButtonElement).click();
} }
} }
@ -302,24 +310,28 @@ export default class VideoPlayer {
volumeSvg.addEventListener('click', (e) => { volumeSvg.addEventListener('click', (e) => {
cancelEvent(e); cancelEvent(e);
video.muted = !video.muted;
});
if(!lastVolume) { const volumeProgress = new ProgressLine();
muted = true; volumeProgress.setListeners();
lastVolume = 1; volumeProgress.setHandlers({
} onScrub: currentTime => {
const value = Math.max(Math.min(currentTime, 1), 0);
const realVolume = !muted ? 0 : lastVolume; video.muted = false;
setVolume(realVolume); video.volume = value;
volumeProgress.setProgress(realVolume); }
muted = !muted;
}); });
volumeDiv.append(volumeProgress.container);
const setVolume = (volume: number) => { const setVolume = () => {
const volume = video.volume;
let d: string; let d: string;
if(volume > .5) { if(!volume || video.muted) {
d = `M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z`;
} else if(!volume) {
d = `M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z`; d = `M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z`;
} else if(volume > .5) {
d = `M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z`;
} else if(volume > 0 && volume < .25) { } else if(volume > 0 && volume < .25) {
d = `M7 9v6h4l5 5V4l-5 5H7z`; d = `M7 9v6h4l5 5V4l-5 5H7z`;
} else { } else {
@ -330,23 +342,22 @@ export default class VideoPlayer {
volumeSvg.innerHTML = `<path d="${d}"></path>`; volumeSvg.innerHTML = `<path d="${d}"></path>`;
} catch(err) {} } catch(err) {}
video.volume = volume; volumeProgress.setProgress(video.muted ? 0 : volume);
}; };
const fakeVolume = muted ? 0 : lastVolume; // не вызовется повторно если на 1 установить 1
video.volume = fakeVolume; video.addEventListener('volumechange', () => {
setVolume(fakeVolume); muted = video.muted;
lastVolume = video.volume;
const volumeProgress = new ProgressLine(muted ? 0 : fakeVolume); setVolume();
volumeProgress.setListeners();
volumeProgress.setHandlers({
onScrub: currentTime => {
const value = Math.max(Math.min(currentTime, 1), 0);
console.log('scrub', currentTime, value);
setVolume(lastVolume = value);
}
}); });
volumeDiv.append(volumeProgress.container);
video.volume = lastVolume;
video.muted = muted;
setVolume();
// volume end
const leftControls = player.querySelector('.left-controls'); const leftControls = player.querySelector('.left-controls');
leftControls.insertBefore(volumeDiv, timeElapsed.parentElement); leftControls.insertBefore(volumeDiv, timeElapsed.parentElement);

Loading…
Cancel
Save