inti relative mode

apps/client/src/common/hooks/useSocket.ts

@@ -1,4 +1,4 @@
-import { RuntimeStore, SimpleDirection, SimplePlayback, TimerMessage } from 'ontime-types';
+import { OffsetMode, RuntimeStore, SimpleDirection, SimplePlayback, TimerMessage } from 'ontime-types';
 
 import { useRuntimeStore } from '../stores/runtime';
 import { socketSendJson } from '../utils/socket';
@@ -189,6 +189,12 @@ export const useIsOnline = createSelector((state: RuntimeStore) => ({
   isOnline: state.ping > 0,
 }));
 
+export const useOffsetMode = createSelector((state: RuntimeStore) => ({
+  offsetMode: state.runtime.offsetMode,
+}));
+
+export const setOffsetMode = (payload: OffsetMode) => socketSendJson('offsetmode', payload);
+
 export const usePlayback = () => {
   const featureSelector = (state: RuntimeStore) => ({
     playback: state.timer.playback,

apps/client/src/features/rundown/rundown-header/RundownHeader.tsx

@@ -1,5 +1,7 @@
 import { Button, ButtonGroup } from '@chakra-ui/react';
+import { OffsetMode } from 'ontime-types';
 
+import { setOffsetMode, useOffsetMode } from '../../../common/hooks/useSocket';
 import { AppMode, useAppMode } from '../../../common/stores/appModeStore';
 
 import RundownMenu from './RundownMenu';
@@ -12,6 +14,8 @@ export default function RundownHeader() {
   const setRunMode = () => setAppMode(AppMode.Run);
   const setEditMode = () => setAppMode(AppMode.Edit);
 
+  const { offsetMode } = useOffsetMode();
+
   return (
     <div className={style.header}>
       <ButtonGroup isAttached>
@@ -22,6 +26,22 @@ export default function RundownHeader() {
           Edit
         </Button>
       </ButtonGroup>
+      <ButtonGroup isAttached>
+        <Button
+          size='sm'
+          variant={offsetMode === OffsetMode.Absolute ? 'ontime-filled' : 'ontime-subtle'}
+          onClick={() => setOffsetMode(OffsetMode.Absolute)}
+        >
+          Absolute
+        </Button>
+        <Button
+          size='sm'
+          variant={offsetMode === OffsetMode.Relative ? 'ontime-filled' : 'ontime-subtle'}
+          onClick={() => setOffsetMode(OffsetMode.Relative)}
+        >
+          Relative
+        </Button>
+      </ButtonGroup>
       <RundownMenu />
     </div>
   );