[WIP] Adding Hashi to Studio to allow content previewing

contentcuration/contentcuration/frontend/channelEdit/views/files/ContentRenderer.vue

@@ -36,8 +36,9 @@
       </VLayout>
     </VCard>
     <iframe
-      v-else-if="isHTML"
-      :src="htmlPath"
+      v-else-if="isHTML || isH5P"
+      ref="iframe"
+      :src="rooturl"
       sandbox="allow-scripts"
       @load="loading = false"
     ></iframe>
@@ -67,6 +68,9 @@
   import uniqBy from 'lodash/uniqBy';
   import sortBy from 'lodash/sortBy';
   import { mapGetters } from 'vuex';
+  // eslint-disable-next-line
+  import Hashi from 'hashi';
+  import urls from './hashi/urls';
   import EpubRenderer from './EpubRenderer';
   import FileStatus from 'shared/views/files/FileStatus';
 
@@ -102,6 +106,9 @@
       file() {
         return this.getContentNodeFileById(this.nodeId, this.fileId);
       },
+      rooturl() {
+        return urls.hashi();
+      },
       supplementaryFiles() {
         let files = this.nodeId ? this.getContentNodeFiles(this.nodeId) : [];
         return files.filter(f => f.preset.supplementary);
@@ -122,15 +129,15 @@
       isHTML() {
         return this.file.file_format === 'zip';
       },
+      isH5P() {
+        return this.defaultFile.extension === 'h5p';
+      },
       isPDF() {
         return this.file.file_format === 'pdf';
       },
       isEpub() {
         return this.file.file_format === 'epub';
       },
-      htmlPath() {
-        return `/zipcontent/${this.file.checksum}.${this.file.file_format}`;
-      },
       src() {
         return this.file && this.file.url;
       },
@@ -140,6 +147,47 @@
         this.loading = Boolean(newFileId);
       },
     },
+    mounted() {
+      const now = Date.now();
+      this.hashi = new Hashi({ iframe: this.$refs.iframe, now });
+      this.hashi.onStateUpdate(data => {
+        this.$emit('updateContentState', data);
+      });
+      this.hashi.on('navigateTo', message => {
+        this.$emit('navigateTo', message);
+      });
+      this.hashi.on(this.hashi.events.RESIZE, scrollHeight => {
+        this.iframeHeight = scrollHeight;
+      });
+      this.hashi.on(this.hashi.events.LOADING, loading => {
+        this.loading = loading;
+      });
+      this.hashi.on(this.hashi.events.ERROR, err => {
+        this.loading = false;
+        this.$emit('error', err);
+      });
+      let storageUrl = this.defaultFile.storage_url;
+      if (!this.isH5P) {
+        // In the case that this is being routed via a remote URL
+        // ensure we preserve that for the zip endpoint.
+        const query = this.defaultFile.storage_url.split('?')[1];
+        storageUrl = urls.zipContentUrl(
+          this.defaultFile.checksum,
+          this.defaultFile.extension,
+          this.entry
+        );
+        if (query) {
+          storageUrl += '?' + query;
+        }
+      }
+
+      this.hashi.initialize(
+        (this.extraFields && this.extraFields.contentState) || {},
+        this.userData || {},
+        storageUrl,
+        this.defaultFile.checksum
+      );
+    },
     $trs: {
       noFileText: 'Select a file to preview',
       previewNotSupported: 'Preview unavailable',

contentcuration/contentcuration/frontend/channelEdit/views/files/hashi/baseShim.js

@@ -0,0 +1,38 @@
+import { events } from './hashiBase';
+
+export default class BaseShim {
+  constructor(mediator) {
+    this.__mediator = mediator;
+    this.events = Object.assign({}, events);
+    this.__nowDiff = 0;
+    this.__setNowDiff = this.__setNowDiff.bind(this);
+    this.on(this.events.NOW, this.__setNowDiff);
+  }
+
+  setData(data) {
+    this.__setData(data);
+    this.stateUpdated();
+  }
+
+  sendMessage(event, data) {
+    this.__mediator.sendMessage({ nameSpace: this.nameSpace, event, data });
+  }
+
+  on(event, callback) {
+    if (!Object.values(this.events).includes(event)) {
+      throw ReferenceError(`${event} is not a valid event name for ${this.nameSpace}`);
+    }
+    this.__mediator.registerMessageHandler({ nameSpace: this.nameSpace, event, callback });
+  }
+
+  off(event, callback) {
+    if (!Object.values(this.events).includes(event)) {
+      throw ReferenceError(`${event} is not a valid event name for ${this.nameSpace}`);
+    }
+    this.__mediator.removeMessageHandler({ nameSpace: this.nameSpace, event, callback });
+  }
+
+  stateUpdated() {
+    this.sendMessage(this.events.STATEUPDATE, this.data);
+  }
+}

contentcuration/contentcuration/frontend/channelEdit/views/files/hashi/hashiBase.js

@@ -0,0 +1,43 @@
+export const events = {
+  READYCHECK: 'readycheck',
+  MAINREADY: 'mainready',
+  IFRAMEREADY: 'iframeready',
+  STATEUPDATE: 'stateupdate',
+  USERDATAUPDATE: 'userdataupdate',
+  DATAREQUESTED: 'datarequested',
+  COLLECTIONREQUESTED: 'collectionrequested',
+  COLLECTIONPAGEREQUESTED: 'collectionpagerequested',
+  MODELREQUESTED: 'modelrequested',
+  SEARCHRESULTREQUESTED: 'searchresultrequested',
+  DATARETURNED: 'datareturned',
+  KOLIBRIDATARETURNED: 'kolibridatareturned',
+  NAVIGATETO: 'navigateTo',
+  CONTEXT: 'context',
+  THEMECHANGED: 'themechanged',
+  KOLIBRIVERSIONREQUESTED: 'kolibriversionrequested',
+  CHANNELMETADATAREQUESTED: 'channelmetadatarequested',
+  CHANNELFILTEROPTIONSREQUESTED: 'channelfilteroptionsrequested',
+  RANDOMCOLLECTIONREQUESTED: 'randomcollectionrequested',
+  NOW: 'now',
+  RESIZE: 'resize',
+  LOADING: 'loading',
+  ERROR: 'error',
+};
+
+export const DataTypes = {
+  MODEL: 'Model',
+  SEARCHRESULT: 'SearchResult',
+  COLLECTION: 'Collection',
+  COLLECTIONPAGE: 'CollectionPage',
+  KOLIBRIVERSION: 'KolibriVersion',
+  CHANNELMETADATA: 'ChannelMetadata',
+  CHANNELFILTEROPTIONS: 'ChannelFilterOptions',
+  RANDOMCOLLECTION: 'RandomCollection',
+};
+
+export const MessageStatuses = {
+  FAILURE: 'failure',
+  SUCCESS: 'success',
+};
+
+export const nameSpace = 'hashi';