Audio files now work with the embedded player

public/libs/fontello/config.json

@@ -247,6 +247,12 @@
       "css": "exchange",
       "code": 61676,
       "src": "fontawesome"
+    },
+    {
+      "uid": "81db033e704eb7c586a365559d7c0f36",
+      "css": "audio",
+      "code": 61895,
+      "src": "fontawesome"
     }
   ]
 }

public/libs/fontello/fontello.svg

@@ -70,6 +70,8 @@
 
 <glyph glyph-name="doc-inv" unicode="&#xf15b;" d="M571 564v264q13-8 21-16l227-228q8-7 16-20h-264z m-71-18q0-22 16-37t38-16h303v-589q0-23-15-38t-38-16h-750q-23 0-38 16t-16 38v892q0 23 16 38t38 16h446v-304z" horiz-adv-x="857.1" />
 
+<glyph glyph-name="audio" unicode="&#xf1c7;" d="M819 638q16-16 27-42t11-50v-642q0-23-15-38t-38-16h-750q-23 0-38 16t-16 38v892q0 23 16 38t38 16h500q22 0 49-11t42-27z m-248 136v-210h210q-5 17-12 23l-175 175q-6 7-23 12z m215-853v572h-232q-23 0-38 16t-16 37v233h-429v-858h715z m-440 455q11-5 11-17v-304q0-12-11-16-4-1-7-1-6 0-12 5l-93 93h-73q-8 0-13 5t-5 13v107q0 8 5 13t13 5h73l93 93q8 8 19 4z m233-385q17 0 28 14 72 88 72 202t-72 203q-9 11-24 13t-27-8q-11-9-13-24t8-26q56-69 56-158t-56-157q-9-12-8-27t13-23q10-9 23-9z m-118 83q15 0 26 11 49 52 49 122t-49 122q-10 11-25 12t-26-10-11-25 10-26q29-32 29-73t-29-73q-10-11-10-26t11-25q12-9 25-9z" horiz-adv-x="857.1" />
+
 <glyph glyph-name="paper-plane" unicode="&#xf1d8;" d="M984 844q19-13 15-36l-142-857q-3-16-18-25-8-5-18-5-6 0-13 3l-253 104-135-165q-10-13-27-13-7 0-12 2-11 4-17 13t-7 21v195l482 590-596-516-221 91q-20 8-22 30-1 23 18 33l928 536q9 5 18 5 11 0 20-6z" horiz-adv-x="1000" />
 
 <glyph glyph-name="chrome" unicode="&#xf268;" d="M498 850q134 1 252-67 130-75 196-208l-414 22q-89 5-164-41t-103-128l-154 236q72 89 174 137t213 49z m-416-226l188-370q40-80 117-121t164-25l-129-252q-118 19-214 88t-152 176-56 230q0 149 82 274z m885-94q32-84 33-174t-27-170-86-152-137-117q-128-74-278-66l226 347q49 73 46 162t-59 155z m-467-11q70 0 119-50t50-119-50-119-119-49-119 49-49 119 49 119 119 50z" horiz-adv-x="1000" />

src/js/dashboard.js

@@ -91,9 +91,9 @@ const page = {
   clipboardJS: null,
   lazyLoad: null,
 
-  imageExts: ['.webp', '.jpg', '.jpeg', '.gif', '.png', '.tiff', '.tif', '.svg'],
-  // TODO: Disable "Load original" button with non-streamable extensions
-  videoExts: ['.webm', '.mp4', '.wmv', '.avi', '.mov', '.mkv', '.m4v', '.m2ts'],
+  imageExts: ['.gif', '.jpeg', '.jpg', '.png', '.svg', '.tif', '.tiff', '.webp'],
+  videoExts: ['.3g2', '.3gp', '.asf', '.avchd', '.avi', '.divx', '.evo', '.flv', '.h264', '.h265', '.hevc', '.m2p', '.m2ts', '.m4v', '.mk3d', '.mkv', '.mov', '.mp4', '.mpeg', '.mpg', '.mxf', '.ogg', '.ogv', '.ps', '.qt', '.rmvb', '.ts', '.vob', '.webm', '.wmv'],
+  audioExts: ['.flac', '.mp3', '.wma'],
 
   isSomethingLoading: false,
   fadingIn: null,
@@ -677,15 +677,20 @@ page.getUploads = (params = {}) => {
         files[i].type = 'picture'
       } else if (page.videoExts.includes(extname)) {
         files[i].type = 'video'
+      } else if (page.audioExts.includes(extname)) {
+        files[i].type = 'audio'
       }
 
+      files[i].previewable = files[i].thumb || files[i].type === 'audio'
+
       // Cache bare minimum data for thumbnails viewer
       page.cache[files[i].id] = {
         name: files[i].name,
         original: files[i].original,
         thumb: files[i].thumb,
         file: files[i].file,
-        type: files[i].type
+        type: files[i].type,
+        previewable: files[i].previewable
       }
 
       // Prettify
@@ -743,7 +748,7 @@ page.getUploads = (params = {}) => {
         div.innerHTML += `
           <input type="checkbox" class="checkbox" title="Select" data-index="${i}" data-action="select"${upload.selected ? ' checked' : ''}>
           <div class="controls">
-            ${upload.thumb
+            ${upload.previewable
               ? `<a class="button is-small is-primary" title="Display preview" data-action="display-preview">
               <span class="icon">
                 <i class="${upload.type !== 'other' ? `icon-${upload.type}` : 'icon-doc-inv'}"></i>
@@ -827,7 +832,7 @@ page.getUploads = (params = {}) => {
           <td class="prettydate">${upload.prettyDate}</td>
           ${hasExpiryDateColumn ? `<td class="prettyexpirydate">${upload.prettyExpiryDate || '-'}</td>` : ''}
           <td class="controls has-text-right">
-            <a class="button is-small is-primary is-outlined" title="${upload.thumb ? 'Display preview' : 'File can\'t be previewed'}" data-action="display-preview"${upload.thumb ? '' : ' disabled'}>
+            <a class="button is-small is-primary is-outlined" title="${upload.previewable ? 'Display preview' : 'File can\'t be previewed'}" data-action="display-preview"${upload.previewable ? '' : ' disabled'}>
               <span class="icon">
                 <i class="${upload.type !== 'other' ? `icon-${upload.type}` : 'icon-doc-inv'}"></i>
               </span>
@@ -917,7 +922,7 @@ page.toggleOriginalNames = element => {
 
 page.displayPreview = id => {
   const file = page.cache[id]
-  if (!file.thumb) return
+  if (!file.previewable) return
 
   const div = document.createElement('div')
   div.innerHTML = `
@@ -926,9 +931,11 @@ page.displayPreview = id => {
         <div class="has-text-weight-bold">${file.name}</div>
         <div>${file.original}</div>
       </p>
-      <p class="swal-display-thumb-container">
+      ${file.thumb
+        ? `<p class="swal-display-thumb-container">
         <img id="swalThumb" src="${file.thumb}">
-      </p>
+      </p>`
+        : ''}
     </div>
   `
 
@@ -937,14 +944,15 @@ page.displayPreview = id => {
     const extname = exec && exec[0] ? exec[0].toLowerCase() : null
     const isimage = page.imageExts.includes(extname)
     const isvideo = !isimage && page.videoExts.includes(extname)
+    const isaudio = !isimage && !isvideo && page.audioExts.includes(extname)
 
-    if (isimage || isvideo) {
+    if (isimage || isvideo || isaudio) {
       div.innerHTML += `
         <div class="field has-text-centered">
           <div class="controls">
             <a id="swalOriginal" type="button" class="button is-info">
               <span class="icon">
-                <i class="icon-${isimage ? 'arrows-cw' : 'video'}"></i>
+                <i class="icon-${file.type}"></i>
               </span>
               <span>${isimage ? 'Load original' : 'Play in embedded player'}</span>
             </a>
@@ -976,7 +984,7 @@ page.displayPreview = id => {
             `
           }
         })
-      } else {
+      } else if (isvideo || isaudio) {
         const match = file.file.match(/.*\/(.*)$/)
         console.log(file.file, match)
         if (match || match[1]) {
@@ -991,10 +999,6 @@ page.displayPreview = id => {
     content: div,
     buttons: false
   }).then(() => {
-    // Destroy video, if necessary
-    const video = div.querySelector('#swalVideo')
-    if (video) video.remove()
-
     // Restore modal size
     document.body.querySelector('.swal-overlay .swal-modal').classList.remove('is-expanded')
   })

src/js/player.js

@@ -66,9 +66,9 @@ page.reloadVideo = () => {
       return page.onAxiosError(response)
     }
 
-    if (!response.headers['content-type'].startsWith('video/')) {
+    if (!/^(video|audio)\//.test(response.headers['content-type'])) {
       page.toggleReloadBtn(true)
-      return swal('An error occurred!', 'The requested upload does not appear to be a video file.', 'error')
+      return swal('An error occurred!', 'The requested upload does not appear to be a media file.', 'error')
     }
 
     if (page.player) {

src/libs/fontello/fontello.css

@@ -93,6 +93,7 @@
 .icon-docs::before { content: '\f0c5' } /* '' */
 .icon-exchange:before { content: '\f0ec'; } /* '' */
 .icon-doc-inv::before { content: '\f15b' } /* '' */
+.icon-audio:before { content: '\f1c7'; } /* '' */
 .icon-paper-plane::before { content: '\f1d8' } /* '' */
 .icon-chrome::before { content: '\f268' } /* '' */
 .icon-firefox::before { content: '\f269' } /* '' */

src/versions.json

@@ -3,5 +3,5 @@
   "2": "1602515119",
   "3": "1602515119",
   "4": "1602515119",
-  "5": "1602515119"
+  "5": "1604412502"
 }