From 45b0afc7769122bef33e4b96ad9adde3f9050f06 Mon Sep 17 00:00:00 2001 From: Adam Arling Date: Mon, 5 Jun 2017 10:28:25 -0500 Subject: [PATCH 1/2] Updates in valid manifest url, invalid json structure of manifest handling --- app/avalon/audio-player.js | 13 +- app/avalon/avalon.js | 2 +- app/avalon/hash-handler.js | 47 +- app/avalon/media-player.js | 10 + dist/audio.html | 4 +- dist/bundle.js | 10888 ++++++++++++++++++----------------- 6 files changed, 5516 insertions(+), 5448 deletions(-) diff --git a/app/avalon/audio-player.js b/app/avalon/audio-player.js index bf4dad7..3e293c6 100644 --- a/app/avalon/audio-player.js +++ b/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 = `
-
${audioStructure}
+
${audioStructure}
${audioElement}
` diff --git a/app/avalon/avalon.js b/app/avalon/avalon.js index 7f98e16..2741382 100644 --- a/app/avalon/avalon.js +++ b/app/avalon/avalon.js @@ -95,7 +95,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} */ diff --git a/app/avalon/hash-handler.js b/app/avalon/hash-handler.js index f7d36ec..dcbbfaa 100644 --- a/app/avalon/hash-handler.js +++ b/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,7 +112,7 @@ export default class HashHandler { if (index % 2 === 0) { if (item === 'time') { const time = array[index + 1].split(',') - console.log(time) + console.log('time', time) result['start'] = time[0] result['stop'] = time[1] } diff --git a/app/avalon/media-player.js b/app/avalon/media-player.js index 7cd2c5e..7e180f3 100644 --- a/app/avalon/media-player.js +++ b/app/avalon/media-player.js @@ -202,4 +202,14 @@ export default class MediaPlayer { list.push('') 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 + } } diff --git a/dist/audio.html b/dist/audio.html index f580033..4c569fb 100644 --- a/dist/audio.html +++ b/dist/audio.html @@ -21,9 +21,9 @@

IIIF Manifest Standalone Player

- +
- +
diff --git a/dist/bundle.js b/dist/bundle.js index b32b302..4def986 100644 --- a/dist/bundle.js +++ b/dist/bundle.js @@ -152,886 +152,6 @@ function toComment(sourceMap) { /* 1 */ /***/ (function(module, exports, __webpack_require__) { -/* - MIT License http://www.opensource.org/licenses/mit-license.php - Author Tobias Koppers @sokra -*/ -var stylesInDom = {}, - memoize = function(fn) { - var memo; - return function () { - if (typeof memo === "undefined") memo = fn.apply(this, arguments); - return memo; - }; - }, - isOldIE = memoize(function() { - // Test for IE <= 9 as proposed by Browserhacks - // @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805 - // Tests for existence of standard globals is to allow style-loader - // to operate correctly into non-standard environments - // @see https://github.com/webpack-contrib/style-loader/issues/177 - return window && document && document.all && !window.atob; - }), - getElement = (function(fn) { - var memo = {}; - return function(selector) { - if (typeof memo[selector] === "undefined") { - memo[selector] = fn.call(this, selector); - } - return memo[selector] - }; - })(function (styleTarget) { - return document.querySelector(styleTarget) - }), - singletonElement = null, - singletonCounter = 0, - styleElementsInsertedAtTop = [], - fixUrls = __webpack_require__(18); - -module.exports = function(list, options) { - if(typeof DEBUG !== "undefined" && DEBUG) { - if(typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment"); - } - - options = options || {}; - options.attrs = typeof options.attrs === "object" ? options.attrs : {}; - - // Force single-tag solution on IE6-9, which has a hard limit on the # of