chore(prettier): run format script

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;
-}
+  overflow-y: auto;
+  flex: 1;
+}

src/components/ButtonToggleVideoIframeVisibility.module.css

@@ -6,4 +6,4 @@
   border-bottom-right-radius: 0;
   z-index: 5;
   transition: 0.2s;
-}
+}

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;
-}
+}

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);
-}
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  max-height: 110%;
+  border-radius: var(--mantine-radius-sm);
+  transform: translate3d(-50%, -50%, 0);
+}

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);
-}
+  flex: 0 0 rem(277px);
+}

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);
-    }
-}
+  @media (min-width: $mantine-breakpoint-sm) {
+    padding-left: var(--mantine-spacing-xl);
+    padding-right: var(--mantine-spacing-xl);
+  }
+}

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;

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);
 }

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();

src/components/LinkSeeAll.module.css

@@ -1,4 +1,4 @@
 .link {
-    color: var(--mantine-color-blue-6);
-    text-decoration: none;
-}
+  color: var(--mantine-color-blue-6);
+  text-decoration: none;
+}

src/components/Main.module.css

@@ -9,4 +9,4 @@
   @media (min-width: $mantine-breakpoint-md) {
     padding: rem(16px) rem(28px) rem(24px);
   }
-}
+}

src/components/MobileNavigation.module.css

@@ -6,4 +6,4 @@
   [data-mantine-color-scheme="dark"] & {
     background: var(--mantine-color-dark-6);
   }
-}
+}

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;
-}
+  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;
+}

src/components/ModalSyncData.module.css

@@ -1,4 +1,4 @@
 .column {
   max-width: rem(46px);
   text-align: center;
-}
+}

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)
+      );
     }
   }
 

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;
-}
+}

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;
   }
-}
+}