mirrors/smov
mirrors/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-20 14:37:43 +01:00
Code Issues Wiki Activity

Add a cancel option to the random media button

Browse source
This commit is contained in:
Cooper Ransom 2024-04-03 00:30:43 -04:00
parent 722e4bc15b
commit bd038a577d
1 changed files with 41 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
src/pages/Discover.tsx
View file

@ -1,4 +1,3 @@
import classNames from "classnames";
import React, { useEffect, useRef, useState } from "react"; import React, { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { LazyLoadImage } from "react-lazy-load-image-component"; import { LazyLoadImage } from "react-lazy-load-image-component";
@ -278,6 +277,8 @@ export function Discover() {
</div> </div>
); );
} }
const [countdownTimeout, setCountdownTimeout] =
useState<NodeJS.Timeout | null>(null);
const handleRandomMovieClick = () => { const handleRandomMovieClick = () => {
const allMovies = Object.values(genreMovies).flat(); // Flatten all movie arrays const allMovies = Object.values(genreMovies).flat(); // Flatten all movie arrays
@ -292,14 +293,25 @@ export function Discover() {
if (selectedMovie) { if (selectedMovie) {
setRandomMovie(selectedMovie); setRandomMovie(selectedMovie);
setCountdown(5); if (countdown !== null && countdown > 0) {
// Clear the countdown interval
setCountdown(null);
if (countdownTimeout) {
clearTimeout(countdownTimeout);
setCountdownTimeout(null);
setRandomMovie(null);
}
} else {
setCountdown(5);
// Schedule navigation after 5 seconds // Schedule navigation after 5 seconds
setTimeout(() => { const timeoutId = setTimeout(() => {
navigate( navigate(
`/media/tmdb-movie-${selectedMovie.id}-${selectedMovie.title}`, `/media/tmdb-movie-${selectedMovie.id}-${selectedMovie.title}`,
); );
}, 5000); }, 5000);
setCountdownTimeout(timeoutId);
}
} }
}; };
@ -392,28 +404,34 @@ export function Discover() {
type="button" type="button"
className="flex items-center space-x-2 rounded-full px-4 text-white py-2 bg-pill-background bg-opacity-50 hover:bg-pill-backgroundHover transition-[background,transform] duration-100 hover:scale-105" className="flex items-center space-x-2 rounded-full px-4 text-white py-2 bg-pill-background bg-opacity-50 hover:bg-pill-backgroundHover transition-[background,transform] duration-100 hover:scale-105"
onClick={handleRandomMovieClick} onClick={handleRandomMovieClick}
disabled={countdown !== null && countdown > 0} // Disable the button during the countdown
> >
<span className="flex items-center space-x-2"> <span className="flex items-center">
{countdown !== null && countdown > 0 {countdown !== null && countdown > 0 ? (
? `Playing in ${countdown} seconds` <div className="flex items-center inline-block">
: "Watch Something New"} <span>Cancel Countdown</span>
<img <Icon
src="/lightbar-images/dice.svg" icon={Icons.X}
alt="Small Image" className="text-2xl ml-[4.5px] mb-[-0.7px]"
style={{ />
width: "20px", // Adjust the width as needed </div>
height: "20px", // Adjust the height as needed ) : (
marginLeft: "10px", // Add margin-right <div className="flex items-center inline-block">
}} <span>Watch Something New</span>
/> <img
src="/lightbar-images/dice.svg"
alt="Small Image"
style={{
marginLeft: "8px",
}}
/>
</div>
)}
</span> </span>
</button> </button>
</div> </div>
{randomMovie && ( {randomMovie && (
<div className="mt-4 mb-4 text-center"> <div className="mt-4 mb-4 text-center">
<p>Now Playing {randomMovie.title}</p> <p>Now Playing {randomMovie.title}</p>
{/* You can add additional details or play functionality here */}
</div> </div>
)} )}
<div className="flex flex-col"> <div className="flex flex-col">