style views

apps/client/src/common/components/progress-bar/ProgressBar.scss

@@ -16,7 +16,6 @@ $progress-bar-br: 6px;
 
 .progress-bar__indicator {
   height: $progress-bar-size;
-  border-radius: $progress-bar-br;
   background-color: var(--timer-progress-override, $accent-color);
   transition: 1s linear;
   transition-property: width;

apps/client/src/common/components/schedule/Schedule.tsx

@@ -10,7 +10,7 @@ interface ScheduleProps {
 }
 
 export default function Schedule({ className }: ScheduleProps) {
-  const { paginatedEvents, selectedEventId, isBackstage } = useSchedule();
+  const { paginatedEvents, selectedEventId, isBackstage, scheduleType } = useSchedule();
 
   if (paginatedEvents?.length < 1) {
     return <Empty text='No events to show' />;
@@ -21,10 +21,14 @@ export default function Schedule({ className }: ScheduleProps) {
   return (
     <ul className={`schedule ${className}`}>
       {paginatedEvents.map((event) => {
-        if (event.id === selectedEventId) {
-          selectedState = 'now';
-        } else if (selectedState === 'now') {
-          selectedState = 'future';
+        if (scheduleType === 'past' || scheduleType === 'future') {
+          selectedState = scheduleType;
+        } else {
+          if (event.id === selectedEventId) {
+            selectedState = 'now';
+          } else if (selectedState === 'now') {
+            selectedState = 'future';
+          }
         }
         return (
           <ScheduleItem

apps/client/src/common/components/schedule/ScheduleContext.tsx

@@ -7,6 +7,7 @@ interface ScheduleContextState {
   events: OntimeEvent[];
   paginatedEvents: OntimeEvent[];
   selectedEventId: string | null;
+  scheduleType: 'past' | 'now' | 'future';
   numPages: number;
   visiblePage: number;
   isBackstage: boolean;
@@ -27,7 +28,7 @@ export const ScheduleProvider = ({
   events,
   selectedEventId,
   isBackstage = false,
-  eventsPerPage = 8,
+  eventsPerPage = 7,
   time = 10,
 }: PropsWithChildren<ScheduleProviderProps>) => {
   const [visiblePage, setVisiblePage] = useState(0);
@@ -36,6 +37,18 @@ export const ScheduleProvider = ({
   const eventStart = eventsPerPage * visiblePage;
   const eventEnd = eventsPerPage * (visiblePage + 1);
   const paginatedEvents = events.slice(eventStart, eventEnd);
+  const selectedEventIndex = events.findIndex((event) => event.id === selectedEventId);
+
+  const resolveScheduleType = () => {
+    if (selectedEventIndex >= eventStart && selectedEventIndex < eventEnd) {
+      return 'now';
+    }
+    if (selectedEventIndex > eventEnd) {
+      return 'past';
+    }
+    return 'future';
+  };
+  const scheduleType = resolveScheduleType();
 
   // every SCROLL_TIME go to the next array
   useInterval(() => {
@@ -51,6 +64,7 @@ export const ScheduleProvider = ({
         events,
         paginatedEvents,
         selectedEventId,
+        scheduleType,
         numPages,
         visiblePage,
         isBackstage,

apps/client/src/features/viewers/backstage/Backstage.tsx

@@ -84,7 +84,12 @@ export default function Backstage(props: BackstageProps) {
         </div>
       </div>
 
-      <ProgressBar className='progress-container' now={time.current} complete={time.duration} hidden={!showProgress} />
+      <ProgressBar
+        className='progress-container'
+        now={time.current ?? undefined}
+        complete={time.duration ?? undefined}
+        hidden={!showProgress}
+      />
 
       <div className='now-container'>
         <AnimatePresence>

apps/client/src/features/viewers/timer/Timer.tsx

@@ -23,16 +23,16 @@ const formatOptions = {
 // motion
 const titleVariants = {
   hidden: {
-    y: 500,
+    x: -2500,
   },
   visible: {
-    y: 0,
+    x: 0,
     transition: {
       duration: 1,
     },
   },
   exit: {
-    y: 500,
+    x: -2500,
   },
 };