From eb595f8fb5ee3f8abf791632706db31f00c04dd0 Mon Sep 17 00:00:00 2001 From: Arnei Date: Tue, 26 Sep 2023 10:04:19 +0200 Subject: [PATCH 1/6] Avoid cutting actions row overflowing Have it wrap instead, or just drop the text altogether --- src/main/CuttingActions.tsx | 25 +++++++++++++++++++++---- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/src/main/CuttingActions.tsx b/src/main/CuttingActions.tsx index 2a6f92ad8..f350ab04f 100644 --- a/src/main/CuttingActions.tsx +++ b/src/main/CuttingActions.tsx @@ -1,6 +1,6 @@ import React from "react"; -import { basicButtonStyle, customIconStyle } from '../cssStyles' +import { BREAKPOINT_MEDIUM, basicButtonStyle, customIconStyle } from '../cssStyles' import { IconType } from "react-icons"; import { LuScissors, LuChevronLeft, LuChevronRight, LuTrash, LuMoveHorizontal} from "react-icons/lu"; @@ -56,6 +56,8 @@ const CuttingActions: React.FC = () => { flexDirection: 'row' as const, justifyContent: 'center', alignItems: 'center', + + flexWrap: 'wrap', }) const verticalLineStyle = css({ @@ -126,7 +128,14 @@ interface cuttingActionsButtonInterface { * A button representing a single action a user can take while cutting * @param param0 */ -const CuttingActionsButton: React.FC = ({Icon, actionName, actionHandler, action, tooltip, ariaLabelText}) => { +const CuttingActionsButton: React.FC = ({ + Icon, + actionName, + actionHandler, + action, + tooltip, + ariaLabelText, +}) => { const ref = React.useRef(null) const theme = useTheme(); @@ -141,7 +150,11 @@ const CuttingActionsButton: React.FC = ({Icon, ac } }} > - {actionName} + {actionName} ); @@ -175,7 +188,11 @@ const MarkAsDeletedButton : React.FC = ({actionHand } }} > {isCurrentSegmentAlive ? : } -
{isCurrentSegmentAlive ? t('cuttingActions.delete-button') : t("cuttingActions.restore-button")}
+ {isCurrentSegmentAlive ? t('cuttingActions.delete-button') : t("cuttingActions.restore-button")} ); From f1539093900316595f1187da2d7ca0cefa3a8297 Mon Sep 17 00:00:00 2001 From: Arnei Date: Tue, 26 Sep 2023 14:28:00 +0200 Subject: [PATCH 2/6] Reduce video controls row minwidth If we start lacking in available maxWidth, dont show some stuff to avoid overflow. --- src/cssStyles.tsx | 6 ++++++ src/main/CuttingActions.tsx | 14 +++----------- src/main/Header.tsx | 8 ++------ src/main/VideoControls.tsx | 10 +++++----- 4 files changed, 16 insertions(+), 22 deletions(-) diff --git a/src/cssStyles.tsx b/src/cssStyles.tsx index e0c0e0782..2a8602881 100644 --- a/src/cssStyles.tsx +++ b/src/cssStyles.tsx @@ -464,3 +464,9 @@ export const backgroundBoxStyle = (theme: Theme) => css(({ padding: '20px', ...(flexGapReplacementStyle(25, false)), })) + +export const undisplay = (maxWidth: number) => css({ + [`@media (max-width: ${maxWidth}px)`]: { + display: "none", + } +}) diff --git a/src/main/CuttingActions.tsx b/src/main/CuttingActions.tsx index f350ab04f..133d095b7 100644 --- a/src/main/CuttingActions.tsx +++ b/src/main/CuttingActions.tsx @@ -1,6 +1,6 @@ import React from "react"; -import { BREAKPOINT_MEDIUM, basicButtonStyle, customIconStyle } from '../cssStyles' +import { BREAKPOINT_MEDIUM, basicButtonStyle, customIconStyle, undisplay } from '../cssStyles' import { IconType } from "react-icons"; import { LuScissors, LuChevronLeft, LuChevronRight, LuTrash, LuMoveHorizontal} from "react-icons/lu"; @@ -150,11 +150,7 @@ const CuttingActionsButton: React.FC = ({ } }} > - {actionName} + {actionName} ); @@ -188,11 +184,7 @@ const MarkAsDeletedButton : React.FC = ({actionHand } }} > {isCurrentSegmentAlive ? : } - {isCurrentSegmentAlive ? t('cuttingActions.delete-button') : t("cuttingActions.restore-button")} + {isCurrentSegmentAlive ? t('cuttingActions.delete-button') : t("cuttingActions.restore-button")} ); diff --git a/src/main/Header.tsx b/src/main/Header.tsx index cf04681ee..418e7d3b7 100644 --- a/src/main/Header.tsx +++ b/src/main/Header.tsx @@ -9,7 +9,7 @@ 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 { basicButtonStyle, BREAKPOINT_MEDIUM, BREAKPOINT_SMALL, flexGapReplacementStyle, undisplay } from '../cssStyles' import { ReactComponent as LogoSvg } from '../img/opencast-editor.svg'; import { selectIsEnd } from "../redux/endSlice"; @@ -251,11 +251,7 @@ const HeaderButton = React.forwardRef( css={[basicButtonStyle(theme), themeSelectorButtonStyle]} > - {label} + {label} ) }) diff --git a/src/main/VideoControls.tsx b/src/main/VideoControls.tsx index 3ebcca8ae..8e32004b5 100644 --- a/src/main/VideoControls.tsx +++ b/src/main/VideoControls.tsx @@ -11,7 +11,7 @@ import { } from '../redux/videoSlice' import { convertMsToReadableString } from '../util/utilityFunctions' -import { basicButtonStyle, flexGapReplacementStyle } from "../cssStyles"; +import { BREAKPOINT_MEDIUM, basicButtonStyle, flexGapReplacementStyle, undisplay } from "../cssStyles"; import { KEYMAP, rewriteKeys } from "../globalKeys"; import { useTranslation } from 'react-i18next'; @@ -138,7 +138,7 @@ const PreviewMode: React.FC<{ const previewModeTextStyle = (theme: Theme) => css({ display: 'inline-block', flexWrap: 'nowrap', - color: `${theme.text}` + color: `${theme.text}`, }) return ( @@ -154,7 +154,7 @@ const PreviewMode: React.FC<{ onKeyDown={(event: React.KeyboardEvent) => { if (event.key === " ") { switchPlayPreview(undefined) } }}> -
+
{t("video.previewButton")}
{isPlayPreview ? @@ -253,9 +253,9 @@ const TimeDisplay: React.FC<{ {new Date((currentlyAt ? currentlyAt : 0)).toISOString().substr(11, 10)} - {" / "} +
{" / "}
-
{new Date((duration ? duration : 0)).toISOString().substr(11, 10)}
From 7d12e82cccc311e44d2cbe7bf2af5127b3043001 Mon Sep 17 00:00:00 2001 From: Arnei Date: Tue, 26 Sep 2023 15:57:14 +0200 Subject: [PATCH 3/6] Improve Header for small screen widths The header can now get even narrower, like in Studio. --- src/img/opencast-editor-narrow.svg | 55 ++++++++++++++++++++++++++++++ src/main/Header.tsx | 11 ++++-- src/util/utilityFunctions.ts | 30 ++++++++++++++++ 3 files changed, 94 insertions(+), 2 deletions(-) create mode 100644 src/img/opencast-editor-narrow.svg diff --git a/src/img/opencast-editor-narrow.svg b/src/img/opencast-editor-narrow.svg new file mode 100644 index 000000000..c4a3c598e --- /dev/null +++ b/src/img/opencast-editor-narrow.svg @@ -0,0 +1,55 @@ + + + diff --git a/src/main/Header.tsx b/src/main/Header.tsx index 418e7d3b7..f832467c4 100644 --- a/src/main/Header.tsx +++ b/src/main/Header.tsx @@ -12,10 +12,12 @@ import { MainMenuStateNames } from "../types"; import { basicButtonStyle, BREAKPOINT_MEDIUM, BREAKPOINT_SMALL, flexGapReplacementStyle, undisplay } from '../cssStyles' import { ReactComponent as LogoSvg } from '../img/opencast-editor.svg'; +import { ReactComponent as LogoSvgNarrow } from '../img/opencast-editor-narrow.svg'; import { selectIsEnd } from "../redux/endSlice"; -import { checkboxMenuItem, HeaderMenuItemDef, ProtoButton, useColorScheme, WithHeaderMenu } from "@opencast/appkit"; +import { checkboxMenuItem, HeaderMenuItemDef, ProtoButton, screenWidthAtMost, useColorScheme, WithHeaderMenu } from "@opencast/appkit"; import { IconType } from "react-icons"; import i18next from "i18next"; +import useWindowDimensions from "../util/utilityFunctions"; function Header() { const theme = useTheme() @@ -67,6 +69,10 @@ function Header() { backgroundColor: theme.header_button_hover_bg, color: `${theme.header_text}` }, + + [screenWidthAtMost(BREAKPOINT_MEDIUM)]: { + fontSize: 0, + }, }) return ( @@ -94,6 +100,7 @@ const Logo: React.FC = () => { const { t } = useTranslation() const { scheme } = useColorScheme(); + const { width } = useWindowDimensions() const logo = css({ paddingLeft: '8px', @@ -116,7 +123,7 @@ const Logo: React.FC = () => { return ( 920 ? LogoSvg : LogoSvgNarrow} stateName={MainMenuStateNames.cutting} bottomText={""} ariaLabelText={t("mainMenu.cutting-button")} diff --git a/src/util/utilityFunctions.ts b/src/util/utilityFunctions.ts index 340f014be..7164d8654 100644 --- a/src/util/utilityFunctions.ts +++ b/src/util/utilityFunctions.ts @@ -1,6 +1,7 @@ import { nanoid } from '@reduxjs/toolkit'; import { WebVTTParser, WebVTTSerializer } from 'webvtt-parser'; import { ExtendedSubtitleCue, SubtitleCue } from '../types'; +import { useEffect, useState } from 'react'; export const roundToDecimalPlace = (num: number, decimalPlace: number) => { const decimalFactor = Math.pow(10, decimalPlace) @@ -180,3 +181,32 @@ export function languageCodeToName(lang: string | undefined): string | undefined return undefined } } + +/** + * @returns the current window width and height + */ +function getWindowDimensions() { + const { innerWidth: width, innerHeight: height } = window; + return { + width, + height + }; +} + +/** + * A hook for window dimensions + */ +export default function useWindowDimensions() { + const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions()); + + useEffect(() => { + function handleResize() { + setWindowDimensions(getWindowDimensions()); + } + + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, []); + + return windowDimensions; +} From 60939d9eb5c82ba8ca2b8fdac54ca2356c3ffb47 Mon Sep 17 00:00:00 2001 From: Arnei Date: Tue, 26 Sep 2023 16:32:02 +0200 Subject: [PATCH 4/6] Reduce main menu min width On narrow resolutions, the main menu takes up *a lot* of space. Now it takes less than half of what it took before. --- src/cssStyles.tsx | 7 +++++-- src/main/CuttingActions.tsx | 6 +++--- src/main/Header.tsx | 10 +++++----- src/main/MainMenu.tsx | 20 ++++++++++++++++++-- src/main/VideoControls.tsx | 8 ++++---- 5 files changed, 35 insertions(+), 16 deletions(-) diff --git a/src/cssStyles.tsx b/src/cssStyles.tsx index 2a8602881..5bfdf9d5d 100644 --- a/src/cssStyles.tsx +++ b/src/cssStyles.tsx @@ -7,6 +7,9 @@ import emotionNormalize from 'emotion-normalize'; import { checkFlexGapSupport } from './util/utilityFunctions'; import { createTheme } from '@mui/material/styles'; import { Theme, useTheme } from './themes'; +import { + DEFAULT_CONFIG as APPKIT_CONFIG, +} from "@opencast/appkit"; /** * An emotion component that inserts styles globally @@ -35,8 +38,8 @@ export const globalStyle = (theme: Theme) => css({ // When to switch behaviour based on screen width -export const BREAKPOINT_SMALL = 450; -export const BREAKPOINT_MEDIUM = 650; +/** Breakpoint values */ +export const BREAKPOINTS = APPKIT_CONFIG.breakpoints; /** diff --git a/src/main/CuttingActions.tsx b/src/main/CuttingActions.tsx index 133d095b7..522f6d4f1 100644 --- a/src/main/CuttingActions.tsx +++ b/src/main/CuttingActions.tsx @@ -1,6 +1,6 @@ import React from "react"; -import { BREAKPOINT_MEDIUM, basicButtonStyle, customIconStyle, undisplay } from '../cssStyles' +import { BREAKPOINTS, basicButtonStyle, customIconStyle, undisplay } from '../cssStyles' import { IconType } from "react-icons"; import { LuScissors, LuChevronLeft, LuChevronRight, LuTrash, LuMoveHorizontal} from "react-icons/lu"; @@ -150,7 +150,7 @@ const CuttingActionsButton: React.FC = ({ } }} > - {actionName} + {actionName}
); @@ -184,7 +184,7 @@ const MarkAsDeletedButton : React.FC = ({actionHand } }} > {isCurrentSegmentAlive ? : } - {isCurrentSegmentAlive ? t('cuttingActions.delete-button') : t("cuttingActions.restore-button")} + {isCurrentSegmentAlive ? t('cuttingActions.delete-button') : t("cuttingActions.restore-button")} ); diff --git a/src/main/Header.tsx b/src/main/Header.tsx index f832467c4..600738f18 100644 --- a/src/main/Header.tsx +++ b/src/main/Header.tsx @@ -9,7 +9,7 @@ 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, undisplay } from '../cssStyles' +import { basicButtonStyle, BREAKPOINTS, flexGapReplacementStyle, undisplay } from '../cssStyles' import { ReactComponent as LogoSvg } from '../img/opencast-editor.svg'; import { ReactComponent as LogoSvgNarrow } from '../img/opencast-editor-narrow.svg'; @@ -70,7 +70,7 @@ function Header() { color: `${theme.header_text}` }, - [screenWidthAtMost(BREAKPOINT_MEDIUM)]: { + [screenWidthAtMost(BREAKPOINTS.medium)]: { fontSize: 0, }, }) @@ -174,7 +174,7 @@ const LanguageButton: React.FC = () => { menu={{ label, items: menuItems, - breakpoint: BREAKPOINT_SMALL, + breakpoint: BREAKPOINTS.small, }} > @@ -200,7 +200,7 @@ const ThemeButton: React.FC = () => { menu={{ label: t("theme.appearance"), items: menuItems, - breakpoint: BREAKPOINT_MEDIUM, + breakpoint: BREAKPOINTS.medium, }}> ( css={[basicButtonStyle(theme), themeSelectorButtonStyle]} > - {label} + {label} ) }) diff --git a/src/main/MainMenu.tsx b/src/main/MainMenu.tsx index 2e97d1a13..35a7baa1c 100644 --- a/src/main/MainMenu.tsx +++ b/src/main/MainMenu.tsx @@ -13,7 +13,7 @@ import { setPageNumber } from '../redux/finishSlice' import { MainMenuStateNames } from '../types' import { settings } from '../config' -import { basicButtonStyle, flexGapReplacementStyle } from '../cssStyles' +import { basicButtonStyle, BREAKPOINTS, flexGapReplacementStyle } from '../cssStyles' import { setIsPlaying } from "../redux/videoSlice"; import { useTranslation } from 'react-i18next'; @@ -22,6 +22,7 @@ import { resetPostRequestState } from "../redux/workflowPostSlice"; import { setIsDisplayEditView } from "../redux/subtitleSlice"; import { useTheme } from "../themes"; +import { screenWidthAtMost } from "@opencast/appkit"; /** * A container for selecting the functionality shown in the main part of the app @@ -43,6 +44,10 @@ const MainMenu: React.FC = () => { overflowY: 'auto', background: `${theme.menu_background}`, ...(flexGapReplacementStyle(30, false)), + [screenWidthAtMost(BREAKPOINTS.large)]: { + minWidth: '60px', + padding: '20px 10px', + }, }); return ( @@ -144,6 +149,10 @@ export const MainMenuButton: React.FC = ({ boxShadow: `${theme.boxShadow}`, }, flexDirection: 'column', + [screenWidthAtMost(BREAKPOINTS.large)]: { + height: '60px', + minHeight: '40px', + }, }); return ( @@ -160,7 +169,14 @@ export const MainMenuButton: React.FC = ({ width: '36px', height: 'auto' }}/> - {bottomText &&
{bottomText}
} + {bottomText && +
+ {bottomText} +
} ); }; diff --git a/src/main/VideoControls.tsx b/src/main/VideoControls.tsx index 8e32004b5..a31377acc 100644 --- a/src/main/VideoControls.tsx +++ b/src/main/VideoControls.tsx @@ -11,7 +11,7 @@ import { } from '../redux/videoSlice' import { convertMsToReadableString } from '../util/utilityFunctions' -import { BREAKPOINT_MEDIUM, basicButtonStyle, flexGapReplacementStyle, undisplay } from "../cssStyles"; +import { BREAKPOINTS, basicButtonStyle, flexGapReplacementStyle, undisplay } from "../cssStyles"; import { KEYMAP, rewriteKeys } from "../globalKeys"; import { useTranslation } from 'react-i18next'; @@ -154,7 +154,7 @@ const PreviewMode: React.FC<{ onKeyDown={(event: React.KeyboardEvent) => { if (event.key === " ") { switchPlayPreview(undefined) } }}> -
+
{t("video.previewButton")}
{isPlayPreview ? @@ -253,9 +253,9 @@ const TimeDisplay: React.FC<{ {new Date((currentlyAt ? currentlyAt : 0)).toISOString().substr(11, 10)} -
{" / "}
+
{" / "}
-
{new Date((duration ? duration : 0)).toISOString().substr(11, 10)}
From 07127a39762954cb95dd4bd1d89f79e345254aa6 Mon Sep 17 00:00:00 2001 From: Arnei Date: Tue, 26 Sep 2023 16:50:17 +0200 Subject: [PATCH 5/6] More space for metadata on narrow screens There's quite a lot of empty space in the metadata view. It feels especially bad when you don't have a lot of screen real estate in the first place, so let's use a little more of it. --- src/main/Metadata.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/main/Metadata.tsx b/src/main/Metadata.tsx index 302d9ddfe..7a53b03a2 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, titleStyle, titleStyleBold } from '../cssStyles' +import { BREAKPOINTS, calendarStyle, errorBoxStyle, selectFieldStyle, titleStyle, titleStyleBold } from '../cssStyles' import { useSelector, useDispatch } from 'react-redux'; import { @@ -22,6 +22,7 @@ import { useTheme } from "../themes"; import { ThemeProvider } from "@mui/material/styles"; import { cloneDeep } from "lodash"; import { ParseKeys } from "i18next"; +import { screenWidthAtMost } from "@opencast/appkit"; /** * Creates a Metadata form @@ -92,6 +93,12 @@ const Metadata: React.FC = () => { marginRight: 'auto', minWidth: '50%', display: 'grid', + [screenWidthAtMost(1550)]: { + minWidth: '70%', + }, + [screenWidthAtMost(BREAKPOINTS.medium)]: { + minWidth: '90%', + }, }) const catalogStyle = css({ From 4482b91d91a1318ff1c331de0314f27872a89cf1 Mon Sep 17 00:00:00 2001 From: Arnei Date: Fri, 6 Dec 2024 09:39:00 +0100 Subject: [PATCH 6/6] Remove unused value --- src/main/Header.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/main/Header.tsx b/src/main/Header.tsx index 8441a1f2c..b8660e565 100644 --- a/src/main/Header.tsx +++ b/src/main/Header.tsx @@ -23,7 +23,6 @@ import { } from "@opencast/appkit"; import { IconType } from "react-icons"; import i18next from "i18next"; -import useWindowDimensions from "../util/utilityFunctions"; import { languages as lngs } from "../i18n/lngs-generated"; function Header() { @@ -124,7 +123,6 @@ const Logo: React.FC = () => { const { t } = useTranslation(); const { scheme } = useColorScheme(); - const { width } = useWindowDimensions(); const logo = css({ paddingLeft: "8px",