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

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",

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
+    specifier: ^4.17.0
-    version: 4.16.4
+    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/pluginutils': 3.1.0(@rollup/wasm-node@4.17.0)
-      rollup: /@rollup/wasm-node@4.16.4
+      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:
+  /@rollup/wasm-node@4.17.0:
-    resolution: {integrity: sha512-/1na873kzeWKlNU0lbXgmhJCTll0gmniDQol2//y2JCE60WGyoSThjiAB8RsZ0yfjLiFfo2uFS6DvWfwzmYbrA==}
+    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-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.16.4)
+      '@rollup/plugin-node-resolve': 15.2.3(@rollup/wasm-node@4.17.0)
-      '@rollup/plugin-replace': 2.4.2(@rollup/wasm-node@4.16.4)
+      '@rollup/plugin-replace': 2.4.2(@rollup/wasm-node@4.17.0)
-      '@rollup/plugin-terser': 0.4.4(@rollup/wasm-node@4.16.4)
+      '@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

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 || ""
       }`}
     >

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 { ThiccContainer } from "@/components/layout/ThinContainer";
-import { WideContainer } from "@/components/layout/WideContainer";
 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="mt-44 space-y-16 text-center">
+          <div className="relative z-10 mb-16">
-            <div className="relative z-10 mb-16">
+            <h1 className="text-4xl cursor-default font-bold text-white">
-              <h1 className="text-4xl cursor-default font-bold text-white">
+              {t("global.pages.discover")}
-                {t("global.pages.discover")}
+            </h1>
-              </h1>
-            </div>
           </div>
-        </ThinContainer>
+        </div>
       </div>
-      <WideContainer>
+      <ThiccContainer>
-        <>
+        <div className="flex items-center justify-center mb-6">
-          <div className="flex items-center justify-center mb-6">
+          <button
-            <button
+            type="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"
-              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}
-              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">
+              {renderMovies(categoryMovies[category.name] || [], category.name)}
-                {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">
+          {genres.map((genre) => (
-            {categories.map((category) => (
+            <div
-              <div
+              key={genre.id}
-                key={category.name}
+              id={`carousel-${genre.name.toLowerCase().replace(/ /g, "-")}`}
-                id={`carousel-${category.name
+              className="mt-8"
-                  .toLowerCase()
+            >
-                  .replace(/ /g, "-")}`}
+              {renderMovies(genreMovies[genre.id] || [], genre.name)}
-                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" />
             </div>
-            {tvCategories.map((category) => (
+          ))}
-              <div
+          <div className="flex items-center">
-                key={category.name}
+            <Divider marginClass="mr-5" />
-                id={`carousel-${category.name
+            <h1 className="text-4xl font-bold text-white mx-auto">Shows</h1>
-                  .toLowerCase()
+            <Divider marginClass="ml-5" />
-                  .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>
-        </>
+          {tvCategories.map((category) => (
-      </WideContainer>
+            <div
-    </HomeLayout>
+              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>
   );
 }