From 388406621f63d574300a091d1a4acd46fe743206 Mon Sep 17 00:00:00 2001
From: Bernt Christian Egeland <cbegelan@gmail.com>
Date: Sat, 28 Aug 2021 22:41:32 +0200
Subject: [PATCH] removed some video controls for mobile devices

---
 web/src/components/VideoPlayer.jsx            |  2 +-
 web/src/index.css                             | 17 ++++++++-
 web/src/routes/Event.jsx                      | 35 ++++++++++++-------
 web/src/routes/Events/components/tableRow.jsx |  9 +++--
 .../routes/Events/hooks/useClickOutside.jsx   |  2 +-
 web/src/routes/Events/index.jsx               |  2 --
 6 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/web/src/components/VideoPlayer.jsx b/web/src/components/VideoPlayer.jsx
index 3560d964a..24ba747b5 100644
--- a/web/src/components/VideoPlayer.jsx
+++ b/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>
   );
diff --git a/web/src/index.css b/web/src/index.css
index 2278ef964..b7b93a69e 100644
--- a/web/src/index.css
+++ b/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;
+  }
 }
diff --git a/web/src/routes/Event.jsx b/web/src/routes/Event.jsx
index b6d5e6b40..a92e097a0 100644
--- a/web/src/routes/Event.jsx
+++ b/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`,
diff --git a/web/src/routes/Events/components/tableRow.jsx b/web/src/routes/Events/components/tableRow.jsx
index 882a281ae..6fe7f9f82 100644
--- a/web/src/routes/Events/components/tableRow.jsx
+++ b/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"
diff --git a/web/src/routes/Events/hooks/useClickOutside.jsx b/web/src/routes/Events/hooks/useClickOutside.jsx
index 2511d5b77..22eac0d01 100644
--- a/web/src/routes/Events/hooks/useClickOutside.jsx
+++ b/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) => {
diff --git a/web/src/routes/Events/index.jsx b/web/src/routes/Events/index.jsx
index 0597b230f..eb9c9223f 100644
--- a/web/src/routes/Events/index.jsx
+++ b/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>