removed some video controls for mobile devices

web/src/components/VideoPlayer.jsx

@@ -88,7 +88,7 @@ export default function VideoPlayer({ children, options, seekOptions = {}, onRea
 
   return (
     <div data-vjs-player>
-      <video ref={playerRef} className="video-js vjs-default-skin" controls playsinline />
+      <video ref={playerRef} className="small-player video-js vjs-default-skin" controls playsinline />
       {children}
     </div>
   );

web/src/index.css

@@ -36,5 +36,20 @@ Maintain aspect ratio and scale down the video container
 Could not find a proper tailwind css.
 */
 .outer-max-width {
-  max-width: 60%;
+  max-width: 70%;
+}
+
+/*
+ Hide some videoplayer controls on mobile devices to
+ align the video player and bottom control bar properly.
+*/
+@media only screen and (max-width: 700px) {
+  .small-player .vjs-time-control,
+  .small-player .vjs-time-divider {
+    display: none;
+  }
+  div.vjs-control-bar > .skip-back.skip-5,
+  div.vjs-control-bar > .skip-forward.skip-10 {
+    display: none;
+  }
 }

web/src/routes/Event.jsx

@@ -1,5 +1,5 @@
 import { h, Fragment } from 'preact';
-import { useCallback, useState, useEffect, useRef } from 'preact/hooks';
+import { useCallback, useState, useEffect } from 'preact/hooks';
 import Link from '../components/Link';
 import ActivityIndicator from '../components/ActivityIndicator';
 import Button from '../components/Button';
@@ -33,9 +33,8 @@ export default function Event({ eventId, close, scrollRef }) {
       // When opening new event window, the previous one will sometimes cause the
       // navbar to be visible, hence the "hide nav" code bellow.
       // Navbar will be hided if we add the - translate - y - full class.appBar.js
-      console.log('getElementById');
-      let element = document.getElementById('appbar');
-      element.classList.add('-translate-y-full');
+      const element = document.getElementById('appbar');
+      if (element) element.classList.add('-translate-y-full');
     };
   }, [data, scrollRef, eventId, shouldScroll]);
 
@@ -70,23 +69,33 @@ export default function Event({ eventId, close, scrollRef }) {
   return (
     <div className="space-y-4">
       <div className="flex md:flex-row justify-between flex-wrap flex-col">
-        <div class="space-x-4">
-          <Button color="blue" href={`${apiHost}/api/events/${eventId}/clip.mp4?download=true`} download>
+        <div className="space-y-2 xs:space-y-0 xs:space-x-4">
+          <Button
+            className="w-full xs:w-auto"
+            color="blue"
+            href={`${apiHost}/api/events/${eventId}/clip.mp4?download=true`}
+            download
+          >
             <Clip className="w-6" /> Download Clip
           </Button>
-          <Button color="blue" href={`${apiHost}/api/events/${eventId}/snapshot.jpg?download=true`} download>
+          <Button
+            className="w-full xs:w-auto"
+            color="blue"
+            href={`${apiHost}/api/events/${eventId}/snapshot.jpg?download=true`}
+            download
+          >
             <Snapshot className="w-6" /> Download Snapshot
           </Button>
-          <Button className="self-start" onClick={() => setShowDetails(!showDetails)}>
+          <Button className="w-full xs:w-auto" onClick={() => setShowDetails(!showDetails)}>
             <ArrowDown className="w-6" />
             {`${showDetails ? 'Hide event Details' : 'View event Details'}`}
           </Button>
         </div>
-        <div class="space-x-4">
-          <Button className="self-start" color="red" onClick={handleClickDelete}>
+        <div class="space-y-2 space-x-2 xs:space-y-0 xs:space-x-4">
+          <Button className="xs:w-auto" color="red" onClick={handleClickDelete}>
             <Delete className="w-6" /> Delete event
           </Button>
-          <Button color="gray" className="self-start" onClick={() => close()}>
+          <Button color="gray" className="xs:w-auto" onClick={() => close()}>
             <Close className="w-6" /> Close
           </Button>
         </div>
@@ -141,13 +150,13 @@ export default function Event({ eventId, close, scrollRef }) {
         ) : null}
       </div>
       <div className="outer-max-width xs:m-auto">
-        <div className="pt-5 relative pb-20">
+        <div className="pt-5 relative pb-20 w-screen xs:w-full">
           {data.has_clip ? (
             <Fragment>
               <Heading size="lg">Clip</Heading>
               <VideoPlayer
                 options={{
-                  // preload: 'none',
+                  preload: 'none',
                   sources: [
                     {
                       src: `${apiHost}/vod/event/${eventId}/index.m3u8`,

web/src/routes/Events/components/tableRow.jsx

@@ -1,6 +1,6 @@
-import { h, Fragment } from 'preact';
+import { h } from 'preact';
 import { memo } from 'preact/compat';
-import { useCallback, useState, useMemo, useEffect } from 'preact/hooks';
+import { useCallback, useState, useMemo } from 'preact/hooks';
 import { Tr, Td, Tbody } from '../../../components/Table';
 import Filterable from './filterable';
 import Event from '../../Event';
@@ -43,17 +43,16 @@ const EventsRow = memo(
 
     const start = new Date(parseInt(startTime * 1000, 10));
     const end = new Date(parseInt(endTime * 1000, 10));
-    // console.log('tablerow has been rendered');
 
     return (
-      <Tbody reference={innerRef} key={id}>
+      <Tbody reference={innerRef}>
         <Tr data-testid={`event-${id}`} className={`${viewEvent === id ? 'border-none' : ''}`}>
           <Td className="w-40">
             <a
               onClick={() => viewEventHandler(id)}
               ref={lastRowRef}
               data-start-time={startTime}
-              // data-reached-end={reachedEnd}
+              // data-reached-end={reachedEnd} <-- Enable this will cause all events to re-render when reaching end.
             >
               <img
                 width="150"

web/src/routes/Events/hooks/useClickOutside.jsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { useEffect, useRef } from 'preact/hooks';
 
 // https://stackoverflow.com/a/54292872/2693528
 export const useOuterClick = (callback) => {

web/src/routes/Events/index.jsx

@@ -80,8 +80,6 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
     ),
     [apiHost, handleFilter, pathname, scrollToRef]
   );
-
-  // console.log('main render');
   return (
     <div className="space-y-4 w-full">
       <Heading>Events</Heading>