feat(FEC-9596): add missing tooltips in replay overlay and vrStereo (#…

…480) * Added tooltips to pre-playback-play-overlay and vr-stereo * Replaced localizer with @withText in both * moved font-family css selector higher in the DOM so it effects all the DOM and removed unneeded CSS due to it's previous selector * fixed playbackGuiWWrapper misspelling
kaltura · Jan 27, 2020 · bd983ee · bd983ee
1 parent e398fe7
commit bd983ee
Show file tree

Hide file tree

Showing 14 changed files with 38 additions and 37 deletions.
diff --git a/src/components/cast-on-tv/_cast-on-tv.scss b/src/components/cast-on-tv/_cast-on-tv.scss
@@ -26,7 +26,6 @@
     opacity: 0;
 
     span {
-      font-family: $font-family;
       font-weight: lighter;
       color: white;
     }

diff --git a/src/components/cast-overlay/_cast-overlay.scss b/src/components/cast-overlay/_cast-overlay.scss
@@ -56,7 +56,6 @@
       bottom: 0;
       left: 89px;
       height: 128px;
-      font-family: $font-family;
       font-weight: lighter;
 
       .cast-status {

diff --git a/src/components/error-overlay/_error-overlay.scss b/src/components/error-overlay/_error-overlay.scss
@@ -16,7 +16,6 @@
   align-items: center;
   flex-direction: column;
   height: 100%;
-  font-family: $font-family;
 
   .copy-url-row{
     display: flex;

diff --git a/src/components/picture-in-picture-overlay/_picture-in-picture-overlay.scss b/src/components/picture-in-picture-overlay/_picture-in-picture-overlay.scss
@@ -6,7 +6,6 @@
   left: 0;
   width: 100%;
   height: 100%;
-  font-family: $font-family;
   display: flex;
   align-items: center;
   justify-content: center;

diff --git a/src/components/playlist-countdown/_playlist-countdown.scss b/src/components/playlist-countdown/_playlist-countdown.scss
@@ -8,7 +8,6 @@
 }
 .player {
   .playlist-countdown {
-    font-family: $font-family;
     height: 72px;
     position: absolute;
     right: 0;

diff --git a/src/components/pre-playback-play-overlay/pre-playback-play-overlay.js b/src/components/pre-playback-play-overlay/pre-playback-play-overlay.js
@@ -6,10 +6,11 @@ import {bindActions} from '../../utils/bind-actions';
 import {default as Icon, IconType} from '../icon';
 import {KeyMap} from '../../utils/key-map';
 import {actions as loadingActions} from '../../reducers/loading';
-import {Localizer, Text} from 'preact-i18n';
+import {withText} from 'preact-i18n';
 import {withPlayer} from '../player';
 import {withEventDispatcher} from 'components/event-dispatcher';
 import {withLogger} from 'components/logger';
+import {Tooltip} from 'components/tooltip';
 
 /**
  * mapping state to props
@@ -32,6 +33,10 @@ const COMPONENT_NAME = 'PrePlaybackPlayOverlay';
 @withPlayer
 @withLogger(COMPONENT_NAME)
 @withEventDispatcher(COMPONENT_NAME)
+@withText({
+  startOverText: 'controls.startOver',
+  playText: 'controls.play'
+})
 /**
  * PrePlaybackPlayOverlay component
  *
@@ -63,23 +68,20 @@ class PrePlaybackPlayOverlay extends Component {
     if ((!props.prePlayback && (!props.isPlaybackEnded || (props.playlist && props.playlist.next))) || props.loading) {
       return undefined;
     }
+    const labelText = props.isPlaybackEnded ? props.startOverText : props.playText;
     return (
       <div className={style.prePlaybackPlayOverlay} onMouseOver={e => e.stopPropagation()} onClick={() => this.handleClick()}>
-        {
-          <Localizer>
-            <a
-              className={style.prePlaybackPlayButton}
-              tabIndex="0"
-              aria-label={<Text id={props.isPlaybackEnded ? 'controls.startOver' : 'controls.play'} />}
-              onKeyDown={e => {
-                if (e.keyCode === KeyMap.ENTER) {
-                  this.handleClick();
-                }
-              }}>
-              {props.isPlaybackEnded ? <Icon type={IconType.StartOver} /> : <Icon type={IconType.Play} />}
-            </a>
-          </Localizer>
-        }
+        <a
+          className={style.prePlaybackPlayButton}
+          tabIndex="0"
+          aria-label={labelText}
+          onKeyDown={e => {
+            if (e.keyCode === KeyMap.ENTER) {
+              this.handleClick();
+            }
+          }}>
+          <Tooltip label={labelText}>{props.isPlaybackEnded ? <Icon type={IconType.StartOver} /> : <Icon type={IconType.Play} />}</Tooltip>
+        </a>
       </div>
     );
   }

diff --git a/src/components/tooltip/_tooltip.scss b/src/components/tooltip/_tooltip.scss
@@ -7,6 +7,8 @@
 .player .tooltip {
   position: relative;
   display: inline-block;
+  height: 100%;
+  width: 100%;
   .tooltip-label {
     visibility: hidden;
     background-color: $tooltip-bg-color;
@@ -23,6 +25,7 @@
     width: max-content;
     display: table;
 
+
     &:after {
       content: '';
       position: absolute;

diff --git a/src/components/vr-stereo/vr-stereo.js b/src/components/vr-stereo/vr-stereo.js
@@ -1,7 +1,7 @@
 //@flow
 import style from '../../styles/style.scss';
 import {h, Component} from 'preact';
-import {Localizer, Text} from 'preact-i18n';
+import {withText} from 'preact-i18n';
 import {default as Icon, IconType} from '../icon';
 import {KeyMap} from '../../utils/key-map';
 import {actions as engineActions} from '../../reducers/engine';
@@ -10,6 +10,7 @@ import {connect} from 'preact-redux';
 import {actions as shellActions} from '../../reducers/shell';
 import {withPlayer} from '../player';
 import {withLogger} from 'components/logger';
+import {Tooltip} from 'components/tooltip';
 
 /**
  * mapping state to props
@@ -30,6 +31,9 @@ const COMPONENT_NAME = 'VrStereo';
 )
 @withPlayer
 @withLogger(COMPONENT_NAME)
+@withText({
+  vrStereoText: 'controls.vrStereo'
+})
 /**
  * VrStereo component
  *
@@ -79,10 +83,10 @@ class VrStereo extends Component {
     }
     return (
       <div className={[style.controlButtonContainer, style.controlVrStereo].join(' ')}>
-        <Localizer>
+        <Tooltip label={this.props.vrStereoText}>
           <button
             tabIndex="0"
-            aria-label={<Text id={'controls.vrStereo'} />}
+            aria-label={this.props.vrStereoText}
             className={this.props.vrStereoMode ? [style.controlButton, style.vrStereoMode].join(' ') : style.controlButton}
             onClick={() => this.onClick()}
             onKeyDown={e => {
@@ -93,7 +97,7 @@ class VrStereo extends Component {
             <Icon type={IconType.vrStereo} />
             <Icon type={IconType.vrStereoFull} />
           </button>
-        </Localizer>
+        </Tooltip>
       </div>
     );
   }

diff --git a/src/styles/_inputs.scss b/src/styles/_inputs.scss
@@ -66,7 +66,6 @@
 
   select {
     font-size: 15px;
-    font-family: $font-family;
     color: #fff;
     -webkit-appearance: none;
     border: 0;

diff --git a/src/styles/_shell.scss b/src/styles/_shell.scss
@@ -12,6 +12,10 @@
   user-select: none;
   -webkit-tap-highlight-color: transparent;
 
+  .playback-gui-wrapper {
+    font-family: $font-family;
+  }
+
   &:-webkit-full-screen {
     width: 100%;
     height: 100%;
@@ -31,16 +35,10 @@
     opacity: 0;
     overflow: hidden;
     font-size: 0;
-    font-family: $font-family;
 
     label {
       margin-bottom: 0;
     }
-
-    input,
-    textarea {
-      font-family: $font-family;
-    }
   }
   :global(.overlay-portal) {
     position: absolute;
@@ -64,7 +62,7 @@
 }
 
 .player.nav {
-* {
+  * {
     &:focus {
       outline: 1px solid $tab-focus-color !important;
     }

diff --git a/src/ui-presets/error.js b/src/ui-presets/error.js
@@ -13,7 +13,7 @@ const PRESET_NAME = 'Error';
  */
 export function ErrorUI(): React$Element<any> {
   return (
-    <div className={style.playbackGuiWWrapper}>
+    <div className={style.playbackGuiWrapper}>
       <ErrorOverlay />
     </div>
   );

diff --git a/src/ui-presets/idle.js b/src/ui-presets/idle.js
@@ -12,7 +12,7 @@ const PRESET_NAME = 'Idle';
  */
 export function IdleUI(): React$Element<any> {
   return (
-    <div className={style.playbackGuiWWrapper}>
+    <div className={style.playbackGuiWrapper}>
       <Loading />
     </div>
   );

diff --git a/src/ui-presets/live.js b/src/ui-presets/live.js
@@ -38,7 +38,7 @@ const PRESET_NAME = 'Live';
 export function LiveUI(props: any): React$Element<any> {
   props.updateIsKeyboardEnabled(true);
   return (
-    <Container className={style.playbackGuiWWrapper} name={'VideoOverlay'} preAppendTo={'Backdrop'}>
+    <Container className={style.playbackGuiWrapper} name={'VideoOverlay'} preAppendTo={'Backdrop'}>
       <Loading />
       <Container className={style.playerGui} name={'PlayerGUI'} id="player-gui">
         <OverlayPortal />

diff --git a/src/ui-presets/playback.js b/src/ui-presets/playback.js
@@ -43,7 +43,7 @@ const PRESET_NAME = 'Playback';
 function PlaybackUI(props: any): React$Element<any> {
   props.updateIsKeyboardEnabled(true);
   return (
-    <Container className={style.playbackGuiWWrapper} name={'VideoOverlay'} preAppendTo={'Backdrop'}>
+    <Container className={style.playbackGuiWrapper} name={'VideoOverlay'} preAppendTo={'Backdrop'}>
       <Loading />
       <Container className={style.playerGui} name={'PlayerGUI'} id="player-gui">
         <OverlayPortal />