Add Back Router And Remove Width And Height From VideoPreviewProps

packages/app/src/App.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { css } from "@emotion/core";
 import { Provider } from "react-redux";
+import { Router } from "@reach/router";
 
 import store from "./store";
 import { Layout, VideoGallery, Hero, TagsGallery, SeriesGallery, ChannelGallery, Main } from "./components";
@@ -12,26 +13,28 @@ export default function App() {
 	return (
 		<main>
 			<Provider store={store}>
-				<Layout>
-					<Hero backgroundImg={backgroundImg} />
-					<Main
-						containerCss={css`
-							margin: 1rem 0;
-							& > * {
-								margin-bottom: 3rem;
-							}
-						`}
-					>
-						<VideoGallery title="Continue Watching" />
-						<VideoGallery title="Top Trending Videos" action="See All" />
-						<SeriesGallery title="Top Trending Series" />
-						<VideoGallery title="Featured Videos" action="See All" />
-						<TagsGallery title="Top Categories" />
-						<ChannelGallery title="Trending Channels" />
-						<VideoGallery title="Top Trending Playlist" />
-						<VideoGallery title="Newest Videos" action="See All" />
-					</Main>
-				</Layout>
+				<Router primary={false}>
+					<Layout>
+						<Hero backgroundImg={backgroundImg} />
+						<Main
+							containerCss={css`
+								margin: 1rem 0;
+								& > * {
+									margin-bottom: 3rem;
+								}
+							`}
+						>
+							<VideoGallery title="Continue Watching" />
+							<VideoGallery title="Top Trending Videos" action="See All" />
+							<SeriesGallery title="Top Trending Series" />
+							<VideoGallery title="Featured Videos" action="See All" />
+							<TagsGallery title="Top Categories" />
+							<ChannelGallery title="Trending Channels" />
+							<VideoGallery title="Top Trending Playlist" />
+							<VideoGallery title="Newest Videos" action="See All" />
+						</Main>
+					</Layout>
+				</Router>
 			</Provider>
 		</main>
 	);

packages/app/src/components/VideoGallery.tsx

@@ -100,10 +100,12 @@ const articleStyles = css`
 const VideoGallery: React.FC<Partial<VideoGalleryProps>> = ({ title, action }) => {
 	const videos = videoPlaceholders.concat(videoPlaceholders).concat(videoPlaceholders);
 	const [controlsTop, setControlsTop] = useState<SerializedStyles>(css``);
+
+	const CAROUSEL_WHEEL_HEIGHT = 48;
 	const imgRef = useCallback((node: HTMLImageElement) => {
 		if (node != null) {
 			setControlsTop(css`
-				top: calc(${Math.round(node.clientHeight) / 2}px - 24px);
+				top: calc(${Math.round(node.clientHeight) / 2}px - ${CAROUSEL_WHEEL_HEIGHT / 2}px);
 			`);
 		}
 	}, []);

packages/components/src/components/VideoPreview/VideoPreview.styles.tsx

@@ -4,19 +4,11 @@ import { typography, colors, spacing } from "./../../theme";
 export type VideoPreviewStyleProps = {
 	showChannel: boolean;
 	poster: string;
-	width: number;
 	darken: boolean;
-	height: number;
 	fade: string;
 };
 
-export let makeStyles = ({
-	showChannel = false,
-	width = 320,
-	height = 190,
-	poster = "",
-	fade,
-}: Partial<VideoPreviewStyleProps>) => {
+export let makeStyles = ({ showChannel = false, poster = "", fade }: Partial<VideoPreviewStyleProps>) => {
 	const withPoster = poster ? fade : `linear-gradient(${colors.gray[300]}, ${colors.gray[700]})`;
 
 	return {
@@ -27,8 +19,8 @@ export let makeStyles = ({
 			text-decoration: none;
 		`,
 		coverContainer: css`
-			width: ${width}px;
-			height: ${height}px;
+			width: 320px;
+			height: 190px;
 		`,
 		cover: css`
 			width: 100%;