video overlay

web/src/components/Accordion.jsx

@@ -0,0 +1,20 @@
+import { h } from 'preact';
+import { useState } from 'preact/hooks';
+import ArrowDropdown from '../icons/ArrowDropdown';
+import ArrowDropup from '../icons/ArrowDropup';
+
+export default function Accordion({ title, children, selected = false }) {
+  const [active, setActive] = useState(selected);
+  const toggle = () => setActive(!active);
+  return (
+    <div className="w-full border border-white border-opacity-20 rounded-md mb-4 text-xs">
+      <div className="relative w-full cursor-pointer md:text-lg" onClick={toggle}>
+        <div className="w-90 py-1 px-2 text-center font-bold">{title}</div>
+        <div className="absolute top-0 md:-top-1 right-0 md:right-2 w-6 md:w-10 h-6 md:h-10">
+          {active ? <ArrowDropup /> : <ArrowDropdown />}
+        </div>
+      </div>
+      <div className={`bg-white bg-opacity-20 rounded-b-md p-2 ${active ? '' : 'hidden'}`}>{children}</div>
+    </div>
+  );
+}

web/src/components/Carousel.jsx

@@ -1,65 +0,0 @@
-import { h, Component } from 'preact';
-import Flickity from 'flickity';
-import 'flickity/css/flickity.css';
-
-export default class Carousel extends Component {
-  constructor(props) {
-    super(props);
-
-    this.carousel = null;
-    this.flkty = null;
-  }
-
-  create() {
-    if (this.carousel) {
-      this.flkty = new Flickity(this.carousel, this.props.options);
-
-      if (this.props.flickityRef) {
-        this.props.flickityRef(this.flkty);
-      }
-    }
-  }
-
-  destroy() {
-    if (this.flkty) {
-      this.flkty.destroy();
-      this.flkty = null;
-      this.carousel = null;
-    }
-  }
-
-  componentWillUpdate() {
-    this.destroy();
-  }
-
-  componentDidUpdate() {
-    this.create();
-  }
-
-  componentWillUnmount() {
-    this.destroy();
-  }
-
-  componentDidMount() {
-    this.create();
-  }
-
-  render(props) {
-    return h(
-      this.props.elementType,
-      {
-        className: this.props.className,
-        ref: (c) => {
-          this.carousel = c;
-        },
-      },
-      this.props.children
-    );
-  }
-}
-
-Carousel.defaultProps = {
-  options: {},
-  className: '',
-  elementType: 'div',
-};

web/src/components/RecordingPlaylist.jsx

@@ -0,0 +1,53 @@
+import { h } from 'preact';
+import { useState } from 'preact/hooks';
+import { format, parseISO } from 'date-fns';
+import Accordion from '../components/Accordion';
+import Link from '../components/Link';
+import Menu from '../icons/Menu';
+import MenuOpen from '../icons/MenuOpen';
+
+export default function RecordingPlaylist({ camera, recordings, selectedDate }) {
+  const [active, setActive] = useState(true);
+  const toggle = () => setActive(!active);
+
+  const result = [];
+  for (const recording of recordings.slice().reverse()) {
+    const date = parseISO(recording.date);
+    result.push(
+      <Accordion title={format(date, 'MMM d, yyyy')} selected={recording.date === selectedDate}>
+        {recording.recordings.map((item) => (
+          <div className="text-white bg-black bg-opacity-50 border-b border-gray-500 py-2 px-4 mb-1">
+            <Link href={`/recordings/${camera}/${recording.date}/${item.hour}`} type="text">
+              {item.hour}:00
+            </Link>
+            <span className="float-right">{item.events} Events</span>
+          </div>
+        ))}
+      </Accordion>
+    );
+  }
+
+  const openClass = active ? '-left-6' : 'right-0';
+
+  return (
+    <div className="flex absolute inset-y-0 right-0 w-1/2 md:w-1/3 max-w-xl min-w-lg text-base text-white font-sans">
+      <div
+        onClick={toggle}
+        className={`absolute ${openClass} cursor-pointer items-center self-center rounded-tl-lg rounded-bl-lg border border-r-0 w-6 h-20 py-7 bg-gray-800 bg-opacity-70`}
+      >
+        {active ? <Menu /> : <MenuOpen />}
+      </div>
+      <div
+        className={`w-full h-full p-1 md:p-4 bg-gray-800 bg-opacity-70 border-l overflow-x-hidden overflow-y-auto${
+          active ? '' : ' hidden'
+        }`}
+      >
+        {result}
+      </div>
+    </div>
+  );
+}
+
+export function Heading({ title }) {
+  return <div>{title}</div>;
+}

web/src/components/VideoPlayer.jsx

@@ -31,12 +31,12 @@ export default class VideoPlayer extends Component {
   }
 
   render() {
-    const { style } = this.props;
+    const { style, children } = this.props;
     return (
       <div style={style}>
         <div data-vjs-player>
-          <video playsinline ref={(node) => (this.videoNode = node)} className="video-js" />
-          <div className="vjs-playlist" />
+          <video ref={(node) => (this.videoNode = node)} className="video-js vjs-default-skin" controls playsinline />
+          {children}
         </div>
       </div>
     );