Added metadata extraction for audio file in card

refs https://github.com/TryGhost/Team/issues/1230

- extracts audio duration and mimeType metadata for uploaded file

ghost/admin/lib/koenig-editor/addon/components/koenig-card-audio.hbs

@@ -120,7 +120,7 @@
                     <button class="kg-audio-pause-icon kg-audio-hide">{{svg-jar "pause"}}</button>
                     <span class="kg-audio-current-time">0:10</span>
                     <div class="kg-audio-time">
-                        /<span class="kg-audio-duration">3:20</span>
+                        /<span class="kg-audio-duration">{{this.totalDuration}}</span>
                     </div>
                     <input type="range" class="kg-audio-seek-slider" max="100" value="10">
                     <button class="kg-audio-playback-rate">1&#215;</button>

ghost/admin/lib/koenig-editor/addon/components/koenig-card-audio.js

@@ -1,4 +1,5 @@
 import Component from '@glimmer/component';
+import extractAudioMetadata from '../utils/extract-audio-metadata';
 import {
     IMAGE_EXTENSIONS,
     IMAGE_MIME_TYPES
@@ -76,6 +77,11 @@ export default class KoenigCardAudioComponent extends Component {
         };
     }
 
+    get totalDuration() {
+        let duration = this.args.payload.duration || this.previewPayload.duration;
+        return this.getFormattedDuration(duration);
+    }
+
     constructor() {
         super(...arguments);
         this.args.registerComponent(this);
@@ -158,9 +164,29 @@ export default class KoenigCardAudioComponent extends Component {
         }
     }
 
+    @task
+    *extractAudioMetadataTask(file) {
+        return yield extractAudioMetadata(file);
+    }
+
     @action
-    async audioUploadStarted() {
-        // TODO: Placeholder for any processing on audio upload
+    async audioUploadStarted(files) {
+        // extract metadata into temporary payload whilst audio is uploading
+        const file = files[0];
+        if (file) {
+            // use a task here so we can wait for it later if the upload is quicker
+            const metadata = await this.extractAudioMetadataTask.perform(file);
+
+            this.previewPayload.duration = metadata?.duration;
+            this.previewPayload.mimeType = metadata?.mimeType;
+        }
+    }
+
+    getFormattedDuration(duration = 200) {
+        const minutes = Math.floor(duration / 60);
+        const seconds = Math.floor(duration - (minutes * 60));
+        const formattedDuration = `${minutes}:${seconds}`;
+        return formattedDuration;
     }
 
     @action
@@ -178,6 +204,9 @@ export default class KoenigCardAudioComponent extends Component {
         this.previewPayload.src = audio.url;
         this.previewPayload.fileName = this.prettifyFileName(audio.fileName);
 
+        // upload can complete before metadata is extracted when running locally
+        await this.extractAudioMetadataTask.last;
+
         // save preview payload attrs into actual payload and create undo snapshot
         this.args.editor.run(() => {
             this.payloadAudioAttrs.forEach((attr) => {

ghost/admin/lib/koenig-editor/addon/utils/extract-audio-metadata.js

@@ -0,0 +1,15 @@
+export default function extractAudioMetadata(file) {
+    return new Promise((resolve) => {
+        let audio = new Audio();
+        let duration;
+        const mimeType = file.type;
+        audio.onloadedmetadata = function () {
+            duration = audio.duration;
+            resolve({
+                duration,
+                mimeType
+            });
+        };
+        audio.src = URL.createObjectURL(file);
+    });
+}