picture
This commit is contained in:
Flatlogic Bot
parent
c2e2a1bb5f
commit
29a98e98a3
BIN
assets/pasted-20260415-150837-fa591359.png
Normal file
BIN
assets/pasted-20260415-150837-fa591359.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
@ -69,7 +69,7 @@ const config = {
|
||||
|
||||
config.pexelsKey = process.env.PEXELS_KEY || '';
|
||||
|
||||
config.pexelsQuery = 'Neon-lit cinema hallway';
|
||||
config.pexelsQuery = 'cozy home cinema tv popcorn';
|
||||
config.host = process.env.NODE_ENV === "production" ? config.remote : "http://localhost";
|
||||
config.apiUrl = `${config.host}${config.port ? `:${config.port}` : ``}/api`;
|
||||
config.swaggerUrl = `${config.swaggerUI}${config.swaggerPort}`;
|
||||
|
||||
@ -20,7 +20,7 @@ import { findMe, loginUser, resetAction } from '../stores/authSlice';
|
||||
import { useAppDispatch, useAppSelector } from '../stores/hooks';
|
||||
import Link from 'next/link';
|
||||
import {toast, ToastContainer} from "react-toastify";
|
||||
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels'
|
||||
import { getPexelsImage } from '../helpers/pexels'
|
||||
|
||||
export default function Login() {
|
||||
const router = useRouter();
|
||||
@ -28,15 +28,13 @@ export default function Login() {
|
||||
const textColor = useAppSelector((state) => state.style.linkColor);
|
||||
const iconsColor = useAppSelector((state) => state.style.iconsColor);
|
||||
const notify = (type, msg) => toast(msg, { type });
|
||||
const [ illustrationImage, setIllustrationImage ] = useState({
|
||||
src: undefined,
|
||||
photographer: undefined,
|
||||
photographer_url: undefined,
|
||||
})
|
||||
const [ illustrationVideo, setIllustrationVideo ] = useState({video_files: []})
|
||||
const [contentType, setContentType] = useState('video');
|
||||
const [contentPosition, setContentPosition] = useState('left');
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [illustrationImage, setIllustrationImage] = useState({
|
||||
src: undefined,
|
||||
photographer: undefined,
|
||||
photographer_url: undefined,
|
||||
});
|
||||
const contentPosition = 'left';
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const { currentUser, isFetching, errorMessage, token, notify:notifyState } = useAppSelector(
|
||||
(state) => state.auth,
|
||||
);
|
||||
@ -46,15 +44,14 @@ export default function Login() {
|
||||
|
||||
const title = 'Movies & TV Tracker'
|
||||
|
||||
// Fetch Pexels image/video
|
||||
useEffect( () => {
|
||||
async function fetchData() {
|
||||
const image = await getPexelsImage()
|
||||
const video = await getPexelsVideo()
|
||||
setIllustrationImage(image);
|
||||
setIllustrationVideo(video);
|
||||
}
|
||||
fetchData();
|
||||
// Fetch a single movie-themed illustration for the login page
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
const image = await getPexelsImage();
|
||||
setIllustrationImage(image);
|
||||
}
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
// Fetch user data
|
||||
useEffect(() => {
|
||||
@ -101,46 +98,44 @@ export default function Login() {
|
||||
};
|
||||
|
||||
const imageBlock = (image) => (
|
||||
<div className="hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3"
|
||||
style={{
|
||||
backgroundImage: `${image ? `url(${image.src?.original})` : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'}`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'left center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
}}>
|
||||
<div className="flex justify-center w-full bg-blue-300/20">
|
||||
<a className="text-[8px]" href={image?.photographer_url} target="_blank" rel="noreferrer">Photo
|
||||
by {image?.photographer} on Pexels</a>
|
||||
</div>
|
||||
<div
|
||||
className="hidden md:flex relative flex-grow-0 flex-shrink-0 w-1/3 overflow-hidden"
|
||||
style={{
|
||||
backgroundImage: image?.src?.original
|
||||
? `linear-gradient(180deg, rgba(7, 8, 13, 0.18) 0%, rgba(7, 8, 13, 0.76) 100%), url(${image.src.original})`
|
||||
: 'linear-gradient(135deg, #07080D 0%, #11131C 50%, #312E81 100%)',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
}}
|
||||
>
|
||||
<div className="relative z-10 flex h-full flex-col justify-between p-8 text-white">
|
||||
<div className="max-w-xs">
|
||||
<span className="inline-flex rounded-full border border-white/20 bg-white/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.3em] text-white/80">
|
||||
Movie Night Ready
|
||||
</span>
|
||||
<h1 className="mt-6 text-4xl font-semibold leading-tight">
|
||||
Track every movie and series in one cinematic hub.
|
||||
</h1>
|
||||
<p className="mt-4 text-sm leading-6 text-white/75">
|
||||
Save your watchlist, discover what to stream next, and keep your entertainment world organized.
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-white/10 bg-black/30 p-4 backdrop-blur-sm">
|
||||
<p className="text-xs uppercase tracking-[0.25em] text-amber-300/90">Tonight's vibe</p>
|
||||
<p className="mt-2 text-lg font-medium">Big screen energy with a premium streaming feel.</p>
|
||||
<p className="mt-3 text-[10px] text-white/60">
|
||||
Photo by{' '}
|
||||
<a className="underline decoration-white/30 underline-offset-2" href={image?.photographer_url} target="_blank" rel="noreferrer">
|
||||
{image?.photographer || 'Pexels'}
|
||||
</a>
|
||||
{' '}on Pexels
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
</div>
|
||||
);
|
||||
|
||||
const videoBlock = (video) => {
|
||||
if (video?.video_files?.length > 0) {
|
||||
return (
|
||||
<div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
|
||||
<video
|
||||
className='absolute top-0 left-0 w-full h-full object-cover'
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
>
|
||||
<source src={video.video_files[0]?.link} type='video/mp4'/>
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
<div className='flex justify-center w-full bg-blue-300/20 z-10'>
|
||||
<a
|
||||
className='text-[8px]'
|
||||
href={video.user.url}
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
>
|
||||
Video by {video.user.name} on Pexels
|
||||
</a>
|
||||
</div>
|
||||
</div>)
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={contentPosition === 'background' ? {
|
||||
@ -159,8 +154,7 @@ export default function Login() {
|
||||
|
||||
<SectionFullScreen bg='violet'>
|
||||
<div className={`flex ${contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'} min-h-screen w-full`}>
|
||||
{contentType === 'image' && contentPosition !== 'background' ? imageBlock(illustrationImage) : null}
|
||||
{contentType === 'video' && contentPosition !== 'background' ? videoBlock(illustrationVideo) : null}
|
||||
{contentPosition !== 'background' ? imageBlock(illustrationImage) : null}
|
||||
<div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
|
||||
|
||||
<CardBox id="loginRoles" className='w-full md:w-3/5 lg:w-2/3'>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user