Merge pull request #1255 from Arnei/eslint-semicolon

Enforce eslint semicolons

.eslintrc.js

@@ -4,10 +4,6 @@ module.exports = {
     "react-app/jest"
   ],
   rules: {
-    // Semicolon usage is inconsistent right now. Both, "always" and "never",
-    // result in a significant number of warnings.
-    "semi": "off",
-
     // Both kinds of quotes are used a lot
     "quotes": "off",
 

src/config.ts

@@ -51,7 +51,7 @@ interface iSettings {
   },
   metadata: {
     show: boolean,
-    configureFields: { [key: string]: { [key: string]: configureFieldsAttributes } } | undefined,
+    configureFields: { [key: string]: { [key: string]: configureFieldsAttributes; }; } | undefined,
   },
   trackSelection: {
     show: boolean,
@@ -63,10 +63,10 @@ interface iSettings {
   subtitles: {
     show: boolean,
     mainFlavor: string,
-    languages: { [key: string]: subtitleTags } | undefined,
-    icons: { [key: string]: string } | undefined,
+    languages: { [key: string]: subtitleTags; } | undefined,
+    icons: { [key: string]: string; } | undefined,
     defaultVideoFlavor: Flavor | undefined,
-  }
+  };
 }
 
 /**
@@ -105,10 +105,10 @@ const defaultSettings: iSettings = {
     icons: undefined,
     defaultVideoFlavor: undefined,
   }
-}
-let configFileSettings: iSettings
-let urlParameterSettings: iSettings
-export let settings: iSettings
+};
+let configFileSettings: iSettings;
+let urlParameterSettings: iSettings;
+export let settings: iSettings;
 
 /**
  * Entry point. Loads values from settings into the exported variables
@@ -130,8 +130,8 @@ export const init = async () => {
 
   // Get settings from config file
   await loadContextSettings().then(result => {
-    configFileSettings = validate(result, false, SRC_SERVER, "from server settings file")
-  })
+    configFileSettings = validate(result, false, SRC_SERVER, "from server settings file");
+  });
 
   // Get settings from URL query.
   const urlParams = new URLSearchParams(window.location.search);
@@ -140,7 +140,7 @@ export const init = async () => {
   urlParams.forEach((value, key) => {
     // Create empty objects for full path (if the key contains '.') and set
     // the value at the end.
-    let obj : {[k: string]: any} = rawUrlSettings;
+    let obj: { [k: string]: any; } = rawUrlSettings;
     if (key.startsWith('opencast.') || key === 'allowedCallbackPrefixes') {
       return;
     }
@@ -256,7 +256,7 @@ const validate = (obj: Record<string, any> | null, allowParse: boolean, src: str
     } catch (e) {
       console.warn(
         `Validation of setting '${path}' (${sourceDescription}) with value '${value}' failed: `
-          + `${e}. Ignoring.`
+        + `${e}. Ignoring.`
       );
       return null;
     }
@@ -267,7 +267,7 @@ const validate = (obj: Record<string, any> | null, allowParse: boolean, src: str
   const validateObj = (schema: any, obj: Record<string, any> | null, path: string) => {
     // We iterate through all keys of the given settings object, checking if
     // each key is valid and recursively validating the value of that key.
-    const out : {[k: string]: any} = {};
+    const out: { [k: string]: any; } = {};
     for (const key in obj) {
       const newPath = path ? `${path}.${key}` : key;
       if (key in schema) {
@@ -289,7 +289,7 @@ const validate = (obj: Record<string, any> | null, allowParse: boolean, src: str
   };
 
   return validate(SCHEMA, obj, "");
-}
+};
 
 
 // Validation functions for different types.
@@ -399,10 +399,10 @@ const SCHEMA = {
     show: types.boolean,
     simpleMode: types.boolean,
   }
-}
+};
 
 const merge = (a: iSettings, b: iSettings) => {
   return deepmerge(a, b, { arrayMerge });
 };
-merge.all = (array: object[]) => deepmerge.all(array, { arrayMerge })
+merge.all = (array: object[]) => deepmerge.all(array, { arrayMerge });
 const arrayMerge = (_destinationArray: any, sourceArray: any, _options: any) => sourceArray;

src/cssStyles.tsx

@@ -1,7 +1,7 @@
 /**
  * This file contains general css stylings
  */
-import { css, Global, keyframes } from '@emotion/react'
+import { css, Global, keyframes } from '@emotion/react';
 import React from "react";
 import emotionNormalize from 'emotion-normalize';
 import { checkFlexGapSupport } from './util/utilityFunctions';
@@ -17,7 +17,7 @@ export const GlobalStyle: React.FC = () => {
   return (
     <Global styles={globalStyle(theme)} />
   );
-}
+};
 
 /**
  * CSS for the global style component
@@ -46,13 +46,13 @@ export const BREAKPOINT_MEDIUM = 650;
  */
 export const flexGapReplacementStyle = (flexGapValue: number, flexDirectionIsRow: boolean) => {
 
-  const half = flexGapValue / 2
-  const quarter = flexGapValue / 4
+  const half = flexGapValue / 2;
+  const quarter = flexGapValue / 4;
 
   return (
     {
-    // Use gap if supported
-      ...(checkFlexGapSupport()) && {gap: `${flexGapValue}px`},
+      // Use gap if supported
+      ...(checkFlexGapSupport()) && { gap: `${flexGapValue}px` },
       // Else use margins
       ...(!checkFlexGapSupport()) &&
       {
@@ -73,7 +73,7 @@ export const flexGapReplacementStyle = (flexGapValue: number, flexDirectionIsRow
       }
     }
   );
-}
+};
 
 /**
  * CSS for buttons
@@ -122,7 +122,7 @@ export const navigationButtonStyle = (theme: Theme) => css({
   justifyContent: 'space-around',
   boxShadow: `${theme.boxShadow}`,
   background: `${theme.element_bg}`,
-})
+});
 
 /**
  * CSS for a container that holds back/forward buttons
@@ -131,7 +131,7 @@ export const backOrContinueStyle = css(({
   display: 'flex',
   flexDirection: 'row',
   ...(flexGapReplacementStyle(20, false)),
-}))
+}));
 
 /**
  * CSS for big buttons in a dynamic grid
@@ -161,7 +161,7 @@ export const disableButtonAnimation = css({
   "&:active": {
     transform: 'none',
   },
-})
+});
 
 /**
  * CSS for a title
@@ -173,7 +173,7 @@ export const titleStyle = (theme: Theme) => css(({
   textOverflow: 'ellipsis',
   maxWidth: '100%',
   color: `${theme.text}`,
-}))
+}));
 
 /**
  * Addendum for the titleStyle
@@ -184,7 +184,7 @@ export const titleStyleBold = (theme: Theme) => css({
   fontSize: '24px',
   verticalAlign: '-2.5px',
   color: `${theme.text}`,
-})
+});
 
 /**
  * CSS for ariaLive regions that should not be visible
@@ -195,30 +195,30 @@ export const ariaLive = css({
   height: '1px',
   width: '1px',
   overflow: 'hidden',
-})
+});
 
 /**
  * CSS for displaying of errors
  */
 export const errorBoxStyle = (errorStatus: boolean, theme: Theme) => {
   return (
     css({
-      ...(!errorStatus) && {display: "none"},
+      ...(!errorStatus) && { display: "none" },
       borderColor: `${theme.error}`,
       borderStyle: 'dashed',
       fontWeight: 'bold',
       padding: '10px',
     })
   );
-}
+};
 
 export function selectFieldStyle(theme: Theme) {
   return {
     control: (provided: any, state: any) => ({
       ...provided,
       background: theme.menu_background,
-      ...(state.isFocused && {borderColor: theme.metadata_highlight}),
-      ...(state.isFocused && {boxShadow: `0 0 0 1px ${theme.metadata_highlight}`}),
+      ...(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}`
@@ -249,7 +249,7 @@ export function selectFieldStyle(theme: Theme) {
       ...provided,
       background: state.isFocused ? theme.focused : theme.menu_background
         && state.isSelected ? theme.selected : theme.menu_background,
-      ...(state.isFocused && {color: theme.focus_text}),
+      ...(state.isFocused && { color: theme.focus_text }),
       color: state.isFocused ? theme.focus_text : theme.text
         && state.isSelected ? theme.selected_text : theme.text,
     }),
@@ -273,7 +273,7 @@ export function selectFieldStyle(theme: Theme) {
       ...provided,
       color: theme.text,
     }),
-  }
+  };
 }
 
 export const calendarStyle = (theme: Theme) => createTheme({
@@ -368,7 +368,7 @@ export const calendarStyle = (theme: Theme) => createTheme({
       }
     },
   }
-})
+});
 
 export const subtitleSelectStyle = (theme: Theme) => createTheme({
   components: {
@@ -427,19 +427,19 @@ 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 = css(({
   maxWidth: '16px',
   height: 'auto'
-}))
+}));
 
 export const videosStyle = (theme: Theme) => css(({
   display: 'flex',
@@ -453,7 +453,7 @@ export const videosStyle = (theme: Theme) => css(({
   boxSizing: "border-box",
   padding: '10px',
   ...(flexGapReplacementStyle(10, false)),
-}))
+}));
 
 export const backgroundBoxStyle = (theme: Theme) => css(({
   background: `${theme.menu_background}`,
@@ -462,4 +462,4 @@ export const backgroundBoxStyle = (theme: Theme) => css(({
   boxSizing: "border-box",
   padding: '20px',
   ...(flexGapReplacementStyle(25, false)),
-}))
+}));

src/globalKeys.ts

@@ -12,43 +12,43 @@ import { ParseKeys } from 'i18next';
 import { isMacOs } from 'react-device-detect';
 
 // Groups for displaying hotkeys in the overview page
-const groupVideoPlayer = "keyboardControls.groupVideoPlayer"
-const groupCuttingView = 'keyboardControls.groupCuttingView'
-const groupCuttingViewScrubber = 'keyboardControls.groupCuttingViewScrubber'
-const groupSubtitleList = "keyboardControls.groupSubtitleList"
+const groupVideoPlayer = "keyboardControls.groupVideoPlayer";
+const groupCuttingView = 'keyboardControls.groupCuttingView';
+const groupCuttingViewScrubber = 'keyboardControls.groupCuttingViewScrubber';
+const groupSubtitleList = "keyboardControls.groupSubtitleList";
 
 /**
  * Helper function that rewrites keys based on the OS
  */
 export const rewriteKeys = (key: string) => {
-  let newKey = key
+  let newKey = key;
   if (isMacOs) {
-    newKey = newKey.replace("Alt", "Option")
+    newKey = newKey.replace("Alt", "Option");
   }
 
-  return newKey
-}
+  return newKey;
+};
 
-export const getGroupName = (groupName: string) : ParseKeys => {
+export const getGroupName = (groupName: string): ParseKeys => {
   return match(groupName, {
     videoPlayer: () => groupVideoPlayer,
     cutting: () => groupCuttingView,
     timeline: () => groupCuttingViewScrubber,
     subtitleList: () => groupSubtitleList,
-  })
-}
+  });
+};
 
 export interface IKeyMap {
-  [property: string]: IKeyGroup
+  [property: string]: IKeyGroup;
 }
 
 export interface IKeyGroup {
-  [property: string]: IKey
+  [property: string]: IKey;
 }
 
 export interface IKey {
-  name: string
-  key: string
+  name: string;
+  key: string;
 }
 
 export const KEYMAP: IKeyMap = {
@@ -120,4 +120,4 @@ export const KEYMAP: IKeyMap = {
       key: "Shift+Alt+d",
     }
   }
-}
+};

src/i18n/config.tsx

@@ -10,7 +10,7 @@ const resources: InitOptions["resources"] = {};
 for (const lang of locales) {
   const code = lang.replace(/\..*$/, '');
   const short = code.replace(/-.*$/, '');
-  const main = locales.filter(l => l.indexOf(short) === 0).length === 1
+  const main = locales.filter(l => l.indexOf(short) === 0).length === 1;
   /* eslint-disable-next-line @typescript-eslint/no-var-requires */
   const translations = require('./locales/' + lang);
   if (!main) {