From a655e44fb22fa0491aeae0b73cf903442a37fc85 Mon Sep 17 00:00:00 2001
From: Roland <roland@learningselfreliance.com>
Date: Wed, 22 Feb 2023 12:41:41 -0700
Subject: [PATCH] Using violet to represent Audio files.  Adding audio to file
 search filters.

---
 app/src/components/Common.js      | 8 +++++++-
 app/src/components/FilePreview.js | 7 +++++--
 app/src/components/Files.js       | 3 ++-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/app/src/components/Common.js b/app/src/components/Common.js
index 51989a00..0e7b31c3 100644
--- a/app/src/components/Common.js
+++ b/app/src/components/Common.js
@@ -600,6 +600,8 @@ export function mimetypeColor(mimetype) {
             return 'purple'
         } else if (mimetype.startsWith('application/epub') || mimetype.startsWith('application/x-mobipocket-ebook')) {
             return 'yellow'
+        } else if (mimetype.startsWith('audio/')) {
+            return 'violet'
         }
     } catch (e) {
         console.error(e);
@@ -646,7 +648,9 @@ export function FileIcon({file, disabled = true, size = 'huge', ...props}) {
         } else if (mimetype.startsWith('audio/')) {
             props['name'] = 'file audio';
         } else if (mimetype.startsWith('application/octet-stream')) {
-            if (lowerPath.endsWith('.stl')) {
+            if (lowerPath.endsWith('.mp3')) {
+                props['name'] = 'file audio';
+            } else if (lowerPath.endsWith('.stl')) {
                 props['name'] = 'cube';
             } else if (lowerPath.endsWith('.blend')) {
                 props['name'] = 'cube';
@@ -828,6 +832,8 @@ export const filterToMimetypes = (filter) => {
         return ['text/html'];
     } else if (filter === 'pdf') {
         return ['application/pdf'];
+    } else if (filter === 'audio') {
+        return ['audio'];
     } else if (filter === 'ebook') {
         return ['application/epub+zip', 'application/x-mobipocket-ebook'];
     } else if (filter === 'image') {
diff --git a/app/src/components/FilePreview.js b/app/src/components/FilePreview.js
index 951cea44..bb33f54b 100644
--- a/app/src/components/FilePreview.js
+++ b/app/src/components/FilePreview.js
@@ -84,7 +84,7 @@ function getVideoModal(path) {
 
 function getAudioModal(path) {
     const url = getMediaPathURL(path);
-    const type = path['mimetype'] ? path['mimetype'] : 'audio/mpeg';
+    const type = path['mimetype'] !== 'application/octet-stream' ? path['mimetype'] : 'audio/mpeg';
     return <React.Fragment>
         <ModalHeader>
             {path['path']}
@@ -140,7 +140,8 @@ export function FilePreviewWrapper({children}) {
         }
 
         if (previewFile && !_.isEmpty(previewFile)) {
-            const {mimetype, size} = previewFile;
+            const {mimetype, size, path} = previewFile;
+            const lowerPath = path.toLowerCase();
             console.debug(`useFilePreview path=${previewFile['path']} mimetype=${mimetype}`);
             const url = getMediaPathURL(previewFile);
             const downloadURL = getDownloadPathURL(previewFile);
@@ -158,6 +159,8 @@ export function FilePreviewWrapper({children}) {
                 setModalContent(getEpubModal(previewFile), viewerURL, downloadURL);
             } else if (mimetype.startsWith('image/')) {
                 setModalContent(getImageModal(previewFile), url);
+            } else if (mimetype.startsWith('application/octet-stream') && lowerPath.endsWith('.mp3')) {
+                setModalContent(getAudioModal(previewFile), url, downloadURL);
             } else {
                 // No special handler for this file type, just open it.
                 window.open(downloadURL);
diff --git a/app/src/components/Files.js b/app/src/components/Files.js
index 0ac05793..05e86845 100644
--- a/app/src/components/Files.js
+++ b/app/src/components/Files.js
@@ -384,11 +384,12 @@ export function FilesSearchView({
         {key: 'archive', text: 'Archive', value: 'archive'},
         {key: 'pdf', text: 'PDF', value: 'pdf'},
         {key: 'ebook', text: 'eBook', value: 'ebook'},
+        {key: 'audio', text: 'Audio', value: 'audio'},
         {key: 'image', text: 'Image', value: 'image'},
         {key: 'zip', text: 'ZIP', value: 'zip'},
     ];
 
-    const {searchFiles, limit, setLimit, totalPages, activePage, setPage, filter} =
+    const {searchFiles, limit, setLimit, totalPages, activePage, setPage} =
         useSearchFiles(24, emptySearch, model);
 
     const {searchParams, updateQuery} = useQuery();