From bf507c3f0ee7cefceb00bc63f841da265b7c495e Mon Sep 17 00:00:00 2001
From: Mickael Kerjean <mickael@kerjean.me>
Date: Sun, 16 Apr 2023 23:02:47 +1000
Subject: [PATCH] feature (usability): improve usability of pdf and video

---
 client/pages/viewerpage/pdfviewer.js   | 38 +++++++++++++++++++++-----
 client/pages/viewerpage/pdfviewer.scss |  1 -
 client/pages/viewerpage/videoplayer.js | 30 ++++++++++++++++----
 3 files changed, 55 insertions(+), 14 deletions(-)

diff --git a/client/pages/viewerpage/pdfviewer.js b/client/pages/viewerpage/pdfviewer.js
index 91701a01..67dd64b7 100644
--- a/client/pages/viewerpage/pdfviewer.js
+++ b/client/pages/viewerpage/pdfviewer.js
@@ -1,7 +1,7 @@
-import React from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { MenuBar } from "./menubar";
 import "./pdfviewer.scss";
-import { Bundle } from "../../components/";
+import { Bundle, Loader } from "../../components/";
 
 const PDFJSViewer = (props) => (
     <Bundle loader={import(/* webpackChunkName: "pdfjs" */"./pdfviewer_lazy")} symbol="PDFJSViewer">
@@ -10,17 +10,14 @@ const PDFJSViewer = (props) => (
 );
 
 export function PDFViewer({ filename, data }) {
+    const [isLoading, setIsLoading] = useState()
     return (
         <div className="component_pdfviewer">
             <MenuBar title={filename} download={data} />
             <div className="pdfviewer_container">
                 {
                     "application/pdf" in navigator.mimeTypes ? (
-                        <embed
-                            src={`${data}#toolbar=0`}
-                            type="application/pdf"
-                            style={{ height: "100%", width: "100%" }}>
-                        </embed>
+                        <PDFEmbedViewer src={data} />
                     ) : (
                         <PDFJSViewer src={data} />
                     )
@@ -29,3 +26,30 @@ export function PDFViewer({ filename, data }) {
         </div>
     );
 };
+
+function PDFEmbedViewer({ src }) {
+    const $embed = useRef();
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+        if (!$embed.current) return;
+        const onloadHandler = () => {
+            setIsLoading(false);
+        };
+        $embed.current.addEventListener("load", onloadHandler);
+        return () => {
+            $embed.current.removeEventListener("load", onloadHandler);
+        }
+    }, [$embed, src]);
+    return (
+        <React.Fragment>
+            { isLoading && ( <Loader /> ) }
+            <embed
+                ref={$embed}
+                src={`${src}#toolbar=0`}
+                type="application/pdf"
+                style={{ height: "100%", width: "100%" }}
+            />
+        </React.Fragment>
+    );
+}
diff --git a/client/pages/viewerpage/pdfviewer.scss b/client/pages/viewerpage/pdfviewer.scss
index 682cb18f..5f0b47ce 100644
--- a/client/pages/viewerpage/pdfviewer.scss
+++ b/client/pages/viewerpage/pdfviewer.scss
@@ -12,7 +12,6 @@
         width: 100%;
         flex-grow: 1;
 
-
         /* PDFJS */
         canvas{
             margin: 0 auto;
diff --git a/client/pages/viewerpage/videoplayer.js b/client/pages/viewerpage/videoplayer.js
index 22365f1b..7d4fa487 100644
--- a/client/pages/viewerpage/videoplayer.js
+++ b/client/pages/viewerpage/videoplayer.js
@@ -88,18 +88,36 @@ export function VideoPlayer({ filename, data, path }) {
     useEffect(() => {
         const resizeHandler = () => setRender(render + 1);
         const onKeyPressHandler = (e) => {
-            if(e.code !== "Space") {
-                return
+            switch(e.code) {
+            case "Space":
+            case "KeyK": return isPlaying ? onPause(e) : onPlay(e);
+            case "KeyM": return onVolumeChange(0);
+            case "ArrowUp": return onVolumeChange(Math.min(volume + 10, 100));
+            case "ArrowDown": return onVolumeChange(Math.max(volume - 10, 0));
+            case "ArrowLeft": return onSeek(_currentTime - 5);
+            case "ArrowRight": return onSeek(_currentTime + 5);
+            case "KeyL": return onSeek(_currentTime + 10);
+            case "KeyJ": return onSeek(_currentTime - 10);
+            case "KeyF": return onRequestFullscreen();
+            case "Digit0": return onSeek(0);
+            case "Digit1": return onSeek(duration / 10);
+            case "Digit2": return onSeek(2 * duration / 10);
+            case "Digit3": return onSeek(3 * duration / 10);
+            case "Digit4": return onSeek(4 * duration / 10);
+            case "Digit5": return onSeek(5 * duration / 10);
+            case "Digit6": return onSeek(6 * duration / 10);
+            case "Digit7": return onSeek(7 * duration / 10);
+            case "Digit8": return onSeek(8 * duration / 10);
+            case "Digit9": return onSeek(9 * duration / 10);
             }
-            isPlaying ? onPause(e) : onPlay(e);
         };
         window.addEventListener("resize", resizeHandler);
-        window.addEventListener("keypress", onKeyPressHandler);
+        window.addEventListener("keydown", onKeyPressHandler);
         return () => {
             window.removeEventListener("resize", resizeHandler);
-            window.removeEventListener("keypress", onKeyPressHandler);
+            window.removeEventListener("keydown", onKeyPressHandler);
         };
-    }, [render, isPlaying, isChromecast]);
+    }, [render, isPlaying, isChromecast, volume]);
 
     useEffect(() => {
         const context = Chromecast.context();