added video playback

client/components/player/PlayerPlaybackControls.vue

@@ -25,6 +25,11 @@
             <span class="material-symbols text-2xl sm:text-3xl">last_page</span>
           </button>
         </ui-tooltip>
+        <ui-tooltip v-if="isVideo" direction="top" :text="$strings.ButtonFullscreen" class="ml-4 lg:ml-8">
+          <button :aria-label="$strings.ButtonFullscreen" :disabled="!isVideo" class="text-gray-300 disabled:text-gray-500" @mousedown.prevent @mouseup.prevent @click.stop="toggleFullScreen">
+            <span class="material-symbols text-2xl sm:text-3xl">fullscreen</span>
+          </button>
+        </ui-tooltip>
       </template>
       <template v-else>
         <div class="cursor-pointer p-2 shadow-xs bg-accent flex items-center justify-center rounded-full text-primary mx-8 animate-spin">
@@ -60,6 +65,9 @@ export default {
     },
     hasNext() {
       return this.hasNextItemInQueue || this.hasNextChapter
+    },
+    isVideo() {
+      return this.$store.getters['globals/isVideoFile']
     }
   },
   methods: {
@@ -92,6 +100,39 @@ export default {
       }
 
       return `${prefix} - ${formattedTime}`
+    },
+    toggleFullScreen() {
+      const container = document.getElementById('audio-player') // Use this if you want the container to go fullscreen
+
+      if (!document.fullscreenElement) {
+        // If not in fullscreen, request fullscreen for the video or container
+        if (container.requestFullscreen) {
+          container.requestFullscreen()
+        } else if (container.webkitRequestFullscreen) {
+          /* Chrome, Safari and Opera */
+          container.webkitRequestFullscreen()
+        } else if (container.mozRequestFullScreen) {
+          /* Firefox */
+          container.mozRequestFullScreen()
+        } else if (container.msRequestFullscreen) {
+          /* IE/Edge */
+          container.msRequestFullscreen()
+        }
+      } else {
+        // If in fullscreen, exit fullscreen mode
+        if (document.exitFullscreen) {
+          document.exitFullscreen()
+        } else if (document.webkitExitFullscreen) {
+          /* Chrome, Safari and Opera */
+          document.webkitExitFullscreen()
+        } else if (document.mozCancelFullScreen) {
+          /* Firefox */
+          document.mozCancelFullScreen()
+        } else if (document.msExitFullscreen) {
+          /* IE/Edge */
+          document.msExitFullscreen()
+        }
+      }
     }
   },
   mounted() {}

client/players/LocalAudioPlayer.js

@@ -32,7 +32,7 @@ export default class LocalAudioPlayer extends EventEmitter {
     if (document.getElementById('audio-player')) {
       document.getElementById('audio-player').remove()
     }
-    var audioEl = document.createElement('audio')
+    var audioEl = document.createElement('video')
     audioEl.id = 'audio-player'
     audioEl.style.display = 'none'
     document.body.appendChild(audioEl)
@@ -58,7 +58,8 @@ export default class LocalAudioPlayer extends EventEmitter {
       // `audio/matroska` is the correct mimetype, but the server still uses `audio/x-matroska`
       // ref: https://www.iana.org/assignments/media-types/media-types.xhtml
       'audio/matroska',
-      'audio/x-matroska'
+      'audio/x-matroska',
+      'video/mp4'
     ]
     var mimeTypeCanPlayMap = {}
     mimeTypes.forEach((mt) => {
@@ -127,6 +128,24 @@ export default class LocalAudioPlayer extends EventEmitter {
     this.playWhenReady = playWhenReady
     this.startTime = startTime
 
+    if (this.audioTracks.length > 0 && this.audioTracks[0].metadata.filename.endsWith('.mp4')) {
+      this.player.style.display = 'block'
+      this.player.style.position = 'fixed'
+      this.player.style.top = '120px'
+      this.player.style.right = '20px'
+      this.player.style.width = '320px'
+      this.player.style.height = 'auto'
+      this.player.style.zindex = 1000
+      this.player.style.backgroundcolor = '#1000'
+      this.player.style.boxshadow = '0 4px 8px rgba(0,0,0,0.5)'
+      this.player.style.borderradius = '5px'
+      this.player.style.overflow = 'hidden'
+      this.ctx.$store.getters['globals/isVideoFile'] = true
+    } else {
+      this.player.style.display = 'none'
+      this.ctx.$store.getters['globals/isVideoFile'] = false
+    }
+
     if (this.hlsInstance) {
       this.destroyHlsInstance()
     }

client/strings/en-us.json

@@ -38,6 +38,7 @@
   "ButtonFireOnTest": "Fire onTest event",
   "ButtonForceReScan": "Force Re-Scan",
   "ButtonFullPath": "Full Path",
+  "ButtonFullscreen": "Fullscreen",
   "ButtonHide": "Hide",
   "ButtonHome": "Home",
   "ButtonIssues": "Issues",