Reduce rerenders in the metadata tab

This patch rewrites the Metadata component. This accomplishes:
- Stop the whole Metadata component from rerendering
each time redux state is updated. This was causing ui elements to
become unresponsive in certain cases (e.g. having tens of thousands of
series in your Opencast).
- Makes the code in the Metadata component far less
difficult to read.

Author: Arnei

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

@@ -30,6 +30,7 @@ import { LuMoveHorizontal } 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 = () => {
 
@@ -45,6 +46,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(() => {
@@ -76,6 +78,13 @@ const Cutting: React.FC = () => {
     }
   }, [videoURLStatus, dispatch, error, t, errorReason, duration]);
 
+  // Already try fetching Metadata to reduce wait time
+  useEffect(() => {
+    if (metadataGetStatus === "idle") {
+      dispatch(fetchMetadata());
+    }
+  }, [metadataGetStatus, dispatch]);
+
   // Style
   const cuttingStyle = css({
     display: "flex",