From b93e7f90fba7dd44a366db0e517faa20a9576b94 Mon Sep 17 00:00:00 2001
From: albdert <albertsen.lindberg@gmail.com>
Date: Fri, 18 Sep 2026 11:16:30 +0200
Subject: [PATCH] fikset scrolling mellom filmer i detailed view

---
 src/App.tsx                        | 18 +++++++++--
 src/components/MovieDetails.css    | 51 +++++++++++++++++++++++++++---
 src/components/MovieDetails.tsx    | 48 ++++++++++++++++++++++++++++
 src/components/MovieList.tsx       |  4 +--
 src/components/TrendingPreview.tsx |  4 +--
 src/layout/FavoritesLayout.tsx     |  4 +--
 src/layout/MainLayout.tsx          |  6 ++--
 src/layout/SearchLayout.tsx        |  4 +--
 8 files changed, 121 insertions(+), 18 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 5c12cbe..da98589 100644
--- a/src/App.tsx
+++ b/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,20 +78,20 @@ 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>
@@ -89,6 +99,8 @@ function App() {
       {selectedMovie && (
         <MovieDetails
           movie={selectedMovie}
+          movies={selectedList}
+          onNavigate={handleNavigate}
           isFavorite={isFavorite(selectedMovie.id)}
           onToggleFavorite={toggleFavorite}
           onClose={() => setSelectedMovie(null)}
diff --git a/src/components/MovieDetails.css b/src/components/MovieDetails.css
index 177d09c..eed7324 100644
--- a/src/components/MovieDetails.css
+++ b/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*/
 
diff --git a/src/components/MovieDetails.tsx b/src/components/MovieDetails.tsx
index 1c50a51..4870409 100644
--- a/src/components/MovieDetails.tsx
+++ b/src/components/MovieDetails.tsx
@@ -6,6 +6,8 @@ import { useEffect, useRef } from 'react';
 
 type MovieDetailsProps = {
   movie: Movie;
+  movies: Movie[];
+  onNavigate: (movie: Movie) => void;
   isFavorite: boolean;
   onToggleFavorite: (id: number) => void;
   onClose: () => void;
@@ -13,6 +15,8 @@ type MovieDetailsProps = {
 
 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}
diff --git a/src/components/MovieList.tsx b/src/components/MovieList.tsx
index 322d3ee..eab4f0a 100644
--- a/src/components/MovieList.tsx
+++ b/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}
         />
       ))}
diff --git a/src/components/TrendingPreview.tsx b/src/components/TrendingPreview.tsx
index cdf736f..ead13b8 100644
--- a/src/components/TrendingPreview.tsx
+++ b/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
diff --git a/src/layout/FavoritesLayout.tsx b/src/layout/FavoritesLayout.tsx
index e8845bb..0a9cc2d 100644
--- a/src/layout/FavoritesLayout.tsx
+++ b/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>
diff --git a/src/layout/MainLayout.tsx b/src/layout/MainLayout.tsx
index 7d0de3e..6944860 100644
--- a/src/layout/MainLayout.tsx
+++ b/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>
diff --git a/src/layout/SearchLayout.tsx b/src/layout/SearchLayout.tsx
index 3e1c6ff..8d535b9 100644
--- a/src/layout/SearchLayout.tsx
+++ b/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>