Merge pull request #8 from avalonmediasystem/feature#1956-Updates_to_…

…manifest_url_submission

Feature#1956 updates to manifest url submission

app/avalon/audio_player.js

@@ -1,14 +1,21 @@
 import Avalon from './avalon'
 import MediaPlayer from './media_player'
 import HashHandler from './hash_handler'
+import UtilityHelpers from './utility_helpers'
 
 export default class AudioPlayer extends MediaPlayer {
   constructor (options) {
     super(options)
+    let utilityHelpers = new UtilityHelpers()
     this.avalon = new Avalon()
+    this.canvases = this.getCanvases(options)
 
-    // Default use the first sequence to grab canvases
-    this.canvases = options.manifest.sequences[0].canvases
+    // Display error message and remove player UI if no canvases exist in manifest
+    if (this.canvases.length === 0) {
+      utilityHelpers.displayErrorMessage('Problem with manifest structure')
+      document.getElementById('data-iiifav-source').innerHTML = ''
+      return
+    }
     this.currentCanvas = this.getCanvas(this.canvases[0].id)
     this.hashHandler = new HashHandler({
       'qualityChoices': this.getQualityChoices(this.currentCanvas),
@@ -66,7 +73,7 @@ export default class AudioPlayer extends MediaPlayer {
 
         this.target.innerHTML = `
             <section class="ui stackable two column grid">
-              <article class="six wide column">${audioStructure}</article>
+              <article id="structure" class="six wide column">${audioStructure}</article>
               <article class="ten wide column player-wrapper">${audioElement}</article>
             </section>
           `

app/avalon/avalon.js

@@ -94,7 +94,7 @@ export default class Avalon {
   }
 
   /**
-   * Set up listener for Manifest URL form
+   * Set up listener for the Manifest Url form
    * @method Avalon#prepareForm
    * @return {void}
    */

app/avalon/hash_handler.js

@@ -1,3 +1,5 @@
+import $ from 'jquery'
+
 /** Class representing a HashHandler
  * this class is used for functionality based on the hash in the url
  * @class HashHandler
@@ -8,16 +10,26 @@ export default class HashHandler {
     this.instance = options.instance
     this.qualityChoices = options.qualityChoices
     this.player = undefined
-    this.bindHashLinkClick()
+    this.updating = false
+    // this.bindHashLinkClick()
   }
 
-  bindHashLinkClick () {
-    document.addEventListener('click', (event) => {
-      if (event.target.className.indexOf('media-structure-uri') > -1 && window.location.hash.search('/time/') > -1) {
-        this.playFromHash(window.location.hash)
-      }
-    })
-  }
+  /**
+   * The function adds and handles a click listener for structure links
+   * TODO: Fix this implementation, as it adds extra event listeners when a new manifest URL is loaded
+   *
+   * @method HashHandler#bindHashLinkClick
+   * @returns {void}
+   */
+  // bindHashLinkClick () {
+  //   let el = document.getElementById('data-iiifav-source').firstChild
+  //   el.addEventListener('click', (event) => {
+  //     if (event.target.className.indexOf('media-structure-uri') > -1 && window.location.hash.search('/time/') > -1) {
+  //       this.playFromHash(event.target.hash)
+  //     }
+  //   })
+  // }
+
   bindHashChange () {
     /**
      * this method binds the onhashchange event and checks the location.hash if a user comes directly from a URL with a hash in it
@@ -46,19 +58,22 @@ export default class HashHandler {
      * this method will read a media fragment from a hash in the URL and then play the starting location from the hash
      * @method HashHandler#playFromHash
      **/
-    var options = this.processHash(hash)
+    if (this.updating) {
+      return
+    }
+    this.updating = true
+    let options = this.processHash(hash)
     let canvasesExist = this.canvasesInManifest()
     let src = ''
 
     // Safari will only setCurrentTime() after 'canplay' event is fired
-    let handler = (e) => {
-      // Ensure this handler only fires once
-      this.player.removeEventListener(e.type, handler)
+    // Using jQuery's 'one' method ensures event only fires once, but there may be a better solution to limit
+    //   event listeners being unnecessarily added
+    $(this.player).one('canplay', () => {
       this.player.setCurrentTime(parseInt(options.start))
       this.player.play()
-    }
-
-    this.player.addEventListener('canplay', handler)
+      this.updating = false
+    })
 
     // Is canvas in the hash different from canvas currently in the player?
     if (canvasesExist && (options.canvas !== this.currentCanvasIndex)) {
@@ -97,6 +112,7 @@ export default class HashHandler {
       if (index % 2 === 0) {
         if (item === 'time') {
           const time = array[index + 1].split(',')
+          console.log('time', time)
           result['start'] = time[0]
           result['stop'] = time[1]
         }

app/avalon/media_player.js

@@ -263,4 +263,14 @@ export default class MediaPlayer {
     list.push('</ul>')
     return list.join('')
   }
+
+  getCanvases (options) {
+    let canvases = []
+    let sequences = options.manifest.sequences
+    if (sequences && sequences.length > 0) {
+      // Default use the first sequence to grab canvases
+      canvases = sequences[0].canvases || []
+    }
+    return canvases
+  }
 }

dist/audio.html

@@ -21,9 +21,8 @@ <h1>IIIF Manifest Standalone Player</h1>
 
   <form class="ui form" id="manifest-url-form">
     <div class="field">
-      <label>Update Manifest</label>
       <div class="ui fluid action input manifest-url-wrapper">
-        <input type="text" placeholder="Manifest URL..." id="manifest-url">
+        <input type="text" placeholder="Enter a manifest URL..." id="manifest-url">
         <button class="ui button" id="manifest-url-button">Submit</button>
       </div>
     </div>