Merge pull request #21 from voxmedia/ba-add-options-to-applications

Adds options to Applications
voxmedia · Mar 21, 2019 · 4f2ff08 · 4f2ff08
2 parents e9b2aeb + 7ca3a33
commit 4f2ff08
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 35 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## v1.2.1 (March 19, 2019)
+
+- Support for autplay and mute options in applications functions
+
 ## v1.2 (March 16, 2019)
 
 - Support for all Tracking directives of the form: `Tracking event="progress"`

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "concert-vast",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Simple Vast Parsing for Concert Video Ads",
   "main": "src/index.js",
   "author": "Vox Media",

diff --git a/src/lib/applications/video_element.js b/src/lib/applications/video_element.js
@@ -10,32 +10,48 @@ const VAST_LOADED_CLASS = 'vast-running';
 const VAST_PLAYING_CLASS = 'vast-playing';
 const VAST_DELAYED_ATTRIBUTE = 'vast-delayed-src';
 
+const DEFAULT_OPTIONS = {
+  autoplay: false,
+  muted: true,
+  restoreOriginalVideoOnComplete: true,
+};
+
 export default class VideoElement {
   constructor({ vast, videoElement }) {
     this.vast = vast;
     this.videoElement = videoElement;
     this.previousVolume = this.videoElement.volume;
     this.quartileSupport = new QuartileSupport();
     this._vastPresented = null;
+
     this.restoreVideoPlayer = false;
+    this.autoplay = false;
+    this.muted = true;
   }
 
-  applyAsPreroll() {
+  applyAsPreroll(options = {}) {
+    options = Object.assign({}, DEFAULT_OPTIONS, options);
+    this.autoplay = options.autoplay;
+    this.muted = options.muted;
+    this.restoreVideoPlayer = options.restoreOriginalVideoOnComplete;
+
     this._vastPresented = true;
-    this.restoreVideoPlayer = true;
 
+    this.setInitialVolume();
     this.addClassToVideo();
     this.pauseExistingVideoSources();
     this.setupQuartileSupport();
     this.setupVideoEventListeners();
     this.setupImpressions();
     this.loadVastVideo();
-    this.playVideo();
+
+    if (this.autoplay) {
+      this.playVideo();
+    }
   }
 
-  applyAsPrimary() {
-    this.applyAsPreroll();
-    this.restoreVideoPlayer = false;
+  applyAsPrimary(options = {}) {
+    this.applyAsPreroll(Object.assign({ restoreOriginalVideoOnComplete: false }, options));
   }
 
   // private
@@ -137,6 +153,13 @@ export default class VideoElement {
     this.previousVolume = this.videoElement.muted ? -1 : this.videoElement.volume;
   }
 
+  setInitialVolume() {
+    if (this.muted) {
+      this.videoElement.muted = true;
+      this.previousVolume = -1;
+    }
+  }
+
   playVideo() {
     this.videoElement.addEventListener('canplay', () => {
       this.videoElement.play();

diff --git a/src/lib/applications/video_js.js b/src/lib/applications/video_js.js
@@ -8,6 +8,11 @@ const EVENT_MAPPING = {
 const VIDEO_CONTROLS_HEIGHT = 50;
 const VAST_LOADED_CLASS = 'vast-running';
 const VAST_PLAYING_CLASS = 'vast-playing';
+const DEFAULT_OPTIONS = {
+  autoplay: false,
+  muted: true,
+  restoreOriginalVideoOnComplete: true,
+};
 
 export default class VideoJs {
   constructor({ vast, videoJsPlayer }) {
@@ -17,25 +22,34 @@ export default class VideoJs {
     this.previousSources = [];
     this._vastPresented = null;
     this.quartileSupport = new QuartileSupport();
+
     this.restoreVideoPlayer = false;
+    this.autoplay = false;
+    this.muted = true;
   }
 
-  applyAsPreroll() {
+  applyAsPreroll(options = {}) {
+    options = Object.assign({}, DEFAULT_OPTIONS, options);
+    this.autoplay = options.autoplay;
+    this.muted = options.muted;
+    this.restoreVideoPlayer = options.restoreOriginalVideoOnComplete;
+
     this._vastPresented = true;
-    this.restoreVideoPlayer = true;
 
+    this.setInitialVolume();
     this.addClassToVideo();
     this.pauseExistingVideoSources();
     this.setupQuartileSupport();
     this.setupVideoEventListeners();
     this.setupImpressions();
     this.loadVastVideo();
-    this.autoPlayVideo();
+    if (this.autoplay) {
+      this.autoPlayVideo();
+    }
   }
 
-  applyAsPrimary() {
-    this.applyAsPreroll();
-    this.restoreVideoPlayer = false;
+  applyAsPrimary(options = {}) {
+    this.applyAsPreroll(Object.assign({ restoreOriginalVideoOnComplete: false }, options));
   }
 
   // private
@@ -107,7 +121,6 @@ export default class VideoJs {
     this.videoJsPlayer.removeClass(VAST_LOADED_CLASS);
 
     this._vastPresented = false;
-    console.log('reloading previous sources', this.previousSources);
     this.videoJsPlayer.src(this.previousSources);
   }
 
@@ -116,12 +129,19 @@ export default class VideoJs {
 
     if (this.previousVolume <= 0 && this.videoJsPlayer.volume() != 0) {
       this.vast.addImpressionTrackingImagesFor('unmute');
-    } else if ((this.previousVolume > 0 && this.videoJsPlayer.volume() == 0) || this.videoJsPlayer.muted) {
+    } else if (this.previousVolume > 0 && (this.videoJsPlayer.volume() == 0 || this.videoJsPlayer.muted())) {
       this.vast.addImpressionTrackingImagesFor('mute');
     }
     this.previousVolume = this.videoJsPlayer.muted() ? -1 : this.videoJsPlayer.volume();
   }
 
+  setInitialVolume() {
+    if (this.muted) {
+      this.videoJsPlayer.muted(true);
+      this.previousVolume = -1;
+    }
+  }
+
   autoPlayVideo() {
     this.videoJsPlayer.ready(() => {
       this.videoJsPlayer

diff --git a/src/lib/vast.js b/src/lib/vast.js
@@ -101,24 +101,24 @@ export default class Vast {
     return this.loadedElements['TrackingEvents'].addImpressionTrackingImagesFor(eventName, doc);
   }
 
-  applyToVideoElementAsPreroll(videoElement) {
+  applyToVideoElementAsPreroll(videoElement, opts = {}) {
     const vea = new VideoElementApplication({ vast: this, videoElement: videoElement });
-    vea.applyAsPreroll();
+    vea.applyAsPreroll(opts);
   }
 
-  applyToVideoElement(videoElement) {
+  applyToVideoElement(videoElement, opts = {}) {
     const videoElApplication = new VideoElementApplication({ vast: this, videoElement: videoElement });
-    videoElApplication.applyAsPrimary();
+    videoElApplication.applyAsPrimary(opts);
   }
 
-  applyToVideoJsAsPreroll(videoJsPlayer) {
+  applyToVideoJsAsPreroll(videoJsPlayer, opts = {}) {
     const videoJsApplication = new VideoJsApplication({ vast: this, videoJsPlayer: videoJsPlayer });
-    videoJsApplication.applyAsPreroll();
+    videoJsApplication.applyAsPreroll(opts);
   }
 
-  applyToVideoJs(videoJsPlayer) {
+  applyToVideoJs(videoJsPlayer, opts = {}) {
     const videoJsApplication = new VideoJsApplication({ vast: this, videoJsPlayer: videoJsPlayer });
-    videoJsApplication.applyAsPrimary();
+    videoJsApplication.applyAsPrimary(opts);
   }
 
   bestVideo(

diff --git a/test/assets/video-js-preroll.html b/test/assets/video-js-preroll.html
@@ -20,7 +20,9 @@
     var url =
       'https://ad.doubleclick.net/ddm/pfadx/N3493.3018656VOX-CONCERT/B22204404.238409492;sz=0x0;ord=%5Btimestamp%5D;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;dcmt=text/xml;dc_vast=3';
     v.loadRemoteVast(url).then(e => {
-      v.applyToVideoJsAsPreroll(vjs);
+      v.applyToVideoJsAsPreroll(vjs, {
+        autoplay: true,
+      });
     });
   </script>
 </html>
diff --git a/test/assets/video-js-primary.html b/test/assets/video-js-primary.html
@@ -25,7 +25,10 @@
     var url =
       'https://ad.doubleclick.net/ddm/pfadx/N3493.3018656VOX-CONCERT/B22204404.238409492;sz=0x0;ord=%5Btimestamp%5D;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;dcmt=text/xml;dc_vast=3';
     v.loadRemoteVast(url).then(e => {
-      v.applyToVideoJs(vjs);
+      v.applyToVideoJs(vjs, {
+        autoplay: true,
+        muted: true,
+      });
     });
   </script>
 </html>
diff --git a/test/assets/index.video-primary.html → test/assets/video-preroll.html b/test/assets/index.video-primary.html → test/assets/video-preroll.html
@@ -14,12 +14,14 @@
     </video>
   </body>
   <script>
-    var videoElement = document.querySelector('video')
-    var v = new ConcertVast()
+    var videoElement = document.querySelector('video');
+    var v = new ConcertVast();
     var url =
-      'https://ad.doubleclick.net/ddm/pfadx/N3493.3018656VOX-CONCERT/B22204404.238409492;sz=0x0;ord=%5Btimestamp%5D;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;dcmt=text/xml;dc_vast=3'
+      'https://ad.doubleclick.net/ddm/pfadx/N3493.3018656VOX-CONCERT/B22204404.238409492;sz=0x0;ord=%5Btimestamp%5D;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;dcmt=text/xml;dc_vast=3';
     v.loadRemoteVast(url).then(e => {
-      v.applyToVideoElement(videoElement)
-    })
+      v.applyToVideoElementAsPreroll(videoElement, {
+        autoplay: true,
+      });
+    });
   </script>
 </html>
diff --git a/test/assets/index.video-preroll.html → test/assets/video-primary.html b/test/assets/index.video-preroll.html → test/assets/video-primary.html
@@ -14,12 +14,14 @@
     </video>
   </body>
   <script>
-    var videoElement = document.querySelector('video')
-    var v = new ConcertVast()
+    var videoElement = document.querySelector('video');
+    var v = new ConcertVast();
     var url =
-      'https://ad.doubleclick.net/ddm/pfadx/N3493.3018656VOX-CONCERT/B22204404.238409492;sz=0x0;ord=%5Btimestamp%5D;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;dcmt=text/xml;dc_vast=3'
+      'https://ad.doubleclick.net/ddm/pfadx/N3493.3018656VOX-CONCERT/B22204404.238409492;sz=0x0;ord=%5Btimestamp%5D;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;dcmt=text/xml;dc_vast=3';
     v.loadRemoteVast(url).then(e => {
-      v.applyToVideoElementAsPreroll(videoElement)
-    })
+      v.applyToVideoElement(videoElement, {
+        autoplay: true,
+      });
+    });
   </script>
 </html>