fikset scrolling mellom filmer i detailed view

src/App.tsx

@@ -23,6 +23,16 @@ import './App.css';
 function App() {
   // brukes for å kunne velge film å vise detaljer om
   const [selectedMovie, setSelectedMovie] = useState<Movie | null>(null);
+  const [selectedList, setSelectedList] = useState<Movie[]>([]);
+
+  function handleSelectMovie(movie: Movie, list: Movie[]) {
+    setSelectedMovie(movie);
+    setSelectedList(list);
+  }
+
+  function handleNavigate(movie: Movie) {
+    setSelectedMovie(movie);
+  }
 
   // sorterings-funksjonalitet ?
   const [sortBy, setSortBy] = useSessionStorage<SortOption>(
@@ -68,27 +78,29 @@ function App() {
             minRating={minRating}
             isFavorite={isFavorite}
             toggleFavorite={toggleFavorite}
-            onSelectMovie={setSelectedMovie}
+            onSelectMovie={handleSelectMovie}
           />
         ) : view === 'favoritter' ? (
           <FavoritesLayout
             favoriteIds={favoriteIds}
             isFavorite={isFavorite}
             toggleFavorite={toggleFavorite}
-            onSelectMovie={setSelectedMovie}
+            onSelectMovie={handleSelectMovie}
           />
         ) : (
           <MainLayout
             isFavorite={isFavorite}
             toggleFavorite={toggleFavorite}
-            onSelectMovie={setSelectedMovie}
+            onSelectMovie={handleSelectMovie}
           />
         )}
       </main>
 
       {selectedMovie && (
         <MovieDetails
           movie={selectedMovie}
+          movies={selectedList}
+          onNavigate={handleNavigate}
           isFavorite={isFavorite(selectedMovie.id)}
           onToggleFavorite={toggleFavorite}
           onClose={() => setSelectedMovie(null)}

src/components/MovieDetails.css

@@ -13,12 +13,16 @@
   width: 60vw;
   max-width: 800px;
   max-height: 80vh;
-  overflow-y: auto;
+  overflow: hidden; 
   background: #111;
   border-radius: 1rem;
   color: white;
+  display: flex;
+  flex-direction: column;
 }
 
+
+
 .details-backdrop {
   width: 100%;
   height: 300px;
@@ -44,9 +48,11 @@
   text-align: center;
 }
 
-.details-content h2 {
-  margin: 0 0 0.25rem;
-  color: beige;
+.details-content {
+  padding: 1.25rem 1.5rem;
+  text-align: center;
+  overflow-y: auto;    
+  flex: 1;
 }
 
 .details-meta {
@@ -85,6 +91,43 @@
   cursor: pointer;
 }
 
+.details-nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+  width: 44px;
+  height: 44px;
+  border: none;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  font-size: 1.5rem;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.details-nav:hover {
+  background: rgba(0, 0, 0, 0.75);
+}
+
+.details-nav:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
+
+.details-nav-prev {
+  left: 12px;
+}
+
+.details-nav-next {
+  right: 12px;
+}
+
 /* Legger til litt css for å gjøre details litt større npår du trykker innpå på telefon. Som det står nå tar 
 det er bestemt prosent når du åpner, jeg vil gjøre den større, MEN bare på telenfon*/
 

src/components/MovieDetails.tsx

@@ -6,13 +6,17 @@ import { useEffect, useRef } from 'react';
 
 type MovieDetailsProps = {
   movie: Movie;
+  movies: Movie[];
+  onNavigate: (movie: Movie) => void;
   isFavorite: boolean;
   onToggleFavorite: (id: number) => void;
   onClose: () => void;
 };
 
 export function MovieDetails({
   movie,
+  movies,
+  onNavigate,
   isFavorite,
   onToggleFavorite,
   onClose,
@@ -22,6 +26,18 @@ export function MovieDetails({
   const cardRef = useRef<HTMLDivElement>(null);
   const previouslyFocused = useRef<HTMLElement | null>(null);
 
+  const currentIndex = movies.findIndex((m) => m.id === movie.id);
+  const hasPrev = currentIndex > 0;
+  const hasNext = currentIndex !== -1 && currentIndex < movies.length - 1;
+
+  function goPrev() {
+    if (hasPrev) onNavigate(movies[currentIndex-1]);
+  }
+
+  function goNext() {
+    if (hasNext) onNavigate(movies[currentIndex+1]);
+  }
+
   useEffect(() => {
     // Må leses før vi flytter fokus, ellers peker den på dialogen selv.
     previouslyFocused.current = document.activeElement as HTMLElement | null;
@@ -39,6 +55,16 @@ export function MovieDetails({
         return;
       }
 
+      if (e.key === 'ArrowLeft') {
+        goPrev();
+        return;
+      }
+
+      if (e.key === 'ArrowRight') {
+        goNext();
+        return;
+      }
+
       if (e.key !== 'Tab') return;
 
       const card = cardRef.current;
@@ -75,6 +101,7 @@ export function MovieDetails({
     return () => document.body.classList.remove('modal-open');
   }, []);
 
+  console.log('MovieDetails render', { movieId: movie.id, moviesLength: movies.length, currentIndex, hasPrev, hasNext });
   return (
     <div className="details-overlay" onClick={onClose}>
       <div
@@ -86,6 +113,27 @@ export function MovieDetails({
         ref={cardRef}
         tabIndex={-1}
       >
+        {hasPrev && (
+          <button
+            type="button"
+            className="details-nav details-nav-prev"
+            aria-label="Forrige film"
+            onClick={goPrev}
+          >
+            ‹
+          </button>
+        )}
+        {hasNext && (
+          <button
+            type="button"
+            className="details-nav details-nav-next"
+            aria-label="Neste film"
+            onClick={goNext}
+          >
+            ›
+          </button>
+        )}
+
         <img
           src={`https://image.tmdb.org/t/p/w1280${movie.backdrop_path}`}
           alt={movie.title}

src/components/MovieList.tsx

@@ -11,7 +11,7 @@ type MovieListProps = {
   movies: Movie[];
   isFavorite: (id: number) => boolean;
   onToggleFavorite: (id: number) => void;
-  onSelectMovie: (movie: Movie) => void;
+  onSelectMovie: (movie: Movie, list: Movie[]) => void;
 };
 
 export function MovieList({
@@ -30,7 +30,7 @@ export function MovieList({
           movie={movie}
           isFavorite={isFavorite(movie.id)}
           onToggleFavorite={onToggleFavorite}
-          onSelectMovie={onSelectMovie}
+          onSelectMovie={() => onSelectMovie(movie, movies)}
           key={movie.id}
         />
       ))}

src/components/TrendingPreview.tsx

@@ -6,7 +6,7 @@ const tmdbURL = `https://image.tmdb.org/t/p/w1280`;
 
 type TrendingPreviewProps = {
   movies: Movie[];
-  onSelectMovie: (movie: Movie) => void;
+  onSelectMovie: (movie: Movie, list: Movie[]) => void;
 };
 
 export function TrendingPreview({
@@ -84,7 +84,7 @@ export function TrendingPreview({
         type="button"
         aria-label={`Vis detaljer om ${movie.title}`}
         className="hero-zone hero-zone-middle"
-        onClick={() => onSelectMovie(movie)}
+        onClick={() => onSelectMovie(movie, movies)}
       />
 
       <button

src/layout/FavoritesLayout.tsx

@@ -7,7 +7,7 @@ type FavoritesLayoutProps = {
   favoriteIds: number[];
   isFavorite: (id: number) => boolean;
   toggleFavorite: (id: number) => void;
-  onSelectMovie: (movie: Movie) => void;
+  onSelectMovie: (movie: Movie, list: Movie[]) => void;
 };
 
 export function FavoritesLayout({
@@ -30,7 +30,7 @@ export function FavoritesLayout({
           movies={movies}
           isFavorite={isFavorite}
           onToggleFavorite={toggleFavorite}
-          onSelectMovie={onSelectMovie}
+          onSelectMovie={(movie) => onSelectMovie(movie, movies)}
         />
       ) : (
         <p>Du har ingen favoritter ennå.</p>

src/layout/MainLayout.tsx

@@ -9,7 +9,7 @@ import type { Movie } from '../types/tmdb';
 type MainLayoutProps = {
   isFavorite: (id: number) => boolean;
   toggleFavorite: (id: number) => void;
-  onSelectMovie: (movie: Movie) => void;
+  onSelectMovie: (movie: Movie, list: Movie[]) => void;
 };
 
 // HomeSections.tsx
@@ -34,7 +34,7 @@ export function MainLayout({
         {current.data && (
           <TrendingPreview
             movies={current.data}
-            onSelectMovie={onSelectMovie}
+            onSelectMovie={(movie) => onSelectMovie(movie, current.data)}
           />
         )}
       </Section>
@@ -49,7 +49,7 @@ export function MainLayout({
             movies={popular.data}
             isFavorite={isFavorite}
             onToggleFavorite={toggleFavorite}
-            onSelectMovie={onSelectMovie}
+            onSelectMovie={(movie) => onSelectMovie(movie, popular.data)}
           />
         )}
       </Section>

src/layout/SearchLayout.tsx

@@ -17,7 +17,7 @@ type SearchSectionProps = {
   onMinRatingChange: (value: number) => void;
   isFavorite: (id: number) => boolean;
   toggleFavorite: (id: number) => void;
-  onSelectMovie: (movie: Movie) => void;
+  onSelectMovie: (movie: Movie, list: Movie[]) => void;
 };
 
 export function SearchLayout({
@@ -50,7 +50,7 @@ export function SearchLayout({
             movies={sortAndFilterMovies(search.data, sortBy, minRating)}
             isFavorite={isFavorite}
             onToggleFavorite={toggleFavorite}
-            onSelectMovie={onSelectMovie}
+            onSelectMovie={(movie) => onSelectMovie(movie, search.data)}
           />
         )}
       </Section>