From ee00d0e853a3debb1087b6d682a04f21e03d8de9 Mon Sep 17 00:00:00 2001 From: Captain Jack Sparrow <163903675+sussy-code@users.noreply.github.com> Date: Sat, 27 Apr 2024 15:04:23 +0000 Subject: [PATCH] Fix the lightbar bug on discover page... (MW has a jank ahh impl) --- package.json | 2 +- pnpm-lock.yaml | 58 +++---- src/components/layout/ThinContainer.tsx | 2 +- src/pages/Discover.tsx | 203 +++++++++++------------- 4 files changed, 126 insertions(+), 139 deletions(-) diff --git a/package.json b/package.json index e64f21fc..da2b5635 100644 --- 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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ec67282d..e473f70f 100644 --- 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 diff --git a/src/components/layout/ThinContainer.tsx b/src/components/layout/ThinContainer.tsx index b88f1cab..f4116d94 100644 --- 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 (
diff --git a/src/pages/Discover.tsx b/src/pages/Discover.tsx index b0d9cb18..c4233241 100644 --- 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(false); const [genres, setGenres] = useState([]); const [randomMovie, setRandomMovie] = useState(null); const [genreMovies, setGenreMovies] = useState<{ @@ -248,7 +247,7 @@ export function Discover() { : `${category} Movies`; return (
-

+

{displayCategory}

+
{/* Hide scrollbar lmao */} @@ -450,113 +449,101 @@ export function Discover() { `} - -
-
-

- {t("global.pages.discover")} -

-
+
+
+

+ {t("global.pages.discover")} +

- +
- - <> -
- +
+ {randomMovie && ( +
+

+ Now Playing {randomMovie.title}{" "} + in {countdown} +

+
+ )} +
+ {categories.map((category) => ( +
- - {countdown !== null && countdown > 0 ? ( -
- Cancel Countdown - -
- ) : ( -
- Watch Something New - Small Image -
- )} - - -
- {randomMovie && ( -
-

- Now Playing{" "} - {randomMovie.title} in{" "} - {countdown} -

+ {renderMovies(categoryMovies[category.name] || [], category.name)}
- )} -
- {categories.map((category) => ( -
- {renderMovies( - categoryMovies[category.name] || [], - category.name, - )} -
- ))} - {genres.map((genre) => ( -
- {renderMovies(genreMovies[genre.id] || [], genre.name)} -
- ))} -
- -

Shows

- + ))} + {genres.map((genre) => ( +
+ {renderMovies(genreMovies[genre.id] || [], genre.name)}
- {tvCategories.map((category) => ( -
- {renderMovies( - categoryShows[category.name] || [], - category.name, - true, - )} -
- ))} - {tvGenres.map((genre) => ( -
- {renderMovies(tvShowGenres[genre.id] || [], genre.name, true)} -
- ))} + ))} +
+ +

Shows

+
- - - + {tvCategories.map((category) => ( +
+ {renderMovies( + categoryShows[category.name] || [], + category.name, + true, + )} +
+ ))} + {tvGenres.map((genre) => ( +
+ {renderMovies(tvShowGenres[genre.id] || [], genre.name, true)} +
+ ))} +
+ + ); }