From 33b476d7cc98bc6fc52bab970b2f116091459e6a Mon Sep 17 00:00:00 2001
From: Grzegorz Blaszczyk <gjanblaszczyk@gmail.com>
Date: Wed, 1 Feb 2023 18:05:41 +0100
Subject: [PATCH] fix:  use Screen Orientation API where supported (#8031)

* feat:  introduces Screen Orientation API for detecting orientation change

* feat:  add missing unit tests
---
 src/js/tracks/text-track-display.js         |  7 ++--
 test/unit/tracks/text-track-display.test.js | 39 +++++++++++++++++++++
 2 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/src/js/tracks/text-track-display.js b/src/js/tracks/text-track-display.js
index 00c85fd431..b205d99737 100644
--- a/src/js/tracks/text-track-display.js
+++ b/src/js/tracks/text-track-display.js
@@ -118,8 +118,11 @@ class TextTrackDisplay extends Component {
       player.on('fullscreenchange', updateDisplayHandler);
       player.on('playerresize', updateDisplayHandler);
 
-      window.addEventListener('orientationchange', updateDisplayHandler);
-      player.on('dispose', () => window.removeEventListener('orientationchange', updateDisplayHandler));
+      const screenOrientation = window.screen.orientation || window;
+      const changeOrientationEvent = window.screen.orientation ? 'change' : 'orientationchange';
+
+      screenOrientation.addEventListener(changeOrientationEvent, updateDisplayHandler);
+      player.on('dispose', () => screenOrientation.removeEventListener(changeOrientationEvent, updateDisplayHandler));
 
       const tracks = this.options_.playerOptions.tracks || [];
 
diff --git a/test/unit/tracks/text-track-display.test.js b/test/unit/tracks/text-track-display.test.js
index fbe11e81b2..98ac1ac835 100644
--- a/test/unit/tracks/text-track-display.test.js
+++ b/test/unit/tracks/text-track-display.test.js
@@ -1,4 +1,5 @@
 /* eslint-env qunit */
+import window from 'global/window';
 import Html5 from '../../../src/js/tech/html5.js';
 import { constructColor } from '../../../src/js/tracks/text-track-display.js';
 import Component from '../../../src/js/component.js';
@@ -105,6 +106,44 @@ QUnit.test('shows the default caption track first', function(assert) {
 });
 
 if (!Html5.supportsNativeTextTracks()) {
+  QUnit.test('text track display should attach screen orientation change event handler', function(assert) {
+    const oldScreen = window.screen;
+    const removeHandlerSpy = sinon.spy();
+    let changeHandlerSpy;
+    let changeHandlerAttached;
+
+    window.screen = {
+      orientation: {
+        addEventListener: (type, func) => {
+          changeHandlerAttached = true;
+          changeHandlerSpy = sinon.spy();
+        },
+        dispatchEvent: (type) => changeHandlerSpy(),
+        removeEventListener: removeHandlerSpy
+      }
+    };
+
+    const player = TestHelpers.makePlayer();
+
+    this.clock.tick(1);
+
+    assert.true(changeHandlerAttached, 'screen orientation change event handler was not attached');
+    assert.strictEqual(changeHandlerSpy.callCount, 0, 'screen orientation change event handler should not be called');
+
+    window.screen.orientation.dispatchEvent('change');
+
+    assert.strictEqual(changeHandlerSpy.callCount, 1, 'screen orientation change event handler was not called');
+
+    player.dispose();
+
+    assert.strictEqual(
+      removeHandlerSpy.callCount,
+      1,
+      'screen orientation change event handler was not removed during player dispose'
+    );
+    window.screen = oldScreen;
+  });
+
   QUnit.test('selectedlanguagechange is triggered by a track mode change', function(assert) {
     const player = TestHelpers.makePlayer();
     const track1 = {