feat(FEC-8754): PiP Accessibility (#333)

* Create a shortcut to the PiP plugin and assigned to the P key * Add the Keyboard event to the event-dispatcher
kaltura · Jun 17, 2019 · b5e820a · b5e820a
1 parent b5a5b2b
commit b5e820a
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 0 deletions.
diff --git a/src/components/keyboard/keyboard.js b/src/components/keyboard/keyboard.js
@@ -137,6 +137,17 @@ class KeyboardControl extends BaseComponent {
         return true;
       }
     },
+    [KeyMap.P]: () => {
+      if (!this.player.isInPictureInPicture()) {
+        this.logger.debug('Enter Picture In Picture');
+        this.player.enterPictureInPicture();
+      } else {
+        this.logger.debug('Exit Picture In Picture');
+        this.player.exitPictureInPicture();
+      }
+      this.toggleHoverState();
+      return true;
+    },
     [KeyMap.ESC]: () => {
       if (this.player.isFullscreen()) {
         this.logger.debug('Exit fullscreen');

diff --git a/src/event/event-type.js b/src/event/event-type.js
@@ -16,6 +16,8 @@ const EventType: {[event: string]: string} = {
   USER_SELECTED_QUALITY_TRACK: `${namespace}-userselectedqualitytrack`,
   USER_ENTERED_FULL_SCREEN: `${namespace}-userenteredfullscreen`,
   USER_EXITED_FULL_SCREEN: `${namespace}-userexitedfullscreen`,
+  USER_ENTERED_PICTURE_IN_PICTURE: `${namespace}-userenteredpictureinpicture`,
+  USER_EXITED_PICTURE_IN_PICTURE: `${namespace}-userexitedpictureinpicture`,
   USER_SELECTED_CAPTIONS_STYLE: `${namespace}-userselectedcaptionsstyle`,
   USER_SELECTED_SPEED: `${namespace}-userselectedspeed`,
   USER_SEEKED: `${namespace}-userseeked`

diff --git a/src/middlewares/event-dispatcher.js b/src/middlewares/event-dispatcher.js
@@ -199,6 +199,19 @@ function onFullScreenClicked(store: any, action: Object, player: Object): void {
     : player.dispatchEvent(new FakeEvent(FakeEvent.Type.USER_ENTERED_FULL_SCREEN));
 }
 
+/**
+ * Handler for PictureInPicture clicked actions.
+ * @param {any} store - The redux store.
+ * @param {Object} action - The action object.
+ * @param {Object} player - The video player.
+ * @returns {void}
+ */
+function onPictureInPictureClicked(store: any, action: Object, player: Object): void {
+  player.isInPictureInPicture()
+    ? player.dispatchEvent(new FakeEvent(FakeEvent.Type.USER_EXITED_PICTURE_IN_PICTURE))
+    : player.dispatchEvent(new FakeEvent(FakeEvent.Type.USER_ENTERED_PICTURE_IN_PICTURE));
+}
+
 /**
  * Handler for settings menu clicked actions.
  * @param {any} store - The redux store.
@@ -247,6 +260,9 @@ const keyboardHandlers: {[key: number]: Function} = {
   [KeyMap.F]: (store, action, player) => {
     onFullScreenClicked(store, action, player);
   },
+  [KeyMap.P]: (store, action, player) => {
+    onPictureInPictureClicked(store, action, player);
+  },
   [KeyMap.ESC]: (store, action, player) => {
     onFullScreenClicked(store, action, player);
   },

diff --git a/src/utils/key-map.js b/src/utils/key-map.js
@@ -10,6 +10,7 @@ export const KeyMap: {[key: string]: number} = {
   UP: 38,
   RIGHT: 39,
   DOWN: 40,
+  P: 80,
   C: 67,
   F: 70,
   M: 77,