Show info box instead of unactionable track selection

Reverts previous change of not showing the
track selection at all, and instead shows
an info box in the track selection view.

editor-settings.toml

@@ -75,7 +75,6 @@
 [trackSelection]
 
 # If the track selection appears in the main menu.
-# Note: The track selection will never appear if there is only one track.
 # Type: boolean
 # Default: true
 #show = true

src/i18n/locales/en-US.json

@@ -236,7 +236,8 @@
       "cannotDeleteTrackText": "Cannot Delete Track",
       "deleteTrackTooltip": "Do not encode and publish this track.",
       "restoreTrackTooltip": "Encode and publish this track.",
-      "cannotDeleteTrackTooltip": "Cannot remove this track from publication."
+      "cannotDeleteTrackTooltip": "Cannot remove this track from publication.",
+      "noSelectionPossible": "Track selection is disabled for this video, because there are not enough tracks to deselect any."
     },
 
     "subtitles": {

src/main/MainMenu.tsx

@@ -14,7 +14,7 @@ import { setPageNumber } from "../redux/finishSlice";
 import { MainMenuStateNames } from "../types";
 import { settings } from "../config";
 import { basicButtonStyle, flexGapReplacementStyle } from "../cssStyles";
-import { selectVideoCount, setIsPlaying } from "../redux/videoSlice";
+import { setIsPlaying } from "../redux/videoSlice";
 
 import { useTranslation } from "react-i18next";
 import { resetPostRequestState as metadataResetPostRequestState } from "../redux/metadataSlice";
@@ -31,8 +31,6 @@ const MainMenu: React.FC = () => {
   const { t } = useTranslation();
   const theme = useTheme();
 
-  const videoCount = useAppSelector(selectVideoCount);
-
   const mainMenuStyle = css({
     borderRight: `${theme.menuBorder}`,
     minWidth: "120px",
@@ -61,7 +59,7 @@ const MainMenu: React.FC = () => {
         bottomText={t(MainMenuStateNames.metadata)}
         ariaLabelText={t(MainMenuStateNames.metadata)}
       />}
-      {settings.trackSelection.show && videoCount > 1 && <MainMenuButton
+      {settings.trackSelection.show && <MainMenuButton
         Icon={LuFilm}
         stateName={MainMenuStateNames.trackSelection}
         bottomText={t(MainMenuStateNames.trackSelection)}

src/main/TrackSelection.tsx

@@ -2,13 +2,13 @@ import React from "react";
 import { css } from "@emotion/react";
 
 import { IconType } from "react-icons";
-import { LuTrash } from "react-icons/lu";
+import { LuTrash, LuInfo } from "react-icons/lu";
 import { ReactComponent as TrashRestore } from "../img/trash-restore.svg";
 import ReactPlayer from "react-player";
 
 import { Track } from "../types";
 import { useAppDispatch, useAppSelector } from "../redux/store";
-import { selectVideos, setTrackEnabled } from "../redux/videoSlice";
+import { selectVideoCount, selectVideos, setTrackEnabled } from "../redux/videoSlice";
 import {
   backgroundBoxStyle,
   basicButtonStyle,
@@ -28,6 +28,8 @@ import { ThemedTooltip } from "./Tooltip";
  */
 const TrackSelection: React.FC = () => {
 
+  const videoCount = useAppSelector(selectVideoCount);
+
   // Generate list of tracks
   const tracks: Track[] = useAppSelector(selectVideos);
   const enabledCount = tracks.filter(t => t.video_stream.enabled).length;
@@ -56,9 +58,12 @@ const TrackSelection: React.FC = () => {
   return (
     <div css={trackSelectionStyle}>
       <Header />
-      <div css={trackAreaStyle}>
-        {trackItems}
-      </div>
+      {videoCount > 1 ?
+        <div css={trackAreaStyle}>
+          {trackItems}
+        </div>
+        : <InfoBox />
+      }
     </div>
   );
 };
@@ -78,6 +83,19 @@ const Header: React.FC = () => {
   );
 };
 
+const InfoBox: React.FC = () => {
+
+  const { t } = useTranslation();
+  const theme = useTheme();
+
+  return (
+    <div css={backgroundBoxStyle(theme)}>
+      <LuInfo />
+      <span css={{marginLeft: "10px"}}>{t("trackSelection.noSelectionPossible")}</span>
+    </div>
+  )
+}
+
 
 const TrackItem: React.FC<{ track: Track, enabledCount: number; }> = ({ track, enabledCount }) => {