video overlay

web/src/routes/Recording.jsx

@@ -1,11 +1,8 @@
 import { h } from 'preact';
-import { Link } from 'preact-router/match';
-import { closestTo, format, isEqual, parseISO } from 'date-fns';
+import { closestTo, format, parseISO } from 'date-fns';
 import ActivityIndicator from '../components/ActivityIndicator';
-import Button from '../components/Button';
-import Calendar from '../components/Calendar';
-import Carousel from '../components/Carousel';
 import Heading from '../components/Heading';
+import RecordingPlaylist from '../components/RecordingPlaylist';
 import VideoPlayer from '../components/VideoPlayer';
 import { FetchStatus, useApiHost, useRecording } from '../api';
 
@@ -24,32 +21,12 @@ export default function Recording({ camera, date, hour }) {
   );
   const selectedKey = format(selectedDate, 'yyyy-MM-dd');
   const [year, month, day] = selectedKey.split('-');
-  const calendar = [];
-  const buttons = [];
   const playlist = [];
   const hours = [];
 
   for (const item of data) {
-    const date = parseISO(item.date);
-    const events = item.recordings.map((i) => i.events);
-    calendar.push(
-      <Link href={`/recordings/${camera}/${item.date}`}>
-        <Calendar
-          date={date}
-          hours={events.length}
-          events={events.reduce((a, b) => a + b)}
-          selected={isEqual(selectedDate, date)}
-        />
-      </Link>
-    );
-
     if (item.date === selectedKey) {
       for (const recording of item.recordings) {
-        buttons.push(
-          <Button href={`/recordings/${camera}/${item.date}/${recording.hour}`} type="text">
-            {recording.hour}:00
-          </Button>
-        );
         playlist.push({
           name: `${selectedKey} ${recording.hour}:00`,
           description: `${camera} recording @ ${recording.hour}:00.`,
@@ -76,24 +53,11 @@ export default function Recording({ camera, date, hour }) {
     }
   }
 
-  const selectDate = (flkty) => {
-    flkty.select(recordingDates.indexOf(selectedKey), false, true);
-  };
-
-  const selectHour = (flkty) => {
-    flkty.select(selectedHour, false, true);
-  };
-
   return (
     <div className="space-y-4">
       <Heading>{camera} Recordings</Heading>
 
-      <Carousel flickityRef={selectDate} options={{ pageDots: false }}>
-        {calendar}
-      </Carousel>
-
       <VideoPlayer
-        date={selectedKey}
         onReady={(player) => {
           if (player.playlist) {
             player.playlist(playlist);
@@ -104,11 +68,9 @@ export default function Recording({ camera, date, hour }) {
             this.player = player;
           }
         }}
-      />
-
-      <Carousel flickityRef={selectHour} options={{ pageDots: false }}>
-        {buttons}
-      </Carousel>
+      >
+        <RecordingPlaylist camera={camera} recordings={data} selectedDate={selectedKey} />
+      </VideoPlayer>
     </div>
   );
 }