+
diff --git a/src/config.ts b/src/config.ts
index a08de2ece..c932b2b83 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -113,6 +113,16 @@ export let settings: iSettings
* 3. Default values
*/
export const init = async () => {
+
+ // Get color scheme from local storage, otherwise set auto scheme based on preference
+ let scheme = window.localStorage.getItem("colorScheme");
+ if (scheme === null || !["light", "dark", "light-high-contrast", "dark-high-contrast"].includes(scheme)) {
+ const lightness = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+ const contrast = window.matchMedia("(prefers-contrast: more)").matches ? "-high-contrast" : "";
+ scheme = `${lightness}${contrast}`;
+ }
+ document.documentElement.dataset.colorScheme = scheme;
+
// Get settings from config file
await loadContextSettings().then(result => {
configFileSettings = validate(result, false, SRC_SERVER, "from server settings file")
diff --git a/src/cssStyles.tsx b/src/cssStyles.tsx
index ae840b0b0..e0c0e0782 100644
--- a/src/cssStyles.tsx
+++ b/src/cssStyles.tsx
@@ -1,20 +1,19 @@
/**
* This file contains general css stylings
*/
-import { css, Global } from '@emotion/react'
+import { css, Global, keyframes } from '@emotion/react'
import React from "react";
import emotionNormalize from 'emotion-normalize';
import { checkFlexGapSupport } from './util/utilityFunctions';
-import { useSelector } from 'react-redux';
-import { selectTheme, Theme } from './redux/themeSlice';
import { createTheme } from '@mui/material/styles';
+import { Theme, useTheme } from './themes';
/**
* An emotion component that inserts styles globally
* Is removed when the styles change or when the Global component unmounts.
*/
export const GlobalStyle: React.FC = () => {
- const theme = useSelector(selectTheme);
+ const theme = useTheme();
return (
);
@@ -35,6 +34,11 @@ export const globalStyle = (theme: Theme) => css({
});
+// When to switch behaviour based on screen width
+export const BREAKPOINT_SMALL = 450;
+export const BREAKPOINT_MEDIUM = 650;
+
+
/**
* CSS for replacing flexbox gap in browers that do not support it
* Does not return a css prop, but is meant as a direct replacement for "gap"
@@ -75,19 +79,15 @@ export const flexGapReplacementStyle = (flexGapValue: number, flexDirectionIsRow
* CSS for buttons
*/
export const basicButtonStyle = (theme: Theme) => css({
- borderRadius: '10px',
+ borderRadius: '5px',
cursor: "pointer",
- // Animation
- transitionDuration: "0.3s",
- transitionProperty: "transform",
"&:hover": {
- transform: 'scale(1.1)',
+ backgroundColor: `${theme.button_color}`,
+ color: `${theme.inverted_text}`,
},
"&:focus": {
- transform: 'scale(1.1)',
- },
- "&:active": {
- transform: 'scale(0.9)',
+ backgroundColor: `${theme.button_color}`,
+ color: `${theme.inverted_text}`,
},
// Flex position child elements
display: 'flex',
@@ -95,7 +95,7 @@ export const basicButtonStyle = (theme: Theme) => css({
alignItems: 'center',
...(flexGapReplacementStyle(10, false)),
textAlign: 'center' as const,
- outline: `${theme.button_outline}`
+ outline: `${theme.button_outline}`,
});
/**
@@ -104,7 +104,7 @@ export const basicButtonStyle = (theme: Theme) => css({
export const deactivatedButtonStyle = css({
borderRadius: '10px',
cursor: "pointer",
- opacity: "0.4",
+ opacity: "0.6",
// Flex position child elements
display: 'flex',
justifyContent: 'center',
@@ -129,7 +129,7 @@ export const navigationButtonStyle = (theme: Theme) => css({
*/
export const backOrContinueStyle = css(({
display: 'flex',
- flexDirection: 'row' as const,
+ flexDirection: 'row',
...(flexGapReplacementStyle(20, false)),
}))
@@ -137,15 +137,14 @@ export const backOrContinueStyle = css(({
* CSS for big buttons in a dynamic grid
*/
export const tileButtonStyle = (theme: Theme) => css({
- width: '250px',
+ width: '290px',
height: '220px',
display: 'flex',
- flexDirection: 'column' as const,
- fontSize: "x-large",
+ flexDirection: 'column',
+ fontWeight: "bold",
...(flexGapReplacementStyle(30, false)),
- boxShadow: `${theme.boxShadow}`,
+ boxShadow: `${theme.boxShadow_tiles}`,
background: `${theme.element_bg}`,
- alignItems: 'unset', // overwrite from basicButtonStyle to allow for textOverflow to work
placeSelf: 'center',
});
@@ -167,23 +166,24 @@ export const disableButtonAnimation = css({
/**
* CSS for a title
*/
-export const titleStyle = css(({
+export const titleStyle = (theme: Theme) => css(({
display: 'inline-block',
padding: '15px',
- overflow: 'hidden',
whiteSpace: "nowrap",
textOverflow: 'ellipsis',
maxWidth: '100%',
+ color: `${theme.text}`,
}))
/**
* Addendum for the titleStyle
* Used for page titles
*/
-export const titleStyleBold = css({
+export const titleStyleBold = (theme: Theme) => css({
fontWeight: 'bold',
fontSize: '24px',
verticalAlign: '-2.5px',
+ color: `${theme.text}`,
})
/**
@@ -214,13 +214,19 @@ export const errorBoxStyle = (errorStatus: boolean, theme: Theme) => {
export function selectFieldStyle(theme: Theme) {
return {
- control: (provided: any) => ({
+ control: (provided: any, state: any) => ({
...provided,
- background: theme.element_bg,
+ background: theme.menu_background,
+ ...(state.isFocused && {borderColor: theme.metadata_highlight}),
+ ...(state.isFocused && {boxShadow: `0 0 0 1px ${theme.metadata_highlight}`}),
+ "&:hover": {
+ borderColor: theme.menu_background,
+ boxShadow: `0 0 0 1px ${theme.metadata_highlight}`
+ },
}),
menu: (provided: any) => ({
...provided,
- background: theme.element_bg,
+ background: theme.menu_background,
outline: theme.dropdown_border,
// kill the gap
marginTop: 0,
@@ -231,18 +237,18 @@ export function selectFieldStyle(theme: Theme) {
}),
multiValue: (provided: any) => ({
...provided,
- color: theme.selected_text,
+ color: theme.inverted_text,
background: theme.multiValue,
cursor: 'default',
}),
multiValueLabel: (provided: any) => ({
...provided,
- color: theme.selected_text,
+ color: theme.inverted_text,
}),
option: (provided: any, state: any) => ({
...provided,
- background: state.isFocused ? theme.focused : theme.background
- && state.isSelected ? theme.selected : theme.background,
+ background: state.isFocused ? theme.focused : theme.menu_background
+ && state.isSelected ? theme.selected : theme.menu_background,
...(state.isFocused && {color: theme.focus_text}),
color: state.isFocused ? theme.focus_text : theme.text
&& state.isSelected ? theme.selected_text : theme.text,
@@ -279,7 +285,7 @@ export const calendarStyle = (theme: Theme) => createTheme({
root: {
/* Modal */
outline: `${theme.dropdown_border} !important`,
- background: `${theme.background}`,
+ background: `${theme.menu_background}`,
color: `${theme.text}`,
/* Calendar-modal */
@@ -323,7 +329,7 @@ export const calendarStyle = (theme: Theme) => createTheme({
styleOverrides: {
root: {
/* Calendar- and Clock-modal -> arrows, icon, days */
- color: `${theme.icon_color} !important`,
+ color: `${theme.text} !important`,
'&.MuiPickersDay-root': {
background: 'transparent !important',
color: `${theme.text} !important`,
@@ -422,3 +428,39 @@ export const subtitleSelectStyle = (theme: Theme) => createTheme({
}
}
})
+
+export const spinningStyle = css({
+ animation: `2s linear infinite none ${keyframes({
+ "0%": { transform: "rotate(0)" },
+ "100%": { transform: "rotate(360deg)" },
+ })}`,
+})
+
+export const customIconStyle = (theme: Theme) => css(({
+ maxWidth: '16px',
+ height: 'auto',
+ color: theme.text,
+}))
+
+export const videosStyle = (theme: Theme) => css(({
+ display: 'flex',
+ flexDirection: 'column',
+
+ width: '100%',
+ background: `${theme.menu_background}`,
+ borderRadius: '5px',
+ boxShadow: `${theme.boxShadow_tiles}`,
+ marginTop: '24px',
+ boxSizing: "border-box",
+ padding: '10px',
+ ...(flexGapReplacementStyle(10, false)),
+}))
+
+export const backgroundBoxStyle = (theme: Theme) => css(({
+ background: `${theme.menu_background}`,
+ borderRadius: '7px',
+ boxShadow: `${theme.boxShadow_tiles}`,
+ boxSizing: "border-box",
+ padding: '20px',
+ ...(flexGapReplacementStyle(25, false)),
+}))
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 746f99f36..d8a7a0d58 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -58,7 +58,9 @@
"info-text": "The video will not be processed but all cutting information will be stored in Opencast. You can continue your edit later.",
"success-text": "Changes saved successfully! You can now close the editor or continue working.",
"success-tooltip-aria": "Saved successfully",
- "saveArea-tooltip": "Save Area"
+ "saveArea-tooltip": "Save Area",
+ "confirm-success": "Okay",
+ "cancel-save": "Don't save"
},
"discard": {
@@ -131,7 +133,7 @@
},
"language": {
"LANGUAGES-SLOVENIAN": "Slovenian",
- "LANGUAGES-PORTUGUESE": "Portuguese",
+ "LANGUAGES-PORTUGESE": "Portuguese",
"LANGUAGES-ROMANSH": "Romansh",
"LANGUAGES-ARABIC": "Arabic",
"LANGUAGES-POLISH": "Polish",
@@ -218,7 +220,7 @@
},
"trackSelection": {
- "description": "Select or deselect which tracks are used for processing and publication.",
+ "title": "Select track(s) for processing",
"trackInactive": "inactive",
"deleteTrackText": "Delete Track",
"restoreTrackText": "Restore Track",
@@ -265,7 +267,7 @@
},
"keyboardControls": {
- "header": "Keyboard Controls",
+ "header": "Shortcuts",
"defaultGroupName": "General",
"missingLabel": "Unknown",
"groupVideoPlayer": "Video Player",
@@ -283,11 +285,14 @@
"theme": {
"appearance": "Appearance",
- "selectThemesLabel": "Appearances",
- "darkmode": "Dark mode",
- "lightmode": "Light mode",
- "system": "System design",
- "high-contrast-dark": "High contrast (Dark mode)",
- "high-contrast-light": "High contrast (Light mode)"
+ "dark": "Dark",
+ "light": "Light",
+ "auto": "Auto",
+ "dark-high-contrast": "Dark (High contrast)",
+ "light-high-contrast": "Light (High contrast)"
+ },
+
+ "language": {
+ "language": "Language"
}
}
diff --git a/public/opencast-editor.svg b/src/img/opencast-editor.svg
similarity index 99%
rename from public/opencast-editor.svg
rename to src/img/opencast-editor.svg
index e468a3c53..e8b3a29ca 100644
--- a/public/opencast-editor.svg
+++ b/src/img/opencast-editor.svg
@@ -10,7 +10,7 @@
enable-background="new 0 0 717.17 540"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
- xmlns:svg="http://www.w3.org/2000/svg">
diff --git a/src/img/trash-restore.svg b/src/img/trash-restore.svg
new file mode 100644
index 000000000..afe1f8c42
--- /dev/null
+++ b/src/img/trash-restore.svg
@@ -0,0 +1 @@
+
diff --git a/src/index.css b/src/index.css
index be5463bbe..6a3f0d283 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,6 +1,6 @@
body, textarea, input {
margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ font-family: "Roboto Flex Variable", 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
diff --git a/src/index.tsx b/src/index.tsx
index 02c340318..4baaac58d 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -8,12 +8,15 @@ import store from './redux/store'
import { init } from './config'
import { sleep } from './util/utilityFunctions'
-import { LocalizationProvider } from "@mui/x-date-pickers";
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { GlobalHotKeys } from 'react-hotkeys';
+import "@fontsource-variable/roboto-flex";
+
import './i18n/config';
+import '@opencast/appkit/dist/colors.css'
+import { ColorSchemeProvider } from '@opencast/appkit';
+
// Load config here
// Load the rest of the application and try to fetch the settings file from the
// server.
@@ -32,12 +35,12 @@ initialize.then(
ReactDOM.render(
-
- {/* Workaround for getApplicationKeyMap based on https://github.com/greena13/react-hotkeys/issues/228 */}
-
+ {/* Workaround for getApplicationKeyMap based on https://github.com/greena13/react-hotkeys/issues/228 */}
+
+
-
-
+
+
,
document.getElementById('root')
diff --git a/src/main/Body.tsx b/src/main/Body.tsx
index 5daf030d1..2bdc6a03d 100644
--- a/src/main/Body.tsx
+++ b/src/main/Body.tsx
@@ -47,7 +47,7 @@ const Body: React.FC = () => {
const bodyStyle = css({
display: 'flex',
flexDirection: 'row',
- height: 'calc(100% - 48px)',
+ height: 'calc(100% - 64px)',
});
return (
diff --git a/src/main/Cutting.tsx b/src/main/Cutting.tsx
new file mode 100644
index 000000000..7f8232b38
--- /dev/null
+++ b/src/main/Cutting.tsx
@@ -0,0 +1,97 @@
+import React, { useEffect } from "react";
+import CuttingActions from "./CuttingActions"
+import Timeline from './Timeline';
+import { fetchVideoInformation, selectCurrentlyAt, selectDuration, selectIsPlaying, selectIsPlayPreview, selectTitle, setClickTriggered, setCurrentlyAt, setIsPlaying, setIsPlayPreview } from '../redux/videoSlice';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+import { AppDispatch } from '../redux/store';
+import { httpRequestState } from '../types';
+import { useTheme } from "../themes";
+import { setError } from '../redux/errorSlice';
+import { selectTitleFromEpisodeDc } from '../redux/metadataSlice';
+import { titleStyle, titleStyleBold, videosStyle } from "../cssStyles";
+import { LuMoreHorizontal } from "react-icons/lu";
+import { css } from "@emotion/react";
+import VideoPlayers from "./VideoPlayers";
+import VideoControls from "./VideoControls";
+
+const Cutting: React.FC = () => {
+
+ const { t } = useTranslation();
+
+ // Init redux variables
+ const dispatch = useDispatch()
+ const videoURLStatus = useSelector((state: { videoState: { status: httpRequestState["status"] } }) => state.videoState.status);
+ const error = useSelector((state: { videoState: { error: httpRequestState["error"] } }) => state.videoState.error)
+ const duration = useSelector(selectDuration)
+ const theme = useTheme();
+ const errorReason = useSelector((state: { videoState: { errorReason: httpRequestState["errorReason"] } }) => state.videoState.errorReason)
+
+ // Try to fetch URL from external API
+ useEffect(() => {
+ if (videoURLStatus === 'idle') {
+ dispatch(fetchVideoInformation())
+ } else if (videoURLStatus === 'failed') {
+ if (errorReason === 'workflowActive') {
+ dispatch(setError({error: true, errorTitle: t("error.workflowActive-errorTitle"), errorMessage: t("error.workflowActive-errorMessage"), errorIcon: LuMoreHorizontal}))
+ } else {
+ dispatch(setError({error: true, errorMessage: t("video.comError-text"), errorDetails: error}))
+ }
+ } else if (videoURLStatus === 'success') {
+ if (duration === null) {
+ dispatch(setError({error: true, errorMessage: t("video.durationError-text"), errorDetails: error}))
+ }
+ }
+ }, [videoURLStatus, dispatch, error, t, errorReason, duration])
+
+ // Style
+ const cuttingStyle = css({
+ display: 'flex',
+ width: 'auto',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ });
+
+
+ return (
+
+ )
+}
+
+
+const CuttingHeader: React.FC = () => {
+
+ const title = useSelector(selectTitle)
+ const metadataTitle = useSelector(selectTitleFromEpisodeDc)
+ const theme = useTheme();
+
+ return (
+
+ {metadataTitle ? metadataTitle : title}
+
+ );
+}
+
+export default Cutting
diff --git a/src/main/CuttingActions.tsx b/src/main/CuttingActions.tsx
index 0f3629ff5..e46c097de 100644
--- a/src/main/CuttingActions.tsx
+++ b/src/main/CuttingActions.tsx
@@ -1,16 +1,10 @@
import React, { SyntheticEvent } from "react";
-import { basicButtonStyle, flexGapReplacementStyle } from '../cssStyles'
+import { basicButtonStyle, customIconStyle } from '../cssStyles'
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
- faCut,
- faStepBackward,
- faStepForward,
- faTrash,
- faTrashRestore,
-} from "@fortawesome/free-solid-svg-icons";
+import { IconType } from "react-icons";
+import { LuScissors, LuChevronLeft, LuChevronRight, LuTrash} from "react-icons/lu";
+import { ReactComponent as TrashRestore } from '../img/trash-restore.svg';
import { css } from '@emotion/react'
@@ -23,7 +17,7 @@ import { cuttingKeyMap } from "../globalKeys";
import { ActionCreatorWithoutPayload } from "@reduxjs/toolkit";
import { useTranslation } from 'react-i18next';
-import { selectTheme, Theme } from "../redux/themeSlice";
+import { useTheme } from "../themes";
import { ThemedTooltip } from "./Tooltip";
/**
@@ -64,49 +58,47 @@ const CuttingActions: React.FC = () => {
const cuttingStyle = css({
display: 'flex',
flexDirection: 'row' as const,
- justifyContent: 'space-between',
- ...(flexGapReplacementStyle(30, true)),
+ justifyContent: 'center',
+ alignItems: 'center',
})
- const blockStyle = css({
- display: 'flex',
- flexDirection: 'row' as const,
- ...(flexGapReplacementStyle(30, true)),
+ const verticalLineStyle = css({
+ borderLeft: '2px solid #DDD;',
+ height: '32px',
})
return (
-
-
-
-
-
-
-
- {/*
- */}
-
+
+
+
+
+
+
+
+ {/*
+
*/}
actionHandler(event, action, ref)}
@@ -148,7 +140,7 @@ const CuttingActionsButton: React.FC = ({iconName
actionHandler(event, action, undefined)
} }}
>
-
+
{actionName}
@@ -169,11 +161,11 @@ const MarkAsDeletedButton : React.FC = ({actionHand
const isCurrentSegmentAlive = useSelector(selectIsCurrentSegmentAlive)
const ref = React.useRef(null)
- const theme = useSelector(selectTheme);
+ const theme = useTheme();
return (
- = ({actionHand
actionHandler(event, action, undefined)
} }}
>
-
+ {isCurrentSegmentAlive ?
:
}
{isCurrentSegmentAlive ? t('cuttingActions.delete-button') : t("cuttingActions.restore-button")}
{errorTitle ? errorTitle : t("error.generic-message")}
-
+ {ErrorIcon ?
:
}
{errorMessage}
{errorDetails &&
diff --git a/src/main/Finish.tsx b/src/main/Finish.tsx
index 16bfa209a..39439b3f8 100644
--- a/src/main/Finish.tsx
+++ b/src/main/Finish.tsx
@@ -9,14 +9,11 @@ import WorkflowConfiguration from "./WorkflowConfiguration";
import { css } from '@emotion/react'
import { basicButtonStyle } from '../cssStyles'
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
- IconDefinition
-} from "@fortawesome/free-solid-svg-icons";
+import { IconType } from "react-icons";
import { useDispatch, useSelector } from 'react-redux';
import { selectPageNumber, setPageNumber } from '../redux/finishSlice';
-import { selectTheme } from "../redux/themeSlice";
+import { useTheme } from "../themes";
/**
* Displays a menu for selecting what should be done with the current changes
@@ -57,9 +54,9 @@ const Finish : React.FC = () => {
/**
* Takes you to a different page
*/
-export const PageButton : React.FC<{pageNumber: number, label: string, iconName: IconDefinition}> = ({pageNumber, label, iconName}) => {
+export const PageButton : React.FC<{pageNumber: number, label: string, Icon: IconType}> = ({pageNumber, label, Icon}) => {
- const theme = useSelector(selectTheme);
+ const theme = useTheme();
// Initialize redux variables
const dispatch = useDispatch()
@@ -69,9 +66,9 @@ export const PageButton : React.FC<{pageNumber: number, label: string, iconName:
}
const pageButtonStyle = css({
- width: '200px',
+ minWidth: '100px',
padding: '16px',
- justifyContent: 'space-around',
+ justifyContent: 'center',
boxShadow: `${theme.boxShadow}`,
background: `${theme.element_bg}`,
})
@@ -83,7 +80,7 @@ export const PageButton : React.FC<{pageNumber: number, label: string, iconName:
onKeyDown={(event: React.KeyboardEvent) => { if (event.key === " " || event.key === "Enter") {
onPageChange()
} }}>
-
+
{label}
);
diff --git a/src/main/FinishMenu.tsx b/src/main/FinishMenu.tsx
index e51ea88d6..4a7f07477 100644
--- a/src/main/FinishMenu.tsx
+++ b/src/main/FinishMenu.tsx
@@ -3,16 +3,14 @@ import React from "react";
import { css } from '@emotion/react'
import { basicButtonStyle, flexGapReplacementStyle, tileButtonStyle } from '../cssStyles'
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
- faSave, faFileExport, faTimesCircle, IconDefinition
-} from "@fortawesome/free-solid-svg-icons";
+import { IconType } from "react-icons";
+import { LuSave, LuDatabase, LuXCircle } from "react-icons/lu";
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
import { setState, setPageNumber, finish } from '../redux/finishSlice'
import { useTranslation } from 'react-i18next';
-import { selectTheme } from "../redux/themeSlice";
+import { useTheme } from "../themes";
/**
* Displays a menu for selecting what should be done with the current changes
@@ -21,17 +19,17 @@ const FinishMenu : React.FC = () => {
const finishMenuStyle = css({
display: 'flex',
- flexDirection: 'row' as const,
- justifyContent: 'space-around',
+ flexDirection: 'row',
+ justifyContent: 'center',
flexWrap: 'wrap',
...(flexGapReplacementStyle(30, false)),
})
return (
-
-
-
+
+
+
);
}
@@ -39,10 +37,10 @@ const FinishMenu : React.FC = () => {
/**
* Buttons for the finish menu
*/
-const FinishMenuButton: React.FC<{iconName: IconDefinition, stateName: finish["value"]}> = ({iconName, stateName}) => {
+const FinishMenuButton: React.FC<{Icon: IconType, stateName: finish["value"]}> = ({Icon, stateName}) => {
const { t } = useTranslation();
- const theme = useSelector(selectTheme)
+ const theme = useTheme()
const dispatch = useDispatch();
const finish = () => {
@@ -66,6 +64,22 @@ const FinishMenuButton: React.FC<{iconName: IconDefinition, stateName: finish["v
break;
}
+ const iconStyle = css({
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+
+ background: `${theme.background_finish_menu_icon}`,
+ color: `${theme.text}`,
+ borderRadius: '50%',
+ width: '90px',
+ height: '90px',
+ })
+
+ const labelStyle = css({
+ padding: '0px 20px',
+ })
+
return (
) => { if (event.key === " " || event.key === "Enter") {
finish()
} }}>
-
-
{buttonString}
+
+
+
+
{buttonString}
);
};
diff --git a/src/main/Header.tsx b/src/main/Header.tsx
index 6105e7354..cf04681ee 100644
--- a/src/main/Header.tsx
+++ b/src/main/Header.tsx
@@ -1,30 +1,263 @@
+import React from "react";
import { useSelector } from "react-redux"
-import { selectThemeState } from "../redux/themeSlice"
+import { useTheme } from "../themes";
+
import { css } from '@emotion/react'
+import { useTranslation } from "react-i18next";
+import { MainMenuButton } from "./MainMenu";
+import { LuMoon, LuSun } from "react-icons/lu";
+import { HiOutlineTranslate } from "react-icons/hi";
+import { LuKeyboard } from "react-icons/lu";
+import { MainMenuStateNames } from "../types";
+import { basicButtonStyle, BREAKPOINT_MEDIUM, BREAKPOINT_SMALL, flexGapReplacementStyle } from '../cssStyles'
+
+import { ReactComponent as LogoSvg } from '../img/opencast-editor.svg';
+import { selectIsEnd } from "../redux/endSlice";
+import { checkboxMenuItem, HeaderMenuItemDef, ProtoButton, useColorScheme, WithHeaderMenu } from "@opencast/appkit";
+import { IconType } from "react-icons";
+import i18next from "i18next";
function Header() {
- const themeState = useSelector(selectThemeState);
+ const theme = useTheme()
+ const { scheme } = useColorScheme();
+ const { t } = useTranslation()
- const header = themeState.startsWith('high-contrast-')
+ const isEnd = useSelector(selectIsEnd)
+
+ const headerStyle = css({
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ backgroundColor: `${theme.header_bg}`,
+ })
+
+ const headerStyleThemed = scheme.includes('high-contrast-')
? css({
- height: '46px',
- backgroundColor: '#000',
+ height: '62px',
borderBottom: '2px solid white'
})
: css({
- height: '48px',
- backgroundColor: '#333333',
+ height: '64px',
})
- const logo = css({
- height: '48px',
+ const rightSideButtonsStyle = css({
+ display: 'flex',
+ flexDirection: 'row',
+ height: '100%',
+ alignItems: 'center',
+ paddingRight: '24px',
+ ...(flexGapReplacementStyle(16, false)),
+ })
+
+ const settingsButtonCSS = css({
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: "center",
+ ...(flexGapReplacementStyle(8, false)),
+
+ fontSize: 16,
+ fontFamily: "inherit",
+ fontWeight: 500,
+ color: `${theme.header_text}`,
+ outline: `${theme.menuButton_outline}`,
+ padding: "6px 8px",
+
+ ":hover, :active": {
+ outline: `2px solid ${theme.metadata_highlight}`,
+ backgroundColor: theme.header_button_hover_bg,
+ color: `${theme.header_text}`
+ },
})
return (
-
-
+
+
+
+
+
+ { !isEnd &&
+
+ }
+
);
}
+const Logo: React.FC = () => {
+
+ const { t } = useTranslation()
+ const { scheme } = useColorScheme();
+
+ const logo = css({
+ paddingLeft: '8px',
+ opacity: scheme === 'dark' ? '0.8' : '1',
+
+ height: "100%",
+ "> *": {
+ height: "calc(100% - 12px)",
+ },
+
+ // Unset a bunch of CSS to keep the logo clean
+ outline: 'unset',
+ "&:hover": {
+ backgroundColor: `unset`,
+ },
+ "&:focus": {
+ backgroundColor: `unset`,
+ },
+ })
+
+ return (
+
+ )
+}
+
+const LanguageButton: React.FC = () => {
+ const { t } = useTranslation();
+
+ const isCurrentLanguage = (language: string) => language === i18next.resolvedLanguage;
+
+ const changeLanguage = (lng: string | undefined) => {
+ i18next.changeLanguage(lng);
+ }
+
+ const languageNames = (language: string) => {
+ return new Intl.DisplayNames([language], {
+ type: 'language'
+ }).of(language);
+ }
+
+ const resourcesArray: string[] | undefined = i18next.options.resources && Object.keys(i18next.options.resources);
+
+ const languages = resourcesArray?.map(entry => {
+ return { value: entry, label: languageNames(entry) }
+ })
+
+ // menuItems can't deal with languages being undefined, so we return early
+ // until we reach a rerender with actual information
+ if (languages === undefined) {
+ return (<>)
+ }
+
+ const menuItems = Object.values(languages).map(lng => checkboxMenuItem({
+ checked: isCurrentLanguage(lng.value),
+ children: <>{lng.label},
+ onClick: () => {
+ changeLanguage(lng!.value);
+ },
+ }));
+
+ const label = t("language.language");
+ return (
+
+
+
+ );
+};
+
+const ThemeButton: React.FC = () => {
+
+ const { t } = useTranslation()
+
+ const { scheme, isAuto, update } = useColorScheme();
+ const currentPref = isAuto ? "auto" : scheme;
+ const choices = ["auto", "light", "dark", "light-high-contrast", "dark-high-contrast"] as const;
+ const menuItems: HeaderMenuItemDef[] = choices.map(choice => checkboxMenuItem({
+ checked: currentPref === choice,
+ children: <>{t(`theme.${choice}`)},
+ onClick: () => update(choice),
+ }));
+
+ return (
+
+
+
+ )
+}
+
+type HeaderButtonProps = JSX.IntrinsicElements["button"] & {
+ Icon: IconType;
+ label: string;
+};
+
+const HeaderButton = React.forwardRef
(
+ ({ Icon, label, ...rest }, ref) => {
+ const theme = useTheme()
+
+ const themeSelectorButtonStyle = css({
+ display: "flex",
+ alignItems: "center",
+ ...(flexGapReplacementStyle(8, false)),
+
+ fontSize: 16,
+ fontFamily: "inherit",
+ fontWeight: 500,
+ color: `${theme.header_text}`,
+ outline: `${theme.menuButton_outline}`,
+ padding: "6px 8px",
+
+ ":hover, :active": {
+ outline: `2px solid ${theme.metadata_highlight}`,
+ backgroundColor: theme.header_button_hover_bg,
+ color: `${theme.header_text}`
+ },
+ ":focus": {
+ backgroundColor: 'inherit',
+ color: `${theme.header_text}`
+ },
+ ":focus:hover": {
+ backgroundColor: theme.header_button_hover_bg,
+ color: `${theme.header_text}`
+ }
+ })
+
+ const iconStyle = css({
+ display: "flex",
+ alignItems: "center",
+
+ fontSize: 22,
+ })
+
+ return (
+
+
+ {label}
+
+ )
+ })
+
export default Header;
diff --git a/src/main/KeyboardControls.tsx b/src/main/KeyboardControls.tsx
index db8012a10..ebb12ba9c 100644
--- a/src/main/KeyboardControls.tsx
+++ b/src/main/KeyboardControls.tsx
@@ -5,25 +5,31 @@ import React from "react";
import { KeyMapDisplayOptions } from 'react-hotkeys';
import { useTranslation, Trans} from "react-i18next";
-import { useSelector } from "react-redux";
import { flexGapReplacementStyle } from "../cssStyles";
import { getAllHotkeys } from "../globalKeys";
-import { selectTheme } from "../redux/themeSlice";
+import { useTheme } from "../themes";
+import { titleStyle, titleStyleBold } from '../cssStyles'
const Group: React.FC<{name: ParseKeys, entries: KeyMapDisplayOptions[]}> = ({name, entries}) => {
const { t } = useTranslation();
- const theme = useSelector(selectTheme);
+ const theme = useTheme();
const groupStyle = css({
display: 'flex',
flexDirection: 'column' as const,
width: '460px',
maxWidth: '50vw',
+
+ background: `${theme.menu_background}`,
+ borderRadius: '5px',
+ boxShadow: `${theme.boxShadow_tiles}`,
+ boxSizing: "border-box",
+ padding: '0px 20px 20px 20px',
});
const headingStyle = css({
- borderBottom: `${theme.menuBorder}`
+ color: `${theme.text}`,
})
return (
@@ -39,64 +45,70 @@ const Group: React.FC<{name: ParseKeys, entries: KeyMapDisplayOptions[]}> = ({na
const Entry: React.FC<{params: KeyMapDisplayOptions}> = ({params}) => {
const { t } = useTranslation();
- const theme = useSelector(selectTheme);
+ const theme = useTheme();
const entryStyle = css({
display: 'flex',
- flexDirection: 'row' as const,
+ flexFlow: 'column nowrap',
+ justifyContent: 'left',
width: '100%',
- paddingBottom: '5px',
- paddingTop: '5px',
+ padding: '10px 0px',
+ ...(flexGapReplacementStyle(10, true))
});
const labelStyle = css({
- alignSelf: 'center',
- minWidth: '130px',
- height: '5em',
+ fontWeight: 'bold',
overflow: 'hidden',
textOverflow: 'ellipsis',
wordWrap: 'break-word',
+ color: `${theme.text}`,
+ })
- // Center text vertically
+ const sequencesStyle = css({
display: 'flex',
- justifyContent: 'center',
- alignContent: 'center',
- flexDirection: 'column',
+ flexDirection: 'row',
+ ...(flexGapReplacementStyle(10, true))
})
const sequenceStyle = css({
- alignSelf: 'center',
- marginLeft: '15px',
display: 'flex',
- flexDirection: 'row' as const,
+ flexDirection: 'row',
...(flexGapReplacementStyle(10, true))
})
const singleKeyStyle = css({
- borderRadius: '5px',
+ borderRadius: '4px',
borderWidth: '2px',
borderStyle: 'solid',
borderColor: `${theme.singleKey_border}`,
background: `${theme.singleKey_bg}`,
+ boxShadow: `${theme.singleKey_boxShadow}`,
padding: '10px',
+ color: `${theme.text}`,
})
const orStyle = css({
alignSelf: 'center',
- lineHeight: '32px',
+ fontSize: '20px',
+ fontWeight: 'bold',
})
return (
{params.name || t("keyboardControls.missingLabel")}
- {params.sequences.map((sequence, index, arr) => (
-
- {sequence.sequence.toString().split('+').map((singleKey, index) => (
-
{singleKey}
- ))}
-
{arr.length - 1 !== index && t("keyboardControls.sequenceSeparator")}
-
- ))}
+
+ {params.sequences.map((sequence, index, arr) => (
+
+ {sequence.sequence.toString().split('+').map((singleKey, index, {length}) => (
+ <>
+
{singleKey}
+ {length - 1 !== index ?
+
: ''}
+
+ ))}
+
{arr.length - 1 !== index && t("keyboardControls.sequenceSeparator")}
+
+ ))}
+
)
}
@@ -105,6 +117,7 @@ const Entry: React.FC<{params: KeyMapDisplayOptions}> = ({params}) => {
const KeyboardControls: React.FC = () => {
const { t } = useTranslation();
+ const theme = useTheme()
const keyMap = getAllHotkeys()
@@ -162,9 +175,9 @@ const KeyboardControls: React.FC = () => {
return (
-
+
{t("keyboardControls.header")}
-
+
{render()}
-
-
-
+
)
} else if (mainMenuState === MainMenuStateNames.metadata) {
@@ -140,13 +130,12 @@ const MainContent: React.FC = () => {
} else if (mainMenuState === MainMenuStateNames.keyboardControls) {
return (
-
)
} else {
-
+
Placeholder
}
@@ -157,16 +146,4 @@ const MainContent: React.FC = () => {
);
};
-const CuttingTimeline : React.FC = () => {
- return (
-
- );
-}
-
export default MainContent;
diff --git a/src/main/MainMenu.tsx b/src/main/MainMenu.tsx
index 68512b45a..2e97d1a13 100644
--- a/src/main/MainMenu.tsx
+++ b/src/main/MainMenu.tsx
@@ -1,10 +1,11 @@
import React from "react";
-import { css } from '@emotion/react'
+import { css, SerializedStyles } from '@emotion/react'
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCut, faFilm, faListUl, faPhotoVideo, faSignOutAlt, faGear } from "@fortawesome/free-solid-svg-icons";
-import { faClosedCaptioning } from "@fortawesome/free-regular-svg-icons";
+import { IconType } from "react-icons";
+import { LuScissors, LuFilm, LuFileText, LuCheckSquare } from "react-icons/lu";
+import { LuImage } from "react-icons/lu";
+import { ReactComponent as SubtitleIcon } from '../img/subtitle.svg';
import { useDispatch, useSelector } from 'react-redux'
import { setState, selectMainMenuState, mainMenu } from '../redux/mainMenuSlice'
@@ -20,7 +21,7 @@ import { resetPostRequestState as metadataResetPostRequestState } from "../redux
import { resetPostRequestState } from "../redux/workflowPostSlice";
import { setIsDisplayEditView } from "../redux/subtitleSlice";
-import { selectTheme } from "../redux/themeSlice";
+import { useTheme } from "../themes";
/**
* A container for selecting the functionality shown in the main part of the app
@@ -28,16 +29,18 @@ import { selectTheme } from "../redux/themeSlice";
const MainMenu: React.FC = () => {
const { t } = useTranslation();
- const theme = useSelector(selectTheme);
+ const theme = useTheme();
const mainMenuStyle = css({
borderRight: `${theme.menuBorder}`,
- minWidth: '100px',
+ minWidth: '120px',
+ maxWidth: '140px',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: '20px',
- overflow: 'vertical',
+ overflowX: 'hidden',
+ overflowY: 'auto',
background: `${theme.menu_background}`,
...(flexGapReplacementStyle(30, false)),
});
@@ -45,72 +48,70 @@ const MainMenu: React.FC = () => {
return (
);
};
interface mainMenuButtonInterface {
- iconName: any, // Unfortunately, icons from different packages don't share the same IconDefinition type. Works anyway.
+ Icon: IconType | React.FunctionComponent,
stateName: mainMenu["value"],
bottomText: string,
ariaLabelText: string;
- miniButton?: boolean,
+ customCSS?: SerializedStyles,
+ iconCustomCSS?: SerializedStyles,
}
/**
* A button to set the state of the app
* @param param0
*/
-const MainMenuButton: React.FC = ({iconName, stateName, bottomText, ariaLabelText, miniButton = false}) => {
+export const MainMenuButton: React.FC = ({
+ Icon,
+ stateName,
+ bottomText,
+ ariaLabelText,
+ customCSS,
+ iconCustomCSS,
+}) => {
const dispatch = useDispatch();
const activeState = useSelector(selectMainMenuState)
- const theme = useSelector(selectTheme);
+ const theme = useTheme();
const onMenuItemClicked = () => {
dispatch(setState(stateName));
@@ -128,46 +129,25 @@ const MainMenuButton: React.FC = ({iconName, stateName,
dispatch(metadataResetPostRequestState())
}
- const buttonStyle = () => {
- if (!miniButton) {
- return mainMenuButtonStyle
- } else {
- return miniMenuButtonStyle
- }
- }
-
const mainMenuButtonStyle = css({
width: '100%',
height: '100px',
outline: `${theme.menuButton_outline}`,
...(activeState === stateName) && {
backgroundColor: `${theme.button_color}`,
- color: `${theme.selected_text}`,
- },
- '&:hover': {
- backgroundColor: `${theme.button_color}`,
- color: `${theme.selected_text}`,
- },
- flexDirection: 'column',
- });
-
- const miniMenuButtonStyle = css({
- width: '75px',
- height: '67px',
- outline: `${theme.menuButton_outline}`,
- ...(activeState === stateName) && {
- backgroundColor: `${theme.button_color}`,
- color: `${theme.selected_text}`,
+ color: `${theme.inverted_text}`,
+ boxShadow: `${theme.boxShadow}`,
},
'&:hover': {
backgroundColor: `${theme.button_color}`,
- color: `${theme.selected_text}`,
+ color: `${theme.inverted_text}`,
+ boxShadow: `${theme.boxShadow}`,
},
flexDirection: 'column',
});
return (
- = ({iconName, stateName,
onMenuItemClicked()
} }}
>
-
+
{bottomText && {bottomText}
}
);
diff --git a/src/main/Metadata.tsx b/src/main/Metadata.tsx
index 9b0dd05f2..302d9ddfe 100644
--- a/src/main/Metadata.tsx
+++ b/src/main/Metadata.tsx
@@ -1,7 +1,7 @@
import React, { useEffect } from "react";
import { css } from '@emotion/react'
-import { calendarStyle, errorBoxStyle, selectFieldStyle } from '../cssStyles'
+import { calendarStyle, errorBoxStyle, selectFieldStyle, titleStyle, titleStyleBold } from '../cssStyles'
import { useSelector, useDispatch } from 'react-redux';
import {
@@ -13,20 +13,14 @@ import { Form, Field, FieldInputProps } from 'react-final-form'
import Select from 'react-select'
import CreatableSelect from 'react-select/creatable';
-import {
- DateTimePicker,
- TimePicker,
- showErrorOnBlur,
-} from 'mui-rff';
-import DateFnsUtils from "@date-io/date-fns";
-
import { useTranslation } from 'react-i18next';
import { DateTime as LuxonDateTime} from "luxon";
import { configureFieldsAttributes, settings } from '../config'
import { AppDispatch } from "../redux/store";
-import { selectTheme } from "../redux/themeSlice";
+import { useTheme } from "../themes";
import { ThemeProvider } from "@mui/material/styles";
+import { cloneDeep } from "lodash";
import { ParseKeys } from "i18next";
/**
@@ -49,7 +43,7 @@ const Metadata: React.FC = () => {
const getError = useSelector(selectGetError);
const postStatus = useSelector(selectPostStatus);
const postError = useSelector(selectPostError);
- const theme = useSelector(selectTheme);
+ const theme = useTheme();
// Try to fetch URL from external API
useEffect(() => {
@@ -100,30 +94,44 @@ const Metadata: React.FC = () => {
display: 'grid',
})
+ const catalogStyle = css({
+ background: `${theme.menu_background}`,
+ borderRadius: '5px',
+ boxShadow: `${theme.boxShadow_tiles}`,
+ marginTop: '24px',
+ boxSizing: "border-box",
+ padding: '10px',
+ })
+
const fieldStyle = css({
display: 'flex',
- flexFlow: 'row nowrap',
+ flexFlow: 'column nowrap',
lineHeight: '2em',
margin: '10px',
})
const fieldLabelStyle = css({
- alignSelf: 'center',
width: '110px',
fontSize: '1em',
+ fontWeight: 'bold',
+ color: `${theme.text}`,
lineHeight: '32px',
})
const fieldTypeStyle = (isReadOnly: boolean) => {
return css({
- flex: '1',
fontSize: '1em',
- marginLeft: '15px',
borderRadius: '5px',
boxShadow: isReadOnly ? '0 0 0px rgba(0, 0, 0, 0.3)' : '0 0 1px rgba(0, 0, 0, 0.3)',
...(isReadOnly && {color: `${theme.text}`}),
color: `${theme.text}`,
- outline: isReadOnly ? '0px solid transparent' : `${theme.element_outline}`
+ outline: isReadOnly ? '0px solid transparent' : `${theme.element_outline}`,
+ "&:hover": {
+ borderColor: isReadOnly ? undefined : theme.metadata_highlight,
+ },
+ "&:focus": {
+ borderColor: isReadOnly ? undefined : theme.metadata_highlight,
+ },
});
}
@@ -131,33 +139,10 @@ const Metadata: React.FC = () => {
return (
css({
padding: '10px 10px',
- border: isReadOnly ? '0px solid #ccc' : '1px solid #ccc',
- background: isReadOnly ? `${theme.background}` : `${theme.element_bg}`,
- })
- );
- }
-
- const dateTimeTypeStyle = (isReadOnly: boolean) => {
- return (
- css({
- padding: '5px 10px',
- border: isReadOnly ? '0px solid #ccc' : '1px solid #ccc',
+ border: '1px solid #ccc',
background: isReadOnly ? `${theme.background}` : `${theme.element_bg}`,
- '.Mui-disabled, .Mui-disabled button > svg': {
- color: `${theme.disabled} !important`,
- 'WebkitTextFillColor': `${theme.disabled}`,
- },
- 'button > svg': {
- color: `${theme.indicator_color}`
- },
- '.MuiInput-input, button': {
- color: `${theme.text}`,
- background: 'transparent !important',
- '&:hover': {
- background: 'transparent !important',
- outline: 'none'
- }
- },
+ opacity: isReadOnly ? "0.6" : "1",
+ resize: 'vertical',
})
);
}
@@ -538,41 +523,38 @@ const Metadata: React.FC = () => {
} else if (field.type === "date") {
return (
-
-
- { blurWithSubmit(e, input) },
- showError: showErrorOnBlur
- }}
- leftArrowButtonText={t('metadata.calendar-prev')}
- rightArrowButtonText={t('metadata.calendar-next')}
- />
-
-
+
+ { blurWithSubmit(e, input) }}
+ readOnly={field.readOnly}
+ css={[fieldTypeStyle(field.readOnly), inputFieldTypeStyle(field.readOnly),
+ {
+ resize: 'none',
+ }
+ ]}
+ data-testid="dateTimePicker"
+ />
+
);
} else if (field.type === "time") {
return (
-
-
- { blurWithSubmit(e, input) },
- showError: showErrorOnBlur
- }}
- />
-
-
+
+ { blurWithSubmit(e, input) }}
+ readOnly={field.readOnly}
+ css={[fieldTypeStyle(field.readOnly), inputFieldTypeStyle(field.readOnly),
+ {
+ resize: 'none',
+ }
+ ]}
+ />
+
);
} else if (field.type === "text_long") {
return (
@@ -611,6 +593,18 @@ const Metadata: React.FC = () => {
if ((field.type === "date" || field.type === "time") && input.value === "") {
const {value, ...other} = input
return generateComponent(field, other)
+ }
+ // is picky about its value and won't accept
+ // global datetime strings, so we have to convert them to local ourselves.
+ // TODO: Also we really should not be modifying the input element like that
+ // so ideally the conversion happens somewhere else in the code
+ // (see error in the console for further details)
+ if ((field.type === "date" || field.type === "time")) {
+ input = cloneDeep(input)
+ const leDate = new Date(input.value)
+ leDate.setMinutes(leDate.getMinutes() - leDate.getTimezoneOffset());
+ input.value = leDate.toISOString().slice(0, 16);
+ return generateComponent(field, input)
} else {
return generateComponent(field, input)
}
@@ -642,13 +636,15 @@ const Metadata: React.FC = () => {
catalogIndex: number,
configureFields: { [key: string]: configureFieldsAttributes }
) => {
+
+
return (
-
-
+
+
{i18n.exists(`metadata.${catalog.title.replaceAll(".", "-")}`) ?
t(`metadata.${catalog.title.replaceAll(".", "-")}` as ParseKeys) as string : catalog.title
}
-
+
{catalog.fields.map((field, i) => {
// Render fields based on given array (usually parsed from config settings)
diff --git a/src/main/Save.tsx b/src/main/Save.tsx
index 031c10aed..816c38bbe 100644
--- a/src/main/Save.tsx
+++ b/src/main/Save.tsx
@@ -2,12 +2,9 @@ import React, { useEffect, useState } from "react";
import { css } from '@emotion/react'
import { basicButtonStyle, backOrContinueStyle, ariaLive, errorBoxStyle,
- navigationButtonStyle, flexGapReplacementStyle } from '../cssStyles'
+ navigationButtonStyle, flexGapReplacementStyle, spinningStyle } from '../cssStyles'
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
- faSpinner, faCheck, faExclamationCircle, faChevronLeft, faSave, faCheckCircle,
-} from "@fortawesome/free-solid-svg-icons";
+import { LuLoader, LuCheckCircle, LuAlertCircle, LuChevronLeft, LuSave, LuCheck} from "react-icons/lu";
import { useDispatch, useSelector } from 'react-redux';
import { selectFinishState } from '../redux/finishSlice'
@@ -23,7 +20,7 @@ import { postMetadata, selectPostError, selectPostStatus, setHasChanges as metad
import { selectSubtitles, selectHasChanges as selectSubtitleHasChanges,
setHasChanges as subtitleSetHasChanges } from "../redux/subtitleSlice";
import { serializeSubtitle } from "../util/utilityFunctions";
-import { selectTheme } from "../redux/themeSlice";
+import { useTheme } from "../themes";
import { ThemedTooltip } from "./Tooltip";
/**
@@ -40,7 +37,7 @@ const Save : React.FC = () => {
const postError = useSelector(selectError)
const postMetadataStatus = useSelector(selectPostStatus);
const postMetadataError = useSelector(selectPostError);
- const theme = useSelector(selectTheme);
+ const theme = useTheme();
const metadataHasChanges = useSelector(metadataSelectHasChanges)
const hasChanges = useSelector(selectHasChanges)
const subtitleHasChanges = useSelector(selectSubtitleHasChanges)
@@ -59,7 +56,7 @@ const Save : React.FC = () => {
&& !hasChanges && !metadataHasChanges && !subtitleHasChanges) {
return (
<>
-
+
{t("save.success-text")}
)
@@ -71,7 +68,7 @@ const Save : React.FC = () => {
{t("save.info-text")}
@@ -110,23 +107,23 @@ export const SaveButton: React.FC = () => {
const subtitles = useSelector(selectSubtitles)
const workflowStatus = useSelector(selectStatus);
const metadataStatus = useSelector(selectPostStatus);
- const theme = useSelector(selectTheme);
+ const theme = useTheme();
const [metadataSaveStarted, setMetadataSaveStarted] = useState(false);
// Update based on current fetching status
- let icon = faSave
+ let Icon = LuSave
let spin = false
let tooltip = null
if (workflowStatus === 'failed' || metadataStatus === 'failed') {
- icon = faExclamationCircle
+ Icon = LuAlertCircle
spin = false
tooltip = t("save.confirmButton-failed-tooltip")
} else if (workflowStatus === 'success' && metadataStatus === 'success') {
- icon = faCheck
+ Icon = LuCheck
spin = false
tooltip = t("save.confirmButton-success-tooltip")
} else if (workflowStatus === 'loading' || metadataStatus === 'loading') {
- icon = faSpinner
+ Icon = LuLoader
spin = true
tooltip = t("save.confirmButton-attempting-tooltip")
}
@@ -189,7 +186,7 @@ export const SaveButton: React.FC = () => {
onKeyDown={(event: React.KeyboardEvent
) => { if (event.key === " " || event.key === "Enter") {
save()
} }}>
-
+
{t("save.confirm-button")}
{ariaSaveUpdate()}
-
+
{t("subtitles.editTitle", {title: getTitle()})}
@@ -150,11 +135,10 @@ const SubtitleEditor : React.FC = () => {
export const BackButton : React.FC = () => {
const { t } = useTranslation();
- const theme = useSelector(selectTheme)
+ const theme = useTheme()
const dispatch = useDispatch();
const backButtonStyle = css({
- width: '50px',
height: '10px',
padding: '16px',
boxShadow: `${theme.boxShadow}`,
@@ -171,7 +155,7 @@ export const BackButton : React.FC = () => {
onKeyDown={(event: React.KeyboardEvent
) => { if (event.key === " " || event.key === "Enter") {
dispatch(setIsDisplayEditView(false))
} }}>
-
+
{t("subtitles.backButton")}
diff --git a/src/main/SubtitleListEditor.tsx b/src/main/SubtitleListEditor.tsx
index ea76dafaf..e0c58d45a 100644
--- a/src/main/SubtitleListEditor.tsx
+++ b/src/main/SubtitleListEditor.tsx
@@ -1,6 +1,6 @@
import { css, SerializedStyles } from "@emotion/react"
-import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { IconType } from "react-icons";
+import { LuPlus, LuTrash} from "react-icons/lu";
import { memoize } from "lodash"
import React, { useRef } from "react"
import { useEffect, useState } from "react"
@@ -28,9 +28,9 @@ import { convertMsToReadableString } from "../util/utilityFunctions"
import { VariableSizeList } from "react-window"
import { CSSProperties } from "react"
import AutoSizer from "react-virtualized-auto-sizer"
-import { selectTheme, selectThemeState } from "../redux/themeSlice"
+import { useTheme } from "../themes";
import { ThemedTooltip } from "./Tooltip"
-import { IconProp } from "@fortawesome/fontawesome-svg-core"
+import { useColorScheme } from "@opencast/appkit";
/**
* Displays everything needed to edit subtitles
@@ -183,7 +183,7 @@ const SubtitleListSegment = React.memo((props: subtitleListSegmentProps) => {
const cue = items[props.index]
const { t } = useTranslation();
- const theme = useSelector(selectTheme)
+ const theme = useTheme()
const dispatch = useDispatch()
// Unfortunately, the focus selectors will cause every element to rerender,
@@ -298,7 +298,7 @@ const SubtitleListSegment = React.memo((props: subtitleListSegmentProps) => {
dispatch(setCurrentlyAt(cue.startTime))
}
- const themeState = useSelector(selectThemeState);
+ const { scheme } = useColorScheme();
const segmentStyle = css({
display: 'flex',
@@ -321,8 +321,8 @@ const SubtitleListSegment = React.memo((props: subtitleListSegmentProps) => {
outline: `${theme.element_outline}`,
},
'& input': {
- marginTop: (themeState === 'high-contrast-dark' || themeState === 'high-contrast-light' ? '3%' : '0%'),
- marginBottom: (themeState === 'high-contrast-dark' || themeState === 'high-contrast-light' ? '3%' : '0%'),
+ marginTop: (scheme === 'dark-high-contrast' || scheme === 'light-high-contrast' ? '3%' : '0%'),
+ marginBottom: (scheme === 'dark-high-contrast' || scheme === 'light-high-contrast' ? '3%' : '0%'),
}
})
@@ -418,7 +418,7 @@ const SubtitleListSegment = React.memo((props: subtitleListSegmentProps) => {
event.stopPropagation() // Prevent video playback due to Space bar press
addCueAbove()
} }}
- icon={faPlus}
+ Icon={LuPlus}
/>
{
event.stopPropagation() // Prevent video playback due to Space bar press
deleteCue()
} }}
- icon={faTrash}
+ Icon={LuTrash}
/>
{
event.stopPropagation() // Prevent video playback due to Space bar press
addCueBelow()
} }}
- icon={faPlus}
+ Icon={LuPlus}
/>
)
diff --git a/src/main/SubtitleSelect.tsx b/src/main/SubtitleSelect.tsx
index f3adc325b..f11fafecf 100644
--- a/src/main/SubtitleSelect.tsx
+++ b/src/main/SubtitleSelect.tsx
@@ -5,14 +5,13 @@ import { settings, subtitleTags } from '../config'
import { selectSubtitles, setSelectedSubtitleId, setSubtitle } from "../redux/subtitleSlice";
import { useDispatch, useSelector } from "react-redux";
import { setIsDisplayEditView } from "../redux/subtitleSlice";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { LuPlus} from "react-icons/lu";
import { Form } from "react-final-form";
import { Select } from "mui-rff";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { selectSubtitlesFromOpencast } from "../redux/videoSlice";
-import { selectTheme } from "../redux/themeSlice";
+import { useTheme } from "../themes";
import { ThemeProvider } from '@mui/material/styles';
import { ThemedTooltip } from "./Tooltip";
import { languageCodeToName } from "../util/utilityFunctions";
@@ -93,9 +92,11 @@ const SubtitleSelect : React.FC = () => {
}
const subtitleSelectStyle = css({
- display: 'grid',
- gridTemplateColumns: 'repeat(auto-fit, minmax(20em, 1fr))',
- gridRowGap: '30px',
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'center',
+ flexWrap: 'wrap',
+ ...(flexGapReplacementStyle(30, false)),
})
const renderButtons = () => {
@@ -143,12 +144,21 @@ const SubtitleSelectButton: React.FC<{
icon,
}) => {
const { t } = useTranslation();
- const theme = useSelector(selectTheme)
+ const theme = useTheme()
const dispatch = useDispatch()
const flagStyle = css({
- fontSize: '2em',
- overflow: 'hidden'
+ fontSize: '2.5em',
+ overflow: 'hidden',
+
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ background: `${theme.background_finish_menu_icon}`,
+ color: `${theme.text}`,
+ borderRadius: '50%',
+ width: '90px',
+ height: '90px',
});
const titleStyle = css({
@@ -187,7 +197,7 @@ const SubtitleAddButton: React.FC<{
}) => {
const { t } = useTranslation();
- const theme = useSelector(selectTheme)
+ const theme = useTheme()
const dispatch = useDispatch()
@@ -220,21 +230,24 @@ const SubtitleAddButton: React.FC<{
}
const plusIconStyle = css({
- display: isPlusDisplay ? 'block' : 'none'
+ display: isPlusDisplay ? 'flex' : 'none'
});
const subtitleAddFormStyle = css({
display: !isPlusDisplay ? 'flex' : 'none',
flexDirection: 'column' as const,
...(flexGapReplacementStyle(30, false)),
+ width: '80%',
padding: '20px',
});
const createButtonStyle = css({
- boxShadow: '0 0 10px rgba(0, 0, 0, 0.3)',
- fontSize: '0.75em',
- background: 'snow',
- border: '1px solid #ccc',
+ padding: '10px 5px',
+ width: '100%',
+ boxShadow: '',
+ border: `1px solid ${theme.text}`,
+ backgroundColor: `${theme.background}`,
+ color: `${theme.text}`,
"&[disabled]": {
opacity: '0.6',
@@ -252,7 +265,7 @@ const SubtitleAddButton: React.FC<{
setIsPlusDisplay(false)
} }}
>
-
+
diff --git a/src/main/SubtitleTimeline.tsx b/src/main/SubtitleTimeline.tsx
index d2c7259e1..18f8d3e53 100644
--- a/src/main/SubtitleTimeline.tsx
+++ b/src/main/SubtitleTimeline.tsx
@@ -22,7 +22,7 @@ import "react-resizable/css/styles.css";
import { GlobalHotKeys } from "react-hotkeys";
import { scrubberKeyMap } from "../globalKeys";
import ScrollContainer, { ScrollEvent } from "react-indiana-drag-scroll";
-import { selectTheme } from "../redux/themeSlice";
+import { useTheme } from "../themes";
import { ThemedTooltip } from "./Tooltip";
import { useTranslation } from "react-i18next";
@@ -33,7 +33,7 @@ import { useTranslation } from "react-i18next";
const SubtitleTimeline: React.FC = () => {
const { t } = useTranslation();
- const theme = useSelector(selectTheme)
+ const theme = useTheme()
// Init redux variables
const dispatch = useDispatch();
@@ -97,7 +97,7 @@ const SubtitleTimeline: React.FC = () => {
css={{
position: 'absolute',
width: '2px',
- height: '190px',
+ height: '200px',
...(refTop.current) && {left: (refTop.current.clientWidth / 2)},
top: '10px',
background: `${theme.text}`,
@@ -210,7 +210,7 @@ const TimelineSubtitleSegment: React.FC<{
const [isGrabbed, setIsGrabbed] = useState(false)
const nodeRef = React.useRef(null); // For supressing "ReactDOM.findDOMNode() is deprecated" warning
- const theme = useSelector(selectTheme);
+ const theme = useTheme();
// Reposition scrubber when the current x position was changed externally
useEffect(() => {
setControlledPosition({x: (props.cue.startTime / duration) * (props.timelineWidth), y: 0});
diff --git a/src/main/SubtitleVideoArea.tsx b/src/main/SubtitleVideoArea.tsx
index a93b4450c..a885cfa4f 100644
--- a/src/main/SubtitleVideoArea.tsx
+++ b/src/main/SubtitleVideoArea.tsx
@@ -19,10 +19,11 @@ import { selectVideos } from "../redux/videoSlice";
import { Flavor } from "../types";
import { settings } from "../config";
import { useTranslation } from "react-i18next";
-import { VideoControls, VideoPlayer } from "./Video";
import { flexGapReplacementStyle } from "../cssStyles";
import { serializeSubtitle } from "../util/utilityFunctions";
-import { selectTheme } from "../redux/themeSlice";
+import { useTheme } from "../themes";
+import { VideoPlayer } from "./VideoPlayers";
+import VideoControls from "./VideoControls";
import Select from "react-select";
import { selectFieldStyle } from "../cssStyles";
@@ -118,6 +119,8 @@ const SubtitleVideoArea : React.FC = () => {
url={getTrackURI()}
isPrimary={true}
subtitleUrl={subtitleUrl}
+ first={true}
+ last={true}
selectIsPlaying={selectIsPlaying}
selectCurrentlyAtInSeconds={selectCurrentlyAtInSeconds}
selectPreviewTriggered={selectPreviewTriggered}
@@ -162,7 +165,7 @@ const VideoSelectDropdown : React.FC<{
}) => {
const { t } = useTranslation();
- const theme = useSelector(selectTheme)
+ const theme = useTheme()
const dropdownName = "flavors"
diff --git a/src/main/TheEnd.tsx b/src/main/TheEnd.tsx
index 0a24df59c..9b5e67af8 100644
--- a/src/main/TheEnd.tsx
+++ b/src/main/TheEnd.tsx
@@ -2,15 +2,14 @@ import React from "react";
import { css } from '@emotion/react'
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCheckCircle, faTimesCircle } from "@fortawesome/free-solid-svg-icons";
+import { LuCheckCircle, LuXCircle} from "react-icons/lu";
import { useSelector } from 'react-redux';
import { selectEndState } from '../redux/endSlice'
import { basicButtonStyle, flexGapReplacementStyle, navigationButtonStyle } from "../cssStyles";
import { useTranslation } from 'react-i18next';
-import { selectTheme } from "../redux/themeSlice";
+import { useTheme } from "../themes";
import { ThemedTooltip } from "./Tooltip";
/**
@@ -24,14 +23,6 @@ const TheEnd : React.FC = () => {
// Init redux variables
const endState = useSelector(selectEndState)
- const icon = () => {
- if (endState === 'discarded') {
- return faTimesCircle
- } else {
- return faCheckCircle
- }
- }
-
const text = () => {
if (endState === 'discarded') {
return t("theEnd.discarded-text")
@@ -42,7 +33,7 @@ const TheEnd : React.FC = () => {
const theEndStyle = css({
width: '100%',
- height: '100%',
+ height: 'calc(100% - 64px)',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
@@ -52,7 +43,7 @@ const TheEnd : React.FC = () => {
return (
-
+ {endState === 'discarded' ?
:
}
{text()}
{(endState === 'discarded') &&
}
diff --git a/src/main/ThemeSwitcher.tsx b/src/main/ThemeSwitcher.tsx
deleted file mode 100644
index bcb9fdfe3..000000000
--- a/src/main/ThemeSwitcher.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { useDispatch, useSelector } from "react-redux"
-import { selectTheme, selectThemeState, toggleTheme, setState } from "../redux/themeSlice";
-import Select from "react-select";
-import { selectFieldStyle } from "../cssStyles";
-
-const ThemeSwitcher: React.FC = () => {
-
- const { t } = useTranslation();
-
- const dispatch = useDispatch();
- const themeState = useSelector(selectThemeState);
- const theme = useSelector(selectTheme);
-
- React.useEffect(() => {
- localStorage.setItem('theme', themeState)
- dispatch(toggleTheme())
- }, [themeState, theme, dispatch])
-
- const isDarkPrefered = window.matchMedia('(prefers-color-scheme: dark)');
- // Listen to system preference changes
- const systemPreferenceHasChanged = () => {
- if (themeState === 'system') {
- dispatch(toggleTheme())
- }
- isDarkPrefered.removeEventListener('change', systemPreferenceHasChanged)
- }
-
- isDarkPrefered.addEventListener('change', systemPreferenceHasChanged)
-
- const switchTheme = (themeState: string) => {
- if (themeState === 'system') {
- dispatch(setState('system'))
- }
- else if (themeState === 'high-contrast-dark') {
- dispatch(setState('high-contrast-dark'))
- }
- else if (themeState === 'high-contrast-light') {
- dispatch(setState('high-contrast-light'))
- }
- else if (themeState === 'dark') {
- dispatch(setState('dark'))
- }
- else {
- dispatch(setState('light'))
- }
- }
-
- const baseStyle = {
- maxWidth: '50vw',
- width: '870px',
- alignSelf: 'center',
- padding: '20px',
- }
-
- const headerStyle = {
- display: 'flex',
- flexDirection: 'column' as const,
- alignItems: 'center',
- }
-
- const themes = [
- { value: 'system', label: t('theme.system') },
- { value: 'light', label: t('theme.lightmode') },
- { value: 'dark', label: t('theme.darkmode') },
- { value: 'high-contrast-light', label: t('theme.high-contrast-light') },
- { value: 'high-contrast-dark', label: t('theme.high-contrast-dark') },
- ]
-
- return (
-
-
{t('theme.appearance')}
-
- )
-}
-
-export default ThemeSwitcher;
diff --git a/src/main/Thumbnail.tsx b/src/main/Thumbnail.tsx
index 4c703aaf8..0645ef1f1 100644
--- a/src/main/Thumbnail.tsx
+++ b/src/main/Thumbnail.tsx
@@ -1,21 +1,22 @@
import { css } from "@emotion/react";
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { faCamera, faCopy, faInfoCircle, faTimesCircle, faUpload } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconType } from "react-icons";
+import { LuCamera, LuCopy, LuXCircle, LuUpload} from "react-icons/lu";
import React from "react";
import { useTranslation } from "react-i18next";
import { useDispatch, useSelector } from "react-redux";
import { settings } from "../config";
-import { basicButtonStyle, deactivatedButtonStyle, flexGapReplacementStyle, titleStyle, titleStyleBold } from "../cssStyles";
-import { selectTheme, Theme } from "../redux/themeSlice";
+import { basicButtonStyle, deactivatedButtonStyle, flexGapReplacementStyle, titleStyle, titleStyleBold, videosStyle,
+ backgroundBoxStyle } from "../cssStyles";
+import { Theme, useTheme } from "../themes";
import { selectOriginalThumbnails, selectVideos, selectTracks, setHasChanges, setThumbnail, setThumbnails } from "../redux/videoSlice";
import { Track } from "../types";
import Timeline from "./Timeline";
-import { VideoControls, VideoPlayers } from "./Video";
import {
selectIsPlaying, selectCurrentlyAt, setIsPlaying, selectIsPlayPreview, setIsPlayPreview, setClickTriggered, setCurrentlyAt
} from '../redux/videoSlice'
import { ThemedTooltip } from "./Tooltip";
+import VideoPlayers from "./VideoPlayers";
+import VideoControls from "./VideoControls";
/**
@@ -26,6 +27,7 @@ const Thumbnail : React.FC = () => {
const { t } = useTranslation()
const dispatch = useDispatch()
+ const theme = useTheme();
const originalThumbnails = useSelector(selectOriginalThumbnails)
// Generate Refs
@@ -87,26 +89,15 @@ const Thumbnail : React.FC = () => {
alignItems: 'center',
})
+ const bottomStyle = css({
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ })
+
return (
-
{t('thumbnail.title')}
-
-
-
+ {t('thumbnail.title')}
{
uploadCallback={uploadCallback}
discard={discardThumbnail}
/>
+
+ {videoTracks.map((track: Track, index: number) => (
+
+ ))}
+
)
}
}
return (
-
+ <>
{renderSingleOrMultiple()}
-
+
)
}
@@ -194,6 +210,7 @@ const ThumbnailTableRow: React.FC<{
}> = ({track, index, inputRefs, generate, upload, uploadCallback, discard}) => {
const { t } = useTranslation()
+ const theme = useTheme();
const renderPriority = (thumbnailPriority: number) => {
if (isNaN(thumbnailPriority)) {
@@ -210,11 +227,10 @@ const ThumbnailTableRow: React.FC<{
}
return (
-
+
{track.flavor.type + renderPriority(track.thumbnailPriority)}
-
= ({track}) => {
const { t } = useTranslation()
+ const theme = useTheme()
const generalStyle = css({
- height: '280px',
+ width: '100%',
+ maxWidth: '457px',
+ aspectRatio: '16/9',
})
const imageStyle = css({
- maxHeight: '100%',
})
const placeholderStyle = css({
+ width: '100vw', // TODO: This is necessary to make the placeholder large enough, but prevents it from shrinking
backgroundColor: 'grey',
- // For whatever reason, setting the width relative to height is way to difficult,
- // so we hardcode the box size here
- width: '497px',
- // Support for aspectRatio is still spotty and implementations across browsers
- // differ too much
- // aspectRatio: '16/9',
-
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
+ color: `${theme.text}`,
})
return (
@@ -309,6 +322,11 @@ const ThumbnailButtons : React.FC<{
dispatch(setHasChanges(true))
}
+ const verticalLineStyle = css({
+ borderTop: '1px solid #DDD;',
+ width: '100%',
+ })
+
return (
+
{ upload(index) }}
text={t('thumbnail.buttonUpload')}
tooltipText={t('thumbnail.buttonUpload-tooltip')}
ariaLabel={t('thumbnail.buttonUpload-tooltip-aria')}
- icon={faUpload}
+ Icon={LuUpload}
active={true}
/>
{/* Hidden input field for upload */}
@@ -338,20 +357,22 @@ const ThumbnailButtons : React.FC<{
onChange={event => uploadCallback(event, track)}
aria-hidden="true"
/>
+
{ setForOtherThumbnails(track.thumbnailUri) }}
text={t('thumbnail.buttonUseForOtherThumbnails')}
tooltipText={t('thumbnail.buttonUseForOtherThumbnails-tooltip')}
ariaLabel={t('thumbnail.buttonUseForOtherThumbnails-tooltip-aria')}
- icon={faCopy}
+ Icon={LuCopy}
active={(track.thumbnailUri && track.thumbnailUri.startsWith("data") ? true : false)}
/>
+
{ discard(track.id) }}
text={t('thumbnail.buttonDiscard')}
tooltipText={t('thumbnail.buttonDiscard-tooltip')}
ariaLabel={t('thumbnail.buttonDiscard-tooltip-aria')}
- icon={faTimesCircle}
+ Icon={LuXCircle}
active={(track.thumbnailUri && track.thumbnailUri.startsWith("data") ? true : false)}
/>
@@ -363,10 +384,10 @@ const ThumbnailButton : React.FC<{
text: string
tooltipText: string,
ariaLabel: string,
- icon: IconProp,
+ Icon: IconType,
active: boolean,
-}> = ({handler, text, tooltipText, ariaLabel, icon, active}) => {
- const theme = useSelector(selectTheme);
+}> = ({handler, text, tooltipText, ariaLabel, Icon, active}) => {
+ const theme = useTheme();
const ref = React.useRef(null)
const clickHandler = () => {
@@ -388,7 +409,7 @@ const ThumbnailButton : React.FC<{
onClick={clickHandler}
onKeyDown={keyHandler}
>
-
+
{text}
@@ -405,7 +426,7 @@ const AffectAllRow : React.FC<{
}> = ({generate, tracks}) => {
const { t } = useTranslation()
- const theme = useSelector(selectTheme);
+ const theme = useTheme();
const generateAll = () => {
for (let i = 0; i < tracks.length; i++) {
@@ -422,7 +443,6 @@ const AffectAllRow : React.FC<{
gap: '20px',
justifyContent: 'center',
alignItems: 'center',
- borderTop: `${theme.menuBorder}`,
})
const buttonStyle = css({
@@ -434,8 +454,6 @@ const AffectAllRow : React.FC<{
return (
-
- {t('thumbnail.explanation')}
-
+
{t('thumbnail.buttonGenerateAll')}
@@ -472,9 +490,10 @@ const ThumbnailTableSingleRow: React.FC<{
discard: any,
}> = ({track, index, inputRefs, generate, upload, uploadCallback, discard}) => {
const { t } = useTranslation();
+ const theme = useTheme();
return (
-
+
{t("thumbnailSimple.rowTitle")}
@@ -518,7 +537,7 @@ const ThumbnailButtonsSimple : React.FC<{
text={t('thumbnail.buttonGenerate') + " " + t("thumbnailSimple.from") + " " + generateTrack.flavor.type}
tooltipText={t('thumbnail.buttonGenerate-tooltip')}
ariaLabel={t('thumbnail.buttonGenerate-tooltip-aria')}
- icon={faCamera}
+ Icon={LuCamera}
active={true}
key={generateIndex}
/>
@@ -528,7 +547,7 @@ const ThumbnailButtonsSimple : React.FC<{
text={t('thumbnail.buttonUpload')}
tooltipText={t('thumbnail.buttonUpload-tooltip')}
ariaLabel={t('thumbnail.buttonUpload-tooltip-aria')}
- icon={faUpload}
+ Icon={LuUpload}
active={true}
/>
{/* Hidden input field for upload */}
@@ -547,7 +566,7 @@ const ThumbnailButtonsSimple : React.FC<{
text={t('thumbnail.buttonDiscard')}
tooltipText={t('thumbnail.buttonDiscard-tooltip')}
ariaLabel={t('thumbnail.buttonDiscard-tooltip-aria')}
- icon={faTimesCircle}
+ Icon={LuXCircle}
active={(track.thumbnailUri && track.thumbnailUri.startsWith("data") ? true : false)}
/>
@@ -560,14 +579,15 @@ const ThumbnailButtonsSimple : React.FC<{
const thumbnailTableRowStyle = css({
display: 'flex',
flexDirection: 'column',
- padding: '6px 12px',
})
const thumbnailTableRowTitleStyle = css({
textAlign: 'left',
- textTransform: 'capitalize',
fontSize: 'larger',
fontWeight: 'bold',
+ '&:first-letter': {
+ textTransform: 'capitalize',
+ },
})
const thumbnailTableRowRowStyle = css({
@@ -581,13 +601,11 @@ const thumbnailTableRowRowStyle = css({
const thumbnailButtonsStyle = css({
// TODO: Avoid hard-coding max-width
- "@media (max-width: 1000px)": {
- flexDirection: 'row',
+ "@media (max-width: 1550px)": {
width: '100%',
},
display: 'flex',
flexDirection: 'column',
- ...(flexGapReplacementStyle(20, true)),
})
const thumbnailButtonStyle = (active: boolean, theme: Theme) => [
@@ -595,11 +613,10 @@ const thumbnailButtonStyle = (active: boolean, theme: Theme) => [
{
width: '100%',
height: '100%',
- boxShadow: `${theme.boxShadow}`,
background: `${theme.element_bg}`,
justifySelf: 'center',
alignSelf: 'center',
- padding: '0px 2px'
+ padding: '0px 4px'
}
];
diff --git a/src/main/Timeline.tsx b/src/main/Timeline.tsx
index 6ed81d1c3..4697d8e7a 100644
--- a/src/main/Timeline.tsx
+++ b/src/main/Timeline.tsx
@@ -10,8 +10,7 @@ import {
selectSegments, selectActiveSegmentIndex, selectDuration, selectVideoURL, selectWaveformImages, setWaveformImages
} from '../redux/videoSlice'
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faBars, faSpinner } from "@fortawesome/free-solid-svg-icons";
+import { LuMenu, LuLoader} from "react-icons/lu";
import useResizeObserver from "use-resize-observer";
@@ -23,8 +22,9 @@ import { scrubberKeyMap } from '../globalKeys';
import { useTranslation } from 'react-i18next';
import { ActionCreatorWithPayload } from '@reduxjs/toolkit';
import { RootState } from '../redux/store';
-import { selectTheme } from '../redux/themeSlice';
+import { useTheme } from "../themes";
import { ThemedTooltip } from './Tooltip';
+import { spinningStyle } from '../cssStyles';
/**
* A container for visualizing the cutting of the video, as well as for controlling
@@ -80,7 +80,7 @@ const Timeline: React.FC<{
setCurrentlyAt={setCurrentlyAt}
setIsPlaying={setIsPlaying}
/>
-
+
@@ -117,7 +117,7 @@ export const Scrubber: React.FC<{
const duration = useSelector(selectDuration)
const activeSegmentIndex = useSelector(selectActiveSegmentIndex) // For ARIA information display
const segments = useSelector(selectSegments) // For ARIA information display
- const theme = useSelector(selectTheme)
+ const theme = useTheme()
// Init state variables
const [controlledPosition, setControlledPosition] = useState({ x: 0, y: 0 });
@@ -191,56 +191,46 @@ export const Scrubber: React.FC<{
}
const scrubberStyle = css({
- backgroundColor: `${theme.text}`,
- height: timelineHeight - 10 + 'px', // TODO: CHECK IF height: '100%',
+ backgroundColor: `${theme.scrubber}`,
+ height: timelineHeight + 20 + 'px', // TODO: CHECK IF height: '100%',
width: '1px',
position: 'absolute',
zIndex: 2,
- boxShadow: `${theme.boxShadow}`,
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
alignItems: 'center',
- outline: `${theme.scrubber}`,
+ top: '-20px',
});
const scrubberDragHandleStyle = css({
// Base style
- background: `${theme.text}`,
+ background: `${theme.scrubber_handle}`,
display: "inline-block",
- height: "10px",
+ height: "20px",
position: "relative",
width: "20px",
+ borderRadius: '5px',
+ boxShadow: `${theme.boxShadow_tiles}`,
"&:after": {
- borderTop: `10px solid ${theme.text}`,
+ borderTop: `10px solid ${theme.scrubber_handle}`,
borderLeft: '10px solid transparent',
borderRight: '10px solid transparent',
content: '""',
height: 0,
left: 0,
position: "absolute",
- top: "10px",
+ top: "17px",
width: 0,
},
// Animation
cursor: isGrabbed ? "grabbing" : "grab",
- transitionDuration: "0.3s",
- transitionProperty: "transform",
- "&:hover": {
- transform: 'scale(1.1)',
- },
- "&:focus": {
- transform: 'scale(1.1)',
- },
- "&:active": {
- transform: 'scale(0.9)',
- },
})
const scrubberDragHandleIconStyle = css({
- transform: 'scaleY(0.7) rotate(90deg)',
- paddingRight: '5px',
- color: `${theme.background}`,
+ paddingLeft: '2px',
+ paddingTop: '2px',
+ color: `${theme.scrubber_icon}`,
})
// // Possible TODO: Find a way to use ariaLive in a way that only the latest change is announced
@@ -260,7 +250,6 @@ export const Scrubber: React.FC<{
nodeRef={nodeRef}
>
@@ -305,23 +294,23 @@ export const SegmentsList: React.FC<{
*/
const bgColor = (deleted: boolean, active: boolean) => {
if (!deleted && !active) {
- return 'rgba(0, 0, 255, 0.4)'
+ return 'rgba(137, 137, 137, 0.4)'
} else if (deleted && !active) {
return `repeating-linear-gradient(
- -45deg,
- rgba(255, 45, 45, 0.4),
- rgba(255, 45, 45, 0.4) 10px,
- rgba(255, 0, 0, 0.4) 10px,
- rgba(255, 0, 0, 0.4) 20px);`
+ -35deg,
+ rgba(200, 0, 0, 0.4),
+ rgba(200, 0, 0, 0.4) 2px,
+ rgba(255, 95, 95, 0.4) 2px,
+ rgba(255, 95, 95, 0.4) 50px);`
} else if (!deleted && active) {
- return 'rgba(0, 0, 200, 0.4)'
+ return 'rgba(78, 78, 78, 0.4)'
} else if (deleted && active) {
return `repeating-linear-gradient(
- -45deg,
- rgba(200, 45, 45, 0.4),
- rgba(200, 45, 45, 0.4) 10px,
- rgba(200, 0, 0, 0.4) 10px,
- rgba(200, 0, 0, 0.4) 20px);`
+ -35deg,
+ rgba(180, 0, 0, 0.4),
+ rgba(180, 0, 0, 0.4) 2px,
+ rgba(255, 65, 65, 0.4) 2px,
+ rgba(255, 65, 65, 0.4) 50px);`
}
}
@@ -339,13 +328,12 @@ export const SegmentsList: React.FC<{
tabIndex={tabable ? 0 : -1}
css={{
background: bgColor(segment.deleted, styleByActiveSegment ? activeSegmentIndex === index : false),
- borderRadius: '5px',
borderStyle: styleByActiveSegment ? (activeSegmentIndex === index ? 'dashed' : 'solid') : 'solid',
borderColor: 'white',
borderWidth: '1px',
boxSizing: 'border-box',
width: ((segment.end - segment.start) / duration) * 100 + '%',
- height: timelineHeight - 20 + 'px', // CHECK IF 100%
+ height: timelineHeight + 'px', // CHECK IF 100%
zIndex: 1,
}}>
@@ -357,7 +345,7 @@ export const SegmentsList: React.FC<{
const segmentsStyle = css({
display: 'flex',
flexDirection: 'row',
- paddingTop: '10px',
+ // paddingTop: '10px',
height: '100%',
})
@@ -378,7 +366,7 @@ export const Waveforms: React.FC<{timelineHeight: number}> = ({timelineHeight})
const dispatch = useDispatch();
const videoURLs = useSelector(selectVideoURL)
const videoURLStatus = useSelector((state: { videoState: { status: httpRequestState["status"] } }) => state.videoState.status);
- const theme = useSelector(selectTheme);
+ const theme = useTheme();
// Update based on current fetching status
const images = useSelector(selectWaveformImages)
@@ -391,15 +379,14 @@ export const Waveforms: React.FC<{timelineHeight: number}> = ({timelineHeight})
justifyContent: 'center',
...(images.length <= 0) && {alignItems: 'center'}, // Only center during loading
width: '100%',
- height: timelineHeight - 20 + 'px', // CHECK IF height: '100%',
- paddingTop: '10px',
+ height: timelineHeight + 'px', // CHECK IF height: '100%',
+ // paddingTop: '10px',
filter: `${theme.invert_wave}`,
color: `${theme.inverted_text}`,
});
const waveformStyle = css({
background: `${theme.waveform_bg}`,
- filter: `${theme.waveform_filter}`,
borderRadius: '5px',
});
@@ -468,7 +455,7 @@ export const Waveforms: React.FC<{timelineHeight: number}> = ({timelineHeight})
else {
return (
<>
-
+
{t("timeline.generateWaveform-text")}
);
diff --git a/src/main/Tooltip.tsx b/src/main/Tooltip.tsx
index e8ce9ee60..302a172cf 100644
--- a/src/main/Tooltip.tsx
+++ b/src/main/Tooltip.tsx
@@ -1,11 +1,10 @@
import React from 'react';
-import { selectTheme } from '../redux/themeSlice';
-import { useSelector } from 'react-redux';
+import { useTheme } from "../themes";
import Tooltip, { TooltipProps } from '@mui/material/Tooltip';
export const ThemedTooltip = ({ className, ...props }: TooltipProps) => {
- const theme = useSelector(selectTheme);
+ const theme = useTheme();
const positionRef = React.useRef<{ x: number; y: number }>({ x: 0, y: 0 });
const areaRef = React.useRef
(null);
@@ -46,7 +45,7 @@ export const ThemedTooltip = ({ className, ...props }: TooltipProps) => {
color: `${theme.tooltip_text}`,
fontSize: '16px',
lineHeight: 'normal',
- fontFamily: 'Open Sans',
+ fontFamily: 'Roboto Flex Variable',
}
},
arrow: {
diff --git a/src/main/TrackSelection.tsx b/src/main/TrackSelection.tsx
index d96862d4d..61d90b144 100644
--- a/src/main/TrackSelection.tsx
+++ b/src/main/TrackSelection.tsx
@@ -1,20 +1,18 @@
import React from "react";
import { css } from '@emotion/react'
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
- faInfoCircle,
- faTrash,
- faTrashRestore,
-} from "@fortawesome/free-solid-svg-icons";
+
+import { IconType } from "react-icons";
+import { LuTrash } from "react-icons/lu";
+import { ReactComponent as TrashRestore } from '../img/trash-restore.svg';
import ReactPlayer from 'react-player'
import { Track } from '../types'
import { useSelector, useDispatch } from 'react-redux';
import { selectVideos, setTrackEnabled } from '../redux/videoSlice'
-import { basicButtonStyle, deactivatedButtonStyle } from '../cssStyles'
+import { backgroundBoxStyle, basicButtonStyle, customIconStyle, deactivatedButtonStyle, flexGapReplacementStyle, titleStyle, titleStyleBold } from '../cssStyles'
import { useTranslation } from 'react-i18next';
-import { selectTheme } from "../redux/themeSlice";
+import { useTheme } from "../themes";
import { ThemedTooltip } from "./Tooltip";
/**
@@ -29,41 +27,53 @@ const TrackSelection: React.FC = () => {
);
+ const trackSelectionStyle = css({
+ display: 'flex',
+ width: 'auto',
+ height: '100%',
+ flexDirection: 'column',
+ alignItems: 'center',
+ })
+
+ const trackAreaStyle = css({
+ display: 'flex',
+ width: '100%',
+ height: '100%',
+ flexDirection: 'row',
+ justifyContent: 'center',
+ alignItems: 'center',
+ ...(flexGapReplacementStyle(10, false)),
+ })
+
return (
-
- { trackItems }
-
+
);
}
-const Description: React.FC = () => {
+const Header: React.FC = () => {
const { t } = useTranslation();
+ const theme = useTheme()
- const description: string = t('trackSelection.description',
- 'Select or deselect which tracks are used for processing and publication.');
-
- const descriptionStyle = css({
- display: 'flex',
- alignItems: 'center',
- margin: '20px',
- padding: '10px',
- });
+ const description: string = t('trackSelection.title');
return (
-