feat(FEC-10486): Lock orientation according to screenLockOrientionMod…

…e config when switching to full screen (#499)

add screenLockOrientionMode config to be able to lock the screen mode in fullscreen.
new enum with possible values for this config:
`"none"
"any"
"natural"
"landscape"
"portrait"
"portrait-primary"
"portrait-secondary"
"landscape-primary"
"landscape-secondary"`

Solves FEC-10486

docs/configuration.md

@@ -486,7 +486,8 @@ var config = {
 >  streamPriority: Array<PKStreamPriorityObject>,
 >  preferNative: PKPreferNativeConfigObject,
 >  inBrowserFullscreen: boolean,
->  playAdsWithMSE: boolean
+>  playAdsWithMSE: boolean,
+>  screenLockOrientionMode: string
 > }
 > ```
 >
@@ -511,6 +512,7 @@ var config = {
 >  muted: false,
 >  pictureInPicture: true,
 >  playAdsWithMSE: false,
+>  screenLockOrientionMode: ScreenOrientationType.NONE,
 >  options: {
 >    html5: {
 >      hls: {},
@@ -886,6 +888,20 @@ var config = {
 >
 > ##
 >
+> > ### config.playback.screenLockOrientionMode
+> >
+> > ##### Type: `string` - value list option in ScreenOrientationType
+> >
+> > ##### Default: `none` - ScreenOrientationType.NONE
+> >
+> > ```js
+> > screenLockOrientionMode: string;
+> > ```
+> >
+> > > ##### Description: Gives the ability to lock the screen orientation in fullscreen
+>
+> ##
+>
 > > ### config.playback.streamPriority
 > >
 > > ##### Type: `Array<PKStreamPriorityObject`

flow-typed/types/playback-config.js

@@ -14,5 +14,6 @@ declare type PKPlaybackConfigObject = {
   streamPriority: Array<PKStreamPriorityObject>,
   preferNative: PKPreferNativeConfigObject,
   inBrowserFullscreen: boolean,
-  playAdsWithMSE: boolean
+  playAdsWithMSE: boolean,
+  screenLockOrientionMode: string
 };

flow-typed/types/screen-orientation-type.js

@@ -0,0 +1,2 @@
+// @flow
+declare type PKOrientationType = {[type: string]: string};

src/fullscreen/fullscreen-controller.js

@@ -3,6 +3,7 @@ import EventManager from '../event/event-manager';
 import Player from '../player';
 import FakeEvent from '../event/fake-event';
 import * as Utils from '../utils/util';
+import {ScreenOrientationType} from '../screen-orientation-type';
 
 /**
  * The IOS fullscreen class name.
@@ -22,6 +23,10 @@ class FullscreenController {
   // Flag to indicate that player is in fullscreen(when different element on fullscreen - api return correct state).
   _isInFullscreen: boolean = false;
   _isInBrowserFullscreen: boolean;
+  _isScreenLocked: boolean = false;
+  _isScreenOrientationSupport: boolean =
+    // $FlowFixMe
+    !!screen && !!screen.orientation && typeof screen.orientation.unlock === 'function' && typeof screen.orientation.lock === 'function';
   _eventManager: EventManager;
   // Flag to overcome browsers which supports more than one fullscreenchange event
   _isFullscreenEventDispatched: boolean = false;
@@ -164,7 +169,19 @@ class FullscreenController {
       this._player.exitPictureInPicture();
     }
     Promise.resolve(this._nativeEnterFullScreen(fullScreenElement)).then(
-      () => (this._isInFullscreen = true),
+      () => {
+        this._isInFullscreen = true;
+        const screenLockOrientionMode = Utils.Object.getPropertyPath(this._player, 'config.playback.screenLockOrientionMode');
+        const validOrientation =
+          screenLockOrientionMode !== ScreenOrientationType.NONE && Object.values(ScreenOrientationType).includes(screenLockOrientionMode);
+        if (this._isScreenOrientationSupport && validOrientation) {
+          screen.orientation
+            // $FlowFixMe
+            .lock(screenLockOrientionMode)
+            .then(() => (this._isScreenLocked = true))
+            .catch(() => (this._isScreenLocked = false));
+        }
+      },
       () => {}
     );
   }
@@ -195,7 +212,14 @@ class FullscreenController {
    */
   _requestExitFullscreen(): void {
     Promise.resolve(this._nativeExitFullScreen()).then(
-      () => (this._isInFullscreen = false),
+      () => {
+        this._isInFullscreen = false;
+        if (this._isScreenOrientationSupport && this._isScreenLocked) {
+          // $FlowFixMe
+          screen.orientation.unlock();
+          this._isScreenLocked = false;
+        }
+      },
       () => {}
     );
   }

src/player-config.js

@@ -1,3 +1,5 @@
+import {ScreenOrientationType} from './screen-orientation-type';
+
 const DefaultConfig = {
   log: {
     level: 'ERROR'
@@ -37,6 +39,7 @@ const DefaultConfig = {
       dash: false
     },
     inBrowserFullscreen: false,
+    screenLockOrientionMode: ScreenOrientationType.NONE,
     playAdsWithMSE: false,
     streamPriority: [
       {

src/player.js

@@ -35,7 +35,6 @@ import {ResizeWatcher} from './utils/resize-watcher';
 import {FullscreenController} from './fullscreen/fullscreen-controller';
 import {EngineDecorator} from './engines/engine-decorator';
 import {LabelOptions} from './track/label-options';
-
 /**
  * The black cover class name.
  * @type {string}
@@ -2506,6 +2505,5 @@ export default class Player extends FakeEventTarget {
   get Error(): typeof PKError {
     return PKError;
   }
-
   // </editor-fold>
 }

src/playkit.js

@@ -32,6 +32,7 @@ import {RequestType} from './request-type';
 import {AdBreakType} from './ads/ad-break-type';
 import {AdTagType} from './ads/ad-tag-type';
 import {AdEventType} from './ads/ad-event-type';
+import {ScreenOrientationType} from './screen-orientation-type';
 
 declare var __VERSION__: string;
 declare var __NAME__: string;
@@ -107,7 +108,8 @@ export {
   CorsType,
   DrmScheme,
   MimeType,
-  RequestType
+  RequestType,
+  ScreenOrientationType
 };
 
 // Export logger utils

src/screen-orientation-type.js

@@ -0,0 +1,14 @@
+// @flow
+const ScreenOrientationType: PKOrientationType = {
+  NONE: 'none',
+  ANY: 'any',
+  NATURAL: 'natural',
+  LANDSCAPE: 'landscape',
+  PORTRAIT: 'portrait',
+  PORTRAIT_PRIMARY: 'portrait-primary',
+  PORTRAIT_SECONDARY: 'portrait-secondary',
+  LANDSCAPE_PRIMARY: 'landscape-primary',
+  LANDSCAPE_SECONDARY: 'landscape-secondary'
+};
+
+export {ScreenOrientationType};