From 3b15c484c153b881eae108fca6f81344eee3aa91 Mon Sep 17 00:00:00 2001 From: Kyle Aurand Date: Mon, 17 Aug 2015 18:30:49 -0400 Subject: [PATCH 1/4] JW7-1279 JW7-1281 Player becomes compact when < 400 px wide Compact player mode is entered when the player is less than 400px wide. Compact mode is applied when the size of the player changes, or when orientation changes. 400px wide seems more useful than 320px wide. This is at least until the icon drawer is added. --- src/css/flags/compact-player.less | 9 +++++++++ src/css/jwplayer.less | 1 + src/js/view/view.js | 13 ++++++++++++- 3 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 src/css/flags/compact-player.less diff --git a/src/css/flags/compact-player.less b/src/css/flags/compact-player.less new file mode 100644 index 0000000000..22b0a4f2ec --- /dev/null +++ b/src/css/flags/compact-player.less @@ -0,0 +1,9 @@ +.jw-flag-compact-player { + .jw-icon-playlist, + .jw-icon-next, + .jw-icon-prev, + .jw-text-elapsed, + .jw-text-duration { + display: none; + } +} \ No newline at end of file diff --git a/src/css/jwplayer.less b/src/css/jwplayer.less index 7a516808ed..43f274efe6 100755 --- a/src/css/jwplayer.less +++ b/src/css/jwplayer.less @@ -34,6 +34,7 @@ @import "flags/rightclick-open"; @import "flags/controls-disabled"; @import "flags/touch"; +@import "flags/compact-player"; // Skins @import "skins/seven"; diff --git a/src/js/view/view.js b/src/js/view/view.js index 37d1f5baf6..7030d12cf2 100644 --- a/src/js/view/view.js +++ b/src/js/view/view.js @@ -52,6 +52,8 @@ define([ _title, _captionsRenderer, _audioMode, + _compactMode = false, + _compactModeMaxSize = 400, _errorState = false, _showing = false, _replayState, @@ -215,6 +217,7 @@ define([ var bounds = _bounds(_playerElement), containerWidth = Math.round(bounds.width), containerHeight = Math.round(bounds.height); + if (!document.body.contains(_playerElement)) { window.removeEventListener('resize', _responsiveListener); if (_isMobile) { @@ -226,6 +229,7 @@ define([ _lastHeight = containerHeight; clearTimeout(_resizeMediaTimeout); _resizeMediaTimeout = setTimeout(_resizeMedia, 50); + _this.trigger(events.JWPLAYER_RESIZE, { width: containerWidth, height: containerHeight @@ -669,6 +673,12 @@ define([ utils.toggleClass(_playerElement, 'jw-flag-audio-player', _audioMode); } + function _checkCompactMode(containerWidth) { + _compactMode = containerWidth <= _compactModeMaxSize; + + utils.toggleClass(_playerElement, 'jw-flag-compact-player', _compactMode); + } + function _isAudioMode(height) { if (_model.get('aspectratio')) { return false; @@ -717,6 +727,8 @@ define([ _resizeMediaTimeout = setTimeout(_resizeMedia, 250); } _captionsRenderer.resize(); + + _checkCompactMode(width); } this.resize = function(width, height) { @@ -819,7 +831,6 @@ define([ if (_castDisplay) { _castDisplay.setState(_model.get('state')); } - _model.mediaModel.on('change:mediaType', function(model, val) { var isAudioFile = (val ==='audio'); utils.toggleClass(_playerElement, 'jw-flag-media-audio', isAudioFile); From 4ede484486ae035afecacef651af0de3b4190a94 Mon Sep 17 00:00:00 2001 From: Kyle Aurand Date: Fri, 21 Aug 2015 15:41:46 -0400 Subject: [PATCH 2/4] JW7-1282 Icon Drawer in Compact Mode Drawer for extra icons to be placed into when in compact mode. It toggles when clicking on the more/close icon and can mouse open in small players. Icons do not currently get taken back out of the drawer if the player gets large enough that it does not need compact mode anymore. JW7-1283 will complete that task --- src/css/imports/controlbar.less | 5 +++ src/css/imports/tooltip.less | 16 ++++++++ src/js/view/components/drawer.js | 67 +++++++++++++++++++++++++++++++ src/js/view/components/tooltip.js | 11 +++-- src/js/view/controlbar.js | 47 ++++++++++++++++++++-- src/js/view/view.js | 7 ++-- 6 files changed, 142 insertions(+), 11 deletions(-) create mode 100644 src/js/view/components/drawer.js diff --git a/src/css/imports/controlbar.less b/src/css/imports/controlbar.less index 2205cc406b..f9ad55f041 100755 --- a/src/css/imports/controlbar.less +++ b/src/css/imports/controlbar.less @@ -12,6 +12,11 @@ .jw-hidden { display: none; } + + &.jw-drawer-expanded .jw-controlbar-left-group, + &.jw-drawer-expanded .jw-controlbar-center-group { + opacity: 0; + } } .jw-background-color { diff --git a/src/css/imports/tooltip.less b/src/css/imports/tooltip.less index 45f529c803..009061e108 100644 --- a/src/css/imports/tooltip.less +++ b/src/css/imports/tooltip.less @@ -1,4 +1,5 @@ @import "vars"; +@import "../imports/icons"; .jw-icon-tooltip.jw-open .jw-overlay { opacity: 1; @@ -9,6 +10,21 @@ display: none; } +.jw-overlay-horizontal { + display: none; +} + +.jw-icon-tooltip.jw-open-drawer { + .jw-icon-close; +} + +.jw-icon-tooltip.jw-open-drawer .jw-overlay-horizontal { + opacity: 1; + display: inline-block; + vertical-align: top; +} + + .jw-overlay:after { position: absolute; bottom: -0.5em; diff --git a/src/js/view/components/drawer.js b/src/js/view/components/drawer.js new file mode 100644 index 0000000000..c9724fd937 --- /dev/null +++ b/src/js/view/components/drawer.js @@ -0,0 +1,67 @@ +define([ + 'view/components/tooltip', + 'utils/helpers', + 'utils/underscore', + 'utils/ui' +], function(Tooltip, utils, _, UI) { + var Drawer = Tooltip.extend({ + constructor: function(name) { + this.constructor.__super__.constructor(name); + + this.container.className = 'jw-overlay-horizontal jw-reset'; + this.openClass = 'jw-open-drawer'; + }, + setup : function (list, isCompactMode) { + if(!this.iconUI){ + this.iconUI = new UI(this.el); + + this.toggleOpenStateListener = this.toggleOpenState.bind(this); + this.openTooltipListener = this.openTooltip.bind(this); + this.closeTooltipListener = this.closeTooltip.bind(this); + } + + this.reset(); + + list = _.isArray(list) ? list : []; + + var hasActiveContents = _.any(list, function (ele) { + return ele.hasContent(); + }); + + utils.toggleClass(this.el, 'jw-hidden', !isCompactMode || !hasActiveContents); + + if (isCompactMode && hasActiveContents) { + utils.removeClass(this.el, 'jw-off'); + + this.iconUI.on('tap', function (evt) { + if (evt.target === this.el) { + this.isOpen = !this.isOpen; + utils.toggleClass(this.el, this.openClass, this.isOpen); + this.trigger('drawer-open', {'isOpen': this.isOpen}); + } + }, this); + + this.el.addEventListener('mouseover', this.openTooltipListener); + this.el.addEventListener('mouseout', this.closeTooltipListener); + + _.each(list, function (menu) { + this.container.appendChild(menu.el); + }, this); + } + // else, spit the menus back out + }, + reset : function() { + utils.addClass(this.el, 'jw-off'); + this.iconUI.off(); + if(this.contentUI) { + this.contentUI.off().destroy(); + } + this.removeContent(); + + this.el.removeEventListener('mouseover', this.openTooltipListener); + this.el.removeEventListener('mouseout', this.closeTooltipListener); + } + }); + + return Drawer; +}); diff --git a/src/js/view/components/tooltip.js b/src/js/view/components/tooltip.js index ccd488f6bc..1586cf4268 100644 --- a/src/js/view/components/tooltip.js +++ b/src/js/view/components/tooltip.js @@ -9,6 +9,8 @@ define([ this.el.className = 'jw-icon jw-icon-tooltip ' + name + ' jw-button-color jw-reset jw-hidden'; this.container = document.createElement('div'); this.container.className = 'jw-overlay jw-reset'; + this.openClass = 'jw-open'; + this.el.appendChild(this.container); }, @@ -26,20 +28,23 @@ define([ this.content = null; } }, + hasContent: function(){ + return !!this.content; + }, element: function(){ return this.el; }, openTooltip: function() { this.isOpen = true; - utils.toggleClass(this.el, 'jw-open', this.isOpen); + utils.toggleClass(this.el, this.openClass, this.isOpen); }, closeTooltip: function() { this.isOpen = false; - utils.toggleClass(this.el, 'jw-open', this.isOpen); + utils.toggleClass(this.el, this.openClass, this.isOpen); }, toggleOpenState: function(){ this.isOpen = !this.isOpen; - utils.toggleClass(this.el, 'jw-open', this.isOpen); + utils.toggleClass(this.el, this.openClass, this.isOpen); } }); diff --git a/src/js/view/controlbar.js b/src/js/view/controlbar.js index 742e9f9bd1..d90fa47f44 100644 --- a/src/js/view/controlbar.js +++ b/src/js/view/controlbar.js @@ -7,8 +7,9 @@ define([ 'view/components/timeslider', 'view/components/menu', 'view/components/playlist', - 'view/components/volumetooltip' -], function(utils, _, Events, UI, Slider, TimeSlider, Menu, Playlist, VolumeTooltip) { + 'view/components/volumetooltip', + 'view/components/drawer' +], function(utils, _, Events, UI, Slider, TimeSlider, Menu, Playlist, VolumeTooltip, Drawer) { function button(icon, apiAction) { var element = document.createElement('div'); @@ -63,6 +64,9 @@ define([ function Controlbar(_api, _model) { this._api = _api; this._model = _model; + this._isMobile = utils.isMobile(); + this._isCompactMode = false; + this._compactModeMaxSize = 400; this.setup(); } @@ -76,18 +80,23 @@ define([ build : function() { var timeSlider = new TimeSlider(this._model, this._api), + drawer = new Drawer('jw-icon-more'), playlistTooltip, volumeSlider, volumeTooltip, muteButton; + drawer.on('drawer-open', function(props){ + utils.toggleClass(this.el, 'jw-drawer-expanded', props.isOpen); + }, this); + // Create the playlistTooltip as long as visualplaylist from the config is not false if(this._model.get('visualplaylist') !== false) { playlistTooltip = new Playlist('jw-icon-playlist'); } // Do not initialize volume sliders on mobile. - if(!utils.isMobile()){ + if(!this._isMobile){ muteButton = button('jw-icon-volume', this._api.setMute); volumeSlider = new Slider('jw-slider-volume', 'horizontal'); volumeTooltip = new VolumeTooltip(this._model, 'jw-icon-volume'); @@ -102,6 +111,7 @@ define([ elapsed: text('jw-text-elapsed'), time: timeSlider, duration: text('jw-text-duration'), + drawer: drawer, hd: menu('jw-icon-hd'), cc: menu('jw-icon-cc'), audiotracks: menu('jw-icon-audio-tracks'), @@ -126,6 +136,7 @@ define([ ], right: [ this.elements.duration, + this.elements.drawer, this.elements.hd, this.elements.cc, this.elements.audiotracks, @@ -135,6 +146,14 @@ define([ this.elements.volumetooltip, // this.elements.cast, // hidden for jw7.0 release this.elements.fullscreen + ], + drawer: [ + this.elements.hd, + this.elements.cc, + this.elements.audiotracks + //this.elements.mute, + //this.elements.volume, + //this.elements.volumetooltip ] }; @@ -143,6 +162,7 @@ define([ this.layout.left = _.compact(this.layout.left); this.layout.center = _.compact(this.layout.center); this.layout.right = _.compact(this.layout.right); + this.layout.drawer = _.compact(this.layout.drawer); this.el = document.createElement('div'); this.el.className = 'jw-controlbar jw-background-color jw-reset'; @@ -278,6 +298,12 @@ define([ this._model.mediaModel.on('change:currentAudioTrack', function(model, currentAudioTrack) { this.elements.audiotracks.selectItem(currentAudioTrack); }, this); + this._model.mediaModel.on('change:state', function(model, state) { + if(state === 'complete') { + this.elements.drawer.closeTooltip(); + utils.toggleClass(this.el, 'jw-drawer-expanded', false); + } + }, this); }, onVolume : function(model, pct) { this.renderVolume(model.get('mute'), pct); @@ -354,8 +380,21 @@ define([ }, this); this.elements.time.drawCues(); } + }, + isCompactMode : function(containerWidth) { + if(containerWidth <= this._compactModeMaxSize) { + return true; + } + + return false; + }, + setCompactMode : function(isCompact) { + this._isCompactMode = isCompact; + utils.toggleClass(this.el, 'jw-drawer-expanded', false); + + this.elements.drawer.setup(this.layout.drawer, isCompact); } }); return Controlbar; -}); +}); \ No newline at end of file diff --git a/src/js/view/view.js b/src/js/view/view.js index 7030d12cf2..a14109817e 100644 --- a/src/js/view/view.js +++ b/src/js/view/view.js @@ -52,8 +52,6 @@ define([ _title, _captionsRenderer, _audioMode, - _compactMode = false, - _compactModeMaxSize = 400, _errorState = false, _showing = false, _replayState, @@ -674,9 +672,10 @@ define([ } function _checkCompactMode(containerWidth) { - _compactMode = containerWidth <= _compactModeMaxSize; + var compactMode = _controlbar.isCompactMode(containerWidth); - utils.toggleClass(_playerElement, 'jw-flag-compact-player', _compactMode); + _controlbar.setCompactMode(compactMode); + utils.toggleClass(_playerElement, 'jw-flag-compact-player', compactMode); } function _isAudioMode(height) { From 200b9654509c92554db7128364e8937bb5f5db7e Mon Sep 17 00:00:00 2001 From: Kyle Aurand Date: Tue, 25 Aug 2015 11:07:54 -0400 Subject: [PATCH 3/4] JW7-1280 JW7-1283 Compact mode on small time slider The controlbar will determine when to enter an exit compact mode when resizing or when the player starts playing a new playlist item. Menus are returned to the controlbar after the compact mode is no longer necessary. Fix for using the constructor correctly. --- src/js/view/components/drawer.js | 2 +- src/js/view/controlbar.js | 55 ++++++++++++++++++++++++++------ src/js/view/view.js | 2 ++ 3 files changed, 48 insertions(+), 11 deletions(-) diff --git a/src/js/view/components/drawer.js b/src/js/view/components/drawer.js index c9724fd937..140259fc38 100644 --- a/src/js/view/components/drawer.js +++ b/src/js/view/components/drawer.js @@ -6,7 +6,7 @@ define([ ], function(Tooltip, utils, _, UI) { var Drawer = Tooltip.extend({ constructor: function(name) { - this.constructor.__super__.constructor(name); + Tooltip.call(this, name); this.container.className = 'jw-overlay-horizontal jw-reset'; this.openClass = 'jw-open-drawer'; diff --git a/src/js/view/controlbar.js b/src/js/view/controlbar.js index d90fa47f44..8dcc8e0abf 100644 --- a/src/js/view/controlbar.js +++ b/src/js/view/controlbar.js @@ -68,6 +68,9 @@ define([ this._isCompactMode = false; this._compactModeMaxSize = 400; + this._leftGroupExpandedSize = false; + this._rightGroupExpandedSize = false; + this.setup(); } @@ -136,10 +139,10 @@ define([ ], right: [ this.elements.duration, - this.elements.drawer, this.elements.hd, this.elements.cc, this.elements.audiotracks, + this.elements.drawer, this.elements.mute, this.elements.cast, this.elements.volume, @@ -167,13 +170,13 @@ define([ this.el = document.createElement('div'); this.el.className = 'jw-controlbar jw-background-color jw-reset'; - var leftGroup = buildGroup('left', this.layout.left); - var centerGroup = buildGroup('center', this.layout.center); - var rightGroup = buildGroup('right', this.layout.right); + this.elements.left = buildGroup('left', this.layout.left); + this.elements.center = buildGroup('center', this.layout.center); + this.elements.right = buildGroup('right', this.layout.right); - this.el.appendChild(leftGroup); - this.el.appendChild(centerGroup); - this.el.appendChild(rightGroup); + this.el.appendChild(this.elements.left); + this.el.appendChild(this.elements.center); + this.el.appendChild(this.elements.right); }, initialize : function() { @@ -278,6 +281,10 @@ define([ this.elements.duration.innerHTML = '00:00'; this.elements.elapsed.innerHTML = '00:00'; + this._leftGroupExpandedSize = false; + this._rightGroupExpandedSize = false; + this.setCompactMode(false); + var itemIdx = model.get('item'); if(this.elements.playlist) { this.elements.playlist.selectItem(itemIdx); @@ -382,17 +389,45 @@ define([ } }, isCompactMode : function(containerWidth) { - if(containerWidth <= this._compactModeMaxSize) { - return true; + if(this.element().offsetWidth > 0){ + if (!this._leftGroupExpandedSize && this.elements.left.offsetWidth) { + this._leftGroupExpandedSize = this.elements.left.offsetWidth; + this._rightGroupExpandedSize = this.elements.right.offsetWidth; + } + + var timeSliderSize = this.elements.time.el.offsetWidth, + timeSliderShare = timeSliderSize / containerWidth, + containerRequiredSize = this._leftGroupExpandedSize + this._rightGroupExpandedSize + + (this.elements.center.offsetWidth - this.elements.time.el.offsetWidth); + + if(!this._isCompactMode){ + // Enter if we're in a small player or our timeslider is too small. + if( containerWidth <= this._compactModeMaxSize || (timeSliderSize && timeSliderShare < 0.25) ){ + return true; + } + } else { + // If we're in compact mode and we have enough space to exit it, then do so + if( containerWidth > this._compactModeMaxSize && + (containerWidth - containerRequiredSize) / containerWidth >= 0.275) { + return false; + } + } } - return false; + // if no conditions to exit a mode occur, or we have no info, then stay in the current mode + return this._isCompactMode; }, setCompactMode : function(isCompact) { this._isCompactMode = isCompact; utils.toggleClass(this.el, 'jw-drawer-expanded', false); this.elements.drawer.setup(this.layout.drawer, isCompact); + + if(!isCompact){ + _.each(this.layout.drawer,function(ele){ + this.elements.right.insertBefore(ele.el, this.elements.drawer.el); + }, this); + } } }); diff --git a/src/js/view/view.js b/src/js/view/view.js index a14109817e..a6b8819429 100644 --- a/src/js/view/view.js +++ b/src/js/view/view.js @@ -816,6 +816,8 @@ define([ _showing = true; utils.removeClass(_playerElement, 'jw-flag-user-inactive'); + _checkCompactMode(_videoLayer.clientWidth); + clearTimeout(_controlsTimeout); _controlsTimeout = setTimeout(_userInactive, _timeoutDuration); } From a4059cfac0666f5d06e2a62d868f5f8098b49554 Mon Sep 17 00:00:00 2001 From: Kyle Aurand Date: Tue, 25 Aug 2015 17:48:06 -0400 Subject: [PATCH 4/4] Modified to have compactUI a model property. Converted to listeners as appropriate. Less file targeting fix. --- src/css/imports/tooltip.less | 2 +- src/js/controller/model.js | 1 + src/js/view/controlbar.js | 26 +++++++++++--------------- src/js/view/view.js | 16 +++++++--------- test/manual/mobile.html | 4 ++-- 5 files changed, 22 insertions(+), 27 deletions(-) diff --git a/src/css/imports/tooltip.less b/src/css/imports/tooltip.less index 009061e108..a36cf073c7 100644 --- a/src/css/imports/tooltip.less +++ b/src/css/imports/tooltip.less @@ -1,5 +1,5 @@ @import "vars"; -@import "../imports/icons"; +@import "icons"; .jw-icon-tooltip.jw-open .jw-overlay { opacity: 1; diff --git a/src/js/controller/model.js b/src/js/controller/model.js index 98888b182f..32aef27f60 100644 --- a/src/js/controller/model.js +++ b/src/js/controller/model.js @@ -37,6 +37,7 @@ define([ // Initial state, upon setup state: states.IDLE, fullscreen: false, + compactUI: false, scrubbing : false, duration: 0, position: 0, diff --git a/src/js/view/controlbar.js b/src/js/view/controlbar.js index 8dcc8e0abf..0a50faf8b2 100644 --- a/src/js/view/controlbar.js +++ b/src/js/view/controlbar.js @@ -65,7 +65,6 @@ define([ this._api = _api; this._model = _model; this._isMobile = utils.isMobile(); - this._isCompactMode = false; this._compactModeMaxSize = 400; this._leftGroupExpandedSize = false; @@ -203,6 +202,7 @@ define([ this._model.on('change:fullscreen', this.onFullscreen, this); this._model.on('change:captionsList', this.onCaptionsList, this); this._model.on('change:captionsIndex', this.onCaptionsIndex, this); + this._model.on('change:compactUI', this.onCompactUI, this); // Event listeners @@ -283,7 +283,7 @@ define([ this._leftGroupExpandedSize = false; this._rightGroupExpandedSize = false; - this.setCompactMode(false); + this._model.set('compactUI', false); var itemIdx = model.get('item'); if(this.elements.playlist) { @@ -388,7 +388,7 @@ define([ this.elements.time.drawCues(); } }, - isCompactMode : function(containerWidth) { + checkCompactMode : function(containerWidth) { if(this.element().offsetWidth > 0){ if (!this._leftGroupExpandedSize && this.elements.left.offsetWidth) { this._leftGroupExpandedSize = this.elements.left.offsetWidth; @@ -400,25 +400,21 @@ define([ containerRequiredSize = this._leftGroupExpandedSize + this._rightGroupExpandedSize + (this.elements.center.offsetWidth - this.elements.time.el.offsetWidth); - if(!this._isCompactMode){ - // Enter if we're in a small player or our timeslider is too small. - if( containerWidth <= this._compactModeMaxSize || (timeSliderSize && timeSliderShare < 0.25) ){ - return true; - } - } else { + if(this._model.get('compactUI')){ // If we're in compact mode and we have enough space to exit it, then do so if( containerWidth > this._compactModeMaxSize && (containerWidth - containerRequiredSize) / containerWidth >= 0.275) { - return false; + this._model.set('compactUI', false); + } + } else { + // Enter if we're in a small player or our timeslider is too small. + if( containerWidth <= this._compactModeMaxSize || (timeSliderSize && timeSliderShare < 0.25) ){ + this._model.set('compactUI', true); } } } - - // if no conditions to exit a mode occur, or we have no info, then stay in the current mode - return this._isCompactMode; }, - setCompactMode : function(isCompact) { - this._isCompactMode = isCompact; + onCompactUI : function(model, isCompact) { utils.toggleClass(this.el, 'jw-drawer-expanded', false); this.elements.drawer.setup(this.layout.drawer, isCompact); diff --git a/src/js/view/view.js b/src/js/view/view.js index a6b8819429..25b26b22e8 100644 --- a/src/js/view/view.js +++ b/src/js/view/view.js @@ -413,6 +413,10 @@ define([ utils.addClass(_playerElement, 'jw-stretch-' + newVal); } + function _onCompactUIChange(model, newVal) { + utils.toggleClass(_playerElement, 'jw-flag-compact-player', newVal); + } + function _componentFadeListeners(comp) { if (comp && !_isMobile) { comp.element().addEventListener('mousemove', _overControlElement, false); @@ -539,6 +543,7 @@ define([ _controlbar = new Controlbar(_api, _model); _controlbar.on(events.JWPLAYER_USER_ACTION, _userActivity); _model.on('change:scrubbing', _dragging); + _model.on('change:compactUI', _onCompactUIChange); _controlsLayer.appendChild(_controlbar.element()); @@ -671,13 +676,6 @@ define([ utils.toggleClass(_playerElement, 'jw-flag-audio-player', _audioMode); } - function _checkCompactMode(containerWidth) { - var compactMode = _controlbar.isCompactMode(containerWidth); - - _controlbar.setCompactMode(compactMode); - utils.toggleClass(_playerElement, 'jw-flag-compact-player', compactMode); - } - function _isAudioMode(height) { if (_model.get('aspectratio')) { return false; @@ -727,7 +725,7 @@ define([ } _captionsRenderer.resize(); - _checkCompactMode(width); + _controlbar.checkCompactMode(width); } this.resize = function(width, height) { @@ -816,7 +814,7 @@ define([ _showing = true; utils.removeClass(_playerElement, 'jw-flag-user-inactive'); - _checkCompactMode(_videoLayer.clientWidth); + _controlbar.checkCompactMode(_videoLayer.clientWidth); clearTimeout(_controlsTimeout); _controlsTimeout = setTimeout(_userInactive, _timeoutDuration); diff --git a/test/manual/mobile.html b/test/manual/mobile.html index dc9a095d78..6c52060bcc 100644 --- a/test/manual/mobile.html +++ b/test/manual/mobile.html @@ -8,7 +8,7 @@ @@ -134,7 +134,7 @@

Large Audio Player

file: 'http://content.bitsontherun.com/videos/3XnJSIm4-I3ZmuSFT.m4a', image: 'http://content.bitsontherun.com/thumbs/3XnJSIm4-480.jpg', height: "65", - width: "300" + width: "100%" }); })(window.jwplayer);