Merge pull request #32 from Dreallers/sprint02-dynamic-slider

Sprint02 dynamic slider

backend/src/tables.js

@@ -20,12 +20,12 @@ const managers = [
   FilmManager,
   SerieManager,
   EnTendanceFilmManager,
-  EnTendanceSerieManager,
   FavoriFilmManager,
   FavoriSerieManager,
   CategorieParFilmManager,
-  S1_tableJointure
   CategorieParSerieManager,
+  EnTendanceSerieManager,
+  // S1_tableJointure,
   // Add other managers here
 ];
 

frontend/package.json

@@ -2,13 +2,16 @@
   "scripts": {
     "dev": "vite --host",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "prettier": "npx prettier --write .",
+    "lint": "npx eslint --fix ."
   },
   "dependencies": {
     "axios": "^1.6.2",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-multi-carousel": "^2.8.4",
     "react-router-dom": "^6.14.2",
     "saas": "^1.0.0",
     "sass": "^1.69.5"

frontend/src/components/DynamicHeroSlider.jsx

@@ -0,0 +1,64 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { NavLink } from "react-router-dom";
+import PropTypes from "prop-types";
+import Carousel from "react-multi-carousel";
+import "react-multi-carousel/lib/styles.css";
+import HeroMovieSlide from "./HeroMovieSlide";
+
+const responsive = {
+  desktop: {
+    breakpoint: { max: 3000, min: 1025 },
+    items: 1,
+  },
+  tablet: {
+    breakpoint: { max: 1024, min: 465 },
+    items: 1,
+  },
+  mobile: {
+    breakpoint: { max: 464, min: 0 },
+    items: 1,
+  },
+};
+
+function DynamicHeroSlider({ movies }) {
+  return (
+    <Carousel
+      className="dynamic-hero-slider-container"
+      responsive={responsive}
+      swipeable
+      infinite
+      autoPlay
+      autoPlaySpeed={3000}
+      transitionDuration={500}
+      arrows={false}
+    >
+      {movies.map((movie) => {
+        if (movie.IsAvailable) {
+          return (
+            <NavLink key={movie.id} to={`/movies/${movie.id}`}>
+              <HeroMovieSlide movie={movie} />
+            </NavLink>
+          );
+        }
+        return null;
+      })}
+    </Carousel>
+  );
+}
+
+DynamicHeroSlider.propTypes = {
+  movies: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      cover: PropTypes.string.isRequired,
+      title: PropTypes.string.isRequired,
+      videoUrl: PropTypes.string,
+      duration: PropTypes.number.isRequired,
+      year: PropTypes.string.isRequired,
+      description: PropTypes.string.isRequired,
+      IsAvailable: PropTypes.number.isRequired,
+    })
+  ).isRequired,
+};
+
+export default DynamicHeroSlider;

frontend/src/components/HeroMovieSlide.jsx

@@ -0,0 +1,22 @@
+import PropTypes from "prop-types";
+
+function HeroMovieSlide({ movie }) {
+  return (
+    <img src={movie.cover} alt={movie.title} className="hero-movie-slide" />
+  );
+}
+
+HeroMovieSlide.propTypes = {
+  movie: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    cover: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    videoUrl: PropTypes.string,
+    duration: PropTypes.number.isRequired,
+    year: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    IsAvailable: PropTypes.number.isRequired,
+  }).isRequired,
+};
+
+export default HeroMovieSlide;

frontend/src/components/MovieLink.jsx

@@ -0,0 +1,19 @@
+import { NavLink } from "react-router-dom";
+import PropTypes from "prop-types";
+import MovieSlide from "./MovieSlide";
+
+function MovieLink({ movie }) {
+  return (
+    <NavLink key={movie.id} to={`/movies/${movie.id}`} className="movie-link">
+      <MovieSlide movie={movie} />
+    </NavLink>
+  );
+}
+
+MovieLink.propTypes = {
+  movie: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+  }).isRequired,
+};
+
+export default MovieLink;

frontend/src/components/MovieSlide.jsx

@@ -8,8 +8,14 @@ function MovieSlide({ movie }) {
     );
   }
   return (
-    <div className="movie-slide-requiring-registration">
-      <img src={movie.miniature} alt={movie.title} className="movie-slide" />
+    <>
+      <div className="movie-slide-requiring-registration">
+        <img
+          src={movie.miniature}
+          alt={movie.title}
+          className="movie-slide blur-filter"
+        />
+      </div>
       <div className="locked-overlay">
         <div className="lock-icon-container">
           <img
@@ -19,7 +25,7 @@ function MovieSlide({ movie }) {
           />
         </div>
       </div>
-    </div>
+    </>
   );
 }
 

frontend/src/pages/Home.jsx

@@ -1,6 +1,6 @@
-import { NavLink } from "react-router-dom";
 import { useMovies } from "../contexts/MovieContext";
-import MovieSlide from "../components/MovieSlide";
+import DynamicHeroSlider from "../components/DynamicHeroSlider";
+import MovieLink from "../components/MovieLink";
 
 function Home() {
   const { movies } = useMovies();
@@ -15,8 +15,7 @@ function Home() {
             alt="wildtube logo"
           />
         </div>
-        {/* <div className="dynamic-hero-slider-container">
-        </div> */}
+        <DynamicHeroSlider movies={movies} />
         {/* <ul className="movie-genre-tabs-container">
           <li className="movie-genre-tab-container">
             <p className="movie-genre selected-tab">Toutes les catégories</p>
@@ -44,9 +43,7 @@ function Home() {
           </div> */}
           <div className="static-slider-container">
             {movies.map((movie) => (
-              <NavLink key={movie.id} to={`/movies/${movie.id}`}>
-                <MovieSlide movie={movie} />
-              </NavLink>
+              <MovieLink key={movie.id} movie={movie} />
             ))}
           </div>
         </section>

frontend/src/pages/MoviePlayer.jsx

@@ -23,17 +23,16 @@ function MoviePlayer() {
           })
           .map((movie) => {
             const videoId = new URL(movie.videoUrl).searchParams.get("v");
-            const embedUrl = `https://www.youtube.com/embed/${videoId}`;
+            const embedUrl = `https://www.youtube.com/embed/${videoId}?autoplay=1&modestbranding=1&rel=1&start=0&end=30`;
             return (
               <iframe
                 key={movie.id}
-                width="789"
-                height="328"
+                className="movie-player-iframe"
                 src={embedUrl}
                 title="Marvel Studios&#39; Avengers: Infinity War Official Trailer"
                 frameBorder="0"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                 allowFullScreen
+                loading="lazy"
               ></iframe>
             );
           })}

frontend/src/pages/Search.jsx

@@ -1,7 +1,6 @@
-import { NavLink } from "react-router-dom";
 import { useState } from "react";
 import { useMovies } from "../contexts/MovieContext";
-import MovieSlide from "../components/MovieSlide";
+import MovieLink from "../components/MovieLink";
 
 function Search() {
   const [searchValue, setSearchValue] = useState("");
@@ -41,17 +40,13 @@ function Search() {
                   movie.title.toLowerCase().includes(searchValue.toLowerCase())
                 )
                 .map((movie) => (
-                  <NavLink key={movie.id} to={`/movies/${movie.id}`}>
-                    <MovieSlide movie={movie} />
-                  </NavLink>
+                  <MovieLink key={movie.id} movie={movie} />
                 ))}
             </>
           ) : (
             <>
               {movies.map((movie) => (
-                <NavLink key={movie.id} to={`/movies/${movie.id}`}>
-                  <MovieSlide movie={movie} />
-                </NavLink>
+                <MovieLink key={movie.id} movie={movie} />
               ))}
             </>
           )}

frontend/src/sass/_dynamicHeroSlider.scss

@@ -0,0 +1,4 @@
+.dynamic-hero-slider-container {
+  position: relative;
+  left: 10%;
+}

frontend/src/sass/_heroMovieSlide.scss

@@ -0,0 +1,15 @@
+.hero-movie-slide {
+  width: clamp(
+    var(--hero-movie-slide-min-width, 255px),
+    var(--hero-movie-slide-preferred-width, 80%),
+    var(--hero-movie-slide-max-width, 1200px)
+  );
+  height: clamp(
+    var(--hero-movie-slide-min-height, 140px),
+    var(--hero-movie-slide-preferred-height, 25vh),
+    var(--hero-movie-slide-max-height, 655px)
+  );
+  object-fit: cover;
+  position: relative;
+  border-radius: var(--border-radius-constant, 10px);
+}

frontend/src/sass/_home.scss

@@ -37,31 +37,6 @@
       }
     }
 
-    .dynamic-hero-slider-container {
-      align-self: stretch;
-      justify-content: center;
-      gap: calc(var(--spacing-constant) * 1);
-      display: flex;
-      overflow-x: scroll;
-      scroll-behavior: smooth;
-
-      .hero-movie-slide {
-        width: clamp(
-          var(--hero-movie-slide-min-width, 255px),
-          var(--hero-movie-slide-preferred-width, 80%),
-          var(--hero-movie-slide-max-width, 1200px)
-        );
-        height: clamp(
-          var(--hero-movie-slide-min-height, 140px),
-          var(--hero-movie-slide-preferred-height, 25vh),
-          var(--hero-movie-slide-max-height, 655px)
-        );
-        object-fit: cover;
-        position: relative;
-        border-radius: var(--border-radius-constant, 10px);
-      }
-    }
-
     .movie-genre-tabs-container {
       align-self: stretch;
       padding: 0 calc(var(--spacing-constant) * 1);

frontend/src/sass/_movieLink.scss

@@ -0,0 +1,3 @@
+.movie-link {
+  position: relative;
+}

frontend/src/sass/_moviePlayer.scss

@@ -17,14 +17,21 @@
 
   .movie-player-wrapper {
     width: 100%;
-    height: 100%;
+    height: 0;
     justify-content: center;
     align-items: center;
     display: flex;
+    position: relative;
+    padding-bottom: 56.25%;
+    overflow: hidden;
     flex: 1;
 
-    iframe {
-      flex: 1;
+    .movie-player-iframe {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
     }
   }
 }