Implement FF and rewind schedule

web2/src/components/channel_config/ChannelProgrammingConfig.tsx

@@ -45,6 +45,11 @@ import Delete from '@mui/icons-material/Delete';
 import { useRemoveDuplicates } from '../../hooks/programming_controls/useRemoveDuplicates.ts';
 import { range } from 'lodash-es';
 import { useRestrictHours } from '../../hooks/programming_controls/useRestrictHours.ts';
+import { FastForward, FastRewind } from '@mui/icons-material';
+import {
+  useFastForwardSchedule,
+  useRewindSchedule,
+} from '../../hooks/programming_controls/useSlideSchedule.ts';
 
 // dayjs.extend(duration);
 
@@ -71,6 +76,9 @@ export function ChannelProgrammingConfig() {
   const removeDuplicatePrograms = useRemoveDuplicates();
   const restrictHours = useRestrictHours();
 
+  const fastForward = useFastForwardSchedule();
+  const rewind = useRewindSchedule();
+
   const startTime = channel ? dayjs(channel.startTime) : dayjs();
   const endTime = startTime.add(channel?.duration ?? 0, 'milliseconds');
 
@@ -229,6 +237,24 @@ export function ChannelProgrammingConfig() {
                   Restrict Hours
                 </Button>
               </Grid2>
+              <Grid2 xs={3}>
+                <Button
+                  variant="contained"
+                  onClick={() => fastForward(60 * 1000)}
+                  startIcon={<FastForward />}
+                >
+                  Fast Forward
+                </Button>
+              </Grid2>
+              <Grid2 xs={3}>
+                <Button
+                  variant="contained"
+                  onClick={() => rewind(60 * 1000)}
+                  startIcon={<FastRewind />}
+                >
+                  Rewind
+                </Button>
+              </Grid2>
             </Grid2>
           </AccordionDetails>
         </Accordion>

web2/src/hooks/programming_controls/useSlideSchedule.ts

@@ -0,0 +1,23 @@
+import { setChannelStartTime } from '../../store/channelEditor/actions.ts';
+import useStore from '../../store/index.ts';
+import { materializedProgramListSelector } from '../../store/selectors.ts';
+
+const useSlide = () => {
+  const channel = useStore(({ channelEditor }) => channelEditor.currentEntity);
+  const programs = useStore(materializedProgramListSelector);
+  return (amount: number) => {
+    if (channel && amount !== 0 && programs.length > 0) {
+      setChannelStartTime(channel.startTime + amount);
+    }
+  };
+};
+
+export const useFastForwardSchedule = () => {
+  const slide = useSlide();
+  return (amount: number) => slide(amount < 0 ? amount : -amount);
+};
+
+export const useRewindSchedule = () => {
+  const slide = useSlide();
+  return (amount: number) => slide(Math.abs(amount));
+};

web2/src/store/channelEditor/actions.ts

@@ -80,6 +80,13 @@ export const setCurrentChannel = (
     }
   });
 
+export const changeChannelStartTime = (newStartTime: number) =>
+  useStore.setState(({ channelEditor }) => {
+    if (channelEditor.currentEntity) {
+      channelEditor.currentEntity.startTime = newStartTime;
+    }
+  });
+
 export const setCurrentChannelProgramming = (
   programming: CondensedChannelProgramming,
 ) =>