From ff1dd6f36ca9331fc920007ef312191e43b9cea5 Mon Sep 17 00:00:00 2001 From: Erick Lima Date: Sat, 23 Mar 2024 00:29:20 -0300 Subject: [PATCH 1/4] fix: User gets data erased when attempt login --- app/components/UserLoginModal/index.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/app/components/UserLoginModal/index.tsx b/app/components/UserLoginModal/index.tsx index f8506c3c..9dc14327 100644 --- a/app/components/UserLoginModal/index.tsx +++ b/app/components/UserLoginModal/index.tsx @@ -14,7 +14,7 @@ import { signInAnonymously, User } from 'firebase/auth' -import { collection, doc, getFirestore, setDoc } from 'firebase/firestore' +import { collection, doc, getDoc, getFirestore, setDoc } from 'firebase/firestore' import { initFirebase } from '@/firebase/firebaseApp' import ProfileFallbackImg from "@/public/profile_fallback.jpg" @@ -55,7 +55,11 @@ function UserModal({ onClick, auth, }: { onClick?: MouseEventHandler Date: Sat, 23 Mar 2024 02:14:00 -0300 Subject: [PATCH 2/4] feat: Watch the Media Trailer on Home Page Hero Section --- .../carouselComponent.module.css | 109 +++++++++++++++++- .../HomePage/HeroCarouselHomePage/index.tsx | 54 ++++++++- public/assets/eye-fill.svg | 4 + public/assets/eye-slash-fill.svg | 4 + 4 files changed, 165 insertions(+), 6 deletions(-) create mode 100644 public/assets/eye-fill.svg create mode 100644 public/assets/eye-slash-fill.svg diff --git a/app/components/HomePage/HeroCarouselHomePage/carouselComponent.module.css b/app/components/HomePage/HeroCarouselHomePage/carouselComponent.module.css index 9a608a4b..802376f2 100644 --- a/app/components/HomePage/HeroCarouselHomePage/carouselComponent.module.css +++ b/app/components/HomePage/HeroCarouselHomePage/carouselComponent.module.css @@ -51,6 +51,50 @@ ul.carousel_container li.carousel_item { } } +.video_container { + + position: relative; + +} + +li.carousel_item iframe { + + position: absolute; + top: 50%; + left: 50%; + width: 100vw; + height: 100vh; + /* transform: translate(-50%, -50%); */ + transform: translate(-50%, -25%); + pointer-events: none; + + overflow: hidden; + +} + +li.carousel_item iframe::-webkit-scrollbar { + display: none; +} + +@media((min-width: 1200px)) { + #recomendations_container ul li { + height: auto; + } +} + +/* @media (min-height: 600px) { + li.carousel_item iframe { + transform: translate(-50%, -25%); + } +} */ + +@media (max-aspect-ratio: 16/9) { + li.carousel_item iframe { + /* width: 177.78vh; */ + width: 134.78vh; + } +} + ul.carousel_container li.carousel_item div.item_info { position: relative; @@ -64,7 +108,7 @@ ul.carousel_container li.carousel_item div.item_info { @media((max-width: 1199px)) { ul.carousel_container li.carousel_item div.item_info { - margin: auto; + margin: auto; } } @@ -245,7 +289,8 @@ ul.carousel_container li.carousel_item div.item_info .item_buttons>button { margin-top: 24px; position: absolute; - bottom: 24px; + /* bottom: 24px; */ + bottom: 120px; left: 2%; width: 96%; padding: 0 15px; @@ -380,4 +425,64 @@ ul.carousel_container li.carousel_item div.item_info .item_buttons>button { filter: brightness(80%); +} + +/* STOP TRAILER AUTOPLAY */ +#stop_trailer_btn { + + transition: all ease-in-out 100ms; + + margin: 24px auto; + padding: 12px 24px; + + width: 96%; + + background-color: transparent; + border: 2px solid var(--white-25); + border-radius: 8px; + + font-family: var(--font-family-sans-sarif); + font-size: var(--font-size--small-1); + font-weight: 600; + color: var(--white-75); + + display: flex; + align-items: center; + justify-content: center; + gap: 0 16px; + +} + +@media((min-width: 580px)) { + #stop_trailer_btn { + + justify-content: initial; + width: initial; + + margin-left: calc(var(--breakpoint-sm) / 32); + + } +} + +@media((min-width: 1021px)) { + #stop_trailer_btn { + + margin-left: calc(var(--breakpoint-xl) / 6); + + } +} + +#stop_trailer_btn:hover { + + background-color: var(--black-50); + color: var(--brand-color); + border-color: var(--brand-color); + +} + +#stop_trailer_btn svg { + + fill: var(--brand-color); + transform: scale(1.5); + } \ No newline at end of file diff --git a/app/components/HomePage/HeroCarouselHomePage/index.tsx b/app/components/HomePage/HeroCarouselHomePage/index.tsx index c3c3b390..c6b866ea 100644 --- a/app/components/HomePage/HeroCarouselHomePage/index.tsx +++ b/app/components/HomePage/HeroCarouselHomePage/index.tsx @@ -1,5 +1,5 @@ 'use client' -import React, { useState } from 'react' +import React, { useEffect, useState } from 'react' import styles from "./carouselComponent.module.css" import Link from 'next/link' import { ApiDefaultResult } from '@/app/ts/interfaces/apiAnilistDataInterface' @@ -8,10 +8,14 @@ import { AnimatePresence, motion } from 'framer-motion' import AddToPlaylistButton from '../../AddToPlaylistButton' import SwiperListContainer from '../../SwiperListContainer' import ListCarousel from '../HeroListCarousel' +import EyeSvg from "@/public/assets/eye-fill.svg" +import EyeSlashSvg from "@/public/assets/eye-slash-fill.svg" function HeroCarousel({ data, isMobile }: { data: ApiDefaultResult[], isMobile: boolean }) { - const [[page, direction], setPage] = useState([0, 0]); + const [[page, direction], setPage] = useState([0, 0]) + + const [autoPlayTrailer, setAutoPlayTrailer] = useState(true) const variants = { enter: (direction: number) => { @@ -32,12 +36,12 @@ function HeroCarousel({ data, isMobile }: { data: ApiDefaultResult[], isMobile: opacity: 0 }; } - }; + } const swipeConfidenceThreshold = 10000; const swipePower = (offset: number, velocity: number) => { return Math.abs(offset) * velocity; - }; + } const imageIndex = wrap(0, data.length, page); @@ -60,6 +64,20 @@ function HeroCarousel({ data, isMobile }: { data: ApiDefaultResult[], isMobile: backgroundRepeat: "no-repeat" } + // change auto play trailer state + function changeTrailerState() { + + localStorage.setItem("autoPlayTrailer", `${!autoPlayTrailer}`) + setAutoPlayTrailer(!autoPlayTrailer) + + } + + useEffect(() => { + + setAutoPlayTrailer(localStorage.getItem("autoPlayTrailer") == "true" ? true : false) + + }, []) + return ( <> {data != undefined && ( @@ -94,6 +112,22 @@ function HeroCarousel({ data, isMobile }: { data: ApiDefaultResult[], isMobile: } }} > + + {autoPlayTrailer && data[imageIndex]?.trailer && ( + + + + + + )} +

{data[imageIndex]?.title.romaji}

@@ -173,6 +207,18 @@ function HeroCarousel({ data, isMobile }: { data: ApiDefaultResult[], isMobile:
+ changeTrailerState()} + whileTap={{ scale: 0.9 }} + > + {autoPlayTrailer ? ( + <> Stop Auto Play Trailer + ) : ( + <> Auto Play Trailer + )} + + ) } diff --git a/public/assets/eye-fill.svg b/public/assets/eye-fill.svg new file mode 100644 index 00000000..288d2eb0 --- /dev/null +++ b/public/assets/eye-fill.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/public/assets/eye-slash-fill.svg b/public/assets/eye-slash-fill.svg new file mode 100644 index 00000000..10cca743 --- /dev/null +++ b/public/assets/eye-slash-fill.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file From 2230c240c9dc83b7885266d62a104185626c630e Mon Sep 17 00:00:00 2001 From: Erick Lima Date: Sat, 23 Mar 2024 02:28:33 -0300 Subject: [PATCH 3/4] fix: Home Page Auto Play Trailer Value To "true" --- app/components/HomePage/HeroCarouselHomePage/index.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/app/components/HomePage/HeroCarouselHomePage/index.tsx b/app/components/HomePage/HeroCarouselHomePage/index.tsx index c6b866ea..f6d55435 100644 --- a/app/components/HomePage/HeroCarouselHomePage/index.tsx +++ b/app/components/HomePage/HeroCarouselHomePage/index.tsx @@ -74,6 +74,14 @@ function HeroCarousel({ data, isMobile }: { data: ApiDefaultResult[], isMobile: useEffect(() => { + if (localStorage.getItem("autoPlayTrailer") == undefined) { + + setAutoPlayTrailer(true) + localStorage.setItem("autoPlayTrailer", "true") + + return + } + setAutoPlayTrailer(localStorage.getItem("autoPlayTrailer") == "true" ? true : false) }, []) From a362077ef0e4aee00d03d171fdf1949ab062414c Mon Sep 17 00:00:00 2001 From: Erick Lima Date: Sat, 23 Mar 2024 02:42:57 -0300 Subject: [PATCH 4/4] docs(Readme Update): Home Page Auto Play Trailer Value To "true" --- README.md | 14 +++++++------- app/page.tsx | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 2e3c45c7..476ff2bb 100644 --- a/README.md +++ b/README.md @@ -94,13 +94,13 @@ npm run dev ### Home -![Home page 1](https://github.com/ErickLimaS/anime-website/assets/69987890/9500407a-86d1-4204-b658-aa8cebd33c1a) -![Home page 2](https://github.com/ErickLimaS/anime-website/assets/69987890/c5db2826-1dec-482f-a59b-64c57d9efa3c) -![Home page 3](https://github.com/ErickLimaS/anime-website/assets/69987890/3984c900-e0b3-4f55-b6bf-bb88011ae0d4) -![Home page 4](https://github.com/ErickLimaS/anime-website/assets/69987890/44ee6d2d-e2cd-43ee-814a-77f683006767) -![Home page 5](https://github.com/ErickLimaS/anime-website/assets/69987890/9f9f95fa-cc45-4108-883d-34da0e91e3fd) -![Home page 6](https://github.com/ErickLimaS/anime-website/assets/69987890/08f8473b-85ec-4a23-b05b-edbef77f5cbe) -![Home page 7](https://github.com/ErickLimaS/anime-website/assets/69987890/6a86f624-3e25-4de6-902d-5cf23c444422) +![Home page 1](https://github.com/ErickLimaS/anime-website/assets/69987890/a5afa4c6-4414-40ac-948a-bf09fd9057cf) +![Home page 2](https://github.com/ErickLimaS/anime-website/assets/69987890/82def7e4-41b7-4d3d-a12e-e9b19c947385) +![Home page 3](https://github.com/ErickLimaS/anime-website/assets/69987890/942a3868-e618-4e78-bc6f-b1e27dc93e3d) +![Home page 4](https://github.com/ErickLimaS/anime-website/assets/69987890/c3547111-ef51-4289-aca8-f12cf7639a1a) +![Home page 5](https://github.com/ErickLimaS/anime-website/assets/69987890/b997120e-7006-4912-bbb2-212f31532d5a) +![Home page 6](https://github.com/ErickLimaS/anime-website/assets/69987890/c2f63bc5-1d56-495f-a262-3f638f7cc8f8) +![Home page 7](https://github.com/ErickLimaS/anime-website/assets/69987890/8e5be52c-5bcd-4149-afc9-794a534f6b66) ### Anime/Manga Page diff --git a/app/page.tsx b/app/page.tsx index ca11ec8d..e8045fb1 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -143,7 +143,7 @@ export default async function Home() { {(mediaBannerData[randomNumber].trailer) && (