feat: play next track when current one ends

gmus-web/src/components/app.tsx

@@ -4,6 +4,7 @@ import { StateInspector } from 'reinspect';
 import { stateSet } from '../actions';
 import { DispatchContext, StateContext } from '../context/state';
 import { useMaster } from '../hooks/master';
+import { usePlayQueue } from '../hooks/queue';
 import { useKeepalive } from '../hooks/socket';
 import { useCurrentlyPlayingSongInfo } from '../hooks/status';
 import { isMaster } from '../selectors';
@@ -36,6 +37,13 @@ export const App: React.FC<Props> = ({ socket }) => {
     [dispatch],
   );
 
+  const { onNext } = usePlayQueue();
+  const onEnded = useCallback(() => {
+    if (state.player.songId) {
+      onNext(state.player.songId);
+    }
+  }, [onNext, state.player.songId]);
+
   return (
     <>
       {isMaster(state) && !!state.player.songId && (
@@ -45,6 +53,7 @@ export const App: React.FC<Props> = ({ socket }) => {
           seekTime={state.player.seekTime}
           onTimeUpdate={onTimeUpdate}
           timeUpdateFPS={1}
+          onEnded={onEnded}
         />
       )}
       <StateInspector name="ui">

gmus-web/src/components/player.tsx

@@ -7,6 +7,7 @@ type Props = {
   playing: boolean;
   seekTime: number;
   onTimeUpdate: (time: number) => void;
+  onEnded: () => void;
   timeUpdateFPS: number;
 };
 
@@ -41,6 +42,7 @@ export const Player: React.FC<Props> = ({
   playing,
   seekTime,
   onTimeUpdate: reportTimeUpdate,
+  onEnded,
   timeUpdateFPS,
 }) => {
   const audio = useRef<HTMLAudioElement | null>(null);
@@ -136,6 +138,7 @@ export const Player: React.FC<Props> = ({
       onProgress={onProgress}
       onTimeUpdate={onTimeUpdateThrottled}
       onWaiting={onWaiting}
+      onEnded={onEnded}
       ref={audio}
       src={src}
     />