feat: persist muted enabled state (#1088)

Closes #1072
## Changes
- `MEDIA_UNMUTE_REQUEST`: When unmuting, if the preferred volume is too
low (<= 0.25), set the volume to 0.25. Otherwise, restore the preferred
volume.
- `mediaMuted` set behavior: When muting, set `media-chrome-pref-muted`
to `true` in localStorage and when unmuting set it to `false`.
- `stateOwnersUpdateHandlers` behavior: calls `mediaMuted`'s set with
the `mutedPref` value.

I replicated the same user experience as yt when muting and unmuting
(restoring the previously selected volume), with the exception that if
the preferred volume is too low (<=0.25), it is set to 0.25 to ensure
the audio is clearly perceptible. I'm open to any other suggestions for
doing this :)

---------

Co-authored-by: Wesley Luyten <[email protected]>

Author: Pintorado

src/js/media-store/state-mediator.ts

@@ -86,6 +86,7 @@ export type StateOption = {
   defaultDuration?: number;
   liveEdgeOffset?: number;
   noVolumePref?: boolean;
+  noMutedPref?: boolean;
   noSubtitlesLangPref?: boolean;
 };
 
@@ -389,9 +390,39 @@ export const stateMediator: StateMediator = {
     set(value, stateOwners) {
       const { media } = stateOwners;
       if (!media) return;
+
+      try {
+        globalThis.localStorage.setItem(
+          'media-chrome-pref-muted',
+          value ? 'true' : 'false'
+        );
+      } catch (e) {
+        console.debug('Error setting muted pref', e);
+      }
+
       media.muted = value;
     },
     mediaEvents: ['volumechange'],
+    stateOwnersUpdateHandlers: [
+      (handler, stateOwners) => {
+        const {
+          options: { noMutedPref },
+        } = stateOwners;
+        const { media } = stateOwners;
+        // The muted enabled attribute should still override the preference.
+        if (!media || media.muted || noMutedPref) return;
+        try {
+          const mutedPref =
+            globalThis.localStorage.getItem('media-chrome-pref-muted') ===
+            'true';
+
+          stateMediator.mediaMuted.set(mutedPref, stateOwners);
+          handler(mutedPref);
+        } catch (e) {
+          console.debug('Error getting muted pref', e);
+        }
+      },
+    ],
   },
   mediaVolume: {
     get(stateOwners) {
@@ -413,8 +444,8 @@ export const stateMediator: StateMediator = {
             value.toString()
           );
         }
-      } catch (err) {
-        // ignore
+      } catch (e) {
+        console.debug('Error setting volume pref', e);
       }
       if (!Number.isFinite(+value)) return;
       media.volume = +value;
@@ -428,9 +459,13 @@ export const stateMediator: StateMediator = {
         if (noVolumePref) return;
         /** @TODO How should we handle globalThis dependencies/"state ownership"? (CJP) */
         try {
+          const { media } = stateOwners;
+          if (!media) return;
+
           const volumePref = globalThis.localStorage.getItem(
             'media-chrome-pref-volume'
           );
+
           if (volumePref == null) return;
           stateMediator.mediaVolume.set(+volumePref, stateOwners);
           handler(+volumePref);