Merge remote-tracking branch 'upstream/r/18.x' into metadata-rework-reduce-rerenders

Author: Arnei

src/globalKeys.ts

@@ -136,5 +136,9 @@ export const KEYMAP: IKeyMap = {
       name: "subtitleList.deleteSegment",
       key: "Shift+Alt+d",
     },
+    addCue: {
+      name: "subtitleList.addCue",
+      key: "Shift+Alt+e",
+    },
   },
 };

src/i18n/locales/en-US.json

@@ -306,7 +306,8 @@
       "addSegmentBelow": "Add segment below",
       "jumpToSegmentAbove": "Jump to segment above",
       "jumpToSegmentBelow": "Jump to segment below",
-      "deleteSegment": "Delete segment"
+      "deleteSegment": "Delete segment",
+      "addCue": "Add segment at current time"
     },
 
     "subtitleVideoArea": {

src/main/Cutting.tsx

@@ -26,7 +26,7 @@ import { useTheme } from "../themes";
 import { setError } from "../redux/errorSlice";
 import { selectTitleFromEpisodeDc } from "../redux/metadataSlice";
 import { titleStyle, titleStyleBold, videosStyle } from "../cssStyles";
-import { LuMoveHorizontal } from "react-icons/lu";
+import { LuHourglass } from "react-icons/lu";
 import { css } from "@emotion/react";
 import VideoPlayers from "./VideoPlayers";
 import VideoControls from "./VideoControls";
@@ -58,7 +58,7 @@ const Cutting: React.FC = () => {
           error: true,
           errorTitle: t("error.workflowActive-errorTitle"),
           errorMessage: t("error.workflowActive-errorMessage"),
-          errorIcon: LuMoveHorizontal,
+          errorIcon: LuHourglass,
         }));
       } else {
         dispatch(setError({

src/main/Save.tsx

@@ -111,9 +111,11 @@ const Save: React.FC = () => {
 export const SaveButton: React.FC<{
   text?: string
   isTransitionToEnd?: boolean
+  startWorkflow?: boolean
 }> = ({
   text,
   isTransitionToEnd = false,
+  startWorkflow = false,
 }) => {
   const { t } = useTranslation();
 
@@ -164,7 +166,7 @@ export const SaveButton: React.FC<{
       tracks: tracks,
       customizedTrackSelection,
       subtitles: prepareSubtitles(),
-      workflow: selectedWorkflowId ? [{ id: selectedWorkflowId }] : undefined,
+      workflow: startWorkflow && selectedWorkflowId ? [{ id: selectedWorkflowId }] : undefined,
     }));
   };
 

src/main/SubtitleTimeline.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { css } from "@emotion/react";
 import { SegmentsList as CuttingSegmentsList, Waveforms } from "./Timeline";
 import {
+  addCueAtIndex,
   selectCurrentlyAt,
   selectSelectedSubtitleById,
   selectSelectedSubtitleId,
@@ -25,6 +26,7 @@ import { ThemedTooltip } from "./Tooltip";
 import { useTranslation } from "react-i18next";
 import { useHotkeys } from "react-hotkeys-hook";
 import { KEYMAP } from "../globalKeys";
+import { shallowEqual } from "react-redux";
 
 /**
  * Copy-paste of the timeline in Video.tsx, so that we can make some small adjustments,
@@ -39,6 +41,7 @@ const SubtitleTimeline: React.FC = () => {
   const dispatch = useAppDispatch();
   const duration = useAppSelector(selectDuration);
   const currentlyAt = useAppSelector(selectCurrentlyAt);
+  const subtitleId = useAppSelector(selectSelectedSubtitleId, shallowEqual);
 
   const { ref, width = 1 } = useResizeObserver<HTMLDivElement>();
   const refTop = useRef<HTMLElement>(null);
@@ -71,6 +74,17 @@ const SubtitleTimeline: React.FC = () => {
 
   const [keyboardJumpDelta, setKeyboardJumpDelta] = useState(1000);  // In milliseconds. For keyboard navigation
 
+  // Callback for adding subtitle segment by hotkey
+  const addCue = (time: number) => {
+    dispatch(addCueAtIndex({
+      identifier: subtitleId,
+      cueIndex: -1,
+      text: "",
+      startTime: time,
+      endTime: time + 5000,
+    }));
+  };
+
   // Callbacks for keyboard controls
   // TODO: Better increases and decreases than ten intervals
   // TODO: Additional helpful controls (e.g. jump to start/end of segment/next segment)
@@ -94,6 +108,11 @@ const SubtitleTimeline: React.FC = () => {
     () => setKeyboardJumpDelta(keyboardJumpDelta => Math.max(keyboardJumpDelta / 10, 1)),
     {}, [keyboardJumpDelta],
   );
+  useHotkeys(
+    KEYMAP.subtitleList.addCue.key,
+    () => addCue(currentlyAt),
+    {}, [currentlyAt],
+  );
 
   // Callback for the scroll container
   const onEndScroll = (e: ScrollEvent) => {
@@ -102,6 +121,14 @@ const SubtitleTimeline: React.FC = () => {
       const offsetX = refTop.current.scrollLeft;
       const scrollLeftMax = (refTop.current.scrollWidth - refTop.current.clientWidth);
       dispatch(setCurrentlyAt((offsetX / scrollLeftMax) * (duration)));
+
+      // Blur active element after scrolling, to ensure hotkeys are working
+      // This is a little hack to work around focus getting stuck in textarea elements from the subtitle list
+      try {
+        (document.activeElement as HTMLElement).blur();
+      } catch (_e) {
+        console.error("Tried to blur active element, but active element cannot be blurred.");
+      }
     }
   };
 

src/main/Thumbnail.tsx

@@ -253,7 +253,7 @@ const ThumbnailTableRow: React.FC<{
     // The "+40" comes from padding that is not included in the "getWidth" function
     generateRef.getWidth() + 40 :
     // Random default
-    440;
+    740;
 
   const renderPriority = (thumbnailPriority: number) => {
     if (isNaN(thumbnailPriority)) {
@@ -300,15 +300,17 @@ const ThumbnailDisplayer: React.FC<{ track: Track; }> = ({ track }) => {
 
   const generalStyle = css({
     width: "100%",
-    maxWidth: "457px",
+    maxWidth: "740px",
     aspectRatio: "16/9",
   });
 
   const imageStyle = css({
+    maxWidth: "457px",
   });
 
   const placeholderStyle = css({
     width: "100vw", // TODO: This is necessary to make the placeholder large enough, but prevents it from shrinking
+    maxWidth: "457px",
     backgroundColor: "grey",
     display: "flex",
     justifyContent: "center",

src/main/WorkflowSelection.tsx

@@ -137,6 +137,7 @@ const WorkflowSelection: React.FC = () => {
           <SaveButton
             isTransitionToEnd={true}
             text={t("workflowSelection.startProcessing-button")}
+            startWorkflow={true}
           />,
           saveStatus,
           saveError,
@@ -153,6 +154,7 @@ const WorkflowSelection: React.FC = () => {
           <SaveButton
             isTransitionToEnd={true}
             text={t("workflowSelection.startProcessing-button")}
+            startWorkflow={true}
           />,
           saveStatus,
           saveError,

src/redux/subtitleSlice.ts

@@ -135,7 +135,7 @@ export const subtitleSlice = createSlice({
         state.subtitles[action.payload.identifier].cues.splice(0, 0, cue);
       }
 
-      if (action.payload.cueIndex >= 0 ||
+      if (action.payload.cueIndex >= 0 &&
         action.payload.cueIndex < state.subtitles[action.payload.identifier].cues.length) {
         state.subtitles[action.payload.identifier].cues.splice(action.payload.cueIndex, 0, cue);
       }

src/util/utilityFunctions.ts

@@ -2,6 +2,7 @@ import { nanoid } from "@reduxjs/toolkit";
 import { WebVTTParser, WebVTTSerializer } from "webvtt-parser";
 import { ExtendedSubtitleCue, SubtitleCue } from "../types";
 import { useEffect, useState, useRef } from "react";
+import i18next from "i18next";
 
 export const roundToDecimalPlace = (num: number, decimalPlace: number) => {
   const decimalFactor = Math.pow(10, decimalPlace);
@@ -131,16 +132,16 @@ export function parseSubtitle(subtitle: string): SubtitleCue[] {
 
 /**
  * Parse language code to language name
- * Returns language name in the language set in the browser
+ * Returns language name in the language set by the user
  * Returns undefined if the input was undefined or the language code could not
  * be parsed
  */
 export function languageCodeToName(lang: string | undefined): string | undefined {
   if (!lang) {
     return undefined;
   }
-  const browserLang = window.navigator.language;
-  const languageNames = new Intl.DisplayNames(browserLang, { type: "language" });
+  const currentLang = i18next.resolvedLanguage;
+  const languageNames = new Intl.DisplayNames(currentLang, { type: "language" });
   try {
     return languageNames.of(lang.trim());
     // eslint-disable-next-line @typescript-eslint/no-unused-vars