fix(FEC-10957): CastBeforePlay button is not aligned to the center (#577

)
kaltura · Jan 31, 2021 · e52f990 · e52f990
1 parent efe261e
commit e52f990
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 19 deletions.
diff --git a/src/components/cast-on-tv/_cast-on-tv.scss b/src/components/cast-on-tv/_cast-on-tv.scss
@@ -20,9 +20,10 @@
 .player {
   .cast-on-tv-button-container {
     position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
-    text-align: center;
-    bottom: 20px;
+    height: 100%;
     opacity: 0;
 
     span {
@@ -41,6 +42,10 @@
     transition: max-width 200ms;
     padding: 0 16px;
     white-space: nowrap;
+    position: absolute;
+    bottom: 0;
+    transform: translate(-50%, -50%);
+    left: 50%;
 
     span {
       transform: translateX(0px);

diff --git a/src/components/cast-on-tv/cast-before-play.js b/src/components/cast-on-tv/cast-before-play.js
@@ -96,23 +96,21 @@ class CastBeforePlay extends Component {
         rootStyle.push(style.showCastOnTv);
       }
       return (
-        <div>
-          <div className={rootStyle.join(' ')}>
-            <Localizer>
-              <Button
-                tabIndex="0"
-                aria-label={<Text id={'cast.play_on_tv'} />}
-                onClick={() => this.onClick()}
-                className={[style.btn, style.btnDarkTransparent, style.castOnTvButton].join(' ')}>
-                <div className={style.castOnTvIconContainer}>
-                  <Icon type={props.icon} />
-                </div>
-                <span>
-                  <Text id="cast.play_on_tv" />
-                </span>
-              </Button>
-            </Localizer>
-          </div>
+        <div className={rootStyle.join(' ')}>
+          <Localizer>
+            <Button
+              tabIndex="0"
+              aria-label={<Text id={'cast.play_on_tv'} />}
+              onClick={() => this.onClick()}
+              className={[style.btn, style.btnDarkTransparent, style.castOnTvButton].join(' ')}>
+              <div className={style.castOnTvIconContainer}>
+                <Icon type={props.icon} />
+              </div>
+              <span>
+                <Text id="cast.play_on_tv" />
+              </span>
+            </Button>
+          </Localizer>
         </div>
       );
     }