viaprog/shaka-player
1
0
Fork 0
mirror of https://github.com/shaka-project/shaka-player.git synced 2026-06-13 15:46:46 +03:00
Code Issues Packages Projects Releases Wiki Activity

Customize default UI config for desktop/mobile

Browse Source 
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
This commit is contained in:
Joey Parrish
2020-01-16 14:59:17 -08:00
parent 1ee32849e4
commit 4a7aee1daf
7 changed files with 62 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test/ui/ui_unit.js
+17 -5
View File
@@ -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');
}
});