Implementation to extract metadata from H5P Content Package

contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue

@@ -489,13 +489,19 @@
       },
       createNodesFromUploads(fileUploads) {
         fileUploads.forEach((file, index) => {
-          const title = file.original_filename
-            .split('.')
-            .slice(0, -1)
-            .join('.');
+          let title;
+          if (file.metadata.title) {
+            title = file.metadata.title;
+          } else {
+            title = file.original_filename
+              .split('.')
+              .slice(0, -1)
+              .join('.');
+          }
+          console.log(file.metadata);
           this.createNode(
             FormatPresets.has(file.preset) && FormatPresets.get(file.preset).kind_id,
-            { title }
+            { title, ...file.metadata }
           ).then(newNodeId => {
             if (index === 0) {
               this.selected = [newNodeId];

contentcuration/contentcuration/frontend/shared/vuex/file/actions.js

@@ -198,6 +198,7 @@ export function uploadFile(context, { file, preset = null } = {}) {
       }); // End get upload url
     })
     .then(data => {
+      data.file.metadata = metadata;
       const fileObject = {
         ...data.file,
         loaded: 0,

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);
+    }
   });
 }

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",

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"