optimize volume and brightness overlays

apps/expo/src/stores/player/slices/audio.ts

@@ -11,6 +11,7 @@ export interface AudioSlice {
   setCurrentAudioTrack(track: AudioTrack | null): void;
   playAudio(): Promise<void>;
   pauseAudio(): Promise<void>;
+  toggleAudio(): Promise<void>;
   setAudioPositionAsync(positionMillis: number): Promise<void>;
 }
 
@@ -36,6 +37,18 @@ export const createAudioSlice: MakeSlice<AudioSlice> = (set, get) => ({
       await audioObject.pauseAsync();
     }
   },
+  toggleAudio: async () => {
+    const { audioObject } = get();
+    if (audioObject) {
+      const status = await audioObject.getStatusAsync();
+      if (!status.isLoaded) return;
+      if (status.isPlaying) {
+        await audioObject.pauseAsync();
+      } else {
+        await audioObject.playAsync();
+      }
+    }
+  },
   setAudioPositionAsync: async (positionMillis) => {
     const { audioObject } = get();
     if (audioObject) {

apps/expo/src/stores/player/slices/interface.ts

@@ -10,8 +10,11 @@ export enum PlayerStatus {
   READY,
 }
 
+type PlayerState = "playing" | "paused";
+
 export interface InterfaceSlice {
   interface: {
+    state: PlayerState;
     isIdle: boolean;
     idleTimeout: NodeJS.Timeout | null;
     currentStream: Stream | null;
@@ -24,6 +27,7 @@ export interface InterfaceSlice {
     audioTracks: AudioTrack[] | null;
     playerStatus: PlayerStatus;
   };
+  toggleState(): void;
   setIsIdle(state: boolean): void;
   setCurrentStream(stream: Stream): void;
   setAvailableStreams(streams: Stream[]): void;
@@ -38,6 +42,7 @@ export interface InterfaceSlice {
 
 export const createInterfaceSlice: MakeSlice<InterfaceSlice> = (set, get) => ({
   interface: {
+    state: "playing",
     isIdle: true,
     idleTimeout: null,
     currentStream: null,
@@ -50,6 +55,12 @@ export const createInterfaceSlice: MakeSlice<InterfaceSlice> = (set, get) => ({
     audioTracks: null,
     playerStatus: PlayerStatus.SCRAPING,
   },
+  toggleState: () => {
+    set((s) => {
+      s.interface.state =
+        s.interface.state === "playing" ? "paused" : "playing";
+    });
+  },
   setIsIdle: (state) => {
     set((s) => {
       if (s.interface.idleTimeout) clearTimeout(s.interface.idleTimeout);
@@ -108,6 +119,7 @@ export const createInterfaceSlice: MakeSlice<InterfaceSlice> = (set, get) => ({
   reset: () => {
     set(() => ({
       interface: {
+        state: "playing",
         isIdle: true,
         idleTimeout: null,
         currentStream: null,