added canvasready event

IIIF-Commons · Jan 9, 2018 · a42011e · a42011e
1 parent c083bde
commit a42011e
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 12 deletions.
diff --git a/dist/iiif-av-component.bundle.js b/dist/iiif-av-component.bundle.js
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.7 https://github.com/iiif-commons/iiif-av-component#readme
+// iiif-av-component v0.0.8 https://github.com/iiif-commons/iiif-av-component#readme
 
 /// <reference types="base-component" />
 declare namespace IIIFComponents {
@@ -53,6 +53,7 @@ declare namespace IIIFComponents {
         isPlaying: boolean;
         isStalled: boolean;
         logMessage: (message: string) => void;
+        readyCanvasesCount: number;
         stallRequestedBy: any[];
         wasPlaying: boolean;
         constructor(canvas: Manifesto.ICanvas);

diff --git a/dist/iiif-av-component.js b/dist/iiif-av-component.js
@@ -1,4 +1,4 @@
-// iiif-av-component v0.0.7 https://github.com/iiif-commons/iiif-av-component#readme
+// iiif-av-component v0.0.8 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" /> 
@@ -146,7 +146,7 @@ var IIIFComponents;
                 canvasInstance.setVolume(Number(this.value));
             });
             var that = this;
-            canvasInstance.$playerElement[0].addEventListener('loadedmetadata', function () {
+            canvasInstance.on('canvasready', function () {
                 canvasInstance.setCurrentTime(0);
                 if (that.options.data.autoPlay) {
                     canvasInstance.play();
@@ -262,6 +262,7 @@ var IIIFComponents;
             this.data = null;
             this.isPlaying = false;
             this.isStalled = false;
+            this.readyCanvasesCount = 0;
             this.stallRequestedBy = []; //todo: type
             this.wasPlaying = false;
             this.data = canvas;
@@ -408,6 +409,7 @@ var IIIFComponents;
                 targetElement.append($mediaElement);
             }
             if (data.type == 'Video' || data.type == 'Audio') {
+                var that_2 = this;
                 var self_1 = data;
                 $mediaElement.on('loadstart', function () {
                     //console.log('loadstart');
@@ -421,6 +423,12 @@ var IIIFComponents;
                     //console.log('seeking');
                     //self.checkForStall();
                 });
+                $mediaElement.on('loadedmetadata', function () {
+                    that_2.readyCanvasesCount++;
+                    if (that_2.readyCanvasesCount === that_2._mediaElements.length) {
+                        that_2.fire(IIIFComponents.AVComponent.Events.CANVASREADY);
+                    }
+                });
                 $mediaElement.attr('preload', 'auto');
                 $mediaElement.get(0).load(); // todo: type
             }

diff --git a/dist/iiif-av-component.min.js b/dist/iiif-av-component.min.js
diff --git a/examples/index.html b/examples/index.html
@@ -128,6 +128,10 @@ <h3 class="title"></h3>
                 logMessage(message);
             });
 
+            avcomponent.on('canvasready', function() {
+                console.log('canvas ready');
+            });
+
             treecomponent = new IIIFComponents.TreeComponent({
                 target: document.querySelector('#tree')
             });
@@ -136,9 +140,9 @@ <h3 class="title"></h3>
 
                 $('.canvasNavigationContainer').empty();
 
-                for (var i=0; i<canvases.length; i++) {
+                for (var i = 0; i < canvases.length; i++) {
 
-                    var canvasLabel = i+1;
+                    var canvasLabel = i + 1;
                     var canvasNavigationButton = $('<button class="canvasNavigationButton" data-canvas-id="'+ canvases[i].id +'">Canvas '+ canvasLabel +'</button>');
 
                     canvasNavigationButton.click(function() {

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.7 https://github.com/iiif-commons/iiif-av-component#readme
+// iiif-av-component v0.0.8 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" /> 
@@ -146,7 +146,7 @@ var IIIFComponents;
                 canvasInstance.setVolume(Number(this.value));
             });
             var that = this;
-            canvasInstance.$playerElement[0].addEventListener('loadedmetadata', function () {
+            canvasInstance.on('canvasready', function () {
                 canvasInstance.setCurrentTime(0);
                 if (that.options.data.autoPlay) {
                     canvasInstance.play();
@@ -262,6 +262,7 @@ var IIIFComponents;
             this.data = null;
             this.isPlaying = false;
             this.isStalled = false;
+            this.readyCanvasesCount = 0;
             this.stallRequestedBy = []; //todo: type
             this.wasPlaying = false;
             this.data = canvas;
@@ -408,6 +409,7 @@ var IIIFComponents;
                 targetElement.append($mediaElement);
             }
             if (data.type == 'Video' || data.type == 'Audio') {
+                var that_2 = this;
                 var self_1 = data;
                 $mediaElement.on('loadstart', function () {
                     //console.log('loadstart');
@@ -421,6 +423,12 @@ var IIIFComponents;
                     //console.log('seeking');
                     //self.checkForStall();
                 });
+                $mediaElement.on('loadedmetadata', function () {
+                    that_2.readyCanvasesCount++;
+                    if (that_2.readyCanvasesCount === that_2._mediaElements.length) {
+                        that_2.fire(IIIFComponents.AVComponent.Events.CANVASREADY);
+                    }
+                });
                 $mediaElement.attr('preload', 'auto');
                 $mediaElement.get(0).load(); // todo: type
             }

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

diff --git a/src/AVComponent.ts b/src/AVComponent.ts
@@ -167,7 +167,8 @@ namespace IIIFComponents {
 
             const that = this;
 
-            canvasInstance.$playerElement[0].addEventListener('loadedmetadata', function() {
+            canvasInstance.on('canvasready', function() {
+
                 canvasInstance.setCurrentTime(0);
 
                 if (that.options.data.autoPlay) {

diff --git a/src/CanvasInstance.ts b/src/CanvasInstance.ts
@@ -21,6 +21,7 @@ namespace IIIFComponents {
         public isPlaying: boolean = false;
         public isStalled: boolean = false;
         public logMessage: (message: string) => void;
+        public readyCanvasesCount: number = 0;
         public stallRequestedBy: any[] = []; //todo: type
         public wasPlaying: boolean = false;
 
@@ -208,20 +209,35 @@ namespace IIIFComponents {
             }
 
             if (data.type == 'Video' || data.type == 'Audio') {
+
+                const that = this;
                 const self = data;
+
                 $mediaElement.on('loadstart', function() {
                     //console.log('loadstart');
                     self.checkForStall();
                 });
+
                 $mediaElement.on('waiting', function() {
                     //console.log('waiting');
                     self.checkForStall();
                 });
+
                 $mediaElement.on('seeking', function() {
                     //console.log('seeking');
                     //self.checkForStall();
                 });
+
+                $mediaElement.on('loadedmetadata', function() {
+                    that.readyCanvasesCount++;
+
+                    if (that.readyCanvasesCount === that._mediaElements.length) {
+                        that.fire(AVComponent.Events.CANVASREADY);
+                    }
+                });
+
                 $mediaElement.attr('preload', 'auto');
+
                 (<any>$mediaElement.get(0)).load(); // todo: type
             }