Merge branch 'metadata-rework-reduce-rerenders' of Arnei/opencast-editor into r/18.x

Pull request #1608

  Reduce rerenders in the metadata tab

Author: gregorydlogan

src/cssStyles.tsx

@@ -171,9 +171,7 @@ type MyOptionType = {
   value: string;
 };
 
-type IsMulti = false;
-
-export function selectFieldStyle(theme: Theme): StylesConfig<MyOptionType, IsMulti> {
+export function selectFieldStyle<IsMulti extends boolean, >(theme: Theme): StylesConfig<MyOptionType, IsMulti> {
   return {
     control: (provided, state) => ({
       ...provided,

src/main/Cutting.tsx

@@ -31,6 +31,7 @@ import { LuHourglass } from "react-icons/lu";
 import { css } from "@emotion/react";
 import VideoPlayers from "./VideoPlayers";
 import VideoControls from "./VideoControls";
+import { fetchMetadata, selectGetStatus as selectMetadataGetStatus } from "../redux/metadataSlice";
 
 const Cutting: React.FC = () => {
 
@@ -47,6 +48,7 @@ const Cutting: React.FC = () => {
   const theme = useTheme();
   const errorReason = useAppSelector((state: { videoState: { errorReason: httpRequestState["errorReason"]; }; }) =>
     state.videoState.errorReason);
+  const metadataGetStatus = useAppSelector(selectMetadataGetStatus);
 
   // Try to fetch URL from external API
   useEffect(() => {
@@ -86,6 +88,13 @@ const Cutting: React.FC = () => {
     }
   }, [videoURLStatus, dispatch, error, t, errorReason, duration, videos]);
 
+  // Already try fetching Metadata to reduce wait time
+  useEffect(() => {
+    if (metadataGetStatus === "idle") {
+      dispatch(fetchMetadata());
+    }
+  }, [metadataGetStatus, dispatch]);
+
   // Style
   const cuttingStyle = css({
     display: "flex",