From 43342bb2a2dbc4c268eb38c0847a1fea8226c07a Mon Sep 17 00:00:00 2001
From: edsilv <e.silverton@gmail.com>
Date: Fri, 12 Jan 2018 14:05:55 +0000
Subject: [PATCH] position highlight

---
 dist/iiif-av-component.bundle.js | 2 +-
 dist/iiif-av-component.d.ts      | 2 +-
 dist/iiif-av-component.js        | 4 ++--
 dist/iiif-av-component.min.js    | 4 ++--
 examples/js/iiif-av-component.js | 4 ++--
 package.json                     | 2 +-
 src/AVComponent.ts               | 4 ++--
 7 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/dist/iiif-av-component.bundle.js b/dist/iiif-av-component.bundle.js
index 4295857..1ac9216 100644
--- a/dist/iiif-av-component.bundle.js
+++ b/dist/iiif-av-component.bundle.js
@@ -10889,4 +10889,4 @@ function extend() {
 });
 !function(f){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=f();else if("function"==typeof define&&define.amd)define([],f);else{var g;g="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,g.manifold=f()}}(function(){return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){(function(global){var Manifold;!function(Manifold){var StringValue=function(){function StringValue(value){this.value="",value&&(this.value=value.toLowerCase())}return StringValue.prototype.toString=function(){return this.value},StringValue}();Manifold.StringValue=StringValue}(Manifold||(Manifold={}));var Manifold,__extends=this&&this.__extends||function(){var extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)b.hasOwnProperty(p)&&(d[p]=b[p])};return function(d,b){function __(){this.constructor=d}extendStatics(d,b),d.prototype=null===b?Object.create(b):(__.prototype=b.prototype,new __)}}();!function(Manifold){var TreeSortType=function(_super){function TreeSortType(){return null!==_super&&_super.apply(this,arguments)||this}return __extends(TreeSortType,_super),TreeSortType.prototype.date=function(){return new TreeSortType(TreeSortType.DATE.toString())},TreeSortType.prototype.none=function(){return new TreeSortType(TreeSortType.NONE.toString())},TreeSortType.DATE=new TreeSortType("date"),TreeSortType.NONE=new TreeSortType("none"),TreeSortType}(Manifold.StringValue);Manifold.TreeSortType=TreeSortType}(Manifold||(Manifold={}));var Manifold;!function(Manifold){var AnnotationGroup=function(){function AnnotationGroup(resource,canvasIndex){this.rects=[],this.canvasIndex=canvasIndex,this.addRect(resource)}return AnnotationGroup.prototype.addRect=function(resource){var rect=new Manifold.AnnotationRect(resource);rect.canvasIndex=this.canvasIndex,rect.index=this.rects.length,this.rects.push(rect),this.rects.sort(function(a,b){return a.index-b.index})},AnnotationGroup}();Manifold.AnnotationGroup=AnnotationGroup}(Manifold||(Manifold={}));var Manifold;!function(Manifold){var AnnotationRect=function(){function AnnotationRect(result){this.isVisible=!0;var xywh=result.on.match(/.*xywh=(\d*),(\d*),(\d*),(\d*)/);this.x=Number(xywh[1]),this.y=Number(xywh[2]),this.width=Number(xywh[3]),this.height=Number(xywh[4]),this.chars=result.resource.chars}return AnnotationRect}();Manifold.AnnotationRect=AnnotationRect}(Manifold||(Manifold={}));var Manifold;!function(Manifold){var Bootstrapper=function(){function Bootstrapper(options){this._options=options,this._options.locale=this._options.locale||"en-GB"}return Bootstrapper.prototype.bootstrap=function(res,rej){var that=this;return new Promise(function(resolve,reject){res&&rej&&(resolve=res,reject=rej);var msie=that._detectIE();if(msie===!1)manifesto.loadManifest(that._options.iiifResourceUri).then(function(json){that._loaded(that,json,resolve,reject)});else if(msie>0)if(9===msie){var settings={url:that._options.iiifResourceUri,type:"GET",dataType:"jsonp",jsonp:"callback",jsonpCallback:"manifestCallback"};$.ajax(settings),global.manifestCallback=function(json){that._loaded(that,JSON.stringify(json),resolve,reject)}}else $.getJSON(that._options.iiifResourceUri,function(json){that._loaded(that,JSON.stringify(json),resolve,reject)})})},Bootstrapper.prototype._loaded=function(bootstrapper,json,resolve,reject){var iiifResource=manifesto.create(json,{locale:bootstrapper._options.locale});if(bootstrapper._options.iiifResource||(bootstrapper._options.iiifResource=iiifResource),iiifResource.getIIIFResourceType().toString()===manifesto.IIIFResourceType.collection().toString()||"collection"===iiifResource.getIIIFResourceType().toString().toLowerCase()){var collections=iiifResource.getCollections();collections&&collections.length?iiifResource.getCollectionByIndex(bootstrapper._options.collectionIndex).then(function(collection){collection||reject("Collection index not found"),0===collection.getTotalManifests()&&0===bootstrapper._options.manifestIndex&&collection.getTotalCollections()>0?(bootstrapper._options.collectionIndex=0,bootstrapper._options.iiifResourceUri=collection.id,bootstrapper.bootstrap(resolve,reject)):collection.getManifestByIndex(bootstrapper._options.manifestIndex).then(function(manifest){bootstrapper._options.manifest=manifest;var helper=new Manifold.Helper(bootstrapper._options);resolve(helper)})}):iiifResource.getManifestByIndex(bootstrapper._options.manifestIndex).then(function(manifest){bootstrapper._options.manifest=manifest;var helper=new Manifold.Helper(bootstrapper._options);resolve(helper)})}else{bootstrapper._options.manifest=iiifResource;var helper=new Manifold.Helper(bootstrapper._options);resolve(helper)}},Bootstrapper.prototype._detectIE=function(){var ua=window.navigator.userAgent,msie=ua.indexOf("MSIE ");if(msie>0)return parseInt(ua.substring(msie+5,ua.indexOf(".",msie)),10);var trident=ua.indexOf("Trident/");if(trident>0){var rv=ua.indexOf("rv:");return parseInt(ua.substring(rv+3,ua.indexOf(".",rv)),10)}var edge=ua.indexOf("Edge/");return edge>0&&parseInt(ua.substring(edge+5,ua.indexOf(".",edge)),10)},Bootstrapper}();Manifold.Bootstrapper=Bootstrapper}(Manifold||(Manifold={}));var Manifold;!function(Manifold){var ExternalResource=function(){function ExternalResource(canvas,options){this.authHoldingPage=null,this.clickThroughService=null,this.externalService=null,this.isResponseHandled=!1,this.kioskService=null,this.loginService=null,this.logoutService=null,this.restrictedService=null,this.tokenService=null,canvas.externalResource=this,this.dataUri=this._getDataUri(canvas),this.index=canvas.index,this.authAPIVersion=options.authApiVersion,this._parseAuthServices(canvas),this._parseDimensions(canvas)}return ExternalResource.prototype._getDataUri=function(canvas){var content=canvas.getContent(),images=canvas.getImages();if(content&&content.length){var annotation=content[0],annotationBody=annotation.getBody();return annotationBody.length?annotationBody[0].id:null}if(images&&images.length){var infoUri=null,firstImage=images[0],resource=firstImage.getResource(),services=resource.getServices();if(services.length){for(var i=0;i<services.length;i++){var service=services[i],id=service.id;id.endsWith("/")||(id+="/"),manifesto.Utils.isImageProfile(service.getProfile())&&(infoUri=id+"info.json")}return infoUri}return resource.id}var service=canvas.getService(manifesto.ServiceProfile.ixif());return service?service.getInfoUri():canvas.id},ExternalResource.prototype._parseAuthServices=function(resource){.9===this.authAPIVersion?(this.clickThroughService=manifesto.Utils.getService(resource,manifesto.ServiceProfile.clickThrough().toString()),this.loginService=manifesto.Utils.getService(resource,manifesto.ServiceProfile.login().toString()),this.restrictedService=manifesto.Utils.getService(resource,manifesto.ServiceProfile.restricted().toString()),this.clickThroughService?(this.logoutService=this.clickThroughService.getService(manifesto.ServiceProfile.logout().toString()),this.tokenService=this.clickThroughService.getService(manifesto.ServiceProfile.token().toString())):this.loginService?(this.logoutService=this.loginService.getService(manifesto.ServiceProfile.logout().toString()),this.tokenService=this.loginService.getService(manifesto.ServiceProfile.token().toString())):this.restrictedService&&(this.logoutService=this.restrictedService.getService(manifesto.ServiceProfile.logout().toString()),this.tokenService=this.restrictedService.getService(manifesto.ServiceProfile.token().toString()))):(this.clickThroughService=manifesto.Utils.getService(resource,manifesto.ServiceProfile.auth1Clickthrough().toString()),this.loginService=manifesto.Utils.getService(resource,manifesto.ServiceProfile.auth1Login().toString()),this.externalService=manifesto.Utils.getService(resource,manifesto.ServiceProfile.auth1External().toString()),this.kioskService=manifesto.Utils.getService(resource,manifesto.ServiceProfile.auth1Kiosk().toString()),this.clickThroughService?(this.logoutService=this.clickThroughService.getService(manifesto.ServiceProfile.auth1Logout().toString()),this.tokenService=this.clickThroughService.getService(manifesto.ServiceProfile.auth1Token().toString())):this.loginService?(this.logoutService=this.loginService.getService(manifesto.ServiceProfile.auth1Logout().toString()),this.tokenService=this.loginService.getService(manifesto.ServiceProfile.auth1Token().toString())):this.externalService?(this.logoutService=this.externalService.getService(manifesto.ServiceProfile.auth1Logout().toString()),this.tokenService=this.externalService.getService(manifesto.ServiceProfile.auth1Token().toString())):this.kioskService&&(this.logoutService=this.kioskService.getService(manifesto.ServiceProfile.auth1Logout().toString()),this.tokenService=this.kioskService.getService(manifesto.ServiceProfile.auth1Token().toString())))},ExternalResource.prototype._parseDimensions=function(canvas){var images=canvas.getImages();if(images&&images.length){var firstImage=images[0],resource=firstImage.getResource();this.width=resource.getWidth(),this.height=resource.getHeight()}},ExternalResource.prototype.isAccessControlled=function(){return!!(this.clickThroughService||this.loginService||this.externalService||this.kioskService)},ExternalResource.prototype.hasServiceDescriptor=function(){return!!this.dataUri&&this.dataUri.endsWith("info.json")},ExternalResource.prototype.getData=function(accessToken){var _this=this,that=this;return that.data={},new Promise(function(resolve,reject){_this.dataUri||reject("There is no dataUri to fetch");var type="GET";if(!that.hasServiceDescriptor()){if(!that.isAccessControlled())return that.status=HTTPStatusCode.OK,void resolve(that);type="HEAD"}$.ajax({url:that.dataUri,type:type,dataType:"json",beforeSend:function(xhr){accessToken&&xhr.setRequestHeader("Authorization","Bearer "+accessToken.accessToken)}}).done(function(data){if(data){var uri=unescape(data["@id"]);that.data=data,that._parseAuthServices(that.data),uri.endsWith("/info.json")&&(uri=uri.substr(0,uri.lastIndexOf("/")));var dataUri=that.dataUri;dataUri&&dataUri.endsWith("/info.json")&&(dataUri=dataUri.substr(0,dataUri.lastIndexOf("/"))),uri!==dataUri&&that.loginService?that.status=HTTPStatusCode.MOVED_TEMPORARILY:that.status=HTTPStatusCode.OK,resolve(that)}else that.status=HTTPStatusCode.OK,resolve(that)}).fail(function(error){that.status=error.status,that.error=error,error.responseJSON&&that._parseAuthServices(error.responseJSON),resolve(that)})})},ExternalResource}();Manifold.ExternalResource=ExternalResource}(Manifold||(Manifold={}));var Manifold;!function(Manifold){var Helper=function(){function Helper(options){this.options=options,this.iiifResource=this.options.iiifResource,this.iiifResourceUri=this.options.iiifResourceUri,this.manifest=this.options.manifest,this.collectionIndex=this.options.collectionIndex||0,this.manifestIndex=this.options.manifestIndex||0,this.sequenceIndex=this.options.sequenceIndex||0,this.canvasIndex=this.options.canvasIndex||0}return Helper.prototype.getAutoCompleteService=function(){var service=this.getSearchService();return service?service.getService(manifesto.ServiceProfile.autoComplete()):null},Helper.prototype.getAttribution=function(){var attribution=this.manifest.getAttribution();return attribution?Manifesto.TranslationCollection.getValue(attribution):null},Helper.prototype.getCanvases=function(){return this.getCurrentSequence().getCanvases()},Helper.prototype.getCanvasById=function(id){return this.getCurrentSequence().getCanvasById(id)},Helper.prototype.getCanvasesById=function(ids){for(var canvases=[],i=0;i<ids.length;i++){var id=ids[i],canvas=this.getCanvasById(id);canvas&&canvases.push(canvas)}return canvases},Helper.prototype.getCanvasByIndex=function(index){return this.getCurrentSequence().getCanvasByIndex(index)},Helper.prototype.getCanvasIndexById=function(id){return this.getCurrentSequence().getCanvasIndexById(id)},Helper.prototype.getCanvasIndexByLabel=function(label){var foliated=this.getManifestType().toString()===manifesto.ManifestType.manuscript().toString();return this.getCurrentSequence().getCanvasIndexByLabel(label,foliated)},Helper.prototype.getCanvasRange=function(canvas,path){var ranges=this.getCanvasRanges(canvas);if(path){for(var i=0;i<ranges.length;i++){var range=ranges[i];if(range.path===path)return range}return null}return ranges[0]},Helper.prototype.getCanvasRanges=function(canvas){return canvas.ranges?canvas.ranges:(canvas.ranges=this.manifest.getAllRanges().en().where(function(range){return range.getCanvasIds().en().any(function(c){return c===canvas.id})}).toArray(),canvas.ranges)},Helper.prototype.getCollectionIndex=function(iiifResource){var index=null;return iiifResource.parentCollection&&(index=iiifResource.parentCollection.index),index},Helper.prototype.getCurrentCanvas=function(){return this.getCurrentSequence().getCanvasByIndex(this.canvasIndex)},Helper.prototype.getCurrentSequence=function(){return this.getSequenceByIndex(this.sequenceIndex)},Helper.prototype.getDescription=function(){var description=this.manifest.getDescription();return description?Manifesto.TranslationCollection.getValue(description):null},Helper.prototype.getFirstPageIndex=function(){return 0},Helper.prototype.getLabel=function(){var label=this.manifest.getLabel();return label?Manifesto.TranslationCollection.getValue(label):null},Helper.prototype.getLastCanvasLabel=function(alphanumeric){return this.getCurrentSequence().getLastCanvasLabel(alphanumeric)},Helper.prototype.getLastPageIndex=function(){return this.getTotalCanvases()-1},Helper.prototype.getLicense=function(){return this.manifest.getLicense()},Helper.prototype.getLogo=function(){return this.manifest.getLogo()},Helper.prototype.getManifestType=function(){var manifestType=this.manifest.getManifestType();return""===manifestType.toString()&&(manifestType=manifesto.ManifestType.monograph()),manifestType},Helper.prototype.getMetadata=function(options){var metadataGroups=[],manifestMetadata=this.manifest.getMetadata(),manifestGroup=new Manifold.MetadataGroup(this.manifest);if(manifestMetadata&&manifestMetadata.length&&manifestGroup.addMetadata(manifestMetadata,!0),this.manifest.getDescription().length){var metadataItem=new Manifesto.MetadataItem(this.options.locale);metadataItem.label=[new Manifesto.Translation("description",this.options.locale)],metadataItem.value=this.manifest.getDescription(),metadataItem.isRootLevel=!0,manifestGroup.addItem(metadataItem)}if(this.manifest.getAttribution().length){var metadataItem=new Manifesto.MetadataItem(this.options.locale);metadataItem.label=[new Manifesto.Translation("attribution",this.options.locale)],metadataItem.value=this.manifest.getAttribution(),metadataItem.isRootLevel=!0,manifestGroup.addItem(metadataItem)}var license=this.manifest.getLicense();if(license){var item={label:"license",value:options&&options.licenseFormatter?options.licenseFormatter.format(license):license},metadataItem=new Manifesto.MetadataItem(this.options.locale);metadataItem.parse(item),metadataItem.isRootLevel=!0,manifestGroup.addItem(metadataItem)}if(this.manifest.getLogo()){var item={label:"logo",value:'<img src="'+this.manifest.getLogo()+'"/>'},metadataItem=new Manifesto.MetadataItem(this.options.locale);metadataItem.parse(item),metadataItem.isRootLevel=!0,manifestGroup.addItem(metadataItem)}return metadataGroups.push(manifestGroup),options?this._parseMetadataOptions(options,metadataGroups):metadataGroups},Helper.prototype._parseMetadataOptions=function(options,metadataGroups){var sequence=this.getCurrentSequence(),sequenceMetadata=sequence.getMetadata();if(sequenceMetadata&&sequenceMetadata.length){var sequenceGroup=new Manifold.MetadataGroup(sequence);sequenceGroup.addMetadata(sequenceMetadata),metadataGroups.push(sequenceGroup)}if(options.range){var rangeGroups=this._getRangeMetadata([],options.range);rangeGroups=rangeGroups.reverse(),metadataGroups=metadataGroups.concat(rangeGroups)}if(options.canvases&&options.canvases.length)for(var i=0;i<options.canvases.length;i++){var canvas=options.canvases[i],canvasMetadata=canvas.getMetadata();if(canvasMetadata&&canvasMetadata.length){var canvasGroup=new Manifold.MetadataGroup(canvas);canvasGroup.addMetadata(canvas.getMetadata()),metadataGroups.push(canvasGroup)}for(var images=canvas.getImages(),j=0;j<images.length;j++){var image=images[j],imageMetadata=image.getMetadata();if(imageMetadata&&imageMetadata.length){var imageGroup=new Manifold.MetadataGroup(image);imageGroup.addMetadata(imageMetadata),metadataGroups.push(imageGroup)}}}return metadataGroups},Helper.prototype._getRangeMetadata=function(metadataGroups,range){var rangeMetadata=range.getMetadata();if(rangeMetadata&&rangeMetadata.length){var rangeGroup=new Manifold.MetadataGroup(range);rangeGroup.addMetadata(rangeMetadata),metadataGroups.push(rangeGroup)}return range.parentRange?this._getRangeMetadata(metadataGroups,range.parentRange):metadataGroups},Helper.prototype.getMultiSelectState=function(){return this._multiSelectState||(this._multiSelectState=new Manifold.MultiSelectState,this._multiSelectState.ranges=this.getRanges().slice(0),this._multiSelectState.canvases=this.getCurrentSequence().getCanvases().slice(0)),this._multiSelectState},Helper.prototype.getRanges=function(){return this.manifest.getAllRanges()},Helper.prototype.getRangeByPath=function(path){return this.manifest.getRangeByPath(path)},Helper.prototype.getRangeCanvases=function(range){var ids=range.getCanvasIds();return this.getCanvasesById(ids)},Helper.prototype.getRelated=function(){return this.manifest.getRelated()},Helper.prototype.getSearchService=function(){return this.manifest.getService(manifesto.ServiceProfile.search())},Helper.prototype.getSeeAlso=function(){return this.manifest.getSeeAlso()},Helper.prototype.getSequenceByIndex=function(index){return this.manifest.getSequenceByIndex(index)},Helper.prototype.getShareServiceUrl=function(){var url=null,shareService=this.manifest.getService(manifesto.ServiceProfile.shareExtensions());return shareService&&(shareService.length&&(shareService=shareService[0]),url=shareService.__jsonld.shareUrl),url},Helper.prototype.getSortedTreeNodesByDate=function(sortedTree,tree){var all=tree.nodes.en().traverseUnique(function(node){return node.nodes}).where(function(n){return n.data.type===manifesto.TreeNodeType.collection().toString()||n.data.type===manifesto.TreeNodeType.manifest().toString()}).toArray(),manifests=tree.nodes.en().traverseUnique(function(n){return n.nodes}).where(function(n){return n.data.type===manifesto.TreeNodeType.manifest().toString()}).toArray();this.createDecadeNodes(sortedTree,all),this.sortDecadeNodes(sortedTree),this.createYearNodes(sortedTree,all),this.sortYearNodes(sortedTree),this.createMonthNodes(sortedTree,manifests),this.sortMonthNodes(sortedTree),this.createDateNodes(sortedTree,manifests),this.pruneDecadeNodes(sortedTree)},Helper.prototype.getStartCanvasIndex=function(){return this.getCurrentSequence().getStartCanvasIndex()},Helper.prototype.getThumbs=function(width,height){return this.getCurrentSequence().getThumbs(width,height)},Helper.prototype.getTopRanges=function(){return this.manifest.getTopRanges()},Helper.prototype.getTotalCanvases=function(){return this.getCurrentSequence().getTotalCanvases()},Helper.prototype.getTrackingLabel=function(){return this.manifest.getTrackingLabel()},Helper.prototype.getTree=function(topRangeIndex,sortType){if(void 0===topRangeIndex&&(topRangeIndex=0),void 0===sortType&&(sortType=Manifold.TreeSortType.NONE),!this.iiifResource)return null;var tree;if(this.iiifResource.isCollection())tree=this.iiifResource.getDefaultTree();else{var topRanges=this.iiifResource.getTopRanges(),root=new manifesto.TreeNode;if(root.label="root",root.data=this.iiifResource,!topRanges.length)return root;var range=topRanges[topRangeIndex];tree=range.getTree(root)}var sortedTree=new manifesto.TreeNode;switch(sortType.toString()){case Manifold.TreeSortType.DATE.toString():if(this.treeHasNavDates(tree)){this.getSortedTreeNodesByDate(sortedTree,tree);break}default:sortedTree=tree}return sortedTree},Helper.prototype.treeHasNavDates=function(tree){var node=tree.nodes.en().traverseUnique(function(node){return node.nodes}).where(function(n){return!isNaN(n.navDate)}).first();return!!node},Helper.prototype.getViewingDirection=function(){var viewingDirection=this.getCurrentSequence().getViewingDirection();return viewingDirection.toString()||(viewingDirection=this.manifest.getViewingDirection()),viewingDirection},Helper.prototype.getViewingHint=function(){var viewingHint=this.getCurrentSequence().getViewingHint();return viewingHint.toString()||(viewingHint=this.manifest.getViewingHint()),viewingHint},Helper.prototype.hasParentCollection=function(){return!!this.manifest.parentCollection},Helper.prototype.hasRelatedPage=function(){var related=this.getRelated();return!!related&&(related.length&&(related=related[0]),"text/html"===related.format)},Helper.prototype.hasResources=function(){var canvas=this.getCurrentCanvas();return canvas.getResources().length>0},Helper.prototype.isBottomToTop=function(){return this.getViewingDirection().toString()===manifesto.ViewingDirection.bottomToTop().toString()},Helper.prototype.isCanvasIndexOutOfRange=function(index){return this.getCurrentSequence().isCanvasIndexOutOfRange(index)},Helper.prototype.isContinuous=function(){return this.getViewingHint().toString()===manifesto.ViewingHint.continuous().toString()},Helper.prototype.isFirstCanvas=function(index){return"undefined"!=typeof index?this.getCurrentSequence().isFirstCanvas(index):this.getCurrentSequence().isFirstCanvas(this.canvasIndex)},Helper.prototype.isHorizontallyAligned=function(){return this.isLeftToRight()||this.isRightToLeft()},Helper.prototype.isLastCanvas=function(index){return"undefined"!=typeof index?this.getCurrentSequence().isLastCanvas(index):this.getCurrentSequence().isLastCanvas(this.canvasIndex)},Helper.prototype.isLeftToRight=function(){return this.getViewingDirection().toString()===manifesto.ViewingDirection.leftToRight().toString()},Helper.prototype.isMultiCanvas=function(){return this.getCurrentSequence().isMultiCanvas()},Helper.prototype.isMultiSequence=function(){return this.manifest.isMultiSequence()},Helper.prototype.isPaged=function(){return this.getViewingHint().toString()===manifesto.ViewingHint.paged().toString()},Helper.prototype.isPagingAvailable=function(){return this.isPagingEnabled()&&this.getTotalCanvases()>2},Helper.prototype.isPagingEnabled=function(){return this.manifest.isPagingEnabled()||this.getCurrentSequence().isPagingEnabled()},Helper.prototype.isRightToLeft=function(){return this.getViewingDirection().toString()===manifesto.ViewingDirection.rightToLeft().toString()},Helper.prototype.isTopToBottom=function(){return this.getViewingDirection().toString()===manifesto.ViewingDirection.topToBottom().toString()},Helper.prototype.isTotalCanvasesEven=function(){return this.getCurrentSequence().isTotalCanvasesEven()},Helper.prototype.isUIEnabled=function(name){var uiExtensions=this.manifest.getService(manifesto.ServiceProfile.uiExtensions());if(uiExtensions){var disableUI=uiExtensions.getProperty("disableUI");if(disableUI&&(disableUI.indexOf(name)!==-1||disableUI.indexOf(name.toLowerCase())!==-1))return!1}return!0},Helper.prototype.isVerticallyAligned=function(){return this.isTopToBottom()||this.isBottomToTop()},Helper.prototype.createDateNodes=function(rootNode,nodes){for(var i=0;i<nodes.length;i++){var node=nodes[i],year=this.getNodeYear(node),month=this.getNodeMonth(node),dateNode=new manifesto.TreeNode;dateNode.id=node.id,dateNode.label=this.getNodeDisplayDate(node),dateNode.data=node.data,dateNode.data.type=manifesto.TreeNodeType.manifest().toString(),dateNode.data.year=year,dateNode.data.month=month;var decadeNode=this.getDecadeNode(rootNode,year);if(decadeNode){var yearNode=this.getYearNode(decadeNode,year);if(yearNode){var monthNode=this.getMonthNode(yearNode,month);monthNode&&monthNode.addNode(dateNode)}}}},Helper.prototype.createDecadeNodes=function(rootNode,nodes){for(var i=0;i<nodes.length;i++){var node=nodes[i],year=this.getNodeYear(node),endYear=Number(year.toString().substr(0,3)+"9");if(!this.getDecadeNode(rootNode,year)){var decadeNode=new manifesto.TreeNode;decadeNode.label=year+" - "+endYear,decadeNode.navDate=node.navDate,decadeNode.data.startYear=year,decadeNode.data.endYear=endYear,rootNode.addNode(decadeNode)}}},Helper.prototype.createMonthNodes=function(rootNode,nodes){for(var i=0;i<nodes.length;i++){var node=nodes[i],year=this.getNodeYear(node),month=this.getNodeMonth(node),decadeNode=this.getDecadeNode(rootNode,year),yearNode=null;if(decadeNode&&(yearNode=this.getYearNode(decadeNode,year)),decadeNode&&yearNode&&!this.getMonthNode(yearNode,month)){var monthNode=new manifesto.TreeNode;monthNode.label=this.getNodeDisplayMonth(node),monthNode.navDate=node.navDate,monthNode.data.year=year,monthNode.data.month=month,yearNode.addNode(monthNode)}}},Helper.prototype.createYearNodes=function(rootNode,nodes){for(var i=0;i<nodes.length;i++){var node=nodes[i],year=this.getNodeYear(node),decadeNode=this.getDecadeNode(rootNode,year);if(decadeNode&&!this.getYearNode(decadeNode,year)){var yearNode=new manifesto.TreeNode;yearNode.label=year.toString(),yearNode.navDate=node.navDate,yearNode.data.year=year,decadeNode.addNode(yearNode)}}},Helper.prototype.getDecadeNode=function(rootNode,year){for(var i=0;i<rootNode.nodes.length;i++){var n=rootNode.nodes[i];if(year>=n.data.startYear&&year<=n.data.endYear)return n}return null},Helper.prototype.getMonthNode=function(yearNode,month){for(var i=0;i<yearNode.nodes.length;i++){var n=yearNode.nodes[i];if(month===this.getNodeMonth(n))return n}return null},Helper.prototype.getNodeDisplayDate=function(node){return node.navDate.toDateString()},Helper.prototype.getNodeDisplayMonth=function(node){var months=["January","February","March","April","May","June","July","August","September","October","November","December"];return months[node.navDate.getMonth()]},Helper.prototype.getNodeMonth=function(node){return node.navDate.getMonth()},Helper.prototype.getNodeYear=function(node){return node.navDate.getFullYear()},Helper.prototype.getYearNode=function(decadeNode,year){for(var i=0;i<decadeNode.nodes.length;i++){var n=decadeNode.nodes[i];if(year===this.getNodeYear(n))return n}return null},Helper.prototype.pruneDecadeNodes=function(rootNode){for(var pruned=[],i=0;i<rootNode.nodes.length;i++){var n=rootNode.nodes[i];n.nodes.length||pruned.push(n)}for(var j=0;j<pruned.length;j++){var p=pruned[j],index=rootNode.nodes.indexOf(p);index>-1&&rootNode.nodes.splice(index,1)}},Helper.prototype.sortDecadeNodes=function(rootNode){rootNode.nodes=rootNode.nodes.sort(function(a,b){return a.data.startYear-b.data.startYear})},Helper.prototype.sortMonthNodes=function(rootNode){for(var _this=this,i=0;i<rootNode.nodes.length;i++)for(var decadeNode=rootNode.nodes[i],j=0;j<decadeNode.nodes.length;j++){var monthNode=decadeNode.nodes[j];monthNode.nodes=monthNode.nodes.sort(function(a,b){return _this.getNodeMonth(a)-_this.getNodeMonth(b)})}},Helper.prototype.sortYearNodes=function(rootNode){for(var _this=this,i=0;i<rootNode.nodes.length;i++){var decadeNode=rootNode.nodes[i];decadeNode.nodes=decadeNode.nodes.sort(function(a,b){return _this.getNodeYear(a)-_this.getNodeYear(b)})}},Helper}();Manifold.Helper=Helper}(Manifold||(Manifold={}));var Manifold;!function(Manifold){function loadManifest(options){var bootstrapper=new Manifold.Bootstrapper(options);return bootstrapper.bootstrap()}Manifold.loadManifest=loadManifest}(Manifold||(Manifold={})),function(g){g.Manifold||(g.Manifold=Manifold)}(global);var Manifold;!function(Manifold){var MetadataGroup=function(){function MetadataGroup(resource,label){this.items=[],this.resource=resource,this.label=label}return MetadataGroup.prototype.addItem=function(item){this.items.push(item)},MetadataGroup.prototype.addMetadata=function(metadata,isRootLevel){void 0===isRootLevel&&(isRootLevel=!1);for(var i=0;i<metadata.length;i++){var item=metadata[i];item.isRootLevel=isRootLevel,this.addItem(item)}},MetadataGroup}();Manifold.MetadataGroup=MetadataGroup}(Manifold||(Manifold={}));var Manifold;!function(Manifold){var MetadataOptions=function(){function MetadataOptions(){}return MetadataOptions}();Manifold.MetadataOptions=MetadataOptions}(Manifold||(Manifold={}));var Manifold;!function(Manifold){var MultiSelectState=function(){function MultiSelectState(){this.isEnabled=!1,this.ranges=[],this.canvases=[]}return MultiSelectState.prototype.allCanvasesSelected=function(){return this.canvases.length>0&&this.getAllSelectedCanvases().length===this.canvases.length},MultiSelectState.prototype.allRangesSelected=function(){return this.ranges.length>0&&this.getAllSelectedRanges().length===this.ranges.length},MultiSelectState.prototype.allSelected=function(){return this.allRangesSelected()&&this.allCanvasesSelected()},MultiSelectState.prototype.getAll=function(){return this.canvases.concat(this.ranges)},MultiSelectState.prototype.getAllSelectedCanvases=function(){return this.canvases.en().where(function(c){return c.multiSelected}).toArray()},MultiSelectState.prototype.getAllSelectedRanges=function(){return this.ranges.en().where(function(r){return r.multiSelected}).toArray()},MultiSelectState.prototype.getCanvasById=function(id){return this.canvases.en().where(function(c){return c.id===id}).first()},MultiSelectState.prototype.getCanvasesByIds=function(ids){for(var canvases=[],i=0;i<ids.length;i++){var id=ids[i];canvases.push(this.getCanvasById(id))}return canvases},MultiSelectState.prototype.getRangeCanvases=function(range){var ids=range.getCanvasIds();return this.getCanvasesByIds(ids)},MultiSelectState.prototype.selectAll=function(selected){this.selectRanges(this.ranges,selected),this.selectCanvases(this.canvases,selected)},MultiSelectState.prototype.selectCanvas=function(canvas,selected){var c=this.canvases.en().where(function(c){return c.id===canvas.id}).first();c.multiSelected=selected},MultiSelectState.prototype.selectAllCanvases=function(selected){this.selectCanvases(this.canvases,selected)},MultiSelectState.prototype.selectCanvases=function(canvases,selected){for(var j=0;j<canvases.length;j++){var canvas=canvases[j];canvas.multiSelected=selected}},MultiSelectState.prototype.selectRange=function(range,selected){var r=this.ranges.en().where(function(r){return r.id===range.id}).first();r.multiSelected=selected;var canvases=this.getRangeCanvases(r);this.selectCanvases(canvases,selected)},MultiSelectState.prototype.selectAllRanges=function(selected){this.selectRanges(this.ranges,selected)},MultiSelectState.prototype.selectRanges=function(ranges,selected){for(var i=0;i<ranges.length;i++){var range=ranges[i];range.multiSelected=selected;var canvases=this.getCanvasesByIds(range.getCanvasIds());this.selectCanvases(canvases,selected)}},MultiSelectState.prototype.setEnabled=function(enabled){this.isEnabled=enabled;for(var items=this.getAll(),i=0;i<items.length;i++){var item=items[i];item.multiSelectEnabled=this.isEnabled,enabled||(item.multiSelected=!1)}},MultiSelectState}();Manifold.MultiSelectState=MultiSelectState}(Manifold||(Manifold={}));var Manifold;!function(Manifold){var Translation=function(){function Translation(value,locale){this.value=value,this.locale=locale}return Translation}();Manifold.Translation=Translation}(Manifold||(Manifold={}));var Manifold;!function(Manifold){var UriLabeller=function(){function UriLabeller(labels){this.labels=labels}return UriLabeller.prototype.format=function(url){
 if(url.indexOf("<a")!=-1)return url;var label=this.labels[url]?this.labels[url]:url;return'<a href="'+url+'">'+label+"</a>"},UriLabeller}();Manifold.UriLabeller=UriLabeller}(Manifold||(Manifold={}))}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1])(1)});
-!function(f){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=f();else if("function"==typeof define&&define.amd)define([],f);else{var g;g="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,g.iiifAvComponent=f()}}(function(){return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){(function(global){var IIIFComponents,__extends=this&&this.__extends||function(){var extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)b.hasOwnProperty(p)&&(d[p]=b[p])};return function(d,b){function __(){this.constructor=d}extendStatics(d,b),d.prototype=null===b?Object.create(b):(__.prototype=b.prototype,new __)}}();!function(IIIFComponents){var AVComponent=function(_super){function AVComponent(options){var _this=_super.call(this,options)||this;return _this.canvasInstances=[],_this._init(),_this._resize(),_this}return __extends(AVComponent,_super),AVComponent.prototype._init=function(){var success=_super.prototype._init.call(this);return success||console.error("Component failed to initialise"),success},AVComponent.prototype.data=function(){return{autoPlay:!1,defaultAspectRatio:.56,content:{play:"Play",pause:"Pause",currentTime:"Current Time",duration:"Duration"}}},AVComponent.prototype.set=function(data){this.options.data=data,this._reset(),this._render(),this._resize()},AVComponent.prototype._reset=function(){for(var i=0;i<this.canvasInstances.length;i++)window.clearInterval(this.canvasInstances[i].highPriorityInterval),window.clearInterval(this.canvasInstances[i].lowPriorityInterval),window.clearInterval(this.canvasInstances[i].canvasClockInterval);this.canvasInstances=[]},AVComponent.prototype._render=function(){this._$element.empty();for(var canvases=this._getCanvases(),i=0;i<canvases.length;i++)this._initCanvas(canvases[i])},AVComponent.prototype._getCanvases=function(){return this.options.data.helper.getCanvases()},AVComponent.prototype._initCanvas=function(canvas){var $player=$('<div class="player"></div>'),$canvasContainer=$('<div class="canvasContainer"></div>'),$optionsContainer=$('<div class="optionsContainer"></div>'),$timelineContainer=$('<div class="timelineContainer"></div>'),$durationHighlight=$('<div class="durationHighlight"></div>'),$timelineItemContainer=$('<div class="timelineItemContainer"></div>'),$controlsContainer=$('<div class="controlsContainer"></div>'),$playButton=$('<button class="playButton">'+this.options.data.content.play+"</button>"),$timingControls=$("<span>"+this.options.data.content.currentTime+': <span class="canvasTime"></span> / '+this.options.data.content.duration+': <span class="canvasDuration"></span></span>'),$volumeControl=$('<input type="range" class="volume" min="0" max="1" step="0.01" value="1">');$controlsContainer.append($playButton,$timingControls,$volumeControl),$timelineContainer.append($durationHighlight),$optionsContainer.append($timelineContainer,$timelineItemContainer,$controlsContainer),$player.append($canvasContainer,$optionsContainer),this._$element.append($player);var canvasInstance=new IIIFComponents.CanvasInstance(canvas),canvasWidth=canvas.getWidth(),canvasHeight=canvas.getHeight();canvasWidth?canvasInstance.canvasWidth=canvasWidth:canvasInstance.canvasWidth=this._$element.width(),canvasHeight?canvasInstance.canvasHeight=canvasHeight:canvasInstance.canvasHeight=canvasInstance.canvasWidth*this.options.data.defaultAspectRatio,canvasInstance.$playerElement=$player,canvasInstance.logMessage=this._logMessage.bind(this),canvasInstance.on(AVComponent.Events.PLAYCANVAS,function(){$playButton.removeClass("play"),$playButton.addClass("pause"),$playButton.text(this.options.data.content.pause)},this),canvasInstance.on(AVComponent.Events.PAUSECANVAS,function(){$playButton.removeClass("pause"),$playButton.addClass("play"),$playButton.text(this.options.data.content.play)},this),$timelineContainer.slider({value:0,step:.01,orientation:"horizontal",range:"min",max:canvasInstance.canvasClockDuration,animate:!1,create:function(evt,ui){},slide:function(evt,ui){canvasInstance.setCurrentTime(ui.value)},stop:function(evt,ui){}}),this.canvasInstances.push(canvasInstance),canvasInstance.initContents(),$playButton.on("click",function(){canvasInstance.isPlaying?canvasInstance.pause():canvasInstance.play()}),$volumeControl.on("input",function(){canvasInstance.setVolume(Number(this.value))}),$volumeControl.on("change",function(){canvasInstance.setVolume(Number(this.value))});var that=this;canvasInstance.on("canvasready",function(){canvasInstance.setCurrentTime(0),that.options.data.autoPlay&&canvasInstance.play(),$timingControls.find(".canvasDuration").text(IIIFComponents.AVComponentUtils.Utils.formatTime(canvasInstance.canvasClockDuration)),that._logMessage("CREATED CANVAS: "+canvasInstance.canvasClockDuration+" seconds, "+canvasInstance.canvasWidth+" x "+canvasInstance.canvasHeight+" px."),that.fire(AVComponent.Events.CANVASREADY)},!1)},AVComponent.prototype.getCanvasInstanceById=function(canvasId){canvasId=manifesto.Utils.normaliseUrl(canvasId);for(var i=0;i<this.canvasInstances.length;i++){var canvasInstance=this.canvasInstances[i];if(canvasInstance.data&&canvasInstance.data.id){var canvasInstanceId=manifesto.Utils.normaliseUrl(canvasInstance.data.id);if(canvasInstanceId===canvasId)return canvasInstance}}return null},AVComponent.prototype.play=function(canvasId){this.showCanvas(canvasId);var canvasInstance=this.getCanvasInstanceById(canvasId);if(canvasInstance){var temporal=/t=([^&]+)/g.exec(canvasId);if(temporal&&temporal.length>1){var rangeTiming=temporal[1].split(","),duration=new IIIFComponents.AVComponentObjects.Duration(Number(rangeTiming[0]),Number(rangeTiming[1]));canvasInstance.currentDuration=duration,canvasInstance.highlightDuration(),canvasInstance.setCurrentTime(duration.start),canvasInstance.play()}}},AVComponent.prototype.showCanvas=function(canvasId){for(var i=0;i<this.canvasInstances.length;i++)this.canvasInstances[i].pause();this._$element.find(".player").hide();var canvasInstance=this.getCanvasInstanceById(canvasId);canvasInstance&&canvasInstance.$playerElement&&canvasInstance.$playerElement.show()},AVComponent.prototype._logMessage=function(message){this.fire(AVComponent.Events.LOG,message)},AVComponent.prototype.resize=function(){this._resize()},AVComponent.prototype._resize=function(){for(var i=0;i<this.canvasInstances.length;i++){var canvasInstance=this.canvasInstances[i];if(canvasInstance.highlightDuration(),canvasInstance.$playerElement){var $canvasContainer=canvasInstance.$playerElement.find(".canvasContainer"),$timelineContainer=canvasInstance.$playerElement.find(".timelineContainer"),containerWidth=$canvasContainer.width();if(containerWidth){$timelineContainer.width(containerWidth);var $options=canvasInstance.$playerElement.find(".optionsContainer");$canvasContainer.height(this._$element.height()-$options.height())}}}},AVComponent}(_Components.BaseComponent);IIIFComponents.AVComponent=AVComponent}(IIIFComponents||(IIIFComponents={})),function(IIIFComponents){var AVComponent;!function(AVComponent){var Events=function(){function Events(){}return Events.CANVASREADY="canvasready",Events.PLAYCANVAS="play",Events.PAUSECANVAS="pause",Events.LOG="log",Events}();AVComponent.Events=Events}(AVComponent=IIIFComponents.AVComponent||(IIIFComponents.AVComponent={}))}(IIIFComponents||(IIIFComponents={})),function(g){g.IIIFComponents?g.IIIFComponents.AVComponent=IIIFComponents.AVComponent:g.IIIFComponents=IIIFComponents}(global);var IIIFComponents;!function(IIIFComponents){var CanvasInstance=function(){function CanvasInstance(canvas){this._highPriorityFrequency=25,this._lowPriorityFrequency=100,this._canvasClockFrequency=25,this.canvasClockDuration=0,this.canvasClockStartDate=0,this.canvasClockTime=0,this.canvasHeight=0,this.canvasWidth=0,this.currentDuration=null,this.data=null,this.isPlaying=!1,this.isStalled=!1,this.readyCanvasesCount=0,this.stallRequestedBy=[],this.wasPlaying=!1,this.data=canvas,this.canvasClockDuration=canvas.getDuration()}return CanvasInstance.prototype.initContents=function(){if(this.data){this._mediaElements=[];for(var mediaItems=this.data.__jsonld.content[0].items,i=0;i<mediaItems.length;i++){var mediaItem=mediaItems[i],mediaSource=void 0;if("TextualBody"==mediaItem.body.type)mediaSource=mediaItem.body.value;else if(Array.isArray(mediaItem.body)&&"Choice"==mediaItem.body[0].type){var tmpItem=mediaItem;mediaItem.body=tmpItem.body[0].items[0],mediaSource=mediaItem.body.id.split("#")[0]}else mediaSource=mediaItem.body.id.split("#")[0];var spatial=/xywh=([^&]+)/g.exec(mediaItem.target),temporal=/t=([^&]+)/g.exec(mediaItem.target),xywh=void 0;xywh=spatial&&spatial[1]?spatial[1].split(","):[0,0,this.canvasWidth,this.canvasHeight];var t=void 0;t=temporal&&temporal[1]?temporal[1].split(","):[0,this.canvasClockDuration];var positionLeft=parseInt(xywh[0]),positionTop=parseInt(xywh[1]),mediaWidth=parseInt(xywh[2]),mediaHeight=parseInt(xywh[3]),startTime=parseInt(t[0]),endTime=parseInt(t[1]),percentageTop=this._convertToPercentage(positionTop,this.canvasHeight),percentageLeft=this._convertToPercentage(positionLeft,this.canvasWidth),percentageWidth=this._convertToPercentage(mediaWidth,this.canvasWidth),percentageHeight=this._convertToPercentage(mediaHeight,this.canvasHeight),temporalOffsets=/t=([^&]+)/g.exec(mediaItem.body.id),ot=void 0;ot=temporalOffsets&&temporalOffsets[1]?temporalOffsets[1].split(","):[null,null];var offsetStart=ot[0]?parseInt(ot[0]):ot[0],offsetEnd=ot[1]?parseInt(ot[1]):ot[1],itemData={type:mediaItem.body.type,source:mediaSource,start:startTime,end:endTime,top:percentageTop,left:percentageLeft,width:percentageWidth,height:percentageHeight,startOffset:offsetStart,endOffset:offsetEnd,active:!1};this._renderMediaElement(itemData)}}},CanvasInstance.prototype._convertToPercentage=function(pixelValue,maxValue){var percentage=pixelValue/maxValue*100;return percentage},CanvasInstance.prototype._renderMediaElement=function(data){var $mediaElement;switch(data.type){case"Image":$mediaElement=$('<img class="anno" src="'+data.source+'" />');break;case"Video":$mediaElement=$('<video class="anno" src="'+data.source+'" />');break;case"Audio":$mediaElement=$('<audio class="anno" src="'+data.source+'" />');break;case"TextualBody":$mediaElement=$('<div class="anno">'+data.source+"</div>");break;default:return}if($mediaElement.css({top:data.top+"%",left:data.left+"%",width:data.width+"%",height:data.height+"%"}).hide(),data.element=$mediaElement,"Video"==data.type||"Audio"==data.type){data.timeout=null;var that_1=this;data.checkForStall=function(){var self=this;this.active?(that_1.checkMediaSynchronization(),this.element.get(0).readyState>0&&!this.outOfSync?that_1.playbackStalled(!1,self):(that_1.playbackStalled(!0,self),this.timeout&&window.clearTimeout(this.timeout),this.timeout=window.setTimeout(function(){self.checkForStall()},1e3))):that_1.playbackStalled(!1,self)}}if(this._mediaElements.push(data),this.$playerElement){var targetElement=this.$playerElement.find(".canvasContainer");targetElement.append($mediaElement)}if("Video"==data.type||"Audio"==data.type){var that_2=this,self_1=data;$mediaElement.on("loadstart",function(){self_1.checkForStall()}),$mediaElement.on("waiting",function(){self_1.checkForStall()}),$mediaElement.on("seeking",function(){}),$mediaElement.on("loadedmetadata",function(){that_2.readyCanvasesCount++,that_2.readyCanvasesCount===that_2._mediaElements.length&&that_2.fire(IIIFComponents.AVComponent.Events.CANVASREADY)}),$mediaElement.attr("preload","auto"),$mediaElement.get(0).load()}this._renderSyncIndicator(data)},CanvasInstance.prototype._getDurationHighlight=function(){return this.$playerElement.find(".durationHighlight")},CanvasInstance.prototype.highlightDuration=function(){if(this.currentDuration){var $durationHighlight=this._getDurationHighlight(),totalLength=this.canvasClockDuration,timelineLength=this._getTimelineContainer().width(),ratio=timelineLength/totalLength,start=this.currentDuration.start*ratio,end=this.currentDuration.end*ratio,width=end-start;$durationHighlight.css({left:start,width:width})}},CanvasInstance.prototype.setVolume=function(value){for(var i=0;i<this._mediaElements.length;i++){var $mediaElement=this._mediaElements[i];$($mediaElement.element).prop("volume",value)}},CanvasInstance.prototype._renderSyncIndicator=function(mediaElementData){var leftPercent=this._convertToPercentage(mediaElementData.start,this.canvasClockDuration),widthPercent=this._convertToPercentage(mediaElementData.end-mediaElementData.start,this.canvasClockDuration),$timelineItem=$('<div class="timelineItem" title="'+mediaElementData.source+'" data-start="'+mediaElementData.start+'" data-end="'+mediaElementData.end+'"></div>');$timelineItem.css({left:leftPercent+"%",width:widthPercent+"%"});var $lineWrapper=$('<div class="lineWrapper"></div>');if($timelineItem.appendTo($lineWrapper),mediaElementData.timelineElement=$timelineItem,this.$playerElement){var $itemContainer=this.$playerElement.find(".timelineItemContainer");$itemContainer.append($lineWrapper)}},CanvasInstance.prototype.setCurrentTime=function(seconds){this.canvasClockTime=seconds,this.canvasClockStartDate=Date.now()-1e3*this.canvasClockTime,this.logMessage("SET CURRENT TIME to: "+this.canvasClockTime+" seconds."),this.canvasClockUpdater(),this.highPriorityUpdater(),this.lowPriorityUpdater(),this.synchronizeMedia()},CanvasInstance.prototype.play=function(withoutUpdate){if(!this.isPlaying){this.canvasClockTime===this.canvasClockDuration&&(this.canvasClockTime=0),this.canvasClockStartDate=Date.now()-1e3*this.canvasClockTime;var self=this;this.highPriorityInterval=window.setInterval(function(){self.highPriorityUpdater()},this._highPriorityFrequency),this.lowPriorityInterval=window.setInterval(function(){self.lowPriorityUpdater()},this._lowPriorityFrequency),this.canvasClockInterval=window.setInterval(function(){self.canvasClockUpdater()},this._canvasClockFrequency),this.isPlaying=!0,withoutUpdate||this.synchronizeMedia(),this.fire(IIIFComponents.AVComponent.Events.PLAYCANVAS),this.logMessage("PLAY canvas")}},CanvasInstance.prototype.pause=function(withoutUpdate){window.clearInterval(this.highPriorityInterval),window.clearInterval(this.lowPriorityInterval),window.clearInterval(this.canvasClockInterval),this.isPlaying=!1,withoutUpdate||(this.highPriorityUpdater(),this.lowPriorityUpdater(),this.synchronizeMedia()),this.fire(IIIFComponents.AVComponent.Events.PAUSECANVAS),this.logMessage("PAUSE canvas")},CanvasInstance.prototype.canvasClockUpdater=function(){this.canvasClockTime=(Date.now()-this.canvasClockStartDate)/1e3,this.canvasClockTime>=this.canvasClockDuration&&(this.canvasClockTime=this.canvasClockDuration,this.pause())},CanvasInstance.prototype._getTimelineContainer=function(){return this.$playerElement.find(".timelineContainer")},CanvasInstance.prototype.highPriorityUpdater=function(){var $timelineContainer=this._getTimelineContainer();$timelineContainer.slider({value:this.canvasClockTime}),this.$playerElement.find(".canvasTime").text(IIIFComponents.AVComponentUtils.Utils.formatTime(this.canvasClockTime))},CanvasInstance.prototype.lowPriorityUpdater=function(){this.updateMediaActiveStates()},CanvasInstance.prototype.updateMediaActiveStates=function(){for(var mediaElement,i=0;i<this._mediaElements.length;i++)mediaElement=this._mediaElements[i],mediaElement.start<=this.canvasClockTime&&mediaElement.end>=this.canvasClockTime?(this.checkMediaSynchronization(),mediaElement.active||(this.synchronizeMedia(),mediaElement.active=!0,mediaElement.element.show(),mediaElement.timelineElement.addClass("active")),"Video"!=mediaElement.type&&"Audio"!=mediaElement.type||mediaElement.element[0].currentTime>mediaElement.element[0].duration-mediaElement.endOffset&&mediaElement.element[0].pause()):mediaElement.active&&(mediaElement.active=!1,mediaElement.element.hide(),mediaElement.timelineElement.removeClass("active"),"Video"!=mediaElement.type&&"Audio"!=mediaElement.type||mediaElement.element[0].pause())},CanvasInstance.prototype.synchronizeMedia=function(){for(var mediaElement,i=0;i<this._mediaElements.length;i++)if(mediaElement=this._mediaElements[i],"Video"==mediaElement.type||"Audio"==mediaElement.type){if(mediaElement.element[0].currentTime=this.canvasClockTime-mediaElement.start+mediaElement.startOffset,mediaElement.start<=this.canvasClockTime&&mediaElement.end>=this.canvasClockTime)if(this.isPlaying){if(mediaElement.element[0].paused){var promise=mediaElement.element[0].play();promise&&promise["catch"](function(){})}}else mediaElement.element[0].pause();else mediaElement.element[0].pause();mediaElement.element[0].currentTime>mediaElement.element[0].duration-mediaElement.endOffset&&mediaElement.element[0].pause()}this.logMessage("SYNC MEDIA at: "+this.canvasClockTime+" seconds.")},CanvasInstance.prototype.checkMediaSynchronization=function(){for(var mediaElement,i=0,l=this._mediaElements.length;i<l;i++)if(mediaElement=this._mediaElements[i],("Video"==mediaElement.type||"Audio"==mediaElement.type)&&mediaElement.start<=this.canvasClockTime&&mediaElement.end>=this.canvasClockTime){var correctTime=this.canvasClockTime-mediaElement.start+mediaElement.startOffset,factualTime=mediaElement.element[0].currentTime;if(Math.abs(factualTime-correctTime)>.4){mediaElement.outOfSync=!0;var lag=Math.abs(factualTime-correctTime);this.logMessage("DETECTED synchronization lag: "+Math.abs(lag)),mediaElement.element[0].currentTime=correctTime}else mediaElement.outOfSync=!1}},CanvasInstance.prototype.playbackStalled=function(aBoolean,syncMediaRequestingStall){if(aBoolean)this.stallRequestedBy.indexOf(syncMediaRequestingStall)<0&&this.stallRequestedBy.push(syncMediaRequestingStall),this.isStalled||(this.$playerElement&&this._showWorkingIndicator(this.$playerElement.find(".canvasContainer")),this.wasPlaying=this.isPlaying,this.pause(!0),this.isStalled=aBoolean);else{var idx=this.stallRequestedBy.indexOf(syncMediaRequestingStall);idx>=0&&this.stallRequestedBy.splice(idx,1),0===this.stallRequestedBy.length&&(this._hideWorkingIndicator(),this.isStalled&&this.wasPlaying&&this.play(!0),this.isStalled=aBoolean)}},CanvasInstance.prototype._showWorkingIndicator=function($targetElement){var workingIndicator=$('<div class="workingIndicator">Waiting ...</div>');0==$targetElement.find(".workingIndicator").length&&$targetElement.append(workingIndicator)},CanvasInstance.prototype._hideWorkingIndicator=function(){$(".workingIndicator").remove()},CanvasInstance.prototype.on=function(name,callback,ctx){var e=this._e||(this._e={});(e[name]||(e[name]=[])).push({fn:callback,ctx:ctx})},CanvasInstance.prototype.fire=function(name){for(var args=[],_i=1;_i<arguments.length;_i++)args[_i-1]=arguments[_i];var data=[].slice.call(arguments,1),evtArr=((this._e||(this._e={}))[name]||[]).slice(),i=0,len=evtArr.length;for(i;i<len;i++)evtArr[i].fn.apply(evtArr[i].ctx,data)},CanvasInstance}();IIIFComponents.CanvasInstance=CanvasInstance}(IIIFComponents||(IIIFComponents={}));var IIIFComponents;!function(IIIFComponents){var AVComponentObjects;!function(AVComponentObjects){var Duration=function(){function Duration(start,end){this.start=start,this.end=end}return Duration}();AVComponentObjects.Duration=Duration}(AVComponentObjects=IIIFComponents.AVComponentObjects||(IIIFComponents.AVComponentObjects={}))}(IIIFComponents||(IIIFComponents={}));var IIIFComponents;!function(IIIFComponents){var AVComponentUtils;!function(AVComponentUtils){var Utils=function(){function Utils(){}return Utils.formatTime=function(aNumber){var hours,minutes,seconds,hourValue;return seconds=Math.ceil(aNumber),hours=Math.floor(seconds/3600),hours=hours>=10?hours:"0"+hours,minutes=Math.floor(seconds%3600/60),minutes=minutes>=10?minutes:"0"+minutes,seconds=Math.floor(seconds%3600%60),seconds=seconds>=10?seconds:"0"+seconds,hourValue=hours>=1?hours+":":"",hourValue+minutes+":"+seconds},Utils}();AVComponentUtils.Utils=Utils}(AVComponentUtils=IIIFComponents.AVComponentUtils||(IIIFComponents.AVComponentUtils={}))}(IIIFComponents||(IIIFComponents={}))}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1])(1)});
\ No newline at end of file
+!function(f){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=f();else if("function"==typeof define&&define.amd)define([],f);else{var g;g="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,g.iiifAvComponent=f()}}(function(){return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){(function(global){var IIIFComponents,__extends=this&&this.__extends||function(){var extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)b.hasOwnProperty(p)&&(d[p]=b[p])};return function(d,b){function __(){this.constructor=d}extendStatics(d,b),d.prototype=null===b?Object.create(b):(__.prototype=b.prototype,new __)}}();!function(IIIFComponents){var AVComponent=function(_super){function AVComponent(options){var _this=_super.call(this,options)||this;return _this.canvasInstances=[],_this._init(),_this._resize(),_this}return __extends(AVComponent,_super),AVComponent.prototype._init=function(){var success=_super.prototype._init.call(this);return success||console.error("Component failed to initialise"),success},AVComponent.prototype.data=function(){return{autoPlay:!1,defaultAspectRatio:.56,content:{play:"Play",pause:"Pause",currentTime:"Current Time",duration:"Duration"}}},AVComponent.prototype.set=function(data){this.options.data=data,this._reset(),this._render(),this._resize()},AVComponent.prototype._reset=function(){for(var i=0;i<this.canvasInstances.length;i++)window.clearInterval(this.canvasInstances[i].highPriorityInterval),window.clearInterval(this.canvasInstances[i].lowPriorityInterval),window.clearInterval(this.canvasInstances[i].canvasClockInterval);this.canvasInstances=[]},AVComponent.prototype._render=function(){this._$element.empty();for(var canvases=this._getCanvases(),i=0;i<canvases.length;i++)this._initCanvas(canvases[i])},AVComponent.prototype._getCanvases=function(){return this.options.data.helper.getCanvases()},AVComponent.prototype._initCanvas=function(canvas){var $player=$('<div class="player"></div>'),$canvasContainer=$('<div class="canvasContainer"></div>'),$optionsContainer=$('<div class="optionsContainer"></div>'),$timelineContainer=$('<div class="timelineContainer"></div>'),$durationHighlight=$('<div class="durationHighlight"></div>'),$timelineItemContainer=$('<div class="timelineItemContainer"></div>'),$controlsContainer=$('<div class="controlsContainer"></div>'),$playButton=$('<button class="playButton">'+this.options.data.content.play+"</button>"),$timingControls=$("<span>"+this.options.data.content.currentTime+': <span class="canvasTime"></span> / '+this.options.data.content.duration+': <span class="canvasDuration"></span></span>'),$volumeControl=$('<input type="range" class="volume" min="0" max="1" step="0.01" value="1">');$controlsContainer.append($playButton,$timingControls,$volumeControl),$timelineContainer.append($durationHighlight),$optionsContainer.append($timelineContainer,$timelineItemContainer,$controlsContainer),$player.append($canvasContainer,$optionsContainer),this._$element.append($player);var canvasInstance=new IIIFComponents.CanvasInstance(canvas),canvasWidth=canvas.getWidth(),canvasHeight=canvas.getHeight();canvasWidth?canvasInstance.canvasWidth=canvasWidth:canvasInstance.canvasWidth=this._$element.width(),canvasHeight?canvasInstance.canvasHeight=canvasHeight:canvasInstance.canvasHeight=canvasInstance.canvasWidth*this.options.data.defaultAspectRatio,canvasInstance.$playerElement=$player,canvasInstance.logMessage=this._logMessage.bind(this),canvasInstance.on(AVComponent.Events.PLAYCANVAS,function(){$playButton.removeClass("play"),$playButton.addClass("pause"),$playButton.text(this.options.data.content.pause)},this),canvasInstance.on(AVComponent.Events.PAUSECANVAS,function(){$playButton.removeClass("pause"),$playButton.addClass("play"),$playButton.text(this.options.data.content.play)},this),$timelineContainer.slider({value:0,step:.01,orientation:"horizontal",range:"min",max:canvasInstance.canvasClockDuration,animate:!1,create:function(evt,ui){},slide:function(evt,ui){canvasInstance.setCurrentTime(ui.value)},stop:function(evt,ui){}}),this.canvasInstances.push(canvasInstance),canvasInstance.initContents(),$playButton.on("click",function(){canvasInstance.isPlaying?canvasInstance.pause():canvasInstance.play()}),$volumeControl.on("input",function(){canvasInstance.setVolume(Number(this.value))}),$volumeControl.on("change",function(){canvasInstance.setVolume(Number(this.value))});var that=this;canvasInstance.on("canvasready",function(){canvasInstance.setCurrentTime(0),that.options.data.autoPlay&&canvasInstance.play(),$timingControls.find(".canvasDuration").text(IIIFComponents.AVComponentUtils.Utils.formatTime(canvasInstance.canvasClockDuration)),that._logMessage("CREATED CANVAS: "+canvasInstance.canvasClockDuration+" seconds, "+canvasInstance.canvasWidth+" x "+canvasInstance.canvasHeight+" px."),that.fire(AVComponent.Events.CANVASREADY)},!1)},AVComponent.prototype.getCanvasInstanceById=function(canvasId){canvasId=manifesto.Utils.normaliseUrl(canvasId);for(var i=0;i<this.canvasInstances.length;i++){var canvasInstance=this.canvasInstances[i];if(canvasInstance.data&&canvasInstance.data.id){var canvasInstanceId=manifesto.Utils.normaliseUrl(canvasInstance.data.id);if(canvasInstanceId===canvasId)return canvasInstance}}return null},AVComponent.prototype.play=function(canvasId){this.showCanvas(canvasId);var canvasInstance=this.getCanvasInstanceById(canvasId);if(canvasInstance){var temporal=/t=([^&]+)/g.exec(canvasId);if(temporal&&temporal.length>1){var rangeTiming=temporal[1].split(","),duration=new IIIFComponents.AVComponentObjects.Duration(Number(rangeTiming[0]),Number(rangeTiming[1]));canvasInstance.currentDuration=duration,canvasInstance.highlightDuration(),canvasInstance.setCurrentTime(duration.start),canvasInstance.play()}}},AVComponent.prototype.showCanvas=function(canvasId){for(var i=0;i<this.canvasInstances.length;i++)this.canvasInstances[i].pause();this._$element.find(".player").hide();var canvasInstance=this.getCanvasInstanceById(canvasId);canvasInstance&&canvasInstance.$playerElement&&canvasInstance.$playerElement.show()},AVComponent.prototype._logMessage=function(message){this.fire(AVComponent.Events.LOG,message)},AVComponent.prototype.resize=function(){this._resize()},AVComponent.prototype._resize=function(){for(var i=0;i<this.canvasInstances.length;i++){var canvasInstance=this.canvasInstances[i];if(canvasInstance.$playerElement){var $canvasContainer=canvasInstance.$playerElement.find(".canvasContainer"),$timelineContainer=canvasInstance.$playerElement.find(".timelineContainer"),containerWidth=$canvasContainer.width();if(containerWidth){$timelineContainer.width(containerWidth);var $options=canvasInstance.$playerElement.find(".optionsContainer");$canvasContainer.height(this._$element.height()-$options.height())}canvasInstance.highlightDuration()}}},AVComponent}(_Components.BaseComponent);IIIFComponents.AVComponent=AVComponent}(IIIFComponents||(IIIFComponents={})),function(IIIFComponents){var AVComponent;!function(AVComponent){var Events=function(){function Events(){}return Events.CANVASREADY="canvasready",Events.PLAYCANVAS="play",Events.PAUSECANVAS="pause",Events.LOG="log",Events}();AVComponent.Events=Events}(AVComponent=IIIFComponents.AVComponent||(IIIFComponents.AVComponent={}))}(IIIFComponents||(IIIFComponents={})),function(g){g.IIIFComponents?g.IIIFComponents.AVComponent=IIIFComponents.AVComponent:g.IIIFComponents=IIIFComponents}(global);var IIIFComponents;!function(IIIFComponents){var CanvasInstance=function(){function CanvasInstance(canvas){this._highPriorityFrequency=25,this._lowPriorityFrequency=100,this._canvasClockFrequency=25,this.canvasClockDuration=0,this.canvasClockStartDate=0,this.canvasClockTime=0,this.canvasHeight=0,this.canvasWidth=0,this.currentDuration=null,this.data=null,this.isPlaying=!1,this.isStalled=!1,this.readyCanvasesCount=0,this.stallRequestedBy=[],this.wasPlaying=!1,this.data=canvas,this.canvasClockDuration=canvas.getDuration()}return CanvasInstance.prototype.initContents=function(){if(this.data){this._mediaElements=[];for(var mediaItems=this.data.__jsonld.content[0].items,i=0;i<mediaItems.length;i++){var mediaItem=mediaItems[i],mediaSource=void 0;if("TextualBody"==mediaItem.body.type)mediaSource=mediaItem.body.value;else if(Array.isArray(mediaItem.body)&&"Choice"==mediaItem.body[0].type){var tmpItem=mediaItem;mediaItem.body=tmpItem.body[0].items[0],mediaSource=mediaItem.body.id.split("#")[0]}else mediaSource=mediaItem.body.id.split("#")[0];var spatial=/xywh=([^&]+)/g.exec(mediaItem.target),temporal=/t=([^&]+)/g.exec(mediaItem.target),xywh=void 0;xywh=spatial&&spatial[1]?spatial[1].split(","):[0,0,this.canvasWidth,this.canvasHeight];var t=void 0;t=temporal&&temporal[1]?temporal[1].split(","):[0,this.canvasClockDuration];var positionLeft=parseInt(xywh[0]),positionTop=parseInt(xywh[1]),mediaWidth=parseInt(xywh[2]),mediaHeight=parseInt(xywh[3]),startTime=parseInt(t[0]),endTime=parseInt(t[1]),percentageTop=this._convertToPercentage(positionTop,this.canvasHeight),percentageLeft=this._convertToPercentage(positionLeft,this.canvasWidth),percentageWidth=this._convertToPercentage(mediaWidth,this.canvasWidth),percentageHeight=this._convertToPercentage(mediaHeight,this.canvasHeight),temporalOffsets=/t=([^&]+)/g.exec(mediaItem.body.id),ot=void 0;ot=temporalOffsets&&temporalOffsets[1]?temporalOffsets[1].split(","):[null,null];var offsetStart=ot[0]?parseInt(ot[0]):ot[0],offsetEnd=ot[1]?parseInt(ot[1]):ot[1],itemData={type:mediaItem.body.type,source:mediaSource,start:startTime,end:endTime,top:percentageTop,left:percentageLeft,width:percentageWidth,height:percentageHeight,startOffset:offsetStart,endOffset:offsetEnd,active:!1};this._renderMediaElement(itemData)}}},CanvasInstance.prototype._convertToPercentage=function(pixelValue,maxValue){var percentage=pixelValue/maxValue*100;return percentage},CanvasInstance.prototype._renderMediaElement=function(data){var $mediaElement;switch(data.type){case"Image":$mediaElement=$('<img class="anno" src="'+data.source+'" />');break;case"Video":$mediaElement=$('<video class="anno" src="'+data.source+'" />');break;case"Audio":$mediaElement=$('<audio class="anno" src="'+data.source+'" />');break;case"TextualBody":$mediaElement=$('<div class="anno">'+data.source+"</div>");break;default:return}if($mediaElement.css({top:data.top+"%",left:data.left+"%",width:data.width+"%",height:data.height+"%"}).hide(),data.element=$mediaElement,"Video"==data.type||"Audio"==data.type){data.timeout=null;var that_1=this;data.checkForStall=function(){var self=this;this.active?(that_1.checkMediaSynchronization(),this.element.get(0).readyState>0&&!this.outOfSync?that_1.playbackStalled(!1,self):(that_1.playbackStalled(!0,self),this.timeout&&window.clearTimeout(this.timeout),this.timeout=window.setTimeout(function(){self.checkForStall()},1e3))):that_1.playbackStalled(!1,self)}}if(this._mediaElements.push(data),this.$playerElement){var targetElement=this.$playerElement.find(".canvasContainer");targetElement.append($mediaElement)}if("Video"==data.type||"Audio"==data.type){var that_2=this,self_1=data;$mediaElement.on("loadstart",function(){self_1.checkForStall()}),$mediaElement.on("waiting",function(){self_1.checkForStall()}),$mediaElement.on("seeking",function(){}),$mediaElement.on("loadedmetadata",function(){that_2.readyCanvasesCount++,that_2.readyCanvasesCount===that_2._mediaElements.length&&that_2.fire(IIIFComponents.AVComponent.Events.CANVASREADY)}),$mediaElement.attr("preload","auto"),$mediaElement.get(0).load()}this._renderSyncIndicator(data)},CanvasInstance.prototype._getDurationHighlight=function(){return this.$playerElement.find(".durationHighlight")},CanvasInstance.prototype.highlightDuration=function(){if(this.currentDuration){var $durationHighlight=this._getDurationHighlight(),totalLength=this.canvasClockDuration,timelineLength=this._getTimelineContainer().width(),ratio=timelineLength/totalLength,start=this.currentDuration.start*ratio,end=this.currentDuration.end*ratio,width=end-start;$durationHighlight.css({left:start,width:width})}},CanvasInstance.prototype.setVolume=function(value){for(var i=0;i<this._mediaElements.length;i++){var $mediaElement=this._mediaElements[i];$($mediaElement.element).prop("volume",value)}},CanvasInstance.prototype._renderSyncIndicator=function(mediaElementData){var leftPercent=this._convertToPercentage(mediaElementData.start,this.canvasClockDuration),widthPercent=this._convertToPercentage(mediaElementData.end-mediaElementData.start,this.canvasClockDuration),$timelineItem=$('<div class="timelineItem" title="'+mediaElementData.source+'" data-start="'+mediaElementData.start+'" data-end="'+mediaElementData.end+'"></div>');$timelineItem.css({left:leftPercent+"%",width:widthPercent+"%"});var $lineWrapper=$('<div class="lineWrapper"></div>');if($timelineItem.appendTo($lineWrapper),mediaElementData.timelineElement=$timelineItem,this.$playerElement){var $itemContainer=this.$playerElement.find(".timelineItemContainer");$itemContainer.append($lineWrapper)}},CanvasInstance.prototype.setCurrentTime=function(seconds){this.canvasClockTime=seconds,this.canvasClockStartDate=Date.now()-1e3*this.canvasClockTime,this.logMessage("SET CURRENT TIME to: "+this.canvasClockTime+" seconds."),this.canvasClockUpdater(),this.highPriorityUpdater(),this.lowPriorityUpdater(),this.synchronizeMedia()},CanvasInstance.prototype.play=function(withoutUpdate){if(!this.isPlaying){this.canvasClockTime===this.canvasClockDuration&&(this.canvasClockTime=0),this.canvasClockStartDate=Date.now()-1e3*this.canvasClockTime;var self=this;this.highPriorityInterval=window.setInterval(function(){self.highPriorityUpdater()},this._highPriorityFrequency),this.lowPriorityInterval=window.setInterval(function(){self.lowPriorityUpdater()},this._lowPriorityFrequency),this.canvasClockInterval=window.setInterval(function(){self.canvasClockUpdater()},this._canvasClockFrequency),this.isPlaying=!0,withoutUpdate||this.synchronizeMedia(),this.fire(IIIFComponents.AVComponent.Events.PLAYCANVAS),this.logMessage("PLAY canvas")}},CanvasInstance.prototype.pause=function(withoutUpdate){window.clearInterval(this.highPriorityInterval),window.clearInterval(this.lowPriorityInterval),window.clearInterval(this.canvasClockInterval),this.isPlaying=!1,withoutUpdate||(this.highPriorityUpdater(),this.lowPriorityUpdater(),this.synchronizeMedia()),this.fire(IIIFComponents.AVComponent.Events.PAUSECANVAS),this.logMessage("PAUSE canvas")},CanvasInstance.prototype.canvasClockUpdater=function(){this.canvasClockTime=(Date.now()-this.canvasClockStartDate)/1e3,this.canvasClockTime>=this.canvasClockDuration&&(this.canvasClockTime=this.canvasClockDuration,this.pause())},CanvasInstance.prototype._getTimelineContainer=function(){return this.$playerElement.find(".timelineContainer")},CanvasInstance.prototype.highPriorityUpdater=function(){var $timelineContainer=this._getTimelineContainer();$timelineContainer.slider({value:this.canvasClockTime}),this.$playerElement.find(".canvasTime").text(IIIFComponents.AVComponentUtils.Utils.formatTime(this.canvasClockTime))},CanvasInstance.prototype.lowPriorityUpdater=function(){this.updateMediaActiveStates()},CanvasInstance.prototype.updateMediaActiveStates=function(){for(var mediaElement,i=0;i<this._mediaElements.length;i++)mediaElement=this._mediaElements[i],mediaElement.start<=this.canvasClockTime&&mediaElement.end>=this.canvasClockTime?(this.checkMediaSynchronization(),mediaElement.active||(this.synchronizeMedia(),mediaElement.active=!0,mediaElement.element.show(),mediaElement.timelineElement.addClass("active")),"Video"!=mediaElement.type&&"Audio"!=mediaElement.type||mediaElement.element[0].currentTime>mediaElement.element[0].duration-mediaElement.endOffset&&mediaElement.element[0].pause()):mediaElement.active&&(mediaElement.active=!1,mediaElement.element.hide(),mediaElement.timelineElement.removeClass("active"),"Video"!=mediaElement.type&&"Audio"!=mediaElement.type||mediaElement.element[0].pause())},CanvasInstance.prototype.synchronizeMedia=function(){for(var mediaElement,i=0;i<this._mediaElements.length;i++)if(mediaElement=this._mediaElements[i],"Video"==mediaElement.type||"Audio"==mediaElement.type){if(mediaElement.element[0].currentTime=this.canvasClockTime-mediaElement.start+mediaElement.startOffset,mediaElement.start<=this.canvasClockTime&&mediaElement.end>=this.canvasClockTime)if(this.isPlaying){if(mediaElement.element[0].paused){var promise=mediaElement.element[0].play();promise&&promise["catch"](function(){})}}else mediaElement.element[0].pause();else mediaElement.element[0].pause();mediaElement.element[0].currentTime>mediaElement.element[0].duration-mediaElement.endOffset&&mediaElement.element[0].pause()}this.logMessage("SYNC MEDIA at: "+this.canvasClockTime+" seconds.")},CanvasInstance.prototype.checkMediaSynchronization=function(){for(var mediaElement,i=0,l=this._mediaElements.length;i<l;i++)if(mediaElement=this._mediaElements[i],("Video"==mediaElement.type||"Audio"==mediaElement.type)&&mediaElement.start<=this.canvasClockTime&&mediaElement.end>=this.canvasClockTime){var correctTime=this.canvasClockTime-mediaElement.start+mediaElement.startOffset,factualTime=mediaElement.element[0].currentTime;if(Math.abs(factualTime-correctTime)>.4){mediaElement.outOfSync=!0;var lag=Math.abs(factualTime-correctTime);this.logMessage("DETECTED synchronization lag: "+Math.abs(lag)),mediaElement.element[0].currentTime=correctTime}else mediaElement.outOfSync=!1}},CanvasInstance.prototype.playbackStalled=function(aBoolean,syncMediaRequestingStall){if(aBoolean)this.stallRequestedBy.indexOf(syncMediaRequestingStall)<0&&this.stallRequestedBy.push(syncMediaRequestingStall),this.isStalled||(this.$playerElement&&this._showWorkingIndicator(this.$playerElement.find(".canvasContainer")),this.wasPlaying=this.isPlaying,this.pause(!0),this.isStalled=aBoolean);else{var idx=this.stallRequestedBy.indexOf(syncMediaRequestingStall);idx>=0&&this.stallRequestedBy.splice(idx,1),0===this.stallRequestedBy.length&&(this._hideWorkingIndicator(),this.isStalled&&this.wasPlaying&&this.play(!0),this.isStalled=aBoolean)}},CanvasInstance.prototype._showWorkingIndicator=function($targetElement){var workingIndicator=$('<div class="workingIndicator">Waiting ...</div>');0==$targetElement.find(".workingIndicator").length&&$targetElement.append(workingIndicator)},CanvasInstance.prototype._hideWorkingIndicator=function(){$(".workingIndicator").remove()},CanvasInstance.prototype.on=function(name,callback,ctx){var e=this._e||(this._e={});(e[name]||(e[name]=[])).push({fn:callback,ctx:ctx})},CanvasInstance.prototype.fire=function(name){for(var args=[],_i=1;_i<arguments.length;_i++)args[_i-1]=arguments[_i];var data=[].slice.call(arguments,1),evtArr=((this._e||(this._e={}))[name]||[]).slice(),i=0,len=evtArr.length;for(i;i<len;i++)evtArr[i].fn.apply(evtArr[i].ctx,data)},CanvasInstance}();IIIFComponents.CanvasInstance=CanvasInstance}(IIIFComponents||(IIIFComponents={}));var IIIFComponents;!function(IIIFComponents){var AVComponentObjects;!function(AVComponentObjects){var Duration=function(){function Duration(start,end){this.start=start,this.end=end}return Duration}();AVComponentObjects.Duration=Duration}(AVComponentObjects=IIIFComponents.AVComponentObjects||(IIIFComponents.AVComponentObjects={}))}(IIIFComponents||(IIIFComponents={}));var IIIFComponents;!function(IIIFComponents){var AVComponentUtils;!function(AVComponentUtils){var Utils=function(){function Utils(){}return Utils.formatTime=function(aNumber){var hours,minutes,seconds,hourValue;return seconds=Math.ceil(aNumber),hours=Math.floor(seconds/3600),hours=hours>=10?hours:"0"+hours,minutes=Math.floor(seconds%3600/60),minutes=minutes>=10?minutes:"0"+minutes,seconds=Math.floor(seconds%3600%60),seconds=seconds>=10?seconds:"0"+seconds,hourValue=hours>=1?hours+":":"",hourValue+minutes+":"+seconds},Utils}();AVComponentUtils.Utils=Utils}(AVComponentUtils=IIIFComponents.AVComponentUtils||(IIIFComponents.AVComponentUtils={}))}(IIIFComponents||(IIIFComponents={}))}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1])(1)});
\ No newline at end of file
diff --git a/dist/iiif-av-component.d.ts b/dist/iiif-av-component.d.ts
index b91f07e..e96f3ba 100644
--- a/dist/iiif-av-component.d.ts
+++ b/dist/iiif-av-component.d.ts
@@ -1,4 +1,4 @@
-// iiif-av-component v0.0.10 https://github.com/iiif-commons/iiif-av-component#readme
+// iiif-av-component v0.0.11 https://github.com/iiif-commons/iiif-av-component#readme
 
 /// <reference types="base-component" />
 declare namespace IIIFComponents {
diff --git a/dist/iiif-av-component.js b/dist/iiif-av-component.js
index beefbf9..82b290a 100644
--- a/dist/iiif-av-component.js
+++ b/dist/iiif-av-component.js
@@ -1,4 +1,4 @@
-// iiif-av-component v0.0.10 https://github.com/iiif-commons/iiif-av-component#readme
+// iiif-av-component v0.0.11 https://github.com/iiif-commons/iiif-av-component#readme
 (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.iiifAvComponent = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 (function (global){
 /// <reference types="exjs" /> 
@@ -207,7 +207,6 @@ var IIIFComponents;
             // loop through all canvases resizing their elements
             for (var i = 0; i < this.canvasInstances.length; i++) {
                 var canvasInstance = this.canvasInstances[i];
-                canvasInstance.highlightDuration();
                 if (canvasInstance.$playerElement) {
                     var $canvasContainer = canvasInstance.$playerElement.find('.canvasContainer');
                     var $timelineContainer = canvasInstance.$playerElement.find('.timelineContainer');
@@ -219,6 +218,7 @@ var IIIFComponents;
                         var $options = canvasInstance.$playerElement.find('.optionsContainer');
                         $canvasContainer.height(this._$element.height() - $options.height());
                     }
+                    canvasInstance.highlightDuration();
                 }
             }
         };
diff --git a/dist/iiif-av-component.min.js b/dist/iiif-av-component.min.js
index c1e6dfc..546f02b 100644
--- a/dist/iiif-av-component.min.js
+++ b/dist/iiif-av-component.min.js
@@ -1,2 +1,2 @@
-// iiif-av-component v0.0.10 https://github.com/iiif-commons/iiif-av-component#readme
-!function(f){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=f();else if("function"==typeof define&&define.amd)define([],f);else{var g;g="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,g.iiifAvComponent=f()}}(function(){return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){(function(global){var IIIFComponents,__extends=this&&this.__extends||function(){var extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)b.hasOwnProperty(p)&&(d[p]=b[p])};return function(d,b){function __(){this.constructor=d}extendStatics(d,b),d.prototype=null===b?Object.create(b):(__.prototype=b.prototype,new __)}}();!function(IIIFComponents){var AVComponent=function(_super){function AVComponent(options){var _this=_super.call(this,options)||this;return _this.canvasInstances=[],_this._init(),_this._resize(),_this}return __extends(AVComponent,_super),AVComponent.prototype._init=function(){var success=_super.prototype._init.call(this);return success||console.error("Component failed to initialise"),success},AVComponent.prototype.data=function(){return{autoPlay:!1,defaultAspectRatio:.56,content:{play:"Play",pause:"Pause",currentTime:"Current Time",duration:"Duration"}}},AVComponent.prototype.set=function(data){this.options.data=data,this._reset(),this._render(),this._resize()},AVComponent.prototype._reset=function(){for(var i=0;i<this.canvasInstances.length;i++)window.clearInterval(this.canvasInstances[i].highPriorityInterval),window.clearInterval(this.canvasInstances[i].lowPriorityInterval),window.clearInterval(this.canvasInstances[i].canvasClockInterval);this.canvasInstances=[]},AVComponent.prototype._render=function(){this._$element.empty();for(var canvases=this._getCanvases(),i=0;i<canvases.length;i++)this._initCanvas(canvases[i])},AVComponent.prototype._getCanvases=function(){return this.options.data.helper.getCanvases()},AVComponent.prototype._initCanvas=function(canvas){var $player=$('<div class="player"></div>'),$canvasContainer=$('<div class="canvasContainer"></div>'),$optionsContainer=$('<div class="optionsContainer"></div>'),$timelineContainer=$('<div class="timelineContainer"></div>'),$durationHighlight=$('<div class="durationHighlight"></div>'),$timelineItemContainer=$('<div class="timelineItemContainer"></div>'),$controlsContainer=$('<div class="controlsContainer"></div>'),$playButton=$('<button class="playButton">'+this.options.data.content.play+"</button>"),$timingControls=$("<span>"+this.options.data.content.currentTime+': <span class="canvasTime"></span> / '+this.options.data.content.duration+': <span class="canvasDuration"></span></span>'),$volumeControl=$('<input type="range" class="volume" min="0" max="1" step="0.01" value="1">');$controlsContainer.append($playButton,$timingControls,$volumeControl),$timelineContainer.append($durationHighlight),$optionsContainer.append($timelineContainer,$timelineItemContainer,$controlsContainer),$player.append($canvasContainer,$optionsContainer),this._$element.append($player);var canvasInstance=new IIIFComponents.CanvasInstance(canvas),canvasWidth=canvas.getWidth(),canvasHeight=canvas.getHeight();canvasWidth?canvasInstance.canvasWidth=canvasWidth:canvasInstance.canvasWidth=this._$element.width(),canvasHeight?canvasInstance.canvasHeight=canvasHeight:canvasInstance.canvasHeight=canvasInstance.canvasWidth*this.options.data.defaultAspectRatio,canvasInstance.$playerElement=$player,canvasInstance.logMessage=this._logMessage.bind(this),canvasInstance.on(AVComponent.Events.PLAYCANVAS,function(){$playButton.removeClass("play"),$playButton.addClass("pause"),$playButton.text(this.options.data.content.pause)},this),canvasInstance.on(AVComponent.Events.PAUSECANVAS,function(){$playButton.removeClass("pause"),$playButton.addClass("play"),$playButton.text(this.options.data.content.play)},this),$timelineContainer.slider({value:0,step:.01,orientation:"horizontal",range:"min",max:canvasInstance.canvasClockDuration,animate:!1,create:function(evt,ui){},slide:function(evt,ui){canvasInstance.setCurrentTime(ui.value)},stop:function(evt,ui){}}),this.canvasInstances.push(canvasInstance),canvasInstance.initContents(),$playButton.on("click",function(){canvasInstance.isPlaying?canvasInstance.pause():canvasInstance.play()}),$volumeControl.on("input",function(){canvasInstance.setVolume(Number(this.value))}),$volumeControl.on("change",function(){canvasInstance.setVolume(Number(this.value))});var that=this;canvasInstance.on("canvasready",function(){canvasInstance.setCurrentTime(0),that.options.data.autoPlay&&canvasInstance.play(),$timingControls.find(".canvasDuration").text(IIIFComponents.AVComponentUtils.Utils.formatTime(canvasInstance.canvasClockDuration)),that._logMessage("CREATED CANVAS: "+canvasInstance.canvasClockDuration+" seconds, "+canvasInstance.canvasWidth+" x "+canvasInstance.canvasHeight+" px."),that.fire(AVComponent.Events.CANVASREADY)},!1)},AVComponent.prototype.getCanvasInstanceById=function(canvasId){canvasId=manifesto.Utils.normaliseUrl(canvasId);for(var i=0;i<this.canvasInstances.length;i++){var canvasInstance=this.canvasInstances[i];if(canvasInstance.data&&canvasInstance.data.id){var canvasInstanceId=manifesto.Utils.normaliseUrl(canvasInstance.data.id);if(canvasInstanceId===canvasId)return canvasInstance}}return null},AVComponent.prototype.play=function(canvasId){this.showCanvas(canvasId);var canvasInstance=this.getCanvasInstanceById(canvasId);if(canvasInstance){var temporal=/t=([^&]+)/g.exec(canvasId);if(temporal&&temporal.length>1){var rangeTiming=temporal[1].split(","),duration=new IIIFComponents.AVComponentObjects.Duration(Number(rangeTiming[0]),Number(rangeTiming[1]));canvasInstance.currentDuration=duration,canvasInstance.highlightDuration(),canvasInstance.setCurrentTime(duration.start),canvasInstance.play()}}},AVComponent.prototype.showCanvas=function(canvasId){for(var i=0;i<this.canvasInstances.length;i++)this.canvasInstances[i].pause();this._$element.find(".player").hide();var canvasInstance=this.getCanvasInstanceById(canvasId);canvasInstance&&canvasInstance.$playerElement&&canvasInstance.$playerElement.show()},AVComponent.prototype._logMessage=function(message){this.fire(AVComponent.Events.LOG,message)},AVComponent.prototype.resize=function(){this._resize()},AVComponent.prototype._resize=function(){for(var i=0;i<this.canvasInstances.length;i++){var canvasInstance=this.canvasInstances[i];if(canvasInstance.highlightDuration(),canvasInstance.$playerElement){var $canvasContainer=canvasInstance.$playerElement.find(".canvasContainer"),$timelineContainer=canvasInstance.$playerElement.find(".timelineContainer"),containerWidth=$canvasContainer.width();if(containerWidth){$timelineContainer.width(containerWidth);var $options=canvasInstance.$playerElement.find(".optionsContainer");$canvasContainer.height(this._$element.height()-$options.height())}}}},AVComponent}(_Components.BaseComponent);IIIFComponents.AVComponent=AVComponent}(IIIFComponents||(IIIFComponents={})),function(IIIFComponents){var AVComponent;!function(AVComponent){var Events=function(){function Events(){}return Events.CANVASREADY="canvasready",Events.PLAYCANVAS="play",Events.PAUSECANVAS="pause",Events.LOG="log",Events}();AVComponent.Events=Events}(AVComponent=IIIFComponents.AVComponent||(IIIFComponents.AVComponent={}))}(IIIFComponents||(IIIFComponents={})),function(g){g.IIIFComponents?g.IIIFComponents.AVComponent=IIIFComponents.AVComponent:g.IIIFComponents=IIIFComponents}(global);var IIIFComponents;!function(IIIFComponents){var CanvasInstance=function(){function CanvasInstance(canvas){this._highPriorityFrequency=25,this._lowPriorityFrequency=100,this._canvasClockFrequency=25,this.canvasClockDuration=0,this.canvasClockStartDate=0,this.canvasClockTime=0,this.canvasHeight=0,this.canvasWidth=0,this.currentDuration=null,this.data=null,this.isPlaying=!1,this.isStalled=!1,this.readyCanvasesCount=0,this.stallRequestedBy=[],this.wasPlaying=!1,this.data=canvas,this.canvasClockDuration=canvas.getDuration()}return CanvasInstance.prototype.initContents=function(){if(this.data){this._mediaElements=[];for(var mediaItems=this.data.__jsonld.content[0].items,i=0;i<mediaItems.length;i++){var mediaItem=mediaItems[i],mediaSource=void 0;if("TextualBody"==mediaItem.body.type)mediaSource=mediaItem.body.value;else if(Array.isArray(mediaItem.body)&&"Choice"==mediaItem.body[0].type){var tmpItem=mediaItem;mediaItem.body=tmpItem.body[0].items[0],mediaSource=mediaItem.body.id.split("#")[0]}else mediaSource=mediaItem.body.id.split("#")[0];var spatial=/xywh=([^&]+)/g.exec(mediaItem.target),temporal=/t=([^&]+)/g.exec(mediaItem.target),xywh=void 0;xywh=spatial&&spatial[1]?spatial[1].split(","):[0,0,this.canvasWidth,this.canvasHeight];var t=void 0;t=temporal&&temporal[1]?temporal[1].split(","):[0,this.canvasClockDuration];var positionLeft=parseInt(xywh[0]),positionTop=parseInt(xywh[1]),mediaWidth=parseInt(xywh[2]),mediaHeight=parseInt(xywh[3]),startTime=parseInt(t[0]),endTime=parseInt(t[1]),percentageTop=this._convertToPercentage(positionTop,this.canvasHeight),percentageLeft=this._convertToPercentage(positionLeft,this.canvasWidth),percentageWidth=this._convertToPercentage(mediaWidth,this.canvasWidth),percentageHeight=this._convertToPercentage(mediaHeight,this.canvasHeight),temporalOffsets=/t=([^&]+)/g.exec(mediaItem.body.id),ot=void 0;ot=temporalOffsets&&temporalOffsets[1]?temporalOffsets[1].split(","):[null,null];var offsetStart=ot[0]?parseInt(ot[0]):ot[0],offsetEnd=ot[1]?parseInt(ot[1]):ot[1],itemData={type:mediaItem.body.type,source:mediaSource,start:startTime,end:endTime,top:percentageTop,left:percentageLeft,width:percentageWidth,height:percentageHeight,startOffset:offsetStart,endOffset:offsetEnd,active:!1};this._renderMediaElement(itemData)}}},CanvasInstance.prototype._convertToPercentage=function(pixelValue,maxValue){var percentage=pixelValue/maxValue*100;return percentage},CanvasInstance.prototype._renderMediaElement=function(data){var $mediaElement;switch(data.type){case"Image":$mediaElement=$('<img class="anno" src="'+data.source+'" />');break;case"Video":$mediaElement=$('<video class="anno" src="'+data.source+'" />');break;case"Audio":$mediaElement=$('<audio class="anno" src="'+data.source+'" />');break;case"TextualBody":$mediaElement=$('<div class="anno">'+data.source+"</div>");break;default:return}if($mediaElement.css({top:data.top+"%",left:data.left+"%",width:data.width+"%",height:data.height+"%"}).hide(),data.element=$mediaElement,"Video"==data.type||"Audio"==data.type){data.timeout=null;var that_1=this;data.checkForStall=function(){var self=this;this.active?(that_1.checkMediaSynchronization(),this.element.get(0).readyState>0&&!this.outOfSync?that_1.playbackStalled(!1,self):(that_1.playbackStalled(!0,self),this.timeout&&window.clearTimeout(this.timeout),this.timeout=window.setTimeout(function(){self.checkForStall()},1e3))):that_1.playbackStalled(!1,self)}}if(this._mediaElements.push(data),this.$playerElement){var targetElement=this.$playerElement.find(".canvasContainer");targetElement.append($mediaElement)}if("Video"==data.type||"Audio"==data.type){var that_2=this,self_1=data;$mediaElement.on("loadstart",function(){self_1.checkForStall()}),$mediaElement.on("waiting",function(){self_1.checkForStall()}),$mediaElement.on("seeking",function(){}),$mediaElement.on("loadedmetadata",function(){that_2.readyCanvasesCount++,that_2.readyCanvasesCount===that_2._mediaElements.length&&that_2.fire(IIIFComponents.AVComponent.Events.CANVASREADY)}),$mediaElement.attr("preload","auto"),$mediaElement.get(0).load()}this._renderSyncIndicator(data)},CanvasInstance.prototype._getDurationHighlight=function(){return this.$playerElement.find(".durationHighlight")},CanvasInstance.prototype.highlightDuration=function(){if(this.currentDuration){var $durationHighlight=this._getDurationHighlight(),totalLength=this.canvasClockDuration,timelineLength=this._getTimelineContainer().width(),ratio=timelineLength/totalLength,start=this.currentDuration.start*ratio,end=this.currentDuration.end*ratio,width=end-start;$durationHighlight.css({left:start,width:width})}},CanvasInstance.prototype.setVolume=function(value){for(var i=0;i<this._mediaElements.length;i++){var $mediaElement=this._mediaElements[i];$($mediaElement.element).prop("volume",value)}},CanvasInstance.prototype._renderSyncIndicator=function(mediaElementData){var leftPercent=this._convertToPercentage(mediaElementData.start,this.canvasClockDuration),widthPercent=this._convertToPercentage(mediaElementData.end-mediaElementData.start,this.canvasClockDuration),$timelineItem=$('<div class="timelineItem" title="'+mediaElementData.source+'" data-start="'+mediaElementData.start+'" data-end="'+mediaElementData.end+'"></div>');$timelineItem.css({left:leftPercent+"%",width:widthPercent+"%"});var $lineWrapper=$('<div class="lineWrapper"></div>');if($timelineItem.appendTo($lineWrapper),mediaElementData.timelineElement=$timelineItem,this.$playerElement){var $itemContainer=this.$playerElement.find(".timelineItemContainer");$itemContainer.append($lineWrapper)}},CanvasInstance.prototype.setCurrentTime=function(seconds){this.canvasClockTime=seconds,this.canvasClockStartDate=Date.now()-1e3*this.canvasClockTime,this.logMessage("SET CURRENT TIME to: "+this.canvasClockTime+" seconds."),this.canvasClockUpdater(),this.highPriorityUpdater(),this.lowPriorityUpdater(),this.synchronizeMedia()},CanvasInstance.prototype.play=function(withoutUpdate){if(!this.isPlaying){this.canvasClockTime===this.canvasClockDuration&&(this.canvasClockTime=0),this.canvasClockStartDate=Date.now()-1e3*this.canvasClockTime;var self=this;this.highPriorityInterval=window.setInterval(function(){self.highPriorityUpdater()},this._highPriorityFrequency),this.lowPriorityInterval=window.setInterval(function(){self.lowPriorityUpdater()},this._lowPriorityFrequency),this.canvasClockInterval=window.setInterval(function(){self.canvasClockUpdater()},this._canvasClockFrequency),this.isPlaying=!0,withoutUpdate||this.synchronizeMedia(),this.fire(IIIFComponents.AVComponent.Events.PLAYCANVAS),this.logMessage("PLAY canvas")}},CanvasInstance.prototype.pause=function(withoutUpdate){window.clearInterval(this.highPriorityInterval),window.clearInterval(this.lowPriorityInterval),window.clearInterval(this.canvasClockInterval),this.isPlaying=!1,withoutUpdate||(this.highPriorityUpdater(),this.lowPriorityUpdater(),this.synchronizeMedia()),this.fire(IIIFComponents.AVComponent.Events.PAUSECANVAS),this.logMessage("PAUSE canvas")},CanvasInstance.prototype.canvasClockUpdater=function(){this.canvasClockTime=(Date.now()-this.canvasClockStartDate)/1e3,this.canvasClockTime>=this.canvasClockDuration&&(this.canvasClockTime=this.canvasClockDuration,this.pause())},CanvasInstance.prototype._getTimelineContainer=function(){return this.$playerElement.find(".timelineContainer")},CanvasInstance.prototype.highPriorityUpdater=function(){var $timelineContainer=this._getTimelineContainer();$timelineContainer.slider({value:this.canvasClockTime}),this.$playerElement.find(".canvasTime").text(IIIFComponents.AVComponentUtils.Utils.formatTime(this.canvasClockTime))},CanvasInstance.prototype.lowPriorityUpdater=function(){this.updateMediaActiveStates()},CanvasInstance.prototype.updateMediaActiveStates=function(){for(var mediaElement,i=0;i<this._mediaElements.length;i++)mediaElement=this._mediaElements[i],mediaElement.start<=this.canvasClockTime&&mediaElement.end>=this.canvasClockTime?(this.checkMediaSynchronization(),mediaElement.active||(this.synchronizeMedia(),mediaElement.active=!0,mediaElement.element.show(),mediaElement.timelineElement.addClass("active")),"Video"!=mediaElement.type&&"Audio"!=mediaElement.type||mediaElement.element[0].currentTime>mediaElement.element[0].duration-mediaElement.endOffset&&mediaElement.element[0].pause()):mediaElement.active&&(mediaElement.active=!1,mediaElement.element.hide(),mediaElement.timelineElement.removeClass("active"),"Video"!=mediaElement.type&&"Audio"!=mediaElement.type||mediaElement.element[0].pause())},CanvasInstance.prototype.synchronizeMedia=function(){for(var mediaElement,i=0;i<this._mediaElements.length;i++)if(mediaElement=this._mediaElements[i],"Video"==mediaElement.type||"Audio"==mediaElement.type){if(mediaElement.element[0].currentTime=this.canvasClockTime-mediaElement.start+mediaElement.startOffset,mediaElement.start<=this.canvasClockTime&&mediaElement.end>=this.canvasClockTime)if(this.isPlaying){if(mediaElement.element[0].paused){var promise=mediaElement.element[0].play();promise&&promise["catch"](function(){})}}else mediaElement.element[0].pause();else mediaElement.element[0].pause();mediaElement.element[0].currentTime>mediaElement.element[0].duration-mediaElement.endOffset&&mediaElement.element[0].pause()}this.logMessage("SYNC MEDIA at: "+this.canvasClockTime+" seconds.")},CanvasInstance.prototype.checkMediaSynchronization=function(){for(var mediaElement,i=0,l=this._mediaElements.length;i<l;i++)if(mediaElement=this._mediaElements[i],("Video"==mediaElement.type||"Audio"==mediaElement.type)&&mediaElement.start<=this.canvasClockTime&&mediaElement.end>=this.canvasClockTime){var correctTime=this.canvasClockTime-mediaElement.start+mediaElement.startOffset,factualTime=mediaElement.element[0].currentTime;if(Math.abs(factualTime-correctTime)>.4){mediaElement.outOfSync=!0;var lag=Math.abs(factualTime-correctTime);this.logMessage("DETECTED synchronization lag: "+Math.abs(lag)),mediaElement.element[0].currentTime=correctTime}else mediaElement.outOfSync=!1}},CanvasInstance.prototype.playbackStalled=function(aBoolean,syncMediaRequestingStall){if(aBoolean)this.stallRequestedBy.indexOf(syncMediaRequestingStall)<0&&this.stallRequestedBy.push(syncMediaRequestingStall),this.isStalled||(this.$playerElement&&this._showWorkingIndicator(this.$playerElement.find(".canvasContainer")),this.wasPlaying=this.isPlaying,this.pause(!0),this.isStalled=aBoolean);else{var idx=this.stallRequestedBy.indexOf(syncMediaRequestingStall);idx>=0&&this.stallRequestedBy.splice(idx,1),0===this.stallRequestedBy.length&&(this._hideWorkingIndicator(),this.isStalled&&this.wasPlaying&&this.play(!0),this.isStalled=aBoolean)}},CanvasInstance.prototype._showWorkingIndicator=function($targetElement){var workingIndicator=$('<div class="workingIndicator">Waiting ...</div>');0==$targetElement.find(".workingIndicator").length&&$targetElement.append(workingIndicator)},CanvasInstance.prototype._hideWorkingIndicator=function(){$(".workingIndicator").remove()},CanvasInstance.prototype.on=function(name,callback,ctx){var e=this._e||(this._e={});(e[name]||(e[name]=[])).push({fn:callback,ctx:ctx})},CanvasInstance.prototype.fire=function(name){for(var args=[],_i=1;_i<arguments.length;_i++)args[_i-1]=arguments[_i];var data=[].slice.call(arguments,1),evtArr=((this._e||(this._e={}))[name]||[]).slice(),i=0,len=evtArr.length;for(i;i<len;i++)evtArr[i].fn.apply(evtArr[i].ctx,data)},CanvasInstance}();IIIFComponents.CanvasInstance=CanvasInstance}(IIIFComponents||(IIIFComponents={}));var IIIFComponents;!function(IIIFComponents){var AVComponentObjects;!function(AVComponentObjects){var Duration=function(){function Duration(start,end){this.start=start,this.end=end}return Duration}();AVComponentObjects.Duration=Duration}(AVComponentObjects=IIIFComponents.AVComponentObjects||(IIIFComponents.AVComponentObjects={}))}(IIIFComponents||(IIIFComponents={}));var IIIFComponents;!function(IIIFComponents){var AVComponentUtils;!function(AVComponentUtils){var Utils=function(){function Utils(){}return Utils.formatTime=function(aNumber){var hours,minutes,seconds,hourValue;return seconds=Math.ceil(aNumber),hours=Math.floor(seconds/3600),hours=hours>=10?hours:"0"+hours,minutes=Math.floor(seconds%3600/60),minutes=minutes>=10?minutes:"0"+minutes,seconds=Math.floor(seconds%3600%60),seconds=seconds>=10?seconds:"0"+seconds,hourValue=hours>=1?hours+":":"",hourValue+minutes+":"+seconds},Utils}();AVComponentUtils.Utils=Utils}(AVComponentUtils=IIIFComponents.AVComponentUtils||(IIIFComponents.AVComponentUtils={}))}(IIIFComponents||(IIIFComponents={}))}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1])(1)});
\ No newline at end of file
+// iiif-av-component v0.0.11 https://github.com/iiif-commons/iiif-av-component#readme
+!function(f){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=f();else if("function"==typeof define&&define.amd)define([],f);else{var g;g="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,g.iiifAvComponent=f()}}(function(){return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){(function(global){var IIIFComponents,__extends=this&&this.__extends||function(){var extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)b.hasOwnProperty(p)&&(d[p]=b[p])};return function(d,b){function __(){this.constructor=d}extendStatics(d,b),d.prototype=null===b?Object.create(b):(__.prototype=b.prototype,new __)}}();!function(IIIFComponents){var AVComponent=function(_super){function AVComponent(options){var _this=_super.call(this,options)||this;return _this.canvasInstances=[],_this._init(),_this._resize(),_this}return __extends(AVComponent,_super),AVComponent.prototype._init=function(){var success=_super.prototype._init.call(this);return success||console.error("Component failed to initialise"),success},AVComponent.prototype.data=function(){return{autoPlay:!1,defaultAspectRatio:.56,content:{play:"Play",pause:"Pause",currentTime:"Current Time",duration:"Duration"}}},AVComponent.prototype.set=function(data){this.options.data=data,this._reset(),this._render(),this._resize()},AVComponent.prototype._reset=function(){for(var i=0;i<this.canvasInstances.length;i++)window.clearInterval(this.canvasInstances[i].highPriorityInterval),window.clearInterval(this.canvasInstances[i].lowPriorityInterval),window.clearInterval(this.canvasInstances[i].canvasClockInterval);this.canvasInstances=[]},AVComponent.prototype._render=function(){this._$element.empty();for(var canvases=this._getCanvases(),i=0;i<canvases.length;i++)this._initCanvas(canvases[i])},AVComponent.prototype._getCanvases=function(){return this.options.data.helper.getCanvases()},AVComponent.prototype._initCanvas=function(canvas){var $player=$('<div class="player"></div>'),$canvasContainer=$('<div class="canvasContainer"></div>'),$optionsContainer=$('<div class="optionsContainer"></div>'),$timelineContainer=$('<div class="timelineContainer"></div>'),$durationHighlight=$('<div class="durationHighlight"></div>'),$timelineItemContainer=$('<div class="timelineItemContainer"></div>'),$controlsContainer=$('<div class="controlsContainer"></div>'),$playButton=$('<button class="playButton">'+this.options.data.content.play+"</button>"),$timingControls=$("<span>"+this.options.data.content.currentTime+': <span class="canvasTime"></span> / '+this.options.data.content.duration+': <span class="canvasDuration"></span></span>'),$volumeControl=$('<input type="range" class="volume" min="0" max="1" step="0.01" value="1">');$controlsContainer.append($playButton,$timingControls,$volumeControl),$timelineContainer.append($durationHighlight),$optionsContainer.append($timelineContainer,$timelineItemContainer,$controlsContainer),$player.append($canvasContainer,$optionsContainer),this._$element.append($player);var canvasInstance=new IIIFComponents.CanvasInstance(canvas),canvasWidth=canvas.getWidth(),canvasHeight=canvas.getHeight();canvasWidth?canvasInstance.canvasWidth=canvasWidth:canvasInstance.canvasWidth=this._$element.width(),canvasHeight?canvasInstance.canvasHeight=canvasHeight:canvasInstance.canvasHeight=canvasInstance.canvasWidth*this.options.data.defaultAspectRatio,canvasInstance.$playerElement=$player,canvasInstance.logMessage=this._logMessage.bind(this),canvasInstance.on(AVComponent.Events.PLAYCANVAS,function(){$playButton.removeClass("play"),$playButton.addClass("pause"),$playButton.text(this.options.data.content.pause)},this),canvasInstance.on(AVComponent.Events.PAUSECANVAS,function(){$playButton.removeClass("pause"),$playButton.addClass("play"),$playButton.text(this.options.data.content.play)},this),$timelineContainer.slider({value:0,step:.01,orientation:"horizontal",range:"min",max:canvasInstance.canvasClockDuration,animate:!1,create:function(evt,ui){},slide:function(evt,ui){canvasInstance.setCurrentTime(ui.value)},stop:function(evt,ui){}}),this.canvasInstances.push(canvasInstance),canvasInstance.initContents(),$playButton.on("click",function(){canvasInstance.isPlaying?canvasInstance.pause():canvasInstance.play()}),$volumeControl.on("input",function(){canvasInstance.setVolume(Number(this.value))}),$volumeControl.on("change",function(){canvasInstance.setVolume(Number(this.value))});var that=this;canvasInstance.on("canvasready",function(){canvasInstance.setCurrentTime(0),that.options.data.autoPlay&&canvasInstance.play(),$timingControls.find(".canvasDuration").text(IIIFComponents.AVComponentUtils.Utils.formatTime(canvasInstance.canvasClockDuration)),that._logMessage("CREATED CANVAS: "+canvasInstance.canvasClockDuration+" seconds, "+canvasInstance.canvasWidth+" x "+canvasInstance.canvasHeight+" px."),that.fire(AVComponent.Events.CANVASREADY)},!1)},AVComponent.prototype.getCanvasInstanceById=function(canvasId){canvasId=manifesto.Utils.normaliseUrl(canvasId);for(var i=0;i<this.canvasInstances.length;i++){var canvasInstance=this.canvasInstances[i];if(canvasInstance.data&&canvasInstance.data.id){var canvasInstanceId=manifesto.Utils.normaliseUrl(canvasInstance.data.id);if(canvasInstanceId===canvasId)return canvasInstance}}return null},AVComponent.prototype.play=function(canvasId){this.showCanvas(canvasId);var canvasInstance=this.getCanvasInstanceById(canvasId);if(canvasInstance){var temporal=/t=([^&]+)/g.exec(canvasId);if(temporal&&temporal.length>1){var rangeTiming=temporal[1].split(","),duration=new IIIFComponents.AVComponentObjects.Duration(Number(rangeTiming[0]),Number(rangeTiming[1]));canvasInstance.currentDuration=duration,canvasInstance.highlightDuration(),canvasInstance.setCurrentTime(duration.start),canvasInstance.play()}}},AVComponent.prototype.showCanvas=function(canvasId){for(var i=0;i<this.canvasInstances.length;i++)this.canvasInstances[i].pause();this._$element.find(".player").hide();var canvasInstance=this.getCanvasInstanceById(canvasId);canvasInstance&&canvasInstance.$playerElement&&canvasInstance.$playerElement.show()},AVComponent.prototype._logMessage=function(message){this.fire(AVComponent.Events.LOG,message)},AVComponent.prototype.resize=function(){this._resize()},AVComponent.prototype._resize=function(){for(var i=0;i<this.canvasInstances.length;i++){var canvasInstance=this.canvasInstances[i];if(canvasInstance.$playerElement){var $canvasContainer=canvasInstance.$playerElement.find(".canvasContainer"),$timelineContainer=canvasInstance.$playerElement.find(".timelineContainer"),containerWidth=$canvasContainer.width();if(containerWidth){$timelineContainer.width(containerWidth);var $options=canvasInstance.$playerElement.find(".optionsContainer");$canvasContainer.height(this._$element.height()-$options.height())}canvasInstance.highlightDuration()}}},AVComponent}(_Components.BaseComponent);IIIFComponents.AVComponent=AVComponent}(IIIFComponents||(IIIFComponents={})),function(IIIFComponents){var AVComponent;!function(AVComponent){var Events=function(){function Events(){}return Events.CANVASREADY="canvasready",Events.PLAYCANVAS="play",Events.PAUSECANVAS="pause",Events.LOG="log",Events}();AVComponent.Events=Events}(AVComponent=IIIFComponents.AVComponent||(IIIFComponents.AVComponent={}))}(IIIFComponents||(IIIFComponents={})),function(g){g.IIIFComponents?g.IIIFComponents.AVComponent=IIIFComponents.AVComponent:g.IIIFComponents=IIIFComponents}(global);var IIIFComponents;!function(IIIFComponents){var CanvasInstance=function(){function CanvasInstance(canvas){this._highPriorityFrequency=25,this._lowPriorityFrequency=100,this._canvasClockFrequency=25,this.canvasClockDuration=0,this.canvasClockStartDate=0,this.canvasClockTime=0,this.canvasHeight=0,this.canvasWidth=0,this.currentDuration=null,this.data=null,this.isPlaying=!1,this.isStalled=!1,this.readyCanvasesCount=0,this.stallRequestedBy=[],this.wasPlaying=!1,this.data=canvas,this.canvasClockDuration=canvas.getDuration()}return CanvasInstance.prototype.initContents=function(){if(this.data){this._mediaElements=[];for(var mediaItems=this.data.__jsonld.content[0].items,i=0;i<mediaItems.length;i++){var mediaItem=mediaItems[i],mediaSource=void 0;if("TextualBody"==mediaItem.body.type)mediaSource=mediaItem.body.value;else if(Array.isArray(mediaItem.body)&&"Choice"==mediaItem.body[0].type){var tmpItem=mediaItem;mediaItem.body=tmpItem.body[0].items[0],mediaSource=mediaItem.body.id.split("#")[0]}else mediaSource=mediaItem.body.id.split("#")[0];var spatial=/xywh=([^&]+)/g.exec(mediaItem.target),temporal=/t=([^&]+)/g.exec(mediaItem.target),xywh=void 0;xywh=spatial&&spatial[1]?spatial[1].split(","):[0,0,this.canvasWidth,this.canvasHeight];var t=void 0;t=temporal&&temporal[1]?temporal[1].split(","):[0,this.canvasClockDuration];var positionLeft=parseInt(xywh[0]),positionTop=parseInt(xywh[1]),mediaWidth=parseInt(xywh[2]),mediaHeight=parseInt(xywh[3]),startTime=parseInt(t[0]),endTime=parseInt(t[1]),percentageTop=this._convertToPercentage(positionTop,this.canvasHeight),percentageLeft=this._convertToPercentage(positionLeft,this.canvasWidth),percentageWidth=this._convertToPercentage(mediaWidth,this.canvasWidth),percentageHeight=this._convertToPercentage(mediaHeight,this.canvasHeight),temporalOffsets=/t=([^&]+)/g.exec(mediaItem.body.id),ot=void 0;ot=temporalOffsets&&temporalOffsets[1]?temporalOffsets[1].split(","):[null,null];var offsetStart=ot[0]?parseInt(ot[0]):ot[0],offsetEnd=ot[1]?parseInt(ot[1]):ot[1],itemData={type:mediaItem.body.type,source:mediaSource,start:startTime,end:endTime,top:percentageTop,left:percentageLeft,width:percentageWidth,height:percentageHeight,startOffset:offsetStart,endOffset:offsetEnd,active:!1};this._renderMediaElement(itemData)}}},CanvasInstance.prototype._convertToPercentage=function(pixelValue,maxValue){var percentage=pixelValue/maxValue*100;return percentage},CanvasInstance.prototype._renderMediaElement=function(data){var $mediaElement;switch(data.type){case"Image":$mediaElement=$('<img class="anno" src="'+data.source+'" />');break;case"Video":$mediaElement=$('<video class="anno" src="'+data.source+'" />');break;case"Audio":$mediaElement=$('<audio class="anno" src="'+data.source+'" />');break;case"TextualBody":$mediaElement=$('<div class="anno">'+data.source+"</div>");break;default:return}if($mediaElement.css({top:data.top+"%",left:data.left+"%",width:data.width+"%",height:data.height+"%"}).hide(),data.element=$mediaElement,"Video"==data.type||"Audio"==data.type){data.timeout=null;var that_1=this;data.checkForStall=function(){var self=this;this.active?(that_1.checkMediaSynchronization(),this.element.get(0).readyState>0&&!this.outOfSync?that_1.playbackStalled(!1,self):(that_1.playbackStalled(!0,self),this.timeout&&window.clearTimeout(this.timeout),this.timeout=window.setTimeout(function(){self.checkForStall()},1e3))):that_1.playbackStalled(!1,self)}}if(this._mediaElements.push(data),this.$playerElement){var targetElement=this.$playerElement.find(".canvasContainer");targetElement.append($mediaElement)}if("Video"==data.type||"Audio"==data.type){var that_2=this,self_1=data;$mediaElement.on("loadstart",function(){self_1.checkForStall()}),$mediaElement.on("waiting",function(){self_1.checkForStall()}),$mediaElement.on("seeking",function(){}),$mediaElement.on("loadedmetadata",function(){that_2.readyCanvasesCount++,that_2.readyCanvasesCount===that_2._mediaElements.length&&that_2.fire(IIIFComponents.AVComponent.Events.CANVASREADY)}),$mediaElement.attr("preload","auto"),$mediaElement.get(0).load()}this._renderSyncIndicator(data)},CanvasInstance.prototype._getDurationHighlight=function(){return this.$playerElement.find(".durationHighlight")},CanvasInstance.prototype.highlightDuration=function(){if(this.currentDuration){var $durationHighlight=this._getDurationHighlight(),totalLength=this.canvasClockDuration,timelineLength=this._getTimelineContainer().width(),ratio=timelineLength/totalLength,start=this.currentDuration.start*ratio,end=this.currentDuration.end*ratio,width=end-start;$durationHighlight.css({left:start,width:width})}},CanvasInstance.prototype.setVolume=function(value){for(var i=0;i<this._mediaElements.length;i++){var $mediaElement=this._mediaElements[i];$($mediaElement.element).prop("volume",value)}},CanvasInstance.prototype._renderSyncIndicator=function(mediaElementData){var leftPercent=this._convertToPercentage(mediaElementData.start,this.canvasClockDuration),widthPercent=this._convertToPercentage(mediaElementData.end-mediaElementData.start,this.canvasClockDuration),$timelineItem=$('<div class="timelineItem" title="'+mediaElementData.source+'" data-start="'+mediaElementData.start+'" data-end="'+mediaElementData.end+'"></div>');$timelineItem.css({left:leftPercent+"%",width:widthPercent+"%"});var $lineWrapper=$('<div class="lineWrapper"></div>');if($timelineItem.appendTo($lineWrapper),mediaElementData.timelineElement=$timelineItem,this.$playerElement){var $itemContainer=this.$playerElement.find(".timelineItemContainer");$itemContainer.append($lineWrapper)}},CanvasInstance.prototype.setCurrentTime=function(seconds){this.canvasClockTime=seconds,this.canvasClockStartDate=Date.now()-1e3*this.canvasClockTime,this.logMessage("SET CURRENT TIME to: "+this.canvasClockTime+" seconds."),this.canvasClockUpdater(),this.highPriorityUpdater(),this.lowPriorityUpdater(),this.synchronizeMedia()},CanvasInstance.prototype.play=function(withoutUpdate){if(!this.isPlaying){this.canvasClockTime===this.canvasClockDuration&&(this.canvasClockTime=0),this.canvasClockStartDate=Date.now()-1e3*this.canvasClockTime;var self=this;this.highPriorityInterval=window.setInterval(function(){self.highPriorityUpdater()},this._highPriorityFrequency),this.lowPriorityInterval=window.setInterval(function(){self.lowPriorityUpdater()},this._lowPriorityFrequency),this.canvasClockInterval=window.setInterval(function(){self.canvasClockUpdater()},this._canvasClockFrequency),this.isPlaying=!0,withoutUpdate||this.synchronizeMedia(),this.fire(IIIFComponents.AVComponent.Events.PLAYCANVAS),this.logMessage("PLAY canvas")}},CanvasInstance.prototype.pause=function(withoutUpdate){window.clearInterval(this.highPriorityInterval),window.clearInterval(this.lowPriorityInterval),window.clearInterval(this.canvasClockInterval),this.isPlaying=!1,withoutUpdate||(this.highPriorityUpdater(),this.lowPriorityUpdater(),this.synchronizeMedia()),this.fire(IIIFComponents.AVComponent.Events.PAUSECANVAS),this.logMessage("PAUSE canvas")},CanvasInstance.prototype.canvasClockUpdater=function(){this.canvasClockTime=(Date.now()-this.canvasClockStartDate)/1e3,this.canvasClockTime>=this.canvasClockDuration&&(this.canvasClockTime=this.canvasClockDuration,this.pause())},CanvasInstance.prototype._getTimelineContainer=function(){return this.$playerElement.find(".timelineContainer")},CanvasInstance.prototype.highPriorityUpdater=function(){var $timelineContainer=this._getTimelineContainer();$timelineContainer.slider({value:this.canvasClockTime}),this.$playerElement.find(".canvasTime").text(IIIFComponents.AVComponentUtils.Utils.formatTime(this.canvasClockTime))},CanvasInstance.prototype.lowPriorityUpdater=function(){this.updateMediaActiveStates()},CanvasInstance.prototype.updateMediaActiveStates=function(){for(var mediaElement,i=0;i<this._mediaElements.length;i++)mediaElement=this._mediaElements[i],mediaElement.start<=this.canvasClockTime&&mediaElement.end>=this.canvasClockTime?(this.checkMediaSynchronization(),mediaElement.active||(this.synchronizeMedia(),mediaElement.active=!0,mediaElement.element.show(),mediaElement.timelineElement.addClass("active")),"Video"!=mediaElement.type&&"Audio"!=mediaElement.type||mediaElement.element[0].currentTime>mediaElement.element[0].duration-mediaElement.endOffset&&mediaElement.element[0].pause()):mediaElement.active&&(mediaElement.active=!1,mediaElement.element.hide(),mediaElement.timelineElement.removeClass("active"),"Video"!=mediaElement.type&&"Audio"!=mediaElement.type||mediaElement.element[0].pause())},CanvasInstance.prototype.synchronizeMedia=function(){for(var mediaElement,i=0;i<this._mediaElements.length;i++)if(mediaElement=this._mediaElements[i],"Video"==mediaElement.type||"Audio"==mediaElement.type){if(mediaElement.element[0].currentTime=this.canvasClockTime-mediaElement.start+mediaElement.startOffset,mediaElement.start<=this.canvasClockTime&&mediaElement.end>=this.canvasClockTime)if(this.isPlaying){if(mediaElement.element[0].paused){var promise=mediaElement.element[0].play();promise&&promise["catch"](function(){})}}else mediaElement.element[0].pause();else mediaElement.element[0].pause();mediaElement.element[0].currentTime>mediaElement.element[0].duration-mediaElement.endOffset&&mediaElement.element[0].pause()}this.logMessage("SYNC MEDIA at: "+this.canvasClockTime+" seconds.")},CanvasInstance.prototype.checkMediaSynchronization=function(){for(var mediaElement,i=0,l=this._mediaElements.length;i<l;i++)if(mediaElement=this._mediaElements[i],("Video"==mediaElement.type||"Audio"==mediaElement.type)&&mediaElement.start<=this.canvasClockTime&&mediaElement.end>=this.canvasClockTime){var correctTime=this.canvasClockTime-mediaElement.start+mediaElement.startOffset,factualTime=mediaElement.element[0].currentTime;if(Math.abs(factualTime-correctTime)>.4){mediaElement.outOfSync=!0;var lag=Math.abs(factualTime-correctTime);this.logMessage("DETECTED synchronization lag: "+Math.abs(lag)),mediaElement.element[0].currentTime=correctTime}else mediaElement.outOfSync=!1}},CanvasInstance.prototype.playbackStalled=function(aBoolean,syncMediaRequestingStall){if(aBoolean)this.stallRequestedBy.indexOf(syncMediaRequestingStall)<0&&this.stallRequestedBy.push(syncMediaRequestingStall),this.isStalled||(this.$playerElement&&this._showWorkingIndicator(this.$playerElement.find(".canvasContainer")),this.wasPlaying=this.isPlaying,this.pause(!0),this.isStalled=aBoolean);else{var idx=this.stallRequestedBy.indexOf(syncMediaRequestingStall);idx>=0&&this.stallRequestedBy.splice(idx,1),0===this.stallRequestedBy.length&&(this._hideWorkingIndicator(),this.isStalled&&this.wasPlaying&&this.play(!0),this.isStalled=aBoolean)}},CanvasInstance.prototype._showWorkingIndicator=function($targetElement){var workingIndicator=$('<div class="workingIndicator">Waiting ...</div>');0==$targetElement.find(".workingIndicator").length&&$targetElement.append(workingIndicator)},CanvasInstance.prototype._hideWorkingIndicator=function(){$(".workingIndicator").remove()},CanvasInstance.prototype.on=function(name,callback,ctx){var e=this._e||(this._e={});(e[name]||(e[name]=[])).push({fn:callback,ctx:ctx})},CanvasInstance.prototype.fire=function(name){for(var args=[],_i=1;_i<arguments.length;_i++)args[_i-1]=arguments[_i];var data=[].slice.call(arguments,1),evtArr=((this._e||(this._e={}))[name]||[]).slice(),i=0,len=evtArr.length;for(i;i<len;i++)evtArr[i].fn.apply(evtArr[i].ctx,data)},CanvasInstance}();IIIFComponents.CanvasInstance=CanvasInstance}(IIIFComponents||(IIIFComponents={}));var IIIFComponents;!function(IIIFComponents){var AVComponentObjects;!function(AVComponentObjects){var Duration=function(){function Duration(start,end){this.start=start,this.end=end}return Duration}();AVComponentObjects.Duration=Duration}(AVComponentObjects=IIIFComponents.AVComponentObjects||(IIIFComponents.AVComponentObjects={}))}(IIIFComponents||(IIIFComponents={}));var IIIFComponents;!function(IIIFComponents){var AVComponentUtils;!function(AVComponentUtils){var Utils=function(){function Utils(){}return Utils.formatTime=function(aNumber){var hours,minutes,seconds,hourValue;return seconds=Math.ceil(aNumber),hours=Math.floor(seconds/3600),hours=hours>=10?hours:"0"+hours,minutes=Math.floor(seconds%3600/60),minutes=minutes>=10?minutes:"0"+minutes,seconds=Math.floor(seconds%3600%60),seconds=seconds>=10?seconds:"0"+seconds,hourValue=hours>=1?hours+":":"",hourValue+minutes+":"+seconds},Utils}();AVComponentUtils.Utils=Utils}(AVComponentUtils=IIIFComponents.AVComponentUtils||(IIIFComponents.AVComponentUtils={}))}(IIIFComponents||(IIIFComponents={}))}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1])(1)});
\ No newline at end of file
diff --git a/examples/js/iiif-av-component.js b/examples/js/iiif-av-component.js
index beefbf9..82b290a 100644
--- a/examples/js/iiif-av-component.js
+++ b/examples/js/iiif-av-component.js
@@ -1,4 +1,4 @@
-// iiif-av-component v0.0.10 https://github.com/iiif-commons/iiif-av-component#readme
+// iiif-av-component v0.0.11 https://github.com/iiif-commons/iiif-av-component#readme
 (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.iiifAvComponent = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 (function (global){
 /// <reference types="exjs" /> 
@@ -207,7 +207,6 @@ var IIIFComponents;
             // loop through all canvases resizing their elements
             for (var i = 0; i < this.canvasInstances.length; i++) {
                 var canvasInstance = this.canvasInstances[i];
-                canvasInstance.highlightDuration();
                 if (canvasInstance.$playerElement) {
                     var $canvasContainer = canvasInstance.$playerElement.find('.canvasContainer');
                     var $timelineContainer = canvasInstance.$playerElement.find('.timelineContainer');
@@ -219,6 +218,7 @@ var IIIFComponents;
                         var $options = canvasInstance.$playerElement.find('.optionsContainer');
                         $canvasContainer.height(this._$element.height() - $options.height());
                     }
+                    canvasInstance.highlightDuration();
                 }
             }
         };
diff --git a/package.json b/package.json
index 28f381a..98e3d24 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "iiif-av-component",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "",
   "main": "index.js",
   "types": "./dist/iiif-av-component.d.ts",
diff --git a/src/AVComponent.ts b/src/AVComponent.ts
index 75bf8fe..325cc94 100644
--- a/src/AVComponent.ts
+++ b/src/AVComponent.ts
@@ -259,8 +259,6 @@ namespace IIIFComponents {
 
                 const canvasInstance: CanvasInstance = this.canvasInstances[i];
 
-                canvasInstance.highlightDuration();
-
                 if (canvasInstance.$playerElement) {
                     const $canvasContainer = canvasInstance.$playerElement.find('.canvasContainer');
                     const $timelineContainer = canvasInstance.$playerElement.find('.timelineContainer');
@@ -276,6 +274,8 @@ namespace IIIFComponents {
                         const $options: JQuery = canvasInstance.$playerElement.find('.optionsContainer');
                         $canvasContainer.height(<number>this._$element.height() - <number>$options.height());
                     }
+
+                    canvasInstance.highlightDuration();
                     
                 }