mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-04-26 04:45:22 -04:00
fix <Video /> component (downgrade react-player to 2.10.1)
This commit is contained in:
parent
a4a402bcde
commit
cab79559e6
GPG Key ID:
2B0C9CF251E69A39
@ -1 +1 @@
|
||||
18.15.0
|
||||
18.16.0
|
||||
|
||||
@ -3,21 +3,36 @@ import useHasMounted from "../../hooks/useHasMounted";
|
||||
import { styled, theme } from "../../lib/styles/stitches.config";
|
||||
import type { FilePlayerProps } from "react-player/file";
|
||||
|
||||
const Wrapper = styled("div", {
|
||||
position: "relative",
|
||||
paddingTop: "56.25%",
|
||||
});
|
||||
|
||||
const Player = styled(ReactPlayer, {
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
|
||||
"& video": {
|
||||
borderRadius: theme.radii.corner,
|
||||
},
|
||||
});
|
||||
|
||||
const Wrapper = styled("div", {
|
||||
variants: {
|
||||
// determines placement of the player. true expands to full width while keeping the aspect ratio, false retains the
|
||||
// video's native dimensions (but still shrinks if the parent is narrower than the video).
|
||||
responsive: {
|
||||
true: {
|
||||
position: "relative",
|
||||
paddingTop: "56.25%", // ratio of 1280x720
|
||||
|
||||
[`& ${Player}`]: {
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
},
|
||||
},
|
||||
false: {
|
||||
[`& ${Player}`]: {
|
||||
margin: "0 auto",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export type VideoProps = Partial<FilePlayerProps> & {
|
||||
src: {
|
||||
// at least one is required:
|
||||
@ -27,11 +42,13 @@ export type VideoProps = Partial<FilePlayerProps> & {
|
||||
vtt?: string;
|
||||
image?: string;
|
||||
};
|
||||
title?: string;
|
||||
autoplay?: boolean;
|
||||
responsive?: boolean;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const Video = ({ src, autoplay = false, className, ...rest }: VideoProps) => {
|
||||
const Video = ({ src, title, autoplay = false, responsive = true, className, ...rest }: VideoProps) => {
|
||||
// fix hydration issues: https://github.com/cookpete/react-player/issues/1428
|
||||
const hasMounted = useHasMounted();
|
||||
|
||||
@ -42,6 +59,7 @@ const Video = ({ src, autoplay = false, className, ...rest }: VideoProps) => {
|
||||
controlsList: "nodownload",
|
||||
preload: "metadata",
|
||||
poster: src?.image, // thumbnail
|
||||
title: title,
|
||||
autoPlay: autoplay,
|
||||
loop: autoplay,
|
||||
muted: autoplay, // no sound when autoplaying
|
||||
@ -76,7 +94,7 @@ const Video = ({ src, autoplay = false, className, ...rest }: VideoProps) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<Wrapper className={className}>
|
||||
<Wrapper responsive={responsive} className={className}>
|
||||
{hasMounted && <Player width="100%" height="100%" {...playerProps} {...rest} />}
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
@ -2,7 +2,7 @@ import {
|
||||
Inter as InterLoader,
|
||||
Source_Code_Pro as SourceCodeProLoader,
|
||||
Comic_Neue as ComicNeueLoader,
|
||||
} from "@next/font/google";
|
||||
} from "next/font/google";
|
||||
|
||||
const Inter = InterLoader({
|
||||
weight: "variable",
|
||||
|
||||
1551
package-lock.json
generated
1551
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
55
package.json
55
package.json
@ -18,16 +18,15 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@giscus/react": "^2.2.8",
|
||||
"@hcaptcha/react-hcaptcha": "^1.4.4",
|
||||
"@next/font": "13.2.5-canary.13",
|
||||
"@novnc/novnc": "github:novnc/novnc#cd94c2aed2582fd85ec5ecc444967fc7ec60a649",
|
||||
"@hcaptcha/react-hcaptcha": "^1.8.1",
|
||||
"@novnc/novnc": "github:novnc/novnc#747603c0d5bbdc8ac31b81f7a1b31291a397d280",
|
||||
"@octokit/graphql": "^5.0.5",
|
||||
"@octokit/graphql-schema": "^13.7.0",
|
||||
"@primer/octicons": "^18.2.0",
|
||||
"@prisma/client": "^4.11.0",
|
||||
"@react-spring/web": "^9.7.1",
|
||||
"@sentry/node": "^7.44.2",
|
||||
"@sentry/tracing": "^7.44.2",
|
||||
"@octokit/graphql-schema": "^14.1.0",
|
||||
"@primer/octicons": "^18.3.0",
|
||||
"@prisma/client": "^4.12.0",
|
||||
"@react-spring/web": "^9.7.2",
|
||||
"@sentry/node": "^7.47.0",
|
||||
"@sentry/tracing": "^7.47.0",
|
||||
"@stitches/react": "^1.2.8",
|
||||
"comma-number": "^2.1.0",
|
||||
"copy-to-clipboard": "^3.3.3",
|
||||
@ -40,7 +39,7 @@
|
||||
"gray-matter": "^4.0.3",
|
||||
"hex-to-rgba": "^2.0.1",
|
||||
"marked": "^4.3.0",
|
||||
"next": "13.2.5-canary.13",
|
||||
"next": "13.3.0",
|
||||
"next-mdx-remote": "^4.4.1",
|
||||
"next-seo": "^5.15.0",
|
||||
"obj-str": "^1.1.0",
|
||||
@ -50,12 +49,12 @@
|
||||
"query-string": "^8.1.0",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react-error-boundary": "^4.0.2",
|
||||
"react-error-boundary": "^4.0.3",
|
||||
"react-gist": "^1.2.4",
|
||||
"react-innertext": "^1.1.5",
|
||||
"react-intersection-observer": "^9.4.3",
|
||||
"react-is": "18.2.0",
|
||||
"react-player": "^2.12.0",
|
||||
"react-player": "~2.10.1",
|
||||
"react-textarea-autosize": "^8.4.1",
|
||||
"react-twitter-embed": "^4.0.4",
|
||||
"rehype-prism-plus": "^1.5.1",
|
||||
@ -64,40 +63,40 @@
|
||||
"remark-smartypants": "^2.0.0",
|
||||
"remark-unwrap-images": "^3.0.1",
|
||||
"remove-markdown": "^0.5.0",
|
||||
"simple-icons": "^8.8.0",
|
||||
"simple-icons": "^8.10.0",
|
||||
"sitemap": "^7.1.1",
|
||||
"swr": "^2.1.1"
|
||||
"swr": "^2.1.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@jakejarvis/eslint-config": "*",
|
||||
"@svgr/webpack": "^6.5.1",
|
||||
"@svgr/webpack": "^7.0.0",
|
||||
"@types/comma-number": "^2.1.0",
|
||||
"@types/marked": "^4.0.8",
|
||||
"@types/node": "*",
|
||||
"@types/novnc__novnc": "^1.3.0",
|
||||
"@types/prop-types": "^15.7.5",
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react": "^18.0.35",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"@types/react-is": "^17.0.3",
|
||||
"@types/remove-markdown": "^0.3.1",
|
||||
"@types/uglify-js": "^3.17.1",
|
||||
"@typescript-eslint/eslint-plugin": "^5.56.0",
|
||||
"@typescript-eslint/parser": "^5.56.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.58.0",
|
||||
"@typescript-eslint/parser": "^5.58.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"eslint": "~8.36.0",
|
||||
"eslint-config-next": "13.2.5-canary.13",
|
||||
"eslint": "~8.38.0",
|
||||
"eslint-config-next": "13.3.0",
|
||||
"eslint-config-prettier": "~8.8.0",
|
||||
"eslint-plugin-mdx": "~2.0.5",
|
||||
"eslint-plugin-prettier": "~4.2.1",
|
||||
"lint-staged": "^13.2.0",
|
||||
"prettier": "^2.8.6",
|
||||
"prisma": "^4.11.0",
|
||||
"lint-staged": "^13.2.1",
|
||||
"prettier": "^2.8.7",
|
||||
"prisma": "^4.12.0",
|
||||
"simple-git-hooks": "^2.8.1",
|
||||
"typescript": "^5.0.2",
|
||||
"typescript": "^5.0.4",
|
||||
"uglify-js": "^3.17.4"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"sharp": "^0.31.3"
|
||||
"sharp": "^0.32.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.x"
|
||||
@ -114,9 +113,9 @@
|
||||
"eslint"
|
||||
]
|
||||
},
|
||||
"packageManager": "npm@9.4.1",
|
||||
"packageManager": "npm@9.6.4",
|
||||
"volta": {
|
||||
"node": "18.15.0",
|
||||
"npm": "9.6.2"
|
||||
"node": "18.16.0",
|
||||
"npm": "9.6.4"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +1,8 @@
|
||||
import { NextSeo } from "next-seo";
|
||||
import Image from "../components/Image";
|
||||
import Link from "../components/Link";
|
||||
import Video from "../components/Video";
|
||||
import { styled, theme } from "../lib/styles/stitches.config";
|
||||
|
||||
import pandaGif from "../public/static/images/angry-panda.gif";
|
||||
|
||||
const Center = styled("div", {
|
||||
textAlign: "center",
|
||||
});
|
||||
@ -25,7 +23,18 @@ const FourOhFour = () => {
|
||||
<NextSeo title="404 Not Found" />
|
||||
|
||||
<Center>
|
||||
<Image src={pandaGif} alt="404s make panda angry..." quality={30} />
|
||||
<Video
|
||||
src={{
|
||||
webm: "/static/images/angry-panda.webm",
|
||||
mp4: "/static/images/angry-panda.mp4",
|
||||
}}
|
||||
autoplay
|
||||
title="404s make panda angry..."
|
||||
responsive={false}
|
||||
css={{
|
||||
maxWidth: "400px",
|
||||
}}
|
||||
/>
|
||||
|
||||
<H1>404: Page Not Found 😢</H1>
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 400 KiB |
BIN
public/static/images/angry-panda.mp4
Normal file
BIN
public/static/images/angry-panda.mp4
Normal file
Binary file not shown.
BIN
public/static/images/angry-panda.webm
Normal file
BIN
public/static/images/angry-panda.webm
Normal file
Binary file not shown.
Loading…
x
Reference in New Issue
Block a user