feat(player): Introduced new workflow to consider preload attribute…

… to avoid loading media when no Ads are present

dist/openplayer.js

@@ -1407,6 +1407,11 @@ var Player = function () {
   }, {
     key: "play",
     value: function play() {
+      if (!this.media.loaded) {
+        this.media.load();
+        this.media.loaded = true;
+      }
+
       if (this.adsInstance) {
         this.adsInstance.play();
       } else {
@@ -1613,7 +1618,12 @@ var Player = function () {
         }
 
         this.media = new media_1.default(this.element, this.options, this.autoplay, Player.customMedia);
-        this.media.load();
+        var preload = this.element.getAttribute('preload');
+
+        if (this.ads || !preload || preload !== 'none') {
+          this.media.load();
+          this.media.loaded = true;
+        }
 
         if (!this.autoplay && this.ads) {
           var adsOptions = this.options && this.options.ads ? this.options.ads : undefined;
@@ -5981,6 +5991,7 @@ var Media = function () {
 
     _classCallCheck(this, Media);
 
+    this.mediaLoaded = false;
     this.customMedia = {
       media: {},
       optionsKey: {},
@@ -6052,6 +6063,11 @@ var Media = function () {
     value: function play() {
       var _this2 = this;
 
+      if (!this.loaded) {
+        this.load();
+        this.loaded = true;
+      }
+
       this.promisePlay = new Promise(function (resolve) {
         resolve();
       }).then(function () {
@@ -6173,36 +6189,36 @@ var Media = function () {
       this.media.volume = value;
     },
     get: function get() {
-      return this.media.volume;
+      return this.media ? this.media.volume : this.element.volume;
     }
   }, {
     key: "muted",
     set: function set(value) {
       this.media.muted = value;
     },
     get: function get() {
-      return this.media.muted;
+      return this.media ? this.media.muted : this.element.muted;
     }
   }, {
     key: "playbackRate",
-    get: function get() {
-      return this.media.playbackRate;
-    },
     set: function set(value) {
       this.media.playbackRate = value;
+    },
+    get: function get() {
+      return this.media ? this.media.playbackRate : this.element.playbackRate;
     }
   }, {
     key: "currentTime",
     set: function set(value) {
       this.media.currentTime = value;
     },
     get: function get() {
-      return this.media.currentTime;
+      return this.media ? this.media.currentTime : this.element.currentTime;
     }
   }, {
     key: "duration",
     get: function get() {
-      var duration = this.media.duration;
+      var duration = this.media ? this.media.duration : this.element.duration;
 
       if (duration === Infinity && this.element.seekable && this.element.seekable.length) {
         return this.element.seekable.end(0);
@@ -6213,12 +6229,20 @@ var Media = function () {
   }, {
     key: "paused",
     get: function get() {
-      return this.media.paused;
+      return this.media ? this.media.paused : this.element.paused;
     }
   }, {
     key: "ended",
     get: function get() {
-      return this.media.ended;
+      return this.media ? this.media.ended : this.element.ended;
+    }
+  }, {
+    key: "loaded",
+    set: function set(loaded) {
+      this.mediaLoaded = loaded;
+    },
+    get: function get() {
+      return this.mediaLoaded;
     }
   }]);
 

src/js/media.ts

@@ -67,6 +67,14 @@ class Media {
      */
     private autoplay: boolean;
 
+    /**
+     * Flag that indicates if initial load has occurred.
+     *
+     * @type boolean
+     * @memberof Player
+     */
+    private mediaLoaded: boolean = false;
+
     /**
      * Collection of additional (non-native) media
      *
@@ -176,6 +184,10 @@ class Media {
      * @memberof Media
      */
     public play(): Promise<void> {
+        if (!this.loaded) {
+            this.load();
+            this.loaded = true;
+        }
         this.promisePlay = new Promise(resolve => {
             resolve();
         }).then(() => {
@@ -278,7 +290,7 @@ class Media {
      * @readonly
      */
     get volume(): number {
-        return this.media.volume;
+        return this.media ? this.media.volume : this.element.volume;
     }
 
     /**
@@ -298,27 +310,27 @@ class Media {
      * @readonly
      */
     get muted(): boolean {
-        return this.media.muted;
+        return this.media ? this.media.muted : this.element.muted;
     }
 
     /**
      *
      * @see [[Native.playbackRate]]
-     * @type number
      * @memberof Media
-     * @readonly
      */
-    get playbackRate(): number {
-        return this.media.playbackRate;
+    set playbackRate(value) {
+        this.media.playbackRate = value;
     }
 
     /**
      *
      * @see [[Native.playbackRate]]
+     * @type number
      * @memberof Media
+     * @readonly
      */
-    set playbackRate(value) {
-        this.media.playbackRate = value;
+    get playbackRate(): number {
+        return this.media ? this.media.playbackRate : this.element.playbackRate;
     }
 
     /**
@@ -338,7 +350,7 @@ class Media {
      * @readonly
      */
     get currentTime(): number {
-        return this.media.currentTime;
+        return this.media ? this.media.currentTime : this.element.currentTime;
     }
 
     /**
@@ -349,7 +361,7 @@ class Media {
      * @readonly
      */
     get duration(): number {
-        const duration = this.media.duration;
+        const duration = this.media ? this.media.duration : this.element.duration;
         // To seek backwards in a live streaming (mobile devices)
         if (duration === Infinity && this.element.seekable && this.element.seekable.length) {
             return this.element.seekable.end(0);
@@ -365,7 +377,7 @@ class Media {
      * @readonly
      */
     get paused(): boolean {
-        return this.media.paused;
+        return this.media ? this.media.paused : this.element.paused;
     }
 
     /**
@@ -376,7 +388,24 @@ class Media {
      * @readonly
      */
     get ended(): boolean {
-        return this.media.ended;
+        return this.media ? this.media.ended : this.element.ended;
+    }
+
+    /**
+     *
+     * @memberof Media
+     */
+    set loaded(loaded: boolean) {
+        this.mediaLoaded = loaded;
+    }
+
+    /**
+     *
+     * @type boolean
+     * @memberof Media
+     */
+    get loaded(): boolean {
+        return this.mediaLoaded;
     }
 
     /**

src/js/player.ts

@@ -333,6 +333,10 @@ class Player {
      * @memberof Player
      */
     public play(): void {
+        if (!this.media.loaded) {
+            this.media.load();
+            this.media.loaded = true;
+        }
         if (this.adsInstance) {
             this.adsInstance.play();
         } else {
@@ -675,7 +679,11 @@ class Player {
                 this.element.addEventListener('canplay', this._autoplay.bind(this));
             }
             this.media = new Media(this.element, this.options, this.autoplay, Player.customMedia);
-            this.media.load();
+            const preload = this.element.getAttribute('preload');
+            if (this.ads || !preload || preload !== 'none') {
+                this.media.load();
+                this.media.loaded = true;
+            }
 
             if (!this.autoplay && this.ads) {
                 const adsOptions = this.options && this.options.ads ? this.options.ads : undefined;