From 49eb78b03c1636591796fc74be230993ca2f200c Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Tue, 8 Nov 2022 03:58:13 -0800
Subject: [PATCH] Add configurable web audio device

---
 src/renderer/components/audio-player/index.tsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/renderer/components/audio-player/index.tsx b/src/renderer/components/audio-player/index.tsx
index 3a9cca32d..f6738bcfc 100644
--- a/src/renderer/components/audio-player/index.tsx
+++ b/src/renderer/components/audio-player/index.tsx
@@ -4,13 +4,16 @@ import {
   useRef,
   useState,
   useCallback,
+  useEffect,
 } from 'react';
+import isElectron from 'is-electron';
 import ReactPlayer, { ReactPlayerProps } from 'react-player';
 import { Song } from '@/renderer/api/types';
 import {
   crossfadeHandler,
   gaplessHandler,
 } from '@/renderer/components/audio-player/utils/list-handlers';
+import { useSettingsStore } from '@/renderer/store/settings.store';
 import { CrossfadeStyle, PlaybackStyle, PlayerStatus } from '@/renderer/types';
 
 interface AudioPlayerProps extends ReactPlayerProps {
@@ -54,6 +57,9 @@ export const AudioPlayer = forwardRef(
     const player1Ref = useRef<any>(null);
     const player2Ref = useRef<any>(null);
     const [isTransitioning, setIsTransitioning] = useState(false);
+    const audioDeviceId = useSettingsStore(
+      (state) => state.player.audioDeviceId
+    );
 
     useImperativeHandle(ref, () => ({
       get player1() {
@@ -147,6 +153,18 @@ export const AudioPlayer = forwardRef(
       [isTransitioning, player2?.container]
     );
 
+    useEffect(() => {
+      if (isElectron()) {
+        if (audioDeviceId) {
+          player1Ref.current?.getInternalPlayer()?.setSinkId(audioDeviceId);
+          player2Ref.current?.getInternalPlayer()?.setSinkId(audioDeviceId);
+        } else {
+          player1Ref.current?.getInternalPlayer()?.setSinkId('');
+          player2Ref.current?.getInternalPlayer()?.setSinkId('');
+        }
+      }
+    }, [audioDeviceId]);
+
     return (
       <>
         <ReactPlayer