package.json

@@ -22,12 +22,9 @@
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
-    "postcss": "^8.4.47",
-    "tailwindcss": "^3.4.13",
     "typescript": "^5.2.2",
     "vite": "^5.2.0"
   }

postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

src/App.css

@@ -0,0 +1,213 @@
+:root {
+
+  --poster-width: 15rem;
+  --posters-wide: 10;
+  --posters-gap: 1rem;
+}
+
+#root {
+  height: 100%;
+  width: 100%;
+}
+
+@font-face {
+  font-family: "Jura";
+  src: url("fonts/Jura-VariableFont_wght.ttf");
+}
+
+@font-face {
+  font-family: "RobotoBold";
+  src: url("fonts/Roboto-Bold.ttf")
+}
+
+body {
+
+  font-family: Jura;
+  color: white;
+}
+
+
+main {
+  height: 100%;
+  display: flex;
+  gap: 1em;
+  justify-content: center;
+  align-items: center;
+}
+
+
+
+#movie-wall-container {
+  display: inline-flex;
+  flex-wrap: wrap;
+  flex-basis: 60%;
+  align-items: center;
+  gap: 1em;
+  height: fit-content;
+}
+
+
+#sidebar {
+  flex-basis: 20%;
+  max-height: 100%;
+  min-height: 100%;
+  font-size: 1.6rem;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.5);
+
+  display: grid;
+  grid-template-rows: 1fr 1fr 2fr 1fr;
+  align-items: center;
+  justify-content: center;
+
+  h1 {
+    font-size: 1.2em;
+    font-family: RobotoBold;
+    grid-row: 1/ span 1;
+    height: fit-content;
+    overflow: hidden;
+
+  }
+
+  a {
+    display: contents;
+  }
+
+
+  .chosen-movie-poster {
+    grid-row: 2/ span 1;
+    object-fit: cover;
+    display: flex;
+    justify-content: center;
+  }
+
+
+  #summary {
+    overflow: scroll;
+    max-height: 100%;
+    grid-row: 3/ span 1;
+  }
+
+  p {
+    font-family: Jura;
+    padding: 0.2em;
+    margin: 0.1em 0.2em 0.1em 0.2em;
+  }
+
+  footer {
+    font-size: 1.2rem;
+    grid-row: 4/ span 1;
+    overflow: hidden;
+  }
+
+}
+
+.poster {
+  width: var(--poster-width);
+  display: grid;
+  box-shadow: 1em 1em 1em rgba(0, 0, 0, 0.5);
+  border-radius: 1em;
+  overflow: hidden;
+
+  img {
+    height: 100%;
+    animation: fadeImage 0.5s;
+    animation-fill-mode: forwards;
+    aspect-ratio: 2/3;
+  }
+}
+
+.poster>* {
+  grid-area: 1/1;
+}
+
+.highlighted {
+  border: 0.1em solid gold;
+}
+
+
+.overlay {
+  margin: 0;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  z-index: 2;
+  opacity: 0;
+}
+
+.highlighted>.overlay {
+  background-color: rgba(255, 222, 123, 0.5);
+}
+
+.overlay:hover {
+  opacity: 1;
+}
+
+@keyframes fadeImage {
+  from {
+    filter: blur(5rem);
+  }
+
+  to {
+    filter: blur(0);
+  }
+}
+
+
+#background {
+  background-color: black;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+
+}
+
+.CrossfadeImage {
+  width: 100%;
+  height: 100%;
+  filter: blur(1rem) brightness(0.4);
+}
+
+#watch-providers-container {
+  max-width: 100%;
+  display: flex;
+  gap: 0.2rem;
+  justify-content: space-around;
+
+  .watch-providers {
+    text-align: center;
+    border: 1rem white;
+
+    h1 {
+      font-size: 1.4rem;
+    }
+
+  }
+
+  .watch-logos-container {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 0.4rem;
+    justify-content: center;
+
+
+    .watch-logo {
+      aspect-ratio: 1/1;
+      max-height: 2rem;
+
+      img {
+        width: 100%;
+      }
+    }
+
+  }
+}
+
+#hamburger {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 10;
+}

src/App.tsx

@@ -1,3 +1,5 @@
+import './defaults.css'
+import './App.css'
 import './spinner.css'
 import { MovieWall } from './objects/movie-wall'
 import { HamburgerMenu } from './objects/HamburgerMenu'
@@ -66,20 +68,20 @@ function App() {
   }
   return (
     <>
-      <div id="background" className="-z-10 absolute">
+      <div id="background">
         <CrossfadeImage src={backdrop} style={crossfadeImageStyles} />
       </div>
-      <HamburgerMenu setConfig={setConfig} />
+      <main >
-      <main className="flex justify-center gap-8">
+        <HamburgerMenu setConfig={setConfig} />
-        <Sidebar className="flex flex-col" movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} watchProviders={watchProviders} config={config} />
+        <Sidebar movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} watchProviders={watchProviders} config={config} />
-        <MovieWall
+        <div id="movie-wall-container">
-          className="flex flex-wrap gap-2 max-w-6xl"
+          <MovieWall movies={movies}
-          movies={movies}
+            setMovies={setMovies}
-          setMovies={setMovies}
+            config={config}
-          config={config}
+            setChosenMovie={setChosenMovie}
-          setChosenMovie={setChosenMovie}
+            setSimilarMoviesAvailable={setSimilarMoviesAvailable}
-          setSimilarMoviesAvailable={setSimilarMoviesAvailable}
+          />
-        />
+        </div>
       </main>
     </>
   )

src/defaults.css

@@ -0,0 +1,69 @@
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+img {
+	display: block;
+	max-width: 100%;
+}
+
+menu:not(article menu),
+ol:not(article ol),
+ul:not(article ul) {
+	list-style: none;
+}
+
+menu,
+ol,
+ul {
+	padding-left: 0;
+}
+
+article ol,
+article ul {
+	list-style-position: inside;
+}
+
+a {
+	/* Places underlines below the descenders */
+	text-underline-position: under;
+
+
+	/* Sets the thickness as a percentage of the font size */
+	text-decoration-thickness: 8;
+}
+
+/* <html> = the root */
+html {
+	font-size: 62.5%;
+	/* (62.5/100) * 16px = 10px */
+	-webkit-text-size-adjust: none;
+	/* for iOS Safari */
+	text-size-adjust: none;
+	/* for other mobile browsers */
+	height: 100vh;
+}
+
+body {
+	margin: 0;
+	height: 100%;
+
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	html {
+		scroll-behavior: smooth;
+	}
+}
+
+label,
+button,
+select,
+summary,
+[type=radio],
+[type=submit],
+[type=checkbox] {
+	cursor: pointer;
+}

src/index.css

@@ -1,3 +1,73 @@
-@tailwind base;
+:root {
-@tailwind components;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-@tailwind utilities;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+button:hover {
+  border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+
+  a:hover {
+    color: #747bff;
+  }
+
+  button {
+    background-color: #f9f9f9;
+  }
+}

src/objects/movie-wall.tsx

@@ -35,17 +35,16 @@ interface MovieWallProps extends React.ComponentPropsWithRef<"div"> {
   setChosenMovie: React.Dispatch<React.SetStateAction<any>>;
   setSimilarMoviesAvailable: React.Dispatch<React.SetStateAction<boolean>>;
   config: Config;
-  className: string
 }
 
-export function MovieWall({ movies, setMovies, config, setChosenMovie, setSimilarMoviesAvailable, className }: MovieWallProps) {
+export function MovieWall({ movies, setMovies, config, setChosenMovie, setSimilarMoviesAvailable }: MovieWallProps) {
 
   const posters: React.ReactElement[] = []
   for (let i = 0; i < movies.length; i++) {
     const movie = movies[i]
     const isHighlighted = movie.vote_average ? movie.vote_average > 6 : false
     posters.push(
-      <Poster className="w-36 h-58 rounded-xl overflow-hidden flex justify-center relative" isHighlighted={isHighlighted} movie={movie} key={movie.id} index={i}
+      <Poster isHighlighted={isHighlighted} movie={movie} key={movie.id} index={i}
         listSimilar={tmdb.getSimilar}
         config={config}
         setMovies={setMovies}
@@ -53,9 +52,9 @@ export function MovieWall({ movies, setMovies, config, setChosenMovie, setSimila
         setSimilarMoviesAvailable={setSimilarMoviesAvailable} />
     )
   }
-  return <div className={className}>
+  return <>
     {posters}
-  </div>
+  </>
 }
 
 interface PosterProps extends React.ComponentPropsWithRef<"div"> {
@@ -67,32 +66,34 @@ interface PosterProps extends React.ComponentPropsWithRef<"div"> {
   setChosenMovie: React.Dispatch<React.SetStateAction<Movie>>;
   setSimilarMoviesAvailable: React.Dispatch<React.SetStateAction<boolean>>;
   isHighlighted: boolean;
-  className: string
 }
 
 
-function Poster({ className, movie, config, listSimilar, setMovies, setChosenMovie, setSimilarMoviesAvailable, isHighlighted }: PosterProps) {
+function Poster({ movie, config, listSimilar, setMovies, setChosenMovie, setSimilarMoviesAvailable, isHighlighted }: PosterProps) {
   function clickHandler() {
     setChosenMovie(movie)
     listSimilar(config, movie, setMovies, setSimilarMoviesAvailable)
   }
   const [isLoading, setIsLoading] = useState(true)
   const [hasError, setHasError] = useState(false)
-  return <><div className={className} >
+  const classes = [
+    "poster",
+    isHighlighted ? "highlighted" : ""
+  ].join(" ")
+  return <><div className={classes} >
     {isLoading ?
-      <div className="m-auto text-center h-full w-full fixed">
+      <div className="spinner-container">
         <div className="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div>
-      : <div className="z-10 h-full w-full absolute cursor-pointer" onClick={() => clickHandler()}>
+      : <div className="overlay" onClick={() => clickHandler()}>
-        hello
       </div>
     }
-    {hasError ?? <div className="m-auto text-center">⚠️</div>}
+    {hasError ?? <div className="spinner-container">⚠️</div>}
     <img
       src={tmdb.makeImgUrl(movie.poster_path ?? "")}
       onLoad={() => setIsLoading(false)}
       onError={() => setHasError(true)}
     />
-  </div >
+  </div>
   </>
 }
 

src/objects/sidebar.tsx

@@ -10,15 +10,14 @@ export interface SidebarProps extends React.ComponentPropsWithRef<"div"> {
   similarMoviesAvailable: boolean;
   watchProviders: WatchProviders;
   config: Config;
-  className: string
 }
-export function Sidebar({ movie, similarMoviesAvailable, watchProviders, config, className }: SidebarProps) {
+export function Sidebar({ movie, similarMoviesAvailable, watchProviders, config }: SidebarProps) {
   const apology = config.language == "es" ?
     "Resumen no disponible" :
     config.language == "en" ?
       "Summary unavailable." :
       ""
-  return <div id="sidebar" className={className}>
+  return <div id="sidebar">
     <h1>{movie?.title ?? "loading"}</h1>
     <a href={tmdb.makeMovieLink(movie)} target="_blank" rel="noopener noreferrer">
       <CrossfadeImage src={tmdb.makeImgUrl(movie.poster_path ?? "")} containerClass="chosen-movie-poster" style={{ objectFit: "cover", height: "100%" }} />

src/objects/tmdb.tsx

@@ -28,25 +28,20 @@ export default {
 * @returns {boolean}
 */
   getPopular: async function({ language, region, page }: Config, callback: Function) {
-    try {
+    let res = await tmdb.get('/popular',
-      let res = await tmdb.get('/popular',
+      {
-        {
+        params: {
-          params: {
+          language,
-            language,
+          region,
-            region,
+          page
-            page
+        }
-          }
+      })
-        })
+    if (res.status === 200) {
-      console.log("POPULAR MOVIES: " + JSON.stringify(res))
+      res = res.data.results
-      if (res.status === 200) {
+      callback(res)
-        res = res.data.results
+      return true
-        callback(res)
+    } else {
-        return true
+      throw Error("API call failed! Response: " + JSON.stringify(res))
-      } else {
-        throw Error("API call failed! Response: " + JSON.stringify(res))
-      }
-    } catch (error) {
-      console.error(error)
     }
   },
   /**

src/objects/whereToWatch.tsx

@@ -77,7 +77,12 @@ function watchProvidersExist(watchProviders: any) {
 
 }
 export function WhereToWatch({ watchProviders, config }: WhereToWatchProps) {
+  console.log("Watch providers exist?" + watchProvidersExist(watchProviders))
   if (!watchProvidersExist(watchProviders)) {
+    console.group()
+    console.log("Watch providers (WhereToWatch)")
+    console.log(watchProviders)
+    console.groupEnd()
     return <p>{config.language == "es" ? "Por el momento no hay opciónes streaming." : config.language == "en" ? "There are no online viewing options right now." : ""}</p>
   }
   return <><footer id="sidebar-footer">

src/spinner.css

@@ -1,13 +1,3 @@
-/* .overlay { */
-/*   margin: 0; */
-/*   height: 100%; */
-/*   width: 100%; */
-/*   background-color: rgba(255, 255, 255, 0.5); */
-/*   cursor: pointer; */
-/*   z-index: 2; */
-/*   opacity: 0; */
-/* } */
-/**/
 .spinner-container {
 	margin: auto;
 	text-align: center;

tailwind.config.js

@@ -1,8 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ["./dist/index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};