refract

client/src/app/api/playbackApi.js

@@ -1,27 +1,29 @@
+import axios from 'axios';
 import { serverURL } from './apiConstants';
-const playbackURL = serverURL + 'playback/';
+export const playbackNamespace = 'playback';
+const playbackURL = serverURL + playbackNamespace;
 
 export const getStart = async () => {
-  const res = await fetch(playbackURL + 'start');
+  const res = await axios.get(playbackURL + '/start');
   return res;
 };
 
 export const getPause = async () => {
-  const res = await fetch(playbackURL + 'pause');
+  const res = axios.get(playbackURL + '/pause');
   return res;
 };
 
 export const getRoll = async () => {
-  const res = await fetch(playbackURL + 'roll');
+  const res = axios.get(playbackURL + '/roll');
   return res;
 };
 
 export const getPrevious = async () => {
-  const res = await fetch(playbackURL + 'previous');
+  const res = axios.get(playbackURL + '/previous');
   return res;
 };
 
 export const getNext = async () => {
-  const res = await fetch(playbackURL + 'next');
+  const res = axios.get(playbackURL + '/next');
   return res;
 };

client/src/features/control/MessageControl.jsx

@@ -1,17 +1,10 @@
-import { IconButton } from '@chakra-ui/button';
 import { FormControl, FormLabel } from '@chakra-ui/form-control';
-import { FiSun } from 'react-icons/fi';
 import { Input } from '@chakra-ui/input';
 import { useEffect, useState } from 'react';
 import { useSocket } from '../../app/context/socketContext';
+import VisibleIconBtn from '../../common/components/buttons/VisibleIconBtn';
 import style from './MessageControl.module.css';
 
-// Button definition
-const btnDef = {
-  colorScheme: 'blue',
-  icon: <FiSun />,
-};
-
 export default function MessageControl() {
   const socket = useSocket();
   const [pres, setPres] = useState({
@@ -79,11 +72,10 @@ export default function MessageControl() {
             }
           />
         </FormControl>
-        <IconButton
-          className={style.btn}
-          {...btnDef}
-          variant={pres.visible ? 'solid' : 'outline'}
-          onClick={() => messageControl('toggle-pres-visible')}
+        <VisibleIconBtn
+          size='md'
+          active={pres.visible}
+          clickHandler={() => messageControl('toggle-pres-visible')}
         />
       </div>
 
@@ -97,11 +89,10 @@ export default function MessageControl() {
             }
           />
         </FormControl>
-        <IconButton
-          className={style.btn}
-          {...btnDef}
-          variant={publ.visible ? 'solid' : 'outline'}
-          onClick={() => messageControl('toggle-publ-visible')}
+        <VisibleIconBtn
+          size='md'
+          active={publ.visible}
+          clickHandler={() => messageControl('toggle-publ-visible')}
         />
       </div>
     </>

client/src/features/control/MessageControl.module.css

@@ -1,13 +1,10 @@
 .inputContainer,
 .inputContainerWGap {
   display: flex;
+  align-items: flex-end;
   gap: 1em;
 }
 
 .inputContainerWGap {
   padding-top: 1em;
 }
-
-.btn {
-  align-self: flex-end;
-}

client/src/features/control/PlaybackControl.jsx

@@ -1,13 +1,7 @@
 import { IconButton } from '@chakra-ui/button';
 import style from './PlaybackControl.module.css';
 import Countdown from '../../common/components/countdown/Countdown';
-import {
-  FiPlay,
-  FiPause,
-  FiSkipBack,
-  FiSkipForward,
-  FiClock,
-} from 'react-icons/fi';
+import { FiPause, FiSkipBack, FiSkipForward, FiClock } from 'react-icons/fi';
 import { format } from 'date-fns';
 import { timeFormatSeconds } from '../../common/dateConfig';
 import { useEffect, useState } from 'react';
@@ -19,16 +13,12 @@ import {
   getNext,
 } from '../../app/api/playbackApi';
 import { useSocket } from '../../app/context/socketContext';
-
-// BUTTON DEFINITION
-const defProps = {
-  colorScheme: 'blackAlpha',
-  variant: 'outline',
-};
-
-const size = {
-  width: 90,
-};
+import PlayIconButton from '../../common/components/buttons/StartIconBtn';
+import StartIconBtn from '../../common/components/buttons/StartIconBtn';
+import PauseIconBtn from '../../common/components/buttons/PauseIconBtn';
+import PrevIconBtn from '../../common/components/buttons/PrevIconBtn';
+import NextIconBtn from '../../common/components/buttons/NextIconBtn';
+import RollIconBtn from '../../common/components/buttons/RollIconBtn';
 
 export default function PlaybackControl() {
   const socket = useSocket();
@@ -39,11 +29,18 @@ export default function PlaybackControl() {
     expectedFinish: null,
   });
 
+  const updateState = () => {
+    if (socket == null) return;
+
+    // ask for playstate
+    socket.emit('get-state');
+  };
+
   // handle incoming messages
   useEffect(() => {
     if (socket == null) return;
-    // ask for playstate
-    socket.emit('get-playstate');
+
+    updateState();
 
     // Handle playstate
     socket.on('playstate', (data) => {
@@ -67,11 +64,15 @@ export default function PlaybackControl() {
   const playbackControl = async (action, payload) => {
     switch (action) {
       case 'start': {
-        await getStart().then((res) => res.ok && setPlayback('start'));
+        await getStart().then(
+          (res) => res.statusText === 'OK' && setPlayback('start')
+        );
         break;
       }
       case 'pause': {
-        await getPause().then((res) => res.ok && setPlayback('pause'));
+        await getPause().then(
+          (res) => res.statusText === 'OK' && setPlayback('pause')
+        );
         break;
       }
       case 'roll': {
@@ -79,11 +80,11 @@ export default function PlaybackControl() {
         break;
       }
       case 'previous': {
-        await getPrevious().then((res) => console.log(res));
+        await getPrevious().then(updateState);
         break;
       }
       case 'next': {
-        await getNext().then((res) => console.log(res));
+        await getNext().then(updateState);
         break;
       }
       default:
@@ -115,38 +116,19 @@ export default function PlaybackControl() {
       </div>
 
       <div className={style.playbackContainer}>
-        <IconButton
-          {...size}
-          icon={<FiPlay />}
-          colorScheme='green'
-          onClick={() => playbackControl('start')}
-          variant={playback === 'start' ? 'solid' : 'outline'}
+        <StartIconBtn
+          active={playback === 'start'}
+          clickHandler={() => playbackControl('start')}
         />
-        <IconButton
-          {...size}
-          icon={<FiPause />}
-          colorScheme='orange'
-          onClick={() => playbackControl('pause')}
-          variant={playback === 'pause' ? 'solid' : 'outline'}
+        <PauseIconBtn
+          active={playback === 'pause'}
+          clickHandler={() => playbackControl('pause')}
         />
-        <IconButton
-          {...size}
-          {...defProps}
-          icon={<FiSkipBack />}
-          onClick={() => playbackControl('previous')}
-        />
-        <IconButton
-          {...size}
-          {...defProps}
-          icon={<FiSkipForward />}
-          onClick={() => playbackControl('next')}
-        />
-        <IconButton
-          {...size}
-          icon={<FiClock />}
-          colorScheme='blue'
-          onClick={() => playbackControl('roll')}
-          variant={playback === 'roll' ? 'solid' : 'outline'}
+        <PrevIconBtn clickHandler={() => playbackControl('previous')} />
+        <NextIconBtn clickHandler={() => playbackControl('next')} />
+        <RollIconBtn
+          active={playback === 'roll'}
+          clickHandler={() => playbackControl('roll')}
         />
       </div>
     </div>

client/src/features/editors/list/BlockBlock.jsx

@@ -1,4 +1,5 @@
 import AddIconBtn from '../../../common/components/buttons/AddIconBtn';
+import DelayIconBtn from '../../../common/components/buttons/DelayIconBtn';
 import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn';
 import style from './Block.module.css';
 
@@ -17,6 +18,7 @@ export default function BlockBlock(props) {
       <div className={style.actionOverlay}>
         <DeleteIconBtn clickHandler={deleteHandler} />
         <AddIconBtn clickHandler={addHandler} />
+        <DelayIconBtn />
       </div>
     </div>
   );