added isOnlyCanvasInstance

IIIF-Commons · Sep 13, 2018 · a20c25a · a20c25a
1 parent 203916b
commit a20c25a
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 24 deletions.
diff --git a/dist/iiif-av-component.bundle.js b/dist/iiif-av-component.bundle.js
diff --git a/dist/iiif-av-component.css b/dist/iiif-av-component.css
@@ -132,7 +132,7 @@
   border: none;
   border-radius: 8px;
   background-color: #14a4c3;
-  z-index: 1;
+  z-index: 2;
   cursor: pointer;
 }
 .iiif-av-component .canvas-timeline-container .ui-slider-handle:focus {
@@ -152,7 +152,7 @@
   border: none;
   border-radius: 8px;
   background-color: #14a4c3;
-  z-index: 1;
+  z-index: 2;
   cursor: pointer;
 }
 .iiif-av-component .range-timeline-container .ui-slider-handle:focus {

diff --git a/dist/iiif-av-component.d.ts b/dist/iiif-av-component.d.ts
@@ -1,4 +1,4 @@
-// iiif-av-component v0.0.80 https://github.com/iiif-commons/iiif-av-component#readme
+// iiif-av-component v0.0.81 https://github.com/iiif-commons/iiif-av-component#readme
 interface Array<T> {
     /**
      * Determines whether an array includes a certain element, returning true or false as appropriate.
@@ -142,6 +142,7 @@ declare namespace IIIFComponents {
         ranges: Manifesto.IRange[];
         waveforms: string[];
         $playerElement: JQuery;
+        isOnlyCanvasInstance: boolean;
         logMessage: (message: string) => void;
         constructor(options: _Components.IBaseComponentOptions);
         init(): void;

diff --git a/dist/iiif-av-component.js b/dist/iiif-av-component.js
@@ -1,4 +1,4 @@
-// iiif-av-component v0.0.80 https://github.com/iiif-commons/iiif-av-component#readme
+// iiif-av-component v0.0.81 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(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
 (function (global){
 
@@ -189,9 +189,13 @@ var IIIFComponents;
         };
         AVComponent.prototype._reset = function () {
             var _this = this;
+            this._readyMedia = 0;
+            this._readyWaveforms = 0;
+            this._posterCanvasWidth = 0;
+            this._posterCanvasHeight = 0;
             clearInterval(this._checkAllMediaReadyInterval);
             clearInterval(this._checkAllWaveformsReadyInterval);
-            this.canvasInstances.forEach(function (canvasInstance, index) {
+            this.canvasInstances.forEach(function (canvasInstance) {
                 canvasInstance.destroy();
             });
             this.canvasInstances = [];
@@ -292,6 +296,7 @@ var IIIFComponents;
                 data: Object.assign({}, { canvas: canvas }, this._data)
             });
             canvasInstance.logMessage = this._logMessage.bind(this);
+            canvasInstance.isOnlyCanvasInstance = this._getCanvases().length === 1;
             this._$element.append(canvasInstance.$playerElement);
             canvasInstance.init();
             this.canvasInstances.push(canvasInstance);
@@ -359,7 +364,8 @@ var IIIFComponents;
                     var currentCanvasId = canvasInstance.getCanvasId();
                     if (currentCanvasId) {
                         currentCanvasId = this._getNormaliseCanvasId(currentCanvasId);
-                        if (canvasInstance.isVirtual() && currentCanvasId === canvasId || canvasInstance.includesVirtualSubCanvas(canvasId)) {
+                        if ((canvasInstance.isVirtual() || this.canvasInstances.length === 1) && currentCanvasId === canvasId ||
+                            canvasInstance.includesVirtualSubCanvas(canvasId)) {
                             return canvasInstance;
                         }
                     }
@@ -673,6 +679,7 @@ var IIIFComponents;
             //private _waveformNeedsRedraw: boolean = true;
             _this.ranges = [];
             _this.waveforms = [];
+            _this.isOnlyCanvasInstance = false;
             _this._scaleY = function (amplitude, height) {
                 var range = 256;
                 return Math.max(_this._data.waveformBarWidth, (amplitude * height / range));
@@ -1129,7 +1136,7 @@ var IIIFComponents;
                     }
                     var width = end - start;
                     //console.log(width);
-                    if (this.isVirtual()) {
+                    if (this.isVirtual() || this.isOnlyCanvasInstance) {
                         this._$durationHighlight.show();
                         // set the start position and width
                         this._$durationHighlight.css({

diff --git a/dist/iiif-av-component.min.js b/dist/iiif-av-component.min.js
diff --git a/examples/css/iiif-av-component.css b/examples/css/iiif-av-component.css
@@ -132,7 +132,7 @@
   border: none;
   border-radius: 8px;
   background-color: #14a4c3;
-  z-index: 1;
+  z-index: 2;
   cursor: pointer;
 }
 .iiif-av-component .canvas-timeline-container .ui-slider-handle:focus {
@@ -152,7 +152,7 @@
   border: none;
   border-radius: 8px;
   background-color: #14a4c3;
-  z-index: 1;
+  z-index: 2;
   cursor: pointer;
 }
 .iiif-av-component .range-timeline-container .ui-slider-handle:focus {

diff --git a/examples/js/iiif-av-component.js b/examples/js/iiif-av-component.js
@@ -1,4 +1,4 @@
-// iiif-av-component v0.0.80 https://github.com/iiif-commons/iiif-av-component#readme
+// iiif-av-component v0.0.81 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(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
 (function (global){
 
@@ -189,9 +189,13 @@ var IIIFComponents;
         };
         AVComponent.prototype._reset = function () {
             var _this = this;
+            this._readyMedia = 0;
+            this._readyWaveforms = 0;
+            this._posterCanvasWidth = 0;
+            this._posterCanvasHeight = 0;
             clearInterval(this._checkAllMediaReadyInterval);
             clearInterval(this._checkAllWaveformsReadyInterval);
-            this.canvasInstances.forEach(function (canvasInstance, index) {
+            this.canvasInstances.forEach(function (canvasInstance) {
                 canvasInstance.destroy();
             });
             this.canvasInstances = [];
@@ -292,6 +296,7 @@ var IIIFComponents;
                 data: Object.assign({}, { canvas: canvas }, this._data)
             });
             canvasInstance.logMessage = this._logMessage.bind(this);
+            canvasInstance.isOnlyCanvasInstance = this._getCanvases().length === 1;
             this._$element.append(canvasInstance.$playerElement);
             canvasInstance.init();
             this.canvasInstances.push(canvasInstance);
@@ -359,7 +364,8 @@ var IIIFComponents;
                     var currentCanvasId = canvasInstance.getCanvasId();
                     if (currentCanvasId) {
                         currentCanvasId = this._getNormaliseCanvasId(currentCanvasId);
-                        if (canvasInstance.isVirtual() && currentCanvasId === canvasId || canvasInstance.includesVirtualSubCanvas(canvasId)) {
+                        if ((canvasInstance.isVirtual() || this.canvasInstances.length === 1) && currentCanvasId === canvasId ||
+                            canvasInstance.includesVirtualSubCanvas(canvasId)) {
                             return canvasInstance;
                         }
                     }
@@ -673,6 +679,7 @@ var IIIFComponents;
             //private _waveformNeedsRedraw: boolean = true;
             _this.ranges = [];
             _this.waveforms = [];
+            _this.isOnlyCanvasInstance = false;
             _this._scaleY = function (amplitude, height) {
                 var range = 256;
                 return Math.max(_this._data.waveformBarWidth, (amplitude * height / range));
@@ -1129,7 +1136,7 @@ var IIIFComponents;
                     }
                     var width = end - start;
                     //console.log(width);
-                    if (this.isVirtual()) {
+                    if (this.isVirtual() || this.isOnlyCanvasInstance) {
                         this._$durationHighlight.show();
                         // set the start position and width
                         this._$durationHighlight.css({

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "iiif-av-component",
-  "version": "0.0.80",
+  "version": "0.0.81",
   "description": "",
   "main": "index.js",
   "types": "./dist/iiif-av-component.d.ts",

diff --git a/src/AVComponent.ts b/src/AVComponent.ts
@@ -229,10 +229,15 @@ namespace IIIFComponents {
 
         private _reset(): void {
 
+            this._readyMedia = 0;
+            this._readyWaveforms = 0;
+            this._posterCanvasWidth = 0;
+            this._posterCanvasHeight = 0;
+
             clearInterval(this._checkAllMediaReadyInterval);
             clearInterval(this._checkAllWaveformsReadyInterval);
 
-            this.canvasInstances.forEach((canvasInstance: CanvasInstance, index: number) => {
+            this.canvasInstances.forEach((canvasInstance: CanvasInstance) => {
                 canvasInstance.destroy();
             });
 
@@ -370,7 +375,8 @@ namespace IIIFComponents {
                 data: Object.assign({}, { canvas: canvas }, this._data)
             });
 
-            canvasInstance.logMessage = this._logMessage.bind(this);   
+            canvasInstance.logMessage = this._logMessage.bind(this);
+            canvasInstance.isOnlyCanvasInstance = this._getCanvases().length === 1;
             this._$element.append(canvasInstance.$playerElement);
 
             canvasInstance.init();
@@ -463,7 +469,8 @@ namespace IIIFComponents {
 
                         currentCanvasId = this._getNormaliseCanvasId(currentCanvasId);
 
-                        if (canvasInstance.isVirtual() && currentCanvasId === canvasId || canvasInstance.includesVirtualSubCanvas(canvasId)) {
+                        if ((canvasInstance.isVirtual() || this.canvasInstances.length === 1) && currentCanvasId === canvasId || 
+                            canvasInstance.includesVirtualSubCanvas(canvasId)) {
                             return canvasInstance;
                         }
 

diff --git a/src/CanvasInstance.ts b/src/CanvasInstance.ts
@@ -52,6 +52,7 @@ namespace IIIFComponents {
         public waveforms: string[] = [];
 
         public $playerElement: JQuery;
+        public isOnlyCanvasInstance: boolean = false;
         public logMessage: (message: string) => void;
 
         constructor(options: _Components.IBaseComponentOptions) {
@@ -653,7 +654,7 @@ namespace IIIFComponents {
 
                     //console.log(width);
 
-                    if (this.isVirtual()) {
+                    if (this.isVirtual() || this.isOnlyCanvasInstance) {
                         this._$durationHighlight.show();
                         // set the start position and width
                         this._$durationHighlight.css({

diff --git a/src/css/iiif-av-component.less b/src/css/iiif-av-component.less
@@ -311,7 +311,7 @@
     border: none;
     border-radius: 8px;
     background-color: @highlight-color;
-    z-index: 1;
+    z-index: 2;
 
     cursor: pointer;