- {trackItems}
-
+ {t("trackSelection.videoTracksHeader")}
{ videoTrackItems }
+ {t("trackSelection.audioTracksHeader")}
{ audioTrackItems }
+
-
{header}
-
-
+ {track.audio_stream.available ?
+ 
- = ({ handler, text, Icon, tooltip, active }) => {
-
+const SelectionAlert: React.FC = ({
+ tracks,
+ customizable,
+}) => {
+ const { t } = useTranslation();
const theme = useTheme();
+ const video = tracks.filter(t => t.video_stream.enabled).length;
+ const audio = tracks.filter(t => t.audio_stream.enabled).length;
- const buttonStyle = (theme: Theme) => [
- active ? basicButtonStyle(theme) : deactivatedButtonStyle,
- css({
- padding: "16px",
- maxHeight: "21px",
- boxShadow: "",
- background: `${theme.element_bg}`,
- textWrap: "nowrap",
- })];
-
- const clickHandler = () => {
- if (active) { handler(); }
- ref.current?.blur();
- };
-
- const keyHandler = (event: React.KeyboardEvent) => {
- if (active && (event.key === " " || event.key === "Enter")) {
- handler();
- }
- };
-
- const ref = React.useRef(null);
+ const lines = customizable ? [
+ t("trackSelection.selectionAlertInfoVideo", { count: video }),
+ t("trackSelection.selectionAlertInfoAudio", { count: audio }),
+ ] : [];
return (
-
-
-
-
+
+
);
};
diff --git a/src/main/WorkflowConfiguration.tsx b/src/main/WorkflowConfiguration.tsx
index ae8ef7f63..dfcd1fb43 100644
--- a/src/main/WorkflowConfiguration.tsx
+++ b/src/main/WorkflowConfiguration.tsx
@@ -9,9 +9,7 @@ import {
import { LuChevronLeft, LuMoreHorizontal } from "react-icons/lu";
import { useAppSelector } from "../redux/store";
-
import { PageButton } from "./Finish";
-
import { useTranslation } from "react-i18next";
import { useTheme } from "../themes";
import { selectError, selectStatus } from "../redux/workflowPostSlice";
diff --git a/src/redux/videoSlice.ts b/src/redux/videoSlice.ts
index abd040880..f5d666b4f 100644
--- a/src/redux/videoSlice.ts
+++ b/src/redux/videoSlice.ts
@@ -1,5 +1,5 @@
import { clamp } from "lodash";
-import { createSlice, nanoid, PayloadAction, createSelector } from "@reduxjs/toolkit";
+import { createSlice, nanoid, PayloadAction } from "@reduxjs/toolkit";
import { client } from "../util/client";
import { Segment, httpRequestState, Track, Workflow, SubtitlesFromOpencast } from "../types";
@@ -18,6 +18,7 @@ export interface video {
currentlyAt: number, // Position in the video in milliseconds
segments: Segment[],
tracks: Track[],
+ customizedTrackSelection: boolean, // Did user select tracks for processing
subtitlesFromOpencast: SubtitlesFromOpencast[],
activeSegmentIndex: number, // Index of the segment that is currenlty hovered
selectedWorkflowId: string, // Id of the currently selected workflow
@@ -53,6 +54,7 @@ export const initialState: video & httpRequestState = {
currentlyAt: 0, // Position in the video in milliseconds
segments: [{ id: nanoid(), start: 0, end: 1, deleted: false }],
tracks: [],
+ customizedTrackSelection: false,
subtitlesFromOpencast: [],
activeSegmentIndex: 0,
selectedWorkflowId: "",
@@ -115,15 +117,22 @@ const videoSlice = createSlice({
name: "videoState",
initialState,
reducers: {
- setTrackEnabled: (state, action) => {
+ setVideoEnabled: (state, action: PayloadAction<{trackId: string, enabled: boolean}>) => {
for (const track of state.tracks) {
- if (track.id === action.payload.id) {
- track.audio_stream.enabled = action.payload.enabled;
+ if (track.id === action.payload.trackId) {
track.video_stream.enabled = action.payload.enabled;
}
}
state.hasChanges = true;
},
+ setAudioEnabled: (state, action: PayloadAction<{trackId: string, enabled: boolean}>) => {
+ for (const track of state.tracks) {
+ if (track.id === action.payload.trackId) {
+ track.audio_stream.enabled = action.payload.enabled;
+ }
+ }
+ state.hasChanges = true;
+ },
setIsPlaying: (state, action: PayloadAction) => {
state.isPlaying = action.payload;
},
@@ -292,6 +301,9 @@ const videoSlice = createSlice({
mergeSegments(state, state.activeSegmentIndex, state.segments.length - 1);
state.hasChanges = true;
},
+ setCustomizedTrackSelection: (state, action: PayloadAction) => {
+ state.customizedTrackSelection = action.payload;
+ },
timelineZoomIn: state => {
state.timelineZoom = clamp(state.timelineZoom + 1, 1, timelineZoomMax(state));
},
@@ -306,19 +318,19 @@ const videoSlice = createSlice({
state.status = "loading";
});
builder.addCase(
- fetchVideoInformation.fulfilled, (state, action) => {
+ fetchVideoInformation.fulfilled, (state, { payload }) => {
state.status = "success";
- if (action.payload.workflow_active) {
+ if (payload.workflow_active) {
state.status = "failed";
state.errorReason = "workflowActive";
state.error = "This event is being processed. Please wait until the process is finished.";
}
- state.tracks = action.payload.tracks
+ state.tracks = payload.tracks
.sort((a: { thumbnailPriority: number; }, b: { thumbnailPriority: number; }) => {
return a.thumbnailPriority - b.thumbnailPriority;
}).map((track: Track) => {
- if (action.payload.local && settings.opencast.local) {
+ if (payload.local && settings.opencast.local) {
console.debug("Replacing track URL");
track.uri = track.uri.replace(/https?:\/\/[^/]*/g, window.location.origin);
}
@@ -328,22 +340,23 @@ const videoSlice = createSlice({
// eslint-disable-next-line no-sequences
state.videoURLs = videos.reduce((a: string[], o: { uri: string; }) => (a.push(o.uri), a), []);
state.videoCount = state.videoURLs.length;
- state.subtitlesFromOpencast = action.payload.subtitles ?
- state.subtitlesFromOpencast = action.payload.subtitles : [];
- state.duration = action.payload.duration;
- state.title = action.payload.title;
- state.segments = parseSegments(action.payload.segments, action.payload.duration);
- state.workflows = action.payload.workflows;
- state.waveformImages = action.payload.waveformURIs ? action.payload.waveformURIs : state.waveformImages;
+ state.subtitlesFromOpencast = payload.subtitles ?
+ state.subtitlesFromOpencast = payload.subtitles : [];
+ state.duration = payload.duration;
+ state.title = payload.title;
+ state.segments = parseSegments(payload.segments, payload.duration);
+ state.workflows = payload.workflows;
+ state.waveformImages = payload.waveformURIs ? payload.waveformURIs : state.waveformImages;
state.originalThumbnails = state.tracks.map(
(track: Track) => { return { id: track.id, uri: track.thumbnailUri }; }
);
state.aspectRatios = new Array(state.videoCount);
- state.lockingActive = action.payload.locking_active;
- state.lockRefresh = action.payload.lock_refresh;
- state.lock.uuid = action.payload.lock_uuid;
- state.lock.user = action.payload.lock_user;
+ state.lockingActive = payload.locking_active;
+ state.lockRefresh = payload.lock_refresh;
+ state.lock.uuid = payload.lock_uuid;
+ state.lock.user = payload.lock_user;
+ state.customizedTrackSelection = payload.customizedTrackSelection;
});
builder.addCase(
fetchVideoInformation.rejected, (state, action) => {
@@ -372,12 +385,14 @@ const videoSlice = createSlice({
selectWaveformImages: state => state.waveformImages,
selectOriginalThumbnails: state => state.originalThumbnails,
// Selectors mainly pertaining to the information fetched from Opencast
+ selectVideos: state => state.tracks.filter((track: Track) => track.video_stream.available === true),
selectVideoURL: state => state.videoURLs,
selectVideoCount: state => state.videoCount,
selectDuration: state => state.duration,
selectDurationInSeconds: state => state.duration / 1000,
selectTitle: state => state.title,
selectTracks: state => state.tracks,
+ selectCustomizedTrackSelection: state => state.customizedTrackSelection,
selectWorkflows: state => state.workflows,
selectAspectRatio: state => calculateTotalAspectRatio(state.aspectRatios),
selectSubtitlesFromOpencast: state => state.subtitlesFromOpencast,
@@ -516,43 +531,40 @@ function timelineZoomMax(state: { duration: number }) {
}
export const {
- setTrackEnabled,
- setIsPlaying,
- setIsPlayPreview,
- setIsMuted,
- setVolume,
- setCurrentlyAt,
- setCurrentlyAtInSeconds,
addSegment,
- setAspectRatio,
- setHasChanges,
- setWaveformImages,
- setThumbnails,
- setThumbnail,
- removeThumbnail,
- setLock,
cut,
- moveCut,
- markAsDeletedOrAlive,
- setSelectedWorkflowIndex,
- mergeLeft,
- mergeRight,
- mergeAll,
- setPreviewTriggered,
- setClickTriggered,
setTimelineZoom,
timelineZoomIn,
timelineZoomOut,
- setJumpTriggered,
jumpToPreviousSegment,
jumpToNextSegment,
+ markAsDeletedOrAlive,
+ mergeAll,
+ mergeLeft,
+ mergeRight,
+ moveCut,
+ removeThumbnail,
+ setAspectRatio,
+ setAudioEnabled,
+ setClickTriggered,
+ setCurrentlyAt,
+ setCurrentlyAtInSeconds,
+ setCustomizedTrackSelection,
+ setHasChanges,
+ setIsMuted,
+ setIsPlayPreview,
+ setIsPlaying,
+ setJumpTriggered,
+ setLock,
+ setPreviewTriggered,
+ setSelectedWorkflowIndex,
+ setThumbnail,
+ setThumbnails,
+ setVideoEnabled,
+ setVolume,
+ setWaveformImages,
} = videoSlice.actions;
-export const selectVideos = createSelector(
- [(state: { videoState: { tracks: video["tracks"]; }; }) => state.videoState.tracks],
- tracks => tracks.filter((track: Track) => track.video_stream.available === true)
-);
-
// Export selectors
export const {
selectIsPlaying,
@@ -564,6 +576,7 @@ export const {
selectJumpTriggered,
selectCurrentlyAt,
selectCurrentlyAtInSeconds,
+ selectCustomizedTrackSelection,
selectSegments,
selectActiveSegmentIndex,
selectIsCurrentSegmentAlive,
@@ -583,6 +596,7 @@ export const {
selectAspectRatio,
selectSubtitlesFromOpencast,
selectSubtitlesFromOpencastById,
+ selectVideos,
} = videoSlice.selectors;
export default videoSlice.reducer;
diff --git a/src/redux/workflowPostSlice.ts b/src/redux/workflowPostSlice.ts
index c1ec1ec6d..b9acdb404 100644
--- a/src/redux/workflowPostSlice.ts
+++ b/src/redux/workflowPostSlice.ts
@@ -20,6 +20,7 @@ export const postVideoInformation =
{
segments: convertSegments(argument.segments),
tracks: argument.tracks,
+ customizedTrackSelection: argument.customizedTrackSelection,
subtitles: argument.subtitles,
workflows: argument.workflow,
metadataJSON: JSON.stringify(argument.metadata),
diff --git a/src/types.ts b/src/types.ts
index 600ee8f52..799b1b539 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -70,6 +70,7 @@ export interface ExtendedSubtitleCue extends SubtitleCue {
export interface PostEditArgument {
segments: Segment[]
tracks: Track[]
+ customizedTrackSelection: boolean
subtitles: SubtitlesFromOpencast[]
workflow?: [{id: string}]
metadata: Catalog[]
diff --git a/src/util/utilityFunctions.ts b/src/util/utilityFunctions.ts
index ed0d86288..347744390 100644
--- a/src/util/utilityFunctions.ts
+++ b/src/util/utilityFunctions.ts
@@ -203,3 +203,11 @@ export function useInterval(callback: IntervalFunction, delay: number | null) {
}
}, [callback, delay]);
}
+
+// Returns true if the given index is out of bounds on the given array
+export function outOfBounds(array: unknown[], index: number) {
+ if (index >= array.length) {
+ return true;
+ }
+ return false;
+}
-
+
);
};
-interface selectButtonInterface {
- handler: () => void,
- text: string,
- Icon: IconType | React.FunctionComponent,
- tooltip: string,
- active: boolean,
+interface selectionAlertInterface {
+ tracks: Track[],
+ customizable: boolean,
}
-const SelectButton: React.FC
+ {settings.trackSelection.atLeastOneVideo ? t("trackSelection.helpAtLeastOneVideo") : t("trackSelection.help")}
+
+
+ {lines.map((line, index) => ({line}
))}
+