Skip to content

Commit

Permalink
feat: add browser.IS_SMART_TV and class names for CSS targeting devic…
Browse files Browse the repository at this point in the history
…es (#8676)
  • Loading branch information
misteroneill authored Apr 10, 2024
1 parent 50f14bd commit 8e5870f
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 1 deletion.
13 changes: 13 additions & 0 deletions src/js/player.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
12 changes: 11 additions & 1 deletion src/js/utils/browser.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand Down Expand Up @@ -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);

Expand Down
79 changes: 79 additions & 0 deletions test/unit/player.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -3492,3 +3570,4 @@ QUnit.test('smooth seeking set to true should update the display time components
seekBarUpdate.restore();
player.dispose();
});

0 comments on commit 8e5870f

Please sign in to comment.