Implement new video download functionality with progress indication and cancellation option,

The download feature now informs users the status of the process as well as progress bar with cancel button.

Author: ferishili

assets/css/opencast.scss

@@ -723,6 +723,13 @@ h2.oc--loadingbar, .oc--loadingbar-title {
         }
     }
 
+    &.oc--minimal-progress {
+        height: 3px !important;
+        .oc--progress-bar {
+            height: 3px !important;
+        }
+    }
+
     margin: 5px 0;
 }
 
@@ -911,6 +918,113 @@ div.oc--dialog-possibilities {
     display: block;
 }
 
+/* * * * * * * * * * * */
+/*   DOWNLOAD VIDEOS   */
+/* * * * * * * * * * * */
+
+.oc--download-list-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    .oc--download-list {
+        flex-grow: 1;
+    }
+    .oc--download-messages {
+        flex-shrink: 0;
+    }
+
+    .oc--download-item {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: start;
+        align-items: stretch;
+        padding: 5px 0px;
+
+        button.button {
+            margin: 0px !important;
+        }
+
+        .oc--download-btn-container {
+            position: relative;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            width: 100%;
+
+            .oc--download-btn {
+                flex-grow: 1;
+                position: relative;
+            }
+
+            .oc--download-cancel {
+                margin-left: 5px;
+                flex-shrink: 0;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                &.active {
+                    cursor: pointer;
+                }
+
+                &.inactive {
+                    cursor: default;
+                }
+            }
+        }
+
+        .oc--download-info-container {
+            display: flex;
+            flex-direction: row;
+            justify-content: start;
+            align-items: center;
+            .oc--download-info-status {
+                flex: 1;
+                margin-left: 5px;
+                font-size: 0.8em;
+            }
+        }
+
+        .oc--download-spinner-container {
+            z-index: 999;
+            position: absolute;
+            top: 50%;
+            translate: 0 -50%;
+            left: 2px;
+            margin-right: 5px;
+            flex-shrink: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 24px;
+            height: 24px;
+
+            .oc--spinner {
+                transform: scale(0.5);
+            }
+            .oc--spinner:after {
+                content: " ";
+                display: block;
+                width: 24px;
+                height: 24px;
+                border-radius: 50%;
+                border: 6px solid;
+                border-color: #28497c transparent #28497c transparent;
+                animation: oc-spinner 1.2s linear infinite;
+            }
+            @keyframes oc-spinner {
+                0% {
+                    transform: rotate(0deg);
+                }
+                100% {
+                    transform: rotate(360deg);
+                }
+            }
+        }
+    }
+}
 
 /* * * * * * * * * * * * * * * * * * */
 /*   U P L O A D   E L E M E N T S   */

vueapp/app.js

@@ -45,6 +45,11 @@ window.addEventListener("DOMContentLoaded", function() {
         }, function (error) {
             store.dispatch('axiosStop');
 
+            // This makes it possible to cancel requests, but we at the moment we don't want to handle it here.
+            if (axios.isCancel(error)) {
+                return Promise.reject(error);
+            }
+
             if (error.response.data !== undefined) {
                 store.dispatch('addMessage', error.response);
             }

vueapp/components/ProgressBar.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="oc--progress">
+    <div class="oc--progress" :class="{'oc--minimal-progress': minimal === true}">
         <div class="oc--progress-bar" :style="`width: ` + progress + `%`">
-            <span>
+            <span v-if="minimal !== true">
                 {{ progress }}%
             </span>
         </div>
@@ -12,6 +12,6 @@
 export default {
     name: 'ProgressBar',
 
-    props: ['progress']
+    props: ['progress', 'minimal']
 }
 </script>