58 lines
1.4 KiB
JavaScript
58 lines
1.4 KiB
JavaScript
import { useEffect, useState } from 'react';
|
|
import '../css/global.css';
|
|
import BlackButton from './components/customButton';
|
|
import LoadingScene from './components/loadingScene';
|
|
|
|
function HomePage() {
|
|
const [loading, setLoading] = useState(true); // Track loading state
|
|
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
|
|
const fetchVideo = async () => {
|
|
try {
|
|
const res = await fetch(`${import.meta.env.VITE_ASSETS_URL}/hallway_FFF.mp4`, {
|
|
signal: controller.signal,
|
|
cache: 'force-cache',
|
|
});
|
|
|
|
await res.blob(); // Read into memory to trigger caching
|
|
console.log('Video prefetched successfully.');
|
|
} catch (err) {
|
|
if (err.name !== 'AbortError') {
|
|
console.error('Video prefetch failed:', err);
|
|
}
|
|
} finally {
|
|
setLoading(false); // Done loading either way
|
|
}
|
|
};
|
|
|
|
fetchVideo();
|
|
|
|
return () => controller.abort();
|
|
}, []);
|
|
|
|
if (loading) {
|
|
return (
|
|
<LoadingScene/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div style={{
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
height: '100vh',
|
|
flexDirection: 'column',
|
|
}}>
|
|
<label className='title'>Fifty Shades <br /> of Bully</label>
|
|
|
|
<div style={{ height: '8vh' }} />
|
|
|
|
<BlackButton text="Start" to='/lang' />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default HomePage;
|