feat(FEC-12015): CC button for on/off subtitles (#536)

add `showTextTrack` api save the CC selection in the storage Solves FEC-12015
kaltura · Apr 12, 2022 · 8e3cc43 · 8e3cc43
1 parent d4c36b4
commit 8e3cc43
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -57,7 +57,7 @@
   },
   "dependencies": {
     "@babel/polyfill": "^7.0.0",
-    "@playkit-js/playkit-js": "0.79.0",
+    "@playkit-js/playkit-js": "canary",
     "@playkit-js/playkit-js-dash": "1.30.0",
     "@playkit-js/playkit-js-hls": "1.30.1",
     "@playkit-js/playkit-js-ui": "0.70.1",

diff --git a/src/common/storage/storage-manager.js b/src/common/storage/storage-manager.js
@@ -64,6 +64,16 @@ export default class StorageManager {
       StorageWrapper.setItem(StorageManager.StorageKeys.TEXT_LANG, textTrack.language);
     });
 
+    const onToggleCaptions = () => {
+      eventManager.listenOnce(player, player.Event.TEXT_TRACK_CHANGED, event => {
+        const {selectedTextTrack} = event.payload;
+        StorageWrapper.setItem(StorageManager.StorageKeys.TEXT_LANG, selectedTextTrack.language);
+      });
+    };
+
+    eventManager.listen(player, player.Event.UI.USER_SHOWED_CAPTIONS, onToggleCaptions);
+    eventManager.listen(player, player.Event.UI.USER_HID_CAPTIONS, onToggleCaptions);
+
     eventManager.listen(player, player.Event.UI.USER_SELECTED_CAPTIONS_STYLE, event => {
       try {
         const textStyle = JSON.stringify(event.payload.captionsStyle);

diff --git a/src/kaltura-player.js b/src/kaltura-player.js
@@ -411,6 +411,10 @@ class KalturaPlayer extends FakeEventTarget {
     this._localPlayer.hideTextTrack();
   }
 
+  showTextTrack(): void {
+    this._localPlayer.showTextTrack();
+  }
+
   enableAdaptiveBitrate(): void {
     this._localPlayer.enableAdaptiveBitrate();
   }

diff --git a/test/src/common/storage/storage-manager.spec.js b/test/src/common/storage/storage-manager.spec.js
@@ -11,29 +11,28 @@ describe('StorageManager', function () {
   let config, player, sandbox;
   const partnerId = 1091;
   const entryId = '0_wifqaipd';
-
-  before(function () {
-    TestUtils.createElement('DIV', targetId);
-  });
+  const env = {
+    cdnUrl: 'https://qa-apache-php7.dev.kaltura.com/',
+    serviceUrl: 'https://qa-apache-php7.dev.kaltura.com/api_v3'
+  };
 
   beforeEach(function () {
+    TestUtils.createElement('DIV', targetId);
     sandbox = sinon.createSandbox();
     config = {
       targetId: targetId,
       provider: {
-        partnerId: partnerId
+        partnerId: partnerId,
+        env
       }
     };
   });
 
   afterEach(function () {
     sandbox.restore();
     TestUtils.removeVideoElementsFromTestPage();
-    window.localStorage.clear();
-  });
-
-  after(function () {
     TestUtils.removeElement(targetId);
+    window.localStorage.clear();
   });
 
   it('should return it has no storage', function () {
@@ -76,21 +75,26 @@ describe('StorageManager', function () {
     });
   });
 
-  it('should set muted to true/false depends on changed volume', function () {
+  it('should set muted to true/false depends on changed volume', function (done) {
     StorageWrapper._testForLocalStorage = () => (StorageWrapper._isLocalStorageAvailable = true);
     player = setup(config);
     player.loadMedia({entryId: entryId}).then(() => {
-      player.muted = true;
-      player.dispatchEvent(new FakeEvent(player.Event.UI.USER_CLICKED_MUTE));
-      StorageManager.getStorageConfig().playback.muted.should.be.true;
-      player.volume = 0.5;
-      player.dispatchEvent(new FakeEvent(player.Event.UI.USER_CHANGED_VOLUME));
-      StorageManager.getStorageConfig().playback.muted.should.be.false;
-      StorageManager.getStorageConfig().playback.volume.should.equals(0.5);
-      player.volume = 0;
-      player.dispatchEvent(new FakeEvent(player.Event.UI.USER_CHANGED_VOLUME));
-      StorageManager.getStorageConfig().playback.muted.should.be.true;
-      StorageManager.getStorageConfig().playback.volume.should.equals(0);
+      try {
+        player.muted = true;
+        player.dispatchEvent(new FakeEvent(player.Event.UI.USER_CLICKED_MUTE));
+        StorageManager.getStorageConfig().playback.muted.should.be.true;
+        player.volume = 0.5;
+        player.dispatchEvent(new FakeEvent(player.Event.UI.USER_CHANGED_VOLUME));
+        StorageManager.getStorageConfig().playback.muted.should.be.false;
+        StorageManager.getStorageConfig().playback.volume.should.equals(0.5);
+        player.volume = 0;
+        player.dispatchEvent(new FakeEvent(player.Event.UI.USER_CHANGED_VOLUME));
+        StorageManager.getStorageConfig().playback.muted.should.be.true;
+        StorageManager.getStorageConfig().playback.volume.should.equals(0);
+        done();
+      } catch (err) {
+        done(err);
+      }
     });
   });
 
@@ -123,4 +127,36 @@ describe('StorageManager', function () {
     setStorageTextStyle(player);
     player.textStyle.fontFamily.should.equal('Verdana');
   });
+
+  it('should set textLanguage depends on CC toggle', function (done) {
+    StorageWrapper._testForLocalStorage = () => (StorageWrapper._isLocalStorageAvailable = true);
+    player = setup(config);
+    player.loadMedia({entryId: entryId}).then(() => {
+      player.load();
+      player.ready().then(() => {
+        try {
+          player.dispatchEvent(new FakeEvent(player.Event.UI.USER_SHOWED_CAPTIONS, {element: 'ClosedCaptions'}));
+          player.addEventListener(player.Event.TEXT_TRACK_CHANGED, event => {
+            const {selectedTextTrack} = event.payload;
+            setTimeout(() => {
+              try {
+                StorageManager.getStorageConfig().playback.textLanguage.should.be.equal(selectedTextTrack.language);
+                if (selectedTextTrack.language === 'off') {
+                  done();
+                  return;
+                }
+                player.dispatchEvent(new FakeEvent(player.Event.UI.USER_HID_CAPTIONS, {element: 'ClosedCaptions'}));
+                player.hideTextTrack();
+              } catch (err) {
+                done(err);
+              }
+            });
+          });
+          player.showTextTrack();
+        } catch (err) {
+          done(err);
+        }
+      });
+    });
+  });
 });
diff --git a/yarn.lock b/yarn.lock
@@ -1150,10 +1150,10 @@
     react-redux "^7.2.0"
     redux "^4.0.5"
 
-"@playkit-js/playkit-js@0.79.0":
-  version "0.79.0"
-  resolved "https://registry.yarnpkg.com/@playkit-js/playkit-js/-/playkit-js-0.79.0.tgz#853b6af69954638951cda420856891acfd9b66e2"
-  integrity sha512-cVz+ewW5j02jZDck5vLnIaBLTs8Jh3dNLB1h0nyZVqpXRx1kZsl9iyCIIVbuM8AaCQDokaTkqGUEp8680EmCyg==
+"@playkit-js/playkit-js@canary":
+  version "0.80.0-canary.c37d2d6"
+  resolved "https://registry.yarnpkg.com/@playkit-js/playkit-js/-/playkit-js-0.80.0-canary.c37d2d6.tgz#88833650f5ada682aca35fbc91b1e5f8ccccaf61"
+  integrity sha512-9Ic97HPLJCGojpNysfX7yCKF3iTIyjuTIB4gmKAXxvico5oBOXFPVbgxWyAIkAw4mm4RXmsPf6WgZtWME3hHUg==
   dependencies:
     js-logger "^1.6.0"
     ua-parser-js "1.0.2"