From f17c10c5dd2e159cdee9ed5317c21277f597b362 Mon Sep 17 00:00:00 2001
From: Stephane Richin <contact@stephane-richin.fr>
Date: Wed, 13 Dec 2023 23:35:15 +0100
Subject: [PATCH] chore(prettier): run format script

---
 src/components/App.css                        | 26 +++---
 ...ttonToggleVideoIframeVisibility.module.css |  2 +-
 src/components/Card.module.css                |  7 +-
 src/components/CardImage.module.css           | 24 ++---
 src/components/CardList.module.css            | 54 +++++------
 src/components/DrawerPlayer.module.css        | 34 +++----
 src/components/Genre.module.css               |  5 +-
 src/components/Header.module.css              | 14 +--
 src/components/HistoryList.tsx                |  2 +-
 src/components/LinkSeeAll.module.css          |  6 +-
 src/components/Main.module.css                |  2 +-
 src/components/MobileNavigation.module.css    |  2 +-
 src/components/MobilePlayer.module.css        | 28 +++---
 src/components/ModalSyncData.module.css       |  2 +-
 src/components/NavbarLink.module.css          |  5 +-
 src/components/Navigation.module.css          |  7 +-
 src/components/Player.module.css              |  4 +-
 src/components/PlayerAudio.tsx                | 14 ++-
 src/components/PlayerBackground.module.css    | 14 +--
 src/components/PlaylistCard.module.css        |  7 +-
 src/components/Script.tsx                     | 15 ++-
 src/components/SponsorBlockBar.tsx            |  4 +-
 src/components/SwitchPlausibleAnalytics.tsx   | 22 +++--
 src/components/Trending.tsx                   |  5 +-
 src/components/VerticalSlider.module.css      |  4 +-
 src/components/Video.module.css               |  2 +-
 src/components/VideoIframe.tsx                |  5 +-
 src/components/VideoPlayer.module.css         |  4 +-
 src/components/VideoPlayer.tsx                |  2 +-
 src/containers/MobileNavigation.module.css    | 18 ++--
 src/hooks/useScript.ts                        | 92 +++++++++----------
 src/pages/Settings.tsx                        |  6 +-
 32 files changed, 230 insertions(+), 208 deletions(-)

diff --git a/src/components/App.css b/src/components/App.css
index b57937f..c19815c 100644
--- a/src/components/App.css
+++ b/src/components/App.css
@@ -1,30 +1,30 @@
 body {
-    min-height: 100vh;
-    min-height: -webkit-fill-available;
-    overflow: hidden;
+  min-height: 100vh;
+  min-height: -webkit-fill-available;
+  overflow: hidden;
 }
 
 html {
-    height: -webkit-fill-available;
+  height: -webkit-fill-available;
 }
 
 .App {
-    height: 100vh;
-    flex-direction: column;
+  height: 100vh;
+  flex-direction: column;
 }
 
 .App.iOS {
-    height: -webkit-fill-available;
+  height: -webkit-fill-available;
 }
 
 /* This "static" media will be updated after upgrade Mantine version to 7 with CSS module */
 @media screen and (min-width: 648px) {
-    .App {
-        flex-direction: row;
-    }
+  .App {
+    flex-direction: row;
+  }
 }
 
 .App-Content {
-    overflow-y: auto;
-    flex: 1;
-}
\ No newline at end of file
+  overflow-y: auto;
+  flex: 1;
+}
diff --git a/src/components/ButtonToggleVideoIframeVisibility.module.css b/src/components/ButtonToggleVideoIframeVisibility.module.css
index 51714c2..beec845 100644
--- a/src/components/ButtonToggleVideoIframeVisibility.module.css
+++ b/src/components/ButtonToggleVideoIframeVisibility.module.css
@@ -6,4 +6,4 @@
   border-bottom-right-radius: 0;
   z-index: 5;
   transition: 0.2s;
-}
\ No newline at end of file
+}
diff --git a/src/components/Card.module.css b/src/components/Card.module.css
index 3acb73b..ce464cb 100644
--- a/src/components/Card.module.css
+++ b/src/components/Card.module.css
@@ -1,5 +1,8 @@
 .card {
-  background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  background: light-dark(
+    var(--mantine-color-gray-0),
+    var(--mantine-color-dark-6)
+  );
   border-radius: var(--mantine-radius-md);
   padding: var(--mantine-spacing-sm) !important;
 }
@@ -64,4 +67,4 @@
 .buttonPlay {
   border-radius: var(--mantine-radius-md);
   margin-right: auto;
-}
\ No newline at end of file
+}
diff --git a/src/components/CardImage.module.css b/src/components/CardImage.module.css
index 3e3e52c..05227c3 100644
--- a/src/components/CardImage.module.css
+++ b/src/components/CardImage.module.css
@@ -1,16 +1,16 @@
 .imageContainer {
-    overflow: hidden;
-    padding: var(--mantine-spacing-sm);
-    position: relative;
-    min-height: rem(152px);
-    border-radius: var(--mantine-spacing-sm);
+  overflow: hidden;
+  padding: var(--mantine-spacing-sm);
+  position: relative;
+  min-height: rem(152px);
+  border-radius: var(--mantine-spacing-sm);
 }
 
 .image {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    max-height: 110%;
-    border-radius: var(--mantine-radius-sm);
-    transform: translate3d(-50%, -50%, 0);
-}
\ No newline at end of file
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  max-height: 110%;
+  border-radius: var(--mantine-radius-sm);
+  transform: translate3d(-50%, -50%, 0);
+}
diff --git a/src/components/CardList.module.css b/src/components/CardList.module.css
index ab32c15..01c47ce 100644
--- a/src/components/CardList.module.css
+++ b/src/components/CardList.module.css
@@ -1,40 +1,40 @@
 .grid {
-    display: grid;
-    grid-column-gap: var(--mantine-spacing-lg);
-    grid-row-gap: var(--mantine-spacing-lg);
+  display: grid;
+  grid-column-gap: var(--mantine-spacing-lg);
+  grid-row-gap: var(--mantine-spacing-lg);
 
-    @media (min-width: $mantine-breakpoint-xs) {
-        grid-template-columns: repeat(2, 1fr);
-    }
+  @media (min-width: $mantine-breakpoint-xs) {
+    grid-template-columns: repeat(2, 1fr);
+  }
 
-    @media (min-width: $mantine-breakpoint-sm) {
-        grid-template-columns: repeat(3, 1fr);
-    }
+  @media (min-width: $mantine-breakpoint-sm) {
+    grid-template-columns: repeat(3, 1fr);
+  }
 
-    @media (min-width: $mantine-breakpoint-md) {
-        grid-template-columns: repeat(4, 1fr);
-    }
+  @media (min-width: $mantine-breakpoint-md) {
+    grid-template-columns: repeat(4, 1fr);
+  }
 
-    @media (min-width: $mantine-breakpoint-xl) {
-        grid-template-columns: repeat(5, 1fr);
-    }
+  @media (min-width: $mantine-breakpoint-xl) {
+    grid-template-columns: repeat(5, 1fr);
+  }
 
-    @media (min-width: 1650px) {
-        grid-template-columns: repeat(6, 1fr);
-    }
+  @media (min-width: 1650px) {
+    grid-template-columns: repeat(6, 1fr);
+  }
 
-    @media (min-width: 2400px) {
-        grid-template-columns: repeat(7, 1fr);
-    }
+  @media (min-width: 2400px) {
+    grid-template-columns: repeat(7, 1fr);
+  }
 }
 
 .flexGrid {
-    display: flex;
-    flex-direction: row;
-    gap: var(--mantine-spacing-lg);
-    overflow: auto;
+  display: flex;
+  flex-direction: row;
+  gap: var(--mantine-spacing-lg);
+  overflow: auto;
 }
 
 .flexColumn {
-    flex: 0 0 rem(277px);
-}
\ No newline at end of file
+  flex: 0 0 rem(277px);
+}
diff --git a/src/components/DrawerPlayer.module.css b/src/components/DrawerPlayer.module.css
index 3a86b2b..42afde2 100644
--- a/src/components/DrawerPlayer.module.css
+++ b/src/components/DrawerPlayer.module.css
@@ -1,29 +1,29 @@
 .card {
-    position: sticky;
-    top: 0;
-    height: 100vh;
-    transition: .2s;
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  transition: 0.2s;
 }
 
 .scrollArea {
-    height: calc(100vh - rem(500px));
+  height: calc(100vh - rem(500px));
 }
 
 .thumbnail {
-    max-width: 100%;
-    border-radius: var(--mantine-radius-md);
-    margin-bottom: var(--mantine-spacing-xl);
+  max-width: 100%;
+  border-radius: var(--mantine-radius-md);
+  margin-bottom: var(--mantine-spacing-xl);
 
-    @media (min-width: $mantine-breakpoint-sm) {
-      max-width: rem(320px);
-    }
+  @media (min-width: $mantine-breakpoint-sm) {
+    max-width: rem(320px);
+  }
 }
 
 .progressContainer {
-    width: 100%;
+  width: 100%;
 
-    @media (min-width: $mantine-breakpoint-sm) {
-      padding-left: var(--mantine-spacing-xl);
-      padding-right: var(--mantine-spacing-xl);
-    }
-}
\ No newline at end of file
+  @media (min-width: $mantine-breakpoint-sm) {
+    padding-left: var(--mantine-spacing-xl);
+    padding-right: var(--mantine-spacing-xl);
+  }
+}
diff --git a/src/components/Genre.module.css b/src/components/Genre.module.css
index 21b8eca..6eb67ce 100644
--- a/src/components/Genre.module.css
+++ b/src/components/Genre.module.css
@@ -1,7 +1,10 @@
 .item {
   width: rem(90px);
   height: rem(90px);
-  background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  background: light-dark(
+    var(--mantine-color-gray-0),
+    var(--mantine-color-dark-6)
+  );
   border-radius: 10px;
   display: flex;
   align-items: center;
diff --git a/src/components/Header.module.css b/src/components/Header.module.css
index 570376e..36309ef 100644
--- a/src/components/Header.module.css
+++ b/src/components/Header.module.css
@@ -1,9 +1,9 @@
 .container {
-    display: flex;
-    justify-content: flex-end;
-    position: sticky;
-    top: 0;
-    backdrop-filter: blur(8px);
-    z-index: 5;
-    padding: rem(16px);
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  backdrop-filter: blur(8px);
+  z-index: 5;
+  padding: rem(16px);
 }
diff --git a/src/components/HistoryList.tsx b/src/components/HistoryList.tsx
index 89a6e56..c659871 100644
--- a/src/components/HistoryList.tsx
+++ b/src/components/HistoryList.tsx
@@ -2,9 +2,9 @@ import { Alert, Text } from "@mantine/core";
 import { memo } from "react";
 import { useTranslation } from "react-i18next";
 
+import { usePaginateData } from "../hooks/usePaginateData";
 import { useHistory } from "../providers/History";
 import { CardList } from "./CardList";
-import { usePaginateData } from "../hooks/usePaginateData";
 
 export const HistoryList = memo(() => {
   const videos = useHistory();
diff --git a/src/components/LinkSeeAll.module.css b/src/components/LinkSeeAll.module.css
index d476f25..c5b1651 100644
--- a/src/components/LinkSeeAll.module.css
+++ b/src/components/LinkSeeAll.module.css
@@ -1,4 +1,4 @@
 .link {
-    color: var(--mantine-color-blue-6);
-    text-decoration: none;
-}
\ No newline at end of file
+  color: var(--mantine-color-blue-6);
+  text-decoration: none;
+}
diff --git a/src/components/Main.module.css b/src/components/Main.module.css
index bcacbf5..0777225 100644
--- a/src/components/Main.module.css
+++ b/src/components/Main.module.css
@@ -9,4 +9,4 @@
   @media (min-width: $mantine-breakpoint-md) {
     padding: rem(16px) rem(28px) rem(24px);
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/MobileNavigation.module.css b/src/components/MobileNavigation.module.css
index 0d1f169..d53bc5e 100644
--- a/src/components/MobileNavigation.module.css
+++ b/src/components/MobileNavigation.module.css
@@ -6,4 +6,4 @@
   [data-mantine-color-scheme="dark"] & {
     background: var(--mantine-color-dark-6);
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/MobilePlayer.module.css b/src/components/MobilePlayer.module.css
index 26ae7a6..6048fba 100644
--- a/src/components/MobilePlayer.module.css
+++ b/src/components/MobilePlayer.module.css
@@ -1,18 +1,18 @@
 .container {
-    position: absolute;
-    bottom: rem(50px);
-    padding-bottom: rem(10px);
-    left: 0;
-    right: 0;
-    z-index: 2;
+  position: absolute;
+  bottom: rem(50px);
+  padding-bottom: rem(10px);
+  left: 0;
+  right: 0;
+  z-index: 2;
 }
 
 .content {
-    padding: var(--mantine-spacing-xs);
-    padding-right: var(--mantine-spacing-md);
-    padding-left: var(--mantine-spacing-md);
-    gap: var(--mantine-spacing-xs);
-    text-align: center;
-    justify-content: space-between;
-    align-items: center;
-}
\ No newline at end of file
+  padding: var(--mantine-spacing-xs);
+  padding-right: var(--mantine-spacing-md);
+  padding-left: var(--mantine-spacing-md);
+  gap: var(--mantine-spacing-xs);
+  text-align: center;
+  justify-content: space-between;
+  align-items: center;
+}
diff --git a/src/components/ModalSyncData.module.css b/src/components/ModalSyncData.module.css
index cf767ff..7cea42f 100644
--- a/src/components/ModalSyncData.module.css
+++ b/src/components/ModalSyncData.module.css
@@ -1,4 +1,4 @@
 .column {
   max-width: rem(46px);
   text-align: center;
-}
\ No newline at end of file
+}
diff --git a/src/components/NavbarLink.module.css b/src/components/NavbarLink.module.css
index 94eae54..a081527 100644
--- a/src/components/NavbarLink.module.css
+++ b/src/components/NavbarLink.module.css
@@ -12,7 +12,10 @@
     /* margin-bottom: var(--mantine-spacing-sm); */
 
     &:hover {
-      background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
+      background: light-dark(
+        var(--mantine-color-gray-0),
+        var(--mantine-color-dark-5)
+      );
     }
   }
 
diff --git a/src/components/Navigation.module.css b/src/components/Navigation.module.css
index 4a83e92..226277d 100644
--- a/src/components/Navigation.module.css
+++ b/src/components/Navigation.module.css
@@ -1,6 +1,9 @@
 .navbar {
   position: relative;
-  background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  background: light-dark(
+    var(--mantine-color-gray-0),
+    var(--mantine-color-dark-6)
+  );
   padding: var(--mantine-spacing-md);
   z-index: 1;
-}
\ No newline at end of file
+}
diff --git a/src/components/Player.module.css b/src/components/Player.module.css
index 29ea214..9c55d3f 100644
--- a/src/components/Player.module.css
+++ b/src/components/Player.module.css
@@ -57,7 +57,7 @@
 
 .spacer {
   height: 0;
-  
+
   @media (min-width: $mantine-breakpoint-md) {
     &[data-visible="true"] {
       height: rem(78px);
@@ -79,4 +79,4 @@
   @media (min-width: rem(2140)) {
     display: none;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/PlayerAudio.tsx b/src/components/PlayerAudio.tsx
index 3d1838c..f438b52 100644
--- a/src/components/PlayerAudio.tsx
+++ b/src/components/PlayerAudio.tsx
@@ -1,6 +1,9 @@
 import { Box } from "@mantine/core";
+import { useHotkeys } from "@mantine/hooks";
+import { showNotification } from "@mantine/notifications";
 import { memo } from "react";
 import ReactAudioPlayer from "react-audio-player";
+import { useTranslation } from "react-i18next";
 
 import { usePlayVideo } from "../hooks/usePlayVideo";
 import {
@@ -12,9 +15,6 @@ import {
 import { usePlayerMode, useSetPlayerMode } from "../providers/PlayerMode";
 import { usePreviousNextVideos } from "../providers/PreviousNextTrack";
 import { displayTimeBySeconds } from "../utils/displayTimeBySeconds";
-import { showNotification } from "@mantine/notifications";
-import { useTranslation } from "react-i18next";
-import { useHotkeys } from "@mantine/hooks";
 
 export const PlayerAudio = memo(() => {
   const playerAudio = usePlayerAudio();
@@ -38,11 +38,9 @@ export const PlayerAudio = memo(() => {
       audio.pause();
       handlePause();
     }
-  }
+  };
 
-  useHotkeys([
-    ['space', handlePressSpace],
-  ]);
+  useHotkeys([["space", handlePressSpace]]);
 
   const handlePause = () => {
     setPlayerState((previousState) => ({
@@ -103,7 +101,7 @@ export const PlayerAudio = memo(() => {
       title: t("error"),
       message: t("player.mode.audio.error.message"),
     });
-  }
+  };
 
   return (
     <Box style={{ display: "none" }} aria-hidden="true">
diff --git a/src/components/PlayerBackground.module.css b/src/components/PlayerBackground.module.css
index 5ecb68d..796d01d 100644
--- a/src/components/PlayerBackground.module.css
+++ b/src/components/PlayerBackground.module.css
@@ -1,9 +1,9 @@
 .background {
-    position: absolute;
-    z-index: -1;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    backdrop-filter: blur(8px);
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  backdrop-filter: blur(8px);
 }
diff --git a/src/components/PlaylistCard.module.css b/src/components/PlaylistCard.module.css
index 9300b5e..32221ad 100644
--- a/src/components/PlaylistCard.module.css
+++ b/src/components/PlaylistCard.module.css
@@ -1,5 +1,8 @@
 .card {
-  background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  background: light-dark(
+    var(--mantine-color-gray-0),
+    var(--mantine-color-dark-6)
+  );
   color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
   border-radius: var(--mantine-radius-md);
   padding: rem(24px) !important;
@@ -35,4 +38,4 @@
 
 .titleText {
   font-size: rem(22px);
-}
\ No newline at end of file
+}
diff --git a/src/components/Script.tsx b/src/components/Script.tsx
index dc88a96..470f885 100644
--- a/src/components/Script.tsx
+++ b/src/components/Script.tsx
@@ -1,12 +1,19 @@
 import { memo, useMemo } from "react";
+
 import { useScript } from "../hooks/useScript";
 import { useSettings } from "../providers/Settings";
 
-const PLAUSIBLE_INSTANCE_SCRIPT_URL = "https://plausible.holoplay.io/js/script.js";
+const PLAUSIBLE_INSTANCE_SCRIPT_URL =
+  "https://plausible.holoplay.io/js/script.js";
 
 export const Scripts = memo(() => {
   const settings = useSettings();
-  const analyticsEnabled = useMemo(() => process.env.REACT_APP_PLAUSIBLE_ANALYTICS === "true" && settings.analytics, [settings.analytics]);
+  const analyticsEnabled = useMemo(
+    () =>
+      process.env.REACT_APP_PLAUSIBLE_ANALYTICS === "true" &&
+      settings.analytics,
+    [settings.analytics],
+  );
   useScript(analyticsEnabled ? PLAUSIBLE_INSTANCE_SCRIPT_URL : null);
-  return null
-});
\ No newline at end of file
+  return null;
+});
diff --git a/src/components/SponsorBlockBar.tsx b/src/components/SponsorBlockBar.tsx
index 745b71e..edd01fa 100644
--- a/src/components/SponsorBlockBar.tsx
+++ b/src/components/SponsorBlockBar.tsx
@@ -40,8 +40,8 @@ export const SponsorBlockBar = memo(() => {
               index === 0
                 ? "4px 0 0 4px"
                 : index + 1 === segments.length
-                ? "0 4px 4px 0"
-                : 0,
+                  ? "0 4px 4px 0"
+                  : 0,
             width: segment.percent,
           }}
         />
diff --git a/src/components/SwitchPlausibleAnalytics.tsx b/src/components/SwitchPlausibleAnalytics.tsx
index e3a628b..8c7e2fc 100644
--- a/src/components/SwitchPlausibleAnalytics.tsx
+++ b/src/components/SwitchPlausibleAnalytics.tsx
@@ -1,8 +1,9 @@
-import { memo } from "react"
-import { useSetSettings, useSettings } from "../providers/Settings";
 import { Alert, Switch } from "@mantine/core";
+import { memo } from "react";
 import { useTranslation } from "react-i18next";
+
 import { db } from "../database";
+import { useSetSettings, useSettings } from "../providers/Settings";
 import type { Settings } from "../types/interfaces/Settings";
 
 export const SwitchPlausibleAnalytics = memo(() => {
@@ -13,19 +14,26 @@ export const SwitchPlausibleAnalytics = memo(() => {
   const handleChange = () => {
     const analytics = !settings.analytics;
     db.update("settings", { ID: 1 }, (data: Settings) => ({
-      analytics
+      analytics,
     }));
     db.commit();
     setSettings((previousState) => ({
       ...previousState,
       analytics,
     }));
-  }
+  };
 
   return (
     <>
       <Alert mb="lg">
-        {t('settings.general.analytics.info')} <a href="https://plausible.holoplay.io/holoplay.io" target="_blank" rel="noreferrer">{t('settings.general.analytics.link')}</a>
+        {t("settings.general.analytics.info")}{" "}
+        <a
+          href="https://plausible.holoplay.io/holoplay.io"
+          target="_blank"
+          rel="noreferrer"
+        >
+          {t("settings.general.analytics.link")}
+        </a>
       </Alert>
       <Switch
         size="md"
@@ -34,5 +42,5 @@ export const SwitchPlausibleAnalytics = memo(() => {
         onChange={handleChange}
       />
     </>
-  )
-});
\ No newline at end of file
+  );
+});
diff --git a/src/components/Trending.tsx b/src/components/Trending.tsx
index 6741199..743032e 100644
--- a/src/components/Trending.tsx
+++ b/src/components/Trending.tsx
@@ -40,10 +40,7 @@ export const Trending: FC<TrendingProps> = memo(({ horizontal = false }) => {
       );
     }
     return (
-      <HorizontalGridList
-        data={query.data.slice(0, 10)}
-        label="Trending"
-      />
+      <HorizontalGridList data={query.data.slice(0, 10)} label="Trending" />
     );
   }
 
diff --git a/src/components/VerticalSlider.module.css b/src/components/VerticalSlider.module.css
index 6afd6d8..168b869 100644
--- a/src/components/VerticalSlider.module.css
+++ b/src/components/VerticalSlider.module.css
@@ -6,10 +6,10 @@
   cursor: pointer;
 
   [data-mantine-color-scheme="light"] & {
-    background: rgba(0, 0, 0, .1);
+    background: rgba(0, 0, 0, 0.1);
   }
   [data-mantine-color-scheme="dark"] & {
-    background: rgba(255, 255, 255, .1);
+    background: rgba(255, 255, 255, 0.1);
   }
 }
 
diff --git a/src/components/Video.module.css b/src/components/Video.module.css
index 0ee1381..1292598 100644
--- a/src/components/Video.module.css
+++ b/src/components/Video.module.css
@@ -24,4 +24,4 @@
   @media (max-width: $mantine-breakpoint-sm) {
     display: none;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/VideoIframe.tsx b/src/components/VideoIframe.tsx
index ae4bdff..61e4a62 100644
--- a/src/components/VideoIframe.tsx
+++ b/src/components/VideoIframe.tsx
@@ -1,9 +1,6 @@
 import { ActionIcon, Box, CloseButton, Tooltip } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
-import {
-  IconChevronRight,
-  IconInfoCircle,
-} from "@tabler/icons-react";
+import { IconChevronRight, IconInfoCircle } from "@tabler/icons-react";
 import { memo, useCallback, useEffect, useMemo, useRef } from "react";
 import videojs from "video.js";
 import Player from "video.js/dist/types/player";
diff --git a/src/components/VideoPlayer.module.css b/src/components/VideoPlayer.module.css
index a6f0067..3bfbca7 100644
--- a/src/components/VideoPlayer.module.css
+++ b/src/components/VideoPlayer.module.css
@@ -6,7 +6,7 @@
   height: rem(150px);
   z-index: 4;
   pointer-events: all;
-  transition: .2s;
+  transition: 0.2s;
 
   &[data-visible="false"] {
     transform: translate3d(320px, 0, 0);
@@ -34,4 +34,4 @@
 
   /* &[data-visible="true"] {
   } */
-}
\ No newline at end of file
+}
diff --git a/src/components/VideoPlayer.tsx b/src/components/VideoPlayer.tsx
index 967e6cf..8b9d478 100644
--- a/src/components/VideoPlayer.tsx
+++ b/src/components/VideoPlayer.tsx
@@ -1,9 +1,9 @@
 import { memo } from "react";
-import classes from './VideoPlayer.module.css';
 
 import { useVideoIframeVisibility } from "../providers/VideoIframeVisibility";
 import { ButtonToggleVideoIframeVisibility } from "./ButtonToggleVideoIframeVisibility";
 import { VideoIframe } from "./VideoIframe";
+import classes from "./VideoPlayer.module.css";
 
 export const VideoPlayer = memo(() => {
   const videoIframeVisibility = useVideoIframeVisibility();
diff --git a/src/containers/MobileNavigation.module.css b/src/containers/MobileNavigation.module.css
index 1cd27dc..8b04519 100644
--- a/src/containers/MobileNavigation.module.css
+++ b/src/containers/MobileNavigation.module.css
@@ -1,10 +1,10 @@
 .container {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    background: light-dark(rgba(231, 245, 255, 0.8), rgba(25, 113, 194, 0.2));
-    backdrop-filter: blur(8px);
-    z-index: 4;
-    border-top-left-radius: var(--mantine-radius-md);
-    border-top-right-radius: var(--mantine-radius-md);
-  }
\ No newline at end of file
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  background: light-dark(rgba(231, 245, 255, 0.8), rgba(25, 113, 194, 0.2));
+  backdrop-filter: blur(8px);
+  z-index: 4;
+  border-top-left-radius: var(--mantine-radius-md);
+  border-top-right-radius: var(--mantine-radius-md);
+}
diff --git a/src/hooks/useScript.ts b/src/hooks/useScript.ts
index 5126af9..7dd0edc 100644
--- a/src/hooks/useScript.ts
+++ b/src/hooks/useScript.ts
@@ -1,29 +1,29 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from "react";
 
 // Source: https://usehooks-ts.com/react-hook/use-script
 
-type UseScriptStatus = 'idle' | 'loading' | 'ready' | 'error'
+type UseScriptStatus = "idle" | "loading" | "ready" | "error";
 
 interface UseScriptOptions {
-  shouldPreventLoad?: boolean
-  removeOnUnmount?: boolean
+  shouldPreventLoad?: boolean;
+  removeOnUnmount?: boolean;
 }
 
-const cachedScriptStatuses: Record<string, UseScriptStatus | undefined> = {}
+const cachedScriptStatuses: Record<string, UseScriptStatus | undefined> = {};
 
 const getScriptNode = (src: string) => {
   const node: HTMLScriptElement | null = document.querySelector(
     `script[src="${src}"]`,
-  )
-  const status = node?.getAttribute('data-status') as
+  );
+  const status = node?.getAttribute("data-status") as
     | UseScriptStatus
-    | undefined
+    | undefined;
 
   return {
     node,
     status,
-  }
-}
+  };
+};
 
 export const useScript = (
   src: string | null,
@@ -31,83 +31,83 @@ export const useScript = (
 ): UseScriptStatus => {
   const [status, setStatus] = useState<UseScriptStatus>(() => {
     if (!src || options?.shouldPreventLoad) {
-      return 'idle'
+      return "idle";
     }
 
-    if (typeof window === 'undefined') {
+    if (typeof window === "undefined") {
       // SSR Handling - always return 'loading'
-      return 'loading'
+      return "loading";
     }
 
-    return cachedScriptStatuses[src] ?? 'loading'
-  })
+    return cachedScriptStatuses[src] ?? "loading";
+  });
 
   useEffect(() => {
     if (!src || options?.shouldPreventLoad) {
-      return
+      return;
     }
 
-    const cachedScriptStatus = cachedScriptStatuses[src]
-    if (cachedScriptStatus === 'ready' || cachedScriptStatus === 'error') {
+    const cachedScriptStatus = cachedScriptStatuses[src];
+    if (cachedScriptStatus === "ready" || cachedScriptStatus === "error") {
       // If the script is already cached, set its status immediately
-      setStatus(cachedScriptStatus)
-      return
+      setStatus(cachedScriptStatus);
+      return;
     }
 
     // Fetch existing script element by src
     // It may have been added by another instance of this hook
-    const script = getScriptNode(src)
-    let scriptNode = script.node
+    const script = getScriptNode(src);
+    let scriptNode = script.node;
 
     if (!scriptNode) {
       // Create script element and add it to document body
-      scriptNode = document.createElement('script')
-      scriptNode.src = src
-      scriptNode.async = true
-      scriptNode.setAttribute('data-status', 'loading')
-      document.body.appendChild(scriptNode)
+      scriptNode = document.createElement("script");
+      scriptNode.src = src;
+      scriptNode.async = true;
+      scriptNode.setAttribute("data-status", "loading");
+      document.body.appendChild(scriptNode);
 
       // Store status in attribute on script
       // This can be read by other instances of this hook
       const setAttributeFromEvent = (event: Event) => {
         const scriptStatus: UseScriptStatus =
-          event.type === 'load' ? 'ready' : 'error'
+          event.type === "load" ? "ready" : "error";
 
-        scriptNode?.setAttribute('data-status', scriptStatus)
-      }
+        scriptNode?.setAttribute("data-status", scriptStatus);
+      };
 
-      scriptNode.addEventListener('load', setAttributeFromEvent)
-      scriptNode.addEventListener('error', setAttributeFromEvent)
+      scriptNode.addEventListener("load", setAttributeFromEvent);
+      scriptNode.addEventListener("error", setAttributeFromEvent);
     } else {
       // Grab existing script status from attribute and set to state.
-      setStatus(script.status ?? cachedScriptStatus ?? 'loading')
+      setStatus(script.status ?? cachedScriptStatus ?? "loading");
     }
 
     // Script event handler to update status in state
     // Note: Even if the script already exists we still need to add
     // event handlers to update the state for *this* hook instance.
     const setStateFromEvent = (event: Event) => {
-      const newStatus = event.type === 'load' ? 'ready' : 'error'
-      setStatus(newStatus)
-      cachedScriptStatuses[src] = newStatus
-    }
+      const newStatus = event.type === "load" ? "ready" : "error";
+      setStatus(newStatus);
+      cachedScriptStatuses[src] = newStatus;
+    };
 
     // Add event listeners
-    scriptNode.addEventListener('load', setStateFromEvent)
-    scriptNode.addEventListener('error', setStateFromEvent)
+    scriptNode.addEventListener("load", setStateFromEvent);
+    scriptNode.addEventListener("error", setStateFromEvent);
 
     // Remove event listeners on cleanup
     return () => {
       if (scriptNode) {
-        scriptNode.removeEventListener('load', setStateFromEvent)
-        scriptNode.removeEventListener('error', setStateFromEvent)
+        scriptNode.removeEventListener("load", setStateFromEvent);
+        scriptNode.removeEventListener("error", setStateFromEvent);
       }
 
       if (scriptNode && options?.removeOnUnmount) {
-        scriptNode.remove()
+        scriptNode.remove();
       }
-    }
-  }, [src, options?.shouldPreventLoad, options?.removeOnUnmount])
+    };
+  }, [src, options?.shouldPreventLoad, options?.removeOnUnmount]);
 
-  return status
-}
\ No newline at end of file
+  return status;
+};
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index c7c9f92..c5748d6 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -17,9 +17,9 @@ import { PageHeader } from "../components/PageHeader";
 import { SaveData } from "../components/SaveData";
 import { SelectInvidiousInstance } from "../components/SelectInvidiousInstance";
 import { SponsorBlockSettings } from "../components/SponsorBlockSettings";
+import { SwitchPlausibleAnalytics } from "../components/SwitchPlausibleAnalytics";
 import { SwitchVideoMode } from "../components/SwitchVideoMode";
 import { useStorage } from "../hooks/useStorage";
-import { SwitchPlausibleAnalytics } from "../components/SwitchPlausibleAnalytics";
 
 export const SettingsPage = memo(() => {
   const { t } = useTranslation();
@@ -78,8 +78,8 @@ const AnalyticsItem = memo(() => {
       <Divider mt="md" mb="lg" />
       <SwitchPlausibleAnalytics />
     </>
-  )
-})
+  );
+});
 
 const StorageEstimate = memo(() => {
   const storage = useStorage();