Implement placeholder image and randomly sort catogorys

README.md

@@ -28,7 +28,7 @@
 Type the following commands into your terminal / command line to run Sudo-Flix locally
 ```bash
 git clone https://github.com/sussy-code/smov.git
-cd sudo-flix
+cd smov
 git pull
 pnpm install
 pnpm run dev
@@ -40,7 +40,7 @@ Then you can visit the local instance [here](http://localhost:5173) or, at local
 To update a sudo-flix instance you can type the below commands into a terminal at the root of your project.
 ```bash
 git remote add upstream https://github.com/sussy-code/smov.git
-git fetch sudo-flix  # Grab the contents of the new remote source
+git fetch upstream # Grab the contents of the new remote source
 git checkout <YOUR_MAIN_BRANCH>  # Most likely this would be `origin/main`
 git merge upstream/main
 # * Fix any conflicts present during merge *

src/pages/Discover.tsx

@@ -4,6 +4,7 @@ import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
+import { get } from "@/backend/metadata/tmdb";
 import { ThiccContainer } from "@/components/layout/ThinContainer";
 import { Divider } from "@/components/utils/Divider";
 import { Flare } from "@/components/utils/Flare";
@@ -20,7 +21,7 @@ import {
 
 import { SubPageLayout } from "./layouts/SubPageLayout";
 import { PageTitle } from "./parts/util/PageTitle";
-import { get } from "../backend/metadata/tmdb";
+import placeholderImageLogo from "../../public/placeholder.png";
 import { Icon, Icons } from "../components/Icon";
 
 export function Discover() {
@@ -56,6 +57,15 @@ export function Discover() {
           language: "en-US",
         });
 
+        // Shuffle the movies
+        for (let i = data.results.length - 1; i > 0; i -= 1) {
+          const j = Math.floor(Math.random() * (i + 1));
+          [data.results[i], data.results[j]] = [
+            data.results[j],
+            data.results[i],
+          ];
+        }
+
         setCategoryMovies((prevCategoryMovies) => ({
           ...prevCategoryMovies,
           [category.name]: data.results,
@@ -78,6 +88,15 @@ export function Discover() {
           language: "en-US",
         });
 
+        // Shuffle the TV shows
+        for (let i = data.results.length - 1; i > 0; i -= 1) {
+          const j = Math.floor(Math.random() * (i + 1));
+          [data.results[i], data.results[j]] = [
+            data.results[j],
+            data.results[i],
+          ];
+        }
+
         setCategoryShows((prevCategoryShows) => ({
           ...prevCategoryShows,
           [category.name]: data.results,
@@ -126,6 +145,16 @@ export function Discover() {
           with_genres: genreId.toString(),
           language: "en-US",
         });
+
+        // Shuffle the TV shows
+        for (let i = data.results.length - 1; i > 0; i -= 1) {
+          const j = Math.floor(Math.random() * (i + 1));
+          [data.results[i], data.results[j]] = [
+            data.results[j],
+            data.results[i],
+          ];
+        }
+
         setTVShowGenres((prevTVShowGenres) => ({
           ...prevTVShowGenres,
           [genreId]: data.results,
@@ -273,7 +302,8 @@ export function Discover() {
           onMouseLeave={handleMouseLeave}
           onWheel={(e) => handleWheel(e, categorySlug)}
         >
-          {medias.slice(0, 20).map((media) => (
+          {/* Ik its an odd number and i dont give a shit */}
+          {medias.slice(0, 26).map((media) => (
             <a
               key={media.id}
               onClick={() =>
@@ -294,8 +324,12 @@ export function Discover() {
                   className="rounded-xl bg-background-main group-hover:opacity-100"
                 />
                 <img
-                  src={`https://image.tmdb.org/t/p/w500${media.poster_path}`}
+                  src={
-                  alt="failed to fetch :("
+                    media.poster_path
+                      ? `https://image.tmdb.org/t/p/w500${media.poster_path}`
+                      : placeholderImageLogo
+                  }
+                  alt={media.poster_path ? "" : "failed to fetch :("}
                   loading="lazy"
                   className="rounded-xl relative"
                 />
@@ -415,6 +449,13 @@ export function Discover() {
 
           movies.push(...data.results);
         }
+
+        // Shuffle the movies
+        for (let i = movies.length - 1; i > 0; i -= 1) {
+          const j = Math.floor(Math.random() * (i + 1));
+          [movies[i], movies[j]] = [movies[j], movies[i]];
+        }
+
         setGenreMovies((prevGenreMovies) => ({
           ...prevGenreMovies,
           [genreId]: movies,