Preserve playback settings

src/components/appMediaPlaybackController.ts

@@ -81,11 +81,11 @@ export class AppMediaPlaybackController {
   public playbackRate: number;
   public loop: boolean;
   public round: boolean;
-  private _volume = 1;
-  private _muted = false;
-  private _playbackRate = 1;
-  private _loop = false;
-  private _round = false;
+  private _volume: number;
+  private _muted: boolean;
+  private _playbackRate: number;
+  private _loop: boolean;
+  private _round: boolean;
   private lockedSwitchers: boolean;
   private playbackRates: Record<PlaybackMediaType, number> = {
     voice: 1,
@@ -171,16 +171,26 @@ export class AppMediaPlaybackController {
   }
 
   public getPlaybackParams() {
-    const {volume, muted, playbackRate, loop, round} = this;
+    const {volume, muted, playbackRate, playbackRates, loop, round} = this;
     return {
       volume, 
       muted, 
       playbackRate,
+      playbackRates,
       loop,
       round
     };
   }
 
+  public setPlaybackParams(params: ReturnType<AppMediaPlaybackController['getPlaybackParams']>) {
+    this.playbackRates = params.playbackRates;
+    this._volume = params.volume;
+    this._muted = params.muted;
+    this._playbackRate = params.playbackRate;
+    this._loop = params.loop;
+    this._round = params.round;
+  }
+  
   public seekBackward = (details: MediaSessionActionDetails, media = this.playingMedia) => {
     if(media) {
       media.currentTime = Math.max(0, media.currentTime - (details.seekOffset || SEEK_OFFSET));

src/components/chat/audio.ts

@@ -148,11 +148,7 @@ export default class ChatAudio extends PinnedContainer {
     this.toggle(true);
   };
   
-  private onMediaPlay = ({doc, message, media}: {
-    doc: MyDocument,
-    message: Message.message,
-    media: HTMLMediaElement
-  }) => {
+  private onMediaPlay = ({doc, message, media, playbackParams}: ReturnType<AppMediaPlaybackController['getPlayingDetails']>) => {
     let title: string | HTMLElement, subtitle: string | HTMLElement | DocumentFragment;
     const isMusic = doc.type !== 'voice' && doc.type !== 'round';
     if(!isMusic) {
@@ -168,6 +164,9 @@ export default class ChatAudio extends PinnedContainer {
     this.fasterEl.classList.toggle('hide', isMusic);
     this.repeatEl.classList.toggle('hide', !isMusic);
 
+    this.onPlaybackParams(playbackParams);
+    this.volumeSelector.setVolume();
+
     this.progressLine.setMedia(media);
 
     this.fill(title, subtitle, message);

src/components/volumeSelector.ts

@@ -59,7 +59,7 @@ export default class VolumeSelector extends RangeSelector {
     appMediaPlaybackController.muted = !appMediaPlaybackController.muted;
   };
 
-  private setVolume = () => {
+  public setVolume = () => {
     // const volume = video.volume;
     const {volume, muted} = appMediaPlaybackController;
     let d: string;

src/lib/appManagers/appDialogsManager.ts

@@ -61,6 +61,7 @@ import mediaSizes from "../../helpers/mediaSizes";
 import appNavigationController, { NavigationItem } from "../../components/appNavigationController";
 import assumeType from "../../helpers/assumeType";
 import generateTitleIcons from "../../components/generateTitleIcons";
+import appMediaPlaybackController from "../../components/appMediaPlaybackController";
 
 export type DialogDom = {
   avatarEl: AvatarElement,
@@ -338,6 +339,12 @@ export class AppDialogsManager {
     (this.folders.menu.firstElementChild as HTMLElement).click();
     appMessagesManager.construct();
     appStateManager.getState().then((state) => {
+      // * it should've had a better place :(
+      appMediaPlaybackController.setPlaybackParams(state.playbackParams);
+      rootScope.addEventListener('media_playback_params', (params) => {
+        appStateManager.pushToState('playbackParams', params);
+      });
+      
       return this.onStateLoaded(state);
     })/* .then(() => {
       const isLoadedMain = appMessagesManager.dialogsStorage.isDialogsLoaded(0);

src/lib/appManagers/appStateManager.ts

@@ -5,11 +5,12 @@
  */
 
 import type { Dialog } from './appMessagesManager';
-import { NULL_PEER_ID, UserAuth } from '../mtproto/mtproto_config';
 import type { MyTopPeer, TopPeerType, User } from './appUsersManager';
 import type { AuthState } from '../../types';
 import type FiltersStorage from '../storages/filters';
 import type DialogsStorage from '../storages/dialogs';
+import type { AppMediaPlaybackController } from '../../components/appMediaPlaybackController';
+import { NULL_PEER_ID, UserAuth } from '../mtproto/mtproto_config';
 import EventListenerBase from '../../helpers/eventListenerBase';
 import rootScope from '../rootScope';
 import stateStorage from '../stateStorage';
@@ -116,6 +117,7 @@ export type State = {
     nightTheme?: boolean, // ! DEPRECATED
     timeFormat: 'h12' | 'h23'
   },
+  playbackParams: ReturnType<AppMediaPlaybackController['getPlaybackParams']>,
   keepSigned: boolean,
   chatContextMenuHintWasShown: boolean,
   stateId: number,
@@ -237,6 +239,18 @@ export const STATE_INIT: State = {
     },
     timeFormat: getTimeFormat()
   },
+  playbackParams: {
+    volume: 1,
+    muted: false,
+    playbackRate: 1,
+    playbackRates: {
+      voice: 1,
+      video: 1,
+      audio: 1
+    },
+    loop: false,
+    round: false
+  },
   keepSigned: true,
   chatContextMenuHintWasShown: false,
   stateId: nextRandomUint(32),

src/lib/rootScope.ts

@@ -16,6 +16,7 @@ import type { PushSubscriptionNotify } from "./mtproto/webPushApiManager";
 import type { PushNotificationObject } from "./serviceWorker/push";
 import type { ConnectionStatusChange } from "./mtproto/connectionStatus";
 import type { GroupCallId } from "./appManagers/appGroupCallsManager";
+import type { AppMediaPlaybackController } from "../components/appMediaPlaybackController";
 import type GroupCallInstance from "./calls/groupCallInstance";
 import type CallInstance from "./calls/callInstance";
 import type { StreamAmplitude } from "./calls/streamManager";
@@ -94,9 +95,9 @@ export type BroadcastEvents = {
   'stickers_installed': StickerSet.stickerSet,
   'stickers_deleted': StickerSet.stickerSet,
 
-  'media_play': {doc: MyDocument, message: Message.message, media: HTMLMediaElement},
+  'media_play': ReturnType<AppMediaPlaybackController['getPlayingDetails']>,
   'media_pause': void,
-  'media_playback_params': {volume: number, muted: boolean, playbackRate: number, loop: boolean, round: boolean},
+  'media_playback_params': ReturnType<AppMediaPlaybackController['getPlaybackParams']>,
   'media_stop': void,
   
   'state_cleared': void,