Fix the lightbar bug on discover page... (MW has a jank ahh impl)

2024-12-20 14:37:43 +01:00 · 2024-04-27 15:04:23 +00:00 · 2024-04-27 15:04:23 +00:00 · ee00d0e853
commit ee00d0e853
parent 492e2f8261
4 changed files with 126 additions and 139 deletions
--- a/package.json
+++ b/package.json
@ -74,7 +74,7 @@
    "@babel/core": "^7.24.4",
    "@babel/preset-env": "^7.24.4",
    "@babel/preset-typescript": "^7.24.1",
-    "@rollup/wasm-node": "^4.16.4",
+    "@rollup/wasm-node": "^4.17.0",
    "@types/chromecast-caf-sender": "^1.0.9",
    "@types/crypto-js": "^4.2.2",
    "@types/dompurify": "^3.0.5",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -153,8 +153,8 @@ devDependencies:
    specifier: ^7.24.1
    version: 7.24.1(@babel/core@7.24.4)
  '@rollup/wasm-node':
-    specifier: ^4.16.4
-    version: 4.16.4
+    specifier: ^4.17.0
+    version: 4.17.0
  '@types/chromecast-caf-sender':
    specifier: ^1.0.9
    version: 1.0.9
@ -277,7 +277,7 @@ devDependencies:
    version: 0.5.14(prettier@3.2.5)
  rollup-plugin-visualizer:
    specifier: ^5.12.0
-    version: 5.12.0(@rollup/wasm-node@4.16.4)
+    version: 5.12.0(@rollup/wasm-node@4.17.0)
  tailwind-scrollbar:
    specifier: ^3.1.0
    version: 3.1.0(tailwindcss@3.4.3)
@ -2008,7 +2008,7 @@ packages:
    engines: {node: '>=14.0.0'}
    dev: false

-  /@rollup/plugin-babel@5.3.1(@babel/core@7.24.4)(@rollup/wasm-node@4.16.4):
+  /@rollup/plugin-babel@5.3.1(@babel/core@7.24.4)(@rollup/wasm-node@4.17.0):
    resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==}
    engines: {node: '>= 10.0.0'}
    peerDependencies:
@ -2021,11 +2021,11 @@ packages:
    dependencies:
      '@babel/core': 7.24.4
      '@babel/helper-module-imports': 7.24.3
-      '@rollup/pluginutils': 3.1.0(@rollup/wasm-node@4.16.4)
-      rollup: /@rollup/wasm-node@4.16.4
+      '@rollup/pluginutils': 3.1.0(@rollup/wasm-node@4.17.0)
+      rollup: /@rollup/wasm-node@4.17.0
    dev: true

-  /@rollup/plugin-node-resolve@15.2.3(@rollup/wasm-node@4.16.4):
+  /@rollup/plugin-node-resolve@15.2.3(@rollup/wasm-node@4.17.0):
    resolution: {integrity: sha512-j/lym8nf5E21LwBT4Df1VD6hRO2L2iwUeUmP7litikRsVp1H6NWx20NEp0Y7su+7XGc476GnXXc4kFeZNGmaSQ==}
    engines: {node: '>=14.0.0'}
    peerDependencies:
@ -2034,26 +2034,26 @@ packages:
      rollup:
        optional: true
    dependencies:
-      '@rollup/pluginutils': 5.1.0(@rollup/wasm-node@4.16.4)
+      '@rollup/pluginutils': 5.1.0(@rollup/wasm-node@4.17.0)
      '@types/resolve': 1.20.2
      deepmerge: 4.3.1
      is-builtin-module: 3.2.1
      is-module: 1.0.0
      resolve: 1.22.8
-      rollup: /@rollup/wasm-node@4.16.4
+      rollup: /@rollup/wasm-node@4.17.0
    dev: true

-  /@rollup/plugin-replace@2.4.2(@rollup/wasm-node@4.16.4):
+  /@rollup/plugin-replace@2.4.2(@rollup/wasm-node@4.17.0):
    resolution: {integrity: sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==}
    peerDependencies:
      rollup: npm:@rollup/wasm-node
    dependencies:
-      '@rollup/pluginutils': 3.1.0(@rollup/wasm-node@4.16.4)
+      '@rollup/pluginutils': 3.1.0(@rollup/wasm-node@4.17.0)
      magic-string: 0.25.9
-      rollup: /@rollup/wasm-node@4.16.4
+      rollup: /@rollup/wasm-node@4.17.0
    dev: true

-  /@rollup/plugin-terser@0.4.4(@rollup/wasm-node@4.16.4):
+  /@rollup/plugin-terser@0.4.4(@rollup/wasm-node@4.17.0):
    resolution: {integrity: sha512-XHeJC5Bgvs8LfukDwWZp7yeqin6ns8RTl2B9avbejt6tZqsqvVoWI7ZTQrcNsfKEDWBTnTxM8nMDkO2IFFbd0A==}
    engines: {node: '>=14.0.0'}
    peerDependencies:
@ -2062,13 +2062,13 @@ packages:
      rollup:
        optional: true
    dependencies:
-      rollup: /@rollup/wasm-node@4.16.4
+      rollup: /@rollup/wasm-node@4.17.0
      serialize-javascript: 6.0.2
      smob: 1.5.0
      terser: 5.30.4
    dev: true

-  /@rollup/pluginutils@3.1.0(@rollup/wasm-node@4.16.4):
+  /@rollup/pluginutils@3.1.0(@rollup/wasm-node@4.17.0):
    resolution: {integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==}
    engines: {node: '>= 8.0.0'}
    peerDependencies:
@ -2077,10 +2077,10 @@ packages:
      '@types/estree': 0.0.39
      estree-walker: 1.0.1
      picomatch: 2.3.1
-      rollup: /@rollup/wasm-node@4.16.4
+      rollup: /@rollup/wasm-node@4.17.0
    dev: true

-  /@rollup/pluginutils@5.1.0(@rollup/wasm-node@4.16.4):
+  /@rollup/pluginutils@5.1.0(@rollup/wasm-node@4.17.0):
    resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
    engines: {node: '>=14.0.0'}
    peerDependencies:
@ -2092,11 +2092,11 @@ packages:
      '@types/estree': 1.0.5
      estree-walker: 2.0.2
      picomatch: 2.3.1
-      rollup: /@rollup/wasm-node@4.16.4
+      rollup: /@rollup/wasm-node@4.17.0
    dev: true

-  /@rollup/wasm-node@4.16.4:
-    resolution: {integrity: sha512-/1na873kzeWKlNU0lbXgmhJCTll0gmniDQol2//y2JCE60WGyoSThjiAB8RsZ0yfjLiFfo2uFS6DvWfwzmYbrA==}
+  /@rollup/wasm-node@4.17.0:
+    resolution: {integrity: sha512-EOKrg8I26cw7+M8mn5PDWfq4TIyJ7OGeZuaK7Pm3wn5nLJYfRH7CQV/IT+j9MpaVW84JPRp2FGqePdyF8FkTEQ==}
    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
    hasBin: true
    dependencies:
@ -4999,7 +4999,7 @@ packages:
      '@babel/plugin-syntax-typescript': 7.24.1(@babel/core@7.24.4)
      '@babel/types': 7.24.0
      kleur: 4.1.5
-      rollup: /@rollup/wasm-node@4.16.4
+      rollup: /@rollup/wasm-node@4.17.0
      unplugin: 1.10.1
    transitivePeerDependencies:
      - supports-color
@ -5914,7 +5914,7 @@ packages:
      glob: 7.2.3
    dev: true

-  /rollup-plugin-visualizer@5.12.0(@rollup/wasm-node@4.16.4):
+  /rollup-plugin-visualizer@5.12.0(@rollup/wasm-node@4.17.0):
    resolution: {integrity: sha512-8/NU9jXcHRs7Nnj07PF2o4gjxmm9lXIrZ8r175bT9dK8qoLlvKTwRMArRCMgpMGlq8CTLugRvEmyMeMXIU2pNQ==}
    engines: {node: '>=14'}
    hasBin: true
@ -5926,7 +5926,7 @@ packages:
    dependencies:
      open: 8.4.2
      picomatch: 2.3.1
-      rollup: /@rollup/wasm-node@4.16.4
+      rollup: /@rollup/wasm-node@4.17.0
      source-map: 0.7.4
      yargs: 17.7.2
    dev: true
@ -6893,7 +6893,7 @@ packages:
      '@types/node': 20.12.7
      esbuild: 0.20.2
      postcss: 8.4.38
-      rollup: /@rollup/wasm-node@4.16.4
+      rollup: /@rollup/wasm-node@4.17.0
    optionalDependencies:
      fsevents: 2.3.3
    dev: true
@ -7154,10 +7154,10 @@ packages:
      '@babel/core': 7.24.4
      '@babel/preset-env': 7.24.4(@babel/core@7.24.4)
      '@babel/runtime': 7.24.4
-      '@rollup/plugin-babel': 5.3.1(@babel/core@7.24.4)(@rollup/wasm-node@4.16.4)
-      '@rollup/plugin-node-resolve': 15.2.3(@rollup/wasm-node@4.16.4)
-      '@rollup/plugin-replace': 2.4.2(@rollup/wasm-node@4.16.4)
-      '@rollup/plugin-terser': 0.4.4(@rollup/wasm-node@4.16.4)
+      '@rollup/plugin-babel': 5.3.1(@babel/core@7.24.4)(@rollup/wasm-node@4.17.0)
+      '@rollup/plugin-node-resolve': 15.2.3(@rollup/wasm-node@4.17.0)
+      '@rollup/plugin-replace': 2.4.2(@rollup/wasm-node@4.17.0)
+      '@rollup/plugin-terser': 0.4.4(@rollup/wasm-node@4.17.0)
      '@surma/rollup-plugin-off-main-thread': 2.2.3
      ajv: 8.12.0
      common-tags: 1.8.2
@ -7166,7 +7166,7 @@ packages:
      glob: 7.2.3
      lodash: 4.17.21
      pretty-bytes: 5.6.0
-      rollup: /@rollup/wasm-node@4.16.4
+      rollup: /@rollup/wasm-node@4.17.0
      source-map: 0.8.0-beta.0
      stringify-object: 3.3.0
      strip-comments: 2.0.1
--- a/src/components/layout/ThinContainer.tsx
+++ b/src/components/layout/ThinContainer.tsx
@ -21,7 +21,7 @@ export function ThinContainer(props: ThinContainerProps) {
 export function ThiccContainer(props: ThinContainerProps) {
  return (
    <div
-      className={`mx-auto w-[1000px] max-w-full sm:px-0 ${
+      className={`mx-auto w-[980px] max-w-full px-6 sm:px-0 ${
        props.classNames || ""
      }`}
    >
--- a/src/pages/Discover.tsx
+++ b/src/pages/Discover.tsx
@ -1,13 +1,12 @@
+// Based mfs only use only one 500 line file instead of ten 50 line files.
 import React, { useEffect, useRef, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";

-import { ThinContainer } from "@/components/layout/ThinContainer";
-import { WideContainer } from "@/components/layout/WideContainer";
+import { ThiccContainer } from "@/components/layout/ThinContainer";
 import { Divider } from "@/components/utils/Divider";
 import { Flare } from "@/components/utils/Flare";
-import { HomeLayout } from "@/pages/layouts/HomeLayout";
 import { conf } from "@/setup/config";
 import {
  Category,
@ -19,13 +18,13 @@ import {
  tvCategories,
 } from "@/utils/discover";

+import { SubPageLayout } from "./layouts/SubPageLayout";
 import { PageTitle } from "./parts/util/PageTitle";
 import { get } from "../backend/metadata/tmdb";
 import { Icon, Icons } from "../components/Icon";

 export function Discover() {
  const { t } = useTranslation();
-  const [showBg] = useState<boolean>(false);
  const [genres, setGenres] = useState<Genre[]>([]);
  const [randomMovie, setRandomMovie] = useState<Movie | null>(null);
  const [genreMovies, setGenreMovies] = useState<{
@ -248,7 +247,7 @@ export function Discover() {
            : `${category} Movies`;
    return (
      <div className="relative overflow-hidden mt-2">
-        <h2 className="text-2xl cursor-default font-bold text-white sm:text-3xl md:text-2xl mx-auto pl-6">
+        <h2 className="text-2xl cursor-default font-bold text-white sm:text-3xl md:text-2xl mx-auto pl-5">
          {displayCategory}
        </h2>
        <div
@ -438,7 +437,7 @@ export function Discover() {
  }, [countdown]);

  return (
-    <HomeLayout showBg={showBg}>
+    <SubPageLayout>
      <div className="mb-16 sm:mb-2">
        <Helmet>
          {/* Hide scrollbar lmao */}
@ -450,113 +449,101 @@ export function Discover() {
          `}</style>
        </Helmet>
        <PageTitle subpage k="global.pages.discover" />
-        <ThinContainer>
-          <div className="mt-44 space-y-16 text-center">
-            <div className="relative z-10 mb-16">
-              <h1 className="text-4xl cursor-default font-bold text-white">
-                {t("global.pages.discover")}
-              </h1>
-            </div>
+        <div className="mt-44 space-y-16 text-center">
+          <div className="relative z-10 mb-16">
+            <h1 className="text-4xl cursor-default font-bold text-white">
+              {t("global.pages.discover")}
+            </h1>
          </div>
-        </ThinContainer>
+        </div>
      </div>
-      <WideContainer>
-        <>
-          <div className="flex items-center justify-center mb-6">
-            <button
-              type="button"
-              className="flex items-center space-x-2 rounded-full px-4 text-white py-2 bg-pill-background bg-opacity-50 hover:bg-pill-backgroundHover transition-[background,transform] duration-100 hover:scale-105"
-              onClick={handleRandomMovieClick}
+      <ThiccContainer>
+        <div className="flex items-center justify-center mb-6">
+          <button
+            type="button"
+            className="flex items-center space-x-2 rounded-full px-4 text-white py-2 bg-pill-background bg-opacity-50 hover:bg-pill-backgroundHover transition-[background,transform] duration-100 hover:scale-105"
+            onClick={handleRandomMovieClick}
+          >
+            <span className="flex items-center">
+              {countdown !== null && countdown > 0 ? (
+                <div className="flex items-center inline-block">
+                  <span>Cancel Countdown</span>
+                  <Icon
+                    icon={Icons.X}
+                    className="text-2xl ml-[4.5px] mb-[-0.7px]"
+                  />
+                </div>
+              ) : (
+                <div className="flex items-center inline-block">
+                  <span>Watch Something New</span>
+                  <img
+                    src="/lightbar-images/dice.svg"
+                    alt="Small Image"
+                    style={{
+                      marginLeft: "8px",
+                    }}
+                  />
+                </div>
+              )}
+            </span>
+          </button>
+        </div>
+        {randomMovie && (
+          <div className="mt-4 mb-4 text-center">
+            <p>
+              Now Playing <span className="font-bold">{randomMovie.title}</span>{" "}
+              in {countdown}
+            </p>
+          </div>
+        )}
+        <div className="flex flex-col">
+          {categories.map((category) => (
+            <div
+              key={category.name}
+              id={`carousel-${category.name.toLowerCase().replace(/ /g, "-")}`}
+              className="mt-8"
            >
-              <span className="flex items-center">
-                {countdown !== null && countdown > 0 ? (
-                  <div className="flex items-center inline-block">
-                    <span>Cancel Countdown</span>
-                    <Icon
-                      icon={Icons.X}
-                      className="text-2xl ml-[4.5px] mb-[-0.7px]"
-                    />
-                  </div>
-                ) : (
-                  <div className="flex items-center inline-block">
-                    <span>Watch Something New</span>
-                    <img
-                      src="/lightbar-images/dice.svg"
-                      alt="Small Image"
-                      style={{
-                        marginLeft: "8px",
-                      }}
-                    />
-                  </div>
-                )}
-              </span>
-            </button>
-          </div>
-          {randomMovie && (
-            <div className="mt-4 mb-4 text-center">
-              <p>
-                Now Playing{" "}
-                <span className="font-bold">{randomMovie.title}</span> in{" "}
-                {countdown}
-              </p>
+              {renderMovies(categoryMovies[category.name] || [], category.name)}
            </div>
-          )}
-          <div className="flex flex-col">
-            {categories.map((category) => (
-              <div
-                key={category.name}
-                id={`carousel-${category.name
-                  .toLowerCase()
-                  .replace(/ /g, "-")}`}
-                className="mt-8"
-              >
-                {renderMovies(
-                  categoryMovies[category.name] || [],
-                  category.name,
-                )}
-              </div>
-            ))}
-            {genres.map((genre) => (
-              <div
-                key={genre.id}
-                id={`carousel-${genre.name.toLowerCase().replace(/ /g, "-")}`}
-                className="mt-8"
-              >
-                {renderMovies(genreMovies[genre.id] || [], genre.name)}
-              </div>
-            ))}
-            <div className="flex items-center">
-              <Divider marginClass="mr-5" />
-              <h1 className="text-4xl font-bold text-white mx-auto">Shows</h1>
-              <Divider marginClass="ml-5" />
+          ))}
+          {genres.map((genre) => (
+            <div
+              key={genre.id}
+              id={`carousel-${genre.name.toLowerCase().replace(/ /g, "-")}`}
+              className="mt-8"
+            >
+              {renderMovies(genreMovies[genre.id] || [], genre.name)}
            </div>
-            {tvCategories.map((category) => (
-              <div
-                key={category.name}
-                id={`carousel-${category.name
-                  .toLowerCase()
-                  .replace(/ /g, "-")}`}
-                className="mt-8"
-              >
-                {renderMovies(
-                  categoryShows[category.name] || [],
-                  category.name,
-                  true,
-                )}
-              </div>
-            ))}
-            {tvGenres.map((genre) => (
-              <div
-                key={genre.id}
-                id={`carousel-${genre.name.toLowerCase().replace(/ /g, "-")}`}
-                className="mt-8"
-              >
-                {renderMovies(tvShowGenres[genre.id] || [], genre.name, true)}
-              </div>
-            ))}
+          ))}
+          <div className="flex items-center">
+            <Divider marginClass="mr-5" />
+            <h1 className="text-4xl font-bold text-white mx-auto">Shows</h1>
+            <Divider marginClass="ml-5" />
          </div>
-        </>
-      </WideContainer>
-    </HomeLayout>
+          {tvCategories.map((category) => (
+            <div
+              key={category.name}
+              id={`carousel-${category.name.toLowerCase().replace(/ /g, "-")}`}
+              className="mt-8"
+            >
+              {renderMovies(
+                categoryShows[category.name] || [],
+                category.name,
+                true,
+              )}
+            </div>
+          ))}
+          {tvGenres.map((genre) => (
+            <div
+              key={genre.id}
+              id={`carousel-${genre.name.toLowerCase().replace(/ /g, "-")}`}
+              className="mt-8"
+            >
+              {renderMovies(tvShowGenres[genre.id] || [], genre.name, true)}
+            </div>
+          ))}
+        </div>
+      </ThiccContainer>
+    </SubPageLayout>
  );
 }