91 lines
2.6 KiB
TypeScript
91 lines
2.6 KiB
TypeScript
import React, { useEffect, useRef } from "react"
|
||
import styles from "./drone.module.css"
|
||
|
||
export default function Drone() {
|
||
const videoRef = useRef<HTMLVideoElement | null>(null)
|
||
const sourceRef = useRef<HTMLSourceElement | null>(null)
|
||
|
||
useEffect(() => {
|
||
function setVideoDroneQuality() {
|
||
if (!sourceRef.current || !videoRef.current) return
|
||
|
||
const videoSources = {
|
||
fullHD: "static/home/video/drone-background-video-1080p.mp4", // For desktops (1920x1080)
|
||
hd: "static/home/video/drone-background-video-720p.mp4", // For tablets/smaller screens (1280x720)
|
||
lowRes: "static/home/video/drone-background-video-480p.mp4" // For mobile devices or low performance (854x480)
|
||
}
|
||
|
||
const screenWidth = window.innerWidth
|
||
|
||
// Pick appropriate source
|
||
if (screenWidth >= 1920) {
|
||
sourceRef.current.src =
|
||
"https://vontor-cz.s3.eu-central-1.amazonaws.com/" + videoSources.fullHD
|
||
} else if (screenWidth >= 1280) {
|
||
sourceRef.current.src =
|
||
"https://vontor-cz.s3.eu-central-1.amazonaws.com/" + videoSources.hd
|
||
} else {
|
||
sourceRef.current.src =
|
||
"https://vontor-cz.s3.eu-central-1.amazonaws.com/" + videoSources.lowRes
|
||
}
|
||
|
||
// Reload video
|
||
videoRef.current.load()
|
||
console.log("Drone video set!")
|
||
}
|
||
|
||
// Run once on mount
|
||
setVideoDroneQuality()
|
||
|
||
// Optional: rerun on resize
|
||
window.addEventListener("resize", setVideoDroneQuality)
|
||
return () => {
|
||
window.removeEventListener("resize", setVideoDroneQuality)
|
||
}
|
||
}, [])
|
||
|
||
return (
|
||
<div className={`${styles.drone}`}>
|
||
<video
|
||
ref={videoRef}
|
||
id="drone-video"
|
||
className={styles.videoBackground}
|
||
autoPlay
|
||
muted
|
||
loop
|
||
playsInline
|
||
>
|
||
<source ref={sourceRef} id="video-source" type="video/mp4" />
|
||
Your browser does not support video.
|
||
</video>
|
||
|
||
<article>
|
||
<header>
|
||
<h1>Letecké záběry, co zaujmou</h1>
|
||
</header>
|
||
|
||
<main>
|
||
<section>
|
||
<h2>Oprávnění</h2>
|
||
<p>Oprávnění A1/A2/A3 + radiostanice. Bezpečný provoz i v omezených zónách, povolení zajistím.</p>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>Cena</h2>
|
||
<p>Paušál 3 000 Kč. Ostrava zdarma; mimo 10 Kč/km. Cena se může lišit dle povolení.</p>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>Výstup</h2>
|
||
<p>Krátký sestřih nebo surové záběry — podle potřeby.</p>
|
||
</section>
|
||
</main>
|
||
|
||
<div>
|
||
<a href="#contacts">Zájem?</a>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
)
|
||
}
|