- add jszip yarn package;

- implement code to extract .h5p files metadata;
learningequality · Jun 12, 2023 · 7b4608c · 7b4608c
1 parent 97b345d
commit 7b4608c
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 14 deletions.
diff --git a/contentcuration/contentcuration/frontend/shared/vuex/file/utils.js b/contentcuration/contentcuration/frontend/shared/vuex/file/utils.js
@@ -1,4 +1,5 @@
 import SparkMD5 from 'spark-md5';
+import JSZip from 'jszip';
 import { FormatPresetsList, FormatPresetsNames } from 'shared/leUtils/FormatPresets';
 
 const BLOB_SLICE = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
@@ -7,8 +8,10 @@ const MEDIA_PRESETS = [
   FormatPresetsNames.AUDIO,
   FormatPresetsNames.HIGH_RES_VIDEO,
   FormatPresetsNames.LOW_RES_VIDEO,
+  FormatPresetsNames.H5P,
 ];
 const VIDEO_PRESETS = [FormatPresetsNames.HIGH_RES_VIDEO, FormatPresetsNames.LOW_RES_VIDEO];
+const H5P_PRESETS = [FormatPresetsNames.H5P];
 
 export function getHash(file) {
   return new Promise((resolve, reject) => {
@@ -61,6 +64,42 @@ export function storageUrl(checksum, file_format) {
   return `/content/storage/${checksum[0]}/${checksum[1]}/${checksum}.${file_format}`;
 }
 
+export async function getH5PMetadata(fileInput, metadata) {
+  // const file = fileInput.files[0];
+  // console.log(typeof(files), file);
+  const zip = new JSZip();
+  zip
+    .loadAsync(fileInput)
+    .then(function(zip) {
+      const h5pJson = zip.file('h5p.json');
+      // console.log(h5pJson);
+      if (h5pJson) {
+        return h5pJson.async('text');
+      } else {
+        throw new Error('h5p.json not found in the H5P file.');
+      }
+    })
+    .then(function(h5pContent) {
+      const data = JSON.parse(h5pContent);
+      if (Object.prototype.hasOwnProperty.call(data, 'title')) {
+        metadata.Title = data['title'];
+      }
+      if (Object.prototype.hasOwnProperty.call(data, 'language') && data['language'] !== 'und') {
+        metadata.language = data['language'];
+      }
+      if (Object.prototype.hasOwnProperty.call(data, 'authors')) {
+        metadata.author = data['authors'];
+      }
+      if (Object.prototype.hasOwnProperty.call(data, 'license')) {
+        metadata.license = data['license'];
+      }
+    })
+    .catch(function(error) {
+      console.error('Error loading or extracting H5P file:', error);
+    });
+  return metadata;
+}
+
 /**
  * @param {{name: String, preset: String}} file
  * @param {String|null} preset
@@ -85,24 +124,32 @@ export function extractMetadata(file, preset = null) {
     return Promise.resolve(metadata);
   }
 
+  const isH5P = H5P_PRESETS.includes(metadata.preset);
+
   // Extract additional media metadata
   const isVideo = VIDEO_PRESETS.includes(metadata.preset);
 
   return new Promise(resolve => {
-    const mediaElement = document.createElement(isVideo ? 'video' : 'audio');
-    // Add a listener to read the metadata once it has loaded.
-    mediaElement.addEventListener('loadedmetadata', () => {
-      metadata.duration = Math.floor(mediaElement.duration);
-      // Override preset based off video resolution
-      if (isVideo) {
-        metadata.preset =
-          mediaElement.videoHeight >= 720
-            ? FormatPresetsNames.HIGH_RES_VIDEO
-            : FormatPresetsNames.LOW_RES_VIDEO;
-      }
+    if (isH5P) {
+      getH5PMetadata(file, metadata);
+      console.log(metadata);
       resolve(metadata);
-    });
-    // Set the src url on the media element
-    mediaElement.src = URL.createObjectURL(file);
+    } else {
+      const mediaElement = document.createElement(isVideo ? 'video' : 'audio');
+      // Add a listener to read the metadata once it has loaded.
+      mediaElement.addEventListener('loadedmetadata', () => {
+        metadata.duration = Math.floor(mediaElement.duration);
+        // Override preset based off video resolution
+        if (isVideo) {
+          metadata.preset =
+            mediaElement.videoHeight >= 720
+              ? FormatPresetsNames.HIGH_RES_VIDEO
+              : FormatPresetsNames.LOW_RES_VIDEO;
+        }
+        resolve(metadata);
+      });
+      // Set the src url on the media element
+      mediaElement.src = URL.createObjectURL(file);
+    }
   });
 }
diff --git a/package.json b/package.json
@@ -70,6 +70,7 @@
     "intl": "1.2.5",
     "jquery": "^2.2.4",
     "jspdf": "https://github.com/parallax/jsPDF.git#b7a1d8239c596292ce86dafa77f05987bcfa2e6e",
+    "jszip": "^3.10.1",
     "kolibri-constants": "^0.1.41",
     "kolibri-design-system": "https://github.com/learningequality/kolibri-design-system#e9a2ff34716bb6412fe99f835ded5b17345bab94",
     "lodash": "^4.17.21",

diff --git a/yarn.lock b/yarn.lock
@@ -8967,6 +8967,16 @@ jsprim@^1.2.2:
     json-schema "0.4.0"
     verror "1.10.0"
 
+jszip@^3.10.1:
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.10.1.tgz#34aee70eb18ea1faec2f589208a157d1feb091c2"
+  integrity sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==
+  dependencies:
+    lie "~3.3.0"
+    pako "~1.0.2"
+    readable-stream "~2.3.6"
+    setimmediate "^1.0.5"
+
 jszip@^3.7.1:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.10.0.tgz#faf3db2b4b8515425e34effcdbb086750a346061"