diff --git a/.eslintrc.js b/.eslintrc.js
index 86a8a2665..14c2ace99 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -4,9 +4,6 @@ module.exports = {
     "react-app/jest"
   ],
   rules: {
-    // Both kinds of quotes are used a lot
-    "quotes": "off",
-
     // "always" gives 319 warning, "never" gives 991.
     "object-curly-spacing": "off",
 
diff --git a/src/App.tsx b/src/App.tsx
index 7de229ba8..9f2603851 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,6 @@
-import Body from './main/Body';
-import Header from './main/Header';
-import { GlobalStyle } from './cssStyles';
+import Body from "./main/Body";
+import Header from "./main/Header";
+import { GlobalStyle } from "./cssStyles";
 
 function App() {
   return (
diff --git a/src/config.ts b/src/config.ts
index 966744ea5..09bd51e86 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -7,18 +7,18 @@
  *
  * Also does some global hotkey configuration
  */
-import parseToml from '@iarna/toml/parse-string';
-import deepmerge from 'deepmerge';
-import { Flavor } from './types';
+import parseToml from "@iarna/toml/parse-string";
+import deepmerge from "deepmerge";
+import { Flavor } from "./types";
 
 /**
  * Local constants
  */
-const CONTEXT_SETTINGS_FILE = 'editor-settings.toml';
+const CONTEXT_SETTINGS_FILE = "editor-settings.toml";
 
 // Sources that values can come from.
-const SRC_SERVER = 'src-server';
-const SRC_URL = 'src-url';
+const SRC_SERVER = "src-server";
+const SRC_URL = "src-url";
 
 /**
  * Possible configuration values for a metadata catalog field
@@ -30,8 +30,8 @@ export interface configureFieldsAttributes {
 
 export interface subtitleTags {
   lang: string,
-  'auto-generated': string,
-  'auto-generator': string,
+  "auto-generated": string,
+  "auto-generator": string,
   type: string,
 }
 
@@ -138,19 +138,19 @@ export const init = async () => {
 
   const rawUrlSettings = {};
   urlParams.forEach((value, key) => {
-    // Create empty objects for full path (if the key contains '.') and set
+    // Create empty objects for full path (if the key contains ".") and set
     // the value at the end.
     let obj: { [k: string]: any; } = rawUrlSettings;
-    if (key.startsWith('opencast.') || key === 'allowedCallbackPrefixes') {
+    if (key.startsWith("opencast.") || key === "allowedCallbackPrefixes") {
       return;
     }
 
     // Fallback for old parameter
-    if (key === 'mediaPackageId') {
-      key = 'id';
+    if (key === "mediaPackageId") {
+      key = "id";
     }
 
-    const segments = key.split('.');
+    const segments = key.split(".");
     segments.slice(0, -1).forEach(segment => {
       if (!(segment in obj)) {
         obj[segment] = {};
@@ -160,7 +160,7 @@ export const init = async () => {
     obj[segments[segments.length - 1]] = value;
   });
 
-  urlParameterSettings = validate(rawUrlSettings, true, SRC_URL, 'given as URL GET parameter');
+  urlParameterSettings = validate(rawUrlSettings, true, SRC_URL, "given as URL GET parameter");
 
   // Combine results
   settings = merge.all([defaultSettings, configFileSettings, urlParameterSettings]) as iSettings;
@@ -180,47 +180,47 @@ export const init = async () => {
 const loadContextSettings = async () => {
 
   // Try to retrieve the context settings.
-  let basepath = process.env.PUBLIC_URL || '/';
-  if (!basepath.endsWith('/')) {
-    basepath += '/';
+  let basepath = process.env.PUBLIC_URL || "/";
+  if (!basepath.endsWith("/")) {
+    basepath += "/";
   }
 
   // Construct path to settings file. If the `REACT_APP_SETTINGS_PATH` is
-  // given and starts with '/', it is interpreted as absolute path from the
+  // given and starts with "/", it is interpreted as absolute path from the
   // server root.
   const settingsPath = process.env.REACT_APP_SETTINGS_PATH || CONTEXT_SETTINGS_FILE;
-  const base = settingsPath.startsWith('/') ? '' : basepath;
+  const base = settingsPath.startsWith("/") ? "" : basepath;
   const url = `${window.location.origin}${base}${settingsPath}`;
   let response;
   try {
     response = await fetch(url);
   } catch (e) {
-    console.warn(`Could not access '${settingsPath}' due to network error!`, e || "");
+    console.warn(`Could not access "${settingsPath}" due to network error!`, e || "");
     return null;
   }
 
   if (response.status === 404) {
     // If the settings file was not found, we silently ignore the error. We
     // expect many installation to provide this file.
-    console.debug(`'${settingsPath}' returned 404: ignoring`);
+    console.debug(`"${settingsPath}" returned 404: ignoring`);
     return null;
   } else if (!response.ok) {
     console.error(
-      `Fetching '${settingsPath}' failed: ${response.status} ${response.statusText}`
+      `Fetching "${settingsPath}" failed: ${response.status} ${response.statusText}`
     );
     return null;
   }
 
-  if (response.headers.get('Content-Type')?.startsWith('text/html')) {
-    console.warn(`'${settingsPath}' request has 'Content-Type: text/html' -> ignoring...`);
+  if (response.headers.get("Content-Type")?.startsWith("text/html")) {
+    console.warn(`"${settingsPath}" request has "Content-Type: text/html" -> ignoring...`);
     return null;
   }
 
   try {
     return parseToml(await response.text());
   } catch (e) {
-    console.error(`Could not parse '${settingsPath}' as TOML: `, e);
-    throw new SyntaxError(`Could not parse '${settingsPath}' as TOML: ${e}`);
+    console.error(`Could not parse "${settingsPath}" as TOML: `, e);
+    throw new SyntaxError(`Could not parse "${settingsPath}" as TOML: ${e}`);
   }
 
 };
@@ -236,7 +236,7 @@ const validate = (obj: Record<string, any> | null, allowParse: boolean, src: str
   // Validates `obj` with `schema`. `path` is the current path used for error
   // messages.
   const validate = (schema: any, obj: Record<string, any> | null, path: string) => {
-    if (typeof schema === 'function') {
+    if (typeof schema === "function") {
       return validateValue(schema, obj, path);
     } else {
       return validateObj(schema, obj, path);
@@ -255,7 +255,7 @@ const validate = (obj: Record<string, any> | null, allowParse: boolean, src: str
       return newValue === undefined ? value : newValue;
     } catch (e) {
       console.warn(
-        `Validation of setting '${path}' (${sourceDescription}) with value '${value}' failed: `
+        `Validation of setting "${path}" (${sourceDescription}) with value "${value}" failed: `
         + `${e}. Ignoring.`
       );
       return null;
@@ -280,7 +280,7 @@ const validate = (obj: Record<string, any> | null, allowParse: boolean, src: str
         }
       } else {
         console.warn(
-          `'${newPath}' (${sourceDescription}) is not a valid settings key. Ignoring.`
+          `"${newPath}" (${sourceDescription}) is not a valid settings key. Ignoring.`
         );
       }
     }
@@ -294,65 +294,65 @@ const validate = (obj: Record<string, any> | null, allowParse: boolean, src: str
 
 // Validation functions for different types.
 const types = {
-  'string': (v: any, _allowParse: any) => {
-    if (typeof v !== 'string') {
+  "string": (v: any, _allowParse: any) => {
+    if (typeof v !== "string") {
       throw new Error("is not a string, but should be");
     }
   },
-  'boolean': (v: string, allowParse: any) => {
-    if (typeof v === 'boolean') {
+  "boolean": (v: string, allowParse: any) => {
+    if (typeof v === "boolean") {
       return;
     }
 
     if (allowParse) {
-      if (v === 'true') {
+      if (v === "true") {
         return true;
       }
-      if (v === 'false') {
+      if (v === "false") {
         return false;
       }
-      throw new Error("can't be parsed as boolean");
+      throw new Error("cant be parsed as boolean");
     } else {
       throw new Error("is not a boolean");
     }
   },
-  'array': (v: any, _allowParse: any) => {
+  "array": (v: any, _allowParse: any) => {
     if (!Array.isArray(v)) {
       throw new Error("is not an array, but should be");
     }
     for (const entry in v) {
-      if (typeof entry !== 'string') {
+      if (typeof entry !== "string") {
         throw new Error("is not a string, but should be");
       }
     }
   },
-  'map': (v: any, _allowParse: any) => {
+  "map": (v: any, _allowParse: any) => {
     for (const key in v) {
-      if (typeof key !== 'string') {
+      if (typeof key !== "string") {
         throw new Error("is not a string, but should be");
       }
-      if (typeof v[key] !== 'string') {
+      if (typeof v[key] !== "string") {
         throw new Error("is not a string, but should be");
       }
     }
   },
-  'objectsWithinObjects': (v: any, _allowParse: any) => {
+  "objectsWithinObjects": (v: any, _allowParse: any) => {
     for (const catalogName in v) {
-      if (typeof catalogName !== 'string') {
+      if (typeof catalogName !== "string") {
         throw new Error("is not a string, but should be");
       }
       for (const fieldName in v[catalogName]) {
-        if (typeof fieldName !== 'string') {
+        if (typeof fieldName !== "string") {
           throw new Error("is not a string, but should be");
         }
         for (const attributeName in v[catalogName][fieldName]) {
-          if (typeof attributeName !== 'string') {
+          if (typeof attributeName !== "string") {
             throw new Error("is not a string, but should be");
           }
-          if (attributeName === 'show' && typeof v[catalogName][fieldName][attributeName] !== 'boolean') {
+          if (attributeName === "show" && typeof v[catalogName][fieldName][attributeName] !== "boolean") {
             throw new Error("is not a boolean");
           }
-          if (attributeName === 'readonly' && typeof v[catalogName][fieldName][attributeName] !== 'boolean') {
+          if (attributeName === "readonly" && typeof v[catalogName][fieldName][attributeName] !== "boolean") {
             throw new Error("is not a boolean");
           }
         }
diff --git a/src/cssStyles.tsx b/src/cssStyles.tsx
index 9b0002220..35dcf52f7 100644
--- a/src/cssStyles.tsx
+++ b/src/cssStyles.tsx
@@ -1,12 +1,12 @@
 /**
  * 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';
-import { createTheme } from '@mui/material/styles';
-import { Theme, useTheme } from './themes';
+import emotionNormalize from "emotion-normalize";
+import { checkFlexGapSupport } from "./util/utilityFunctions";
+import { createTheme } from "@mui/material/styles";
+import { Theme, useTheme } from "./themes";
 
 /**
  * An emotion component that inserts styles globally
@@ -27,7 +27,7 @@ export const globalStyle = (theme: Theme) => css({
   body: {
     backgroundColor: `${theme.background}`,
     color: `${theme.text}`,
-    fontSize: 'medium',
+    fontSize: "medium",
     // Makes the body span to the bottom of the page
     minHeight: "100vh",
   },
@@ -64,10 +64,10 @@ export const flexGapReplacementStyle = (flexGapValue: number, flexDirectionIsRow
         },
         ...(flexDirectionIsRow) && {
           ">*:first-of-type": {
-            marginLeft: '0px',
+            marginLeft: "0px",
           },
           ">*:last-child": {
-            marginRight: '0px',
+            marginRight: "0px",
           },
         },
       }
@@ -79,7 +79,7 @@ export const flexGapReplacementStyle = (flexGapValue: number, flexDirectionIsRow
  * CSS for buttons
  */
 export const basicButtonStyle = (theme: Theme) => css({
-  borderRadius: '5px',
+  borderRadius: "5px",
   cursor: "pointer",
   "&:hover": {
     backgroundColor: `${theme.button_color}`,
@@ -90,11 +90,11 @@ export const basicButtonStyle = (theme: Theme) => css({
     color: `${theme.inverted_text}`,
   },
   // Flex position child elements
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
   ...(flexGapReplacementStyle(10, false)),
-  textAlign: 'center' as const,
+  textAlign: "center" as const,
   outline: `${theme.button_outline}`,
 });
 
@@ -102,24 +102,24 @@ export const basicButtonStyle = (theme: Theme) => css({
  * CSS for deactivated buttons
  */
 export const deactivatedButtonStyle = css({
-  borderRadius: '10px',
+  borderRadius: "10px",
   cursor: "pointer",
   opacity: "0.6",
   // Flex position child elements
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
   ...(flexGapReplacementStyle(10, false)),
-  textAlign: 'center' as const,
+  textAlign: "center" as const,
 });
 
 /**
  * CSS for nagivation styled buttons
  */
 export const navigationButtonStyle = (theme: Theme) => css({
-  width: '200px',
-  padding: '16px',
-  justifyContent: 'space-around',
+  width: "200px",
+  padding: "16px",
+  justifyContent: "space-around",
   boxShadow: `${theme.boxShadow}`,
   background: `${theme.element_bg}`,
 });
@@ -128,8 +128,8 @@ export const navigationButtonStyle = (theme: Theme) => css({
  * CSS for a container that holds back/forward buttons
  */
 export const backOrContinueStyle = css(({
-  display: 'flex',
-  flexDirection: 'row',
+  display: "flex",
+  flexDirection: "row",
   ...(flexGapReplacementStyle(20, false)),
 }));
 
@@ -137,15 +137,15 @@ export const backOrContinueStyle = css(({
  * CSS for big buttons in a dynamic grid
  */
 export const tileButtonStyle = (theme: Theme) => css({
-  width: '290px',
-  height: '220px',
-  display: 'flex',
-  flexDirection: 'column',
+  width: "290px",
+  height: "220px",
+  display: "flex",
+  flexDirection: "column",
   fontWeight: "bold",
   ...(flexGapReplacementStyle(30, false)),
   boxShadow: `${theme.boxShadow_tiles}`,
   background: `${theme.element_bg}`,
-  placeSelf: 'center',
+  placeSelf: "center",
 });
 
 /**
@@ -153,13 +153,13 @@ export const tileButtonStyle = (theme: Theme) => css({
  */
 export const disableButtonAnimation = css({
   "&:hover": {
-    transform: 'none',
+    transform: "none",
   },
   "&:focus": {
-    transform: 'none',
+    transform: "none",
   },
   "&:active": {
-    transform: 'none',
+    transform: "none",
   },
 });
 
@@ -167,11 +167,11 @@ export const disableButtonAnimation = css({
  * CSS for a title
  */
 export const titleStyle = (theme: Theme) => css(({
-  display: 'inline-block',
-  padding: '15px',
+  display: "inline-block",
+  padding: "15px",
   whiteSpace: "nowrap",
-  textOverflow: 'ellipsis',
-  maxWidth: '100%',
+  textOverflow: "ellipsis",
+  maxWidth: "100%",
   color: `${theme.text}`,
 }));
 
@@ -180,9 +180,9 @@ export const titleStyle = (theme: Theme) => css(({
  * Used for page titles
  */
 export const titleStyleBold = (theme: Theme) => css({
-  fontWeight: 'bold',
-  fontSize: '24px',
-  verticalAlign: '-2.5px',
+  fontWeight: "bold",
+  fontSize: "24px",
+  verticalAlign: "-2.5px",
   color: `${theme.text}`,
 });
 
@@ -190,11 +190,11 @@ export const titleStyleBold = (theme: Theme) => css({
  * CSS for ariaLive regions that should not be visible
  */
 export const ariaLive = css({
-  position: 'absolute',
-  left: '-99999px',
-  height: '1px',
-  width: '1px',
-  overflow: 'hidden',
+  position: "absolute",
+  left: "-99999px",
+  height: "1px",
+  width: "1px",
+  overflow: "hidden",
 });
 
 /**
@@ -205,9 +205,9 @@ export const errorBoxStyle = (errorStatus: boolean, theme: Theme) => {
     css({
       ...(!errorStatus) && { display: "none" },
       borderColor: `${theme.error}`,
-      borderStyle: 'dashed',
-      fontWeight: 'bold',
-      padding: '10px',
+      borderStyle: "dashed",
+      fontWeight: "bold",
+      padding: "10px",
     })
   );
 };
@@ -239,7 +239,7 @@ export function selectFieldStyle(theme: Theme) {
       ...provided,
       color: theme.inverted_text,
       background: theme.multiValue,
-      cursor: 'default',
+      cursor: "default",
     }),
     multiValueLabel: (provided: any) => ({
       ...provided,
@@ -289,35 +289,35 @@ export const calendarStyle = (theme: Theme) => createTheme({
           color: `${theme.text}`,
 
           /* Calendar-modal */
-          '.MuiYearPicker-root': {
-            '.PrivatePickersYear-yearButton:hover, .Mui-selected:hover': {
+          ".MuiYearPicker-root": {
+            ".PrivatePickersYear-yearButton:hover, .Mui-selected:hover": {
               background: `${theme.focused}`,
               color: `${theme.focus_text}`,
             },
-            '.Mui-selected': {
+            ".Mui-selected": {
               background: `${theme.selected}`,
               color: `${theme.selected_text}`,
             }
           },
 
           /* Clock-modal */
-          '& .MuiClock-clock': { // round clock
+          "& .MuiClock-clock": { // round clock
             background: `${theme.clock_bg}`,
             outline: `${theme.clock_border}`,
-            '-webkitTextFillColor': `${theme.text}`, // Digits on the clock
+            "-webkitTextFillColor": `${theme.text}`, // Digits on the clock
             textShadow: `${theme.text_shadow}`
           },
           /* selected digit (hour/minute) */
-          '& .MuiClockPicker-root .Mui-selected': {
-            '-webkitTextFillColor': `${theme.digit_selected}`,
-            fontWeight: 'bold',
-            textShadow: 'none',
+          "& .MuiClockPicker-root .Mui-selected": {
+            "-webkitTextFillColor": `${theme.digit_selected}`,
+            fontWeight: "bold",
+            textShadow: "none",
           },
           /* clock hands */
-          '& .MuiClock-pin, .MuiClockPointer-root': {
+          "& .MuiClock-pin, .MuiClockPointer-root": {
             background: `${theme.clock_hands}`
           },
-          '& .MuiClockPointer-thumb': {
+          "& .MuiClockPointer-thumb": {
             background: `${theme.clock_hands}`,
             border: `16px solid ${theme.clock_hands}`,
           }
@@ -330,31 +330,31 @@ export const calendarStyle = (theme: Theme) => createTheme({
         root: {
           /* Calendar- and Clock-modal -> arrows, icon, days  */
           color: `${theme.text} !important`,
-          '&.MuiPickersDay-root': {
-            background: 'transparent !important',
+          "&.MuiPickersDay-root": {
+            background: "transparent !important",
             color: `${theme.text} !important`,
           },
-          '&:hover, &.Mui-selected:hover': {
+          "&:hover, &.Mui-selected:hover": {
             background: `${theme.focused} !important`,
             color: `${theme.focus_text} !important`,
           },
           // Selected day
-          '&.Mui-selected': {
+          "&.Mui-selected": {
             background: `${theme.selected} !important`,
             color: `${theme.selected_text} !important`,
 
           },
           // Current day
-          '&:not(.Mui-selected)': {
+          "&:not(.Mui-selected)": {
             borderColor: `${theme.focused} !important`,
           },
-          '&.Mui-disabled': {
+          "&.Mui-disabled": {
             color: `${theme.disabled} !important`,
           },
-          '&.MuiClock-amButton, &.MuiClock-pmButton': {
-            '-webkitTextFillColor': `${theme.text} !important`,
-            '&:hover': {
-              '-webkitTextFillColor': `${theme.clock_focus} !important`
+          "&.MuiClock-amButton, &.MuiClock-pmButton": {
+            "-webkitTextFillColor": `${theme.text} !important`,
+            "&:hover": {
+              "-webkitTextFillColor": `${theme.clock_focus} !important`
             }
           },
         }
@@ -372,7 +372,7 @@ export const calendarStyle = (theme: Theme) => createTheme({
 
 export const subtitleSelectStyle = (theme: Theme) => createTheme({
   components: {
-    /* Label: 'Pick a language' & 'Video Flavor' */
+    /* Label: "Pick a language" & "Video Flavor" */
     MuiInputLabel: {
       styleOverrides: {
         root: {
@@ -415,11 +415,11 @@ export const subtitleSelectStyle = (theme: Theme) => createTheme({
     MuiMenuItem: {
       styleOverrides: {
         root: {
-          '&:hover, &.Mui-selected:hover': {
+          "&:hover, &.Mui-selected:hover": {
             color: `${theme.focus_text}`,
             background: `${theme.focused}`
           },
-          '&.Mui-selected': {
+          "&.Mui-selected": {
             color: `${theme.selected_text}`,
             background: `${theme.selected}`,
           },
@@ -437,29 +437,29 @@ export const spinningStyle = css({
 });
 
 export const customIconStyle = css(({
-  maxWidth: '16px',
-  height: 'auto'
+  maxWidth: "16px",
+  height: "auto"
 }));
 
 export const videosStyle = (theme: Theme) => css(({
-  display: 'flex',
-  flexDirection: 'column',
+  display: "flex",
+  flexDirection: "column",
 
-  width: '100%',
+  width: "100%",
   background: `${theme.menu_background}`,
-  borderRadius: '5px',
+  borderRadius: "5px",
   boxShadow: `${theme.boxShadow_tiles}`,
-  marginTop: '24px',
+  marginTop: "24px",
   boxSizing: "border-box",
-  padding: '10px',
+  padding: "10px",
   ...(flexGapReplacementStyle(10, false)),
 }));
 
 export const backgroundBoxStyle = (theme: Theme) => css(({
   background: `${theme.menu_background}`,
-  borderRadius: '7px',
+  borderRadius: "7px",
   boxShadow: `${theme.boxShadow_tiles}`,
   boxSizing: "border-box",
-  padding: '20px',
+  padding: "20px",
   ...(flexGapReplacementStyle(25, false)),
 }));
diff --git a/src/globalKeys.ts b/src/globalKeys.ts
index bd203a02f..0e25b055f 100644
--- a/src/globalKeys.ts
+++ b/src/globalKeys.ts
@@ -2,19 +2,19 @@
  * Contains mappings for special keyboard controls, beyond what is usually expected of a webpage
  * Learn more about keymaps at https://github.com/greena13/react-hotkeys#defining-key-maps (12.03.2021)
  *
- * Additional global configuration settins are placed in './config.ts'
+ * Additional global configuration settins are placed in "./config.ts"
  * (They are not placed here, because that somehow makes the name fields of keymaps undefined for some reason)
  *
  * If you add a new keyMap, be sure to add it to the getAllHotkeys function
  */
-import { match } from '@opencast/appkit';
-import { ParseKeys } from 'i18next';
-import { isMacOs } from 'react-device-detect';
+import { match } from "@opencast/appkit";
+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 groupCuttingView = "keyboardControls.groupCuttingView";
+const groupCuttingViewScrubber = "keyboardControls.groupCuttingViewScrubber";
 const groupSubtitleList = "keyboardControls.groupSubtitleList";
 
 /**
diff --git a/src/i18n/config.tsx b/src/i18n/config.tsx
index 617914d0e..88be64624 100644
--- a/src/i18n/config.tsx
+++ b/src/i18n/config.tsx
@@ -1,18 +1,18 @@
-import i18next, { InitOptions } from 'i18next';
-import { initReactI18next } from 'react-i18next';
-import LanguageDetector from 'i18next-browser-languagedetector';
+import i18next, { InitOptions } from "i18next";
+import { initReactI18next } from "react-i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
 
-import locales from './locales/locales.json';
+import locales from "./locales/locales.json";
 
-const debug = Boolean(new URLSearchParams(window.location.search).get('debug'));
+const debug = Boolean(new URLSearchParams(window.location.search).get("debug"));
 
 const resources: InitOptions["resources"] = {};
 for (const lang of locales) {
-  const code = lang.replace(/\..*$/, '');
-  const short = code.replace(/-.*$/, '');
+  const code = lang.replace(/\..*$/, "");
+  const short = code.replace(/-.*$/, "");
   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);
+  const translations = require("./locales/" + lang);
   if (!main) {
     resources[code] = { translation: translations };
   }
@@ -24,14 +24,14 @@ i18next
   .use(LanguageDetector)
   .init({
     resources,
-    fallbackLng: ['en-US', 'en'],
+    fallbackLng: ["en-US", "en"],
     nonExplicitSupportedLngs: true,
     debug: debug,
   });
 
 if (debug) {
-  console.debug('language', i18next.language);
-  console.debug('languages', i18next.languages);
+  console.debug("language", i18next.language);
+  console.debug("languages", i18next.languages);
 }
 
 export default i18next;
diff --git a/src/index.css b/src/index.css
index 6a3f0d283..3e84b3c74 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,14 +1,14 @@
 body, textarea, input {
   margin: 0;
-  font-family: "Roboto Flex Variable", 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  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;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
 
diff --git a/src/index.tsx b/src/index.tsx
index 23f60cedd..6a0631e5d 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,23 +1,23 @@
-import React from 'react';
-import ReactDOMClient from 'react-dom/client';
-import './index.css';
-import App from './App';
-import { Provider } from 'react-redux';
-import store from './redux/store';
+import React from "react";
+import ReactDOMClient from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import { Provider } from "react-redux";
+import store from "./redux/store";
 
-import { init } from './config';
-import { sleep } from './util/utilityFunctions';
+import { init } from "./config";
+import { sleep } from "./util/utilityFunctions";
 
 import "@fontsource-variable/roboto-flex";
 
-import './i18n/config';
+import "./i18n/config";
 
-import '@opencast/appkit/dist/colors.css';
-import { ColorSchemeProvider } from '@opencast/appkit';
+import "@opencast/appkit/dist/colors.css";
+import { ColorSchemeProvider } from "@opencast/appkit";
 
-const container = document.getElementById('root');
+const container = document.getElementById("root");
 if (!container) {
-  throw new Error('Failed to find the root element');
+  throw new Error("Failed to find the root element");
 }
 const root = ReactDOMClient.createRoot(container);
 
diff --git a/src/main/Body.tsx b/src/main/Body.tsx
index 545a80974..f70ca7786 100644
--- a/src/main/Body.tsx
+++ b/src/main/Body.tsx
@@ -1,25 +1,25 @@
 import React from "react";
 
-import MainMenu from './MainMenu';
-import MainContent from './MainContent';
-import TheEnd from './TheEnd';
-import Error from './Error';
+import MainMenu from "./MainMenu";
+import MainContent from "./MainContent";
+import TheEnd from "./TheEnd";
+import Error from "./Error";
 import Landing from "./Landing";
 import Lock from "./Lock";
 
-import { css } from '@emotion/react';
+import { css } from "@emotion/react";
 
 import { useAppSelector } from "../redux/store";
-import { selectIsEnd } from '../redux/endSlice';
+import { selectIsEnd } from "../redux/endSlice";
 import { selectIsError } from "../redux/errorSlice";
-import { settings } from '../config';
+import { settings } from "../config";
 
 const Body: React.FC = () => {
 
   const isEnd = useAppSelector(selectIsEnd);
   const isError = useAppSelector(selectIsError);
 
-  // If we're in a special state, display a special page
+  // If we"re in a special state, display a special page
   // Otherwise display the normal page
   const main = () => {
     if (!settings.id) {
@@ -49,9 +49,9 @@ const Body: React.FC = () => {
   };
 
   const bodyStyle = css({
-    display: 'flex',
-    flexDirection: 'row',
-    height: 'calc(100% - 64px)',
+    display: "flex",
+    flexDirection: "row",
+    height: "calc(100% - 64px)",
   });
 
   return (
diff --git a/src/main/Cutting.tsx b/src/main/Cutting.tsx
index 397ffc0e6..01c7ef13b 100644
--- a/src/main/Cutting.tsx
+++ b/src/main/Cutting.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import CuttingActions from "./CuttingActions";
-import Timeline from './Timeline';
+import Timeline from "./Timeline";
 import {
   fetchVideoInformation,
   selectCurrentlyAt,
@@ -16,13 +16,13 @@ import {
   setIsMuted,
   setVolume,
   setIsPlayPreview
-} from '../redux/videoSlice';
-import { useTranslation } from 'react-i18next';
+} from "../redux/videoSlice";
+import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "../redux/store";
-import { httpRequestState } from '../types';
+import { httpRequestState } from "../types";
 import { useTheme } from "../themes";
-import { setError } from '../redux/errorSlice';
-import { selectTitleFromEpisodeDc } from '../redux/metadataSlice';
+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";
@@ -46,10 +46,10 @@ const Cutting: React.FC = () => {
 
   // Try to fetch URL from external API
   useEffect(() => {
-    if (videoURLStatus === 'idle') {
+    if (videoURLStatus === "idle") {
       dispatch(fetchVideoInformation());
-    } else if (videoURLStatus === 'failed') {
-      if (errorReason === 'workflowActive') {
+    } else if (videoURLStatus === "failed") {
+      if (errorReason === "workflowActive") {
         dispatch(setError({
           error: true,
           errorTitle: t("error.workflowActive-errorTitle"),
@@ -63,7 +63,7 @@ const Cutting: React.FC = () => {
           errorDetails: error
         }));
       }
-    } else if (videoURLStatus === 'success') {
+    } else if (videoURLStatus === "success") {
       if (duration === null) {
         dispatch(setError({
           error: true,
@@ -76,11 +76,11 @@ const Cutting: React.FC = () => {
 
   // Style
   const cuttingStyle = css({
-    display: 'flex',
-    width: 'auto',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
+    display: "flex",
+    width: "auto",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
   });
 
 
diff --git a/src/main/CuttingActions.tsx b/src/main/CuttingActions.tsx
index 4570672ca..e06f695c9 100644
--- a/src/main/CuttingActions.tsx
+++ b/src/main/CuttingActions.tsx
@@ -1,21 +1,21 @@
 import React from "react";
 
-import { basicButtonStyle, customIconStyle } from '../cssStyles';
+import { basicButtonStyle, customIconStyle } from "../cssStyles";
 
 import { IconType } from "react-icons";
 import { LuScissors, LuChevronLeft, LuChevronRight, LuTrash, LuMoveHorizontal } from "react-icons/lu";
-import { ReactComponent as TrashRestore } from '../img/trash-restore.svg';
+import { ReactComponent as TrashRestore } from "../img/trash-restore.svg";
 
-import { css } from '@emotion/react';
+import { css } from "@emotion/react";
 
 import { useAppDispatch, useAppSelector } from "../redux/store";
 import {
   cut, markAsDeletedOrAlive, selectIsCurrentSegmentAlive, mergeLeft, mergeRight, mergeAll
-} from '../redux/videoSlice';
+} from "../redux/videoSlice";
 import { KEYMAP, rewriteKeys } from "../globalKeys";
 import { ActionCreatorWithoutPayload } from "@reduxjs/toolkit";
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 import { useTheme } from "../themes";
 import { ThemedTooltip } from "./Tooltip";
 import { useHotkeys } from "react-hotkeys-hook";
@@ -72,15 +72,15 @@ const CuttingActions: React.FC = () => {
   );
 
   const cuttingStyle = css({
-    display: 'flex',
-    flexDirection: 'row' as const,
-    justifyContent: 'center',
-    alignItems: 'center',
+    display: "flex",
+    flexDirection: "row" as const,
+    justifyContent: "center",
+    alignItems: "center",
   });
 
   const verticalLineStyle = css({
-    borderLeft: '2px solid #DDD;',
-    height: '32px',
+    borderLeft: "2px solid #DDD;",
+    height: "32px",
   });
 
   return (
@@ -89,8 +89,8 @@ const CuttingActions: React.FC = () => {
         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) })}
+        tooltip={t("cuttingActions.cut-tooltip", { hotkeyName: rewriteKeys(KEYMAP.cutting.cut.key) })}
+        ariaLabelText={t("cuttingActions.cut-tooltip-aria", { hotkeyName: rewriteKeys(KEYMAP.cutting.cut.key) })}
       />
       <div css={verticalLineStyle} />
       <MarkAsDeletedButton actionHandler={dispatchAction} action={markAsDeletedOrAlive}
@@ -101,9 +101,9 @@ const CuttingActions: React.FC = () => {
         actionName={t("cuttingActions.mergeLeft-button")}
         actionHandler={dispatchAction}
         action={mergeLeft}
-        tooltip={t('cuttingActions.mergeLeft-tooltip', { hotkeyName: rewriteKeys(KEYMAP.cutting.mergeLeft.key) })}
+        tooltip={t("cuttingActions.mergeLeft-tooltip", { hotkeyName: rewriteKeys(KEYMAP.cutting.mergeLeft.key) })}
         ariaLabelText={
-          t('cuttingActions.mergeLeft-tooltip-aria', { hotkeyName: rewriteKeys(KEYMAP.cutting.mergeLeft.key) })
+          t("cuttingActions.mergeLeft-tooltip-aria", { hotkeyName: rewriteKeys(KEYMAP.cutting.mergeLeft.key) })
         }
       />
       <div css={verticalLineStyle} />
@@ -111,9 +111,9 @@ const CuttingActions: React.FC = () => {
         actionName={t("cuttingActions.mergeRight-button")}
         actionHandler={dispatchAction}
         action={mergeRight}
-        tooltip={t('cuttingActions.mergeRight-tooltip', { hotkeyName: rewriteKeys(KEYMAP.cutting.mergeRight.key) })}
+        tooltip={t("cuttingActions.mergeRight-tooltip", { hotkeyName: rewriteKeys(KEYMAP.cutting.mergeRight.key) })}
         ariaLabelText={
-          t('cuttingActions.mergeRight-tooltip-aria', { hotkeyName: rewriteKeys(KEYMAP.cutting.mergeRight.key) })
+          t("cuttingActions.mergeRight-tooltip-aria", { hotkeyName: rewriteKeys(KEYMAP.cutting.mergeRight.key) })
         }
       />
       <div css={verticalLineStyle} />
@@ -121,8 +121,8 @@ const CuttingActions: React.FC = () => {
         actionName={t("cuttingActions.merge-all-button")}
         actionHandler={dispatchAction}
         action={mergeAll}
-        tooltip={t('cuttingActions.merge-all-tooltip')}
-        ariaLabelText={t('cuttingActions.merge-all-tooltip-aria')}
+        tooltip={t("cuttingActions.merge-all-tooltip")}
+        ariaLabelText={t("cuttingActions.merge-all-tooltip-aria")}
       />
       {/* <CuttingActionsButton Icon={faQuestion} actionName="Reset changes" action={null}
         tooltip="Not implemented"
@@ -140,7 +140,7 @@ const CuttingActions: React.FC = () => {
  * CSS for cutting buttons
  */
 const cuttingActionButtonStyle = css({
-  padding: '16px',
+  padding: "16px",
   // boxShadow: `${theme.boxShadow}`,
   // background: `${theme.element_bg}`
 });
@@ -209,11 +209,11 @@ const MarkAsDeletedButton: React.FC<markAsDeleteButtonInterface> = ({
   const theme = useTheme();
 
   return (
-    <ThemedTooltip title={t('cuttingActions.delete-restore-tooltip', { hotkeyName: hotKeyName })}>
+    <ThemedTooltip title={t("cuttingActions.delete-restore-tooltip", { hotkeyName: hotKeyName })}>
       <div css={[basicButtonStyle(theme), cuttingActionButtonStyle]}
         ref={ref}
         role="button" tabIndex={0}
-        aria-label={t('cuttingActions.delete-restore-tooltip-aria', { hotkeyName: hotKeyName })}
+        aria-label={t("cuttingActions.delete-restore-tooltip-aria", { hotkeyName: hotKeyName })}
         onClick={() => actionHandler(action, ref)}
         onKeyDown={(event: React.KeyboardEvent) => {
           if (event.key === " " || event.key === "Enter") {
@@ -222,7 +222,7 @@ const MarkAsDeletedButton: React.FC<markAsDeleteButtonInterface> = ({
         }}
       >
         {isCurrentSegmentAlive ? <LuTrash /> : <TrashRestore css={customIconStyle} />}
-        <div>{isCurrentSegmentAlive ? t('cuttingActions.delete-button') : t("cuttingActions.restore-button")}</div>
+        <div>{isCurrentSegmentAlive ? t("cuttingActions.delete-button") : t("cuttingActions.restore-button")}</div>
       </div>
     </ThemedTooltip>
   );
diff --git a/src/main/Discard.tsx b/src/main/Discard.tsx
index 383ff2c51..0a631cf27 100644
--- a/src/main/Discard.tsx
+++ b/src/main/Discard.tsx
@@ -1,17 +1,17 @@
 import React from "react";
 
-import { css } from '@emotion/react';
-import { basicButtonStyle, backOrContinueStyle, navigationButtonStyle, flexGapReplacementStyle } from '../cssStyles';
+import { css } from "@emotion/react";
+import { basicButtonStyle, backOrContinueStyle, navigationButtonStyle, flexGapReplacementStyle } from "../cssStyles";
 
 import { LuChevronLeft, LuXCircle } from "react-icons/lu";
 
 import { useAppDispatch, useAppSelector } from "../redux/store";
-import { selectFinishState } from '../redux/finishSlice';
-import { setEnd } from '../redux/endSlice';
+import { selectFinishState } from "../redux/finishSlice";
+import { setEnd } from "../redux/endSlice";
 
-import { PageButton } from './Finish';
+import { PageButton } from "./Finish";
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 import { useTheme } from "../themes";
 
 /**
@@ -25,9 +25,9 @@ const Discard: React.FC = () => {
   const finishState = useAppSelector(selectFinishState);
 
   const cancelStyle = css({
-    display: finishState !== "Discard changes" ? 'none' : 'flex',
-    flexDirection: 'column' as const,
-    alignItems: 'center',
+    display: finishState !== "Discard changes" ? "none" : "flex",
+    flexDirection: "column" as const,
+    alignItems: "center",
     ...(flexGapReplacementStyle(30, false)),
   });
 
@@ -57,7 +57,7 @@ const DiscardButton: React.FC = () => {
   const theme = useTheme();
 
   const discard = () => {
-    dispatch(setEnd({ hasEnded: true, value: 'discarded' }));
+    dispatch(setEnd({ hasEnded: true, value: "discarded" }));
   };
 
   return (
diff --git a/src/main/Error.tsx b/src/main/Error.tsx
index 8a3ae70d5..1e4d16cd3 100644
--- a/src/main/Error.tsx
+++ b/src/main/Error.tsx
@@ -1,14 +1,14 @@
 import React from "react";
 
-import { css } from '@emotion/react';
+import { css } from "@emotion/react";
 
 import { LuFrown } from "react-icons/lu";
 
 import { useAppSelector } from "../redux/store";
-import { selectErrorDetails, selectErrorIcon, selectErrorMessage, selectErrorTitle } from '../redux/errorSlice';
+import { selectErrorDetails, selectErrorIcon, selectErrorMessage, selectErrorTitle } from "../redux/errorSlice";
 import { flexGapReplacementStyle } from "../cssStyles";
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 
 /**
  * This page is to be displayed when the application has run into a critical error
@@ -25,17 +25,17 @@ const Error: React.FC = () => {
   const ErrorIcon = useAppSelector(selectErrorIcon);
 
   const detailsStyle = css({
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
   });
 
   const theEndStyle = css({
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
     ...(flexGapReplacementStyle(10, false)),
   });
 
diff --git a/src/main/Finish.tsx b/src/main/Finish.tsx
index 1e3758327..2c9903e2d 100644
--- a/src/main/Finish.tsx
+++ b/src/main/Finish.tsx
@@ -8,13 +8,13 @@ import WorkflowConfiguration from "./WorkflowConfiguration";
 
 import { LuDoorOpen } from "react-icons/lu";
 
-import { css } from '@emotion/react';
-import { basicButtonStyle, navigationButtonStyle } from '../cssStyles';
+import { css } from "@emotion/react";
+import { basicButtonStyle, navigationButtonStyle } from "../cssStyles";
 
 import { IconType } from "react-icons";
 
 import { useAppDispatch, useAppSelector } from "../redux/store";
-import { selectPageNumber, setPageNumber } from '../redux/finishSlice';
+import { selectPageNumber, setPageNumber } from "../redux/finishSlice";
 import { useTheme } from "../themes";
 import { settings } from "../config";
 import { useTranslation } from "react-i18next";
@@ -27,15 +27,15 @@ const Finish: React.FC = () => {
   const pageNumber = useAppSelector(selectPageNumber);
 
   const pageZeroStyle = css({
-    display: pageNumber !== 0 ? 'none' : 'block',
+    display: pageNumber !== 0 ? "none" : "block",
   });
 
   const pageOneStyle = css({
-    display: pageNumber !== 1 ? 'none' : 'block',
+    display: pageNumber !== 1 ? "none" : "block",
   });
 
   const pageTwoStyle = css({
-    display: pageNumber !== 2 ? 'none' : 'block',
+    display: pageNumber !== 2 ? "none" : "block",
   });
 
   return (
@@ -78,9 +78,9 @@ export const PageButton: React.FC<{
   };
 
   const pageButtonStyle = css({
-    minWidth: '100px',
-    padding: '16px',
-    justifyContent: 'center',
+    minWidth: "100px",
+    padding: "16px",
+    justifyContent: "center",
     boxShadow: `${theme.boxShadow}`,
     background: `${theme.element_bg}`,
   });
diff --git a/src/main/FinishMenu.tsx b/src/main/FinishMenu.tsx
index e4370b83b..7b8602666 100644
--- a/src/main/FinishMenu.tsx
+++ b/src/main/FinishMenu.tsx
@@ -1,15 +1,15 @@
 import React from "react";
 
-import { css } from '@emotion/react';
-import { basicButtonStyle, flexGapReplacementStyle, tileButtonStyle } from '../cssStyles';
+import { css } from "@emotion/react";
+import { basicButtonStyle, flexGapReplacementStyle, tileButtonStyle } from "../cssStyles";
 
 import { IconType } from "react-icons";
 import { LuSave, LuDatabase, LuXCircle } from "react-icons/lu";
 
 import { useAppDispatch } from "../redux/store";
-import { setState, setPageNumber, finish } from '../redux/finishSlice';
+import { setState, setPageNumber, finish } from "../redux/finishSlice";
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 import { useTheme } from "../themes";
 
 /**
@@ -18,10 +18,10 @@ import { useTheme } from "../themes";
 const FinishMenu: React.FC = () => {
 
   const finishMenuStyle = css({
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    flexWrap: 'wrap',
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    flexWrap: "wrap",
     ...(flexGapReplacementStyle(30, false)),
   });
 
@@ -65,19 +65,19 @@ const FinishMenuButton: React.FC<{ Icon: IconType, stateName: finish["value"]; }
   }
 
   const iconStyle = css({
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
 
     background: `${theme.background_finish_menu_icon}`,
     color: `${theme.text}`,
-    borderRadius: '50%',
-    width: '90px',
-    height: '90px',
+    borderRadius: "50%",
+    width: "90px",
+    height: "90px",
   });
 
   const labelStyle = css({
-    padding: '0px 20px',
+    padding: "0px 20px",
   });
 
   return (
diff --git a/src/main/Header.tsx b/src/main/Header.tsx
index d5f08f7e4..d4afad631 100644
--- a/src/main/Header.tsx
+++ b/src/main/Header.tsx
@@ -2,16 +2,16 @@ import React from "react";
 import { useAppSelector } from "../redux/store";
 import { useTheme } from "../themes";
 
-import { css } from '@emotion/react';
+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 { basicButtonStyle, BREAKPOINT_MEDIUM, BREAKPOINT_SMALL, flexGapReplacementStyle } from "../cssStyles";
 
-import { ReactComponent as LogoSvg } from '../img/opencast-editor.svg';
+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";
@@ -25,33 +25,33 @@ function Header() {
   const isEnd = useAppSelector(selectIsEnd);
 
   const headerStyle = css({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
     backgroundColor: `${theme.header_bg}`,
   });
 
-  const headerStyleThemed = scheme.includes('high-contrast-')
+  const headerStyleThemed = scheme.includes("high-contrast-")
     ? css({
-      height: '62px',
-      borderBottom: '2px solid white'
+      height: "62px",
+      borderBottom: "2px solid white"
     })
     : css({
-      height: '64px',
+      height: "64px",
     });
 
   const rightSideButtonsStyle = css({
-    display: 'flex',
-    flexDirection: 'row',
-    height: '100%',
-    alignItems: 'center',
-    paddingRight: '24px',
+    display: "flex",
+    flexDirection: "row",
+    height: "100%",
+    alignItems: "center",
+    paddingRight: "24px",
     ...(flexGapReplacementStyle(16, false)),
   });
 
   const settingsButtonCSS = css({
-    display: 'flex',
-    flexDirection: 'row',
+    display: "flex",
+    flexDirection: "row",
     alignItems: "center",
     ...(flexGapReplacementStyle(8, false)),
 
@@ -96,8 +96,8 @@ const Logo: React.FC = () => {
   const { scheme } = useColorScheme();
 
   const logo = css({
-    paddingLeft: '8px',
-    opacity: scheme === 'dark' ? '0.8' : '1',
+    paddingLeft: "8px",
+    opacity: scheme === "dark" ? "0.8" : "1",
 
     height: "100%",
     "> *": {
@@ -105,12 +105,12 @@ const Logo: React.FC = () => {
     },
 
     // Unset a bunch of CSS to keep the logo clean
-    outline: 'unset',
+    outline: "unset",
     "&:hover": {
-      backgroundColor: `unset`,
+      backgroundColor: "unset",
     },
     "&:focus": {
-      backgroundColor: `unset`,
+      backgroundColor: "unset",
     },
   });
 
@@ -121,7 +121,7 @@ const Logo: React.FC = () => {
       bottomText={""}
       ariaLabelText={t("mainMenu.cutting-button")}
       customCSS={logo}
-      iconCustomCSS={css({ width: 'auto', height: '60px' })}
+      iconCustomCSS={css({ width: "auto", height: "60px" })}
     />
   );
 };
@@ -137,7 +137,7 @@ const LanguageButton: React.FC = () => {
 
   const languageNames = (language: string) => {
     return new Intl.DisplayNames([language], {
-      type: 'language'
+      type: "language"
     }).of(language);
   };
 
@@ -147,7 +147,7 @@ const LanguageButton: React.FC = () => {
     return { value: entry, label: languageNames(entry) };
   });
 
-  // menuItems can't deal with languages being undefined, so we return early
+  // menuItems can"t deal with languages being undefined, so we return early
   // until we reach a rerender with actual information
   if (languages === undefined) {
     return (<></>);
@@ -230,7 +230,7 @@ const HeaderButton = React.forwardRef<HTMLButtonElement, HeaderButtonProps>(
         color: `${theme.header_text}`
       },
       ":focus": {
-        backgroundColor: 'inherit',
+        backgroundColor: "inherit",
         color: `${theme.header_text}`
       },
       ":focus:hover": {
diff --git a/src/main/KeyboardControls.tsx b/src/main/KeyboardControls.tsx
index 1b52339f9..788049b26 100644
--- a/src/main/KeyboardControls.tsx
+++ b/src/main/KeyboardControls.tsx
@@ -7,7 +7,7 @@ import { useTranslation, Trans } from "react-i18next";
 import { flexGapReplacementStyle } from "../cssStyles";
 import { getGroupName, KEYMAP, rewriteKeys } from "../globalKeys";
 import { useTheme } from "../themes";
-import { titleStyle, titleStyleBold } from '../cssStyles';
+import { titleStyle, titleStyleBold } from "../cssStyles";
 
 const Group: React.FC<{ name: ParseKeys, entries: { [key: string]: string[][]; }; }> = ({ name, entries }) => {
 
@@ -15,16 +15,16 @@ const Group: React.FC<{ name: ParseKeys, entries: { [key: string]: string[][]; }
   const theme = useTheme();
 
   const groupStyle = css({
-    display: 'flex',
-    flexDirection: 'column' as const,
-    width: '460px',
-    maxWidth: '50vw',
+    display: "flex",
+    flexDirection: "column" as const,
+    width: "460px",
+    maxWidth: "50vw",
 
     background: `${theme.menu_background}`,
-    borderRadius: '5px',
+    borderRadius: "5px",
     boxShadow: `${theme.boxShadow_tiles}`,
     boxSizing: "border-box",
-    padding: '0px 20px 20px 20px',
+    padding: "0px 20px 20px 20px",
   });
 
   const headingStyle = css({
@@ -47,43 +47,43 @@ const Entry: React.FC<{ name: string, sequences: string[][]; }> = ({ name, seque
   const theme = useTheme();
 
   const entryStyle = css({
-    display: 'flex',
-    flexFlow: 'column nowrap',
-    justifyContent: 'left',
-    width: '100%',
-    padding: '10px 0px',
+    display: "flex",
+    flexFlow: "column nowrap",
+    justifyContent: "left",
+    width: "100%",
+    padding: "10px 0px",
     ...(flexGapReplacementStyle(10, true))
   });
 
   const labelStyle = css({
-    fontWeight: 'bold',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    wordWrap: 'break-word',
+    fontWeight: "bold",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    wordWrap: "break-word",
     color: `${theme.text}`,
   });
 
   const sequenceStyle = css({
-    display: 'flex',
-    flexDirection: 'row',
+    display: "flex",
+    flexDirection: "row",
     ...(flexGapReplacementStyle(10, true))
   });
 
   const singleKeyStyle = css({
-    borderRadius: '4px',
-    borderWidth: '2px',
-    borderStyle: 'solid',
+    borderRadius: "4px",
+    borderWidth: "2px",
+    borderStyle: "solid",
     borderColor: `${theme.singleKey_border}`,
     background: `${theme.singleKey_bg}`,
     boxShadow: `${theme.singleKey_boxShadow}`,
-    padding: '10px',
+    padding: "10px",
     color: `${theme.text}`,
   });
 
   const orStyle = css({
-    alignSelf: 'center',
-    fontSize: '20px',
-    fontWeight: 'bold',
+    alignSelf: "center",
+    fontSize: "20px",
+    fontWeight: "bold",
   });
 
   return (
@@ -111,10 +111,10 @@ const KeyboardControls: React.FC = () => {
   const theme = useTheme();
 
   const groupsStyle = css({
-    display: 'flex',
-    flexDirection: 'row' as const,
-    flexWrap: 'wrap',
-    justifyContent: 'center',
+    display: "flex",
+    flexDirection: "row" as const,
+    flexWrap: "wrap",
+    justifyContent: "center",
     ...(flexGapReplacementStyle(30, true)),
   });
 
@@ -145,10 +145,10 @@ const KeyboardControls: React.FC = () => {
   };
 
   const keyboardControlsStyle = css({
-    display: 'flex',
-    flexDirection: 'column' as const,
-    alignItems: 'center',
-    width: '100%',
+    display: "flex",
+    flexDirection: "column" as const,
+    alignItems: "center",
+    width: "100%",
   });
 
   return (
diff --git a/src/main/Landing.tsx b/src/main/Landing.tsx
index 9daff633e..e19b94b75 100644
--- a/src/main/Landing.tsx
+++ b/src/main/Landing.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 
-import { css } from '@emotion/react';
+import { css } from "@emotion/react";
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 
 /**
  * This page is to be displayed when the application has run into a critical error
@@ -13,22 +13,22 @@ const Landing: React.FC = () => {
   const { t } = useTranslation();
 
   const landingStyle = css({
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
 
     a: {
-      color: '#007bff',
-      textDecoration: 'none',
+      color: "#007bff",
+      textDecoration: "none",
     },
     li: {
-      margin: '5px',
+      margin: "5px",
     },
     code: {
-      userSelect: 'all',
-      color: '#e83e8c',
+      userSelect: "all",
+      color: "#e83e8c",
     }
   });
 
diff --git a/src/main/Lock.tsx b/src/main/Lock.tsx
index 12f7aaf43..4a6596a07 100644
--- a/src/main/Lock.tsx
+++ b/src/main/Lock.tsx
@@ -4,11 +4,11 @@ import { LuLock } from "react-icons/lu";
 import { useAppDispatch, useAppSelector } from "../redux/store";
 import { settings } from "../config";
 import { setLock, video } from "../redux/videoSlice";
-import { selectIsEnd } from '../redux/endSlice';
+import { selectIsEnd } from "../redux/endSlice";
 import { setError } from "../redux/errorSlice";
 import { client } from "../util/client";
 import { useInterval } from "../util/utilityFunctions";
-import { useBeforeunload } from 'react-beforeunload';
+import { useBeforeunload } from "react-beforeunload";
 
 const Lock: React.FC = () => {
   const endpoint = `${settings.opencast.url}/editor/${settings.id}/lock`;
@@ -27,7 +27,7 @@ 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)))
@@ -37,17 +37,17 @@ const Lock: React.FC = () => {
           error: true,
           errorDetails: error,
           errorIcon: LuLock,
-          errorTitle: 'Video editing locked',
-          errorMessage: 'This video is currently being edited by another user'
+          errorTitle: "Video editing locked",
+          errorMessage: "This video is currently being edited by another user"
         }));
       });
   }
 
   function releaseLock() {
     if (lockingActive && lockState) {
-      client.delete(endpoint + '/' + lock.uuid)
+      client.delete(endpoint + "/" + lock.uuid)
         .then(() => {
-          console.info('Lock released');
+          console.info("Lock released");
           dispatch(setLock(false));
         });
     }
diff --git a/src/main/MainContent.tsx b/src/main/MainContent.tsx
index 2eeab9116..878d1ab66 100644
--- a/src/main/MainContent.tsx
+++ b/src/main/MainContent.tsx
@@ -1,22 +1,22 @@
 import React from "react";
 
-import Metadata from './Metadata';
-import TrackSelection from './TrackSelection';
+import Metadata from "./Metadata";
+import TrackSelection from "./TrackSelection";
 import Subtitle from "./Subtitle";
 import Finish from "./Finish";
 import KeyboardControls from "./KeyboardControls";
 
 import { LuWrench } from "react-icons/lu";
 
-import { css } from '@emotion/react';
+import { css } from "@emotion/react";
 
 import { useAppSelector } from "../redux/store";
-import { selectMainMenuState } from '../redux/mainMenuSlice';
+import { selectMainMenuState } from "../redux/mainMenuSlice";
 
-import { MainMenuStateNames } from '../types';
+import { MainMenuStateNames } from "../types";
 import { flexGapReplacementStyle } from "../cssStyles";
 
-import { useBeforeunload } from 'react-beforeunload';
+import { useBeforeunload } from "react-beforeunload";
 import { selectHasChanges as videoSelectHasChanges } from "../redux/videoSlice";
 import { selectHasChanges as metadataSelectHasChanges } from "../redux/metadataSlice";
 import { selectHasChanges as selectSubtitleHasChanges } from "../redux/subtitleSlice";
@@ -44,50 +44,50 @@ const MainContent: React.FC = () => {
   });
 
   const mainContentStyle = css({
-    display: 'flex',
-    width: '100%',
-    paddingRight: '20px',
-    paddingLeft: '20px',
+    display: "flex",
+    width: "100%",
+    paddingRight: "20px",
+    paddingLeft: "20px",
     ...(flexGapReplacementStyle(20, false)),
     background: `${theme.background}`,
-    overflow: 'auto',
+    overflow: "auto",
   });
 
   const cuttingStyle = css({
-    flexDirection: 'column',
+    flexDirection: "column",
   });
 
   const metadataStyle = css({
   });
 
   const trackSelectStyle = css({
-    flexDirection: 'column',
-    alignContent: 'space-around',
+    flexDirection: "column",
+    alignContent: "space-around",
   });
 
   const subtitleSelectStyle = css({
-    flexDirection: 'column',
-    justifyContent: 'space-around',
+    flexDirection: "column",
+    justifyContent: "space-around",
   });
 
   const thumbnailSelectStyle = css({
-    flexDirection: 'column',
-    alignContent: 'space-around',
+    flexDirection: "column",
+    alignContent: "space-around",
   });
 
   const finishStyle = css({
-    flexDirection: 'column',
-    justifyContent: 'space-around',
+    flexDirection: "column",
+    justifyContent: "space-around",
   });
 
   const keyboardControlsStyle = css({
-    flexDirection: 'column',
+    flexDirection: "column",
   });
 
   const defaultStyle = css({
-    flexDirection: 'column',
-    alignItems: 'center',
-    padding: '20px',
+    flexDirection: "column",
+    alignItems: "center",
+    padding: "20px",
   });
 
   const render = () => {
diff --git a/src/main/MainMenu.tsx b/src/main/MainMenu.tsx
index e50f97b81..36d88a36d 100644
--- a/src/main/MainMenu.tsx
+++ b/src/main/MainMenu.tsx
@@ -1,22 +1,22 @@
 import React from "react";
 
-import { css, SerializedStyles } from '@emotion/react';
+import { css, SerializedStyles } from "@emotion/react";
 
 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 { ReactComponent as SubtitleIcon } from "../img/subtitle.svg";
 
 import { useAppDispatch, useAppSelector } from "../redux/store";
-import { setState, selectMainMenuState, mainMenu } from '../redux/mainMenuSlice';
-import { setPageNumber } from '../redux/finishSlice';
+import { setState, selectMainMenuState, mainMenu } from "../redux/mainMenuSlice";
+import { setPageNumber } from "../redux/finishSlice";
 
-import { MainMenuStateNames } from '../types';
-import { settings } from '../config';
-import { basicButtonStyle, flexGapReplacementStyle } from '../cssStyles';
+import { MainMenuStateNames } from "../types";
+import { settings } from "../config";
+import { basicButtonStyle, flexGapReplacementStyle } from "../cssStyles";
 import { setIsPlaying } from "../redux/videoSlice";
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 import { resetPostRequestState as metadataResetPostRequestState } from "../redux/metadataSlice";
 import { resetPostRequestState } from "../redux/workflowPostSlice";
 import { setIsDisplayEditView } from "../redux/subtitleSlice";
@@ -33,14 +33,14 @@ const MainMenu: React.FC = () => {
 
   const mainMenuStyle = css({
     borderRight: `${theme.menuBorder}`,
-    minWidth: '120px',
-    maxWidth: '140px',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    padding: '20px',
-    overflowX: 'hidden',
-    overflowY: 'auto',
+    minWidth: "120px",
+    maxWidth: "140px",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: "20px",
+    overflowX: "hidden",
+    overflowY: "auto",
     background: `${theme.menu_background}`,
     ...(flexGapReplacementStyle(30, false)),
   });
@@ -130,20 +130,20 @@ export const MainMenuButton: React.FC<mainMenuButtonInterface> = ({
   };
 
   const mainMenuButtonStyle = css({
-    width: '100%',
-    height: '100px',
+    width: "100%",
+    height: "100px",
     outline: `${theme.menuButton_outline}`,
     ...(activeState === stateName) && {
       backgroundColor: `${theme.button_color}`,
       color: `${theme.inverted_text}`,
       boxShadow: `${theme.boxShadow}`,
     },
-    '&:hover': {
+    "&:hover": {
       backgroundColor: `${theme.button_color}`,
       color: `${theme.inverted_text}`,
       boxShadow: `${theme.boxShadow}`,
     },
-    flexDirection: 'column',
+    flexDirection: "column",
   });
 
   return (
@@ -159,8 +159,8 @@ export const MainMenuButton: React.FC<mainMenuButtonInterface> = ({
     >
       <Icon css={iconCustomCSS ? iconCustomCSS : {
         fontSize: 36,
-        width: '36px',
-        height: 'auto'
+        width: "36px",
+        height: "auto"
       }} />
       {bottomText && <div>{bottomText}</div>}
     </li>
diff --git a/src/main/Metadata.tsx b/src/main/Metadata.tsx
index 67f1e66db..f7635361b 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 { css } from "@emotion/react";
+import { calendarStyle, errorBoxStyle, selectFieldStyle, titleStyle, titleStyleBold } from "../cssStyles";
 
 import { useAppDispatch, useAppSelector } from "../redux/store";
 import {
@@ -16,16 +16,16 @@ import {
   selectPostError,
   selectPostStatus,
   setFieldReadonly
-} from '../redux/metadataSlice';
+} from "../redux/metadataSlice";
 
-import { Form, Field, FieldInputProps } from 'react-final-form';
-import Select from 'react-select';
-import CreatableSelect from 'react-select/creatable';
+import { Form, Field, FieldInputProps } from "react-final-form";
+import Select from "react-select";
+import CreatableSelect from "react-select/creatable";
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 import { DateTime as LuxonDateTime } from "luxon";
 
-import { configureFieldsAttributes, settings } from '../config';
+import { configureFieldsAttributes, settings } from "../config";
 import { useTheme } from "../themes";
 import { ThemeProvider } from "@mui/material/styles";
 import { cloneDeep } from "lodash";
@@ -37,7 +37,7 @@ import { ParseKeys } from "i18next";
  * Takes data from a redux slice and throws it into a react-final-form.
  * When submitting, the state in the redux slice gets updated
  *
- * If something doesn't work, main places of interest are the submit function
+ * If something doesn"t work, main places of interest are the submit function
  * and the initialValues function
  */
 const Metadata: React.FC = () => {
@@ -55,14 +55,14 @@ const Metadata: React.FC = () => {
 
   // Try to fetch URL from external API
   useEffect(() => {
-    if (getStatus === 'idle') {
+    if (getStatus === "idle") {
       dispatch(fetchMetadata());
     }
   }, [getStatus, dispatch]);
 
   // Overwrite readonly property of fields based on config settings
   useEffect(() => {
-    if (getStatus === 'success') {
+    if (getStatus === "success") {
       for (let catalogIndex = 0; catalogIndex < catalogs.length; catalogIndex++) {
         if (settings.metadata.configureFields) {
           const configureFields = settings.metadata.configureFields;
@@ -96,45 +96,45 @@ const Metadata: React.FC = () => {
    */
 
   const metadataStyle = css({
-    padding: '20px',
-    marginLeft: 'auto',
-    marginRight: 'auto',
-    minWidth: '50%',
-    display: 'grid',
+    padding: "20px",
+    marginLeft: "auto",
+    marginRight: "auto",
+    minWidth: "50%",
+    display: "grid",
   });
 
   const catalogStyle = css({
     background: `${theme.menu_background}`,
-    borderRadius: '5px',
+    borderRadius: "5px",
     boxShadow: `${theme.boxShadow_tiles}`,
-    marginTop: '24px',
+    marginTop: "24px",
     boxSizing: "border-box",
-    padding: '10px',
+    padding: "10px",
   });
 
   const fieldStyle = css({
-    display: 'flex',
-    flexFlow: 'column nowrap',
-    lineHeight: '2em',
-    margin: '10px',
+    display: "flex",
+    flexFlow: "column nowrap",
+    lineHeight: "2em",
+    margin: "10px",
   });
 
   const fieldLabelStyle = css({
-    width: '110px',
-    fontSize: '1em',
-    fontWeight: 'bold',
+    width: "110px",
+    fontSize: "1em",
+    fontWeight: "bold",
     color: `${theme.text}`,
-    lineHeight: '32px',
+    lineHeight: "32px",
   });
 
   const fieldTypeStyle = (isReadOnly: boolean) => {
     return css({
-      fontSize: '1em',
-      borderRadius: '5px',
-      boxShadow: isReadOnly ? '0 0 0px rgba(0, 0, 0, 0.3)' : '0 0 1px rgba(0, 0, 0, 0.3)',
+      fontSize: "1em",
+      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,
       },
@@ -147,62 +147,62 @@ const Metadata: React.FC = () => {
   const inputFieldTypeStyle = (isReadOnly: boolean) => {
     return (
       css({
-        padding: '10px 10px',
-        border: '1px solid #ccc',
+        padding: "10px 10px",
+        border: "1px solid #ccc",
         background: isReadOnly ? `${theme.background}` : `${theme.element_bg}`,
         opacity: isReadOnly ? "0.6" : "1",
-        resize: 'vertical',
+        resize: "vertical",
       })
     );
   };
 
   const validateStyle = (isError: boolean) => {
     return css({
-      lineHeight: '32px',
-      marginLeft: '10px',
+      lineHeight: "32px",
+      marginLeft: "10px",
       ...(isError && { color: `${theme.error}` }),
-      fontWeight: 'bold',
+      fontWeight: "bold",
     });
   };
 
   // const buttonContainerStyle = css({
-  //   display: 'flex',
-  //   flexFlow: 'row nowrap',
-  //   justifyContent: 'space-around',
-  //   marginTop: '25px',
+  //   display: "flex",
+  //   flexFlow: "row nowrap",
+  //   justifyContent: "space-around",
+  //   marginTop: "25px",
   // })
 
-  // // TODO: Rework all div buttons so the ':enabled' pseudo-class does not screw them over
+  // // TODO: Rework all div buttons so the ":enabled" pseudo-class does not screw them over
   // const basicButtonStyleCOPY = css({
-  //   borderRadius: '10px',
+  //   borderRadius: "10px",
   //   cursor: "pointer",
   //   // Animation
   //   transitionDuration: "0.3s",
   //   transitionProperty: "transform",
   //   "&:hover:enabled": {
-  //     transform: 'scale(1.1)',
+  //     transform: "scale(1.1)",
   //   },
   //   "&:focus:enabled": {
-  //     transform: 'scale(1.1)',
+  //     transform: "scale(1.1)",
   //   },
   //   "&:active:enabled": {
-  //     transform: 'scale(0.9)',
+  //     transform: "scale(0.9)",
   //   },
   //   // Flex position child elements
-  //   display: 'flex',
-  //   justifyContent: 'center',
-  //   alignItems: 'center',
-  //   gap: '10px',
-  //   textAlign: 'center' as const,
+  //   display: "flex",
+  //   justifyContent: "center",
+  //   alignItems: "center",
+  //   gap: "10px",
+  //   textAlign: "center" as const,
   // });
 
   // const submitButtonStyle = css({
-  //   background: 'snow',
-  //   border: '1px solid #ccc',
+  //   background: "snow",
+  //   border: "1px solid #ccc",
 
   //   "&[disabled]": {
-  //     opacity: '0.6',
-  //     cursor: 'not-allowed',
+  //     opacity: "0.6",
+  //     cursor: "not-allowed",
   //   },
   // })
 
@@ -292,10 +292,10 @@ const Metadata: React.FC = () => {
     }
 
     let dt = undefined;
-    if (Object.prototype.toString.call(date) === '[object Date]') {
+    if (Object.prototype.toString.call(date) === "[object Date]") {
       dt = LuxonDateTime.fromJSDate(date);
     }
-    if (typeof date === 'string') {
+    if (typeof date === "string") {
       dt = LuxonDateTime.fromISO(date);
     }
 
@@ -311,7 +311,7 @@ const Metadata: React.FC = () => {
 
   /**
    * Returns the desired combination of validators for a given field
-   * TODO: Fix 'composeValidators' so this function can actually work as advertised
+   * TODO: Fix "composeValidators" so this function can actually work as advertised
    * @param field
    */
   const getValidators = (field: MetadataField) => {
@@ -389,9 +389,9 @@ const Metadata: React.FC = () => {
     }
 
     // If the value is hidden an object due to react-select, extract it
-    if (typeof value === 'object' && value !== null && Object.prototype.hasOwnProperty.call(value, "submitValue")) {
+    if (typeof value === "object" && value !== null && Object.prototype.hasOwnProperty.call(value, "submitValue")) {
       returnValue = value.submitValue;
-    } else if (typeof value === 'object' && value !== null && value.__isNew__) {
+    } else if (typeof value === "object" && value !== null && value.__isNew__) {
       returnValue = value.value;
     }
 
@@ -402,7 +402,7 @@ 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]') {
+      Object.prototype.toString.call(returnValue) === "[object Date]") {
       // If invalid date
       if ((isNaN(returnValue.getTime()))) {
         // Do nothing
@@ -459,7 +459,7 @@ const Metadata: React.FC = () => {
    */
   const generateReactSelectLibrary = (field: MetadataField) => {
     if (field.collection) {
-      // For whatever reason react-select uses 'value' as their key, which is not at all confusing
+      // For whatever reason react-select uses "value" as their key, which is not at all confusing
       const library: [{ value: any, label: any, submitValue: any; }] =
         [{ value: "", label: "No value", submitValue: "" }];
       Object.entries(field.collection).forEach(([key, value]) => {
@@ -545,7 +545,7 @@ const Metadata: React.FC = () => {
             readOnly={field.readOnly}
             css={[fieldTypeStyle(field.readOnly), inputFieldTypeStyle(field.readOnly),
               {
-                resize: 'none',
+                resize: "none",
               }
             ]}
             data-testid="dateTimePicker"
@@ -563,7 +563,7 @@ const Metadata: React.FC = () => {
             readOnly={field.readOnly}
             css={[fieldTypeStyle(field.readOnly), inputFieldTypeStyle(field.readOnly),
               {
-                resize: 'none',
+                resize: "none",
               }
             ]}
           />
@@ -599,7 +599,7 @@ const Metadata: React.FC = () => {
     /**
      * Wrapper function for component generation.
      * Handles the special case of DateTimePicker/TimePicker, which
-     * can't handle empty string as a value (which is what Opencast uses to
+     * can"t handle empty string as a value (which is what Opencast uses to
      * represent no date/time)
      */
     const generateComponentWithModifiedInput = (field: MetadataField, input: FieldInputProps<any, HTMLElement>) => {
@@ -607,7 +607,7 @@ const Metadata: React.FC = () => {
         const { value, ...other } = input;
         return generateComponent(field, other);
       }
-      // <input type="datetime-local"> is picky about its value and won't accept
+      // <input type="datetime-local"> 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
@@ -627,7 +627,7 @@ const Metadata: React.FC = () => {
       <Field key={fieldIndex}
         name={"catalog" + catalogIndex + "." + field.id}
         validate={getValidators(field)}
-        // 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 }) => (
diff --git a/src/main/Save.tsx b/src/main/Save.tsx
index 005899aa8..c520e0005 100644
--- a/src/main/Save.tsx
+++ b/src/main/Save.tsx
@@ -1,26 +1,26 @@
 import React, { useEffect, useState } from "react";
 
-import { css } from '@emotion/react';
+import { css } from "@emotion/react";
 import {
   basicButtonStyle, backOrContinueStyle, ariaLive, errorBoxStyle,
   navigationButtonStyle, flexGapReplacementStyle, spinningStyle
-} from '../cssStyles';
+} from "../cssStyles";
 
 import { LuLoader, LuCheckCircle, LuAlertCircle, LuChevronLeft, LuSave, LuCheck } from "react-icons/lu";
 
 import { useAppDispatch, useAppSelector } from "../redux/store";
-import { selectFinishState } from '../redux/finishSlice';
+import { selectFinishState } from "../redux/finishSlice";
 import {
   selectHasChanges,
   selectSegments,
   selectTracks,
   setHasChanges as videoSetHasChanges
-} from '../redux/videoSlice';
-import { postVideoInformation, selectStatus, selectError } from '../redux/workflowPostSlice';
+} from "../redux/videoSlice";
+import { postVideoInformation, selectStatus, selectError } from "../redux/workflowPostSlice";
 
-import { CallbackButton, PageButton } from './Finish';
+import { CallbackButton, PageButton } from "./Finish";
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 import {
   postMetadata, selectPostError, selectPostStatus, setHasChanges as metadataSetHasChanges,
   selectHasChanges as metadataSelectHasChanges
@@ -53,16 +53,16 @@ const Save: React.FC = () => {
   const subtitleHasChanges = useAppSelector(selectSubtitleHasChanges);
 
   const saveStyle = css({
-    height: '100%',
-    display: finishState !== "Save changes" ? 'none' : 'flex',
-    flexDirection: 'column' as const,
-    alignItems: 'center',
+    height: "100%",
+    display: finishState !== "Save changes" ? "none" : "flex",
+    flexDirection: "column" as const,
+    alignItems: "center",
     ...(flexGapReplacementStyle(30, false)),
   });
 
   const render = () => {
     // Post (successful) save
-    if (postWorkflowStatus === 'success' && postMetadataStatus === 'success'
+    if (postWorkflowStatus === "success" && postMetadataStatus === "success"
       && !hasChanges && !metadataHasChanges && !subtitleHasChanges) {
       return (
         <>
@@ -75,7 +75,7 @@ const Save: React.FC = () => {
     } else {
       return (
         <>
-          <span css={{ maxWidth: '500px' }}>
+          <span css={{ maxWidth: "500px" }}>
             {t("save.info-text")}
           </span>
           <div css={backOrContinueStyle}>
@@ -127,22 +127,22 @@ export const SaveButton: React.FC = () => {
   let Icon = LuSave;
   let spin = false;
   let tooltip = null;
-  if (workflowStatus === 'failed' || metadataStatus === 'failed') {
+  if (workflowStatus === "failed" || metadataStatus === "failed") {
     Icon = LuAlertCircle;
     spin = false;
     tooltip = t("save.confirmButton-failed-tooltip");
-  } else if (workflowStatus === 'success' && metadataStatus === 'success') {
+  } else if (workflowStatus === "success" && metadataStatus === "success") {
     Icon = LuCheck;
     spin = false;
     tooltip = t("save.confirmButton-success-tooltip");
-  } else if (workflowStatus === 'loading' || metadataStatus === 'loading') {
+  } else if (workflowStatus === "loading" || metadataStatus === "loading") {
     Icon = LuLoader;
     spin = true;
     tooltip = t("save.confirmButton-attempting-tooltip");
   }
 
   const ariaSaveUpdate = () => {
-    if (workflowStatus === 'success') {
+    if (workflowStatus === "success") {
       return t("save.success-tooltip-aria");
     }
   };
@@ -170,7 +170,7 @@ export const SaveButton: React.FC = () => {
 
   // Subsequent save request
   useEffect(() => {
-    if (metadataStatus === 'success' && metadataSaveStarted) {
+    if (metadataStatus === "success" && metadataSaveStarted) {
       setMetadataSaveStarted(false);
       dispatch(postVideoInformation({
         segments: segments,
@@ -184,7 +184,7 @@ export const SaveButton: React.FC = () => {
 
   // Let users leave the page without warning after a successful save
   useEffect(() => {
-    if (workflowStatus === 'success' && metadataStatus === 'success') {
+    if (workflowStatus === "success" && metadataStatus === "success") {
       dispatch(videoSetHasChanges(false));
       dispatch(metadataSetHasChanges(false));
       dispatch(subtitleSetHasChanges(false));
diff --git a/src/main/SubtitleEditor.tsx b/src/main/SubtitleEditor.tsx
index 80d478273..6fd815999 100644
--- a/src/main/SubtitleEditor.tsx
+++ b/src/main/SubtitleEditor.tsx
@@ -4,7 +4,7 @@ import { basicButtonStyle, flexGapReplacementStyle } from "../cssStyles";
 import { LuChevronLeft, LuDownload } from "react-icons/lu";
 import {
   selectSubtitlesFromOpencastById,
-} from '../redux/videoSlice';
+} from "../redux/videoSlice";
 import { useAppDispatch, useAppSelector } from "../redux/store";
 import SubtitleListEditor from "./SubtitleListEditor";
 import {
@@ -12,7 +12,7 @@ import {
   selectSelectedSubtitleById,
   selectSelectedSubtitleId,
   setSubtitle
-} from '../redux/subtitleSlice';
+} from "../redux/subtitleSlice";
 import SubtitleVideoArea from "./SubtitleVideoArea";
 import SubtitleTimeline from "./SubtitleTimeline";
 import { useTranslation } from "react-i18next";
@@ -70,31 +70,31 @@ const SubtitleEditor: React.FC = () => {
   };
 
   const subtitleEditorStyle = css({
-    display: 'flex',
-    flexDirection: 'column',
-    paddingRight: '20px',
-    paddingLeft: '20px',
-    gap: '20px',
-    height: '100%',
+    display: "flex",
+    flexDirection: "column",
+    paddingRight: "20px",
+    paddingLeft: "20px",
+    gap: "20px",
+    height: "100%",
   });
 
   const headerRowStyle = css({
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    width: '100%',
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: "100%",
   });
 
   const subAreaStyle = css({
-    display: 'flex',
-    flexDirection: 'row',
+    display: "flex",
+    flexDirection: "row",
     flexGrow: 1,  // No fixed height, fill available space
-    justifyContent: 'space-between',
-    alignItems: 'top',
-    width: '100%',
-    paddingTop: '10px',
-    paddingBottom: '10px',
+    justifyContent: "space-between",
+    alignItems: "top",
+    width: "100%",
+    paddingTop: "10px",
+    paddingBottom: "10px",
     ...(flexGapReplacementStyle(30, true)),
     borderBottom: `${theme.menuBorder}`
   });
@@ -138,24 +138,24 @@ const DownloadButton: React.FC = () => {
 
   const downloadSubtitles = () => {
 
-    const vttFile = new Blob([serializeSubtitle(subtitle.cues)], { type: 'text/vtt' });
+    const vttFile = new Blob([serializeSubtitle(subtitle.cues)], { type: "text/vtt" });
 
     const vttFileLink = window.URL.createObjectURL(vttFile);
-    const vttHyperLink = document.createElement('a');
-    vttHyperLink.setAttribute('href', vttFileLink);
+    const vttHyperLink = document.createElement("a");
+    vttHyperLink.setAttribute("href", vttFileLink);
 
     const vttFileName = generateButtonTitle(subtitle.tags, t).trimEnd();
-    vttHyperLink.setAttribute('download', `${vttFileName}.vtt`);
+    vttHyperLink.setAttribute("download", `${vttFileName}.vtt`);
     vttHyperLink.click();
   };
 
   const { t } = useTranslation();
   const theme = useTheme();
   const style = css({
-    fontSize: '16px',
-    height: '10px',
-    padding: '16px',
-    justifyContent: 'space-around',
+    fontSize: "16px",
+    height: "10px",
+    padding: "16px",
+    justifyContent: "space-around",
     boxShadow: `${theme.boxShadow}`,
     background: `${theme.element_bg}`,
   });
@@ -166,7 +166,7 @@ const DownloadButton: React.FC = () => {
         role="button"
         onClick={() => downloadSubtitles()}
       >
-        <LuDownload css={{ fontSize: '16px' }} />
+        <LuDownload css={{ fontSize: "16px" }} />
         <span>{t("subtitles.downloadButton-title")}</span>
       </div>
     </ThemedTooltip>
@@ -184,11 +184,11 @@ export const BackButton: React.FC = () => {
   const dispatch = useAppDispatch();
 
   const backButtonStyle = css({
-    height: '10px',
-    padding: '16px',
+    height: "10px",
+    padding: "16px",
     boxShadow: `${theme.boxShadow}`,
     background: `${theme.element_bg}`,
-    justifyContent: 'space-around'
+    justifyContent: "space-around"
   });
 
   return (
diff --git a/src/main/SubtitleListEditor.tsx b/src/main/SubtitleListEditor.tsx
index 6ccac5495..b27dcb1a1 100644
--- a/src/main/SubtitleListEditor.tsx
+++ b/src/main/SubtitleListEditor.tsx
@@ -86,26 +86,26 @@ const SubtitleListEditor: React.FC = () => {
   }, [dispatch, subtitle?.cues, subtitleId]);
 
   const listStyle = css({
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%',
-    width: '60%',
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    width: "60%",
     ...(flexGapReplacementStyle(20, false)),
   });
 
   // Old CSS for not yet implemented buttons
   // const headerStyle = css({
-  //   display: 'flex',
-  //   flexDirection: 'row',
-  //   justifyContent: 'flex-end',
-  //   flexWrap: 'wrap',
+  //   display: "flex",
+  //   flexDirection: "row",
+  //   justifyContent: "flex-end",
+  //   flexWrap: "wrap",
   //   ...(flexGapReplacementStyle(20, false)),
-  //   paddingRight: '20px',
+  //   paddingRight: "20px",
   // })
 
   // const cuttingActionButtonStyle = {
-  //   padding: '16px',
-  //   boxShadow: '0 0 10px rgba(0, 0, 0, 0.3)',
+  //   padding: "16px",
+  //   boxShadow: "0 0 10px rgba(0, 0, 0, 0.3)",
   // };
 
   const calcEstimatedSize = React.useCallback(() => {
@@ -159,8 +159,8 @@ const innerElementType = React.forwardRef<HTMLDivElement, { style: CSSProperties
     style={{
       ...style,
       // height: `${parseFloat(style.height !== undefined ? style.height.toString() : "0") + PADDING_SIZE * 2}px`,
-      paddingTop: PADDING_SIZE + 'px',
-      zIndex: '1000',
+      paddingTop: PADDING_SIZE + "px",
+      zIndex: "1000",
     }}
     {...rest}
   />
@@ -286,28 +286,28 @@ const SubtitleListSegment = React.memo((props: subtitleListSegmentProps) => {
     KEYMAP.subtitleList.jumpBelow.key,
     KEYMAP.subtitleList.delete.key
   ], (_, handler) => {
-    switch (handler.keys?.join('')) {
-      case KEYMAP.subtitleList.addAbove.key.split('+').pop():
+    switch (handler.keys?.join("")) {
+      case KEYMAP.subtitleList.addAbove.key.split("+").pop():
         addCueAbove();
         break;
-      case KEYMAP.subtitleList.addBelow.key.split('+').pop():
+      case KEYMAP.subtitleList.addBelow.key.split("+").pop():
         addCueBelow();
         break;
-      case KEYMAP.subtitleList.jumpAbove.key.split('+').pop():
+      case KEYMAP.subtitleList.jumpAbove.key.split("+").pop():
         dispatch(setFocusSegmentTriggered(true));
         dispatch(setFocusToSegmentAboveId({ identifier: identifier, segmentId: cue.idInternal }));
         break;
-      case KEYMAP.subtitleList.jumpBelow.key.split('+').pop():
+      case KEYMAP.subtitleList.jumpBelow.key.split("+").pop():
         dispatch(setFocusSegmentTriggered(true));
         dispatch(setFocusToSegmentBelowId({ identifier: identifier, segmentId: cue.idInternal }));
         break;
-      case KEYMAP.subtitleList.delete.key.split('+').pop():
+      case KEYMAP.subtitleList.delete.key.split("+").pop():
         dispatch(setFocusSegmentTriggered(true));
         dispatch(setFocusToSegmentAboveId({ identifier: identifier, segmentId: cue.idInternal }));
         deleteCue();
         break;
     }
-  }, { enableOnFormTags: ['input', 'select', 'textarea'] }, [identifier, cue, props.index]);
+  }, { enableOnFormTags: ["input", "select", "textarea"] }, [identifier, cue, props.index]);
 
   const setTimeToSegmentStart = () => {
     dispatch(setCurrentlyAt(cue.startTime));
@@ -316,10 +316,10 @@ const SubtitleListSegment = React.memo((props: subtitleListSegmentProps) => {
   const { scheme } = useColorScheme();
 
   const segmentStyle = css({
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    alignItems: 'center',
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-around",
+    alignItems: "center",
     ...(flexGapReplacementStyle(20, false)),
     // Make function buttons visible when hovered or focused
     "&:hover": {
@@ -332,55 +332,55 @@ const SubtitleListSegment = React.memo((props: subtitleListSegmentProps) => {
         visibility: "visible",
       }
     },
-    '& textarea, input': {
+    "& textarea, input": {
       outline: `${theme.element_outline}`,
     },
-    '& input': {
-      marginTop: (scheme === 'dark-high-contrast' || scheme === 'light-high-contrast' ? '3%' : '0%'),
-      marginBottom: (scheme === 'dark-high-contrast' || scheme === 'light-high-contrast' ? '3%' : '0%'),
+    "& input": {
+      marginTop: (scheme === "dark-high-contrast" || scheme === "light-high-contrast" ? "3%" : "0%"),
+      marginBottom: (scheme === "dark-high-contrast" || scheme === "light-high-contrast" ? "3%" : "0%"),
     }
   });
 
   const timeAreaStyle = css({
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-    height: '100%',
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    height: "100%",
   });
 
   const functionButtonAreaStyle = css({
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-    alignItems: 'center',
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    alignItems: "center",
     ...(flexGapReplacementStyle(10, false)),
-    flexGrow: '0.5',
-    minWidth: '20px',
+    flexGrow: "0.5",
+    minWidth: "20px",
     // Hackily moves buttons beyond the segment border.
     // Specific value causes buttons from neighboring segments to overlay.
-    height: '132px',
-    visibility: 'hidden',
+    height: "132px",
+    visibility: "hidden",
   });
 
   const fieldStyle = css({
-    fontSize: '1em',
-    marginLeft: '15px',
-    borderRadius: '5px',
-    borderWidth: '1px',
-    padding: '10px 10px',
+    fontSize: "1em",
+    marginLeft: "15px",
+    borderRadius: "5px",
+    borderWidth: "1px",
+    padding: "10px 10px",
     background: `${theme.element_bg}`,
-    border: '1px solid #ccc',
+    border: "1px solid #ccc",
     color: `${theme.text}`
   });
 
   const textFieldStyle = css({
-    flexGrow: '7',
-    height: '80%',
-    minWidth: '100px',
+    flexGrow: "7",
+    height: "80%",
+    minWidth: "100px",
     // TODO: Find a way to allow resizing without breaking the UI
     //  Manual or automatic resizing can cause neighboring textareas to overlap
     //  Can use TextareaAutosize from mui, but that does not fix the overlap problem
-    resize: 'none',
+    resize: "none",
   });
 
   return (
@@ -388,10 +388,10 @@ const SubtitleListSegment = React.memo((props: subtitleListSegmentProps) => {
       ...props.style,
       // Used for padding in the VariableSizeList
       top: props.style.top !== undefined ?
-        `${parseFloat(props.style.top.toString()) + PADDING_SIZE}px` : '0px',
+        `${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',
+        `${parseFloat(props.style.height.toString()) - PADDING_SIZE}px` : "0px",
+      zIndex: "1000",
     }]}>
 
       <textarea
@@ -411,7 +411,7 @@ const SubtitleListSegment = React.memo((props: subtitleListSegmentProps) => {
       <div css={timeAreaStyle}>
         <TimeInput
           generalFieldStyle={[fieldStyle,
-            css({ ...(cue.startTime > cue.endTime && { borderColor: 'red', borderWidth: '2px' }) })]}
+            css({ ...(cue.startTime > cue.endTime && { borderColor: "red", borderWidth: "2px" }) })]}
           value={cue.startTime}
           changeCallback={updateCueStart}
           tooltip={t("subtitleList.startTime-tooltip")}
@@ -419,7 +419,7 @@ const SubtitleListSegment = React.memo((props: subtitleListSegmentProps) => {
         />
         <TimeInput
           generalFieldStyle={[fieldStyle,
-            css({ ...(cue.startTime > cue.endTime && { borderColor: 'red', borderWidth: '2px' }) })]}
+            css({ ...(cue.startTime > cue.endTime && { borderColor: "red", borderWidth: "2px" }) })]}
           value={cue.endTime}
           changeCallback={updateCueEnd}
           tooltip={t("subtitleList.endTime-tooltip")}
@@ -488,11 +488,11 @@ const FunctionButton: React.FC<{
   const theme = useTheme();
 
   const addSegmentButtonStyle = css({
-    width: '32px',
-    height: '32px',
+    width: "32px",
+    height: "32px",
     boxShadow: `${theme.boxShadow}`,
     background: `${theme.element_bg}`,
-    zIndex: '1000',
+    zIndex: "1000",
   });
 
   return (
@@ -562,9 +562,9 @@ const TimeInput: React.FC<{
   };
 
   const timeFieldStyle = css({
-    height: '20%',
-    width: '100px',
-    ...(parsingError && { borderColor: 'red', borderWidth: '2px' })
+    height: "20%",
+    width: "100px",
+    ...(parsingError && { borderColor: "red", borderWidth: "2px" })
   });
 
   return (
diff --git a/src/main/SubtitleSelect.tsx b/src/main/SubtitleSelect.tsx
index 8e8130d0f..9257dd144 100644
--- a/src/main/SubtitleSelect.tsx
+++ b/src/main/SubtitleSelect.tsx
@@ -7,7 +7,7 @@ import {
   disableButtonAnimation,
   subtitleSelectStyle
 } from "../cssStyles";
-import { settings, subtitleTags } from '../config';
+import { settings, subtitleTags } from "../config";
 import { selectSubtitles, setSelectedSubtitleId, setSubtitle } from "../redux/subtitleSlice";
 import { useAppDispatch, useAppSelector } from "../redux/store";
 import { setIsDisplayEditView } from "../redux/subtitleSlice";
@@ -18,10 +18,10 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { selectSubtitlesFromOpencast } from "../redux/videoSlice";
 import { useTheme } from "../themes";
-import { ThemeProvider } from '@mui/material/styles';
+import { ThemeProvider } from "@mui/material/styles";
 import { ThemedTooltip } from "./Tooltip";
 import { languageCodeToName } from "../util/utilityFunctions";
-import { v4 as uuidv4 } from 'uuid';
+import { v4 as uuidv4 } from "uuid";
 import { TFunction } from "i18next";
 
 /**
@@ -54,21 +54,21 @@ const SubtitleSelect: React.FC = () => {
       .concat(existingSubtitles);
 
     // Looks for languages in existing subtitles
-    // so that those languages don't show in the addSubtitles dropdown
+    // so that those languages don"t show in the addSubtitles dropdown
     const subtitlesFromOpencastLangs = subtitlesFromOpencast
       .reduce((result: { id: string, lang: string; }[], track) => {
-        const lang = track.tags.find(e => e.startsWith('lang:'));
+        const lang = track.tags.find(e => e.startsWith("lang:"));
         if (lang) {
-          result.push({ id: track.id, lang: lang.split(':')[1].trim() });
+          result.push({ id: track.id, lang: lang.split(":")[1].trim() });
         }
         return result;
       }, []);
 
     const subtitlesLangs = Object.entries(subtitles)
       .reduce((result: { id: string, lang: string; }[], track) => {
-        const lang = track[1].tags.find(e => e.startsWith('lang:'));
+        const lang = track[1].tags.find(e => e.startsWith("lang:"));
         if (lang) {
-          result.push({ id: track[0], lang: lang.split(':')[1].trim() });
+          result.push({ id: track[0], lang: lang.split(":")[1].trim() });
         }
         return result;
       }, []);
@@ -99,10 +99,10 @@ const SubtitleSelect: React.FC = () => {
   };
 
   const subtitleSelectStyle = css({
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    flexWrap: 'wrap',
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    flexWrap: "wrap",
     ...(flexGapReplacementStyle(30, false)),
   });
 
@@ -113,8 +113,8 @@ const SubtitleSelect: React.FC = () => {
     }
 
     for (const subtitle of displaySubtitles) {
-      let lang = subtitle.tags.find(e => e.startsWith('lang:'));
-      lang = lang ? lang.split(':')[1].trim() : undefined;
+      let lang = subtitle.tags.find(e => e.startsWith("lang:"));
+      lang = lang ? lang.split(":")[1].trim() : undefined;
       const icon = lang ? ((settings.subtitles || {}).icons || {})[lang] : undefined;
 
       buttons.push(
@@ -155,22 +155,22 @@ const SubtitleSelectButton: React.FC<{
   const dispatch = useAppDispatch();
 
   const flagStyle = css({
-    fontSize: '2.5em',
-    overflow: 'hidden',
+    fontSize: "2.5em",
+    overflow: "hidden",
 
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
     background: `${theme.background_finish_menu_icon}`,
     color: `${theme.text}`,
-    borderRadius: '50%',
-    width: '90px',
-    height: '90px',
+    borderRadius: "50%",
+    width: "90px",
+    height: "90px",
   });
 
   const titleStyle = css({
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
+    overflow: "hidden",
+    textOverflow: "ellipsis",
     minWidth: 0,
   });
 
@@ -190,7 +190,7 @@ const SubtitleSelectButton: React.FC<{
           }
         }}>
         {icon && <div css={flagStyle}>{icon}</div>}
-        <div css={titleStyle}>{title ?? t('subtitles.generic') + " " + id}</div>
+        <div css={titleStyle}>{title ?? t("subtitles.generic") + " " + id}</div>
       </div>
     </ThemedTooltip>
   );
@@ -216,7 +216,7 @@ const SubtitleAddButton: React.FC<{
     const data = [];
     for (const subtitle of subtitlesForDropdown) {
       const lang = generateButtonTitle(subtitle.tags, t);
-      data.push({ label: lang ?? t('subtitles.generic') + " " + subtitle.id, value: subtitle.id });
+      data.push({ label: lang ?? t("subtitles.generic") + " " + subtitle.id, value: subtitle.id });
     }
     data.sort((dat1, dat2) => dat1.label.localeCompare(dat2.label));
     return data;
@@ -238,28 +238,28 @@ const SubtitleAddButton: React.FC<{
   };
 
   const plusIconStyle = css({
-    display: isPlusDisplay ? 'flex' : 'none'
+    display: isPlusDisplay ? "flex" : "none"
   });
 
   const subtitleAddFormStyle = css({
-    display: !isPlusDisplay ? 'flex' : 'none',
-    flexDirection: 'column' as const,
+    display: !isPlusDisplay ? "flex" : "none",
+    flexDirection: "column" as const,
     ...(flexGapReplacementStyle(30, false)),
-    width: '80%',
-    padding: '20px',
+    width: "80%",
+    padding: "20px",
   });
 
   const createButtonStyle = css({
-    padding: '10px 5px',
-    width: '100%',
-    boxShadow: '',
+    padding: "10px 5px",
+    width: "100%",
+    boxShadow: "",
     border: `1px solid ${theme.text}`,
     backgroundColor: `${theme.background}`,
     color: `${theme.text}`,
 
     "&[disabled]": {
-      opacity: '0.6',
-      cursor: 'not-allowed',
+      opacity: "0.6",
+      cursor: "not-allowed",
     },
   });
 
@@ -324,22 +324,22 @@ const SubtitleAddButton: React.FC<{
  * Generates a title for the buttons from the tags
  */
 export function generateButtonTitle(tags: string[], t: TFunction<"translation", undefined>) {
-  let lang = tags.find(e => e.startsWith('lang:'));
-  lang = lang ? lang.split(':')[1].trim() : undefined;
+  let lang = tags.find(e => e.startsWith("lang:"));
+  lang = lang ? lang.split(":")[1].trim() : undefined;
   lang = languageCodeToName(lang?.trim()) ?? lang;
 
-  let cc = '';
-  const type = tags.find(e => e.startsWith('type:'));
-  const isCC = type ? type.split(':')[1].trim() === 'closed-caption' : undefined;
+  let cc = "";
+  const type = tags.find(e => e.startsWith("type:"));
+  const isCC = type ? type.split(":")[1].trim() === "closed-caption" : undefined;
   if (isCC) {
-    cc = '[CC]';
+    cc = "[CC]";
   }
 
-  let autoGen = '';
-  const genType = tags.find(e => e.startsWith('generator-type:'));
-  const isAutoGen = genType ? genType.split(':')[1].trim() === 'auto' : undefined;
+  let autoGen = "";
+  const genType = tags.find(e => e.startsWith("generator-type:"));
+  const isAutoGen = genType ? genType.split(":")[1].trim() === "auto" : undefined;
   if (isAutoGen) {
-    autoGen = "(" + t('subtitles.autoGenerated') + ")";
+    autoGen = "(" + t("subtitles.autoGenerated") + ")";
   }
 
   return cc + " " + lang + " " + autoGen;
diff --git a/src/main/SubtitleTimeline.tsx b/src/main/SubtitleTimeline.tsx
index c5ad00a39..e29f3d69a 100644
--- a/src/main/SubtitleTimeline.tsx
+++ b/src/main/SubtitleTimeline.tsx
@@ -11,7 +11,7 @@ import {
   setFocusSegmentId,
   setFocusSegmentTriggered,
   setFocusSegmentTriggered2,
-} from '../redux/subtitleSlice';
+} from "../redux/subtitleSlice";
 import { useAppDispatch, useAppSelector } from "../redux/store";
 import useResizeObserver from "use-resize-observer";
 import { selectDuration } from "../redux/videoSlice";
@@ -48,10 +48,10 @@ const SubtitleTimeline: React.FC = () => {
   const timelineCutoutInMs = 10000;
 
   const timelineStyle = css({
-    position: 'relative',     // Need to set position for Draggable bounds to work
-    width: ((duration / timelineCutoutInMs)) * 100 + '%',    // Total length of timeline based on number of cutouts
-    paddingLeft: '50%',
-    paddingRight: '50%',
+    position: "relative",     // Need to set position for Draggable bounds to work
+    width: ((duration / timelineCutoutInMs)) * 100 + "%",    // Total length of timeline based on number of cutouts
+    paddingLeft: "50%",
+    paddingRight: "50%",
   });
 
   const setCurrentlyAtToClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
@@ -106,21 +106,21 @@ const SubtitleTimeline: React.FC = () => {
   };
 
   return (
-    <div css={{ position: 'relative', width: '100%', height: '250px' }}>
+    <div css={{ position: "relative", width: "100%", height: "250px" }}>
       {/* "Scrubber". Sits smack dab in the middle and does not move */}
       <div
         css={{
-          position: 'absolute',
-          width: '2px',
-          height: '200px',
+          position: "absolute",
+          width: "2px",
+          height: "200px",
           ...(refTop.current) && { left: (refTop.current.clientWidth / 2) },
-          top: '10px',
+          top: "10px",
           background: `${theme.text}`,
           zIndex: 100,
         }}
       />
       {/* Scrollable timeline container. Has width of parent*/}
-      <ScrollContainer innerRef={refTop} css={{ overflow: 'hidden', width: '100%', height: '215px' }}
+      <ScrollContainer innerRef={refTop} css={{ overflow: "hidden", width: "100%", height: "215px" }}
         vertical={false}
         horizontal={true}
         onEndScroll={onEndScroll}
@@ -130,9 +130,9 @@ const SubtitleTimeline: React.FC = () => {
         {/* Container. Overflows. Width based on parent times zoom level*/}
         <div ref={ref} css={timelineStyle}>
           {/* Fake padding. TODO: Figure out a better way to pad absolutely positioned elements*/}
-          <div css={{ height: '10px' }} />
+          <div css={{ height: "10px" }} />
           <TimelineSubtitleSegmentsList timelineWidth={width} />
-          <div css={{ position: 'relative', height: '100px' }} >
+          <div css={{ position: "relative", height: "100px" }} >
             <Waveforms timelineHeight={120} />
             <CuttingSegmentsList
               timelineWidth={width}
@@ -144,27 +144,27 @@ const SubtitleTimeline: React.FC = () => {
         </div>
       </ScrollContainer>
       {/* Mini Timeline. Makes it easier to understand position in scrollable timeline */}
-      <ThemedTooltip title={t('subtitleTimeline.overviewTimelineTooltip')}>
+      <ThemedTooltip title={t("subtitleTimeline.overviewTimelineTooltip")}>
         <div
           onMouseDown={e => setCurrentlyAtToClick(e)}
           css={{
-            position: 'relative',
-            width: '100%',
-            height: '15px',
+            position: "relative",
+            width: "100%",
+            height: "15px",
             background: `linear-gradient(to right, grey ${(currentlyAt / duration) * 100}%,
               lightgrey ${(currentlyAt / duration) * 100}%)`,
-            borderRadius: '3px',
+            borderRadius: "3px",
           }}
           ref={refMini}
         >
           <div
             css={{
-              position: 'absolute',
-              width: '2px',
-              height: '100%',
+              position: "absolute",
+              width: "2px",
+              height: "100%",
               left: (currentlyAt / duration) * (widthMiniTimeline),
               top: 0,
-              background: 'black'
+              background: "black"
             }}
           />
         </div>
@@ -178,7 +178,7 @@ const SubtitleTimeline: React.FC = () => {
   //   <Example2 />
   //   {/* <TimelineSubtitleSegment
   //   timelineWidth={width}
-  //   cue={{id: '42', text:"HI", startTime: 1000, endTime: 5000, tree:{children: [{type: "", value: ""}]}}}
+  //   cue={{id: "42", text:"HI", startTime: 1000, endTime: 5000, tree:{children: [{type: "", value: ""}]}}}
   //   index={0}
   //   height={80}
   //   /> */}
@@ -196,10 +196,10 @@ const TimelineSubtitleSegmentsList: React.FC<{ timelineWidth: number; }> = ({ ti
   const subtitle = useAppSelector(selectSelectedSubtitleById);
 
   const segmentsListStyle = css({
-    position: 'relative',
-    width: '100%',
+    position: "relative",
+    width: "100%",
     height: `${arbitraryHeight}px`,
-    overflow: 'hidden',
+    overflow: "hidden",
   });
 
   return (
@@ -290,14 +290,14 @@ const TimelineSubtitleSegment: React.FC<{
     let newTop = absoluteTop;
     const deltaHeight = size.height - absoluteHeight;
     const deltaWidth = size.width - absoluteWidth;
-    if (handle[0] === 'n') {
+    if (handle[0] === "n") {
       newTop -= deltaHeight;
-    } else if (handle[0] === 's') {
+    } else if (handle[0] === "s") {
       newTop += deltaHeight;
     }
-    if (handle[handle.length - 1] === 'w') {
+    if (handle[handle.length - 1] === "w") {
       newLeft -= deltaWidth;
-    } else if (handle[handle.length - 1] === 'e') {
+    } else if (handle[handle.length - 1] === "e") {
       newLeft += deltaWidth;
     }
 
@@ -318,11 +318,11 @@ const TimelineSubtitleSegment: React.FC<{
     let newStartTime = props.cue.startTime;
     let newEndTime = props.cue.endTime;
     // if handle === left, update startTime
-    if (handle === 'w') {
+    if (handle === "w") {
       newStartTime = props.cue.startTime + timeDiff;
     }
     // if handle === right, update endTime
-    if (handle === 'e') {
+    if (handle === "e") {
       newEndTime = props.cue.endTime + timeDiff;
     }
 
@@ -363,7 +363,7 @@ const TimelineSubtitleSegment: React.FC<{
   };
 
   const segmentStyle = css({
-    position: 'absolute',
+    position: "absolute",
 
     // Apply resizable calculations
     width: absoluteWidth,
@@ -372,22 +372,22 @@ const TimelineSubtitleSegment: React.FC<{
 
     background: `${theme.subtitle_segment_bg}`,
     border: `${theme.subtitle_segment_border}`,
-    borderRadius: '5px',
-    boxSizing: 'border-box',
+    borderRadius: "5px",
+    boxSizing: "border-box",
     zIndex: 1,
 
     cursor: isGrabbed ? "grabbing" : "grab",
 
     // Center text
-    display: 'flex',
-    alignItems: 'center',
+    display: "flex",
+    alignItems: "center",
   });
 
   const textStyle = css({
-    overflow: 'hidden',
+    overflow: "hidden",
     whiteSpace: "nowrap",
-    textOverflow: 'ellipsis',
-    padding: '8px',
+    textOverflow: "ellipsis",
+    padding: "8px",
     color: `${theme.subtitle_segment_text}`
   });
 
@@ -407,11 +407,11 @@ const TimelineSubtitleSegment: React.FC<{
         width={absoluteWidth}
         onResize={onResizeAbsolute}
         onResizeStop={onResizeStop}
-        // TODO: The 'e' handle is currently NOT WORKING CORRECTLY!
+        // TODO: The "e" handle is currently NOT WORKING CORRECTLY!
         //  The errounous behaviour can already be seens with a minimal
         //  draggable + resizable example.
         //  Fix most likely requires changes in one of those modules
-        resizeHandles={['w']}
+        resizeHandles={["w"]}
       >
         <div css={segmentStyle} ref={nodeRef} onClick={onClick} id="no-scrolling">
           <span css={textStyle}>{props.cue.text}</span>
@@ -438,14 +438,14 @@ const TimelineSubtitleSegment: React.FC<{
 //     let newTop = absoluteTop;
 //     const deltaHeight = size.height - absoluteHeight;
 //     const deltaWidth = size.width - absoluteWidth;
-//     if (handle[0] === 'n') {
+//     if (handle[0] === "n") {
 //       newTop -= deltaHeight;
-//     } else if (handle[0] === 's') {
+//     } else if (handle[0] === "s") {
 //       newTop += deltaHeight;
 //     }
-//     if (handle[handle.length - 1] === 'w') {
+//     if (handle[handle.length - 1] === "w") {
 //       newLeft -= deltaWidth;
-//     } else if (handle[handle.length - 1] === 'e') {
+//     } else if (handle[handle.length - 1] === "e") {
 //       newLeft += deltaWidth;
 //     }
 
@@ -461,7 +461,7 @@ const TimelineSubtitleSegment: React.FC<{
 //       height={absoluteHeight}
 //       width={absoluteWidth}
 //       onResize={onResizeAbsolute}
-//       resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}
+//       resizeHandles={["sw", "se", "nw", "ne", "w", "e", "n", "s"]}
 //     >
 //       <div
 //         // className="box"
@@ -498,14 +498,14 @@ const TimelineSubtitleSegment: React.FC<{
 //     let newTop = absoluteTop;
 //     const deltaHeight = size.height - absoluteHeight;
 //     const deltaWidth = size.width - absoluteWidth;
-//     if (handle[0] === 'n') {
+//     if (handle[0] === "n") {
 //       newTop -= deltaHeight;
-//     } else if (handle[0] === 's') {
+//     } else if (handle[0] === "s") {
 //       newTop += deltaHeight;
 //     }
-//     if (handle[handle.length - 1] === 'w') {
+//     if (handle[handle.length - 1] === "w") {
 //       newLeft -= deltaWidth;
-//     } else if (handle[handle.length - 1] === 'e') {
+//     } else if (handle[handle.length - 1] === "e") {
 //       newLeft += deltaWidth;
 //     }
 
@@ -533,7 +533,7 @@ const TimelineSubtitleSegment: React.FC<{
 //           height={absoluteHeight}
 //           width={absoluteWidth}
 //           onResize={onResizeAbsolute}
-//           resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}
+//           resizeHandles={["sw", "se", "nw", "ne", "w", "e", "n", "s"]}
 //         >
 //           <div style={ leStyle }>
 //             test
diff --git a/src/main/SubtitleVideoArea.tsx b/src/main/SubtitleVideoArea.tsx
index c27b37d7d..0a0545b4b 100644
--- a/src/main/SubtitleVideoArea.tsx
+++ b/src/main/SubtitleVideoArea.tsx
@@ -84,24 +84,24 @@ const SubtitleVideoArea: React.FC = () => {
   useEffect(() => {
     if (subtitle?.cues) {
       const serializedSubtitle = serializeSubtitle(subtitle?.cues);
-      setSubtitleUrl(window.URL.createObjectURL(new Blob([serializedSubtitle], { type: 'text/vtt' })));
+      setSubtitleUrl(window.URL.createObjectURL(new Blob([serializedSubtitle], { type: "text/vtt" })));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [subtitle?.cues]);
 
   const areaWrapper = css({
-    display: 'block',
-    height: '100%',
-    width: '40%',
+    display: "block",
+    height: "100%",
+    width: "40%",
   });
 
   const videoPlayerAreaStyle = css({
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: '100%',
-    // width: '40%',
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    height: "100%",
+    // width: "40%",
     ...(flexGapReplacementStyle(10, false)),
   });
 
@@ -198,7 +198,7 @@ const VideoSelectDropdown: React.FC<{
   }));
 
   const subtitleAddFormStyle = css({
-    width: '100%',
+    width: "100%",
   });
 
   return (
diff --git a/src/main/TheEnd.tsx b/src/main/TheEnd.tsx
index 4516ffd26..e467aad37 100644
--- a/src/main/TheEnd.tsx
+++ b/src/main/TheEnd.tsx
@@ -1,14 +1,14 @@
 import React from "react";
 
-import { css } from '@emotion/react';
+import { css } from "@emotion/react";
 
 import { LuCheckCircle, LuXCircle } from "react-icons/lu";
 
 import { useAppSelector } from "../redux/store";
-import { selectEndState } from '../redux/endSlice';
+import { selectEndState } from "../redux/endSlice";
 import { basicButtonStyle, flexGapReplacementStyle, navigationButtonStyle } from "../cssStyles";
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 import { useTheme } from "../themes";
 import { ThemedTooltip } from "./Tooltip";
 import { CallbackButton } from "./Finish";
@@ -25,36 +25,36 @@ const TheEnd: React.FC = () => {
   const endState = useAppSelector(selectEndState);
 
   const text = () => {
-    if (endState === 'discarded') {
+    if (endState === "discarded") {
       return t("theEnd.discarded-text");
-    } else if (endState === 'success') {
+    } else if (endState === "success") {
       return t("theEnd.info-text");
     }
   };
 
   const theEndStyle = css({
-    width: '100%',
-    height: 'calc(100% - 64px)',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
+    width: "100%",
+    height: "calc(100% - 64px)",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
     ...(flexGapReplacementStyle(20, false)),
   });
 
   const restartOrBackStyle = css({
     display: "flex",
-    flexDirection: 'row',
+    flexDirection: "row",
     ...(flexGapReplacementStyle(20, false)),
   });
 
   return (
     <div css={theEndStyle}>
-      {endState === 'discarded' ? <LuXCircle css={{ fontSize: 80 }} /> : <LuCheckCircle css={{ fontSize: 80 }} />}
+      {endState === "discarded" ? <LuXCircle css={{ fontSize: 80 }} /> : <LuCheckCircle css={{ fontSize: 80 }} />}
       <div>{text()}</div>
       <div css={restartOrBackStyle}>
         <CallbackButton />
-        {(endState === 'discarded') && <StartOverButton />}
+        {(endState === "discarded") && <StartOverButton />}
       </div>
     </div>
   );
diff --git a/src/main/Thumbnail.tsx b/src/main/Thumbnail.tsx
index 29f7969cd..e10e38724 100644
--- a/src/main/Thumbnail.tsx
+++ b/src/main/Thumbnail.tsx
@@ -32,7 +32,7 @@ import {
   setIsMuted,
   setVolume,
   setCurrentlyAt
-} from '../redux/videoSlice';
+} from "../redux/videoSlice";
 import { ThemedTooltip } from "./Tooltip";
 import VideoPlayers from "./VideoPlayers";
 import VideoControls from "./VideoControls";
@@ -80,7 +80,7 @@ const Thumbnail: React.FC = () => {
     }
 
     // Check if image
-    if (fileObj.type.split('/')[0] !== 'image') {
+    if (fileObj.type.split("/")[0] !== "image") {
       return;
     }
 
@@ -101,23 +101,23 @@ const Thumbnail: React.FC = () => {
   };
 
   const thumbnailStyle = css({
-    display: 'flex',
-    width: '100%',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
+    display: "flex",
+    width: "100%",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
   });
 
   const bottomStyle = css({
-    display: 'flex',
-    width: '100%',
-    flexDirection: 'column',
-    alignItems: 'center',
+    display: "flex",
+    width: "100%",
+    flexDirection: "column",
+    alignItems: "center",
   });
 
   return (
     <div css={thumbnailStyle}>
-      <div css={[titleStyle(theme), titleStyleBold(theme)]}>{t('thumbnail.title')}</div>
+      <div css={[titleStyle(theme), titleStyleBold(theme)]}>{t("thumbnail.title")}</div>
       <ThumbnailTable
         inputRefs={inputRefs}
         generateRefs={generateRefs}
@@ -171,12 +171,12 @@ const ThumbnailTable: React.FC<{
   const videoTracks = useAppSelector(selectVideos);
 
   const thumbnailTableStyle = css({
-    display: 'flex',
-    width: '100%',
-    flexDirection: 'row',
-    justifyContent: 'center',
+    display: "flex",
+    width: "100%",
+    flexDirection: "row",
+    justifyContent: "center",
     ...(flexGapReplacementStyle(10, false)),
-    paddingBottom: '20px',
+    paddingBottom: "20px",
   });
 
   const renderSingleOrMultiple = () => {
@@ -251,9 +251,9 @@ const ThumbnailTableRow: React.FC<{
     if (isNaN(thumbnailPriority)) {
       return "";
     } else if (thumbnailPriority === 0) {
-      return " - " + t('thumbnail.primary');
+      return " - " + t("thumbnail.primary");
     } else if (thumbnailPriority === 1) {
-      return " - " + t('thumbnail.secondary');
+      return " - " + t("thumbnail.secondary");
     } else if (thumbnailPriority < 0) {
       return "";
     } else {
@@ -291,20 +291,20 @@ const ThumbnailDisplayer: React.FC<{ track: Track; }> = ({ track }) => {
   const theme = useTheme();
 
   const generalStyle = css({
-    width: '100%',
-    maxWidth: '457px',
-    aspectRatio: '16/9',
+    width: "100%",
+    maxWidth: "457px",
+    aspectRatio: "16/9",
   });
 
   const imageStyle = css({
   });
 
   const placeholderStyle = css({
-    width: '100vw', // TODO: This is necessary to make the placeholder large enough, but prevents it from shrinking
-    backgroundColor: 'grey',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
+    width: "100vw", // TODO: This is necessary to make the placeholder large enough, but prevents it from shrinking
+    backgroundColor: "grey",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
     color: `${theme.text}`,
   });
 
@@ -313,13 +313,13 @@ const ThumbnailDisplayer: React.FC<{ track: Track; }> = ({ track }) => {
       {(track.thumbnailUri !== null && track.thumbnailUri !== undefined) ?
         // Thumbnail image
         <img src={track.thumbnailUri}
-          alt={t('thumbnail.previewImageAlt') + ": " + track.flavor.type}
+          alt={t("thumbnail.previewImageAlt") + ": " + track.flavor.type}
           css={[generalStyle, imageStyle]}
         />
         :
         // Placeholder
         <div css={[generalStyle, placeholderStyle]}>
-          <span>{t('thumbnail.noThumbnailAvailable')}</span>
+          <span>{t("thumbnail.noThumbnailAvailable")}</span>
         </div>
       }
     </>
@@ -358,32 +358,32 @@ const ThumbnailButtons: React.FC<{
   };
 
   const verticalLineStyle = css({
-    borderTop: '1px solid #DDD;',
-    width: '100%',
+    borderTop: "1px solid #DDD;",
+    width: "100%",
   });
 
   return (
     <div css={thumbnailButtonsStyle}>
       <ThumbnailButton
         handler={() => { generate(track, index); }}
-        text={t('thumbnail.buttonGenerate')}
-        tooltipText={t('thumbnail.buttonGenerate-tooltip')}
-        ariaLabel={t('thumbnail.buttonGenerate-tooltip-aria')}
+        text={t("thumbnail.buttonGenerate")}
+        tooltipText={t("thumbnail.buttonGenerate-tooltip")}
+        ariaLabel={t("thumbnail.buttonGenerate-tooltip-aria")}
         Icon={LuCamera}
         active={true}
       />
       <div css={verticalLineStyle} />
       <ThumbnailButton
         handler={() => { upload(index); }}
-        text={t('thumbnail.buttonUpload')}
-        tooltipText={t('thumbnail.buttonUpload-tooltip')}
-        ariaLabel={t('thumbnail.buttonUpload-tooltip-aria')}
+        text={t("thumbnail.buttonUpload")}
+        tooltipText={t("thumbnail.buttonUpload-tooltip")}
+        ariaLabel={t("thumbnail.buttonUpload-tooltip-aria")}
         Icon={LuUpload}
         active={true}
       />
       {/* Hidden input field for upload */}
       <input
-        style={{ display: 'none' }}
+        style={{ display: "none" }}
         ref={el => {
           inputRefs.current[index] = el;
         }}
@@ -397,9 +397,9 @@ const ThumbnailButtons: React.FC<{
         <>
           <ThumbnailButton
             handler={() => { setForOtherThumbnails(track.thumbnailUri); }}
-            text={t('thumbnail.buttonUseForOtherThumbnails')}
-            tooltipText={t('thumbnail.buttonUseForOtherThumbnails-tooltip')}
-            ariaLabel={t('thumbnail.buttonUseForOtherThumbnails-tooltip-aria')}
+            text={t("thumbnail.buttonUseForOtherThumbnails")}
+            tooltipText={t("thumbnail.buttonUseForOtherThumbnails-tooltip")}
+            ariaLabel={t("thumbnail.buttonUseForOtherThumbnails-tooltip-aria")}
             Icon={LuCopy}
             active={(track.thumbnailUri && track.thumbnailUri.startsWith("data") ? true : false)}
           />
@@ -408,9 +408,9 @@ const ThumbnailButtons: React.FC<{
       }
       <ThumbnailButton
         handler={() => { discard(track.id); }}
-        text={t('thumbnail.buttonDiscard')}
-        tooltipText={t('thumbnail.buttonDiscard-tooltip')}
-        ariaLabel={t('thumbnail.buttonDiscard-tooltip-aria')}
+        text={t("thumbnail.buttonDiscard")}
+        tooltipText={t("thumbnail.buttonDiscard-tooltip")}
+        ariaLabel={t("thumbnail.buttonDiscard-tooltip-aria")}
         Icon={LuXCircle}
         active={(track.thumbnailUri && track.thumbnailUri.startsWith("data") ? true : false)}
       />
@@ -474,28 +474,28 @@ const AffectAllRow: React.FC<{
   };
 
   const rowStyle = css({
-    display: 'flex',
-    flexDirection: 'row',
-    width: '100%',
-    height: '50px',
-    padding: '20px',
-    gap: '20px',
-    justifyContent: 'center',
-    alignItems: 'center',
+    display: "flex",
+    flexDirection: "row",
+    width: "100%",
+    height: "50px",
+    padding: "20px",
+    gap: "20px",
+    justifyContent: "center",
+    alignItems: "center",
   });
 
   const buttonStyle = css({
-    height: '100%',
-    minWidth: '200px',
+    height: "100%",
+    minWidth: "200px",
     boxShadow: `${theme.boxShadow}`,
     background: `${theme.element_bg}`,
   });
 
   return (
     <div css={rowStyle}>
-      <ThemedTooltip title={t('thumbnail.buttonGenerateAll-tooltip')}>
+      <ThemedTooltip title={t("thumbnail.buttonGenerateAll-tooltip")}>
         <div css={[basicButtonStyle(theme), buttonStyle]}
-          role="button" tabIndex={0} aria-label={t('thumbnail.buttonGenerateAll-tooltip-aria')}
+          role="button" tabIndex={0} aria-label={t("thumbnail.buttonGenerateAll-tooltip-aria")}
           onClick={() => {
             generateAll();
           }}
@@ -506,7 +506,7 @@ const AffectAllRow: React.FC<{
           }}
         >
           <LuCamera />
-          {t('thumbnail.buttonGenerateAll')}
+          {t("thumbnail.buttonGenerateAll")}
         </div>
       </ThemedTooltip>
     </div>
@@ -538,7 +538,7 @@ const ThumbnailTableSingleRow: React.FC<{
       <div css={thumbnailTableRowTitleStyle}>
         {t("thumbnailSimple.rowTitle")}
       </div>
-      <hr css={{ width: '100%' }}></hr>
+      <hr css={{ width: "100%" }}></hr>
       <div css={thumbnailTableRowRowStyle} key={index}>
         <ThumbnailDisplayer track={track} />
         <ThumbnailButtonsSimple
@@ -575,9 +575,9 @@ const ThumbnailButtonsSimple: React.FC<{
       {tracks.map((generateTrack: Track, generateIndex: number) => (
         <ThumbnailButton
           handler={() => { generate(track, generateIndex); }}
-          text={t('thumbnail.buttonGenerate') + " " + t("thumbnailSimple.from") + " " + generateTrack.flavor.type}
-          tooltipText={t('thumbnail.buttonGenerate-tooltip')}
-          ariaLabel={t('thumbnail.buttonGenerate-tooltip-aria')}
+          text={t("thumbnail.buttonGenerate") + " " + t("thumbnailSimple.from") + " " + generateTrack.flavor.type}
+          tooltipText={t("thumbnail.buttonGenerate-tooltip")}
+          ariaLabel={t("thumbnail.buttonGenerate-tooltip-aria")}
           Icon={LuCamera}
           active={true}
           key={generateIndex}
@@ -585,15 +585,15 @@ const ThumbnailButtonsSimple: React.FC<{
       ))}
       <ThumbnailButton
         handler={() => { upload(index); }}
-        text={t('thumbnail.buttonUpload')}
-        tooltipText={t('thumbnail.buttonUpload-tooltip')}
-        ariaLabel={t('thumbnail.buttonUpload-tooltip-aria')}
+        text={t("thumbnail.buttonUpload")}
+        tooltipText={t("thumbnail.buttonUpload-tooltip")}
+        ariaLabel={t("thumbnail.buttonUpload-tooltip-aria")}
         Icon={LuUpload}
         active={true}
       />
       {/* Hidden input field for upload */}
       <input
-        style={{ display: 'none' }}
+        style={{ display: "none" }}
         ref={el => {
           inputRefs.current[index] = el;
         }}
@@ -604,9 +604,9 @@ const ThumbnailButtonsSimple: React.FC<{
       />
       <ThumbnailButton
         handler={() => { discard(track.id); }}
-        text={t('thumbnail.buttonDiscard')}
-        tooltipText={t('thumbnail.buttonDiscard-tooltip')}
-        ariaLabel={t('thumbnail.buttonDiscard-tooltip-aria')}
+        text={t("thumbnail.buttonDiscard")}
+        tooltipText={t("thumbnail.buttonDiscard-tooltip")}
+        ariaLabel={t("thumbnail.buttonDiscard-tooltip-aria")}
         Icon={LuXCircle}
         active={(track.thumbnailUri && track.thumbnailUri.startsWith("data") ? true : false)}
       />
@@ -618,48 +618,48 @@ const ThumbnailButtonsSimple: React.FC<{
  * CSS shared between multi and simple display mode
  */
 const thumbnailTableRowStyle = (maxWidth: number) => css({
-  display: 'flex',
-  flexDirection: 'column',
-  width: '100%',
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
   maxWidth: `${maxWidth}px`,
 });
 
 const thumbnailTableRowTitleStyle = css({
-  textAlign: 'left',
-  fontSize: 'larger',
-  fontWeight: 'bold',
-  '&:first-letter': {
-    textTransform: 'capitalize',
+  textAlign: "left",
+  fontSize: "larger",
+  fontWeight: "bold",
+  "&:first-letter": {
+    textTransform: "capitalize",
   },
 });
 
 const thumbnailTableRowRowStyle = css({
-  display: 'flex',
-  flexDirection: 'row',
+  display: "flex",
+  flexDirection: "row",
   ...(flexGapReplacementStyle(20, true)),
 
-  justifyContent: 'space-around',
-  flexWrap: 'wrap',
+  justifyContent: "space-around",
+  flexWrap: "wrap",
 });
 
 const thumbnailButtonsStyle = css({
   // TODO: Avoid hard-coding max-width
   "@media (max-width: 1550px)": {
-    width: '100%',
+    width: "100%",
   },
-  display: 'flex',
-  flexDirection: 'column',
+  display: "flex",
+  flexDirection: "column",
 });
 
 const thumbnailButtonStyle = (active: boolean, theme: Theme) => [
   active ? basicButtonStyle(theme) : deactivatedButtonStyle,
   {
-    width: '100%',
-    height: '100%',
+    width: "100%",
+    height: "100%",
     background: `${theme.element_bg}`,
-    justifySelf: 'center',
-    alignSelf: 'center',
-    padding: '0px 4px'
+    justifySelf: "center",
+    alignSelf: "center",
+    padding: "0px 4px"
   }
 ];
 
diff --git a/src/main/Timeline.tsx b/src/main/Timeline.tsx
index e40786d4c..be1dbc1f6 100644
--- a/src/main/Timeline.tsx
+++ b/src/main/Timeline.tsx
@@ -1,30 +1,30 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from "react";
 
-import Draggable, { DraggableEventHandler } from 'react-draggable';
+import Draggable, { DraggableEventHandler } from "react-draggable";
 
-import { css } from '@emotion/react';
+import { css } from "@emotion/react";
 
 import { useAppDispatch, useAppSelector } from "../redux/store";
-import { Segment, httpRequestState } from '../types';
+import { Segment, httpRequestState } from "../types";
 import {
   selectSegments, selectActiveSegmentIndex, selectDuration, selectVideoURL, selectWaveformImages, setWaveformImages
-} from '../redux/videoSlice';
+} from "../redux/videoSlice";
 
 import { LuMenu, LuLoader } from "react-icons/lu";
 
 import useResizeObserver from "use-resize-observer";
 
-import { Waveform } from '../util/waveform';
-import { convertMsToReadableString } from '../util/utilityFunctions';
-import { KEYMAP, rewriteKeys } from '../globalKeys';
+import { Waveform } from "../util/waveform";
+import { convertMsToReadableString } from "../util/utilityFunctions";
+import { KEYMAP, rewriteKeys } from "../globalKeys";
 
-import { useTranslation } from 'react-i18next';
-import { ActionCreatorWithPayload } from '@reduxjs/toolkit';
-import { RootState } from '../redux/store';
+import { useTranslation } from "react-i18next";
+import { ActionCreatorWithPayload } from "@reduxjs/toolkit";
+import { RootState } from "../redux/store";
 import { useTheme } from "../themes";
-import { ThemedTooltip } from './Tooltip';
-import { useHotkeys } from 'react-hotkeys-hook';
-import { spinningStyle } from '../cssStyles';
+import { ThemedTooltip } from "./Tooltip";
+import { useHotkeys } from "react-hotkeys-hook";
+import { spinningStyle } from "../cssStyles";
 
 /**
  * A container for visualizing the cutting of the video, as well as for controlling
@@ -57,9 +57,9 @@ const Timeline: React.FC<{
   const { ref, width = 1 } = useResizeObserver<HTMLDivElement>();
 
   const timelineStyle = css({
-    position: 'relative',     // Need to set position for Draggable bounds to work
-    height: timelineHeight + 'px',
-    width: '100%',
+    position: "relative",     // Need to set position for Draggable bounds to work
+    height: timelineHeight + "px",
+    width: "100%",
   });
 
   // Update the current time based on the position clicked on the timeline
@@ -80,7 +80,7 @@ const Timeline: React.FC<{
         setCurrentlyAt={setCurrentlyAt}
         setIsPlaying={setIsPlaying}
       />
-      <div css={{ position: 'relative', height: timelineHeight + 'px' }} >
+      <div css={{ position: "relative", height: timelineHeight + "px" }} >
         <Waveforms timelineHeight={timelineHeight} />
         <SegmentsList
           timelineWidth={width}
@@ -215,15 +215,15 @@ export const Scrubber: React.FC<{
 
   const scrubberStyle = css({
     backgroundColor: `${theme.scrubber}`,
-    height: timelineHeight + 20 + 'px', //    TODO: CHECK IF height: '100%',
-    width: '1px',
-    position: 'absolute',
+    height: timelineHeight + 20 + "px", //    TODO: CHECK IF height: "100%",
+    width: "1px",
+    position: "absolute",
     zIndex: 2,
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    top: '-20px',
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    alignItems: "center",
+    top: "-20px",
   });
 
   const scrubberDragHandleStyle = css({
@@ -233,13 +233,13 @@ export const Scrubber: React.FC<{
     height: "20px",
     position: "relative",
     width: "20px",
-    borderRadius: '5px',
+    borderRadius: "5px",
     boxShadow: `${theme.boxShadow_tiles}`,
     "&:after": {
       borderTop: `10px solid ${theme.scrubber_handle}`,
-      borderLeft: '10px solid transparent',
-      borderRight: '10px solid transparent',
-      content: '""',
+      borderLeft: "10px solid transparent",
+      borderRight: "10px solid transparent",
+      content: "''",
       height: 0,
       left: 0,
       position: "absolute",
@@ -251,8 +251,8 @@ export const Scrubber: React.FC<{
   });
 
   const scrubberDragHandleIconStyle = css({
-    paddingLeft: '2px',
-    paddingTop: '2px',
+    paddingLeft: "2px",
+    paddingTop: "2px",
     color: `${theme.scrubber_icon}`,
   });
 
@@ -317,7 +317,7 @@ export const SegmentsList: React.FC<{
    */
   const bgColor = (deleted: boolean, active: boolean) => {
     if (!deleted && !active) {
-      return 'rgba(137, 137, 137, 0.4)';
+      return "rgba(137, 137, 137, 0.4)";
     } else if (deleted && !active) {
       return `repeating-linear-gradient(
               -35deg,
@@ -326,7 +326,7 @@ export const SegmentsList: React.FC<{
               rgba(255, 95, 95, 0.4) 2px,
               rgba(255, 95, 95, 0.4) 50px);`;
     } else if (!deleted && active) {
-      return 'rgba(78, 78, 78, 0.4)';
+      return "rgba(78, 78, 78, 0.4)";
     } else if (deleted && active) {
       return `repeating-linear-gradient(
               -35deg,
@@ -353,12 +353,12 @@ export const SegmentsList: React.FC<{
             tabIndex={tabable ? 0 : -1}
             css={{
               background: bgColor(segment.deleted, styleByActiveSegment ? activeSegmentIndex === index : false),
-              borderStyle: styleByActiveSegment ? (activeSegmentIndex === index ? 'dashed' : 'solid') : 'solid',
-              borderColor: 'white',
-              borderWidth: '1px',
-              boxSizing: 'border-box',
-              width: ((segment.end - segment.start) / duration) * 100 + '%',
-              height: timelineHeight + 'px',     // CHECK IF 100%
+              borderStyle: styleByActiveSegment ? (activeSegmentIndex === index ? "dashed" : "solid") : "solid",
+              borderColor: "white",
+              borderWidth: "1px",
+              boxSizing: "border-box",
+              width: ((segment.end - segment.start) / duration) * 100 + "%",
+              height: timelineHeight + "px",     // CHECK IF 100%
               zIndex: 1,
             }}>
           </div>
@@ -368,10 +368,10 @@ export const SegmentsList: React.FC<{
   };
 
   const segmentsStyle = css({
-    display: 'flex',
-    flexDirection: 'row',
-    // paddingTop: '10px',
-    height: '100%',
+    display: "flex",
+    flexDirection: "row",
+    // paddingTop: "10px",
+    height: "100%",
   });
 
   return (
@@ -399,26 +399,26 @@ export const Waveforms: React.FC<{ timelineHeight: number; }> = ({ timelineHeigh
   const [waveformWorkerError, setWaveformWorkerError] = useState<boolean>(false);
 
   const waveformDisplayTestStyle = css({
-    display: 'flex',
-    flexDirection: 'column',
+    display: "flex",
+    flexDirection: "column",
     position: "absolute" as const,
-    justifyContent: 'center',
-    ...(images.length <= 0) && { alignItems: 'center' },  // Only center during loading
-    width: '100%',
-    height: timelineHeight + 'px',   // CHECK IF     height: '100%',
-    // paddingTop: '10px',
+    justifyContent: "center",
+    ...(images.length <= 0) && { alignItems: "center" },  // Only center during loading
+    width: "100%",
+    height: timelineHeight + "px",   // CHECK IF     height: "100%",
+    // paddingTop: "10px",
     filter: `${theme.invert_wave}`,
     color: `${theme.inverted_text}`,
   });
 
   const waveformStyle = css({
     background: `${theme.waveform_bg}`,
-    borderRadius: '5px',
+    borderRadius: "5px",
   });
 
   // When the URLs to the videos are fetched, generate waveforms
   useEffect(() => {
-    if (videoURLStatus === 'success') {
+    if (videoURLStatus === "success") {
       if (images.length > 0) {
         return;
       }
@@ -441,7 +441,7 @@ export const Waveforms: React.FC<{ timelineHeight: number; }> = ({ timelineHeigh
 
           // Start waveform worker with blob
           const waveformWorker: any = new Waveform({
-            type: 'img', width: '2000', height: '230', samples: 100000, media: file
+            type: "img", width: "2000", height: "230", samples: 100000, media: file
           });
 
           waveformWorker.onerror = (error: string) => {
@@ -469,15 +469,15 @@ export const Waveforms: React.FC<{ timelineHeight: number; }> = ({ timelineHeigh
   const renderImages = () => {
     if (images.length > 0) {
       return (
-        <img alt="Waveform" src={images[0]} css={[waveformStyle, { minHeight: 0, height: '100%' }]}></img>
+        <img alt="Waveform" src={images[0]} css={[waveformStyle, { minHeight: 0, height: "100%" }]}></img>
         // images.map((image, index) =>
-        //   <img key={index} alt='Waveform' src={image ? image : ""} css={{minHeight: 0}}></img>
+        //   <img key={index} alt="Waveform" src={image ? image : ""} css={{minHeight: 0}}></img>
         // )
       );
     } else if (waveformWorkerError) {
       return (
         // Display a flatline
-        <div css={{ width: '100%' }}><hr /></div>
+        <div css={{ width: "100%" }}><hr /></div>
       );
     }
     else {
diff --git a/src/main/Tooltip.tsx b/src/main/Tooltip.tsx
index dcfacc001..be87d3eda 100644
--- a/src/main/Tooltip.tsx
+++ b/src/main/Tooltip.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React from "react";
 import { useTheme } from "../themes";
-import Tooltip, { TooltipProps } from '@mui/material/Tooltip';
+import Tooltip, { TooltipProps } from "@mui/material/Tooltip";
 
 export const ThemedTooltip = ({ className, ...props }: TooltipProps) => {
 
@@ -41,11 +41,11 @@ export const ThemedTooltip = ({ className, ...props }: TooltipProps) => {
         tooltip: {
           sx: {
             backgroundColor: `${theme.tooltip}`,
-            outline: '2px solid transparent',
+            outline: "2px solid transparent",
             color: `${theme.tooltip_text}`,
-            fontSize: '16px',
-            lineHeight: 'normal',
-            fontFamily: 'Roboto Flex Variable',
+            fontSize: "16px",
+            lineHeight: "normal",
+            fontFamily: "Roboto Flex Variable",
           }
         },
         arrow: {
diff --git a/src/main/TrackSelection.tsx b/src/main/TrackSelection.tsx
index a827e5480..778a07a4b 100644
--- a/src/main/TrackSelection.tsx
+++ b/src/main/TrackSelection.tsx
@@ -1,14 +1,14 @@
 import React from "react";
-import { css } from '@emotion/react';
+import { css } from "@emotion/react";
 
 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 { ReactComponent as TrashRestore } from "../img/trash-restore.svg";
+import ReactPlayer from "react-player";
 
-import { Track } from '../types';
+import { Track } from "../types";
 import { useAppDispatch, useAppSelector } from "../redux/store";
-import { selectVideos, setTrackEnabled } from '../redux/videoSlice';
+import { selectVideos, setTrackEnabled } from "../redux/videoSlice";
 import {
   backgroundBoxStyle,
   basicButtonStyle,
@@ -17,9 +17,9 @@ import {
   flexGapReplacementStyle,
   titleStyle,
   titleStyleBold
-} from '../cssStyles';
+} from "../cssStyles";
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 import { useTheme } from "../themes";
 import { ThemedTooltip } from "./Tooltip";
 
@@ -36,20 +36,20 @@ const TrackSelection: React.FC = () => {
   );
 
   const trackSelectionStyle = css({
-    display: 'flex',
-    width: 'auto',
-    height: '100%',
-    flexDirection: 'column',
-    alignItems: 'center',
+    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',
+    display: "flex",
+    width: "100%",
+    height: "100%",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
     ...(flexGapReplacementStyle(10, false)),
   });
 
@@ -69,7 +69,7 @@ const Header: React.FC = () => {
   const { t } = useTranslation();
   const theme = useTheme();
 
-  const description: string = t('trackSelection.title');
+  const description: string = t("trackSelection.title");
 
   return (
     <div css={[titleStyle(theme), titleStyleBold(theme)]}>
@@ -85,47 +85,47 @@ const TrackItem: React.FC<{ track: Track, enabledCount: number; }> = ({ track, e
 
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const header = track.flavor.type + ' '
-    + (track.video_stream.enabled ? ''
-      : `(${t('trackSelection.trackInactive', 'inactive')})`);
+  const header = track.flavor.type + " "
+    + (track.video_stream.enabled ? ""
+      : `(${t("trackSelection.trackInactive", "inactive")})`);
 
   const trackItemStyle = css({
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'left',
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "left",
   });
 
   const trackitemSubStyle = css({
-    display: 'flex',
-    flexDirection: 'row',
+    display: "flex",
+    flexDirection: "row",
     ...(flexGapReplacementStyle(20, true)),
 
-    justifyContent: 'space-around',
-    flexWrap: 'wrap',
+    justifyContent: "space-around",
+    flexWrap: "wrap",
   });
 
   const playerStyle = css({
-    aspectRatio: '16 / 9',
-    width: '100%',
-    maxWidth: '457px',
+    aspectRatio: "16 / 9",
+    width: "100%",
+    maxWidth: "457px",
   });
 
   const headerStyle = css({
-    fontWeight: 'bold',
-    fontSize: 'larger',
+    fontWeight: "bold",
+    fontSize: "larger",
     color: `${theme.text}`,
-    '&:first-letter': {
-      textTransform: 'capitalize',
+    "&:first-letter": {
+      textTransform: "capitalize",
     },
   });
 
   const buttonsStyle = css({
     // TODO: Avoid hard-coding max-width
     "@media (max-width: 1550px)": {
-      width: '100%',
+      width: "100%",
     },
-    display: 'flex',
-    flexDirection: 'column',
+    display: "flex",
+    flexDirection: "column",
   });
 
   // What state is the track in and can it be deactivated?
@@ -136,14 +136,14 @@ const TrackItem: React.FC<{ track: Track, enabledCount: number; }> = ({ track, e
   const deleteStatus = track.video_stream.enabled ? (enabledCount > 1 ? 0 : 1) : 2;
   const deleteEnabled = deleteStatus !== 1;
   const deleteText = [
-    t('trackSelection.deleteTrackText', 'Delete Track'),
-    t('trackSelection.cannotDeleteTrackText', 'Cannot Delete Track'),
-    t('trackSelection.restoreTrackText', 'Restore Track')
+    t("trackSelection.deleteTrackText", "Delete Track"),
+    t("trackSelection.cannotDeleteTrackText", "Cannot Delete Track"),
+    t("trackSelection.restoreTrackText", "Restore Track")
   ][deleteStatus];
   const deleteTooltip = [
-    t('trackSelection.deleteTrackTooltip', 'Do not encode and publish this track.'),
-    t('trackSelection.cannotDeleteTrackTooltip', 'Cannot remove this track from publication.'),
-    t('trackSelection.restoreTrackTooltip', 'Encode and publish this track.')
+    t("trackSelection.deleteTrackTooltip", "Do not encode and publish this track."),
+    t("trackSelection.cannotDeleteTrackTooltip", "Cannot remove this track from publication."),
+    t("trackSelection.restoreTrackTooltip", "Encode and publish this track.")
   ][deleteStatus];
   const deleteIcon = [LuTrash, LuTrash, TrashRestore][deleteStatus];
   const trackEnabledChange = () => {
@@ -161,7 +161,7 @@ const TrackItem: React.FC<{ track: Track, enabledCount: number; }> = ({ track, e
           width="unset"
           height="unset"
           css={playerStyle}
-          style={{ opacity: track.video_stream.enabled ? '1' : '0.5' }}
+          style={{ opacity: track.video_stream.enabled ? "1" : "0.5" }}
           url={track.uri}
         />
         <div css={buttonsStyle}>
@@ -193,11 +193,11 @@ const SelectButton: React.FC<selectButtonInterface> = ({ handler, text, Icon, to
   const buttonStyle = [
     active ? basicButtonStyle(theme) : deactivatedButtonStyle,
     {
-      padding: '16px',
-      maxHeight: '21px',
-      boxShadow: '',
+      padding: "16px",
+      maxHeight: "21px",
+      boxShadow: "",
       background: `${theme.element_bg}`,
-      textWrap: 'nowrap',
+      textWrap: "nowrap",
     }];
 
   const clickHandler = () => {
diff --git a/src/main/VideoControls.tsx b/src/main/VideoControls.tsx
index 495a14665..2ee319468 100644
--- a/src/main/VideoControls.tsx
+++ b/src/main/VideoControls.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { css } from '@emotion/react';
+import { css } from "@emotion/react";
 
 import { FaToggleOn, FaToggleOff } from "react-icons/fa";
 import { LuPlay, LuPause, LuVolume2, LuVolumeX } from "react-icons/lu";
@@ -8,13 +8,13 @@ import { LuPlay, LuPause, LuVolume2, LuVolumeX } from "react-icons/lu";
 import { useAppDispatch, useAppSelector } from "../redux/store";
 import {
   selectDuration,
-} from '../redux/videoSlice';
+} from "../redux/videoSlice";
 
-import { convertMsToReadableString } from '../util/utilityFunctions';
+import { convertMsToReadableString } from "../util/utilityFunctions";
 import { basicButtonStyle, flexGapReplacementStyle } from "../cssStyles";
 
 import { KEYMAP, rewriteKeys } from "../globalKeys";
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 
 import { RootState } from "../redux/store";
 import { ActionCreatorWithPayload } from "@reduxjs/toolkit";
@@ -55,14 +55,14 @@ const VideoControls: React.FC<{
   const videoControlsRowStyle = css({
     background: `${theme.background}`,
     outline: `5px solid ${theme.background}`, // Fake the box bigger than it actually is
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    overflow: 'hidden',
-    width: '100%',
-    paddingTop: '10px',
-    paddingBottom: '10px',
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    overflow: "hidden",
+    width: "100%",
+    paddingTop: "10px",
+    paddingBottom: "10px",
     ...(flexGapReplacementStyle(30, false)),
   });
 
@@ -128,20 +128,20 @@ const PreviewMode: React.FC<{
 
   const previewModeStyle = css({
     cursor: "pointer",
-    display: 'flex',
+    display: "flex",
     ...(flexGapReplacementStyle(10, false)),
-    justifyContent: 'center',
-    alignItems: 'center',
+    justifyContent: "center",
+    alignItems: "center",
   });
 
   const switchIconStyle = css({
     color: `${theme.background_preview_icon}`,
-    fontSize: '28px',
+    fontSize: "28px",
   });
 
   const previewModeTextStyle = (theme: Theme) => css({
-    display: 'inline-block',
-    flexWrap: 'nowrap',
+    display: "inline-block",
+    flexWrap: "nowrap",
     color: `${theme.text}`
   });
 
@@ -199,20 +199,20 @@ const PlayButton: React.FC<{
   useHotkeys(KEYMAP.videoPlayer.play.key, () => switchIsPlaying(), { preventDefault: true }, [isPlaying]);
 
   const playButtonStyle = css({
-    justifySelf: 'center',
-    outline: 'none',
+    justifySelf: "center",
+    outline: "none",
     color: `${theme.icon_color}`,
 
     background: `${theme.background_play_icon}`,
-    borderRadius: '50%',
-    width: '50px',
-    height: '50px',
+    borderRadius: "50%",
+    width: "50px",
+    height: "50px",
     boxShadow: `${theme.boxShadow_tiles}`,
   });
 
   const playIconStyle = css({
     fontSize: 24,
-    paddingLeft: '3px',
+    paddingLeft: "3px",
   });
 
   return (
@@ -251,12 +251,12 @@ const TimeDisplay: React.FC<{
   const theme = useTheme();
 
   const timeTextStyle = (theme: Theme) => css({
-    display: 'inline-block',
+    display: "inline-block",
     color: `${theme.text}`
   });
 
   return (
-    <div css={{ display: 'flex', flexDirection: 'row', gap: '5px' }}>
+    <div css={{ display: "flex", flexDirection: "row", gap: "5px" }}>
       <ThemedTooltip title={t("video.current-time-tooltip")}>
         <time css={timeTextStyle(theme)}
           tabIndex={0} role="timer" aria-label={t("video.time-aria") + ": " + convertMsToReadableString(currentlyAt)}>
@@ -324,15 +324,15 @@ const VolumeSlider: React.FC<{
   };
 
   const volumeStyle = css({
-    display: 'flex',
-    flexDirection: 'row',
-    gap: '15px',
-    justifyContent: 'center',
-    alignItems: 'center'
+    display: "flex",
+    flexDirection: "row",
+    gap: "15px",
+    justifyContent: "center",
+    alignItems: "center"
   });
 
   const sliderStyle = css({
-    width: '80px',
+    width: "80px",
     "& .MuiSlider-thumb": {
       color: `${theme.slider_thumb_color}`,
       "&:hover, &.Mui-focusVisible, &.Mui-active": {
@@ -349,7 +349,7 @@ const VolumeSlider: React.FC<{
 
   const volumeIconStyle = css({
     fontSize: 24,
-    paddingLeft: '3px',
+    paddingLeft: "3px",
   });
 
   return (
diff --git a/src/main/VideoPlayers.tsx b/src/main/VideoPlayers.tsx
index 1c6258652..032ff3d69 100644
--- a/src/main/VideoPlayers.tsx
+++ b/src/main/VideoPlayers.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect, useImperativeHandle } from "react";
 
-import { css } from '@emotion/react';
+import { css } from "@emotion/react";
 
 import { useAppDispatch, useAppSelector } from "../redux/store";
 import {
@@ -19,22 +19,22 @@ import {
   setClickTriggered,
   selectClickTriggered,
   setCurrentlyAt
-} from '../redux/videoSlice';
+} from "../redux/videoSlice";
 
-import ReactPlayer, { Config } from 'react-player';
+import ReactPlayer, { Config } from "react-player";
 
-import { roundToDecimalPlace } from '../util/utilityFunctions';
+import { roundToDecimalPlace } from "../util/utilityFunctions";
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 
-import { sleep } from './../util/utilityFunctions';
+import { sleep } from "./../util/utilityFunctions";
 
 import { RootState } from "../redux/store";
 import { ActionCreatorWithPayload } from "@reduxjs/toolkit";
 
 import { useTheme } from "../themes";
 
-import { backgroundBoxStyle, flexGapReplacementStyle } from '../cssStyles';
+import { backgroundBoxStyle, flexGapReplacementStyle } from "../cssStyles";
 import { BaseReactPlayerProps } from "react-player/base";
 
 const VideoPlayers: React.FC<{
@@ -51,14 +51,14 @@ const VideoPlayers: React.FC<{
   const videoCount = useAppSelector(selectVideoCount);
 
   const videoPlayerAreaStyle = css({
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    width: widthInPercent + '%',
-    borderRadius: '5px',
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    width: widthInPercent + "%",
+    borderRadius: "5px",
     ...(flexGapReplacementStyle(10, false)),
 
-    maxHeight: maxHeightInPixel + 'px',
+    maxHeight: maxHeightInPixel + "px",
   });
 
   // Initialize video players
@@ -210,7 +210,7 @@ export const VideoPlayer = React.forwardRef(
       // Restart the video from the beginning when at the end
       if (isPrimary && currentlyAt >= duration) {
         dispatch(setCurrentlyAt(0));
-        // Flip-flop the "isPlaying" switch, or else the video won't start playing
+        // Flip-flop the "isPlaying" switch, or else the video won"t start playing
         dispatch(setIsPlaying(false));
         dispatch(setIsPlaying(true));
       }
@@ -251,7 +251,7 @@ export const VideoPlayer = React.forwardRef(
     }, [isAspectRatioUpdated, ready]);
 
     // Callback specifically for the subtitle editor view
-    // When changing urls while the player is playing, don't reset to 0
+    // When changing urls while the player is playing, don"t reset to 0
     // (due to onProgressCallback resetting to 0),
     // but keep the current currentlyAt
     useEffect(() => {
@@ -266,7 +266,7 @@ export const VideoPlayer = React.forwardRef(
       // Only trigger workaround in Firefox, as it will cause issues in Chrome
       /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
       // @ts-ignore
-      if (typeof InstallTrigger !== 'undefined') {
+      if (typeof InstallTrigger !== "undefined") {
         reAddTrack();
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -276,11 +276,11 @@ export const VideoPlayer = React.forwardRef(
       file: {
         attributes: {
           // Skip player when navigating page with keyboard
-          tabIndex: '-1',
+          tabIndex: "-1",
           crossOrigin: "anonymous"    // allow thumbnail generation
         },
         tracks: [
-          { kind: 'subtitles', src: subtitleUrl, srcLang: 'en', default: true, label: 'I am irrelevant' }
+          { kind: "subtitles", src: subtitleUrl, srcLang: "en", default: true, label: "I am irrelevant" }
         ]
       }
     };
@@ -293,10 +293,10 @@ export const VideoPlayer = React.forwardRef(
    * https://github.com/CookPete/react-player/issues/490
    */
     function reAddTrack() {
-      const video = document.querySelector('video');
+      const video = document.querySelector("video");
 
       if (video) {
-        const oldTracks = video.querySelectorAll('track');
+        const oldTracks = video.querySelectorAll("track");
         oldTracks.forEach(oldTrack => {
           video.removeChild(oldTrack);
         });
@@ -305,7 +305,7 @@ export const VideoPlayer = React.forwardRef(
       if (playerConfig && playerConfig.file && playerConfig.file.tracks) {
         // eslint-disable-next-line array-callback-return
         playerConfig.file.tracks.map((t, trackIdx) => {
-          const track = document.createElement('track');
+          const track = document.createElement("track");
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           track.kind = t.kind!;
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -316,26 +316,26 @@ export const VideoPlayer = React.forwardRef(
           track.default = t.default!;
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           track.src = t.src!;
-          track.track.mode = 'showing';    // Because the load callback may sometimes not execute properly
-          track.addEventListener('error', (_e: Event) => {
+          track.track.mode = "showing";    // Because the load callback may sometimes not execute properly
+          track.addEventListener("error", (_e: Event) => {
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             console.warn(`Cannot load track ${t.src!}`);
           });
-          track.addEventListener('load', (e: Event) => {
+          track.addEventListener("load", (e: Event) => {
             const textTrack = e.currentTarget as HTMLTrackElement;
             if (textTrack) {
               if (t.default === true) {
-                textTrack.track.mode = 'showing';
+                textTrack.track.mode = "showing";
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                video!.textTracks[trackIdx].mode = 'showing'; // thanks Firefox
+                video!.textTracks[trackIdx].mode = "showing"; // thanks Firefox
               } else {
-                textTrack.track.mode = 'hidden';
+                textTrack.track.mode = "hidden";
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                video!.textTracks[trackIdx].mode = 'hidden'; // thanks Firefox
+                video!.textTracks[trackIdx].mode = "hidden"; // thanks Firefox
               }
             }
           });
-          const video = document.querySelector('video');
+          const video = document.querySelector("video");
           if (video) {
             video.appendChild(track);
           }
@@ -355,7 +355,7 @@ export const VideoPlayer = React.forwardRef(
         const canvasContext = canvas.getContext("2d");
         if (canvasContext !== null) {
           canvasContext.drawImage(video, 0, 0);
-          return canvas.toDataURL('image/png');
+          return canvas.toDataURL("image/png");
         }
       },
       getWidth() {
@@ -366,19 +366,19 @@ export const VideoPlayer = React.forwardRef(
     const errorBoxStyle = css({
       ...(!errorState) && { display: "none" },
       borderColor: `${theme.error}`,
-      borderStyle: 'dashed',
-      fontWeight: 'bold',
-      padding: '10px',
+      borderStyle: "dashed",
+      fontWeight: "bold",
+      padding: "10px",
     });
 
     const reactPlayerStyle = css({
-      aspectRatio: '16 / 9',    // Hard-coded for now because there are problems with updating this value at runtime
+      aspectRatio: "16 / 9",    // Hard-coded for now because there are problems with updating this value at runtime
 
-      overflow: 'hidden', // Required for borderRadius to show
-      ...(first) && { borderTopLeftRadius: '5px' },
-      ...(first) && { borderBottomLeftRadius: '5px' },
-      ...(last) && { borderTopRightRadius: '5px' },
-      ...(last) && { borderBottomRightRadius: '5px' },
+      overflow: "hidden", // Required for borderRadius to show
+      ...(first) && { borderTopLeftRadius: "5px" },
+      ...(first) && { borderBottomLeftRadius: "5px" },
+      ...(last) && { borderTopRightRadius: "5px" },
+      ...(last) && { borderBottomRightRadius: "5px" },
     });
 
     const render = () => {
diff --git a/src/main/WorkflowConfiguration.tsx b/src/main/WorkflowConfiguration.tsx
index f8f365bf7..2c6ddaf85 100644
--- a/src/main/WorkflowConfiguration.tsx
+++ b/src/main/WorkflowConfiguration.tsx
@@ -1,13 +1,13 @@
 import React, { useEffect, useState } from "react";
 
-import { css } from '@emotion/react';
+import { css } from "@emotion/react";
 import {
   basicButtonStyle,
   backOrContinueStyle,
   errorBoxStyle,
   flexGapReplacementStyle,
   spinningStyle
-} from '../cssStyles';
+} from "../cssStyles";
 
 import { LuLoader, LuCheck, LuAlertCircle, LuChevronLeft, LuDatabase, LuMoreHorizontal } from "react-icons/lu";
 
@@ -17,13 +17,13 @@ import {
   selectTracks,
   setHasChanges as videoSetHasChanges,
   selectSelectedWorkflowId
-} from '../redux/videoSlice';
-import { postVideoInformationWithWorkflow, selectStatus, selectError } from '../redux/workflowPostAndProcessSlice';
+} from "../redux/videoSlice";
+import { postVideoInformationWithWorkflow, selectStatus, selectError } from "../redux/workflowPostAndProcessSlice";
 
-import { PageButton } from './Finish';
+import { PageButton } from "./Finish";
 import { setEnd } from "../redux/endSlice";
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 import {
   postMetadata,
   selectPostError,
@@ -48,10 +48,10 @@ const WorkflowConfiguration: React.FC = () => {
   const theme = useTheme();
 
   const workflowConfigurationStyle = css({
-    display: 'flex',
-    flexDirection: 'column' as const,
-    alignItems: 'center',
-    padding: '20px',
+    display: "flex",
+    flexDirection: "column" as const,
+    alignItems: "center",
+    padding: "20px",
     ...(flexGapReplacementStyle(30, false)),
   });
 
@@ -101,8 +101,8 @@ export const SaveAndProcessButton: React.FC<{ text: string; }> = ({ text }) => {
 
   // Let users leave the page without warning after a successful save
   useEffect(() => {
-    if (workflowStatus === 'success' && metadataStatus === 'success') {
-      dispatch(setEnd({ hasEnded: true, value: 'success' }));
+    if (workflowStatus === "success" && metadataStatus === "success") {
+      dispatch(setEnd({ hasEnded: true, value: "success" }));
       dispatch(videoSetHasChanges(false));
       dispatch(metadataSetHasChanges(false));
     }
@@ -131,7 +131,7 @@ export const SaveAndProcessButton: React.FC<{ text: string; }> = ({ text }) => {
 
   // Subsequent save request
   useEffect(() => {
-    if (metadataStatus === 'success' && metadataSaveStarted) {
+    if (metadataStatus === "success" && metadataSaveStarted) {
       setMetadataSaveStarted(false);
       dispatch(postVideoInformationWithWorkflow({
         segments: segments,
@@ -146,20 +146,20 @@ export const SaveAndProcessButton: React.FC<{ text: string; }> = ({ text }) => {
   // Update based on current fetching status
   let Icon = LuDatabase;
   let spin = false;
-  if (workflowStatus === 'failed' || metadataStatus === 'failed') {
+  if (workflowStatus === "failed" || metadataStatus === "failed") {
     Icon = LuAlertCircle;
     spin = false;
-  } else if (workflowStatus === 'success' && metadataStatus === 'success') {
+  } else if (workflowStatus === "success" && metadataStatus === "success") {
     Icon = LuCheck;
     spin = false;
-  } else if (workflowStatus === 'loading' || metadataStatus === 'loading') {
+  } else if (workflowStatus === "loading" || metadataStatus === "loading") {
     Icon = LuLoader;
     spin = true;
 
   }
 
   const saveButtonStyle = css({
-    padding: '16px',
+    padding: "16px",
     boxShadow: `${theme.boxShadow}`,
     background: `${theme.element_bg}`,
   });
diff --git a/src/main/WorkflowSelection.tsx b/src/main/WorkflowSelection.tsx
index 1f562cb4f..45292f022 100644
--- a/src/main/WorkflowSelection.tsx
+++ b/src/main/WorkflowSelection.tsx
@@ -1,13 +1,13 @@
 import React, { useEffect } from "react";
 
-import { css } from '@emotion/react';
-import { backOrContinueStyle, errorBoxStyle, flexGapReplacementStyle } from '../cssStyles';
+import { css } from "@emotion/react";
+import { backOrContinueStyle, errorBoxStyle, flexGapReplacementStyle } from "../cssStyles";
 
 import { useAppDispatch, useAppSelector } from "../redux/store";
-import { selectWorkflows, setSelectedWorkflowIndex } from '../redux/videoSlice';
-import { selectFinishState, selectPageNumber } from '../redux/finishSlice';
+import { selectWorkflows, setSelectedWorkflowIndex } from "../redux/videoSlice";
+import { selectFinishState, selectPageNumber } from "../redux/finishSlice";
 
-import { PageButton } from './Finish';
+import { PageButton } from "./Finish";
 import { LuChevronLeft } from "react-icons/lu";
 import { SaveAndProcessButton } from "./WorkflowConfiguration";
 import { selectStatus, selectError } from "../redux/workflowPostAndProcessSlice";
@@ -16,7 +16,7 @@ import { httpRequestState, Workflow } from "../types";
 import { SaveButton } from "./Save";
 import { EmotionJSX } from "@emotion/react/types/jsx-namespace";
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 import { Trans } from "react-i18next";
 import { FormControlLabel, Radio, RadioGroup } from "@mui/material";
 import { useTheme } from "../themes";
@@ -47,21 +47,21 @@ const WorkflowSelection: React.FC = () => {
   const saveError = useAppSelector(saveSelectError);
 
   const workflowSelectionStyle = css({
-    padding: '20px',
-    display: (finishState === "Start processing" && pageNumber === 1) ? 'flex' : 'none',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
+    padding: "20px",
+    display: (finishState === "Start processing" && pageNumber === 1) ? "flex" : "none",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
     ...(flexGapReplacementStyle(30, false)),
   });
 
   const workflowSelectionSelectionStyle = css({
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'left',
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "left",
     ...(flexGapReplacementStyle(20, false)),
-    flexWrap: 'wrap',
-    maxHeight: '50vh',
+    flexWrap: "wrap",
+    maxHeight: "50vh",
   });
 
   useEffect(() => {
@@ -178,16 +178,16 @@ const WorkflowButton: React.FC<{
   // Note: Styling the Radio Button is done in WorkflowSelectRadio
 
   const labelStyle = css({
-    display: 'flex',
-    flexDirection: 'column',
-    maxWidth: '500px',
-    paddingTop: '2px',
+    display: "flex",
+    flexDirection: "column",
+    maxWidth: "500px",
+    paddingTop: "2px",
   });
 
   const headerStyle = css({
-    width: '100%',
-    padding: '5px 0px',
-    fontSize: 'larger',
+    width: "100%",
+    padding: "5px 0px",
+    fontSize: "larger",
   });
 
   return (
@@ -207,7 +207,7 @@ const WorkflowSelectRadio: React.FC = props => {
   const theme = useTheme();
 
   const style = css({
-    alignSelf: 'start',
+    alignSelf: "start",
     color: `${theme.text}`,
     "&$checked": {
       color: `${theme.text}`
diff --git a/src/redux/endSlice.ts b/src/redux/endSlice.ts
index 7729d3c93..d168c3c08 100644
--- a/src/redux/endSlice.ts
+++ b/src/redux/endSlice.ts
@@ -1,20 +1,20 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
 interface end {
   end: boolean,
-  value: 'success' | 'discarded',
+  value: "success" | "discarded",
 }
 
 const initialState: end = {
   end: false,
-  value: 'success',
+  value: "success",
 };
 
 /**
  * Slice for the main menu state
  */
 export const endSlice = createSlice({
-  name: 'endState',
+  name: "endState",
   initialState,
   reducers: {
     setEnd: (state, action: PayloadAction<{ hasEnded: end["end"], value: end["value"]; }>) => {
diff --git a/src/redux/errorSlice.ts b/src/redux/errorSlice.ts
index e42200bf1..5540b5219 100644
--- a/src/redux/errorSlice.ts
+++ b/src/redux/errorSlice.ts
@@ -1,4 +1,4 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { IconType } from "react-icons";
 
 interface error {
@@ -21,7 +21,7 @@ const initialState: error = {
  * Slice for the error page state
  */
 export const errorSlice = createSlice({
-  name: 'errorState',
+  name: "errorState",
   initialState,
   reducers: {
     setError: (state, action: PayloadAction<{
diff --git a/src/redux/finishSlice.ts b/src/redux/finishSlice.ts
index a5cf73450..c1b25bf57 100644
--- a/src/redux/finishSlice.ts
+++ b/src/redux/finishSlice.ts
@@ -1,4 +1,4 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
 export interface finish {
   value: "Save changes" | "Start processing" | "Discard changes" | undefined,
@@ -14,7 +14,7 @@ const initialState: finish = {
  * Slice for the main menu state
  */
 export const finishSlice = createSlice({
-  name: 'finishState',
+  name: "finishState",
   initialState,
   reducers: {
     setState: (state, action: PayloadAction<finish["value"]>) => {
diff --git a/src/redux/mainMenuSlice.ts b/src/redux/mainMenuSlice.ts
index 0f21b20e6..b9093cc85 100644
--- a/src/redux/mainMenuSlice.ts
+++ b/src/redux/mainMenuSlice.ts
@@ -1,6 +1,6 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
-import { MainMenuStateNames } from '../types';
+import { MainMenuStateNames } from "../types";
 
 export interface mainMenu {
   value: MainMenuStateNames,
@@ -14,7 +14,7 @@ const initialState: mainMenu = {
  * Slice for the main menu state
  */
 export const mainMenuSlice = createSlice({
-  name: 'mainMenuState',
+  name: "mainMenuState",
   initialState,
   reducers: {
     setState: (state, action: PayloadAction<mainMenu["value"]>) => {
@@ -26,7 +26,7 @@ export const mainMenuSlice = createSlice({
 export const { setState } = mainMenuSlice.actions;
 
 // The function below is called a selector and allows us to select a value from
-// the state. Selectors can also be defined inline where they're used instead of
+// the state. Selectors can also be defined inline where they"re used instead of
 // in the slice file. For example: `useSelector((state) => state.counter.value)`
 export const selectMainMenuState = (state: { mainMenuState: { value: mainMenu["value"]; }; }) =>
   state.mainMenuState.value;
diff --git a/src/redux/metadataSlice.ts b/src/redux/metadataSlice.ts
index 591f5af5f..7bd868469 100644
--- a/src/redux/metadataSlice.ts
+++ b/src/redux/metadataSlice.ts
@@ -1,8 +1,8 @@
-import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
-import { client } from '../util/client';
+import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
+import { client } from "../util/client";
 
-import { httpRequestState } from '../types';
-import { settings } from '../config';
+import { httpRequestState } from "../types";
+import { settings } from "../config";
 
 export interface Catalog {
   fields: MetadataField[],
@@ -49,26 +49,26 @@ interface metadata {
 }
 
 interface postRequestState {
-  postStatus: 'idle' | 'loading' | 'success' | 'failed',
+  postStatus: "idle" | "loading" | "success" | "failed",
   postError: string | undefined,
-  postErrorReason: 'unknown',
+  postErrorReason: "unknown",
 }
 
-// TODO: Create an 'httpRequestState' array or something
+// TODO: Create an "httpRequestState" array or something
 const initialState: metadata & httpRequestState & postRequestState = {
   catalogs: [],
   hasChanges: false,
 
-  status: 'idle',
+  status: "idle",
   error: undefined,
-  errorReason: 'unknown',
+  errorReason: "unknown",
 
-  postStatus: 'idle',
+  postStatus: "idle",
   postError: undefined,
-  postErrorReason: 'unknown',
+  postErrorReason: "unknown",
 };
 
-export const fetchMetadata = createAsyncThunk('metadata/fetchMetadata', async () => {
+export const fetchMetadata = createAsyncThunk("metadata/fetchMetadata", async () => {
   if (!settings.id) {
     throw new Error("Missing media package identifier");
   }
@@ -77,7 +77,7 @@ export const fetchMetadata = createAsyncThunk('metadata/fetchMetadata', async ()
   return JSON.parse(response);
 });
 
-export const postMetadata = createAsyncThunk('metadata/postMetadata', async (_, { getState }) => {
+export const postMetadata = createAsyncThunk("metadata/postMetadata", async (_, { getState }) => {
   if (!settings.id) {
     throw new Error("Missing media package identifier");
   }
@@ -96,7 +96,7 @@ export const postMetadata = createAsyncThunk('metadata/postMetadata', async (_,
  * Slice for managing a post request for saving current changes and starting a workflow
  */
 const metadataSlice = createSlice({
-  name: 'metadataState',
+  name: "metadataState",
   initialState,
   reducers: {
     setFieldValue: (state, action: PayloadAction<{ catalogIndex: number, fieldIndex: number, value: string; }>) => {
@@ -110,36 +110,36 @@ const metadataSlice = createSlice({
       state.hasChanges = action.payload;
     },
     resetPostRequestState: state => {
-      state.postStatus = 'idle';
+      state.postStatus = "idle";
     }
   },
   extraReducers: builder => {
     builder.addCase(
       fetchMetadata.pending, (state, _action) => {
-        state.status = 'loading';
+        state.status = "loading";
       });
     builder.addCase(
       fetchMetadata.fulfilled, (state, action) => {
         state.catalogs = action.payload;
 
-        state.status = 'success';
+        state.status = "success";
       });
     builder.addCase(
       fetchMetadata.rejected, (state, action) => {
-        state.status = 'failed';
+        state.status = "failed";
         state.error = action.error.message;
       });
     builder.addCase(
       postMetadata.pending, (state, _action) => {
-        state.postStatus = 'loading';
+        state.postStatus = "loading";
       });
     builder.addCase(
       postMetadata.fulfilled, (state, _action) => {
-        state.postStatus = 'success';
+        state.postStatus = "success";
       });
     builder.addCase(
       postMetadata.rejected, (state, action) => {
-        state.postStatus = 'failed';
+        state.postStatus = "failed";
         state.postError = action.error.message;
       });
   }
diff --git a/src/redux/store.ts b/src/redux/store.ts
index 55e4c9fe7..c428c854e 100644
--- a/src/redux/store.ts
+++ b/src/redux/store.ts
@@ -1,14 +1,14 @@
-import { configureStore } from '@reduxjs/toolkit';
-import mainMenuStateReducer from './mainMenuSlice';
-import finishStateReducer from './finishSlice';
-import videoReducer from './videoSlice';
-import workflowPostReducer from './workflowPostSlice';
-import workflowPostAndProcessReducer from './workflowPostAndProcessSlice';
-import endReducer from './endSlice';
-import metadataReducer from './metadataSlice';
-import subtitleReducer from './subtitleSlice';
-import errorReducer from './errorSlice';
-import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import { configureStore } from "@reduxjs/toolkit";
+import mainMenuStateReducer from "./mainMenuSlice";
+import finishStateReducer from "./finishSlice";
+import videoReducer from "./videoSlice";
+import workflowPostReducer from "./workflowPostSlice";
+import workflowPostAndProcessReducer from "./workflowPostAndProcessSlice";
+import endReducer from "./endSlice";
+import metadataReducer from "./metadataSlice";
+import subtitleReducer from "./subtitleSlice";
+import errorReducer from "./errorSlice";
+import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
 
 export const store = configureStore({
   reducer: {
diff --git a/src/redux/subtitleSlice.ts b/src/redux/subtitleSlice.ts
index c0034a7d2..7da7f40e2 100644
--- a/src/redux/subtitleSlice.ts
+++ b/src/redux/subtitleSlice.ts
@@ -1,8 +1,8 @@
-import { Segment, SubtitleCue, SubtitlesInEditor } from './../types';
-import { createSlice, nanoid, PayloadAction } from '@reduxjs/toolkit';
-import { roundToDecimalPlace } from '../util/utilityFunctions';
-import type { AppDispatch, RootState } from '../redux/store';
-import { video } from './videoSlice';
+import { Segment, SubtitleCue, SubtitlesInEditor } from "./../types";
+import { createSlice, nanoid, PayloadAction } from "@reduxjs/toolkit";
+import { roundToDecimalPlace } from "../util/utilityFunctions";
+import type { AppDispatch, RootState } from "../redux/store";
+import { video } from "./videoSlice";
 
 export interface subtitle {
   isDisplayEditView: boolean;    // Should the edit view be displayed
@@ -51,7 +51,7 @@ const updateCurrentlyAt = (state: subtitle, milliseconds: number) => {
  * Slice for the subtitle editor state
  */
 export const subtitleSlice = createSlice({
-  name: 'subtitleState',
+  name: "subtitleState",
   initialState,
   reducers: {
     setIsDisplayEditView: (state, action: PayloadAction<subtitle["isDisplayEditView"]>) => {
@@ -111,7 +111,7 @@ export const subtitleSlice = createSlice({
         text: action.payload.text,
         startTime: Math.round(startTime),
         endTime: Math.round(action.payload.endTime),
-        tree: { children: [{ type: 'text', value: action.payload.text }] }
+        tree: { children: [{ type: "text", value: action.payload.text }] }
       };
 
       // Trigger a callback in the list component that focuses the newly added element
@@ -230,7 +230,7 @@ export const selectFocusSegmentTriggered2 =
   (state: { subtitleState: { focusSegmentTriggered2: subtitle["focusSegmentTriggered2"]; }; }) =>
     state.subtitleState.focusSegmentTriggered2;
 // Hardcoding this value to achieve a desired size for the video player
-// TODO: Don't hardcode this value, instead make the video player component more flexible
+// TODO: Don"t hardcode this value, instead make the video player component more flexible
 export const selectAspectRatio = (_state: { subtitleState: { aspectRatios: subtitle["aspectRatios"]; }; }) =>
   50;
 
diff --git a/src/redux/videoSlice.ts b/src/redux/videoSlice.ts
index 982bb9fdf..4f0a2948d 100644
--- a/src/redux/videoSlice.ts
+++ b/src/redux/videoSlice.ts
@@ -1,9 +1,9 @@
-import { createSlice, nanoid, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
-import { client } from '../util/client';
+import { createSlice, nanoid, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
+import { client } from "../util/client";
 
-import { Segment, httpRequestState, Track, Workflow, SubtitlesFromOpencast } from '../types';
-import { roundToDecimalPlace } from '../util/utilityFunctions';
-import { settings } from '../config';
+import { Segment, httpRequestState, Track, Workflow, SubtitlesFromOpencast } from "../types";
+import { roundToDecimalPlace } from "../util/utilityFunctions";
+import { settings } from "../config";
 
 export interface video {
   isPlaying: boolean,             // Are videos currently playing?
@@ -62,26 +62,26 @@ export const initialState: video & httpRequestState = {
   videoURLs: [],
   videoCount: 0,
   duration: 0,
-  title: '',
+  title: "",
   presenters: [],
   workflows: [],
 
   lockingActive: false,
   lockRefresh: null,
   lockState: false,
-  lock: { uuid: '', user: '' },
+  lock: { uuid: "", user: "" },
 
-  status: 'idle',
+  status: "idle",
   error: undefined,
-  errorReason: 'unknown',
+  errorReason: "unknown",
 };
 
-export const fetchVideoInformation = createAsyncThunk('video/fetchVideoInformation', async () => {
+export const fetchVideoInformation = createAsyncThunk("video/fetchVideoInformation", async () => {
   if (!settings.id) {
     throw new Error("Missing media package identifier");
   }
 
-  // const response = await client.get('https://legacy.opencast.org/admin-ng/tools/ID-dual-stream-demo/editor.json')
+  // const response = await client.get("https://legacy.opencast.org/admin-ng/tools/ID-dual-stream-demo/editor.json")
   const response = await client.get(`${settings.opencast.url}/editor/${settings.id}/edit.json`);
   return JSON.parse(response);
 });
@@ -106,7 +106,7 @@ const updateCurrentlyAt = (state: video, milliseconds: number) => {
  * Treats the multitude of videos that may exist as one video
  */
 const videoSlice = createSlice({
-  name: 'videoState',
+  name: "videoState",
   initialState,
   reducers: {
     setTrackEnabled: (state, action) => {
@@ -170,7 +170,7 @@ const videoSlice = createSlice({
       state.lockState = action.payload;
     },
     cut: state => {
-      // If we're exactly between two segments, we can't split the current segment
+      // If we"re exactly between two segments, we can"t split the current segment
       if (state.segments[state.activeSegmentIndex].start === state.currentlyAt ||
         state.segments[state.activeSegmentIndex].end === state.currentlyAt) {
         return;
@@ -220,15 +220,15 @@ const videoSlice = createSlice({
   extraReducers: builder => {
     builder.addCase(
       fetchVideoInformation.pending, (state, _action) => {
-        state.status = 'loading';
+        state.status = "loading";
       });
     builder.addCase(
       fetchVideoInformation.fulfilled, (state, action) => {
-        state.status = 'success';
+        state.status = "success";
 
         if (action.payload.workflow_active) {
-          state.status = 'failed';
-          state.errorReason = 'workflowActive';
+          state.status = "failed";
+          state.errorReason = "workflowActive";
           state.error = "This event is being processed. Please wait until the process is finished.";
         }
         state.tracks = action.payload.tracks
@@ -236,7 +236,7 @@ const videoSlice = createSlice({
             return a.thumbnailPriority - b.thumbnailPriority;
           }).map((track: Track) => {
             if (action.payload.local && settings.opencast.local) {
-              console.debug('Replacing track URL');
+              console.debug("Replacing track URL");
               track.uri = track.uri.replace(/https?:\/\/[^/]*/g, window.location.origin);
             }
             return track;
@@ -264,7 +264,7 @@ const videoSlice = createSlice({
       });
     builder.addCase(
       fetchVideoInformation.rejected, (state, action) => {
-        state.status = 'failed';
+        state.status = "failed";
         state.error = action.error.message;
       });
   }
diff --git a/src/redux/workflowPostAndProcessSlice.ts b/src/redux/workflowPostAndProcessSlice.ts
index 4000f5b3f..6e44e6f94 100644
--- a/src/redux/workflowPostAndProcessSlice.ts
+++ b/src/redux/workflowPostAndProcessSlice.ts
@@ -1,18 +1,18 @@
-import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
-import { client } from '../util/client';
-import { PostAndProcessEditArgument, httpRequestState } from '../types';
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import { client } from "../util/client";
+import { PostAndProcessEditArgument, httpRequestState } from "../types";
 
-import { convertSegments } from './workflowPostSlice';
-import { settings } from '../config';
+import { convertSegments } from "./workflowPostSlice";
+import { settings } from "../config";
 
 const initialState: httpRequestState = {
-  status: 'idle',
+  status: "idle",
   error: undefined,
-  errorReason: 'unknown',
+  errorReason: "unknown",
 };
 
 export const postVideoInformationWithWorkflow =
-  createAsyncThunk('video/postVideoInformationWithWorkflow', async (argument: PostAndProcessEditArgument) => {
+  createAsyncThunk("video/postVideoInformationWithWorkflow", async (argument: PostAndProcessEditArgument) => {
     if (!settings.id) {
       throw new Error("Missing media package identifier");
     }
@@ -33,22 +33,22 @@ export const postVideoInformationWithWorkflow =
  * TODO: Create a wrapper for this and workflowPostAndProcessSlice
  */
 const workflowPostAndProcessSlice = createSlice({
-  name: 'workflowPostAndProcessState',
+  name: "workflowPostAndProcessState",
   initialState,
   reducers: {
   },
   extraReducers: builder => {
     builder.addCase(
       postVideoInformationWithWorkflow.pending, (state, _action) => {
-        state.status = 'loading';
+        state.status = "loading";
       });
     builder.addCase(
       postVideoInformationWithWorkflow.fulfilled, (state, _action) => {
-        state.status = 'success';
+        state.status = "success";
       });
     builder.addCase(
       postVideoInformationWithWorkflow.rejected, (state, action) => {
-        state.status = 'failed';
+        state.status = "failed";
         state.error = action.error.message;
       });
   }
diff --git a/src/redux/workflowPostSlice.ts b/src/redux/workflowPostSlice.ts
index 8a8975d7a..779428108 100644
--- a/src/redux/workflowPostSlice.ts
+++ b/src/redux/workflowPostSlice.ts
@@ -1,16 +1,16 @@
-import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
-import { client } from '../util/client';
-import { Segment, PostEditArgument, httpRequestState } from '../types';
-import { settings } from '../config';
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import { client } from "../util/client";
+import { Segment, PostEditArgument, httpRequestState } from "../types";
+import { settings } from "../config";
 
 const initialState: httpRequestState = {
-  status: 'idle',
+  status: "idle",
   error: undefined,
-  errorReason: 'unknown',
+  errorReason: "unknown",
 };
 
 export const postVideoInformation =
-  createAsyncThunk('video/postVideoInformation', async (argument: PostEditArgument) => {
+  createAsyncThunk("video/postVideoInformation", async (argument: PostEditArgument) => {
     if (!settings.id) {
       throw new Error("Missing media package id");
     }
@@ -30,25 +30,25 @@ export const postVideoInformation =
  * TODO: Create a wrapper for this and workflowPostAndProcessSlice
  */
 const workflowPostSlice = createSlice({
-  name: 'workflowPostState',
+  name: "workflowPostState",
   initialState,
   reducers: {
     resetPostRequestState: state => {
-      state.status = 'idle';
+      state.status = "idle";
     }
   },
   extraReducers: builder => {
     builder.addCase(
       postVideoInformation.pending, (state, _action) => {
-        state.status = 'loading';
+        state.status = "loading";
       });
     builder.addCase(
       postVideoInformation.fulfilled, (state, _action) => {
-        state.status = 'success';
+        state.status = "success";
       });
     builder.addCase(
       postVideoInformation.rejected, (state, action) => {
-        state.status = 'failed';
+        state.status = "failed";
         state.error = action.error.message;
       });
   }
diff --git a/src/setupTests.ts b/src/setupTests.ts
index 8f2609b7b..1dd407a63 100644
--- a/src/setupTests.ts
+++ b/src/setupTests.ts
@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";
diff --git a/src/themes.ts b/src/themes.ts
index 84abb8297..7ac7a090f 100644
--- a/src/themes.ts
+++ b/src/themes.ts
@@ -72,29 +72,29 @@ export const lightMode: Theme = {
   background: COLORS.neutral10,
   menu_background: COLORS.neutral05,
   text: COLORS.neutral90,
-  error: '#ed1741',
+  error: "#ed1741",
   element_bg: COLORS.neutral05,
   multiValue: COLORS.neutral15,
   focused: COLORS.neutral15,
   focus_text: COLORS.neutral90,
   selected: COLORS.neutral25,
-  disabled: 'rgba(0, 0, 0, 0.55)',
+  disabled: "rgba(0, 0, 0, 0.55)",
   menuBorder: `1px solid ${COLORS.neutral30}`,
   boxShadow: `0 0 2px 2px ${COLORS.neutral30}`,
-  boxShadow_tiles: '0 5px 10px 0px rgba(150, 150, 150, 0.5)',
+  boxShadow_tiles: "0 5px 10px 0px rgba(150, 150, 150, 0.5)",
   singleKey_bg: COLORS.neutral10,
   singleKey_border: COLORS.neutral20,
-  singleKey_boxShadow: `0 2px 2px 0px rgba(150, 150, 150, 0.2)`,
-  invert_wave: 'invert(0%)',
-  // for "Generating waveform" text: in lightMode it's not inverted, so it has to be black
+  singleKey_boxShadow: "0 2px 2px 0px rgba(150, 150, 150, 0.2)",
+  invert_wave: "invert(0%)",
+  // for "Generating waveform" text: in lightMode it"s not inverted, so it has to be black
   inverted_text: COLORS.neutral90,
   tooltip: COLORS.neutral80,
   tooltip_text: COLORS.neutral05,
-  element_outline: '2px solid transparent',
+  element_outline: "2px solid transparent",
   selected_text: COLORS.neutral90,
   dropdown_border: `1px solid ${COLORS.neutral40}`,
-  menuButton_outline: '2px solid transparent',
-  button_outline: 'none',
+  menuButton_outline: "2px solid transparent",
+  button_outline: "none",
   button_color: COLORS.neutral10,
   indicator_color: COLORS.neutral60,
   icon_color: COLORS.neutral05,
@@ -105,12 +105,12 @@ export const lightMode: Theme = {
   background_play_icon: COLORS.neutral70,
   background_preview_icon: COLORS.neutral70,
   // All this just to turn the black part of the waveform image blue. Generated with: https://isotropic.co/tool/hex-color-to-css-filter/
-  waveform_filter: 'invert(44%) sepia(8%) saturate(3893%) hue-rotate(169deg) brightness(99%) contrast(90%)',
-  waveform_bg: '',
+  waveform_filter: "invert(44%) sepia(8%) saturate(3893%) hue-rotate(169deg) brightness(99%) contrast(90%)",
+  waveform_bg: "",
   scrubber: COLORS.neutral60,
   scrubber_handle: COLORS.neutral05,
   scrubber_icon: COLORS.neutral60,
-  subtitle_segment_bg: 'rgba(0, 0, 0, 0.4)',
+  subtitle_segment_bg: "rgba(0, 0, 0, 0.4)",
   subtitle_segment_border: `1px solid ${COLORS.neutral80}`,
   subtitle_segment_text: COLORS.neutral05,
   header_bg: COLORS.neutral60,
@@ -118,7 +118,7 @@ export const lightMode: Theme = {
   header_button_hover_bg: COLORS.neutral70,
   metadata_highlight: COLORS.neutral50,
   clock_bg: COLORS.neutral15,
-  clock_border: '2px solid transparent',
+  clock_border: "2px solid transparent",
   clock_hands: COLORS.neutral50,
   clock_focus: COLORS.neutral90,
   digit_selected: COLORS.neutral90,
@@ -132,43 +132,43 @@ export const darkMode: Theme = {
   background: COLORS.neutral10,
   menu_background: COLORS.neutral05,
   text: COLORS.neutral90,
-  error: 'rgba(237, 23, 65, 0.8)',
+  error: "rgba(237, 23, 65, 0.8)",
   element_bg: COLORS.neutral05,
   multiValue: COLORS.neutral15,
   focused: COLORS.neutral15,
   focus_text: COLORS.neutral90,
   selected: COLORS.neutral25,
-  disabled: 'rgba(255, 255, 255, 0.5)',
+  disabled: "rgba(255, 255, 255, 0.5)",
   menuBorder: `1px solid ${COLORS.neutral30}`,
   boxShadow: `0 0 5px ${COLORS.neutral05}`,
-  boxShadow_tiles: '0 5px 10px 0px rgba(0, 0, 0, 0.3)',
-  singleKey_bg: 'linear-gradient(180deg, rgba(40,40,40,1) 0%, rgba(30,30,30,1) 100%)',
+  boxShadow_tiles: "0 5px 10px 0px rgba(0, 0, 0, 0.3)",
+  singleKey_bg: "linear-gradient(180deg, rgba(40,40,40,1) 0%, rgba(30,30,30,1) 100%)",
   singleKey_border: COLORS.neutral20,
-  singleKey_boxShadow: `0 2px 2px 0px rgba(0, 0, 0, 1.0)`,
-  invert_wave: 'invert(100%)',
+  singleKey_boxShadow: "0 2px 2px 0px rgba(0, 0, 0, 1.0)",
+  invert_wave: "invert(100%)",
   inverted_text: COLORS.neutral90,
   tooltip: COLORS.neutral80,
   tooltip_text: COLORS.neutral05,
-  element_outline: '2px solid transparent',
+  element_outline: "2px solid transparent",
   selected_text: COLORS.neutral90,
   dropdown_border: `1px solid ${COLORS.neutral40}`,
-  menuButton_outline: '2px solid transparent',
-  button_outline: '0px solid transparent',
+  menuButton_outline: "2px solid transparent",
+  button_outline: "0px solid transparent",
   button_color: COLORS.neutral20,
   indicator_color: COLORS.neutral60,
-  icon_color: 'rgba(255, 255, 255, 0.87)',
+  icon_color: "rgba(255, 255, 255, 0.87)",
   slider_thumb_color: COLORS.neutral70,
-  slider_thumb_shadow: '0 0 0 8px rgba(255, 255, 255, 0.2)',
+  slider_thumb_shadow: "0 0 0 8px rgba(255, 255, 255, 0.2)",
   slider_track_color: COLORS.neutral90,
   background_finish_menu_icon: COLORS.neutral15,
   background_play_icon: COLORS.neutral70,
   background_preview_icon: COLORS.neutral70,
-  waveform_filter: 'invert(11%)',
-  waveform_bg: '#fff',
+  waveform_filter: "invert(11%)",
+  waveform_bg: "#fff",
   scrubber: COLORS.neutral60,
   scrubber_handle: COLORS.neutral70,
   scrubber_icon: COLORS.neutral20,
-  subtitle_segment_bg: 'rgba(0, 0, 0, 0.4)',
+  subtitle_segment_bg: "rgba(0, 0, 0, 0.4)",
   subtitle_segment_border: `1px solid ${COLORS.neutral80}`,
   subtitle_segment_text: COLORS.neutral90,
   header_bg: COLORS.neutral20,
@@ -176,7 +176,7 @@ export const darkMode: Theme = {
   header_button_hover_bg: COLORS.neutral10,
   metadata_highlight: COLORS.neutral50,
   clock_bg: COLORS.neutral15,
-  clock_border: '2px solid transparent',
+  clock_border: "2px solid transparent",
   clock_hands: COLORS.neutral50,
   clock_focus: COLORS.neutral90,
   digit_selected: COLORS.neutral90,
@@ -187,113 +187,113 @@ export const darkMode: Theme = {
 };
 
 export const highContrastDarkMode: Theme = {
-  background: '#000',
-  menu_background: '#000',
-  text: '#fff',
-  error: '#ED1741',
-  element_bg: 'none',
-  multiValue: '#c4c4c4',
-  focused: '#a6ffea',
-  focus_text: '#000',
-  selected: '#fff',
-  disabled: 'rgba(255, 255, 255, 0.6)',
-  menuBorder: '2px solid #fff',
-  boxShadow: '0 0 0 rgba(255, 255, 255, 0.3)',
-  boxShadow_tiles: '0 0 0 rgba(255, 255, 255, 0.3)',
-  singleKey_bg: 'none',
-  singleKey_border: '#fff',
-  singleKey_boxShadow: `0 2px 2px 0px rgba(150, 150, 150, 0.2)`,
-  invert_wave: 'invert(100%)',
-  inverted_text: '#000',
-  tooltip: '#fff',
-  tooltip_text: '#000',
-  element_outline: '2px solid #fff',
-  selected_text: '#000',
-  dropdown_border: '2px solid #fff',
-  menuButton_outline: '2px solid transparent',
-  button_outline: '2px solid #a6ffea',
-  button_color: '#a6ffea',
-  indicator_color: '#a6ffea',
-  icon_color: '#000',
-  slider_thumb_color: '#fff',
-  slider_thumb_shadow: '0 0 0 8px rgba(166, 255, 234, 0.8)',
-  slider_track_color: '#fff',
-  background_finish_menu_icon: '#000',
-  background_play_icon: '#fff',
-  background_preview_icon: '#fff',
-  waveform_filter: 'invert(100%)',
-  waveform_bg: '#80B8AC',
-  scrubber: '#fff',
-  scrubber_handle: '#fff',
-  scrubber_icon: '#000',
-  subtitle_segment_bg: 'none',
-  subtitle_segment_border: '2px solid #fff',
-  subtitle_segment_text: '#fff',
-  header_bg: '#000',
-  header_text: '#fff',
-  header_button_hover_bg: '#000',
-  metadata_highlight: 'rgb(38, 132, 255)',
-  clock_bg: '#000',
-  clock_border: '2px solid #a6ffea',
-  clock_hands: '#fff',
-  clock_focus: '#000',
-  digit_selected: '#000',
-  text_shadow: '2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000,' +
-    ' 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000',
+  background: "#000",
+  menu_background: "#000",
+  text: "#fff",
+  error: "#ED1741",
+  element_bg: "none",
+  multiValue: "#c4c4c4",
+  focused: "#a6ffea",
+  focus_text: "#000",
+  selected: "#fff",
+  disabled: "rgba(255, 255, 255, 0.6)",
+  menuBorder: "2px solid #fff",
+  boxShadow: "0 0 0 rgba(255, 255, 255, 0.3)",
+  boxShadow_tiles: "0 0 0 rgba(255, 255, 255, 0.3)",
+  singleKey_bg: "none",
+  singleKey_border: "#fff",
+  singleKey_boxShadow: "0 2px 2px 0px rgba(150, 150, 150, 0.2)",
+  invert_wave: "invert(100%)",
+  inverted_text: "#000",
+  tooltip: "#fff",
+  tooltip_text: "#000",
+  element_outline: "2px solid #fff",
+  selected_text: "#000",
+  dropdown_border: "2px solid #fff",
+  menuButton_outline: "2px solid transparent",
+  button_outline: "2px solid #a6ffea",
+  button_color: "#a6ffea",
+  indicator_color: "#a6ffea",
+  icon_color: "#000",
+  slider_thumb_color: "#fff",
+  slider_thumb_shadow: "0 0 0 8px rgba(166, 255, 234, 0.8)",
+  slider_track_color: "#fff",
+  background_finish_menu_icon: "#000",
+  background_play_icon: "#fff",
+  background_preview_icon: "#fff",
+  waveform_filter: "invert(100%)",
+  waveform_bg: "#80B8AC",
+  scrubber: "#fff",
+  scrubber_handle: "#fff",
+  scrubber_icon: "#000",
+  subtitle_segment_bg: "none",
+  subtitle_segment_border: "2px solid #fff",
+  subtitle_segment_text: "#fff",
+  header_bg: "#000",
+  header_text: "#fff",
+  header_button_hover_bg: "#000",
+  metadata_highlight: "rgb(38, 132, 255)",
+  clock_bg: "#000",
+  clock_border: "2px solid #a6ffea",
+  clock_hands: "#fff",
+  clock_focus: "#000",
+  digit_selected: "#000",
+  text_shadow: "2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000," +
+    " 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000",
 };
 
 export const highContrastLightMode: Theme = {
-  background: 'snow',
-  menu_background: 'snow',
-  text: '#000',
-  error: '#a5102d',
-  element_bg: 'none',
-  multiValue: '#2e2e2e',
-  focused: '#000099',
-  focus_text: '#fff',
-  selected: '#4646b5',
-  disabled: 'rgba(0, 0, 0, 0.6)',
-  menuBorder: '2px solid #000',
-  boxShadow: '0 0 0 rgba(0, 0, 0, 0.3)',
-  boxShadow_tiles: '0 0 0 rgba(0, 0, 0, 0.3)',
-  singleKey_bg: 'none',
-  singleKey_border: '#000',
-  singleKey_boxShadow: `0 2px 2px 0px rgba(150, 150, 150, 0.2)`,
-  invert_wave: 'invert(0%)',
-  inverted_text: '#fff',
-  tooltip: '#000',
-  tooltip_text: '#fff',
-  element_outline: '2px solid #000',
-  selected_text: '#fff',
-  dropdown_border: '2px solid #000',
-  menuButton_outline: '2px solid transparent',
-  button_outline: '3px solid #000099',
-  button_color: '#000099',
-  indicator_color: '#000099',
-  icon_color: '#fff',
-  slider_thumb_color: '#000',
-  slider_thumb_shadow: '0 0 0 8px rgba(0, 0, 153, 0.6)',
-  slider_track_color: '#000',
-  background_finish_menu_icon: 'snow',
-  background_play_icon: '#000',
-  background_preview_icon: '#000',
-  waveform_filter: 'invert(0%)',
-  waveform_bg: '#fff',
-  scrubber: '#000',
-  scrubber_handle: '#000',
-  scrubber_icon: '#fff',
-  subtitle_segment_bg: 'none',
-  subtitle_segment_border: '2px solid #000',
-  subtitle_segment_text: '#000',
-  header_bg: '#000',
-  header_text: '#fff',
-  header_button_hover_bg: '#000',
-  metadata_highlight: 'rgb(38, 132, 255)',
-  clock_bg: 'snow',
-  clock_border: '2px solid #000099',
-  clock_hands: '#4646b5',
-  clock_focus: '#fff',
-  digit_selected: '#fff',
-  text_shadow: '2px 0 snow, -2px 0 snow, 0 2px snow, 0 -2px snow,' +
-    ' 1px 1px snow, -1px -1px snow, 1px -1px snow, -1px 1px snow',
+  background: "snow",
+  menu_background: "snow",
+  text: "#000",
+  error: "#a5102d",
+  element_bg: "none",
+  multiValue: "#2e2e2e",
+  focused: "#000099",
+  focus_text: "#fff",
+  selected: "#4646b5",
+  disabled: "rgba(0, 0, 0, 0.6)",
+  menuBorder: "2px solid #000",
+  boxShadow: "0 0 0 rgba(0, 0, 0, 0.3)",
+  boxShadow_tiles: "0 0 0 rgba(0, 0, 0, 0.3)",
+  singleKey_bg: "none",
+  singleKey_border: "#000",
+  singleKey_boxShadow: "0 2px 2px 0px rgba(150, 150, 150, 0.2)",
+  invert_wave: "invert(0%)",
+  inverted_text: "#fff",
+  tooltip: "#000",
+  tooltip_text: "#fff",
+  element_outline: "2px solid #000",
+  selected_text: "#fff",
+  dropdown_border: "2px solid #000",
+  menuButton_outline: "2px solid transparent",
+  button_outline: "3px solid #000099",
+  button_color: "#000099",
+  indicator_color: "#000099",
+  icon_color: "#fff",
+  slider_thumb_color: "#000",
+  slider_thumb_shadow: "0 0 0 8px rgba(0, 0, 153, 0.6)",
+  slider_track_color: "#000",
+  background_finish_menu_icon: "snow",
+  background_play_icon: "#000",
+  background_preview_icon: "#000",
+  waveform_filter: "invert(0%)",
+  waveform_bg: "#fff",
+  scrubber: "#000",
+  scrubber_handle: "#000",
+  scrubber_icon: "#fff",
+  subtitle_segment_bg: "none",
+  subtitle_segment_border: "2px solid #000",
+  subtitle_segment_text: "#000",
+  header_bg: "#000",
+  header_text: "#fff",
+  header_button_hover_bg: "#000",
+  metadata_highlight: "rgb(38, 132, 255)",
+  clock_bg: "snow",
+  clock_border: "2px solid #000099",
+  clock_hands: "#4646b5",
+  clock_focus: "#fff",
+  digit_selected: "#fff",
+  text_shadow: "2px 0 snow, -2px 0 snow, 0 2px snow, 0 -2px snow," +
+    " 1px 1px snow, -1px -1px snow, 1px -1px snow, -1px 1px snow",
 };
diff --git a/src/types.ts b/src/types.ts
index 8b29b8680..06232b9f3 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -86,7 +86,7 @@ export enum MainMenuStateNames {
 }
 
 export interface httpRequestState {
-  status: 'idle' | 'loading' | 'success' | 'failed',
+  status: "idle" | "loading" | "success" | "failed",
   error: string | undefined,
-  errorReason: 'unknown' | 'workflowActive'
+  errorReason: "unknown" | "workflowActive"
 }
diff --git a/src/util/client.js b/src/util/client.js
index c666ca0fd..9675fa66b 100644
--- a/src/util/client.js
+++ b/src/util/client.js
@@ -1,13 +1,13 @@
 // A tiny wrapper around fetch(), borrowed from
 // https://kentcdodds.com/blog/replace-axios-with-a-simple-custom-fetch-wrapper
 
-import { settings } from '../config';
+import { settings } from "../config";
 
 /**
  * Client I stole this from a react tutorial
  */
 export async function client(endpoint, { body, ...customConfig } = {}) {
-  const headers = { 'Content-Type': 'application/json' };
+  const headers = { "Content-Type": "application/json" };
 
   // Attempt Http basic auth if we got credentials
   let authHeaders = {};
@@ -15,11 +15,11 @@ export async function client(endpoint, { body, ...customConfig } = {}) {
     const encoded = btoa(unescape(encodeURIComponent(
       settings.opencast.name + ":" + settings.opencast.password
     )));
-    authHeaders = { 'Authorization': `Basic ${encoded}` };
+    authHeaders = { "Authorization": `Basic ${encoded}` };
   }
 
   const config = {
-    method: body ? 'POST' : 'GET',
+    method: body ? "POST" : "GET",
     ...customConfig,
     headers: {
       ...headers,
@@ -29,7 +29,7 @@ export async function client(endpoint, { body, ...customConfig } = {}) {
   };
 
   if (body) {
-    if (config.headers['Content-Type'].includes("urlencoded")) {
+    if (config.headers["Content-Type"].includes("urlencoded")) {
       config.body = body;
     } else {
       config.body = JSON.stringify(body);
@@ -48,7 +48,7 @@ export async function client(endpoint, { body, ...customConfig } = {}) {
     }
 
     if (response.ok) {
-      data = text.length ? text : '';
+      data = text.length ? text : "";
       return data;
     }
     throw new Error(response.statusText);
@@ -61,7 +61,7 @@ export async function client(endpoint, { body, ...customConfig } = {}) {
 }
 
 client.get = function (endpoint, customConfig = {}) {
-  return client(endpoint, { ...customConfig, method: 'GET' });
+  return client(endpoint, { ...customConfig, method: "GET" });
 };
 
 client.post = function (endpoint, body, customConfig = {}) {
@@ -69,5 +69,5 @@ client.post = function (endpoint, body, customConfig = {}) {
 };
 
 client.delete = function (endpoint, customConfig = {}) {
-  return client(endpoint, { ...customConfig, method: 'DELETE' });
+  return client(endpoint, { ...customConfig, method: "DELETE" });
 };
diff --git a/src/util/utilityFunctions.ts b/src/util/utilityFunctions.ts
index 0cf2e8f66..7b39a2f56 100644
--- a/src/util/utilityFunctions.ts
+++ b/src/util/utilityFunctions.ts
@@ -1,7 +1,7 @@
-import { nanoid } from '@reduxjs/toolkit';
-import { WebVTTParser, WebVTTSerializer } from 'webvtt-parser';
-import { ExtendedSubtitleCue, SubtitleCue } from '../types';
-import { useEffect, useRef } from 'react';
+import { nanoid } from "@reduxjs/toolkit";
+import { WebVTTParser, WebVTTSerializer } from "webvtt-parser";
+import { ExtendedSubtitleCue, SubtitleCue } from "../types";
+import { useEffect, useRef } from "react";
 
 export const roundToDecimalPlace = (num: number, decimalPlace: number) => {
   const decimalFactor = Math.pow(10, decimalPlace);
@@ -52,15 +52,15 @@ export function checkFlexGapSupport() {
   }
 
   // Create a flex container with row-gap set
-  const flex = document.createElement('div');
-  flex.style.display = 'flex';
-  flex.style.flexDirection = 'column';
-  flex.style.rowGap = '1px';
-  flex.style.position = 'absolute';
+  const flex = document.createElement("div");
+  flex.style.display = "flex";
+  flex.style.flexDirection = "column";
+  flex.style.rowGap = "1px";
+  flex.style.position = "absolute";
 
   // Create two, elements inside it
-  flex.appendChild(document.createElement('div'));
-  flex.appendChild(document.createElement('div'));
+  flex.appendChild(document.createElement("div"));
+  flex.appendChild(document.createElement("div"));
 
   // Append to the DOM (needed to obtain scrollHeight)
   document.body.appendChild(flex);
@@ -100,7 +100,7 @@ export function serializeSubtitle(subtitle: SubtitleCue[]) {
 
       // The serializer has a bug where some of the attributes like alignment are written to the VTT file
       // as `alignment: undefined` if they are not set. This then causes illegal parsing exceptions with the
-      // parser. That's why we set some acceptable defaults here.
+      // parser. That"s why we set some acceptable defaults here.
       alignment: "center",
       direction: "horizontal",
       lineAlign: "start",
@@ -127,13 +127,13 @@ export function parseSubtitle(subtitle: string): SubtitleCue[] {
   // - Cons: Parses timestamps in seconds, Maybe not maintained anymore
   // https://github.com/gsantiago/subtitle.js
   // - Pros: Parses styles, can also parse SRT, actively maintained
-  // - Cons: Uses node streaming library, can't polyfill without ejecting CreateReactApp
+  // - Cons: Uses node streaming library, can"t polyfill without ejecting CreateReactApp
   // TODO: Parse caption
   const parser = new WebVTTParser();
-  const tree = parser.parse(subtitle, 'metadata');
+  const tree = parser.parse(subtitle, "metadata");
   if (tree.errors.length !== 0) {
 
-    // state.status = 'failed'
+    // state.status = "failed"
     const errors = [];
     for (const er of tree.errors) {
       errors.push("On line: " + er.line + " col: " + er.col + " error occured: " + er.message);
diff --git a/src/util/waveform.js b/src/util/waveform.js
index c6867f231..8ce38aad8 100644
--- a/src/util/waveform.js
+++ b/src/util/waveform.js
@@ -6,23 +6,23 @@
 
 /* eslint-disable space-before-function-paren */
 
-import { AudioContext } from 'standardized-audio-context';
+import { AudioContext } from "standardized-audio-context";
 
 export function Waveform(opts) {
   this.audioContext = new AudioContext();
-  this.oCanvas = document.createElement('canvas');
+  this.oCanvas = document.createElement("canvas");
   this.buffer = {};
   this.WIDTH = 0;
   this.HEIGHT = 0;
   this.channelData = [];
-  this.waveformImage = '';
+  this.waveformImage = "";
   this.audioBuffer = null;
 
   this.aveRMS = 0;
   this.peakRMS = 0;
 
   this.numberSamples = 100000;
-  this.waveformType = 'img';
+  this.waveformType = "img";
   this.drawWaveform = this.drawCanvasWaveform;
 
   if (opts.width && opts.height) {
@@ -31,8 +31,8 @@ export function Waveform(opts) {
   if (opts.samples) {
     this.numberSamples = opts.samples;
   }
-  if (opts.type && opts.type === 'svg') {
-    this.waveformType = 'svg';
+  if (opts.type && opts.type === "svg") {
+    this.waveformType = "svg";
     this.drawWaveform = this.delegateToWorker;
     this.worker = null;
   }
@@ -41,7 +41,7 @@ export function Waveform(opts) {
       .then(() => {
         this.getAudioData();
         this.drawWaveform();
-        if (this.waveformType !== 'svg') {
+        if (this.waveformType !== "svg") {
           _completeFuncs.forEach(fn => {
             fn(this.waveformImage || this.svgPath, this.waveformType);
           });
@@ -55,12 +55,12 @@ export function Waveform(opts) {
   }
 
   var _completeFuncs = [];
-  Object.defineProperty(this, 'oncomplete', {
+  Object.defineProperty(this, "oncomplete", {
     get: function() {
       return _completeFuncs;
     },
     set: function(fn, _opt) {
-      if (typeof fn == 'function') {
+      if (typeof fn == "function") {
         if (this.waveformImage || this.svgPath) {
           fn(this.waveformImage || this.svgPath, this.svgLength);
           return;
@@ -73,12 +73,12 @@ export function Waveform(opts) {
 
   var _error = "";
   var _errorFuncs = [];
-  Object.defineProperty(this, 'onerror', {
+  Object.defineProperty(this, "onerror", {
     get: function() {
       return _errorFuncs;
     },
     set: function(fn, _opt) {
-      if (typeof fn == 'function') {
+      if (typeof fn == "function") {
         if (this._error && this._error !== "") {
           fn(_error);
           return;
@@ -97,7 +97,7 @@ Waveform.prototype = {
     this.WIDTH = width;
     this.oCanvas.height = height;
     this.HEIGHT = height;
-    this.ocCtx = this.oCanvas.getContext('2d');
+    this.ocCtx = this.oCanvas.getContext("2d");
   },
   decodeAudioData: function(arraybuffer) {
     return new Promise((resolve, reject) => {
@@ -133,10 +133,10 @@ Waveform.prototype = {
   },
   drawCanvasWaveform: function(amp) {
     amp = amp || 1;
-    this.ocCtx.fillStyle = '#FFFFFF00'; // '#b7d8f9';
+    this.ocCtx.fillStyle = "#FFFFFF00"; // "#b7d8f9";
     this.ocCtx.fillRect(0, 0, this.WIDTH, this.HEIGHT);
     this.ocCtx.lineWidth = 1;
-    this.ocCtx.strokeStyle = 'black'; // '#38597a';
+    this.ocCtx.strokeStyle = "black"; // "#38597a";
     let sliceWidth = this.WIDTH * 1.0 / this.channelData.length;
     let x = 0;
 
@@ -166,16 +166,16 @@ Waveform.prototype = {
   },
   delegateToWorker: function() {
     if (!this.worker) {
-      this.worker = new Worker('../util/svgworker.js');
-      this.worker.addEventListener('message', this.workerCommunication.bind(this), false);
+      this.worker = new Worker("../util/svgworker.js");
+      this.worker.addEventListener("message", this.workerCommunication.bind(this), false);
       this.worker.postMessage(this.channelData);
     }
   },
   workerCommunication: function(e) {
     switch (e.data.type) {
-      case 'path':
+      case "path":
         this.setSVGpath(e.data.path, e.data.length);
-        this.worker.removeEventListener('message', this.workerCommunication.bind(this), false);
+        this.worker.removeEventListener("message", this.workerCommunication.bind(this), false);
         this.worker.terminate();
         this.worker = null;
         break;
@@ -184,12 +184,12 @@ Waveform.prototype = {
     }
   },
   setSVGpath: function(path, len) {
-    this.svgPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    this.svgPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
     this.svgLength = len;
 
-    this.svgPath.setAttribute('d', path);
-    this.svgPath.setAttribute('vector-effect', 'non-scaling-stroke');
-    this.svgPath.setAttribute('stroke-width', '0.5px');
+    this.svgPath.setAttribute("d", path);
+    this.svgPath.setAttribute("vector-effect", "non-scaling-stroke");
+    this.svgPath.setAttribute("stroke-width", "0.5px");
 
     this.oncomplete.forEach(fn => fn(this.svgPath, this.svgLength));
   }
diff --git a/src/util/webvtt-parser.d.ts b/src/util/webvtt-parser.d.ts
index 5494a6b3a..be4d2eb53 100644
--- a/src/util/webvtt-parser.d.ts
+++ b/src/util/webvtt-parser.d.ts
@@ -1,2 +1,2 @@
 // webvtt-parser.d.ts
-declare module 'webvtt-parser';
+declare module "webvtt-parser";