Fix video cover

aelassas · Dec 6, 2024 · ed345ee · ed345ee
1 parent 5e840a2
commit ed345ee
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 0 deletions.
diff --git a/frontend/public/cover.png b/frontend/public/cover.png
diff --git a/frontend/src/assets/css/home.css b/frontend/src/assets/css/home.css
@@ -36,6 +36,18 @@ div.home div.home-content video {
   object-fit: cover;
 }
 
+div.home div.home-content div.video-background {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  background-image: url('/cover.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: 50%;
+}
+
 /* div.home div.home-content::before {
   position: absolute;
   top: 0;

diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
@@ -47,6 +47,7 @@ const Home = () => {
   const [locations, setLocations] = useState<bookcarsTypes.Location[]>([])
   const [ranges, setRanges] = useState([bookcarsTypes.CarRange.Mini, bookcarsTypes.CarRange.Midi])
   const [openRangeSearchFormDialog, setOpenRangeSearchFormDialog] = useState(false)
+  const [videoLoaded, setVideoLoaded] = useState(false)
 
   const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
     setTabValue(newValue)
@@ -87,10 +88,14 @@ const Home = () => {
               loop
               playsInline
               disablePictureInPicture
+              onLoadedData={() => {
+                setVideoLoaded(true)
+              }}
             >
               <source src="cover.mp4" type="video/mp4" />
               <track kind="captions" />
             </video>
+            {!videoLoaded && <div className="video-background" />}
           </div>
 
           <div className="home-title">{strings.TITLE}</div>