stop mjpeg image loading and video playing when they are not visible

closes #141
CometVisu · Apr 30, 2017 · 11bb401 · 11bb401
1 parent bb9f46f
commit 11bb401
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 9 deletions.
diff --git a/source/class/cv/ui/structure/AbstractWidget.js b/source/class/cv/ui/structure/AbstractWidget.js
@@ -18,7 +18,7 @@
  */
 
 
-//noinspection JSUnusedGlobalSymbols
+//noinspection JSUnusedGlobalSymbols,JSUnusedLocalSymbols,JSHint
 /**
  * This class defines all the building blocks for a Visu in the "Pure" design
  */
@@ -91,7 +91,8 @@ qx.Class.define('cv.ui.structure.AbstractWidget', {
     visible           : {
       check: "Boolean",
       init: false,
-      event: "changeVisible"
+      event: "changeVisible",
+      apply: "_applyVisible"
     }
   },
 
@@ -112,6 +113,10 @@ qx.Class.define('cv.ui.structure.AbstractWidget', {
   members: {
     $$domReady: null,
 
+    // property apply
+    _applyVisible: function(value, old) {
+    },
+
     /**
      * Property transformaon helper
      * @param value {String}

diff --git a/source/class/cv/ui/structure/pure/Image.js b/source/class/cv/ui/structure/pure/Image.js
@@ -53,6 +53,8 @@ qx.Class.define('cv.ui.structure.pure.Image', {
   ******************************************************
   */
   members: {
+    __src: null,
+
     // overridden
     _getInnerDomString: function () {
       // create the actor
@@ -66,13 +68,37 @@ qx.Class.define('cv.ui.structure.pure.Image', {
       if (this.getHeight()) {
         imgStyle += 'height:' + this.getHeight() + ';';
       }
-      var src = this.getSrc();
-      var parsedUri = qx.util.Uri.parseUri(this.getSrc());
-      if (!parsedUri.protocol &&  !this.getSrc().startsWith("/")) {
-        // is relative URI, use the ResourceManager
-        src = qx.util.ResourceManager.getInstance().toUri(this.getSrc());
+      return '<div class="actor"><img src="' + this.__getSrc() + '" style="' + imgStyle + '" /></div>';
+    },
+
+    /**
+     * Return the real src value
+     */
+    __getSrc: function() {
+      if (!this.__src) {
+        var src = this.getSrc();
+        var parsedUri = qx.util.Uri.parseUri(this.getSrc());
+        if (!parsedUri.protocol && !this.getSrc().startsWith("/")) {
+          // is relative URI, use the ResourceManager
+          src = qx.util.ResourceManager.getInstance().toUri(this.getSrc());
+        }
+        this.__src = src;
+      }
+      return this.__src;
+    },
+
+    // overridden
+    getValueElement: function() {
+      return qx.bom.Selector.query("img", this.getDomElement())[0];
+    },
+
+    // overridden
+    _applyVisible: function(value) {
+      if (value === true) {
+        qx.bom.element.Attribute.set(this.getValueElement(), "src", this.__getSrc());
+      } else {
+        qx.bom.element.Attribute.set(this.getValueElement(), "src", "");
       }
-      return '<div class="actor"><img src="' + src + '" style="' + imgStyle + '" /></div>';
     }
   },
 

diff --git a/source/class/cv/ui/structure/pure/Video.js b/source/class/cv/ui/structure/pure/Video.js
@@ -56,8 +56,23 @@ qx.Class.define('cv.ui.structure.pure.Video', {
         style += 'height:' + this.getHeight() + ';';
       }
       if (style !== '') { style = 'style="' + style + '"'; }
-      var autoplay = (this.getAutoplay() === true) ? ' autoplay="autoplay"' : '';
+      var autoplay = this.isAutoplay() ? ' autoplay="autoplay"' : '';
       return '<div class="actor"><video src="' + this.getSrc() + '" ' + style + autoplay + '  controls="controls" /></div>';
+    },
+
+    // overridden
+    getValueElement: function() {
+      return qx.bom.Selector.query("video", this.getDomElement())[0];
+    },
+
+    // overridden
+    _applyVisible: function(value) {
+      var video = this.getValueElement();
+      if (value === true && this.isAutoplay()) {
+        video.play();
+      } else {
+        video.pause();
+      }
     }
   }
 });