From 272eef400ca257973ffc35ec9d890b7b1516d76b Mon Sep 17 00:00:00 2001
From: Roland <roland@learningselfreliance.com>
Date: Wed, 22 Feb 2023 11:48:25 -0700
Subject: [PATCH] Adding audio preview for audio files.

---
 app/src/components/Common.js      |  2 +
 app/src/components/FilePreview.js | 63 +++++++++++++++++++++++++------
 2 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/app/src/components/Common.js b/app/src/components/Common.js
index c7950456..51989a00 100644
--- a/app/src/components/Common.js
+++ b/app/src/components/Common.js
@@ -643,6 +643,8 @@ export function FileIcon({file, disabled = true, size = 'huge', ...props}) {
             props['name'] = 'cube';
         } else if (mimetype.startsWith('application/x-dosexec') || mimetype.startsWith('application/x-msi')) {
             props['name'] = 'microsoft';
+        } else if (mimetype.startsWith('audio/')) {
+            props['name'] = 'file audio';
         } else if (mimetype.startsWith('application/octet-stream')) {
             if (lowerPath.endsWith('.stl')) {
                 props['name'] = 'cube';
diff --git a/app/src/components/FilePreview.js b/app/src/components/FilePreview.js
index 359490d8..951cea44 100644
--- a/app/src/components/FilePreview.js
+++ b/app/src/components/FilePreview.js
@@ -1,6 +1,14 @@
 import React from "react";
 import _ from "lodash";
-import {Button as SButton, Image, Modal, ModalActions, ModalContent} from "semantic-ui-react";
+import {
+    Button as SButton,
+    Header as SHeader,
+    Image,
+    Modal,
+    ModalActions,
+    ModalContent,
+    ModalHeader
+} from "semantic-ui-react";
 
 function getMediaPathURL(path) {
     return `/media/${encodeURIComponent(path['path'])}`;
@@ -28,11 +36,16 @@ function getIframeModal(path) {
 
 function getImageModal(path) {
     const url = getMediaPathURL(path);
-    return <ModalContent>
-        <a href={url}>
-            <Image src={url}/>
-        </a>
-    </ModalContent>
+    return <React.Fragment>
+        <ModalHeader>
+            {path['path']}
+        </ModalHeader>
+        <ModalContent>
+            <a href={url}>
+                <Image src={url}/>
+            </a>
+        </ModalContent>
+    </React.Fragment>
 }
 
 function getEpubModal(path) {
@@ -50,16 +63,42 @@ function getEpubModal(path) {
 
 function getVideoModal(path) {
     const url = getMediaPathURL(path);
-    return <ModalContent>
-        <video controls
+    const type = path['mimetype'] ? path['mimetype'] : 'video/mp4';
+    return <React.Fragment>
+        <ModalHeader>
+            {path['path']}
+        </ModalHeader>
+        <ModalContent>
+            <SHeader as='h5'>{path['path']}</SHeader>
+            <video controls
+                   autoPlay={true}
+                   id="player"
+                   playsInline={true}
+                   style={{maxWidth: '100%'}}
+            >
+                <source src={url} type={type}/>
+            </video>
+        </ModalContent>
+    </React.Fragment>
+}
+
+function getAudioModal(path) {
+    const url = getMediaPathURL(path);
+    const type = path['mimetype'] ? path['mimetype'] : 'audio/mpeg';
+    return <React.Fragment>
+        <ModalHeader>
+            {path['path']}
+        </ModalHeader><ModalContent>
+        <audio controls
                autoPlay={true}
                id="player"
                playsInline={true}
-               style={{maxWidth: '100%'}}
+               style={{width: '90%', maxWidth: '95%'}}
         >
-            <source src={url} type="video/mp4"/>
-        </video>
+            <source src={url} type={type}/>
+        </audio>
     </ModalContent>
+    </React.Fragment>
 }
 
 export const FilePreviewContext = React.createContext({
@@ -112,6 +151,8 @@ export function FilePreviewWrapper({children}) {
                 setModalContent(getIframeModal(previewFile), url, downloadURL);
             } else if (mimetype.startsWith('video/')) {
                 setModalContent(getVideoModal(previewFile), url, downloadURL);
+            } else if (mimetype.startsWith('audio/')) {
+                setModalContent(getAudioModal(previewFile), url, downloadURL);
             } else if (mimetype.startsWith('application/epub')) {
                 const viewerURL = getEpubViewerURL(previewFile);
                 setModalContent(getEpubModal(previewFile), viewerURL, downloadURL);