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,7 +449,6 @@ 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">
@@ -458,10 +456,8 @@ export function Discover() {
             </h1>
           </div>
         </div>
-        </ThinContainer>
       </div>
-      <WideContainer>
+      <ThiccContainer>
-        <>
         <div className="flex items-center justify-center mb-6">
           <button
             type="button"
@@ -495,9 +491,8 @@ export function Discover() {
         {randomMovie && (
           <div className="mt-4 mb-4 text-center">
             <p>
-                Now Playing{" "}
+              Now Playing <span className="font-bold">{randomMovie.title}</span>{" "}
-                <span className="font-bold">{randomMovie.title}</span> in{" "}
+              in {countdown}
-                {countdown}
             </p>
           </div>
         )}
@@ -505,15 +500,10 @@ export function Discover() {
           {categories.map((category) => (
             <div
               key={category.name}
-                id={`carousel-${category.name
+              id={`carousel-${category.name.toLowerCase().replace(/ /g, "-")}`}
-                  .toLowerCase()
-                  .replace(/ /g, "-")}`}
               className="mt-8"
             >
-                {renderMovies(
+              {renderMovies(categoryMovies[category.name] || [], category.name)}
-                  categoryMovies[category.name] || [],
-                  category.name,
-                )}
             </div>
           ))}
           {genres.map((genre) => (
@@ -533,9 +523,7 @@ export function Discover() {
           {tvCategories.map((category) => (
             <div
               key={category.name}
-                id={`carousel-${category.name
+              id={`carousel-${category.name.toLowerCase().replace(/ /g, "-")}`}
-                  .toLowerCase()
-                  .replace(/ /g, "-")}`}
               className="mt-8"
             >
               {renderMovies(
@@ -555,8 +543,7 @@ export function Discover() {
             </div>
           ))}
         </div>
-        </>
+      </ThiccContainer>
-      </WideContainer>
+    </SubPageLayout>
-    </HomeLayout>
   );
 }