Activate eslint line length

This commit activates the default eslint line lenght of
120 and fixes the resulting warnings.

.eslintrc.js

@@ -17,10 +17,6 @@ module.exports = {
     // Many multiline lists do not have a trailing comma right now
     "comma-dangle": ["warn", "only-multiline"],
 
-    // Currently there are quite a lot of lines longer than 120 chars (85 ones).
-    // And 34 even longer than 140 chars.
-    "max-len": "off",
-
     // Currently 120 warnings.
     "@typescript-eslint/no-explicit-any": "off",
 

src/config.ts

@@ -245,7 +245,11 @@ const validate = (obj: Record<string, any> | null, allowParse: boolean, src: str
 
   // Validate a settings value with a validation function. Returns the final
   // value of the setting or `null` if it should be ignored.
-  const validateValue = (validation: (arg0: any, arg1: boolean, arg2: string) => any, value: Record<string, any> | null, path: string) => {
+  const validateValue = (
+    validation: (arg0: any, arg1: boolean, arg2: string) => any,
+    value: Record<string, any> | null,
+    path: string
+  ) => {
     try {
       const newValue = validation(value, allowParse, src);
       return newValue === undefined ? value : newValue;

src/main/Cutting.tsx

@@ -1,7 +1,22 @@
 import React, { useEffect } from "react";
 import CuttingActions from "./CuttingActions"
 import Timeline from './Timeline';
-import { fetchVideoInformation, selectCurrentlyAt, selectDuration, selectIsPlaying, selectIsMuted, selectVolume, selectIsPlayPreview, selectTitle, setClickTriggered, setCurrentlyAt, setIsPlaying, setIsMuted, setVolume, setIsPlayPreview } from '../redux/videoSlice';
+import {
+  fetchVideoInformation,
+  selectCurrentlyAt,
+  selectDuration,
+  selectIsPlaying,
+  selectIsMuted,
+  selectVolume,
+  selectIsPlayPreview,
+  selectTitle,
+  setClickTriggered,
+  setCurrentlyAt,
+  setIsPlaying,
+  setIsMuted,
+  setVolume,
+  setIsPlayPreview
+} from '../redux/videoSlice';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { AppDispatch } from '../redux/store';
@@ -21,25 +36,40 @@ const Cutting: React.FC = () => {
 
   // Init redux variables
   const dispatch = useDispatch<AppDispatch>()
-  const videoURLStatus = useSelector((state: { videoState: { status: httpRequestState["status"] } }) => state.videoState.status);
+  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)
+  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}))
+        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}))
+        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}))
+        dispatch(setError({
+          error: true,
+          errorMessage: t("video.durationError-text"),
+          errorDetails: error
+        }))
       }
     }
   }, [videoURLStatus, dispatch, error, t, errorReason, duration])

src/main/CuttingActions.tsx

@@ -46,10 +46,30 @@ const CuttingActions: React.FC = () => {
   }
 
   // Maps functions to hotkeys
-  useHotkeys(KEYMAP.cutting.cut.key, () => dispatchAction(cut), {preventDefault: true}, [cut]);
-  useHotkeys(KEYMAP.cutting.delete.key, () => dispatchAction(markAsDeletedOrAlive), {preventDefault: true}, [markAsDeletedOrAlive]);
-  useHotkeys(KEYMAP.cutting.mergeLeft.key, () => dispatchAction(mergeLeft), {preventDefault: true}, [mergeLeft]);
-  useHotkeys(KEYMAP.cutting.mergeRight.key, () => dispatchAction(mergeRight), {preventDefault: true}, [mergeRight]);
+  useHotkeys(
+    KEYMAP.cutting.cut.key,
+    () => dispatchAction(cut),
+    {preventDefault: true},
+    [cut]
+  );
+  useHotkeys(
+    KEYMAP.cutting.delete.key,
+    () => dispatchAction(markAsDeletedOrAlive),
+    {preventDefault: true},
+    [markAsDeletedOrAlive]
+  );
+  useHotkeys(
+    KEYMAP.cutting.mergeLeft.key,
+    () => dispatchAction(mergeLeft),
+    {preventDefault: true},
+    [mergeLeft]
+  );
+  useHotkeys(
+    KEYMAP.cutting.mergeRight.key,
+    () => dispatchAction(mergeRight),
+    {preventDefault: true},
+    [mergeRight]
+  );
 
   const cuttingStyle = css({
     display: 'flex',
@@ -66,7 +86,9 @@ const CuttingActions: React.FC = () => {
   return (
     <div css={cuttingStyle}>
       <CuttingActionsButton Icon={LuScissors}
-        actionName={t("cuttingActions.cut-button")} actionHandler={dispatchAction} action={cut}
+        actionName={t("cuttingActions.cut-button")}
+        actionHandler={dispatchAction}
+        action={cut}
         tooltip={t('cuttingActions.cut-tooltip', { hotkeyName: rewriteKeys(KEYMAP.cutting.cut.key) })}
         ariaLabelText={t('cuttingActions.cut-tooltip-aria', { hotkeyName: rewriteKeys(KEYMAP.cutting.cut.key) })}
       />
@@ -76,19 +98,29 @@ const CuttingActions: React.FC = () => {
       />
       <div css={verticalLineStyle} />
       <CuttingActionsButton Icon={LuChevronLeft}
-        actionName={t("cuttingActions.mergeLeft-button")} actionHandler={dispatchAction} action={mergeLeft}
+        actionName={t("cuttingActions.mergeLeft-button")}
+        actionHandler={dispatchAction}
+        action={mergeLeft}
         tooltip={t('cuttingActions.mergeLeft-tooltip', { hotkeyName: rewriteKeys(KEYMAP.cutting.mergeLeft.key) })}
-        ariaLabelText={t('cuttingActions.mergeLeft-tooltip-aria', { hotkeyName: rewriteKeys(KEYMAP.cutting.mergeLeft.key) })}
+        ariaLabelText={
+          t('cuttingActions.mergeLeft-tooltip-aria', { hotkeyName: rewriteKeys(KEYMAP.cutting.mergeLeft.key) })
+        }
       />
       <div css={verticalLineStyle} />
       <CuttingActionsButton Icon={LuChevronRight}
-        actionName={t("cuttingActions.mergeRight-button")} actionHandler={dispatchAction} action={mergeRight}
+        actionName={t("cuttingActions.mergeRight-button")}
+        actionHandler={dispatchAction}
+        action={mergeRight}
         tooltip={t('cuttingActions.mergeRight-tooltip', { hotkeyName: rewriteKeys(KEYMAP.cutting.mergeRight.key)})}
-        ariaLabelText={t('cuttingActions.mergeRight-tooltip-aria', { hotkeyName: rewriteKeys(KEYMAP.cutting.mergeRight.key) })}
+        ariaLabelText={
+          t('cuttingActions.mergeRight-tooltip-aria', { hotkeyName: rewriteKeys(KEYMAP.cutting.mergeRight.key) })
+        }
       />
       <div css={verticalLineStyle} />
       <CuttingActionsButton Icon={LuMoveHorizontal}
-        actionName={t("cuttingActions.merge-all-button")} actionHandler={dispatchAction} action={mergeAll}
+        actionName={t("cuttingActions.merge-all-button")}
+        actionHandler={dispatchAction}
+        action={mergeAll}
         tooltip={t('cuttingActions.merge-all-tooltip')}
         ariaLabelText={t('cuttingActions.merge-all-tooltip-aria')}
       />
@@ -126,7 +158,14 @@ interface cuttingActionsButtonInterface {
  * A button representing a single action a user can take while cutting
  * @param param0
  */
-const CuttingActionsButton: React.FC<cuttingActionsButtonInterface> = ({Icon, actionName, actionHandler, action, tooltip, ariaLabelText}) => {
+const CuttingActionsButton: React.FC<cuttingActionsButtonInterface> = ({
+  Icon,
+  actionName,
+  actionHandler,
+  action,
+  tooltip,
+  ariaLabelText
+}) => {
   const ref = React.useRef<HTMLDivElement>(null)
   const theme = useTheme();
 
@@ -156,7 +195,11 @@ interface markAsDeleteButtonInterface {
 /**
  * Button that changes its function based on context
  */
-const MarkAsDeletedButton : React.FC<markAsDeleteButtonInterface> = ({actionHandler, action, hotKeyName}) => {
+const MarkAsDeletedButton : React.FC<markAsDeleteButtonInterface> = ({
+  actionHandler,
+  action,
+  hotKeyName
+}) => {
   const { t } = useTranslation();
   const isCurrentSegmentAlive = useSelector(selectIsCurrentSegmentAlive)
   const ref = React.useRef<HTMLDivElement>(null)

src/main/Finish.tsx

@@ -58,7 +58,15 @@ const Finish : React.FC = () => {
 /**
  * Takes you to a different page
  */
-export const PageButton : React.FC<{pageNumber: number, label: string, Icon: IconType}> = ({pageNumber, label, Icon}) => {
+export const PageButton : React.FC<{
+  pageNumber: number,
+  label: string,
+  Icon: IconType
+}> = ({
+  pageNumber,
+  label,
+  Icon
+}) => {
 
   const theme = useTheme();
 
@@ -113,7 +121,12 @@ export const CallbackButton : React.FC = () => {
             openCallbackUrl()
           } }}>
           <LuDoorOpen />
-          <span>{settings.callbackSystem ? t("various.callback-button-system", {system: settings.callbackSystem}) : t("various.callback-button-generic")}</span>
+          <span>
+            {settings.callbackSystem ?
+              t("various.callback-button-system", {system: settings.callbackSystem}) :
+              t("various.callback-button-generic")
+            }
+          </span>
         </div>
       }
     </>

src/main/Lock.tsx

@@ -14,9 +14,12 @@ const Lock: React.FC = () => {
   const endpoint = `${settings.opencast.url}/editor/${settings.id}/lock`
 
   const dispatch = useDispatch();
-  const lockingActive = useSelector((state: { videoState: { lockingActive: video["lockingActive"] } }) => state.videoState.lockingActive);
-  const lockRefresh = useSelector((state: { videoState: { lockRefresh: video["lockRefresh"] } }) => state.videoState.lockRefresh);
-  const lockState = useSelector((state: { videoState: { lockState: video["lockState"] } }) => state.videoState.lockState);
+  const lockingActive = useSelector((state: { videoState: { lockingActive: video["lockingActive"] } }) =>
+    state.videoState.lockingActive);
+  const lockRefresh = useSelector((state: { videoState: { lockRefresh: video["lockRefresh"] } }) =>
+    state.videoState.lockRefresh);
+  const lockState = useSelector((state: { videoState: { lockState: video["lockState"] } }) =>
+    state.videoState.lockState);
   const lock = useSelector((state: { videoState: { lock: video["lock"] } }) => state.videoState.lock);
   const isEnd = useSelector(selectIsEnd)
 

src/main/Metadata.tsx

@@ -5,8 +5,17 @@ import { calendarStyle, errorBoxStyle, selectFieldStyle, titleStyle, titleStyleB
 
 import { useSelector, useDispatch } from 'react-redux';
 import {
-  fetchMetadata, postMetadata, selectCatalogs,
-  Catalog, MetadataField, setFieldValue, selectGetError, selectGetStatus, selectPostError, selectPostStatus, setFieldReadonly
+  fetchMetadata,
+  postMetadata,
+  selectCatalogs,
+  Catalog,
+  MetadataField,
+  setFieldValue,
+  selectGetError,
+  selectGetStatus,
+  selectPostError,
+  selectPostStatus,
+  setFieldReadonly
 } from '../redux/metadataSlice'
 
 import { Form, Field, FieldInputProps } from 'react-final-form'
@@ -391,7 +400,8 @@ const Metadata: React.FC = () => {
     }
 
     // For these fields, the value needs to be inside an array
-    if (field && (field.type === "date" || field.type === "time") && Object.prototype.toString.call(returnValue) === '[object Date]') {
+    if (field && (field.type === "date" || field.type === "time") &&
+    Object.prototype.toString.call(returnValue) === '[object Date]') {
       // If invalid date
       if ((isNaN(returnValue.getTime()))) {
         // Do nothing
@@ -614,7 +624,8 @@ const Metadata: React.FC = () => {
       <Field key={fieldIndex}
         name={"catalog" + catalogIndex + "." + field.id}
         validate={getValidators(field)}
-        type={field.type === "boolean" ? "checkbox" : undefined}  // react-final-form complains if we don't specify checkboxes here
+        // react-final-form complains if we don't specify checkboxes here
+        type={field.type === "boolean" ? "checkbox" : undefined}
       >
         {({ input, meta }) => (
           <div css={fieldStyle} data-testid={field.id}>
@@ -699,7 +710,9 @@ const Metadata: React.FC = () => {
             })}
 
             {/*
-                <div css={{display: "block", wordWrap: "normal", whiteSpace: "pre"}}>{t("metadata.submit-helpertext", { buttonName: t("metadata.submit-button") })}</div>
+                <div css={{display: "block", wordWrap: "normal", whiteSpace: "pre"}}>
+                  {t("metadata.submit-helpertext", { buttonName: t("metadata.submit-button") })}
+                </div>
 
 
               <div title="buttons" css={buttonContainerStyle}>

src/main/Save.tsx

@@ -8,7 +8,12 @@ import { LuLoader, LuCheckCircle, LuAlertCircle, LuChevronLeft, LuSave, LuCheck}
 
 import { useDispatch, useSelector } from 'react-redux';
 import { selectFinishState } from '../redux/finishSlice'
-import { selectHasChanges, selectSegments, selectTracks, setHasChanges as videoSetHasChanges } from '../redux/videoSlice'
+import {
+  selectHasChanges,
+  selectSegments,
+  selectTracks,
+  setHasChanges as videoSetHasChanges
+} from '../redux/videoSlice'
 import { postVideoInformation, selectStatus, selectError } from '../redux/workflowPostSlice'
 
 import { CallbackButton, PageButton } from './Finish'
@@ -87,7 +92,9 @@ const Save : React.FC = () => {
       </div>
       <div css={errorBoxStyle(postMetadataStatus === "failed", theme)} role="alert">
         <span>{t("various.error-text")}</span><br />
-        {postMetadataError ? t("various.error-details-text", {errorMessage: postMetadataError}) : t("various.error-text")}<br />
+        {postMetadataError ?
+          t("various.error-details-text", {errorMessage: postMetadataError}) : t("various.error-text")
+        }<br />
       </div>
     </div>
   );

src/main/SubtitleEditor.tsx

@@ -39,9 +39,13 @@ const SubtitleEditor : React.FC = () => {
   // Prepare subtitle in redux
   useEffect(() => {
     // Parse subtitle data from Opencast
-    if (subtitle?.cues === undefined && captionTrack !== undefined && captionTrack.subtitle !== undefined && selectedId) {
+    if (subtitle?.cues === undefined && captionTrack !== undefined && captionTrack.subtitle !== undefined
+      && selectedId) {
       try {
-        dispatch(setSubtitle({identifier: selectedId, subtitles: { cues: parseSubtitle(captionTrack.subtitle), tags: captionTrack.tags } }))
+        dispatch(setSubtitle({
+          identifier: selectedId,
+          subtitles: { cues: parseSubtitle(captionTrack.subtitle), tags: captionTrack.tags }
+        }))
       } catch (error) {
         if (error instanceof Error) {
           setGetError(error.message)

src/main/SubtitleListEditor.tsx

@@ -353,7 +353,9 @@ const SubtitleListSegment = React.memo((props: subtitleListSegmentProps) => {
     ...(flexGapReplacementStyle(10, false)),
     flexGrow: '0.5',
     minWidth: '20px',
-    height: '132px',    // Hackily moves buttons beyond the segment border. Specific value causes buttons from neighboring segments to overlay
+    // Hackily moves buttons beyond the segment border.
+    // Specific value causes buttons from neighboring segments to overlay.
+    height: '132px',
     visibility: 'hidden',
   })
 
@@ -382,8 +384,10 @@ const SubtitleListSegment = React.memo((props: subtitleListSegmentProps) => {
     <div ref={hotkeyRef} tabIndex={-1} css={[segmentStyle, {
       ...props.style,
       // Used for padding in the VariableSizeList
-      top: props.style.top !== undefined ? `${parseFloat(props.style.top.toString()) + PADDING_SIZE}px` : '0px',
-      height: props.style.height !== undefined ? `${parseFloat(props.style.height.toString()) - PADDING_SIZE}px` : '0px',
+      top: props.style.top !== undefined ?
+        `${parseFloat(props.style.top.toString()) + PADDING_SIZE}px` : '0px',
+      height: props.style.height !== undefined ?
+        `${parseFloat(props.style.height.toString()) - PADDING_SIZE}px` : '0px',
       zIndex: '1000',
     }]}>
 

src/main/SubtitleSelect.tsx

@@ -1,6 +1,12 @@
 import React, { useEffect } from "react";
 import { css } from "@emotion/react";
-import { basicButtonStyle, flexGapReplacementStyle, tileButtonStyle, disableButtonAnimation, subtitleSelectStyle } from "../cssStyles";
+import {
+  basicButtonStyle,
+  flexGapReplacementStyle,
+  tileButtonStyle,
+  disableButtonAnimation,
+  subtitleSelectStyle
+} from "../cssStyles";
 import { settings, subtitleTags } from '../config'
 import { selectSubtitles, setSelectedSubtitleId, setSubtitle } from "../redux/subtitleSlice";
 import { useDispatch, useSelector } from "react-redux";
@@ -259,7 +265,8 @@ const SubtitleAddButton: React.FC<{
     <ThemedTooltip title={isPlusDisplay ? t("subtitles.createSubtitleButton-tooltip") : ""}>
       <div css={[basicButtonStyle(theme), tileButtonStyle(theme), !isPlusDisplay && disableButtonAnimation]}
         role="button" tabIndex={0}
-        aria-label={isPlusDisplay ? t("subtitles.createSubtitleButton-tooltip") : t("subtitles.createSubtitleButton-clicked-tooltip-aria")}
+        aria-label={isPlusDisplay ?
+          t("subtitles.createSubtitleButton-tooltip") : t("subtitles.createSubtitleButton-clicked-tooltip-aria")}
         onClick={() => setIsPlusDisplay(false)}
         onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => { if (event.key === " " || event.key === "Enter") {
           setIsPlusDisplay(false)