Merge pull request #48 from voxel51/player51imagesequence

Player51imagesequence

Author: kevinqi34

src/css/player51.css

@@ -19,7 +19,6 @@
   padding: 5px;
   opacity: 0;
   z-index: 20;
-
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -71,6 +70,12 @@
   margin: 3px;
 }
 
+.controls-auto-size {
+  min-height: 30px;
+  max-height: 70px;
+  height: 10%;
+}
+
 
 /* Functionality Parts.  Do not edit. */
 .p51-contained-video, .p51-contained-image, .p51-contained-canvas {
@@ -80,8 +85,8 @@
   bottom: 0;
   right: 0;
   margin: auto;
-  max-width: 100%;
-  min-width: 80%;
+  width: 100%;
+  max-height: 100%;
 }
 
 .p51-contained-canvas {

src/js/galleryviewer.js

@@ -14,7 +14,6 @@ import {
   MediaPlayer,
 } from './mediaplayer.js';
 
-// ES6 module export
 export {
   GalleryViewer,
 };
@@ -39,7 +38,7 @@ GalleryViewer.prototype.constructor = GalleryViewer;
 
 
 /**
- * Set a poster frame URL to display while the video itself is loading
+ * Set a poster frame URL to display while the gallery itself is loading
  *
  * @member setLoadingPoster
  * @param {string} url Image to be shown while loading.

src/js/imagesequence.js

@@ -0,0 +1,94 @@
+/**
+ * @module imagesequence.js
+ * @summary Defines a client-side media player that can load a zip of images
+ * and play throught like a video while rendering overlayed metadata.
+ *
+ * @desc ImageSequence is a javascript based image player that can take a
+ * sequence of images and render annotations and markup overlayed on top while
+ * playing through like a video.
+ *
+ * Copyright 2017-2019, Voxel51, Inc.
+ * Kevin Qi, kevin@voxel51.com
+*/
+
+import {
+  MediaPlayer,
+} from './mediaplayer.js';
+
+export {
+  ImageSequence,
+};
+
+
+/**
+ * ImageSequence Class Definition
+ *
+ * INHERITS: MediaPlayer
+ * F-MIXINS: None
+ * @constructor
+ * @param {object} media is an object that has "src" and "type" attributes.
+ * type must be in the format imagesequence/<format>
+ * ex. type: "imagesequence/zip"
+ * @param {string} overlay is data that should be overlayed on the psuedo video.
+ * Overlay is a path to a file of eta.core.image.ImageSetLabels format.
+ * @param {int} fps is the frame-rate of the media.
+ */
+function ImageSequence(media, overlay, fps) {
+  MediaPlayer.call(this, 'imagesequence', media, overlay, fps);
+}
+ImageSequence.prototype = Object.create(MediaPlayer.prototype);
+ImageSequence.prototype.constructor = ImageSequence;
+
+
+/**
+ * Set a poster frame UR to display while the image sequence is loading
+ *
+ * @member setLoadingPoster
+ * @param {string} url Image to be shown while loading.
+ */
+ImageSequence.prototype.setLoadingPoster = function(url) {
+  this._boolHasPoster = true;
+  this._loadingPosterURL = url;
+};
+
+
+/**
+ * Loop is not for image sequences.
+ * Not supported.
+ *
+ * @member loop
+ */
+ImageSequence.prototype.loop = function() {
+};
+
+
+/**
+ * Autoplay is not for image sequences.
+ * Not supported.
+ *
+ * @member autoplay
+ */
+ImageSequence.prototype.autoplay = function() {
+};
+
+
+/**
+ * ResetToFragment is not for image sequences.
+ * Not supported.
+ *
+ * @member resetToFragment
+ */
+ImageSequence.prototype.resetToFragment = function() {
+};
+
+
+/**
+ * ThumbnailMode is not for image sequences.
+ * Not supported.
+ *
+ * @member thumbnailMode
+ * @param {function} action (optional) a callback function to associate with
+ * any click on an image.
+ */
+ImageSequence.prototype.thumbnailMode = function(action) {
+};

src/js/imageviewer.js

@@ -15,7 +15,6 @@ import {
   MediaPlayer,
 } from './mediaplayer.js';
 
-// ES6 module export
 export {
   ImageViewer,
 };

src/js/mediaplayer.js

@@ -20,8 +20,10 @@ import {
 import {
   GalleryRenderer,
 } from './renderers/galleryrenderer.js';
+import {
+  ImageSequenceRenderer,
+} from './renderers/imagesequencerenderer.js';
 
-// ES6 module export
 export {
   MediaPlayer,
 };
@@ -51,6 +53,8 @@ function MediaPlayer(type, media, overlay, fps) {
     this.renderer = new ImageRenderer(media, overlay);
   } else if (type == 'gallery') {
     this.renderer = new GalleryRenderer(media, overlay);
+  } else if (type == 'imagesequence') {
+    this.renderer = new ImageSequenceRenderer(media, overlay, fps);
   } else {
     throw new Error('Renderer not initialized.');
   }

src/js/overlay.js

@@ -10,7 +10,6 @@
  */
 
 
-// ES6 module export
 export {
   ColorGenerator,
   Overlay,

src/js/player51.js

@@ -12,7 +12,7 @@
  * usage is here.
  *
  * To switch between types of media, specify the type attribute in media
- * in the following format.
+ * in the following format, otherwise known as MIME type.
  * <media type>/<media format>
  * examples: image/jpg, video/mp4, application/zip
 
@@ -44,7 +44,7 @@
     </script>
 
    ```
-
+ * For videos and images,
  * Note that default behavior is to mirror the size of the enclosing container.
  * You can, however, alter this in two ways.
  * 1. You can call `player.forceMax()` which will force the video or
@@ -54,10 +54,13 @@
  *    or image and its enclosing container to the width and height you pass in.
  *    Both such calls need to be made before the render call.
  *
- * TODO: implement an abstraction to for the overlay rendering.  Currently it
- * is directly tied to a canvas.  But, one can consider implementing this via
- * div/DOM rendering and bringing the full power of CSS to bear on the
- * overlays, including animation.
+ * For zip files,
+ * Note that the default behaviour is to have each image mirror the size of the
+ * enclosing container.
+ *
+ * Also note that there are two options for rendering zip files,
+ * Default: render as an image gallery.
+ * SequenceFlag = true: render as a psuedo videoplayer.
  *
  * Copyright 2017-2019, Voxel51, Inc.
  * Jason Corso, jason@voxel51.com
@@ -76,8 +79,10 @@ import {
 import {
   GalleryViewer,
 } from './galleryviewer.js';
+import {
+  ImageSequence,
+} from './imagesequence.js';
 
-// ES6 module export
 export default Player51;
 
 
@@ -96,17 +101,22 @@ export default Player51;
  * In the case of images: Overlay can be a string pointing to a single URL.
  * @param {int} fps is the frame-rate of the media.  If it is not provided
  * then it will be guessed. Ignore in the case of images.
- *
+ * @param {bool} sequenceFlag tells the player to render the zip file as either
+ * an image gallery or a video player.
  */
-function Player51(media, overlay, fps) {
+function Player51(media, overlay, fps = 0, sequenceFlag = false) {
   this.mediaType = this.determineMediaType(media);
   // Load correct player
   if (this.mediaType === 'video') {
     this.player = new VideoPlayer(media, overlay, fps);
   } else if (this.mediaType === 'image') {
     this.player = new ImageViewer(media, overlay);
-  } else if (this.mediaType === 'gallery' || this.mediaType === 'application') {
-    this.player = new GalleryViewer(media, overlay);
+  } else if (this.mediaType === 'application' && this.mediaFormat === 'zip') {
+    if (sequenceFlag) {
+      this.player = new ImageSequence(media, overlay, fps);
+    } else {
+      this.player = new GalleryViewer(media, overlay);
+    }
   } else {
     /* eslint-disable-next-line no-console */
     console.log('WARN: Player51 doesn\'t support this media type yet.');
@@ -136,6 +146,19 @@ Player51.prototype.setBoolDrawFrameNumber = function(value) {
 };
 
 
+/**
+ * This function sets player.renderer.reader.workerScriptsPath
+ *
+ * @member setZipLibraryParameters
+ * @param {string} path relative to zip.js
+ */
+Player51.prototype.setZipLibraryParameters = function(path) {
+  if (this.player.renderer) {
+    this.player.renderer.reader.workerScriptsPath = path;
+  }
+};
+
+
 /**
  * This function figures out the type of media to be rendered.
  *
@@ -148,6 +171,7 @@ Player51.prototype.determineMediaType = function(media) {
   if (splitResults.length !== 2) {
     throw new Error('Media type is incorrect.');
   }
+  this.mediaFormat = splitResults[1];
   return splitResults[0];
 };