Remove warning triangle and center error message for video select errors

Fixes elan-ev#1103
LukasKalbertodt · Sep 28, 2023 · 07754b5 · 07754b5
1 parent d4c1507
commit 07754b5
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 16 deletions.
diff --git a/src/steps/video-setup/preview.tsx b/src/steps/video-setup/preview.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useRef } from "react";
 import { Spinner, match, unreachable } from "@opencast/appkit";
-import { FiAlertTriangle } from "react-icons/fi";
 import { useTranslation } from "react-i18next";
 
 import { COLORS, dimensionsOf } from "../../util";
@@ -24,15 +23,18 @@ export const SourcePreview: React.FC<SourcePreviewProps> = ({ inputs }) => {
     1: () => [{
       body: <StreamPreview input={inputs[0]} />,
       dimensions: () => dimensionsOf(inputs[0].stream),
+      calculatedHeight: (inputs[0].allowed !== false && inputs[0].unexpectedEnd === false),
     }],
     2: () => [
       {
         body: <StreamPreview input={inputs[0]} />,
         dimensions: () => dimensionsOf(inputs[0].stream),
+        calculatedHeight: (inputs[0].allowed !== false && inputs[0].unexpectedEnd === false),
       },
       {
         body: <StreamPreview input={inputs[1]} />,
         dimensions: () => dimensionsOf(inputs[1].stream),
+        calculatedHeight: (inputs[1].allowed !== false && inputs[1].unexpectedEnd === false),
       },
     ],
   }, unreachable);
@@ -79,7 +81,14 @@ const PreviewVideo: React.FC<{ input: Input }> = ({ input }) => {
   if (!stream) {
     let inner: JSX.Element;
     if (allowed === false || unexpectedEnd) {
-      inner = <FiAlertTriangle css={{ fontSize: 48, color: COLORS.danger4 }} />;
+      inner = <div>
+        {allowed === false && <ErrorBox
+          title={t(`source-${input.isDesktop ? "display" : "user"}-not-allowed-title`)}
+          body={t(`source-${input.isDesktop ? "display" : "user"}-not-allowed-text`)}
+        />}
+        {/* TODO: differentiate between desktop and camera for better error */}
+        {unexpectedEnd && <ErrorBox body={t("error-lost-video-stream")} />}
+      </div>;
     } else {
       inner = <Spinner size={75} css={{ color: COLORS.neutral60 }} />;
     }
@@ -91,17 +100,6 @@ const PreviewVideo: React.FC<{ input: Input }> = ({ input }) => {
         width: "100%",
         height: "100%",
       }}>
-        {allowed === false && <ErrorBox
-          title={t(`source-${input.isDesktop ? "display" : "user"}-not-allowed-title`)}
-          body={t(`source-${input.isDesktop ? "display" : "user"}-not-allowed-text`)}
-          css={{ marginBottom: 0 }}
-        />}
-        {/* TODO: differentiate between desktop and camera for better error */}
-        {unexpectedEnd && <ErrorBox
-          body={t("error-lost-video-stream")}
-          css={{ marginBottom: 0 }}
-        />}
-
         <div css={{
           flex: "1",
           display: "flex",

diff --git a/src/ui/VideoBox.tsx b/src/ui/VideoBox.tsx
@@ -21,6 +21,12 @@ export type VideoBoxProps = {
 export type VideoBoxChild = {
   body: JSX.Element;
   dimensions: () => [number, number] | null;
+  /**
+   * If `true` (default), the calculated height is set as `height` of the div.
+   * If `false`, it is not set, which allows the div to grow in height. Used to
+   * display error messages.
+   */
+  calculatedHeight?: boolean;
 };
 
 // Manages one or two children with given aspect ratio.
@@ -104,7 +110,7 @@ export const VideoBox: React.FC<VideoBoxProps> = ({
         <VideoBoxResizeContext.Provider value={resizeVideoBox}>
           <div ref={ref} css={{ flex: "1 0 0", minHeight, display: "flex" }}>
             <div css={{
-              height: childHeight,
+              height: (child.calculatedHeight ?? true) ? childHeight : undefined,
               width: childWidth,
               minWidth: `${minWidth}px`,
               margin: "auto",
@@ -213,15 +219,15 @@ export const VideoBox: React.FC<VideoBoxProps> = ({
             }}
           >
             <div css={{
-              height: heights[0],
+              height: (children[0].calculatedHeight ?? true) ? heights[0] : undefined,
               width: widths[0],
               minWidth: `${minWidth}px`,
               margin: "auto",
             }}>
               { children[0].body }
             </div>
             <div css={{
-              height: heights[1],
+              height: (children[1].calculatedHeight ?? true) ? heights[1] : undefined,
               width: widths[1],
               minWidth: `${minWidth}px`,
               margin: "auto",