Added tippyjs-react for Tooltips

package.json

@@ -17,6 +17,7 @@
     "@testing-library/react": "^9.5.0",
     "@theme-ui/color": "^0.3.5",
     "@theme-ui/components": "^0.3.5",
+    "@tippyjs/react": "^4.2.6",
     "deepmerge": "^4.2.2",
     "eslint": "^7.32.0",
     "eslint-config-react-app": "^6.0.0",

src/Tooltip.js

@@ -0,0 +1,31 @@
+//; -*- mode: rjsx;-*-
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
+
+import Tippy from '@tippyjs/react';
+import 'tippy.js/dist/tippy.css';
+import './style/global-style';
+
+const Tooltip = ({ content, ...props }) => (
+
+    <Tippy 
+        content = { <span> {content} </span> }
+        interactive={true}
+        delay={300}
+        theme='studio'
+
+        sx={{
+            fontSize: '16px',
+            backgroundColor: '#43a472',
+            color: 'white',
+            lineHeight: 'normal',
+            fontFamily: 'Open Sans',
+        }}
+
+        {...props}
+    >       
+        <span> { props.children} </span>
+    </Tippy>
+);
+
+export default Tooltip;

src/i18n/locales/en.json

@@ -136,5 +136,8 @@
   "warning-recorder-not-supported": "Your browser does not support recording media streams.",
   "warning-recorder-safari-hint": "If you are using Safari, you can enable the experimental feature 'MediaRecorder' in settings. However, on macOS, we recommend switching to Chrome or Firefox.",
   "warning-missing-connection-settings": "Connection to Opencast is not fully established: uploading is disabled. Please configure the connection in <1>the settings</1> (you won't lose your recording).",
-  "settings-back-to-recording": "Back to recording"
+  "settings-back-to-recording": "Back to recording",
+
+  "video-settings-open": "Open video settings",
+  "video-settings-close": "Close video settings"
 }

src/style/global-style.js

@@ -50,6 +50,10 @@ button:focus-visible {
   outline: 5px solid #2e724f !important;
   outline-offset: -3px;
 }
+
+.tippy-box[data-theme~='studio'] > .tippy-arrow::before {
+  color: #43a472;
+}
 `;
 
 export default GlobalStyle;

src/ui/header.js

@@ -199,23 +199,20 @@ const Navigation = props => {
         }}
       >
         <NavElement
-          title={t('nav-recording')}
           target="/"
           icon={faVideo}
           onClick={closeMenu}
         >
           {t('nav-recording')}
         </NavElement>
         <NavElement
-          title={t('nav-settings')}
           target="/settings"
           icon={faWrench}
           onClick={closeMenu}
         >
           {t('nav-settings')}
         </NavElement>
         <NavElement
-          title={t('nav-about')}
           target="/about"
           icon={faInfoCircle}
           onClick={closeMenu}

src/ui/settings/opencast.js

@@ -149,7 +149,7 @@ function OpencastSettings({ settingsManager }) {
           /> }
 
           <footer sx={{ mt: 4 }}>
-            <Button title={t('upload-settings-button-store')} sx={{ verticalAlign: 'middle' }}>
+            <Button sx={{ verticalAlign: 'middle' }}>
               {t('upload-settings-button-store')}
             </Button>
             { icon && <FontAwesomeIcon

src/ui/studio/audio-setup/index.js

@@ -218,7 +218,6 @@ const OptionButton = ({ children, icon, label, onClick }) => {
   return (
     <button
       onClick={onClick}
-      title={label}
       sx={{
         fontFamily: 'inherit',
         color: 'gray.0',

src/ui/studio/elements.js

@@ -54,7 +54,6 @@ export function ActionButtons({ prev = null, next = null, children }) {
             onClick={prev.onClick}
             disabled={prev.disabled}
             danger={prev.danger || false}
-            title={t(prev.label || 'back-button-label')}
           >
             <FontAwesomeIcon icon={faCaretLeft} />
             {t(prev.label || 'back-button-label')}
@@ -72,7 +71,6 @@ export function ActionButtons({ prev = null, next = null, children }) {
             }}
             onClick={next.onClick}
             disabled={next.disabled}
-            title={t(next.label || 'next-button-label')}
           >
             {t(next.label || 'next-button-label')}
             <FontAwesomeIcon icon={faCaretRight} />

src/ui/studio/recording/recording-controls.js

@@ -15,6 +15,8 @@ import { PauseButton, RecordButton, ResumeButton, StopButton } from './recording
 import Clock from './clock';
 import { STATE_INACTIVE, STATE_PAUSED, STATE_RECORDING } from './index.js';
 
+import Tooltip from '../../../Tooltip';
+
 function addRecordOnStop(dispatch, deviceType) {
   return ({ media, url, mimeType, dimensions }) => {
     dispatch({ type: 'ADD_RECORDING', payload: { deviceType, media, url, mimeType, dimensions } });
@@ -152,38 +154,42 @@ export default function RecordingControls({
       <div className="buttons" sx={{ display: 'flex', alignItems: 'center' }}>
         {recordingState !== STATE_INACTIVE && <div sx={{ flex: 1, textAlign: 'right' }}>
           {recordingState === STATE_RECORDING && (
-            <PauseButton
-              title={t('pause-button-title')}
-              recordingState={recordingState}
-              onClick={handlePause}
-            />
+            <Tooltip content={t('pause-button-title')} offset={[0,50]}>
+              <PauseButton
+                recordingState={recordingState}
+                onClick={handlePause}
+              />
+            </Tooltip>
           )}
 
           {recordingState === STATE_PAUSED && (
-            <ResumeButton
-              title={t('resume-button-title')}
-              recordingState={recordingState}
-              onClick={handleResume}
-            />
+            <Tooltip content={t('resume-button-title')} offset={[0,50]}>
+              <ResumeButton
+                recordingState={recordingState}
+                onClick={handleResume}
+              />
+            </Tooltip>
           )}
         </div>}
 
         <div className="center">
           {recordingState === STATE_INACTIVE ? (
-            <RecordButton
-              large
-              title={t('record-button-title')}
-              recordingState={recordingState}
-              onClick={handleRecord}
-              disabled={!canRecord}
-            />
+            <Tooltip content={t('record-button-title')} offset={[0,50]}>
+              <RecordButton
+                large
+                recordingState={recordingState}
+                onClick={handleRecord}
+                disabled={!canRecord}
+              />
+            </Tooltip>
           ) : (
-            <StopButton
-              large
-              title={t('stop-button-title')}
-              recordingState={recordingState}
-              onClick={handleStop}
-            />
+            <Tooltip content={t('stop-button-title')} offset={[0,50]}>
+              <StopButton
+                large
+                recordingState={recordingState}
+                onClick={handleStop}
+              />
+            </Tooltip>
           )}
         </div>
 

src/ui/studio/review/index.js

@@ -15,6 +15,7 @@ import { useSettings } from '../../../settings';
 import Notification from '../../notification';
 import { ReactComponent as CutOutIcon } from './cut-out-icon.svg';
 import { ReactComponent as CutHereIcon } from './cut-here-icon.svg';
+import Tooltip from '../../../Tooltip';
 
 
 // In some situation we would like to set the current time to 0 or check for it.
@@ -237,25 +238,26 @@ const VideoControls = ({ currentTime, previewController }) => {
         invariant={(start, end) => start < end}
         { ...{ recordingDispatch, previewController, currentTime } }
       />}
-      <button
-        title={previewController.current?.isPlaying ? t('review-pause') : t('review-play')}
-        sx={{ backgroundColor: 'transparent', border: 'none', mx: 3 }}
-        onClick={() => {
-          const controller = previewController.current;
-          if (controller) {
-            if (controller.isPlaying) {
-              controller.pause();
-            } else if (controller.isReadyToPlay) {
-              controller.play();
+      <Tooltip content={previewController.current?.isPlaying ? t('review-pause') : t('review-play')}>
+        <button
+          sx={{ backgroundColor: 'transparent', border: 'none', mx: 3 }}
+          onClick={() => {
+            const controller = previewController.current;
+            if (controller) {
+              if (controller.isPlaying) {
+                controller.pause();
+              } else if (controller.isReadyToPlay) {
+                controller.play();
+              }
             }
-          }
-        }}
-      >
-        <FontAwesomeIcon
-          icon={previewController.current?.isPlaying ? faPause : faPlay}
-          sx={{ fontSize: '50px', opacity: 0.8, '&:hover': { opacity: 1 } }}
-        />
-      </button>
+          }}
+        >
+          <FontAwesomeIcon
+            icon={previewController.current?.isPlaying ? faPause : faPlay}
+            sx={{ fontSize: '50px', opacity: 0.8, '&:hover': { opacity: 1 } }}
+          />
+        </button>
+      </Tooltip>
       {settings.review?.disableCutting || <CutControls
         marker="end"
         value={end}
@@ -282,14 +284,16 @@ const CutControls = (
             previewController.current.currentTime = value;
           }} />
         </Trans>
-        <IconButton title={t(`review-remove-cut-point`, { context: marker })} onClick={
-          () => recordingDispatch({
-            type: `UPDATE_${marker.toUpperCase()}`,
-            payload: null,
-          })
-        }>
-          <FontAwesomeIcon icon={faTrash} />
-        </IconButton>
+        <Tooltip content={t(`review-remove-cut-point`)}>
+          <IconButton context={marker} onClick={
+            () => recordingDispatch({
+              type: `UPDATE_${marker.toUpperCase()}`,
+              payload: null,
+            })
+          }>
+            <FontAwesomeIcon icon={faTrash} />
+          </IconButton>
+        </Tooltip>
       </Fragment> }
     </div>
   );
@@ -305,8 +309,8 @@ const CutControls = (
   })();
 
   const button = (
+    <Tooltip content={t(`review-set-${marker}`)}>
     <button
-      title={t(`review-set-${marker}`)}
       {...{ disabled }}
       onClick={() => {
         let value = previewController.current.currentTime;
@@ -337,7 +341,7 @@ const CutControls = (
       }}
     >
       <CutHereIcon sx={{ height: '32px', transform: marker === 'end' ? 'scaleX(-1)' : '' }} />
-    </button>
+    </button></Tooltip>
   );
 
   return marker === 'start'

src/ui/studio/save-creation/recording-preview.js

@@ -91,7 +91,6 @@ const RecordingPreview = ({ onDownload, recording, title, presenter }) => {
       <Button
         as="a"
         role="button"
-        title={t('save-creation-download-button')}
         sx={{
           width: '100%',
           maxWidth: '215px',