feat(FEC-8046): 360 support (#130)

* force inBrowserFullscreenForIOS when 'vr' plugin is set * set vrStereo ui component when 'vr' plugin is set * pass the target dom element to 'vr' plugin
kaltura · Jun 20, 2018 · cec9ea6 · cec9ea6
1 parent 7d10e5b
commit cec9ea6
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 9 deletions.
diff --git a/src/common/plugins/plugins-config.js b/src/common/plugins/plugins-config.js
@@ -12,7 +12,8 @@ function evaluatePluginsConfig(options: KalturaPlayerOptionsObject): void {
   if (options.plugins) {
     const dataModel: Object = {
       pVersion: __VERSION__,
-      pName: __NAME__
+      pName: __NAME__,
+      domRootElementId: options.targetId
     };
     if (options.provider && options.provider.env) {
       dataModel['serviceUrl'] = options.provider.env.serviceUrl;

diff --git a/src/common/plugins/plugins-config.json b/src/common/plugins/plugins-config.json
@@ -44,5 +44,8 @@
     "ks": "{{ks}}",
     "uiConfId": "{{uiConfId}}",
     "referrer": "{{referrer}}"
+  },
+  "vr": {
+    "rootElement": "{{domRootElementId}}"
   }
 }
diff --git a/src/common/ui-wrapper.js b/src/common/ui-wrapper.js
@@ -1,13 +1,14 @@
 // @flow
 import {UIManager} from 'playkit-js-ui'
-import {Utils} from 'playkit-js'
+import {Env, Utils} from 'playkit-js'
 import {DEFAULT_THUMBS_SLICES, DEFAULT_THUMBS_WIDTH, getThumbSlicesUrl} from './utils/thumbs'
 
 class UIWrapper {
   _uiManager: UIManager;
   _disabled: boolean = false;
 
-  constructor(player: Player, config: UIOptionsObject) {
+  constructor(player: Player, options: KalturaPlayerOptionsObject) {
+    const config: UIOptionsObject = options.ui;
     if (config.disable) {
       this._disabled = true;
       appendPlayerViewToTargetContainer(config.targetId, player.getView());
@@ -18,6 +19,7 @@ class UIWrapper {
       } else {
         this._uiManager.buildDefaultUI();
       }
+      this._handleVr(options.plugins);
     }
   }
 
@@ -38,6 +40,25 @@ class UIWrapper {
     this.setConfig(Utils.Object.mergeDeep({}, previewThumbnailConfig, seekbarConfig), 'seekbar');
   }
 
+  _handleVr(config: ?PKPluginsConfigObject): void {
+    if (config) {
+      this._setFullscreenConfig();
+      this._setStereoConfig(config.vr)
+    }
+  }
+
+  _setFullscreenConfig(): void {
+    const fullscreenConfig = Utils.Object.getPropertyPath(this._uiManager, 'config.components.fullscreen');
+    this.setConfig(Utils.Object.mergeDeep({}, {inBrowserFullscreenForIOS: true}, fullscreenConfig), 'fullscreen');
+  }
+
+  _setStereoConfig(vrConfig: Object = {}): void {
+    if (vrConfig.toggleStereo || (Env.device.type && vrConfig.toggleStereo !== false)) {
+      // enable stereo mode by default for mobile device
+      this.setConfig(Utils.Object.mergeDeep({}, {vrStereoMode: !!(vrConfig.startInStereo)}), 'vrStereo');
+    }
+  }
+
   setLoadingSpinnerState(show: boolean): void {
     if (this._disabled) return;
     this.setConfig({show: show}, 'loading');

diff --git a/src/kaltura-player.js b/src/kaltura-player.js
@@ -21,7 +21,7 @@ export default class KalturaPlayer {
     this._player = loadPlayer(options);
     this._playerConfigure = this._player.configure.bind(this._player);
     this._logger = getLogger('KalturaPlayer' + Utils.Generator.uniqueId(5));
-    this._uiWrapper = new UIWrapper(this._player, options.ui);
+    this._uiWrapper = new UIWrapper(this._player, options);
     this._provider = new Provider(options.provider, __VERSION__);
     Object.assign(this._player, {
       loadMedia: mediaInfo => this.loadMedia(mediaInfo),

diff --git a/test/src/common/utils/ui-wrapper.spec.js b/test/src/common/utils/ui-wrapper.spec.js
@@ -61,7 +61,7 @@ describe('UIWrapper', function () {
 
     it('should set the configured thumbs sprite with default sizes', function (done) {
       uiConfig.components.seekbar.thumbsSprite = thumbsSprite;
-      uiWrapper = new UIWrapper(player, uiConfig);
+      uiWrapper = new UIWrapper(player, {ui: uiConfig});
       sandbox.stub(uiWrapper, 'setConfig')
         .callsFake(config => {
           config.should.deep.equal({
@@ -80,7 +80,7 @@ describe('UIWrapper', function () {
         thumbsSprite: thumbsSprite,
         thumbsWidth: 300
       };
-      uiWrapper = new UIWrapper(player, uiConfig);
+      uiWrapper = new UIWrapper(player, {ui: uiConfig});
       sandbox.stub(uiWrapper, 'setConfig')
         .callsFake(config => {
           config.should.deep.equal({
@@ -95,7 +95,7 @@ describe('UIWrapper', function () {
 
     it('should set the backend thumbs sprite with default sizes', function (done) {
       uiConfig.components.seekbar = {};
-      uiWrapper = new UIWrapper(player, uiConfig);
+      uiWrapper = new UIWrapper(player, {ui: uiConfig});
       sandbox.stub(uiWrapper, 'setConfig')
         .callsFake(config => {
           config.thumbsSlices.should.equal(DEFAULT_THUMBS_SLICES);
@@ -111,7 +111,7 @@ describe('UIWrapper', function () {
         thumbsSlices: 200,
         thumbsWidth: 300
       };
-      uiWrapper = new UIWrapper(player, uiConfig);
+      uiWrapper = new UIWrapper(player, {ui: uiConfig});
       sandbox.stub(uiWrapper, 'setConfig')
         .callsFake(config => {
           config.thumbsSlices.should.equal(200);
@@ -125,7 +125,7 @@ describe('UIWrapper', function () {
     it('should not set seek bar config', function (done) {
       uiConfig.components.seekbar = {};
       mediaConfig.sources.poster = '';
-      uiWrapper = new UIWrapper(player, uiConfig);
+      uiWrapper = new UIWrapper(player, {ui: uiConfig});
       sandbox.stub(uiWrapper, 'setConfig')
         .callsFake(config => {
           config.should.deep.equal({});