Implement frontend only content downloads.

learningequality · May 3, 2021 · 950ea01 · 950ea01
1 parent 06a0a1d
commit 950ea01
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 8 deletions.
diff --git a/kolibri/core/assets/src/core-app/urls.js b/kolibri/core/assets/src/core-app/urls.js
@@ -65,6 +65,13 @@ const urls = {
     }
     return generateUrl(this.__contentUrl, { url: `${filename[0]}/${filename[1]}/${filename}` });
   },
+  downloadUrl(fileId, extension) {
+    const filename = `${fileId}.${extension}`;
+    if (!this.__contentUrl) {
+      throw new ReferenceError('Content Url is not defined');
+    }
+    return generateUrl(this.__contentUrl, { url: `${filename[0]}/${filename[1]}/${filename}` });
+  },
 };
 
 export default urls;
diff --git a/kolibri/core/assets/src/views/ContentRenderer/DownloadButton.vue b/kolibri/core/assets/src/views/ContentRenderer/DownloadButton.vue
@@ -11,6 +11,7 @@
 
 <script>
 
+  import urls from 'kolibri.urls';
   import { getFilePresetString } from './filePresetStrings';
 
   export default {
@@ -20,21 +21,55 @@
         type: Array,
         default: () => [],
       },
+      nodeTitle: {
+        type: String,
+        default: '',
+      },
     },
     computed: {
       fileOptions() {
-        return this.files.map(file => ({
-          label: getFilePresetString(file),
-          url: file.download_url,
-        }));
+        return this.files.map(file => {
+          const label = getFilePresetString(file);
+          return {
+            label,
+            url: urls.downloadUrl(file.checksum, file.extension),
+            fileName: this.$tr('downloadFilename', {
+              resourceTitle: this.nodeTitle,
+              fileExtension: file.extension,
+              fileId: file.checksum.slice(0, 6),
+            }),
+          };
+        });
       },
     },
     methods: {
       download(file) {
-        window.open(file.url, '_blank');
+        const req = new XMLHttpRequest();
+        req.open('GET', file.url, true);
+        req.responseType = 'blob';
+
+        req.onload = function() {
+          const blob = req.response;
+          const blobUrl = window.URL.createObjectURL(blob);
+          try {
+            const a = document.createElement('a');
+            a.download = file.fileName;
+            a.href = blobUrl;
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+          } catch (e) {
+            window.open(file.url, '_blank');
+          }
+        };
+
+        req.send();
       },
     },
-    $trs: { downloadContent: 'Download resource' },
+    $trs: {
+      downloadContent: 'Download resource',
+      downloadFilename: '{ resourceTitle } ({ fileId }).{ fileExtension }',
+    },
   };
 
 </script>

diff --git a/kolibri/core/assets/test/download-button.spec.js b/kolibri/core/assets/test/download-button.spec.js
@@ -2,17 +2,21 @@ import { mount } from '@vue/test-utils';
 import store from 'kolibri.coreVue.vuex.store';
 import DownloadButton from '../src/views/ContentRenderer/DownloadButton';
 
+jest.mock('kolibri.urls');
+
 describe('download-button Component', function() {
   const samplesFiles = [
     {
       file_size: 100000,
       preset: 'high_res_video',
-      download_url: '/downloadcontent/3893fd801427402ad07487c5d2d35119.mp4/Math_Low_Resolution.mp4',
+      extension: 'mp4',
+      checksum: '3893fd801427402ad07487c5d2d35119',
     },
     {
       file_size: 500,
       preset: 'thumbnail',
-      download_url: '/downloadcontent/187598e1f4596bf4492f5a205922b633.jpg/Math_Thumbnail.jpg',
+      extension: 'jpg',
+      checksum: '187598e1f4596bf4492f5a205922b633',
     },
   ];
 

diff --git a/kolibri/plugins/learn/assets/src/views/ContentPage.vue b/kolibri/plugins/learn/assets/src/views/ContentPage.vue
@@ -100,6 +100,7 @@
       <DownloadButton
         v-if="canDownload"
         :files="downloadableFiles"
+        :nodeTitle="content.title"
         class="download-button"
       />