fix: cast ui shows replay button when seeking after replay (#343)

Somehow when `BottomBar/TopBar` returns `undefined` it causes duplication of `SeekBar` creation. So handle casting+ended logic via css style

src/components/bottom-bar/_bottom-bar.scss

@@ -12,6 +12,10 @@
   left: 0;
   z-index: 1;
 
+  &.hide {
+    display: none;
+  }
+
   .left-controls {
     float: left;
     text-align: left;

src/components/bottom-bar/bottom-bar.js

@@ -35,12 +35,13 @@ class BottomBar extends Component {
    * @memberof BottomBar
    */
   render(props: any): ?React$Element<any> {
+    const styleClass = [style.bottomBar];
     if (props.isCasting && props.isPlaybackEnded) {
-      return undefined;
+      styleClass.push(style.hide);
     }
     return (
       <div
-        className={style.bottomBar}
+        className={styleClass.join(' ')}
         onMouseOver={() => this.props.updateBottomBarHoverActive(true)}
         onMouseLeave={() => this.props.updateBottomBarHoverActive(false)}>
         {props.children}

src/components/top-bar/_top-bar.scss

@@ -13,6 +13,10 @@
   left: 0;
   pointer-events: none;
 
+  &.hide {
+    display: none;
+  }
+
   .left-controls {
     text-align: left;
     min-width: 0;

src/components/top-bar/top-bar.js

@@ -31,10 +31,11 @@ class TopBar extends Component {
    * @memberof TopBar
    */
   render(props: any): ?React$Element<any> {
+    const styleClass = [style.topBar];
     if (props.isCasting && props.isPlaybackEnded) {
-      return undefined;
+      styleClass.push(style.hide);
     }
-    return <div className={style.topBar}>{props.children}</div>;
+    return <div className={styleClass.join(' ')}>{props.children}</div>;
   }
 }