70 lines
1.6 KiB
TypeScript
70 lines
1.6 KiB
TypeScript
import { Container, Flex, Heading } from "@chakra-ui/react";
|
|
import { type LinksFunction } from "@remix-run/cloudflare";
|
|
import { useLoaderData } from "@remix-run/react";
|
|
import { AwsClient } from "aws4fetch";
|
|
import stylesheet from "../styles/_index.css";
|
|
|
|
export const links: LinksFunction = () => {
|
|
return [{ href: stylesheet, rel: "stylesheet" }];
|
|
};
|
|
|
|
export async function loader({
|
|
context,
|
|
}: {
|
|
context: RequestContext;
|
|
}): Promise<string[]> {
|
|
if (context.request.headers.get("Save-Data") === "on") return [];
|
|
|
|
const s3base = `https://car-crushers.${context.env.R2_ZONE}.r2.cloudflarestorage.com`;
|
|
|
|
const baseURLs = [
|
|
`https://${s3base}/trailer.webm?X-Amz-Expires=600`,
|
|
`https://${s3base}/trailer.mp4?X-Amz-Expires=600`,
|
|
];
|
|
|
|
const aws = new AwsClient({
|
|
accessKeyId: context.env.R2_ACCESS_KEY,
|
|
secretAccessKey: context.env.R2_SECRET_KEY,
|
|
});
|
|
|
|
const urls = [];
|
|
|
|
for (let i = 0; i < baseURLs.length; i++) {
|
|
urls.push(
|
|
(
|
|
await aws.sign(baseURLs[i], {
|
|
aws: {
|
|
signQuery: true,
|
|
},
|
|
})
|
|
).url,
|
|
);
|
|
}
|
|
|
|
return urls;
|
|
}
|
|
|
|
export default function () {
|
|
const sourceURLs = useLoaderData<typeof loader>();
|
|
|
|
return (
|
|
<>
|
|
<video autoPlay={true} id="home-video">
|
|
<source src={sourceURLs[0]} type="video/webm" />
|
|
<source src={sourceURLs[1]} type="video/mp4" />
|
|
</video>
|
|
<Container
|
|
maxW="container.lg"
|
|
paddingTop="8vh"
|
|
position="relative"
|
|
textAlign="left"
|
|
zIndex="1"
|
|
>
|
|
<Flex>
|
|
<Heading>Fueling Destruction since 2012</Heading>
|
|
</Flex>
|
|
</Container>
|
|
</>
|
|
);
|
|
}
|