styling

src/App.css

@@ -1,15 +1,45 @@
-.flow-container {
+:root {
+
+  --poster-width: 10rem;
+  --posters-wide: 10;
+}
+
+#root {
+  height: 100%;
+  width: 100%;
+}
+
+main {
   display: flex;
+  justify-content: center;
+
+  height: 100%;
+  background-size: cover;
+
+}
+
+h1 {
+  margin: 0;
+}
+
+.flow-container {
+  display: inline-flex;
   flex-wrap: wrap;
-  width: 80%;
+  align-items: center;
-  margin: auto;
+  justify-content: center;
+  flex-basis: calc(var(--poster-width)*var(--posters-wide));
+}
+
+#sidebar {
+  flex: 0 0 10rem;
 }
 
 .poster {
   font-size: 2rem;
+  background-size: cover;
+  width: var(--poster-width);
   aspect-ratio: 3/4.5;
-  width: 25rem;
+  flex: 0 0 auto;
-
 }
 
 
@@ -18,22 +48,9 @@
   margin: 0;
   height: 100%;
   width: 100%;
-  font-size: inherit;
+  background-color: rgba(255, 255, 255, 0.5);
-  color: white;
-  background-color: rgba(0, 0, 0, 0.5);
   opacity: 0;
-
+  cursor: pointer;
-  p {
-    font-size: 0.8em;
-  }
-
-  h1 {
-    font-size: 1.6em;
-    margin: 0;
-
-  }
-
-
 }
 
 .overlay:hover {

src/App.tsx

@@ -3,6 +3,7 @@ import './App.css'
 import { MovieWall } from './objects/movie-wall'
 import { useState, useEffect } from 'react'
 import tmdb from './objects/tmdb'
+import { Sidebar } from './objects/sidebar'
 
 export type Config = {
   language: string,
@@ -17,18 +18,23 @@ function App() {
     page: 1
   })
   const [movies, setMovies] = useState([])
+  const [backdrop, setBackdrop] = useState("")
   useEffect(() => { tmdb.getPopular(config, setMovies) }, [])
-  useEffect(() => { console.log(movies) }, [movies])
+  useEffect(() => {
+    if (movies?.[0]) {
+      tmdb.getBackdrop(movies[0], setBackdrop)
+    }
+  }, [movies])
   return (
     <>
       <header>
         <h1>Movie Explorer</h1>
       </header>
-      <main>
+      <main style={{ backgroundImage: backdrop }}>
-        Let's explore!
         <div className='flow-container'>
           <MovieWall movies={movies} setMovies={setMovies} config={config} />
         </div>
+        <Sidebar movie={movies?.[0]} />
       </main>
 
     </>

src/defaults.css

@@ -43,6 +43,13 @@ html {
 	/* for iOS Safari */
 	text-size-adjust: none;
 	/* for other mobile browsers */
+	height: 100vh;
+}
+
+body {
+	margin: 0;
+	height: 100%;
+
 }
 
 @media (prefers-reduced-motion: no-preference) {

src/functions.tsx

@@ -16,4 +16,10 @@ export function relocateArrayItem(array: Array<any>, from: number, to: number) {
   console.log(newArray)
   return newArray
 }
+/**
+ * Returns a complete tmdb image url
+ */
+export function makeImgUrl(path: string) {
+  return "url(https://image.tmdb.org/t/p/w500" + path + ")"
+}
 

src/index.css

@@ -18,13 +18,13 @@ a {
   color: #646cff;
   text-decoration: inherit;
 }
+
 a:hover {
   color: #535bf2;
 }
 
 body {
   margin: 0;
-  display: flex;
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
@@ -46,9 +46,11 @@ button {
   cursor: pointer;
   transition: border-color 0.25s;
 }
+
 button:hover {
   border-color: #646cff;
 }
+
 button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
@@ -59,9 +61,11 @@ button:focus-visible {
     color: #213547;
     background-color: #ffffff;
   }
+
   a:hover {
     color: #747bff;
   }
+
   button {
     background-color: #f9f9f9;
   }

src/main.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
-import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>

src/objects/movie-wall.tsx

@@ -1,7 +1,7 @@
-import React, { useState } from "react"
+import React from "react"
-import { relocateArrayItem } from "../functions"
 import { Config } from "../App"
 import tmdb from "./tmdb"
+import { makeImgUrl } from "../functions"
 
 export type Movie = {
   id: number
@@ -56,16 +56,14 @@ interface PosterProps extends React.ComponentPropsWithRef<"div"> {
 
 
 function Poster({ movie, config, listSimilar, setMovies }: PosterProps) {
-  const [style, setStyle] = useState({
+  const style = {
-    backgroundImage: "url(https://image.tmdb.org/t/p/w500/" + movie.poster_path + ")",
+    backgroundImage: makeImgUrl(movie.poster_path),
     backgroundSize: "cover",
-    alignSelf: "auto",
+    // alignSelf: "auto",
     color: "inherit"
-  })
+  }
   return <div className="poster" style={style}>
     <div className="overlay" onClick={() => { listSimilar(config, movie, setMovies) }}>
-      <h1>{movie.title}</h1>
-      <p>{movie.overview}</p>
 
     </div>
   </div>

src/objects/sidebar.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Movie } from "./movie-wall";
+export interface SidebarProps extends React.ComponentPropsWithRef<"div"> {
+  movie: Movie;
+}
+export function Sidebar({ movie }: SidebarProps) {
+  const style = {
+    backgroundImage: "url(https://image.tmdb.org/t/p/w500/" + movie?.poster_path + ")",
+    backgroundSize: "cover",
+  }
+  return <div id="sidebar" style={style}>
+    <h1>{movie?.title ?? "loading"}</h1>
+    <p>{movie?.overview ?? "loading"}</p>
+  </div>
+
+
+}

src/objects/tmdb.tsx

@@ -2,6 +2,7 @@ import axios from 'axios'
 import * as auth from '../auth.json';
 import { Movie } from './movie-wall';
 import { Config } from '../App';
+import { makeImgUrl } from '../functions';
 
 const tmdb = axios.create({
   baseURL: `https://api.themoviedb.org/3/movie`,
@@ -47,6 +48,7 @@ export default {
     console.log(res)
     if (res.status === 200) {
       const array: Array<Movie> = res.data.results
+      array.splice(18)
       array.unshift(movie)
       callback(array)
       return true
@@ -54,6 +56,25 @@ export default {
       throw Error("API call failed! Response: " + JSON.stringify(res))
     }
 
+  },
+  /**
+   *Calls TMDB/images, and sets the backdrop state accordingly
+   * 
+   */
+  getBackdrop: async function(movie: Movie, setBackdrop: Function) {
+    let res = await tmdb.get(movie.id + '/images')
+    console.log(res)
+    if (res.status === 200) {
+      const file_path = res.data.backdrops[0].file_path
+      console.log("file_path:" + file_path)
+      const imgUrl = makeImgUrl(file_path)
+      console.log("imgUrl: " + imgUrl)
+      setBackdrop(imgUrl)
+    } else {
+      throw Error("API call failed! Response: " + JSON.stringify(res))
+    }
+
+
   }
 
 }