[Media UI] Support audio types in the embed player.

blacklight · Oct 20, 2024 · ec8fe40 · ec8fe40
1 parent 3a9d570
commit ec8fe40
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 3 deletions.
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/EmbedPlayer.vue b/platypush/backend/http/webapp/src/components/panels/Media/EmbedPlayer.vue
@@ -9,6 +9,19 @@
               frameborder="0"
               v-else-if="youtubeUrl" />
 
+      <div class="audio-container" v-else-if="isAudio">
+        <div class="poster-container" v-if="poster">
+          <img :src="poster" />
+        </div>
+        <audio ref="audio"
+               class="player"
+               controls
+               @canplay="$refs.audio.play()"
+               @ended="$emit('ended')">
+          <source :src="mediaItem.url" :type="mediaItem.mime_type">
+        </audio>
+      </div>
+
       <video ref="video"
              class="player"
              controls
@@ -49,11 +62,22 @@ export default {
     return {
       loading: false,
       mediaItem: null,
-      mimeType: null,
     }
   },
 
   computed: {
+    isAudio() {
+      return (this.mediaItem?.mime_type || '').startsWith('audio')
+    },
+
+    poster() {
+      if (this.isAudio && this.item?.image) {
+        return this.item.image
+      }
+
+      return null
+    },
+
     youtubeUrl() {
       if (this.item.type !== 'youtube')
         return null
@@ -127,6 +151,8 @@ export default {
 <style lang="scss" scoped>
 @import "~@/components/Media/vars";
 
+$audio-height: 2.5em;
+
 .embed-player {
   position: relative;
   width: 100%;
@@ -145,7 +171,36 @@ export default {
     }
   }
 
-  video {
+  .audio-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    min-width: 50vw;
+    min-height: 50vh;
+    background-color: black;
+
+    audio {
+      height: $audio-height;
+    }
+
+    .poster-container {
+      width: 100%;
+      height: calc(100% - #{$audio-height});
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
+  }
+
+  video, audio {
     width: 100%;
     height: 100%;
   }

diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Index.vue b/platypush/backend/http/webapp/src/components/panels/Media/Index.vue
@@ -880,6 +880,10 @@ export default {
 }
 
 :deep(.embed-player-container) {
+  .modal {
+    width: 100%;
+  }
+
   .content {
     max-width: 95%;
     background: black;

diff --git a/.../backend/http/webapp/src/components/panels/Media/Providers/Jellyfin/views/Media/Index.vue b/.../backend/http/webapp/src/components/panels/Media/Providers/Jellyfin/views/Media/Index.vue
@@ -10,7 +10,8 @@
              @play="$emit('play', $event)"
              @play-with-opts="$emit('play-with-opts', $event)"
              @select="selectedResult = $event; $emit('select', $event)"
-             @select-collection="selectCollection" />
+             @select-collection="selectCollection"
+             @view="$emit('view', $event)" />
     </div>
 
     <NoItems :with-shadow="false"