From 71439970ecd14194dfa77a2c3ddc55669f0b698d Mon Sep 17 00:00:00 2001 From: Ange230700 Date: Fri, 15 Dec 2023 16:48:39 +0100 Subject: [PATCH 1/2] pending... --- backend/src/tables.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/backend/src/tables.js b/backend/src/tables.js index 76049e8..1e410a0 100644 --- a/backend/src/tables.js +++ b/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 ]; From a101551c15449176d109d6f0c506bfc9729c3d75 Mon Sep 17 00:00:00 2001 From: Ange230700 Date: Tue, 19 Dec 2023 09:48:31 +0100 Subject: [PATCH 2/2] implementing carousel for mobile version --- frontend/package-lock.json | 14 ++++ frontend/package.json | 5 +- frontend/src/components/DynamicHeroSlider.jsx | 64 +++++++++++++++++++ frontend/src/components/HeroMovieSlide.jsx | 22 +++++++ frontend/src/components/MovieLink.jsx | 19 ++++++ frontend/src/components/MovieSlide.jsx | 12 +++- frontend/src/pages/Home.jsx | 11 ++-- frontend/src/pages/MoviePlayer.jsx | 7 +- frontend/src/pages/Search.jsx | 11 +--- frontend/src/sass/_dynamicHeroSlider.scss | 4 ++ frontend/src/sass/_heroMovieSlide.scss | 15 +++++ frontend/src/sass/_home.scss | 25 -------- frontend/src/sass/_movieLink.scss | 3 + frontend/src/sass/_moviePlayer.scss | 13 +++- frontend/src/sass/_movieSlide.scss | 37 ++++++----- frontend/src/sass/_search.scss | 4 ++ frontend/src/sass/index.scss | 3 + 17 files changed, 199 insertions(+), 70 deletions(-) create mode 100644 frontend/src/components/DynamicHeroSlider.jsx create mode 100644 frontend/src/components/HeroMovieSlide.jsx create mode 100644 frontend/src/components/MovieLink.jsx create mode 100644 frontend/src/sass/_dynamicHeroSlider.scss create mode 100644 frontend/src/sass/_heroMovieSlide.scss create mode 100644 frontend/src/sass/_movieLink.scss diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 13481bf..9e4aa52 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -9,6 +9,7 @@ "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" @@ -4037,6 +4038,14 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-multi-carousel": { + "version": "2.8.4", + "resolved": "https://registry.npmjs.org/react-multi-carousel/-/react-multi-carousel-2.8.4.tgz", + "integrity": "sha512-7Is5Wr+m2ebkR+oq2Su2tjUdBwpVtB2O6Tjb74KDNfxWe/FrsTQwezTJTk/r9cKCrRp9Li308v822/5bZm7XKg==", + "engines": { + "node": ">=8" + } + }, "node_modules/react-refresh": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", @@ -7796,6 +7805,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-multi-carousel": { + "version": "2.8.4", + "resolved": "https://registry.npmjs.org/react-multi-carousel/-/react-multi-carousel-2.8.4.tgz", + "integrity": "sha512-7Is5Wr+m2ebkR+oq2Su2tjUdBwpVtB2O6Tjb74KDNfxWe/FrsTQwezTJTk/r9cKCrRp9Li308v822/5bZm7XKg==" + }, "react-refresh": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index bcd760b..3eeb358 100644 --- a/frontend/package.json +++ b/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" diff --git a/frontend/src/components/DynamicHeroSlider.jsx b/frontend/src/components/DynamicHeroSlider.jsx new file mode 100644 index 0000000..13b388c --- /dev/null +++ b/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 ( + + {movies.map((movie) => { + if (movie.IsAvailable) { + return ( + + + + ); + } + return null; + })} + + ); +} + +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; diff --git a/frontend/src/components/HeroMovieSlide.jsx b/frontend/src/components/HeroMovieSlide.jsx new file mode 100644 index 0000000..65b935f --- /dev/null +++ b/frontend/src/components/HeroMovieSlide.jsx @@ -0,0 +1,22 @@ +import PropTypes from "prop-types"; + +function HeroMovieSlide({ movie }) { + return ( + {movie.title} + ); +} + +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; diff --git a/frontend/src/components/MovieLink.jsx b/frontend/src/components/MovieLink.jsx new file mode 100644 index 0000000..addc3fb --- /dev/null +++ b/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 ( + + + + ); +} + +MovieLink.propTypes = { + movie: PropTypes.shape({ + id: PropTypes.number.isRequired, + }).isRequired, +}; + +export default MovieLink; diff --git a/frontend/src/components/MovieSlide.jsx b/frontend/src/components/MovieSlide.jsx index 4f22d0d..28f0150 100644 --- a/frontend/src/components/MovieSlide.jsx +++ b/frontend/src/components/MovieSlide.jsx @@ -8,8 +8,14 @@ function MovieSlide({ movie }) { ); } return ( -
- {movie.title} + <> +
+ {movie.title} +
-
+ ); } diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx index b5f8329..da51779 100644 --- a/frontend/src/pages/Home.jsx +++ b/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" /> - {/*
-
*/} + {/*

  • Toutes les catégories

    @@ -44,9 +43,7 @@ function Home() { */}
    {movies.map((movie) => ( - - - + ))}
    diff --git a/frontend/src/pages/MoviePlayer.jsx b/frontend/src/pages/MoviePlayer.jsx index ffc2a53..8ca12fa 100644 --- a/frontend/src/pages/MoviePlayer.jsx +++ b/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 ( ); })} diff --git a/frontend/src/pages/Search.jsx b/frontend/src/pages/Search.jsx index 42b3746..4165c49 100644 --- a/frontend/src/pages/Search.jsx +++ b/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) => ( - - - + ))} ) : ( <> {movies.map((movie) => ( - - - + ))} )} diff --git a/frontend/src/sass/_dynamicHeroSlider.scss b/frontend/src/sass/_dynamicHeroSlider.scss new file mode 100644 index 0000000..070c97d --- /dev/null +++ b/frontend/src/sass/_dynamicHeroSlider.scss @@ -0,0 +1,4 @@ +.dynamic-hero-slider-container { + position: relative; + left: 10%; +} diff --git a/frontend/src/sass/_heroMovieSlide.scss b/frontend/src/sass/_heroMovieSlide.scss new file mode 100644 index 0000000..c4b6b4e --- /dev/null +++ b/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); +} diff --git a/frontend/src/sass/_home.scss b/frontend/src/sass/_home.scss index 9464fba..24de1e6 100644 --- a/frontend/src/sass/_home.scss +++ b/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); diff --git a/frontend/src/sass/_movieLink.scss b/frontend/src/sass/_movieLink.scss new file mode 100644 index 0000000..c9315cf --- /dev/null +++ b/frontend/src/sass/_movieLink.scss @@ -0,0 +1,3 @@ +.movie-link { + position: relative; +} diff --git a/frontend/src/sass/_moviePlayer.scss b/frontend/src/sass/_moviePlayer.scss index 0eb330f..fcb6490 100644 --- a/frontend/src/sass/_moviePlayer.scss +++ b/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; } } } diff --git a/frontend/src/sass/_movieSlide.scss b/frontend/src/sass/_movieSlide.scss index d10f036..040dda3 100644 --- a/frontend/src/sass/_movieSlide.scss +++ b/frontend/src/sass/_movieSlide.scss @@ -12,32 +12,31 @@ align-items: center; gap: calc(var(--spacing-constant) * 1); display: flex; - position: relative; + filter: blur(2px); .movie-slide { border-radius: var(--border-radius-constant, 10px); object-fit: cover; - filter: blur(2px); } +} - .locked-overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - padding: 0 calc(var(--spacing-constant) * 1); - justify-content: center; - align-items: center; - gap: calc(var(--spacing-constant) * 1); - display: flex; +.locked-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + padding: 0 calc(var(--spacing-constant) * 1); + justify-content: center; + align-items: center; + gap: calc(var(--spacing-constant) * 1); + display: flex; - .lock-icon-container { - .lock-icon { - width: 30px; - height: 30px; - position: relative; - } + .lock-icon-container { + .lock-icon { + width: 30px; + height: 30px; + position: relative; } } } diff --git a/frontend/src/sass/_search.scss b/frontend/src/sass/_search.scss index 62f7278..8c39ccd 100644 --- a/frontend/src/sass/_search.scss +++ b/frontend/src/sass/_search.scss @@ -75,6 +75,10 @@ display: flex; flex-wrap: wrap; padding: 0 calc(var(--spacing-constant) * 1.5); + + .movie-link { + position: relative; + } } } } diff --git a/frontend/src/sass/index.scss b/frontend/src/sass/index.scss index acbb14e..3ef14d2 100644 --- a/frontend/src/sass/index.scss +++ b/frontend/src/sass/index.scss @@ -6,3 +6,6 @@ @import "movieSlide"; @import "movie"; @import "moviePlayer"; +@import "heroMovieSlide"; +@import "dynamicHeroSlider"; +@import "movieLink";