fix(FEC-10326): customPreset breaks UI (#530)

The initial shell mounting is happening after external preset mounts and in tooltips we rely on the shell prop isMobile. As this is one time decision we can update it in the initial state. Also refactor our with animation innerRef to avoid passing new anonymous function every time
kaltura · Jul 27, 2020 · 7e94110 · 7e94110
1 parent 7f4944d
commit 7e94110
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 13 deletions.
diff --git a/src/components/shell/shell.js b/src/components/shell/shell.js
@@ -210,11 +210,13 @@ class Shell extends Component {
    * @memberof Shell
    */
   componentWillMount() {
-    const {player} = this.props;
+    const {player, forceTouchUI} = this.props;
     this._environmentClasses = [
       `${__CSS_MODULE_PREFIX__}-${player.env.os.name.replace(/ /g, '-')}`,
       `${__CSS_MODULE_PREFIX__}-${player.env.browser.name.replace(/ /g, '-')}`
     ];
+    const {isIPadOS, isTablet, isMobile} = player.env;
+    this.props.updateIsMobile(isIPadOS || isTablet || isMobile || forceTouchUI);
   }
 
   /**
@@ -226,10 +228,7 @@ class Shell extends Component {
    * @memberof Shell
    */
   componentDidMount() {
-    const {player, forceTouchUI, eventManager} = this.props;
-    const {isIPadOS, isTablet, isMobile} = player.env;
-    this.props.updateIsMobile(isIPadOS || isTablet || isMobile || forceTouchUI);
-    this._onWindowResize();
+    const {player, eventManager} = this.props;
     eventManager.listen(
       window,
       'resize',

diff --git a/src/utils/with-animation.js b/src/utils/with-animation.js
@@ -1,5 +1,5 @@
 //@flow
-import {h, Component} from 'preact';
+import {h, Component, createRef} from 'preact';
 import {withEventManager} from 'event/with-event-manager';
 
 /**
@@ -9,7 +9,7 @@ import {withEventManager} from 'event/with-event-manager';
 export const withAnimation: Function = (cssClass: string) => (WrappedComponent: Component): typeof Component =>
   withEventManager(
     class AnimationComponent extends Component {
-      element: HTMLElement;
+      ref = createRef();
 
       /**
        * When component is mounted create event manager instance.
@@ -18,8 +18,8 @@ export const withAnimation: Function = (cssClass: string) => (WrappedComponent:
        * @memberof AnimationComponent
        */
       componentDidMount(): void {
-        this.props.eventManager.listen(this.element, 'animationend', () => {
-          this.element.classList.remove(cssClass);
+        this.props.eventManager.listen(this.ref.current, 'animationend', () => {
+          this.ref.current.classList.remove(cssClass);
         });
       }
       /**
@@ -29,17 +29,16 @@ export const withAnimation: Function = (cssClass: string) => (WrappedComponent:
        * @memberof AnimationComponent
        */
       componentWillUnmount(): void {
-        this.element.classList.remove(cssClass);
+        this.ref.current.classList.remove(cssClass);
       }
 
       /**
        * adds the animation class
-       *
        * @returns {void}
        * @memberof AnimationComponent
        */
       animate(): void {
-        this.element.classList.add(cssClass);
+        this.ref.current.classList.add(cssClass);
       }
 
       /**
@@ -52,7 +51,7 @@ export const withAnimation: Function = (cssClass: string) => (WrappedComponent:
         return (
           <WrappedComponent
             {...this.props}
-            innerRef={ref => (this.element = ref)}
+            innerRef={this.ref}
             animate={() => {
               this.animate();
             }}