feat: unload - reload

client/src/app/api/playbackApi.js

@@ -34,3 +34,13 @@ export const getNext = async () => {
   const res = axios.get(playbackURL + '/next');
   return res;
 };
+
+export const getUnload = async () => {
+  const res = axios.get(playbackURL + '/unload');
+  return res;
+};
+
+export const getReload = async () => {
+  const res = axios.get(playbackURL + '/reload');
+  return res;
+};

client/src/common/components/buttons/AddIconBtn.jsx

@@ -9,6 +9,7 @@ export default function AddIconBtn(props) {
       colorScheme='blue'
       onClick={props.clickHandler}
       _focus={{ boxShadow: 'none' }}
+      {...props}
     />
   );
 }

client/src/common/components/buttons/BlockIconBtn.jsx

@@ -9,6 +9,7 @@ export default function BlockIconBtn(props) {
       colorScheme='purple'
       onClick={props.clickHandler}
       _focus={{ boxShadow: 'none' }}
+      {...props}
     />
   );
 }

client/src/common/components/buttons/CollapseIconBtn.jsx

@@ -10,6 +10,7 @@ export default function CollapseIconBtn(props) {
       variant={props.active ? 'solid' : 'outline'}
       onClick={props.clickHandler}
       _focus={{ boxShadow: 'none' }}
+      {...props}
     />
   );
 }

client/src/common/components/buttons/DelayIconBtn.jsx

@@ -9,6 +9,7 @@ export default function DelayIconBtn(props) {
       colorScheme='yellow'
       onClick={props.clickHandler}
       _focus={{ boxShadow: 'none' }}
+      {...props}
     />
   );
 }

client/src/common/components/buttons/DeleteIconBtn.jsx

@@ -9,6 +9,7 @@ export default function DeleteIconBtn(props) {
       colorScheme='red'
       onClick={props.clickHandler}
       _focus={{ boxShadow: 'none' }}
+      {...props}
     />
   );
 }

client/src/common/components/buttons/NextIconBtn.jsx

@@ -6,11 +6,12 @@ export default function NextIconBtn(props) {
     <IconButton
       icon={<FiSkipForward />}
       colorScheme='whiteAlpha'
-      backgroundColor='#ffffff05'
+      backgroundColor='#ffffff11'
       variant='outline'
       onClick={props.clickHandler}
       width={90}
       _focus={{ boxShadow: 'none' }}
+      {...props}
     />
   );
 }

client/src/common/components/buttons/PauseIconBtn.jsx

@@ -10,6 +10,7 @@ export default function PauseIconBtn(props) {
       onClick={props.clickHandler}
       width={120}
       _focus={{ boxShadow: 'none' }}
+      {...props}
     />
   );
 }

client/src/common/components/buttons/PrevIconBtn.jsx

@@ -6,11 +6,12 @@ export default function PrevIconBtn(props) {
     <IconButton
       icon={<FiSkipBack />}
       colorScheme='whiteAlpha'
-      backgroundColor='#ffffff05'
+      backgroundColor='#ffffff11'
       variant='outline'
       onClick={props.clickHandler}
       width={90}
       _focus={{ boxShadow: 'none' }}
+      {...props}
     />
   );
 }

client/src/common/components/buttons/ReloadIconBtn.jsx

@@ -11,6 +11,7 @@ export default function ReloadIconButton(props) {
       onClick={props.clickHandler}
       width={90}
       _focus={{ boxShadow: 'none' }}
+      {...props}
     />
   );
 }

client/src/common/components/buttons/RollIconBtn.jsx

@@ -9,8 +9,9 @@ export default function RollIconBtn(props) {
       variant={props.active ? 'solid' : 'outline'}
       onClick={props.clickHandler}
       width={120}
-      disabled
       _focus={{ boxShadow: 'none' }}
+      {...props}
+      disabled
     />
   );
 }

client/src/common/components/buttons/SettingsIconBtn.jsx

@@ -10,6 +10,7 @@ export default function SettingsIconBtn(props) {
       variant='outline'
       onClick={props.clickHandler}
       _focus={{ boxShadow: 'none' }}
+      {...props}
     />
   );
 }

client/src/common/components/buttons/StartIconBtn.jsx

@@ -10,6 +10,7 @@ export default function StartIconBtn(props) {
       onClick={props.clickHandler}
       width={120}
       _focus={{ boxShadow: 'none' }}
+      {...props}
     />
   );
 }

client/src/common/components/buttons/UnloadIconBtn.jsx

@@ -11,6 +11,7 @@ export default function UnloadIconBtn(props) {
       onClick={props.clickHandler}
       width={90}
       _focus={{ boxShadow: 'none' }}
+      {...props}
     />
   );
 }

client/src/common/components/buttons/VisibleIconBtn.jsx

@@ -10,6 +10,7 @@ export default function VisibleIconBtn(props) {
       variant={props.active ? 'solid' : 'outline'}
       onClick={props.clickHandler}
       _focus={{ boxShadow: 'none' }}
+      {...props}
     />
   );
 }

client/src/features/control/PlaybackControl.jsx

@@ -20,6 +20,7 @@ export default function PlaybackControl() {
     startedAt: null,
     expectedFinish: null,
   });
+  const [selectedId, setSelectedId] = useState(null);
 
   const resetTimer = () => {
     setTimer({
@@ -35,6 +36,7 @@ export default function PlaybackControl() {
 
     socket.emit('get-timer');
     socket.emit('get-playstate');
+    socket.emit('get-selected-id');
 
     // Handle playstate
     socket.on('playstate', (data) => {
@@ -46,10 +48,16 @@ export default function PlaybackControl() {
       setTimer({ ...data });
     });
 
+    // Handle selected event
+    socket.on('selected-id', (data) => {
+      setSelectedId(data);
+    });
+
     // Clear listener
     return () => {
       socket.off('playstate');
       socket.off('timer');
+      socket.off('selected-id');
     };
   }, [socket]);
 
@@ -72,6 +80,14 @@ export default function PlaybackControl() {
         socket.emit('set-playstate', 'next');
         resetTimer();
         break;
+      case 'unload':
+        socket.emit('set-playstate', 'unload');
+        resetTimer();
+        break;
+      case 'reload':
+        socket.emit('set-playstate', 'reload');
+        resetTimer();
+        break;
       default:
         break;
     }
@@ -100,10 +116,12 @@ export default function PlaybackControl() {
         <StartIconBtn
           active={playback === 'start'}
           clickHandler={() => playbackControl('start')}
+          disabled={!selectedId}
         />
         <PauseIconBtn
           active={playback === 'pause'}
           clickHandler={() => playbackControl('pause')}
+          disabled={!selectedId}
         />
         <RollIconBtn
           active={playback === 'roll'}
@@ -113,8 +131,14 @@ export default function PlaybackControl() {
       <div className={style.playbackContainer}>
         <PrevIconBtn clickHandler={() => playbackControl('previous')} />
         <NextIconBtn clickHandler={() => playbackControl('next')} />
-        <UnloadIconBtn clickHandler={() => playbackControl('unload')} />
-        <ReloadIconButton clickHandler={() => playbackControl('reload')} />
+        <UnloadIconBtn
+          clickHandler={() => playbackControl('unload')}
+          disabled={!selectedId}
+        />
+        <ReloadIconButton
+          clickHandler={() => playbackControl('reload')}
+          disabled={!selectedId}
+        />
       </div>
     </div>
   );

client/src/features/viewers/ViewWrapper.jsx

@@ -48,7 +48,7 @@ const withSocket = (Component) => {
       subtitleNext: '',
       presenterNext: '',
     });
-    const [selectedId, setSelectedId] = useState({});
+    const [selectedId, setSelectedId] = useState(null);
     const [general, setGeneral] = useState({
       title: '',
       url: '',