Merge pull request #419 from jwplayer/jwplayer7/vast-fix-and-ads-cont…

…rolbar Ads control bar styled and Fixes some VAST setup issues
jwplayer · May 1, 2015 · 3663775 · 3663775
2 parents a16f522 + 2d5076f
commit 3663775
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 31 deletions.
diff --git a/src/css/flags/ads.less b/src/css/flags/ads.less
@@ -0,0 +1,21 @@
+.jwplayer.jw-flag-ads {
+    .jw-controlbar {
+        .jw-icon-inline,
+        .jw-icon-tooltip,
+        .jw-text,
+        .jw-slider-horizontal {
+            display: none;
+        }
+
+        .jw-playback-toggle-icon,
+        .jw-icon-volume,
+        .jw-volume,
+        .jw-icon-fullscreen {
+            display: inline-block;
+        }
+
+        .jw-alt-text {
+            display: inline;
+        }
+    }
+}
diff --git a/src/css/states/audioplayer.less → src/css/flags/audioplayer.less b/src/css/states/audioplayer.less → src/css/flags/audioplayer.less
diff --git a/src/css/states/fullscreen.less → src/css/flags/fullscreen.less b/src/css/states/fullscreen.less → src/css/flags/fullscreen.less
diff --git a/src/css/flags/live.less b/src/css/flags/live.less
@@ -0,0 +1,10 @@
+.jwplayer.jw-flag-live {
+    .jw-controlbar {
+        .jw-time {
+            display: none;
+        }
+        .jw-alt-text {
+            display: inline;
+        }
+    }
+}
diff --git a/src/css/imports/controlbar.less b/src/css/imports/controlbar.less
@@ -37,9 +37,13 @@
     width: 100%;
     padding: 0 @ui-padding;
 
-    .jw-time {
+    .jw-time, .jw-alt-text {
         padding: 0;
     }
+
+    .jw-alt-text {
+        display: none;
+    }
 }
 
 .jw-controlbar .jw-controlbar--left-group,

diff --git a/src/css/jwplayer.less b/src/css/jwplayer.less
@@ -21,5 +21,7 @@
 @import "states/buffering.less";
 @import "states/complete.less";
 
-@import "states/audioplayer.less";
-@import "states/fullscreen.less";
+@import "flags/audioplayer.less";
+@import "flags/fullscreen.less";
+@import "flags/live.less";
+@import "flags/ads.less";
diff --git a/src/css/skins-test.less b/src/css/skins-test.less
@@ -3,6 +3,7 @@
 @import "imports/reset.less";
 @import "imports/icons.less";
 
+// UI Components
 @import "imports/jwplayerelement.less";
 @import "imports/display.less";
 @import "imports/controlbar.less";
@@ -15,11 +16,15 @@
 @import "imports/rightclick.less";
 @import "imports/logo.less";
 
+// States
 @import "states/idle.less";
 @import "states/playing.less";
 @import "states/paused.less";
 @import "states/buffering.less";
 @import "states/complete.less";
 
-@import "states/audioplayer.less";
-@import "states/fullscreen.less";
+// Flags
+@import "flags/audioplayer.less";
+@import "flags/fullscreen.less";
+@import "flags/live.less";
+@import "flags/ads.less";
diff --git a/src/js/controller/instream.js b/src/js/controller/instream.js
@@ -117,7 +117,7 @@ define([
                 index: _arrayIndex
             }, true);
 
-            var controlbar = document.getElementById(_model.id + '_controlbar');
+            var controlbar = _view.element().getElementsByClassName('jw-controlbar')[0];
             var bottom = 10 + utils.bounds(_view.controlsContainer()).bottom - utils.bounds(controlbar).top;
 
             // Copy the playlist item passed in and make sure it's formatted as a proper playlist item
@@ -199,8 +199,10 @@ define([
                 return;
             }
 
-            var skipElem = _skipButton.element();
-            _view.controlsContainer().removeChild(skipElem);
+            if(_skipButton){
+                var skipElem = _skipButton.element();
+                _view.controlsContainer().removeChild(skipElem);
+            }
 
             _adModel.off('fullscreenchange', _nativeFullscreenHandler);
             clearTimeout(_completeTimeoutId);
@@ -216,7 +218,8 @@ define([
             _adModel.off();
 
             // Return the view to its normal state
-            _view.destroyInstream(_adModel.getVideo().isAudioFile());
+            var adsVideo = _adModel.getVideo();
+            _view.destroyInstream((adsVideo) ? adsVideo.isAudioFile() : false);
             if (_view.displayComp()) {
                 if (_oldProvider && _oldProvider.parentElement) {
                     _oldProvider.parentElement.removeEventListener('click', _view.displayComp().clickHandler);
@@ -270,7 +273,7 @@ define([
 
         /** Set custom text in the controlbar **/
         _this.instreamSetText = function(text) {
-            _view.setInstreamText(text);
+            _view.setAltText(text);
         };
 
         _this.instreamState = function() {

diff --git a/src/js/view/controlbar.js b/src/js/view/controlbar.js
@@ -79,7 +79,7 @@ define([
             var volumeTooltip = new VolumeTooltip(this._model, 'jw-icon-volume');
 
             this.elements = {
-                alt: text('jw-alttext'),
+                alt: text('jw-alt-text'),
                 play: button('jw-playback-toggle-icon', this._api.play),
                 prev: button('jw-icon-prev', this._api.playlistPrev),
                 next: button('jw-icon-next', this._api.playlistNext),
@@ -108,7 +108,6 @@ define([
                 ],
                 right: [
                     this.elements.duration,
-                    this.elements.volumetooltip,
                     this.elements.hd,
                     this.elements.cc,
                     this.elements.mute,
@@ -201,12 +200,6 @@ define([
             this.elements.duration.innerHTML = '';
             this.elements.elapsed.innerHTML = '';
 
-            // Hide the time slider until we know if it is live or not
-            utils.addClass(this.elements.time.element(), 'jw-hidden');
-            utils.addClass(this.elements.alt, 'jw-hidden');
-
-            this._model.mediaModel.on('change:isLive', this.onLiveChange, this);
-
             this._model.mediaModel.on('change:levels', function(model, levels) {
                 this.elements.hd.setup(levels, model.get('currentLevel'));
             }, this);
@@ -238,23 +231,29 @@ define([
         onFullscreen : function(model, val) {
             utils.toggleClass(this.elements.fullscreen.element(), 'jw-off', val);
         },
-        onLiveChange : function(model, isLive) {
-            this.elements.alt.innerHTML = 'Live Broadcast';
-
-            utils.toggleClass(this.elements.time.element(), 'jw-hidden', isLive);
-            utils.toggleClass(this.elements.alt, 'jw-hidden', !isLive);
-        },
 
         element: function() {
             return this.el;
         },
 
         redraw : utils.noop,
+        instreamMode: utils.noop,
         adMode : utils.noop,
         hide : utils.noop,
         show : utils.noop,
         audioMode : utils.noop,
-        hideFullscreen : utils.noop
+        hideFullscreen : utils.noop,
+        setAltText : function(altText) {
+            this.elements.alt.innerHTML = altText;
+        },
+        addCues : function(cues) {
+            if (this.elements.time) {
+                _.each(cues, function(ele){
+                    this.elements.time.addCue(ele);
+                }, this);
+                this.elements.time.drawCues();
+            }
+        }
     });
 
     return Controlbar;

diff --git a/src/js/view/view.js b/src/js/view/view.js
@@ -275,20 +275,24 @@ define([
             }
             //this for googima, after casting, to get the state right.
             _api.onAdPlay(function() {
+                utils.addClass(_playerElement, 'jw-flag-ads');
                 _controlbar.adMode(true);
                 _updateState(states.PLAYING);
 
                 // For Vast to hide controlbar if no mouse movement
                 _resetTapTimer();
             });
             _api.onAdSkipped(function() {
+                utils.removeClass(_playerElement, 'jw-flag-ads');
                 _controlbar.adMode(false);
             });
             _api.onAdComplete(function() {
+                utils.removeClass(_playerElement, 'jw-flag-ads');
                 _controlbar.adMode(false);
             });
             // So VAST will be in correct state when ad errors out from unknown filetype
             _api.onAdError(function() {
+                utils.removeClass(_playerElement, 'jw-flag-ads');
                 _controlbar.adMode(false);
             });
 
@@ -549,7 +553,7 @@ define([
                     _castAdsStarted();
                 }
 
-                _controlbar.setText(evt.message);
+                this.setAltText(evt.message);
 
                 // clickthrough callback
                 var clickAd = evt.onClick;
@@ -573,13 +577,15 @@ define([
 
         function _castAdsStarted() {
             _controlbar.instreamMode(true);
+            utils.addClass(_playerElement, 'jw-flag-ads');
             _controlbar.adMode(true);
             _controlbar.show(true);
         }
 
         function _castAdsEnded() {
             // controlbar reset
-            _controlbar.setText('');
+            this.setAltText('');
+            utils.removeClass(_playerElement, 'jw-flag-ads');
             _controlbar.adMode(false);
             _controlbar.instreamMode(false);
             _controlbar.show(true);
@@ -675,7 +681,7 @@ define([
             }
             if (_logo) {
                 _logo.offset(_controlbar && _logo.position().indexOf('bottom') >= 0 ?
-                    _controlbar.height() + _controlbar.margin() : 0);
+                    _controlbar.element().clientHeight : 0);
             }
 
             _checkAudioMode(height);
@@ -920,6 +926,10 @@ define([
             if (_castDisplay) {
                 _castDisplay.setState(_model.state);
             }
+            _model.mediaModel.on('change:isLive', function(model, isLive){
+                utils.toggleClass(_playerElement, 'jw-flag-live', isLive);
+                _this.setAltText((isLive) ? 'Live Broadcast' : '');
+            }, this);
         }
 
         /**
@@ -1022,12 +1032,13 @@ define([
             _instreamModel.on('change:controls', _onChangeControls);
             _instreamMode = true;
             _controlbar.instreamMode(true);
+            utils.addClass(_playerElement, 'jw-flag-ads');
             _controlbar.adMode(true);
             _controlbar.show(true);
         };
 
-        this.setInstreamText = function(text) {
-            _controlbar.setText(text);
+        this.setAltText = function(text) {
+            _controlbar.setAltText(text);
         };
 
         this.showInstream = function() {
@@ -1040,7 +1051,8 @@ define([
 
         this.destroyInstream = function() {
             _instreamMode = false;
-            _controlbar.setText('');
+            this.setAltText('');
+            utils.removeClass(_playerElement, 'jw-flag-ads');
             _controlbar.adMode(false);
             _controlbar.instreamMode(false);
             _controlbar.show(true);