Merge pull request #31 from kubbit98/feature13

add audio support

Author: kubbit98

Data/File.cs

@@ -4,11 +4,12 @@ public class File : ICloneable
 {
     private static readonly string[] s_videoExtensions = ["flv", "m3u8", "ts", "3gp", "qt", "wmv", "m4v", "mpg", "asf", "ogv", "oga", "ogx", "ogg", "spx", "webm", "avi", "mov", "mp4", "m4a", "m4p", "m4b", "m4r"]; //not sure if all of them works
     private static readonly string[] s_photoExtensions = ["gif", "jpeg", "jpg", "png", "webp", "apng", "avif"]; //supported by <img> tag
+    private static readonly string[] s_audioExtensions = ["mp3", "wav", "ogg"]; //supported by <audio> tag
     private static readonly string[] s_textExtensions = ["txt", "csv", "log", "md", "html", "js", "css"];
     private static readonly string[] s_pdfExtensions = ["pdf"];
     public enum FileTypeEnum
     {
-        Video, Photo, Text, PDF, NotSupported
+        Video, Photo, Audio, Text, PDF, NotSupported
     }
     public enum ThumbnailEnum
     {
@@ -76,6 +77,7 @@ public FileTypeEnum FileType
         {
             if (s_photoExtensions.Contains(Extension.ToLower())) return FileTypeEnum.Photo;
             else if (s_videoExtensions.Contains(Extension.ToLower())) return FileTypeEnum.Video;
+            else if (s_audioExtensions.Contains(Extension.ToLower())) return FileTypeEnum.Audio;
             else if (s_pdfExtensions.Contains(Extension.ToLower())) return FileTypeEnum.PDF;
             else if (s_textExtensions.Contains(Extension.ToLower())) return FileTypeEnum.Text;
             else return FileTypeEnum.NotSupported;

Pages/Index.razor

@@ -163,6 +163,12 @@
                                      IsPrevPhoto="@(_previousFile?.FileType==File.FileTypeEnum.Photo)"
                                      IsNextPhoto="@(_nextFile?.FileType==File.FileTypeEnum.Photo)" />
                         break;
+                    case File.FileTypeEnum.Audio:
+                        <audio class="mx-auto w-75" style="max-height: 95vh;" controls autoplay id="audioTagId">
+                            <source src="@_currentFile?.Path">
+                            Your browser does not support the audio tag.
+                        </audio>
+                        break;
                     case File.FileTypeEnum.PDF:
                         <embed src="@_currentFile?.Path" style="width:100%;height:95vh;" />
                         break;
@@ -250,7 +256,7 @@
     private string _storagePrefix = string.Empty;
 
     private const bool SHOW_DEBUG_INFO = false;
-    private const int LOAD_VIDEO_TIME_DELAY = 100;
+    private const int LOAD_VIDEO_OR_AUDIO_TIME_DELAY = 100;
     private const int MOVE_FILE_TIME_DELAY = 500;
 
     private static Regex s_alfanumeralRegex = new Regex(@"^[a-zA-Z0-9]$");
@@ -423,7 +429,7 @@
                 _nextFile = null;
             }
         }
-        ReloadPlayerIfVideo();
+        ReloadPlayerIfVideoOrAudio();
         StateHasChanged();
         _isChangingFile = false;
     }
@@ -452,7 +458,7 @@
                 _status = Status.Initialized;
                 await _PSSWriteStatus();
             }
-            ReloadPlayerIfVideo();
+            ReloadPlayerIfVideoOrAudio();
             StateHasChanged();
             await _PSSWriteMyMediaCurrentIndex();
             _isChangingFile = false;
@@ -479,7 +485,7 @@
         _storagePrefix = await FileService.GetStoragePrefix();
         _previousFile = _currentFile = _nextFile = null;
         InitSession();
-        ReloadPlayerIfVideo();
+        ReloadPlayerIfVideoOrAudio();
         StateHasChanged();
     }
     private async void ShutdownApp()
@@ -511,8 +517,22 @@
                     await Back();
                 }
                 else if (key == "F2") await FileNameInputOpen();
-                else if (key == " " && null != _currentFile && _currentFile.FileType == File.FileTypeEnum.Photo) await JS.InvokeVoidAsync("toggleModal", "photoModal");
-                else if (key.Length == 1 && s_alfanumeralRegex.IsMatch(key) && null != _folders)
+                else if (key == " " && null != _currentFile)
+                {
+                    switch (_currentFile.FileType)
+                    {
+                        case File.FileTypeEnum.Photo:
+                            await JS.InvokeVoidAsync("toggleModal", "photoModal");
+                            break;
+                        case File.FileTypeEnum.Video:
+                            await JS.InvokeVoidAsync("pauseOrPlayVideo");
+                            break;
+                        case File.FileTypeEnum.Audio:
+                            await JS.InvokeVoidAsync("pauseOrPlayAudio");
+                            break;
+                    }
+                } 
+            else if (key.Length == 1 && s_alfanumeralRegex.IsMatch(key) && null != _folders)
                 {
                     var folder = _folders.Where(f => f.KeyBind == key.First()).FirstOrDefault();
                     if (null != folder)
@@ -591,13 +611,18 @@
         }
     }
 
-    private async void ReloadPlayerIfVideo()
+    private async void ReloadPlayerIfVideoOrAudio()
     {
         if (File.FileTypeEnum.Video == _currentFile?.FileType)
         {
-            await Task.Delay(LOAD_VIDEO_TIME_DELAY);
+            await Task.Delay(LOAD_VIDEO_OR_AUDIO_TIME_DELAY);
             await JS.InvokeVoidAsync("loadVideo");
         }
+        else if (File.FileTypeEnum.Audio == _currentFile?.FileType)
+        {
+            await Task.Delay(LOAD_VIDEO_OR_AUDIO_TIME_DELAY);
+            await JS.InvokeVoidAsync("loadAudio");
+        }
     }
     private async void ToggleSidePanel()
     {

README.md

@@ -9,6 +9,13 @@ The application has been tested on Windows 11, Linux (Fedora 38) and macOS (Sono
 
 As of version 0.10, the application also has support for keyboard shortcuts. Once the application is initialized, the a-z and 0-9 keys can be dynamically assigned to a folder in the settings, the spacebar opens or closes the photo zoom mode, the right and left arrows go forward and backward, and the F2 function key focuses the field to rename a file (you can then exit with ESC, or save with Enter).
 
+## Supported media types
+- Photos (e.g. jpg, gif, png)
+- Videos (e.g. mp4, webm, avi)
+- Audio recordings (e.g. mp3, wav)
+- Text documents (e.g. txt, log)
+- PDF documents
+
 ## Presentation
 You can watch the presentation here:
 

wwwroot/js/site.js

@@ -82,7 +82,24 @@ function loadVideo() {
     var video = document.getElementById("videoTagId");
     if (null != video) {
         video.load();
-        video.focus({ focusVisible: true });
+    }
+}
+function loadAudio() {
+    var audio = document.getElementById("audioTagId");
+    if (null != audio) {
+        audio.load();
+    }
+}
+function pauseOrPlayVideo() {
+    var video = document.getElementById("videoTagId");
+    if (null != video) {
+        video.paused ? video.play() : video.pause();
+    }
+}
+function pauseOrPlayAudio() {
+    var audio = document.getElementById("audioTagId");
+    if (null != audio) {
+        audio.paused ? audio.play() : audio.pause();
     }
 }
 function unLoadVideo() {
@@ -162,6 +179,7 @@ async function configKeyBindModal() {
 window.addEventListener('keydown', function (event) {
     if (event.key == ' ' && document.activeElement.tagName != 'INPUT') {
         event.preventDefault();
+        event.stopPropagation();
     }
     if (isListenForRegisterKey) {
         if (event.key == 'Shift') {
@@ -177,4 +195,10 @@ window.addEventListener('keydown', function (event) {
     else if (!document.activeElement.hasAttribute('data-prevent-keydown')) {
         dotNetObjRef.invokeMethodAsync('HandleKeyDown', event.key, isListenForRegisterKey, '');
     }
-});
+}, true);
+window.addEventListener('keyup', function (event) {
+    if (event.key == ' ' && (document.activeElement.tagName == 'AUDIO' || document.activeElement.tagName == 'VIDEO')) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+}, true);