web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2024-11-28 08:58:46 +02:00
Code Releases Activity

feat: add browser.IS_SMART_TV and class names for CSS targeting devices (#8676)

Browse Source
This commit is contained in:
Pat O'Neill 2024-04-10 10:07:31 -04:00 committed by GitHub
parent 50f14bd66d
commit 8e5870f984
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 103 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/js/player.js
View File

@ -776,6 +776,19 @@ class Player extends Component {
// Default state of video is paused
this.addClass('vjs-paused');
const deviceClassNames = [
'IS_SMART_TV',
'IS_TIZEN',
'IS_WEBOS',
'IS_ANDROID',
'IS_IPAD',
'IS_IPHONE'
].filter(key => browser[key]).map(key => {
return 'vjs-device-' + key.substring(3).toLowerCase().replace(/\_/g, '-');
});
this.addClass(...deviceClassNames);
// Add a style element in the player that we'll use to set the width/height
// of the player in a way that's still overridable by CSS, just like the
// video element

12
src/js/utils/browser.js
View File

@ -156,6 +156,14 @@ export let IS_TIZEN = false;
*/
export let IS_WEBOS = false;
/**
* Whether or not this is a Smart TV (Tizen or WebOS) device.
*
* @static
* @type {Boolean}
*/
export let IS_SMART_TV = false;
/**
* Whether or not this device is touch-enabled.
*
@ -255,7 +263,9 @@ if (!IS_CHROMIUM) {
IS_WEBOS = (/Web0S/i).test(USER_AGENT);
IS_SAFARI = (/Safari/i).test(USER_AGENT) && !IS_CHROME && !IS_ANDROID && !IS_EDGE && !IS_TIZEN && !IS_WEBOS;
IS_SMART_TV = IS_TIZEN || IS_WEBOS;
IS_SAFARI = (/Safari/i).test(USER_AGENT) && !IS_CHROME && !IS_ANDROID && !IS_EDGE && !IS_SMART_TV;
IS_WINDOWS = (/Windows/i).test(USER_AGENT);

79
test/unit/player.test.js
View File

@ -967,6 +967,84 @@ QUnit.test('should add a touch-enabled classname when touch is supported', funct
player.dispose();
});
QUnit.test('should add smart-tv classname when on smart tv', function(assert) {
assert.expect(1);
browser.stub_IS_SMART_TV(true);
const player = TestHelpers.makePlayer({});
assert.ok(player.hasClass('vjs-device-smart-tv'), 'smart-tv classname added');
browser.reset_IS_SMART_TV();
player.dispose();
});
QUnit.test('should add webos classname when on webos', function(assert) {
assert.expect(1);
browser.stub_IS_WEBOS(true);
const player = TestHelpers.makePlayer({});
assert.ok(player.hasClass('vjs-device-webos'), 'webos classname added');
browser.reset_IS_WEBOS();
player.dispose();
});
QUnit.test('should add tizen classname when on tizen', function(assert) {
assert.expect(1);
browser.stub_IS_TIZEN(true);
const player = TestHelpers.makePlayer({});
assert.ok(player.hasClass('vjs-device-tizen'), 'tizen classname added');
browser.reset_IS_TIZEN();
player.dispose();
});
QUnit.test('should add android classname when on android', function(assert) {
assert.expect(1);
browser.stub_IS_ANDROID(true);
const player = TestHelpers.makePlayer({});
assert.ok(player.hasClass('vjs-device-android'), 'android classname added');
browser.reset_IS_ANDROID();
player.dispose();
});
QUnit.test('should add ipad classname when on ipad', function(assert) {
assert.expect(1);
browser.stub_IS_IPAD(true);
const player = TestHelpers.makePlayer({});
assert.ok(player.hasClass('vjs-device-ipad'), 'ipad classname added');
browser.reset_IS_IPAD();
player.dispose();
});
QUnit.test('should add iphone classname when on iphone', function(assert) {
assert.expect(1);
browser.stub_IS_IPHONE(true);
const player = TestHelpers.makePlayer({});
assert.ok(player.hasClass('vjs-device-iphone'), 'iphone classname added');
browser.reset_IS_IPHONE();
player.dispose();
});
QUnit.test('should add a svg-icons-enabled classname when svg icons are supported', function(assert) {
// Stub a successful parsing of the SVG sprite.
sinon.stub(window.DOMParser.prototype, 'parseFromString').returns({
@ -3492,3 +3570,4 @@ QUnit.test('smooth seeking set to true should update the display time components
seekBarUpdate.restore();
player.dispose();
});