Skip to content

Commit

Permalink
Controlbar fades on desktop. Doesn't fade on mobile.
Browse files Browse the repository at this point in the history
Removes the display: table; on the jw-flag-ads since it was preventing the controller from naturally being removed when jw-flag-user-inactive was applied.  It was previously there to ensure that the control bar was displayed when we calculate the position of the ad skip button, but that is now the responsibility of the skin.
added a flag for mobile that will make sure that the control bar is displayed during ads.  this flag toggles on and off when its mobile and we're entering instream mode.  _userActivity fired at the beginning of instream mode so that the user can see the new controller state and know its an ad.
!isMobile is added to _componentFadeListeners as we aren't concerned about adding mouse listeners on mobile and it caused a rare issue if the user clicks the control bar a lot during an ad where the control bar wouldn't fade away.

[Finishes #97402648]
  • Loading branch information
Kyle Aurand authored and Kyle Aurand committed Jun 24, 2015
1 parent 67c7afa commit b5d56b0
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 5 deletions.
10 changes: 7 additions & 3 deletions src/css/flags/ads.less
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@
}

.jw-controlbar {
display: table;

.jw-icon-inline,
.jw-icon-tooltip,
.jw-text,
Expand Down Expand Up @@ -38,6 +36,12 @@

.jwplayer.jw-flag-ads-hide-controls {
.jw-controls {
display : none !important;
display : none !important;
}
}

.jwplayer.jw-flag-ads-mobile {
.jw-controlbar {
display: table;
}
}
3 changes: 2 additions & 1 deletion src/css/flags/user-inactive.less
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.jw-flag-user-inactive.jw-state-playing {
.jw-controlbar, .jw-dock {
.jw-controlbar,
.jw-dock {
display : none;
}

Expand Down
9 changes: 8 additions & 1 deletion src/js/view/view.js
Original file line number Diff line number Diff line change
Expand Up @@ -396,7 +396,7 @@ define([
}

function _componentFadeListeners(comp) {
if (comp) {
if (comp && !_isMobile) {
comp.element().addEventListener('mousemove', _overControlElement, false);
comp.element().addEventListener('mouseout', _offControlElement, false);
}
Expand Down Expand Up @@ -960,6 +960,12 @@ define([
utils.addClass(_playerElement, 'jw-flag-ads');
// don't trigger api play/pause on display click
_displayClickHandler.setAlternateClickHandlers(utils.noop, _api.setFullscreen);

// trigger _userActivity to display the UI temporarily for the start of the ad
_userActivity();
if(_isMobile) {
utils.addClass(_playerElement, 'jw-flag-ads-mobile');
}
};

this.setAltText = function(text) {
Expand All @@ -978,6 +984,7 @@ define([
}
this.setAltText('');
utils.removeClass(_playerElement, 'jw-flag-ads');
utils.removeClass(_playerElement, 'jw-flag-ads-mobile');
utils.removeClass(_playerElement, 'jw-flag-ads-hide-controls');
if (_model.getVideo) {
var provider = _model.getVideo();
Expand Down

0 comments on commit b5d56b0

Please sign in to comment.