From 18ed2e6f055d7e32b4a9df33cdb724eaf1f930aa Mon Sep 17 00:00:00 2001
From: Aleksandr Shoronov <alexshoronov@gmail.com>
Date: Sat, 18 Jan 2025 13:53:46 +0200
Subject: [PATCH] feat: media session support

---
 README.md                                     |   1 +
 public/logo-dark.png                          | Bin 0 -> 10797 bytes
 public/logo-light.png                         | Bin 0 -> 10845 bytes
 src/components/app/app.tsx                    |   2 +
 src/components/media-controls/index.ts        |   1 +
 .../media-controls/media-controls.tsx         |  13 +++
 .../media-controls/media-session-track.tsx    | 104 ++++++++++++++++++
 src/components/menu/items/media-controls.tsx  |  20 ++++
 src/components/menu/menu.tsx                  |  13 +++
 .../store-consumer/store-consumer.tsx         |   2 +
 src/helpers/browser-detect.ts                 |  16 +++
 src/helpers/sound.ts                          |  82 ++++++++++++++
 src/hooks/use-dark-theme.ts                   |  27 +++++
 src/stores/media-session/index.ts             |  33 ++++++
 .../media-session/media-session.actions.ts    |  29 +++++
 .../media-session/media-session.state.ts      |  18 +++
 16 files changed, 361 insertions(+)
 create mode 100644 public/logo-dark.png
 create mode 100644 public/logo-light.png
 create mode 100644 src/components/media-controls/index.ts
 create mode 100644 src/components/media-controls/media-controls.tsx
 create mode 100644 src/components/media-controls/media-session-track.tsx
 create mode 100644 src/components/menu/items/media-controls.tsx
 create mode 100644 src/helpers/browser-detect.ts
 create mode 100644 src/helpers/sound.ts
 create mode 100644 src/hooks/use-dark-theme.ts
 create mode 100644 src/stores/media-session/index.ts
 create mode 100644 src/stores/media-session/media-session.actions.ts
 create mode 100644 src/stores/media-session/media-session.state.ts

diff --git a/README.md b/README.md
index c837afbf..bb1aa5d1 100644
--- a/README.md
+++ b/README.md
@@ -24,6 +24,7 @@
 1. 📓 Notepad for quick notes.
 1. 🍅 Pomodoro timer.
 1. ✅ Simple to-do list (soon).
+1. ⏯️ Media controls.
 1. ⌨️ Keyboard shortcuts for everything.
 1. 🥷 Privacy focused: no data collection.
 1. 💰 Completely free, open-source, and self-hostable.
diff --git a/public/logo-dark.png b/public/logo-dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..5e10b4d5dc936626e2c1df8fc6913ae1cc1a6269
GIT binary patch
literal 10797
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
F{{hL@Vut_#

literal 0
HcmV?d00001

diff --git a/public/logo-light.png b/public/logo-light.png
new file mode 100644
index 0000000000000000000000000000000000000000..5c902f7cc160140e17ad9f5649e41cbc05146db5
GIT binary patch
literal 10845
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
b^N+betxWlEbZ-;bcnGK{XrgN5EW-W|n7?AB

literal 0
HcmV?d00001

diff --git a/src/components/app/app.tsx b/src/components/app/app.tsx
index e0eee08d..c5f890d4 100644
--- a/src/components/app/app.tsx
+++ b/src/components/app/app.tsx
@@ -12,6 +12,7 @@ import { Categories } from '@/components/categories';
 import { SharedModal } from '@/components/modals/shared';
 import { Toolbar } from '@/components/toolbar';
 import { SnackbarProvider } from '@/contexts/snackbar';
+import { MediaControls } from '@/components/media-controls';
 
 import { sounds } from '@/data/sounds';
 import { FADE_OUT } from '@/constants/events';
@@ -88,6 +89,7 @@ export function App() {
   return (
     <SnackbarProvider>
       <StoreConsumer>
+        <MediaControls />
         <Container>
           <div id="app" />
           <Buttons />
diff --git a/src/components/media-controls/index.ts b/src/components/media-controls/index.ts
new file mode 100644
index 00000000..fc42fd2f
--- /dev/null
+++ b/src/components/media-controls/index.ts
@@ -0,0 +1 @@
+export { MediaControls } from './media-controls';
diff --git a/src/components/media-controls/media-controls.tsx b/src/components/media-controls/media-controls.tsx
new file mode 100644
index 00000000..60cf4779
--- /dev/null
+++ b/src/components/media-controls/media-controls.tsx
@@ -0,0 +1,13 @@
+import { useMediaSessionStore } from '@/stores/media-session';
+
+import { MediaSessionTrack } from './media-session-track';
+
+export function MediaControls() {
+  const mediaControlsEnabled = useMediaSessionStore(state => state.enabled);
+
+  if (!mediaControlsEnabled) {
+    return null;
+  }
+
+  return <MediaSessionTrack />;
+}
diff --git a/src/components/media-controls/media-session-track.tsx b/src/components/media-controls/media-session-track.tsx
new file mode 100644
index 00000000..6a29ab1b
--- /dev/null
+++ b/src/components/media-controls/media-session-track.tsx
@@ -0,0 +1,104 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { getSilenceDataURL } from '@/helpers/sound';
+import { BrowserDetect } from '@/helpers/browser-detect';
+
+import { useSoundStore } from '@/stores/sound';
+
+import { useSSR } from '@/hooks/use-ssr';
+import { useDarkTheme } from '@/hooks/use-dark-theme';
+
+const metadata: MediaMetadataInit = {
+  artist: 'Moodist',
+  title: 'Ambient Sounds for Focus and Calm',
+};
+
+export function MediaSessionTrack() {
+  const { isBrowser } = useSSR();
+  const isDarkTheme = useDarkTheme();
+  const [isGenerated, setIsGenerated] = useState(false);
+  const isPlaying = useSoundStore(state => state.isPlaying);
+  const play = useSoundStore(state => state.play);
+  const pause = useSoundStore(state => state.pause);
+  const masterAudioSoundRef = useRef<HTMLAudioElement>(null);
+  const artworkURL = isDarkTheme ? '/logo-dark.png' : '/logo-light.png';
+
+  const generateSilence = useCallback(async () => {
+    if (!masterAudioSoundRef.current) return;
+    masterAudioSoundRef.current.src = await getSilenceDataURL();
+    setIsGenerated(true);
+  }, []);
+
+  useEffect(() => {
+    if (!isBrowser || !isPlaying || !isGenerated) return;
+
+    navigator.mediaSession.metadata = new MediaMetadata({
+      ...metadata,
+      artwork: [
+        {
+          sizes: '200x200',
+          src: artworkURL,
+          type: 'image/png',
+        },
+      ],
+    });
+  }, [artworkURL, isBrowser, isDarkTheme, isGenerated, isPlaying]);
+
+  useEffect(() => {
+    generateSilence();
+  }, [generateSilence]);
+
+  const startMasterAudio = useCallback(async () => {
+    if (!masterAudioSoundRef.current) return;
+    if (!masterAudioSoundRef.current.paused) return;
+
+    try {
+      await masterAudioSoundRef.current.play();
+
+      navigator.mediaSession.playbackState = 'playing';
+      navigator.mediaSession.setActionHandler('play', play);
+      navigator.mediaSession.setActionHandler('pause', pause);
+    } catch {
+      // Do nothing
+    }
+  }, [pause, play]);
+
+  const stopMasterAudio = useCallback(() => {
+    if (!masterAudioSoundRef.current) return;
+    /**
+     * Otherwise in Safari we cannot play the audio again
+     * through the media session controls
+     */
+    if (BrowserDetect.isSafari()) {
+      masterAudioSoundRef.current.load();
+    } else {
+      masterAudioSoundRef.current.pause();
+    }
+    navigator.mediaSession.playbackState = 'paused';
+  }, []);
+
+  useEffect(() => {
+    if (!isGenerated) return;
+    if (!masterAudioSoundRef.current) return;
+
+    if (isPlaying) {
+      startMasterAudio();
+    } else {
+      stopMasterAudio();
+    }
+  }, [isGenerated, isPlaying, startMasterAudio, stopMasterAudio]);
+
+  useEffect(() => {
+    const masterAudioSound = masterAudioSoundRef.current;
+
+    return () => {
+      masterAudioSound?.pause();
+
+      navigator.mediaSession.setActionHandler('play', null);
+      navigator.mediaSession.setActionHandler('pause', null);
+      navigator.mediaSession.playbackState = 'none';
+    };
+  }, []);
+
+  return <audio id="media-session-track" loop ref={masterAudioSoundRef} />;
+}
diff --git a/src/components/menu/items/media-controls.tsx b/src/components/menu/items/media-controls.tsx
new file mode 100644
index 00000000..44965556
--- /dev/null
+++ b/src/components/menu/items/media-controls.tsx
@@ -0,0 +1,20 @@
+import { IoMdPlayCircle } from 'react-icons/io/index';
+
+import { Item } from '../item';
+
+export function MediaControls({
+  active,
+  onClick,
+}: {
+  active: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <Item
+      active={active}
+      icon={<IoMdPlayCircle />}
+      label="Media Controls"
+      onClick={onClick}
+    />
+  );
+}
diff --git a/src/components/menu/menu.tsx b/src/components/menu/menu.tsx
index ff3eb12c..df229ffb 100644
--- a/src/components/menu/menu.tsx
+++ b/src/components/menu/menu.tsx
@@ -29,10 +29,17 @@ import { useSoundStore } from '@/stores/sound';
 import styles from './menu.module.css';
 import { useCloseListener } from '@/hooks/use-close-listener';
 import { closeModals } from '@/lib/modal';
+import { MediaControls } from './items/media-controls';
+import { useMediaSessionStore } from '@/stores/media-session';
 
 export function Menu() {
   const [isOpen, setIsOpen] = useState(false);
 
+  const mediaControlsEnabled = useMediaSessionStore(state => state.enabled);
+  const toggleMediaControls = useMediaSessionStore(state => state.toggle);
+  const isMediaSessionSupported = useMediaSessionStore(
+    state => state.isSupported,
+  );
   const noSelected = useSoundStore(state => state.noSelected());
 
   const initial = useMemo(
@@ -108,6 +115,12 @@ export function Menu() {
                   >
                     <PresetsItem open={() => open('presets')} />
                     <ShareItem open={() => open('shareLink')} />
+                    {isMediaSessionSupported ? (
+                      <MediaControls
+                        active={mediaControlsEnabled}
+                        onClick={toggleMediaControls}
+                      />
+                    ) : null}
                     <ShuffleItem />
                     <SleepTimerItem open={() => open('sleepTimer')} />
 
diff --git a/src/components/store-consumer/store-consumer.tsx b/src/components/store-consumer/store-consumer.tsx
index 101be031..d1b3adb9 100644
--- a/src/components/store-consumer/store-consumer.tsx
+++ b/src/components/store-consumer/store-consumer.tsx
@@ -3,6 +3,7 @@ import { useEffect } from 'react';
 import { useSoundStore } from '@/stores/sound';
 import { useNoteStore } from '@/stores/note';
 import { usePresetStore } from '@/stores/preset';
+import { useMediaSessionStore } from '@/stores/media-session';
 
 interface StoreConsumerProps {
   children: React.ReactNode;
@@ -13,6 +14,7 @@ export function StoreConsumer({ children }: StoreConsumerProps) {
     useSoundStore.persist.rehydrate();
     useNoteStore.persist.rehydrate();
     usePresetStore.persist.rehydrate();
+    useMediaSessionStore.persist.rehydrate();
   }, []);
 
   return <>{children}</>;
diff --git a/src/helpers/browser-detect.ts b/src/helpers/browser-detect.ts
new file mode 100644
index 00000000..3d47ba17
--- /dev/null
+++ b/src/helpers/browser-detect.ts
@@ -0,0 +1,16 @@
+export class BrowserDetect {
+  private static _isSafari: boolean | undefined;
+
+  public static isSafari(): boolean {
+    if (typeof BrowserDetect._isSafari !== 'undefined') {
+      return BrowserDetect._isSafari;
+    }
+
+    // Source: https://github.com/goldfire/howler.js/blob/v2.2.4/src/howler.core.js#L270
+    BrowserDetect._isSafari =
+      navigator.userAgent.indexOf('Safari') !== -1 &&
+      navigator.userAgent.indexOf('Chrome') === -1;
+
+    return BrowserDetect._isSafari;
+  }
+}
diff --git a/src/helpers/sound.ts b/src/helpers/sound.ts
new file mode 100644
index 00000000..77813880
--- /dev/null
+++ b/src/helpers/sound.ts
@@ -0,0 +1,82 @@
+function blobToDataURL(blob: Blob) {
+  return new Promise<string>(resolve => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      if (typeof reader.result !== 'string') return;
+      resolve(reader.result);
+    };
+    reader.readAsDataURL(blob);
+  });
+}
+
+function writeString(view: DataView, offset: number, string: string) {
+  for (let i = 0; i < string.length; i++) {
+    view.setUint8(offset + i, string.charCodeAt(i));
+  }
+}
+
+function encodeWAV(audioBuffer: AudioBuffer) {
+  const numChannels = audioBuffer.numberOfChannels;
+  const sampleRate = audioBuffer.sampleRate;
+  const length = audioBuffer.length * numChannels * 2 + 44; // Header + PCM data
+  const wavBuffer = new ArrayBuffer(length);
+  const view = new DataView(wavBuffer);
+
+  // WAV file header
+  writeString(view, 0, 'RIFF');
+  // File size - 8
+  view.setUint32(4, 36 + audioBuffer.length * numChannels * 2, true);
+  writeString(view, 8, 'WAVE');
+  writeString(view, 12, 'fmt ');
+  // Subchunk1Size
+  view.setUint32(16, 16, true);
+  // Audio format (PCM)
+  view.setUint16(20, 1, true);
+  // NumChannels
+  view.setUint16(22, numChannels, true);
+  // SampleRate
+  view.setUint32(24, sampleRate, true);
+  // ByteRate
+  view.setUint32(28, sampleRate * numChannels * 2, true);
+  // BlockAlign
+  view.setUint16(32, numChannels * 2, true);
+  // BitsPerSample
+  view.setUint16(34, 16, true);
+  writeString(view, 36, 'data');
+  // Subchunk2Size
+  view.setUint32(40, audioBuffer.length * numChannels * 2, true);
+
+  // Write interleaved PCM samples
+  let offset = 44;
+
+  for (let i = 0; i < audioBuffer.length; i++) {
+    for (let channel = 0; channel < numChannels; channel++) {
+      const sample = audioBuffer.getChannelData(channel)[i];
+      const clampedSample = Math.max(-1, Math.min(1, sample));
+      view.setInt16(offset, clampedSample * 0x7fff, true);
+      offset += 2;
+    }
+  }
+
+  return wavBuffer;
+}
+
+export async function getSilenceDataURL(seconds: number = 60) {
+  const audioContext = new AudioContext();
+
+  const sampleRate = 44100;
+  const length = sampleRate * seconds;
+  const buffer = audioContext.createBuffer(1, length, sampleRate);
+  const channelData = buffer.getChannelData(0);
+
+  /**
+   * - Firefox ignores audio for Media Session without any actual sound in the beginning.
+   * - Add a small value to the end to prevent clipping.
+   */
+  channelData[0] = 0.001;
+  channelData[channelData.length - 1] = 0.001;
+
+  return await blobToDataURL(
+    new Blob([encodeWAV(buffer)], { type: 'audio/wav' }),
+  );
+}
diff --git a/src/hooks/use-dark-theme.ts b/src/hooks/use-dark-theme.ts
new file mode 100644
index 00000000..f0bdb538
--- /dev/null
+++ b/src/hooks/use-dark-theme.ts
@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+import { useSSR } from './use-ssr';
+
+const themeMatch = '(prefers-color-scheme: dark)';
+
+export function useDarkTheme() {
+  const { isBrowser } = useSSR();
+  const [isDarkTheme, setIsDarkTheme] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (!isBrowser) return;
+
+    const themeMediaQuery = window.matchMedia(themeMatch);
+
+    function handleThemeChange(event: MediaQueryListEvent) {
+      setIsDarkTheme(event.matches);
+    }
+
+    themeMediaQuery.addEventListener('change', handleThemeChange);
+    setIsDarkTheme(themeMediaQuery.matches);
+
+    return () =>
+      themeMediaQuery.removeEventListener('change', handleThemeChange);
+  }, [isBrowser]);
+
+  return isDarkTheme;
+}
diff --git a/src/stores/media-session/index.ts b/src/stores/media-session/index.ts
new file mode 100644
index 00000000..bd25aef2
--- /dev/null
+++ b/src/stores/media-session/index.ts
@@ -0,0 +1,33 @@
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+import merge from 'deepmerge';
+
+import {
+  createActions,
+  type MediaControlsActions,
+} from './media-session.actions';
+import { createState, type MediaControlsState } from './media-session.state';
+
+export const useMediaSessionStore = create<
+  MediaControlsState & MediaControlsActions
+>()(
+  persist(
+    (...a) => ({
+      ...createState(...a),
+      ...createActions(...a),
+    }),
+    {
+      merge: (persisted, current) =>
+        merge(
+          current,
+          // @ts-ignore
+          persisted,
+        ),
+      name: 'moodist-media-session',
+      partialize: state => ({ enabled: state.enabled }),
+      skipHydration: true,
+      storage: createJSONStorage(() => localStorage),
+      version: 0,
+    },
+  ),
+);
diff --git a/src/stores/media-session/media-session.actions.ts b/src/stores/media-session/media-session.actions.ts
new file mode 100644
index 00000000..30836797
--- /dev/null
+++ b/src/stores/media-session/media-session.actions.ts
@@ -0,0 +1,29 @@
+import type { StateCreator } from 'zustand';
+import type { MediaControlsState } from './media-session.state';
+
+export interface MediaControlsActions {
+  disable: () => void;
+  enable: () => void;
+  toggle: () => void;
+}
+
+export const createActions: StateCreator<
+  MediaControlsActions & MediaControlsState,
+  [],
+  [],
+  MediaControlsActions
+> = (set, get) => {
+  return {
+    disable() {
+      set({ enabled: false });
+    },
+
+    enable() {
+      set({ enabled: true });
+    },
+
+    toggle() {
+      set({ enabled: !get().enabled });
+    },
+  };
+};
diff --git a/src/stores/media-session/media-session.state.ts b/src/stores/media-session/media-session.state.ts
new file mode 100644
index 00000000..a776e13f
--- /dev/null
+++ b/src/stores/media-session/media-session.state.ts
@@ -0,0 +1,18 @@
+import type { StateCreator } from 'zustand';
+
+import type { MediaControlsActions } from './media-session.actions';
+
+export interface MediaControlsState {
+  enabled: boolean;
+  isSupported: boolean;
+}
+
+export const createState: StateCreator<
+  MediaControlsState & MediaControlsActions,
+  [],
+  [],
+  MediaControlsState
+> = () => ({
+  enabled: false,
+  isSupported: 'mediaSession' in navigator,
+});