Add audio file support

src/app/hydrus-file.ts

@@ -39,6 +39,7 @@ export interface HydrusFileList {
 export enum HydrusFileType {
   Image,
   Video,
+  Audio,
   Flash,
   Unsupported
 }

src/app/hydrus-files.service.ts

@@ -63,6 +63,14 @@ export class HydrusFilesService {
     ].includes(mime)) {
       return HydrusFileType.Video;
     }
+    if ([
+      'audio/mp3',
+      'audio/ogg',
+      'audio/flac',
+      'audio/x-wav',
+    ].includes(mime)) {
+      return HydrusFileType.Audio;
+    }
     if ([
       'video/x-flv',
       'application/x-shockwave-flash'

src/app/photoswipe/photoswipe.component.scss

@@ -19,6 +19,7 @@ $pswp__include-minimal-style: true;
   height: 100%;
 }
 
+
 .pswp-video {
   width: 100%;
   height: 100%;
@@ -27,6 +28,14 @@ $pswp__include-minimal-style: true;
   }
 }
 
+.pswp-audio-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
 .pswp-video-placeholder {
   width: 100%;
   height: 100%;

src/app/photoswipe/photoswipe.service.ts

@@ -62,6 +62,14 @@ export class PhotoswipeService {
         `,
         pid: file.file_id
       };
+    } else if (file.file_type === HydrusFileType.Audio) {
+      return {
+        html: `
+        <div id="pswp-audio-${file.file_id}" class="pswp-audio-container">
+        </div>
+        `,
+        pid: file.file_id
+      };
     } else {
       const html = file.has_thumbnail
       ? `<div class="pswp__error-msg">
@@ -104,19 +112,31 @@ export class PhotoswipeService {
       });
     };
 
+    const removeAudio = () => {
+      ps.container.querySelectorAll<HTMLVideoElement>('.pswp-audio').forEach((audio) => {
+        audio.pause();
+        audio.removeAttribute('src');
+        audio.load();
+        audio.remove();
+      });
+    };
+
     ps.listen('close', () => {
       this.psClose$.next();
     });
     ps.listen('destroy', () => {
       removeVideos();
+      removeAudio();
     });
     ps.listen('beforeChange', () => {
       removeVideos();
+      removeAudio();
     });
     ps.listen('afterChange', () => {
       if (ps.currItem.html) {
         const pid = (ps.currItem as PhotoSwipe.Item).pid;
         const vidContainer = ps.container.querySelector<HTMLDivElement>(`#pswp-video-${pid}`);
+        const audioContainer = ps.container.querySelector<HTMLDivElement>(`#pswp-audio-${pid}`);
         if (vidContainer) {
           const item = items.find(i => i.file_id === pid);
           const vid = document.createElement('video');
@@ -127,6 +147,15 @@ export class PhotoswipeService {
           vid.loop = true;
           vid.className = 'pswp-video';
           vidContainer.prepend(vid);
+        } else if (audioContainer) {
+          const item = items.find(i => i.file_id === pid);
+          const audio = document.createElement('audio');
+          audio.src = item.file_url;
+          audio.autoplay = true;
+          audio.loop = true;
+          audio.controls = true;
+          audio.className = 'pswp-audio';
+          audioContainer.prepend(audio);
         }
       }
     });