Retouch desktop audio indicator

elan-ev · Nov 20, 2023 · a6faf88 · a6faf88
1 parent 8934649
commit a6faf88
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 54 deletions.
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
@@ -55,7 +55,9 @@
       "aspect-ratio-auto": "auto",
       "quality": "Qualität",
       "quality-auto": "auto",
-      "preferences-note": "<0>Hinweis:</0> Dies sind lediglich Präferenzen. Es ist nicht garantiert, dass alle Einstellungen von Ihrem Gerät unterstützt werden. Im Zweifelsfall 'auto' wählen."
+      "preferences-note": "<0>Hinweis:</0> Dies sind lediglich Präferenzen. Es ist nicht garantiert, dass alle Einstellungen von Ihrem Gerät unterstützt werden. Im Zweifelsfall 'auto' wählen.",
+      "display-audio-shared": "Bildschirmton wird aufgezeichnet.",
+      "display-audio-not-shared": "Bildschirmton wird nicht aufgezeichnet. <0>Hinweis</0>: Nicht alle Browser und Betriebssysteme unterstützen die Aufnahme des Bildschirmtons."
     },
     "audio": {
       "label": "Audioquelle auswählen",

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -12,9 +12,6 @@
   "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.",
 
-  "desktop-audio-info": "Desktop audio is recorded",
-  "no-desktop-audio-info": "Desktop audio is not recorded. \n If you want to record desktop audio, please use one of the following browsers: \n - Google Chrome, Edge and Opera: On Windows, the entire system audio can be captured, but on Linux and macOS only the audio of a tab can be captured. \n - Firefox, Safari and Internet Explorer do not support recording desktop audio.",
-
   "header": {
     "info": {
       "label": "Info"
@@ -58,7 +55,9 @@
       "aspect-ratio-auto": "auto",
       "quality": "Quality",
       "quality-auto": "auto",
-      "preferences-note": "<0>Note:</0> these are merely preferences and it cannot be guaranteed that all options are actually supported on your device. If in doubt, choose 'auto'."
+      "preferences-note": "<0>Note:</0> these are merely preferences and it cannot be guaranteed that all options are actually supported on your device. If in doubt, choose 'auto'.",
+      "display-audio-shared": "Display audio will be recorded.",
+      "display-audio-not-shared": "Display audio will not be recorded. <0>Note</0>: Not all browsers and operating systems support display audio capture."
     },
     "audio": {
       "label": "Select audio source",

diff --git a/src/steps/video-setup/prefs.tsx b/src/steps/video-setup/prefs.tsx
@@ -18,6 +18,7 @@ import {
   stopUserCapture,
 } from "../../capturer";
 import { Select } from "../../ui/Select";
+import { OVERLAY_STYLE } from "./preview";
 
 
 /**
@@ -218,29 +219,14 @@ export const StreamSettings: React.FC<StreamSettingsProps> = ({ isDesktop, strea
             onClick={() => setIsExpanded(old => !old)}
             aria-label={label}
             css={{
-              border: "none",
-              display: "inline-block",
-              backgroundColor: "rgba(0, 0, 0, 0.3)",
-              color: "white",
-              padding: 8,
+              ...OVERLAY_STYLE,
               fontSize: 26,
-              backdropFilter: "invert(0.3) blur(4px)",
-              lineHeight: 0,
-              borderRadius: "10px",
-              cursor: "pointer",
-              "&:hover, &:focus-visible": {
-                backgroundColor: "rgba(0, 0, 0, 0.5)",
-              },
               "> svg": {
                 transition: "transform 0.2s",
               },
               "&:hover > svg, &:focus > svg": {
                 transform: isExpanded ? "none" : "rotate(45deg)",
               },
-              "&:focus-visible": {
-                outline: "5px dashed white",
-                outlineOffset: -2.5,
-              },
             }}
           >
             {isExpanded ? <FiX /> : <FiSettings />}

diff --git a/src/steps/video-setup/preview.tsx b/src/steps/video-setup/preview.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef } from "react";
-import { ProtoButton, Spinner, WithTooltip, match, unreachable, useColorScheme } from "@opencast/appkit";
-import { useTranslation } from "react-i18next";
-import { FiInfo, FiVolume2, FiVolumeX } from "react-icons/fi";
+import { Spinner, WithTooltip, match, unreachable, useColorScheme } from "@opencast/appkit";
+import { Trans, useTranslation } from "react-i18next";
+import { LuInfo, LuVolume2, LuVolumeX } from "react-icons/lu";
 
 import { COLORS, dimensionsOf } from "../../util";
 import { VideoBox, useVideoBoxResize } from "../../ui/VideoBox";
@@ -65,7 +65,7 @@ const StreamPreview: React.FC<{ input: Input }> = ({ input }) => {
     }}>
       <PreviewVideo input={input} />
       {input.stream && <>
-        {input.isDesktop && <DesktopAudioInfo stream={input.stream} />}
+        {input.isDesktop && <DisplayAudioInfo stream={input.stream} />}
         <StreamSettings isDesktop={input.isDesktop} stream={input.stream} />
       </>}
     </div>
@@ -150,44 +150,48 @@ const PreviewVideo: React.FC<{ input: Input }> = ({ input }) => {
   );
 };
 
-export const DesktopAudioInfo: React.FC<{ stream: MediaStream }> = ({ stream }) => {
-  const { t } = useTranslation();
+export const DisplayAudioInfo: React.FC<{ stream: MediaStream }> = ({ stream }) => {
   const hasAudio = stream.getAudioTracks().length;
 
   return (
     <div css={{
       position: "absolute",
-      top: 12,
-      right: 12,
-      whiteSpace: "pre-line",
+      top: 8,
+      right: 8,
     }}>
       <WithTooltip
-        placement="bottom"
-        tooltip={t(hasAudio ? "desktop-audio-info" : "no-desktop-audio-info")}
+        placement="top"
+        tooltip={
+          <Trans i18nKey={
+            `steps.video.${hasAudio ? "display-audio-shared" : "display-audio-not-shared"}`
+          }>
+            <strong>Note:</strong> Explanation.
+          </Trans>
+        }
       >
-        <ProtoButton
-          css={{
-            display: "inline-block",
-            backgroundColor: "rgba(0, 0, 0, 0.7)",
-            color: "white",
-            borderRadius: 5,
-            padding: 4,
-            fontSize: 15,
-            backdropFilter: "invert(1)",
-            lineHeight: 0,
-            cursor: "pointer",
-            "&:hover, &:focus-visible": {
-              backgroundColor: "rgba(0, 0, 0, 0.9)",
-            },
-            "&:focus-visible": {
-              outline: "5px dashed white",
-              outlineOffset: -2.5,
-            },
-          }}
-        >
-          <FiInfo /> {hasAudio ? <FiVolume2 /> : <FiVolumeX />}
-        </ProtoButton>
+        <div css={{ ...OVERLAY_STYLE, fontSize: 15 }}>
+          <LuInfo /> {hasAudio ? <LuVolume2 /> : <LuVolumeX />}
+        </div>
       </WithTooltip>
     </div>
   );
 };
+
+export const OVERLAY_STYLE = {
+  border: "none",
+  display: "inline-block",
+  backgroundColor: "rgba(0, 0, 0, 0.3)",
+  color: "white",
+  padding: 8,
+  backdropFilter: "invert(0.3) blur(4px)",
+  lineHeight: 0,
+  borderRadius: 10,
+  cursor: "pointer",
+  "&:hover, &:focus-visible": {
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+  },
+  "&:focus-visible": {
+    outline: "5px dashed white",
+    outlineOffset: -2.5,
+  },
+};