Merge pull request #719 from LukasKalbertodt/minor-fixes-and-improvem…

…ents Several bug fixes and minor improvements
elan-ev · Sep 7, 2020 · 141fee6 · 141fee6
2 parents 2547168 + c01f3c3
commit 141fee6
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 17 deletions.
diff --git a/src/i18n/index.js b/src/i18n/index.js
@@ -41,17 +41,25 @@ i18n
           if (value == null) {
             return '-:--:--';
           }
-          const seconds = Math.floor(value % 60);
+
+          const seconds = value % 60;
           value /= 60;
           const minutes = Math.floor(value % 60);
           value /= 60;
           const hours = Math.floor(value % 60);
-          let result = [minutes, seconds].map(
-            unit => (unit < 10 ? '0' : '') + unit
-          );
+
+          const secondsString = seconds.toLocaleString(lng, {
+            minimumFractionDigits: 1,
+            maximumFractionDigits: 1,
+          });
+          let result = [
+            (minutes < 10 ? '0' : '') + minutes,
+            (seconds < 10 ? '0' : '') + secondsString,
+          ];
           if (hours) {
             result.unshift(hours);
           }
+
           return result.join(':');
         default:
           return value;

diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
@@ -52,6 +52,7 @@
   "sources-video-none-available": "Ihr Browser/Gerät unterstützt den Zugriff auf das Kamerabild und den Bildschirm nicht. Bitte nutzen Sie einen unterstützten Browser.",
   "sources-video-reselect-source": "Quelle(n) neu auswählen",
   "sources-video-no-cam-detected": "Keine Kamera erkannt",
+  "sources-video-display-not-supported": "Bildschirmaufnahme nicht unterstützt",
   "sources-scenario-display-and-user": "Bildschirm & Kamera",
   "sources-scenario-display": "Bildschirm",
   "sources-scenario-user": "Kamera",

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -61,6 +61,7 @@
   "sources-video-none-available": "Your browser/device does not support capturing display or camera video :-(",
   "sources-video-reselect-source": "Reselect source(s)",
   "sources-video-no-cam-detected": "No camera detected",
+  "sources-video-display-not-supported": "Display capture not supported",
   "sources-video-device": "Device",
   "sources-video-aspect-ratio": "Aspect ratio",
   "sources-video-aspect-ratio-auto": "auto",

diff --git a/src/ui/header.js b/src/ui/header.js
@@ -67,15 +67,15 @@ const Brand = () => {
 
   return (
     <Link to={{ pathname: "/", search: location.search }}>
-      <picture>
+      <picture sx={{ display: 'block', height: theme => theme.heights.headerHeight }}>
         <source
           media="(min-width: 920px)"
           srcSet={`${process.env.PUBLIC_URL}/opencast-studio.svg`}
         />
         <img
           src={`${process.env.PUBLIC_URL}/opencast-studio-small.svg`}
           alt="Opencast Studio"
-          sx={{ height: 50 }}
+          sx={{ height: theme => theme.heights.headerHeight }}
         />
       </picture>
     </Link>

diff --git a/src/ui/studio/audio-setup/index.js b/src/ui/studio/audio-setup/index.js
@@ -161,7 +161,7 @@ const MicrophonePreview = ({ reselectSource, enterStudio }) => {
         >
           {
             devices.map((d, i) => (
-              <option key={i} value={d.deviceId}>{ d.label }</option>
+              <option key={i} value={d.deviceId}>{ d.label || "unlabeled microphone" }</option>
             ))
           }
         </select>

diff --git a/src/ui/studio/elements.js b/src/ui/studio/elements.js
@@ -105,7 +105,7 @@ export const useVideoBoxResize = () => React.useContext(VideoBoxResizeContext);
 // - `dimensions`: a function returning `[width, height]` of the child (also
 //   defining the aspect ratio). We require the dimensions instead of only the
 //   aspect ratio to better detect changes in the video stream.
-export function VideoBox({ gap = 0, minWidth = 180, children }) {
+export function VideoBox({ gap = 0, minWidth = 180, minHeight = 140, children }) {
   const { ref, width = 1, height = 1 } = useResizeObserver();
 
   // This is a dummy state to force a rerender.
@@ -159,7 +159,7 @@ export function VideoBox({ gap = 0, minWidth = 180, children }) {
 
       return (
         <VideoBoxResizeContext.Provider value={resizeVideoBox}>
-          <div ref={ref} sx={{ flex: '1 0 0', minHeight: 0, display: 'flex' }}>
+          <div ref={ref} sx={{ flex: '1 0 0', minHeight, display: 'flex' }}>
             <div sx={{
               height: childHeight,
               width: childWidth,
@@ -266,7 +266,7 @@ export function VideoBox({ gap = 0, minWidth = 180, children }) {
               display: 'flex',
               flexDirection,
               justifyContent: 'space-between',
-              minHeight: 0,
+              minHeight,
             }}
           >
             <div sx={{

diff --git a/src/ui/studio/review/index.js b/src/ui/studio/review/index.js
@@ -175,10 +175,14 @@ const Scrubber = ({ previewController, currentTime }) => {
         <div sx={{
           position: 'relative',
           backgroundColor: '#6bc295',
-          height: '10px',
+          height: '12px',
           width: '100%',
-          borderRadius: '5px',
+          borderRadius: '6px',
           overflow: 'hidden',
+          '@media not (any-pointer: fine)': {
+            height: '20px',
+            borderRadius: '10px',
+          }
         }}>
           { (start != null && start > 0) && <div sx={{
             left: 0,

diff --git a/src/ui/studio/save-creation/index.js b/src/ui/studio/save-creation/index.js
@@ -231,7 +231,7 @@ export default function SaveCreation(props) {
         </div>
       </div>
 
-      <div sx={{ flex: '1 0 40px' }}></div>
+      <div sx={{ flex: '1 0 32px' }}></div>
 
       <ActionButtons
         next={null}

diff --git a/src/ui/studio/video-setup/index.js b/src/ui/studio/video-setup/index.js
@@ -19,7 +19,7 @@ import {
 } from '../../../studio-state';
 import { useSettings } from '../../../settings';
 
-import { queryMediaDevices } from '../../../util';
+import { queryMediaDevices, onMobileDevice } from '../../../util';
 import Notification from '../../notification';
 
 import {
@@ -209,16 +209,21 @@ const SourceSelection = ({ setActiveSource, userConstraints, displayConstraints,
         },
       }}
     >
-      { displaySupported && <OptionButton
+      { (displaySupported || !onMobileDevice()) && <OptionButton
         label={t('sources-scenario-display')}
         icon={faChalkboard}
         onClick={clickDisplay}
+        disabledText={displaySupported ? false : t('sources-video-display-not-supported')}
       />}
-      { displaySupported && userSupported && <OptionButton
+      { (displaySupported || !onMobileDevice()) && userSupported && <OptionButton
         label={t('sources-scenario-display-and-user')}
         icon={faChalkboardTeacher}
         onClick={clickBoth}
-        disabledText={userHasWebcam ? false : t('sources-video-no-cam-detected')}
+        disabledText={
+          displaySupported
+            ? (userHasWebcam ? false : t('sources-video-no-cam-detected'))
+            : t('sources-video-display-not-supported')
+        }
       />}
       { userSupported && <OptionButton
         label={t('sources-scenario-user')}