From 4a7aee1dafcff2697789b326e6d103273d4c58aa Mon Sep 17 00:00:00 2001 From: Joey Parrish Date: Thu, 16 Jan 2020 14:59:17 -0800 Subject: [PATCH] Customize default UI config for desktop/mobile To match Chrome native controls, the default controls for desktop will now contain the small play/pause button, but default controls for mobile will now contain the large play/pause button. Mobile controls will also not contain the volume button. This removes several CSS-based versions of these things in preference for configuration. Apps can still override the defaults, no matter the platform. Apps can also make their own mobile-based config choices in JS by checking video.ui.isMobile() or change styles in CSS using ".shaka-mobile". Change-Id: I4fb8391f7f3727c7086cd3bca2b1d5c93bd9e856 --- demo/cast_receiver/receiver_app.css | 6 ---- demo/cast_receiver/receiver_app.js | 2 ++ test/ui/ui_customization_unit.js | 55 +++++++++++++++-------------- test/ui/ui_unit.js | 22 +++++++++--- ui/less/buttons.less | 7 ---- ui/less/range_elements.less | 5 --- ui/ui.js | 17 +++++++-- 7 files changed, 62 insertions(+), 52 deletions(-) diff --git a/demo/cast_receiver/receiver_app.css b/demo/cast_receiver/receiver_app.css index 17eea73b0..9388aa010 100644 --- a/demo/cast_receiver/receiver_app.css +++ b/demo/cast_receiver/receiver_app.css @@ -47,12 +47,6 @@ body { margin: auto; } -/* Until the UI gives us a way to disable the giant play/pause button, do it in - * CSS instead. */ -.shaka-play-button { - display: none; -} - /* The UI default style for fullscreen is to make the font size relative to the * window height. That is also appropriate for the cast receiver experience. * Since playback here is not technically in fullscreen mode, we just duplicate diff --git a/demo/cast_receiver/receiver_app.js b/demo/cast_receiver/receiver_app.js index b4145078b..1de251fd2 100644 --- a/demo/cast_receiver/receiver_app.js +++ b/demo/cast_receiver/receiver_app.js @@ -45,6 +45,8 @@ class ShakaReceiverApp { // Make sure we don't show extra UI elements we don't need on the TV. ui.configure({ fadeDelay: 3, + addBigPlayButton: false, + addSeekBar: true, controlPanelElements: [ 'play_pause', 'time_and_duration', diff --git a/test/ui/ui_customization_unit.js b/test/ui/ui_customization_unit.js index 640dfbd3a..f70ff9615 100644 --- a/test/ui/ui_customization_unit.js +++ b/test/ui/ui_customization_unit.js @@ -57,40 +57,43 @@ describe('UI Customization', () => { UiUtils.confirmElementMissing(container, 'shaka-caption-button'); }); - it('seek bar is not created unless configured', () => { - const config = {addSeekBar: false}; - UiUtils.createUIThroughAPI(container, video, config); - + it('seek bar only created when configured', () => { + UiUtils.createUIThroughAPI(container, video, {addSeekBar: false}); UiUtils.confirmElementMissing(container, 'shaka-seek-bar'); - }); - - it('seek bar is created when configured', () => { - const config = {addSeekBar: true}; - UiUtils.createUIThroughAPI(container, video, config); + UiUtils.createUIThroughAPI(container, video, {addSeekBar: true}); UiUtils.confirmElementFound(container, 'shaka-seek-bar'); }); - it('settings menus are positioned lower when seek bar is absent', - () => { - const config = {addSeekBar: false}; - UiUtils.createUIThroughAPI(container, video, config); + it('big play button only created when configured', () => { + UiUtils.createUIThroughAPI(container, video, {addBigPlayButton: false}); + UiUtils.confirmElementMissing(container, 'shaka-play-button-container'); + UiUtils.confirmElementMissing(container, 'shaka-play-button'); - function confirmLowPosition(className) { - const elements = - container.getElementsByClassName(className); - expect(elements.length).toBe(1); - expect( - elements[0].classList.contains('shaka-low-position')).toBe(true); - } + UiUtils.createUIThroughAPI(container, video, {addBigPlayButton: true}); + UiUtils.confirmElementFound(container, 'shaka-play-button-container'); + UiUtils.confirmElementFound(container, 'shaka-play-button'); + }); - UiUtils.confirmElementMissing(container, 'shaka-seek-bar'); + it('settings menus are positioned lower when seek bar is absent', () => { + const config = {addSeekBar: false}; + UiUtils.createUIThroughAPI(container, video, config); - confirmLowPosition('shaka-overflow-menu'); - confirmLowPosition('shaka-resolutions'); - confirmLowPosition('shaka-audio-languages'); - confirmLowPosition('shaka-text-languages'); - }); + function confirmLowPosition(className) { + const elements = + container.getElementsByClassName(className); + expect(elements.length).toBe(1); + expect( + elements[0].classList.contains('shaka-low-position')).toBe(true); + } + + UiUtils.confirmElementMissing(container, 'shaka-seek-bar'); + + confirmLowPosition('shaka-overflow-menu'); + confirmLowPosition('shaka-resolutions'); + confirmLowPosition('shaka-audio-languages'); + confirmLowPosition('shaka-text-languages'); + }); it('controls are created in specified order', () => { const config = { diff --git a/test/ui/ui_unit.js b/test/ui/ui_unit.js index 8dcfe33ab..419e29b1e 100644 --- a/test/ui/ui_unit.js +++ b/test/ui/ui_unit.js @@ -306,7 +306,6 @@ describe('UI', () => { }); }); - describe('controls-button-panel', () => { /** @type {!HTMLElement} */ let controlsButtonPanel; @@ -323,11 +322,26 @@ describe('UI', () => { UiUtils.confirmElementFound(controlsButtonPanel, 'shaka-current-time'); UiUtils.confirmElementFound(controlsButtonPanel, 'shaka-mute-button'); - UiUtils.confirmElementFound(controlsButtonPanel, 'shaka-volume-bar'); UiUtils.confirmElementFound(controlsButtonPanel, 'shaka-fullscreen-button'); UiUtils.confirmElementFound(controlsButtonPanel, 'shaka-overflow-menu-button'); + + UiUtils.confirmElementFound(videoContainer, 'shaka-seek-bar'); + + // The default settings vary in mobile/desktop context. + if (shaka.util.Platform.isMobile()) { + UiUtils.confirmElementFound(videoContainer, + 'shaka-play-button-container'); + UiUtils.confirmElementFound(videoContainer, 'shaka-play-button'); + UiUtils.confirmElementMissing(controlsButtonPanel, + 'shaka-volume-bar'); + } else { + UiUtils.confirmElementMissing(videoContainer, + 'shaka-play-button-container'); + UiUtils.confirmElementMissing(videoContainer, 'shaka-play-button'); + UiUtils.confirmElementFound(controlsButtonPanel, 'shaka-volume-bar'); + } }); it('is accessible', () => { @@ -578,11 +592,9 @@ describe('UI', () => { function checkBasicUIElements(container) { const videos = container.getElementsByTagName('video'); expect(videos.length).not.toBe(0); - UiUtils.confirmElementFound(container, 'shaka-play-button-container'); - UiUtils.confirmElementFound(container, 'shaka-play-button'); + UiUtils.confirmElementFound(container, 'shaka-spinner-svg'); UiUtils.confirmElementFound(container, 'shaka-overflow-menu'); UiUtils.confirmElementFound(container, 'shaka-controls-button-panel'); - UiUtils.confirmElementFound(container, 'shaka-seek-bar'); } }); diff --git a/ui/less/buttons.less b/ui/less/buttons.less index e646296a3..a7ae20cf9 100644 --- a/ui/less/buttons.less +++ b/ui/less/buttons.less @@ -125,10 +125,3 @@ outline: none; } } - -/* On mobile devices, hide the volume button by default. */ -.shaka-mobile { - .shaka-volume-bar-container { - display: none; - } -} diff --git a/ui/less/range_elements.less b/ui/less/range_elements.less index 43e012d11..f509fba39 100644 --- a/ui/less/range_elements.less +++ b/ui/less/range_elements.less @@ -169,11 +169,6 @@ .shaka-volume-bar-container { width: 100px; - - /* Hide volume slider on mobile-sized screens. */ - @media screen and (max-width: 550px) { - .hidden(); - } } .shaka-range-element { diff --git a/ui/ui.js b/ui/ui.js index b47cf8cc3..2ba9ab656 100644 --- a/ui/ui.js +++ b/ui/ui.js @@ -180,8 +180,9 @@ shaka.ui.Overlay = class { * @private */ defaultConfig_() { - return { + const config = { controlPanelElements: [ + 'play_pause', 'time_and_duration', 'spacer', 'mute', @@ -197,7 +198,7 @@ shaka.ui.Overlay = class { 'cast', ], addSeekBar: true, - addBigPlayButton: true, + addBigPlayButton: false, castReceiverAppId: '', clearBufferOnQualityChange: true, seekBarColors: { @@ -212,8 +213,18 @@ shaka.ui.Overlay = class { trackLabelFormat: shaka.ui.TrackLabelFormat.LANGUAGE, fadeDelay: 0, }; - } + // On mobile, by default, hide the volume slide and the small play/pause + // button and show the big play/pause button in the center. + // This is in line with default styles in Chrome. + if (this.isMobile()) { + config.addBigPlayButton = true; + config.controlPanelElements = config.controlPanelElements.filter( + (name) => name != 'play_pause' && name != 'volume'); + } + + return config; + } /** * @private