Hotfix/4.0.2 (#64)

* hotfix 4.0.2: implement playback router
* hotfix 4.0.2: fix studio clock styles
* hotfix 4.0.2: broadcast clock always
* hotfix 4.0.2: fix overflow in timer control

client/src/features/control/PlaybackButtons.jsx

@@ -1,5 +1,5 @@
 import { memo } from 'react';
-import style from './PlaybackControl.module.css';
+import style from './PlaybackControl.module.scss';
 import StartIconBtn from 'common/components/buttons/StartIconBtn';
 import PauseIconBtn from 'common/components/buttons/PauseIconBtn';
 import PrevIconBtn from 'common/components/buttons/PrevIconBtn';

client/src/features/control/PlaybackControl.jsx

@@ -1,4 +1,4 @@
-import style from './PlaybackControl.module.css';
+import style from './PlaybackControl.module.scss';
 import { useEffect, useState } from 'react';
 import { useSocket } from 'app/context/socketContext';
 import PlaybackButtons from './PlaybackButtons';

client/src/features/control/PlaybackControl.module.scss

@@ -97,6 +97,10 @@
   grid-area: fin;
 }
 
+.roll {
+  grid-area: 2 / 2 / 2 / 4 ;
+}
+
 .time {
   color: #ccc;
   font-size: 1.1em;

client/src/features/control/PlaybackTimer.jsx

@@ -1,9 +1,9 @@
-import style from './PlaybackControl.module.css';
+import style from './PlaybackControl.module.scss';
 import Countdown from 'common/components/countdown/Countdown';
-import { stringFromMillis } from 'common/utils/dateConfig';
-import { Tooltip } from '@chakra-ui/react';
-import { Button } from '@chakra-ui/button';
-import { memo } from 'react';
+import {stringFromMillis} from 'common/utils/dateConfig';
+import {Tooltip} from '@chakra-ui/react';
+import {Button} from '@chakra-ui/button';
+import {memo} from 'react';
 
 const areEqual = (prevProps, nextProps) => {
   return (
@@ -16,7 +16,7 @@ const areEqual = (prevProps, nextProps) => {
 };
 
 const PlaybackTimer = (props) => {
-  const { timer, playback, handleIncrement } = props;
+  const {timer, playback, handleIncrement} = props;
   const started = stringFromMillis(timer.startedAt, true);
   const finish = stringFromMillis(timer.expectedFinish, true);
   const isNegative = timer.running < 0;
@@ -28,7 +28,7 @@ const PlaybackTimer = (props) => {
     width: '2.9em',
     colorScheme: 'whiteAlpha',
     variant: 'outline',
-    _focus: { boxShadow: 'none' },
+    _focus: {boxShadow: 'none'},
   };
 
   return (
@@ -36,12 +36,12 @@ const PlaybackTimer = (props) => {
       <div className={style.timeContainer}>
         <div className={style.indicators}>
           <Tooltip label='Roll mode active'>
-            <div className={isRolling ? style.indRollActive : style.indRoll} />
+            <div className={isRolling ? style.indRollActive : style.indRoll}/>
           </Tooltip>
           <div
             className={isNegative ? style.indNegativeActive : style.indNegative}
           />
-          <div className={style.indDelay} />
+          <div className={style.indDelay}/>
         </div>
         <div className={style.timer}>
           <Countdown
@@ -51,7 +51,7 @@ const PlaybackTimer = (props) => {
           />
         </div>
         {isWaiting ? (
-          <div className={style.start}>
+          <div className={style.roll}>
             <span className={style.rolltag}>Roll: Countdown to start</span>
             <span className={style.time}>{''}</span>
           </div>