fix(FEC-9309): when clicking on Fast Forward button, the arrow someti…

…mes isn't rotates in playlist when countdown window shown (#406)

* add `withAnimation` HOC for reuse 
* handle the animation restart by `animationend` listener

src/components/forward/forward.js

@@ -5,6 +5,7 @@ import {Localizer, Text} from 'preact-i18n';
 import BaseComponent from '../base';
 import {default as Icon, IconType} from '../icon';
 import {KeyMap} from '../../utils/key-map';
+import {withAnimation} from '../../utils/with-animation';
 
 const COMPONENT_NAME = 'Forward';
 
@@ -39,7 +40,7 @@ class Forward extends BaseComponent {
    * @memberof Forward
    */
   onClick(): void {
-    this.animate();
+    this.props.animate();
     let to;
     const step = this.props.step || FORWARD_DEFAULT_STEP;
     const from = this.player.currentTime;
@@ -55,18 +56,6 @@ class Forward extends BaseComponent {
     });
   }
 
-  /**
-   * toggles the animation state to activate the rotate animation
-   *
-   * @returns {void}
-   * @memberof Forward
-   */
-  animate(): void {
-    this.setState({animation: false});
-    this.forceUpdate();
-    this.setState({animation: true});
-  }
-
   /**
    * render component
    *
@@ -81,7 +70,8 @@ class Forward extends BaseComponent {
           <button
             tabIndex="0"
             aria-label={<Text id={'controls.forward'} />}
-            className={`${style.controlButton} ${this.state.animation ? style.reverseRotate : ''}`}
+            className={`${style.controlButton}`}
+            ref={this.props.innerRef}
             onClick={() => this.onClick()}
             onKeyDown={e => {
               if (e.keyCode === KeyMap.ENTER) {
@@ -98,4 +88,5 @@ class Forward extends BaseComponent {
 
 Forward.displayName = COMPONENT_NAME;
 
-export {Forward};
+const animateForward = withAnimation(Forward, style.reverseRotate);
+export {animateForward as Forward};

src/components/rewind/rewind.js

@@ -5,6 +5,7 @@ import {Localizer, Text} from 'preact-i18n';
 import BaseComponent from '../base';
 import {default as Icon, IconType} from '../icon';
 import {KeyMap} from '../../utils/key-map';
+import {withAnimation} from '../../utils/with-animation';
 
 const COMPONENT_NAME = 'Rewind';
 
@@ -39,7 +40,7 @@ class Rewind extends BaseComponent {
    * @memberof Rewind
    */
   onClick(): void {
-    this.animate();
+    this.props.animate();
     let to;
     const step = this.props.step || REWIND_DEFAULT_STEP;
     const from = this.player.currentTime;
@@ -81,7 +82,8 @@ class Rewind extends BaseComponent {
           <button
             tabIndex="0"
             aria-label={<Text id={'controls.rewind'} />}
-            className={`${style.controlButton} ${this.state.animation ? style.rotate : ''}`}
+            className={`${style.controlButton}`}
+            ref={this.props.innerRef}
             onClick={() => this.onClick()}
             onKeyDown={e => {
               if (e.keyCode === KeyMap.ENTER) {
@@ -97,4 +99,6 @@ class Rewind extends BaseComponent {
 }
 
 Rewind.displayName = COMPONENT_NAME;
-export {Rewind};
+
+const animateRewind = withAnimation(Rewind, style.rotate);
+export {animateRewind as Rewind};

src/utils/with-animation.js

@@ -0,0 +1,61 @@
+//@flow
+import {BaseComponent} from '../components/base';
+import {h} from 'preact';
+
+/**
+ * @param {BaseComponent} WrappedComponent - The component to animate
+ * @param {string} cssClass - the CSS class to add/remove for the animation
+ * @returns {BaseComponent} - HOC that handles animation
+ */
+export const withAnimation: Function = (WrappedComponent: BaseComponent, cssClass: string): typeof BaseComponent =>
+  class extends BaseComponent {
+    element: HTMLElement;
+
+    /**
+     * adds the animation class
+     *
+     * @returns {void}
+     * @memberof HOC
+     */
+    animate(): void {
+      this.element.classList.add(cssClass);
+    }
+
+    /**
+     * after component mounted, listen to events
+     *
+     * @returns {void}
+     * @memberof HOC
+     */
+    componentDidMount() {
+      this.eventManager.listen(this.element, 'animationend', () => {
+        this.element.classList.remove(cssClass);
+      });
+    }
+
+    /**
+     * before component unmounted, remove event listeners
+     *
+     * @returns {void}
+     * @memberof HOC
+     */
+    componentWillUnmount(): void {
+      super.componentWillUnmount();
+      this.element.classList.remove(cssClass);
+    }
+
+    /**
+     * render component
+     *
+     * @param {*} props - component props
+     * @returns {React$Element} - component element
+     * @memberof HOC
+     */
+    render(props: any): React$Element<any> | void {
+      return h(WrappedComponent, {
+        ...props,
+        innerRef: ref => (this.element = ref),
+        animate: this.animate.bind(this)
+      });
+    }
+  };