mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-04-27 08:58:30 -04:00
Jake Jarvis
eccf2108c7
* gymnastics to make theme script work with react 18 hydration * try next 12.1.3 canary to fix SSG head tags? * revert theme script changes * next 12.1.3-canary.3 * double-revert some of the use-theme.tsx changes * separate theme restoration script & move to _document * bump next * bump next (again) * clean up some theme stuff * use hashed image URLs in webmanifest and feeds * text experimental react config * Update ThemeScript.tsx * switch selfie image to `layout="raw"` * use `layout="raw"` for all non-imported images * revert raw images in some places, messes up responsiveness * fix nitpicky "no divs inside buttons" html validation error * fix react-player hydration errors * fix hydration errors from server/client time zone differences * clean up hydration fixes * Update format-date.ts * last-minute cleanup
48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import ReactPlayer from "react-player/youtube";
|
|
import { useHasMounted } from "../../hooks/use-has-mounted";
|
|
import { styled } from "../../lib/styles/stitches.config";
|
|
import type { YouTubePlayerProps } from "react-player/youtube";
|
|
|
|
const Wrapper = styled("div", {
|
|
position: "relative",
|
|
paddingTop: "56.25%",
|
|
});
|
|
|
|
const Player = styled(ReactPlayer, {
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
|
|
// target both the lazy thumbnail preview *and* the actual YouTube embed
|
|
"& .react-player__preview, & iframe": {
|
|
borderRadius: "$rounded",
|
|
},
|
|
});
|
|
|
|
export type YouTubeEmbedProps = Partial<YouTubePlayerProps> & {
|
|
id: string;
|
|
className?: string;
|
|
};
|
|
|
|
const YouTubeEmbed = ({ id, className, ...rest }: YouTubeEmbedProps) => {
|
|
// fix hydration issues: https://github.com/cookpete/react-player/issues/1428
|
|
const hasMounted = useHasMounted();
|
|
|
|
return (
|
|
<Wrapper className={className}>
|
|
{hasMounted && (
|
|
<Player
|
|
width="100%"
|
|
height="100%"
|
|
url={`https://www.youtube-nocookie.com/watch?v=${id}`}
|
|
light={`https://i.ytimg.com/vi/${id}/hqdefault.jpg`}
|
|
controls
|
|
{...rest}
|
|
/>
|
|
)}
|
|
</Wrapper>
|
|
);
|
|
};
|
|
|
|
export default YouTubeEmbed;
|