fix(FEC-8032): when switching to iOS fullscreen in portrait captions …

…displayed in the middle for few seconds (#223)

* fixed the captions in native ios devices

fired an iOSFullscreen action when going to full screen on ios devices.
added a class if iosFullscreen state changes respectivly,
removed the transition -60px because there is no bottom menu bar

* used fullscreen & env instead of creating new iosfullscreen state

* adding os + browser to the player element

changing the class selection accordingly

* using webpack gloabal const for 'playkit' class prefix

* beautify

* moving to global flow types + creation of env classes in the shell constructor

* double to single-quots

* es6 strings

* fix build

.eslintrc.json

@@ -30,7 +30,8 @@
     "should": true,
     "sinon": true,
     "__VERSION__": true,
-    "__NAME__": true
+    "__NAME__": true,
+    "__CSS_MODULE_PREFIX__": true
   },
   "rules": {
     "mocha-no-only/mocha-no-only": "off",

flow-typed/types/ui-preset.js

@@ -0,0 +1,5 @@
+// @flow
+declare type UIPreset = {
+  template: (props: Object) => any;
+  condition?: (state: Object) => boolean;
+}

flow-typed/vars/css-module-prefix.js

@@ -0,0 +1,2 @@
+// @flow
+declare var __CSS_MODULE_PREFIX__: string;

src/components/shell/shell.js

@@ -28,7 +28,8 @@ const mapStateToProps = state => ({
   volumeHoverActive: state.volume.hover,
   adBreak: state.engine.adBreak,
   prePlayback: state.shell.prePlayback,
-  smartContainerOpen: state.shell.smartContainerOpen
+  smartContainerOpen: state.shell.smartContainerOpen,
+  fullscreen: state.fullscreen.fullscreen
 });
 
 /**
@@ -50,6 +51,7 @@ class Shell extends BaseComponent {
   state: Object;
   hoverTimeout: ?number;
   _fallbackToMutedAutoPlayMode: boolean;
+  _environmentClasses: Array<string>;
 
   /**
    * Creates an instance of Shell.
@@ -62,6 +64,10 @@ class Shell extends BaseComponent {
     this.player.addEventListener(this.player.Event.FALLBACK_TO_MUTED_AUTOPLAY, () => {
       this._fallbackToMutedAutoPlayMode = true
     });
+    this._environmentClasses = [
+      `${__CSS_MODULE_PREFIX__}-${this.player.env.os.name.replace(/ /g, '-')}`,
+      `${__CSS_MODULE_PREFIX__}-${this.player.env.browser.name.replace(/ /g, '-')}`
+    ];
   }
 
   /**
@@ -265,7 +271,7 @@ class Shell extends BaseComponent {
    * @memberof Shell
    */
   render(props: any): React$Element<any> {
-    let playerClasses = [style.player, style.skinDefault];
+    let playerClasses = [style.player, style.skinDefault, ...this._environmentClasses];
     playerClasses.push(props.playerClasses);
 
     if (this.props.isMobile) playerClasses.push(style.touch);
@@ -275,6 +281,7 @@ class Shell extends BaseComponent {
     if (this.props.adBreak) playerClasses.push(style.adBreak);
     if (this.props.metadataLoaded) playerClasses.push(style['state-' + this.props.currentState]);
     if (this.props.seekbarDraggingActive) playerClasses.push(style.hover);
+    if (this.props.fullscreen) playerClasses.push(style.fullscreen);
     if (this.props.playerClientRect && this.props.playerClientRect.width <= 480) playerClasses.push(style.sizeSm);
     else if (this.props.playerClientRect && this.props.playerClientRect.width <= 768) playerClasses.push(style.sizeMd);
 

src/styles/_captions.scss

@@ -8,6 +8,11 @@
     transform: translateY(-60px);
     transition: ease-out 100ms;
   }
+  &.fullscreen {
+    &.iOS video::-webkit-media-text-track-display {
+      transform: translateY(0px);
+    }
+  }
   &.overlay-active {
     :global(.playkit-subtitles) {
       display: none;
@@ -23,5 +28,10 @@
       transform: translateY(-60px);
       transition: ease-out 100ms;
     }
+    &.fullscreen {
+      &.iOS :global(.playkit-subtitles) {
+        transform: translateY(0px);
+      }
+    }
   }
 }

src/ui-manager.js

@@ -27,11 +27,6 @@ import {middleware} from './middlewares'
 
 import './styles/style.scss';
 
-type UIPreset = {
-  template: (props: Object) => any;
-  condition?: (state: Object) => boolean;
-}
-
 /**
  * API used for building UIs based on state conditions
  *

webpack.config.js

@@ -4,11 +4,13 @@ const webpack = require("webpack");
 const path = require("path");
 const PROD = (process.env.NODE_ENV === 'production');
 const packageData = require("./package.json");
+const CSS_MODULE_PREFIX = 'playkit';
 
 let plugins = [
   new webpack.DefinePlugin({
     __VERSION__: JSON.stringify(packageData.version),
     __NAME__: JSON.stringify(packageData.name),
+    __CSS_MODULE_PREFIX__: JSON.stringify(CSS_MODULE_PREFIX),
     'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
   })
 ];
@@ -66,7 +68,7 @@ module.exports = {
           options: {
             camelCase: true,
             modules: true,
-            localIdentName: 'playkit-[local]'
+            localIdentName: CSS_MODULE_PREFIX + '-[local]'
           }
         }, {
           loader: "sass-loader"