fix build errors
Gitea/movie-explorer/pipeline/head This commit looks good Details

This commit is contained in:
andrzej 2024-10-07 18:52:12 +02:00
parent 7764f5bcb1
commit cf9d19e64f
4 changed files with 8 additions and 7 deletions

View File

@ -1,7 +1,7 @@
import './spinner.css' import './spinner.css'
import { MovieWall } from './objects/movie-wall' import { MovieWall } from './objects/movie-wall'
import { HamburgerMenu } from './objects/HamburgerMenu' import { HamburgerMenu } from './objects/HamburgerMenu'
import { useState, useEffect, useRef, useLayoutEffect } from 'react' import { useState, useEffect } from 'react'
import tmdb from './objects/tmdb' import tmdb from './objects/tmdb'
import { Sidebar } from './objects/sidebar' import { Sidebar } from './objects/sidebar'
import { Movie } from './objects/movie-wall' import { Movie } from './objects/movie-wall'
@ -81,7 +81,8 @@ function App() {
while (movies.length < desiredLength && movies.length >= 6) { desiredLength = desiredLength - 6 } while (movies.length < desiredLength && movies.length >= 6) { desiredLength = desiredLength - 6 }
return movies.slice(0, desiredLength) return movies.slice(0, desiredLength)
} }
//TODO: search bar
//TODO: genre search?
return ( return (
<> <>

View File

@ -1,4 +1,4 @@
import { useState, useEffect, useRef } from 'react'; import { useState, useEffect } from 'react';
function getWindowDimensions() { function getWindowDimensions() {
const { innerWidth: width, innerHeight: height } = window; const { innerWidth: width, innerHeight: height } = window;

View File

@ -1,4 +1,4 @@
import React, { useEffect, useLayoutEffect, useRef, useState } from "react" import React, { useState } from "react"
import { Config } from "../App" import { Config } from "../App"
import tmdb from "./tmdb" import tmdb from "./tmdb"
@ -48,7 +48,7 @@ export function MovieWall({ movies, setMovies, config, setChosenMovie, setSimila
const borderColor = isHighlighted ? "border-orange-300" : "border-gray-300" const borderColor = isHighlighted ? "border-orange-300" : "border-gray-300"
posters.push( posters.push(
<Poster className={"w-16 sm:w-28 xl:w-36 aspect-poster rounded-xl border-2 overflow-hidden relative " + borderColor} isHighlighted={isHighlighted} movie={movie} key={movie.id} index={i} <Poster className={"w-16 sm:w-28 xl:w-36 aspect-poster rounded-xl border-2 overflow-hidden relative " + borderColor} movie={movie} key={movie.id} index={i}
listSimilar={tmdb.getSimilar} listSimilar={tmdb.getSimilar}
config={config} config={config}
setMovies={setMovies} setMovies={setMovies}
@ -69,12 +69,11 @@ interface PosterProps extends React.ComponentPropsWithRef<"div"> {
setMovies: React.Dispatch<React.SetStateAction<Array<Movie>>>; setMovies: React.Dispatch<React.SetStateAction<Array<Movie>>>;
setChosenMovie: React.Dispatch<React.SetStateAction<Movie>>; setChosenMovie: React.Dispatch<React.SetStateAction<Movie>>;
setSimilarMoviesAvailable: React.Dispatch<React.SetStateAction<boolean>>; setSimilarMoviesAvailable: React.Dispatch<React.SetStateAction<boolean>>;
isHighlighted: boolean;
className: string className: string
} }
function Poster({ className, movie, config, listSimilar, setMovies, setChosenMovie, setSimilarMoviesAvailable, isHighlighted }: PosterProps) { function Poster({ className, movie, config, listSimilar, setMovies, setChosenMovie, setSimilarMoviesAvailable }: PosterProps) {
function clickHandler() { function clickHandler() {
setChosenMovie(movie) setChosenMovie(movie)
listSimilar(config, movie, setMovies, setSimilarMoviesAvailable) listSimilar(config, movie, setMovies, setSimilarMoviesAvailable)

View File

@ -18,6 +18,7 @@ export function Sidebar({ movie, similarMoviesAvailable, watchProviders, config,
config.language == "en" ? config.language == "en" ?
"Summary unavailable." : "Summary unavailable." :
"" ""
//TODO: fix initial screen
return <div id="sidebar" className={className}> return <div id="sidebar" className={className}>
<div className="sm:h-14 w-fit flex justify-center items-center"> <div className="sm:h-14 w-fit flex justify-center items-center">
<h1 className="font-bold text-base sm:text-lg sm:text-wrap my-1 sm:my-4 overflow-hidden text-center text-balance">{movie?.title ?? "loading"}</h1> <h1 className="font-bold text-base sm:text-lg sm:text-wrap my-1 sm:my-4 overflow-hidden text-center text-balance">{movie?.title ?? "loading"}</h1>