Supporting more audio, video, and image formats in simple-editor.

src/components/Preview.vue

@@ -29,7 +29,7 @@
   </div>
 
   <!-- Timeline Container -->
-  <div v-if="hasPreviewFile && media_loaded" class="timeline-controls-row" ref="timelineSection">
+  <div v-if="hasPreviewFile" class="timeline-controls-row" ref="timelineSection">
     <!-- Play/Pause button -->
     <div class="timeline-button timeline-button-left">
       <button title="Play/Pause Preview" type="button" class="btn btn-secondary timeline-btn" @click="togglePlayback">
@@ -95,6 +95,31 @@
 import {mapState, mapActions, mapGetters, mapMutations} from "vuex";
 import {fixImageDuration} from "../store/axios";
 
+const IMAGE_FILE_EXTENSIONS = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp', 'avif', 'svg', 'tif', 'tiff', 'heic', 'heif'];
+const AUDIO_FILE_EXTENSIONS = ['mp3', 'aac', 'm4a', 'wav', 'oga', 'ogg', 'flac', 'opus', 'wma', 'aif', 'aiff'];
+const MEDIA_MIME_TYPES = {
+  mp4: 'video/mp4',
+  m4v: 'video/mp4',
+  mov: 'video/quicktime',
+  webm: 'video/webm',
+  ogv: 'video/ogg',
+  ogg: 'video/ogg',
+  mkv: 'video/x-matroska',
+  avi: 'video/x-msvideo',
+  mpg: 'video/mpeg',
+  mpeg: 'video/mpeg',
+  mp3: 'audio/mpeg',
+  wav: 'audio/wav',
+  aac: 'audio/aac',
+  m4a: 'audio/mp4',
+  flac: 'audio/flac',
+  oga: 'audio/ogg',
+  opus: 'audio/opus',
+  wma: 'audio/x-ms-wma',
+  aif: 'audio/aiff',
+  aiff: 'audio/aiff'
+};
+
 export default {
   name: "Preview.vue",
   props: ['project'],
@@ -511,15 +536,59 @@ export default {
         return false
       }
     },
+    mediaExtension() {
+      if (!this.preview.file || !this.preview.file.media) {
+        return ''
+      }
+      const mediaPath = this.preview.file.media.split('?')[0]
+      if (!mediaPath.includes('.')) {
+        return ''
+      }
+      return mediaPath.split('.').pop().toLowerCase()
+    },
     isImage() {
-      return (this.preview.file && this.preview.file.json.vcodec  == "QImage")
+      if (!this.preview.file) {
+        return false
+      }
+      const codec = (this.preview.file.json && this.preview.file.json.vcodec) ? this.preview.file.json.vcodec.toLowerCase() : ''
+      if (codec === 'qimage') {
+        return true
+      }
+      const type = (this.preview.file.json && this.preview.file.json.type) ? this.preview.file.json.type.toLowerCase() : ''
+      if (type === 'image') {
+        return true
+      }
+      const ext = this.mediaExtension
+      return !!ext && IMAGE_FILE_EXTENSIONS.includes(ext)
+    },
+    isAudioOnly() {
+      if (!this.preview.file) {
+        return false
+      }
+      const ext = this.mediaExtension
+      if (ext && AUDIO_FILE_EXTENSIONS.includes(ext)) {
+        return true
+      }
+      const type = (this.preview.file.json && this.preview.file.json.type) ? this.preview.file.json.type.toLowerCase() : ''
+      if (type === 'audio') {
+        return true
+      }
+      const codec = (this.preview.file.json && this.preview.file.json.vcodec) ? this.preview.file.json.vcodec.toLowerCase() : ''
+      const hasAudioCodec = !!(this.preview.file.json && this.preview.file.json.acodec)
+      return (!codec || codec === 'none') && hasAudioCodec
     },
     previewFormat() {
-      if (this.preview.file && this.preview.file.json.acodec == "mp3") {
+      if (!this.preview.file) {
+        return null
+      }
+      const ext = this.mediaExtension
+      if (ext && MEDIA_MIME_TYPES[ext]) {
+        return MEDIA_MIME_TYPES[ext]
+      }
+      if (this.isAudioOnly) {
         return 'audio/mpeg'
-      } else {
-        return `video/${this.preview.file.media.split('.').pop()}`
       }
+      return 'video/mp4'
     },
     currentStageHeight() {
       let height = this.stageHeightManual