Просмотр исходного кода

feat: play music when active (not just master)

Fela Maslen 4 лет назад
Родитель
Сommit
6f6b97fa5e
1 измененных файлов с 29 добавлено и 5 удалено
  1. 29 5
      gmus-web/src/components/app.tsx

+ 29 - 5
gmus-web/src/components/app.tsx

@@ -1,4 +1,12 @@
-import React, { Suspense, useCallback, useContext, useMemo } from 'react';
+import React, {
+  Suspense,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useMediaQuery } from 'react-responsive';
 import { StateInspector } from 'reinspect';
 
@@ -7,7 +15,7 @@ import { DispatchContext, StateContext } from '../context/state';
 import { usePlayQueue } from '../hooks/queue';
 import { useKeepalive } from '../hooks/socket';
 import { useCurrentlyPlayingSongInfo } from '../hooks/status';
-import { isMaster } from '../selectors';
+import { isActiveClient, isMaster } from '../selectors';
 import { getSongUrl } from '../utils/url';
 import { LoadingWrapper } from './identify';
 import { Interact, Props as InteractProps } from './interact';
@@ -50,13 +58,29 @@ export const App: React.FC<Props> = ({
     isDesktop,
   ]);
 
+  const shouldPlay = isActiveClient(state) && !!state.player.songId;
+  const wasPlaying = useRef<boolean>(false);
+  const [seekTime, setSeekTime] = useState<number>(-1);
+  useEffect(() => {
+    if (shouldPlay && !wasPlaying.current) {
+      wasPlaying.current = true;
+      setSeekTime(state.player.seekTime === -1 ? state.player.currentTime : state.player.seekTime);
+    } else if (state.player.seekTime !== -1) {
+      setSeekTime(state.player.seekTime);
+    }
+
+    if (!shouldPlay && wasPlaying.current) {
+      wasPlaying.current = false;
+    }
+  }, [shouldPlay, state.player.currentTime, state.player.seekTime]);
+
   return (
     <>
-      {isMaster(state) && !!state.player.songId && (
+      {shouldPlay && (
         <Player
-          src={getSongUrl(state.player.songId)}
+          src={getSongUrl(state.player.songId as number)}
           playing={state.player.playing}
-          seekTime={state.player.seekTime}
+          seekTime={seekTime}
           onTimeUpdate={onTimeUpdate}
           timeUpdateFPS={1}
           onEnded={onNext}