chore: extract views directory

apps/client/src/AppRouter.tsx

@@ -28,7 +28,7 @@ const ClockView = React.lazy(() => import('./features/viewers/clock/Clock'));
 const Countdown = React.lazy(() => import('./features/viewers/countdown/Countdown'));
 
 const Backstage = React.lazy(() => import('./features/viewers/backstage/Backstage'));
-const Timeline = React.lazy(() => import('./features/viewers/timeline/TimelinePage'));
+const Timeline = React.lazy(() => import('./views/timeline/TimelinePage'));
 const Public = React.lazy(() => import('./features/viewers/public/Public'));
 const Lower = React.lazy(() => import('./features/viewers/lower-thirds/LowerThird'));
 const StudioClock = React.lazy(() => import('./features/viewers/studio/StudioClock'));

apps/client/src/features/viewers/ViewWrapper.tsx

@@ -86,11 +86,6 @@ const withData = <P extends WithDataProps>(Component: ComponentType<P>) => {
       timerType: eventNow?.timerType ?? null,
     };
 
-    // // prevent render until we get all the data we need
-    // if (!viewSettings) {
-    //   return null;
-    // }
-
     return (
       <>
         <ViewNavigationMenu />

apps/client/src/features/viewers/timeline/Timeline.module.scss → apps/client/src/views/timeline/Timeline.module.scss

@@ -1,4 +1,4 @@
-@use '../../../theme/viewerDefs' as *;
+@use '../../theme/viewerDefs' as *;
 
 $timeline-height: 1rem;
 $view-background: $ui-black;

apps/client/src/features/viewers/timeline/TimelineEntry.tsx → apps/client/src/views/timeline/TimelineEntry.tsx

@@ -1,8 +1,8 @@
-import { useTimelineStatus, useTimer } from '../../../common/hooks/useSocket';
-import { getProgress } from '../../../common/utils/getProgress';
-import { alpha, cx } from '../../../common/utils/styleUtils';
-import { formatDuration, formatTime } from '../../../common/utils/time';
-import { useTranslation } from '../../../translation/TranslationProvider';
+import { useTimelineStatus, useTimer } from '../../common/hooks/useSocket';
+import { getProgress } from '../../common/utils/getProgress';
+import { alpha, cx } from '../../common/utils/styleUtils';
+import { formatDuration, formatTime } from '../../common/utils/time';
+import { useTranslation } from '../../translation/TranslationProvider';
 
 import { getStatusLabel, getTimeToStart } from './timeline.utils';
 

apps/client/src/features/viewers/timeline/TimelinePage.scss → apps/client/src/views/timeline/TimelinePage.scss

@@ -1,4 +1,4 @@
-@use '../../../theme/viewerDefs' as *;
+@use '../../theme/viewerDefs' as *;
 
 .timeline {
   width: 100vw;

apps/client/src/features/viewers/timeline/TimelinePage.tsx → apps/client/src/views/timeline/TimelinePage.tsx

@@ -1,12 +1,12 @@
 import { useMemo } from 'react';
 import { MaybeString, OntimeEvent, ProjectData, Runtime, Settings } from 'ontime-types';
 
-import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
-import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
-import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
-import { formatDuration, formatTime, getDefaultFormat } from '../../../common/utils/time';
-import { useTranslation } from '../../../translation/TranslationProvider';
-import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
+import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
+import { useWindowTitle } from '../../common/hooks/useWindowTitle';
+import { ViewExtendedTimer } from '../../common/models/TimeManager.type';
+import { formatDuration, formatTime, getDefaultFormat } from '../../common/utils/time';
+import SuperscriptTime from '../../features/viewers/common/superscript-time/SuperscriptTime';
+import { useTranslation } from '../../translation/TranslationProvider';
 
 import Section from './timeline-section/TimelineSection';
 import Timeline from './Timeline';
@@ -70,7 +70,6 @@ export default function TimelinePage(props: TimelinePageProps) {
       followedByStatus = `T - ${formatDuration(timeToStart)}`;
     }
   }
-
   return (
     <div className='timeline'>
       <ViewParamsEditor viewOptions={progressOptions} />

apps/client/src/features/viewers/timeline/timeline-section/TimelineSection.tsx → apps/client/src/views/timeline/timeline-section/TimelineSection.tsx

@@ -1,7 +1,7 @@
 import { memo } from 'react';
 import { MaybeString } from 'ontime-types';
 
-import { cx } from '../../../../common/utils/styleUtils';
+import { cx } from '../../../common/utils/styleUtils';
 
 interface SectionProps {
   category: 'now' | 'next';

apps/client/src/features/viewers/timeline/timeline.options.ts → apps/client/src/views/timeline/timeline.options.ts

@@ -1,5 +1,5 @@
-import { getTimeOption } from '../../../common/components/view-params-editor/constants';
-import { ViewOption } from '../../../common/components/view-params-editor/types';
+import { getTimeOption } from '../../common/components/view-params-editor/constants';
+import { ViewOption } from '../../common/components/view-params-editor/types';
 
 export const getTimelineOptions = (timeFormat: string): ViewOption[] => {
   return [

apps/client/src/features/viewers/timeline/timeline.utils.ts → apps/client/src/views/timeline/timeline.utils.ts

@@ -11,9 +11,9 @@ import {
   MILLIS_PER_HOUR,
 } from 'ontime-utils';
 
-import { clamp } from '../../../common/utils/math';
-import { formatDuration } from '../../../common/utils/time';
-import { isStringBoolean } from '../common/viewUtils';
+import { clamp } from '../../common/utils/math';
+import { formatDuration } from '../../common/utils/time';
+import { isStringBoolean } from '../../features/viewers/common/viewUtils';
 
 import type { ProgressStatus } from './TimelineEntry';