Fix autoplay video for safari & volume controls

src/lib/appManagers/appMediaViewer.ts

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

src/lib/mediaPlayer.ts

@@ -269,8 +269,16 @@ export default class VideoPlayer {
       controls.prepend(this.progress.container);
     }
 
-    if(play) {
-      (this.wrapper.querySelector('.toggle') as HTMLButtonElement).click();
+    if(play && video.paused) {
+      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) => {
         cancelEvent(e);
+        video.muted = !video.muted;
+      });
 
-        if(!lastVolume) {
-          muted = true;
-          lastVolume = 1;
-        }
+      const volumeProgress = new ProgressLine();
+      volumeProgress.setListeners();
+      volumeProgress.setHandlers({
+        onScrub: currentTime => {
+          const value = Math.max(Math.min(currentTime, 1), 0);
 
-        const realVolume = !muted ? 0 : lastVolume;
-        setVolume(realVolume);
-        volumeProgress.setProgress(realVolume);
-        muted = !muted;
+          video.muted = false;
+          video.volume = value;
+        }
       });
+      volumeDiv.append(volumeProgress.container);
 
-      const setVolume = (volume: number) => {
+      const setVolume = () => {
+        const volume = video.volume;
         let d: string;
-        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) {
+        if(!volume || video.muted) {
           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) {
           d = `M7 9v6h4l5 5V4l-5 5H7z`;
         } else {
@@ -330,23 +342,22 @@ export default class VideoPlayer {
           volumeSvg.innerHTML = `<path d="${d}"></path>`;
         } catch(err) {}
 
-        video.volume = volume;
+        volumeProgress.setProgress(video.muted ? 0 : volume);
       };
+      
+      // не вызовется повторно если на 1 установить 1
+      video.addEventListener('volumechange', () => {
+        muted = video.muted;
+        lastVolume = video.volume;
+        setVolume();
+      });
 
-      const fakeVolume = muted ? 0 : lastVolume;
-      video.volume = fakeVolume;
-      setVolume(fakeVolume);
+      video.volume = lastVolume;
+      video.muted = muted;
 
-      const volumeProgress = new ProgressLine(muted ? 0 : fakeVolume);
-      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);
+      setVolume();
+
+      // volume end
 
       const leftControls = player.querySelector('.left-controls');
       leftControls.insertBefore(volumeDiv, timeElapsed.parentElement);