Download the media files via the browser download mechanism (#1390)

This PR replaces the javascript download function for media files by the integrated browser download mechanism.

Author: dennis531

app/controllers/redirect.php

@@ -109,7 +109,7 @@ public function download_action($token, $type, $index)
                     // Set headers properly.
                     header('Content-Type: ' . $response->getHeaderLine('Content-Type') ?: 'application/octet-stream');
                     header('Content-Length: ' . $response->getHeaderLine('Content-Length'));
-                    header('Content-Disposition: attachment; filename*=UTF-8\'\'' . basename($url));
+                    header('Content-Disposition: attachment');
                     header('Cache-Control: no-cache');
                     header('Pragma: no-cache');
 

vueapp/components/Videos/Actions/VideoDownload.vue

@@ -20,7 +20,7 @@
                                     type="radio"
                                     value="presenter"
                                     v-model="selectedSource"
-                                    :disabled="!hasPresenterVideo || downloadInProgress"
+                                    :disabled="!hasPresenterVideo"
                                 />
                                 {{ $gettext('Aufzeichnung der vortragenden Person') }}</label
                             >
@@ -29,21 +29,21 @@
                                     type="radio"
                                     value="presentation"
                                     v-model="selectedSource"
-                                    :disabled="!hasPresentationVideo || downloadInProgress"
+                                    :disabled="!hasPresentationVideo"
                                 />
                                 {{ $gettext('Aufzeichnung des Bildschirms') }}</label
                             >
                             <label>
                                 {{ $gettext('Videoqualität') }}
-                                <select v-model="selectedMedia" :disabled="downloadInProgress">
+                                <select v-model="selectedMedia">
                                     <template v-if="selectedSource === 'presenter'">
-                                        <option v-for="(media, index) in tuned_presenters" :key="index" :value="media">
+                                        <option v-for="(media, index) in presenters" :key="index" :value="media">
                                             {{ getMediaText(media) }}
                                         </option>
                                     </template>
                                     <template v-else>
                                         <option
-                                            v-for="(media, index) in tuned_presentations"
+                                            v-for="(media, index) in presentations"
                                             :key="index"
                                             :value="media"
                                         >
@@ -53,10 +53,6 @@
                                 </select>
                             </label>
                         </form>
-                        <template v-if="downloadInProgress">
-                            <span>{{ $gettext('Video wird heruntergeladen') }}</span>
-                            <ProgressBar :progress="selectedMedia.progress" />
-                        </template>
                     </div>
                     <div class="oc--download-messages">
                         <MessageList :float="true" :dialog="true" />
@@ -72,12 +68,9 @@
                 >
                     {{ $gettext('Link kopieren') }}
                 </button>
-                <button v-if="!downloadInProgress" class="button" @click="downloadFile()">
+                <a :href="downloadUrl" :download="selectedFileName" class="button">
                     {{ $gettext('Herunterladen') }}
-                </button>
-                <button v-else class="button" @click="abortDownload()">
-                    {{ $gettext('Herunterladen abbrechen') }}
-                </button>
+                </a>
             </template>
         </StudipDialog>
     </div>
@@ -112,26 +105,6 @@ export default {
     },
 
     computed: {
-        tuned_presentations() {
-            let tuned = this.presentations.map((media) => {
-                media.loading = false;
-                media.download_controller = new AbortController();
-                media.progress = 0;
-                return media;
-            });
-            return tuned;
-        },
-
-        tuned_presenters() {
-            let tuned = this.presenters.map((media) => {
-                media.loading = false;
-                media.download_controller = new AbortController();
-                media.progress = 0;
-                return media;
-            });
-            return tuned;
-        },
-
         hasPresenterVideo() {
             return this.presenters.length > 0;
         },
@@ -140,90 +113,24 @@ export default {
             return this.presentations.length > 0;
         },
 
-        downloadInProgress() {
-            return this.selectedMedia?.loading;
+        selectedMediaIndex() {
+            return this.selectedMedia?.size;
         },
-    },
 
-    methods: {
-        abortDownload() {
-            if (this.downloadInProgress) {
-                this.selectedMedia.download_controller.abort();
-                this.selectedMedia.progress = 0;
-                this.selectedMedia.loading = false;
-            }
-        },
-        async downloadFile() {
-            const index = this.selectedMedia?.size;
-            const type = this.selectedSource;
-            if (this.selectedMedia?.loading === true) {
-                return;
-            }
-            this.$store.dispatch('clearMessages', true);
-            let view = this;
-
-            let url = window.OpencastPlugin.REDIRECT_URL + '/download/' + this.event.token + '/' + type + '/' + index;
-            this.selectedMedia.loading = true;
-            this.selectedMedia.progress = 0;
-
-            let dummy_download_link = null;
-
-            axios
-                .get(url, {
-                    responseType: 'blob',
-                    signal: this.selectedMedia.download_controller.signal,
-                    onDownloadProgress: (progressEvent) => {
-                        let percentage = Math.round((progressEvent.loaded * 100) / index);
-                        if (percentage > 100) {
-                            percentage = 100;
-                        }
-                        this.selectedMedia.progress = percentage;
-                    },
-                })
-                .then((response) => {
-                    const blob = new Blob([response.data]);
-                    dummy_download_link = document.createElement('a');
-                    dummy_download_link.href = URL.createObjectURL(blob);
-                    dummy_download_link.download = this.getFileName(this.selectedMedia);
-                    dummy_download_link.click();
-                    view.$store.dispatch('addMessage', {
-                        type: 'success',
-                        text: this.$gettext('Herunterladen des Mediums abgeschlossen.'),
-                        dialog: true,
-                    });
-                })
-                .catch((err) => {
-                    let message = {
-                        type: 'error',
-                        text: this.$gettext('Herunterladen des Mediums fehlgeschlagen!'),
-                        dialog: true,
-                    };
-                    if (axios.isCancel(err)) {
-                        message.type = 'warning';
-                        message.text = this.$gettext('Herunterladen des Mediums abgebrochen!');
-                    }
-                    view.$store.dispatch('addMessage', message);
-                })
-                .finally(() => {
-                    this.resetMediaDownloadProps();
-                    if (dummy_download_link) {
-                        URL.revokeObjectURL(dummy_download_link.href);
-                        dummy_download_link.remove();
-                        dummy_download_link = null;
-                    }
-                });
+        downloadUrl() {
+            return window.OpencastPlugin.REDIRECT_URL + '/download/' + this.event.token + '/' + this.selectedSource + '/' + this.selectedMediaIndex;
         },
 
-        resetMediaDownloadProps() {
-            this.selectedMedia.loading = false;
-            this.selectedMedia.download_controller = new AbortController();
-            this.selectedMedia.progress = 0;
-        },
+        selectedFileName() {
+            return this.getFileName(this.selectedMedia);
+        }
+    },
 
+    methods: {
         getFileName(media) {
-            let res = media.info;
+            let res = media?.info || '';
             res = res.replace(' * ', ' x ').replace(/\s+/g, '');
-            let ext = media.url.split('.').pop();
+            let ext = media?.url.split('.').pop() || '';
             return this.event.title + ' (' + res + ').' + ext;
         },
 
@@ -285,19 +192,19 @@ export default {
         this.extractDownloads();
         if (this.hasPresenterVideo) {
             this.selectedSource = 'presenter';
-            this.selectedMedia = this.tuned_presenters[0];
+            this.selectedMedia = this.presenters[0];
         } else {
             this.selectedSource = 'presentation';
-            this.selectedMedia = this.tuned_presentations[0];
+            this.selectedMedia = this.presentations[0];
         }
     },
     watch: {
         selectedSource(newSource) {
             if (newSource === 'presenter') {
-                this.selectedMedia = this.tuned_presenters[0];
+                this.selectedMedia = this.presenters[0];
             }
             if (newSource === 'presentation') {
-                this.selectedMedia = this.tuned_presentations[0];
+                this.selectedMedia = this.presentations[0];
             }
         }
     }