Merge pull request #1257 from Arnei/eslint-comma-dangle

Enforce eslint comma-dangle

.eslintrc.js

@@ -7,9 +7,6 @@ module.exports = {
     // "always" gives 319 warning, "never" gives 991.
     "object-curly-spacing": "off",
 
-    // Many multiline lists do not have a trailing comma right now
-    "comma-dangle": ["warn", "only-multiline"],
-
     // Currently 120 warnings.
     "@typescript-eslint/no-explicit-any": "off",
 

src/config.ts

@@ -104,7 +104,7 @@ const defaultSettings: iSettings = {
     languages: {},
     icons: undefined,
     defaultVideoFlavor: undefined,
-  }
+  },
 };
 let configFileSettings: iSettings;
 let urlParameterSettings: iSettings;
@@ -358,7 +358,7 @@ const types = {
         }
       }
     }
-  }
+  },
 };
 
 // Defines all potential settings and their types.
@@ -398,7 +398,7 @@ const SCHEMA = {
   thumbnail: {
     show: types.boolean,
     simpleMode: types.boolean,
-  }
+  },
 };
 
 const merge = (a: iSettings, b: iSettings) => {

src/cssStyles.tsx

@@ -70,7 +70,7 @@ export const flexGapReplacementStyle = (flexGapValue: number, flexDirectionIsRow
             marginRight: "0px",
           },
         },
-      }
+      },
     }
   );
 };
@@ -221,7 +221,7 @@ export function selectFieldStyle(theme: Theme) {
       ...(state.isFocused && { boxShadow: `0 0 0 1px ${theme.metadata_highlight}` }),
       "&:hover": {
         borderColor: theme.menu_background,
-        boxShadow: `0 0 0 1px ${theme.metadata_highlight}`
+        boxShadow: `0 0 0 1px ${theme.metadata_highlight}`,
       },
     }),
     menu: (provided: any) => ({
@@ -297,15 +297,15 @@ export const calendarStyle = (theme: Theme) => createTheme({
             ".Mui-selected": {
               background: `${theme.selected}`,
               color: `${theme.selected_text}`,
-            }
+            },
           },
 
           /* Clock-modal */
           "& .MuiClock-clock": { // round clock
             background: `${theme.clock_bg}`,
             outline: `${theme.clock_border}`,
             "-webkitTextFillColor": `${theme.text}`, // Digits on the clock
-            textShadow: `${theme.text_shadow}`
+            textShadow: `${theme.text_shadow}`,
           },
           /* selected digit (hour/minute) */
           "& .MuiClockPicker-root .Mui-selected": {
@@ -315,15 +315,15 @@ export const calendarStyle = (theme: Theme) => createTheme({
           },
           /* clock hands */
           "& .MuiClock-pin, .MuiClockPointer-root": {
-            background: `${theme.clock_hands}`
+            background: `${theme.clock_hands}`,
           },
           "& .MuiClockPointer-thumb": {
             background: `${theme.clock_hands}`,
             border: `16px solid ${theme.clock_hands}`,
-          }
+          },
         },
 
-      }
+      },
     },
     MuiButtonBase: {
       styleOverrides: {
@@ -354,20 +354,20 @@ export const calendarStyle = (theme: Theme) => createTheme({
           "&.MuiClock-amButton, &.MuiClock-pmButton": {
             "-webkitTextFillColor": `${theme.text} !important`,
             "&:hover": {
-              "-webkitTextFillColor": `${theme.clock_focus} !important`
-            }
+              "-webkitTextFillColor": `${theme.clock_focus} !important`,
+            },
           },
-        }
-      }
+        },
+      },
     },
     MuiTypography: {
       styleOverrides: {
         root: { // Weekdays
           color: `${theme.disabled} !important`,
         },
-      }
+      },
     },
-  }
+  },
 });
 
 export const subtitleSelectStyle = (theme: Theme) => createTheme({
@@ -378,15 +378,15 @@ export const subtitleSelectStyle = (theme: Theme) => createTheme({
         root: {
           color: `${theme.text} !important`,
         },
-      }
+      },
     },
     /* Labelborder */
     MuiOutlinedInput: {
       styleOverrides: {
         notchedOutline: {
           border: `${theme.dropdown_border} !important`,
         },
-      }
+      },
     },
     /* Selectfield/Inputfield with Icon */
     MuiSelect: {
@@ -398,7 +398,7 @@ export const subtitleSelectStyle = (theme: Theme) => createTheme({
         icon: {
           color: `${theme.indicator_color}`,
         },
-      }
+      },
     },
 
     /* Dropdownlist */
@@ -409,24 +409,24 @@ export const subtitleSelectStyle = (theme: Theme) => createTheme({
           color: `${theme.text}`,
           border: `${theme.dropdown_border}`,
         },
-      }
+      },
     },
     /* Dropdownlist: Single entry */
     MuiMenuItem: {
       styleOverrides: {
         root: {
           "&:hover, &.Mui-selected:hover": {
             color: `${theme.focus_text}`,
-            background: `${theme.focused}`
+            background: `${theme.focused}`,
           },
           "&.Mui-selected": {
             color: `${theme.selected_text}`,
             background: `${theme.selected}`,
           },
         },
-      }
-    }
-  }
+      },
+    },
+  },
 });
 
 export const spinningStyle = css({
@@ -438,7 +438,7 @@ export const spinningStyle = css({
 
 export const customIconStyle = css(({
   maxWidth: "16px",
-  height: "auto"
+  height: "auto",
 }));
 
 export const videosStyle = (theme: Theme) => css(({

src/globalKeys.ts

@@ -60,7 +60,7 @@ export const KEYMAP: IKeyMap = {
     preview: {
       name: "video.previewButton",
       key: "Shift+Alt+p",
-    }
+    },
   },
   cutting: {
     cut: {
@@ -118,6 +118,6 @@ export const KEYMAP: IKeyMap = {
     delete: {
       name: "subtitleList.deleteSegment",
       key: "Shift+Alt+d",
-    }
-  }
+    },
+  },
 };

src/main/Cutting.tsx

@@ -15,7 +15,7 @@ import {
   setIsPlaying,
   setIsMuted,
   setVolume,
-  setIsPlayPreview
+  setIsPlayPreview,
 } from "../redux/videoSlice";
 import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "../redux/store";
@@ -54,21 +54,21 @@ const Cutting: React.FC = () => {
           error: true,
           errorTitle: t("error.workflowActive-errorTitle"),
           errorMessage: t("error.workflowActive-errorMessage"),
-          errorIcon: LuMoreHorizontal
+          errorIcon: LuMoreHorizontal,
         }));
       } else {
         dispatch(setError({
           error: true,
           errorMessage: t("video.comError-text"),
-          errorDetails: error
+          errorDetails: error,
         }));
       }
     } else if (videoURLStatus === "success") {
       if (duration === null) {
         dispatch(setError({
           error: true,
           errorMessage: t("video.durationError-text"),
-          errorDetails: error
+          errorDetails: error,
         }));
       }
     }

src/main/CuttingActions.tsx

@@ -10,7 +10,7 @@ import { css } from "@emotion/react";
 
 import { useAppDispatch, useAppSelector } from "../redux/store";
 import {
-  cut, markAsDeletedOrAlive, selectIsCurrentSegmentAlive, mergeLeft, mergeRight, mergeAll
+  cut, markAsDeletedOrAlive, selectIsCurrentSegmentAlive, mergeLeft, mergeRight, mergeAll,
 } from "../redux/videoSlice";
 import { KEYMAP, rewriteKeys } from "../globalKeys";
 import { ActionCreatorWithoutPayload } from "@reduxjs/toolkit";
@@ -164,7 +164,7 @@ const CuttingActionsButton: React.FC<cuttingActionsButtonInterface> = ({
   actionHandler,
   action,
   tooltip,
-  ariaLabelText
+  ariaLabelText,
 }) => {
   const ref = React.useRef<HTMLDivElement>(null);
   const theme = useTheme();
@@ -200,7 +200,7 @@ interface markAsDeleteButtonInterface {
 const MarkAsDeletedButton: React.FC<markAsDeleteButtonInterface> = ({
   actionHandler,
   action,
-  hotKeyName
+  hotKeyName,
 }) => {
   const { t } = useTranslation();
   const isCurrentSegmentAlive = useAppSelector(selectIsCurrentSegmentAlive);

src/main/Finish.tsx

@@ -65,7 +65,7 @@ export const PageButton: React.FC<{
 }> = ({
   pageNumber,
   label,
-  Icon
+  Icon,
 }) => {
 
   const theme = useTheme();

src/main/Header.tsx

@@ -34,7 +34,7 @@ function Header() {
   const headerStyleThemed = scheme.includes("high-contrast-")
     ? css({
       height: "62px",
-      borderBottom: "2px solid white"
+      borderBottom: "2px solid white",
     })
     : css({
       height: "64px",
@@ -65,7 +65,7 @@ function Header() {
     ":hover, :active": {
       outline: `2px solid ${theme.metadata_highlight}`,
       backgroundColor: theme.header_button_hover_bg,
-      color: `${theme.header_text}`
+      color: `${theme.header_text}`,
     },
   });
 
@@ -137,7 +137,7 @@ const LanguageButton: React.FC = () => {
 
   const languageNames = (language: string) => {
     return new Intl.DisplayNames([language], {
-      type: "language"
+      type: "language",
     }).of(language);
   };
 
@@ -227,16 +227,16 @@ const HeaderButton = React.forwardRef<HTMLButtonElement, HeaderButtonProps>(
       ":hover, :active": {
         outline: `2px solid ${theme.metadata_highlight}`,
         backgroundColor: theme.header_button_hover_bg,
-        color: `${theme.header_text}`
+        color: `${theme.header_text}`,
       },
       ":focus": {
         backgroundColor: "inherit",
-        color: `${theme.header_text}`
+        color: `${theme.header_text}`,
       },
       ":focus:hover": {
         backgroundColor: theme.header_button_hover_bg,
-        color: `${theme.header_text}`
-      }
+        color: `${theme.header_text}`,
+      },
     });
 
     const iconStyle = css({

src/main/KeyboardControls.tsx

@@ -52,7 +52,7 @@ const Entry: React.FC<{ name: string, sequences: string[][]; }> = ({ name, seque
     justifyContent: "left",
     width: "100%",
     padding: "10px 0px",
-    ...(flexGapReplacementStyle(10, true))
+    ...(flexGapReplacementStyle(10, true)),
   });
 
   const labelStyle = css({
@@ -66,7 +66,7 @@ const Entry: React.FC<{ name: string, sequences: string[][]; }> = ({ name, seque
   const sequenceStyle = css({
     display: "flex",
     flexDirection: "row",
-    ...(flexGapReplacementStyle(10, true))
+    ...(flexGapReplacementStyle(10, true)),
   });
 
   const singleKeyStyle = css({

src/main/Landing.tsx

@@ -29,7 +29,7 @@ const Landing: React.FC = () => {
     code: {
       userSelect: "all",
       color: "#e83e8c",
-    }
+    },
   });
 
   return (

src/main/Lock.tsx

@@ -27,8 +27,8 @@ const Lock: React.FC = () => {
     const form = `user=${lock.user}&uuid=${lock.uuid}`;
     client.post(endpoint, form, {
       headers: {
-        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
-      }
+        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+      },
     })
       .then(() => dispatch(setLock(true)))
       .catch((error: string) => {
@@ -38,7 +38,7 @@ const Lock: React.FC = () => {
           errorDetails: error,
           errorIcon: LuLock,
           errorTitle: "Video editing locked",
-          errorMessage: "This video is currently being edited by another user"
+          errorMessage: "This video is currently being edited by another user",
         }));
       });
   }

src/main/MainMenu.tsx

@@ -160,7 +160,7 @@ export const MainMenuButton: React.FC<mainMenuButtonInterface> = ({
       <Icon css={iconCustomCSS ? iconCustomCSS : {
         fontSize: 36,
         width: "36px",
-        height: "auto"
+        height: "auto",
       }} />
       {bottomText && <div>{bottomText}</div>}
     </li>