Fixed some small problems and started with #10 (background play)

AnimeThemes · Nov 9, 2020 · 71e15bd · 71e15bd
1 parent 543994c
commit 71e15bd
Show file tree

Hide file tree

Showing 9 changed files with 159 additions and 69 deletions.
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -38,7 +38,7 @@ exports.createPages = async ({ actions: { createPage }, reporter }) => {
             createPage({
                 path: `/video/${video.filename}`,
                 component: require.resolve("./src/templates/video.js"),
-                context: { video, anime, entry, theme }
+                context: { video, anime, entry, theme, layoutContext: { video } }
             });
         })));
     });

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
         "@fortawesome/react-fontawesome": "^0.1.11",
         "@reach/router": "^1.3.4",
         "babel-plugin-styled-components": "^1.11.1",
+        "framer-motion": "^2.9.4",
         "gatsby": "^2.24.67",
         "gatsby-plugin-create-client-paths": "^2.3.12",
         "gatsby-plugin-fontawesome-css": "^1.0.0",

diff --git a/src/components/card/searchResult/theme.js b/src/components/card/searchResult/theme.js
@@ -14,6 +14,7 @@ export default function ThemeSearchResultCard({ theme }) {
             title={<SongTitleWithArtists song={theme.song}/>}
             description={`Theme • ${theme.slug} • ${theme.anime.name}`}
             image={image}
+            to={`/video/${theme.entries[0].videos[0].filename}`}
         />
     );
 }
diff --git a/src/components/externalLink/index.js b/src/components/externalLink/index.js
@@ -6,6 +6,7 @@ import Text from "components/text";
 import {gapsRow} from "styles/mixins";
 
 const StyledExternalLink = styled(Text).attrs({
+    forwardedAs: "a",
     link: true
 })`
     ${gapsRow("0.25rem")}

diff --git a/src/components/layout/index.js b/src/components/layout/index.js
@@ -1,12 +1,21 @@
-import React from 'react';
+import React, {useEffect, useState} from "react";
 import {ThemeProvider} from "styled-components";
 import {Helmet} from "react-helmet";
 import GlobalStyle from "styles/global";
 import theme from "theme";
 import Navigation from "components/navigation";
 import Container from "components/container";
+import VideoPlayer from "components/videoPlayer";
+
+export default function Layout({ children, pageContext: { layoutContext = {} } }) {
+    const [ currentVideo, setCurrentVideo ] = useState(layoutContext.video);
+
+    useEffect(() => {
+        if (layoutContext.video) {
+            setCurrentVideo(layoutContext.video);
+        }
+    }, [ layoutContext.video ]);
 
-export default function Layout({ children }) {
     return (
         <ThemeProvider theme={theme}>
             <Helmet>
@@ -18,6 +27,14 @@ export default function Layout({ children }) {
             <GlobalStyle/>
             <Navigation/>
             <Container>
+                {currentVideo && (
+                    <VideoPlayer
+                        video={currentVideo}
+                        background={!layoutContext.video}
+                        layout
+                        transition={{ type: "tween" }}
+                    />
+                )}
                 {children}
             </Container>
         </ThemeProvider>

diff --git a/src/components/text/style.js b/src/components/text/style.js
@@ -2,7 +2,7 @@ import styled, { css } from "styled-components";
 import elevatedPrimaryBackground from "styles/helper";
 
 export const StyledTextBase = styled.span.attrs((props) => ({
-    as: props.as || (props.link ? "a" : (props.code ? "code" : "span"))
+    as: props.as || (props.code ? "code" : "span")
 }))`
     color: ${(props) => props.color || "inherit"};
 

diff --git a/src/components/videoPlayer/index.js b/src/components/videoPlayer/index.js
@@ -1,15 +1,43 @@
 import React from "react";
-import styled from "styled-components";
+import styled, {css} from "styled-components";
+import {motion} from "framer-motion";
+import {navigate} from "gatsby";
 
+const StyledVideoContainer = styled(motion.div)`
+    ${(props) => props.background ? css`
+        position: fixed;
+        width: 15vw;
+        bottom: 1rem;
+        left: 1rem;
+        cursor: pointer;
+    ` : css`
+        position: relative;
+        width: 100%;
+        height: 0;
+        padding-top: 56.25%;
+        margin-bottom: 1rem;
+    `}
+`;
 const StyledVideo = styled.video`
-    width: 100%;
     outline: none;
+    
+    ${(props) => props.background ? css`
+        width: 15vw;
+    ` : css`
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+    `}
 `;
 
-export default function VideoPlayer({ src, ...props }) {
+export default function VideoPlayer({ video, background, ...props }) {
     return (
-        <StyledVideo src={src} controls autoPlay {...props}>
-            Your browser doesn't support HTML5 video playback. Please use a modern browser.
-        </StyledVideo>
+        <StyledVideoContainer background={background} onClick={() => navigate(`/video/${video.filename}`)} {...props}>
+            <StyledVideo src={video.link.replace(".dev", ".moe")} background={background} controls={!background} autoPlay>
+                Your browser doesn't support HTML5 video playback. Please use a modern browser.
+            </StyledVideo>
+        </StyledVideoContainer>
     );
 }
diff --git a/src/templates/video.js b/src/templates/video.js
@@ -1,6 +1,5 @@
 import {Link} from "gatsby";
 import Flex, {FlexItem} from "components/flex";
-import VideoPlayer from "components/videoPlayer";
 import styled from "styled-components";
 import Text from "components/text";
 import useAniList from "hooks/useAniList";
@@ -55,67 +54,64 @@ export default function VideoPage({ pageContext: { video, anime, theme, entry }
     }).filter((otherEntry) => !!otherEntry);
 
     return (
-        <Flex gapsColumn="1rem">
-            <VideoPlayer src={video.link.replace(".dev", ".moe")}/>
-            <StyledVideoInfo>
-                <Flex row alignItems="center" gapsRow="1rem">
-                    <StyledCover alt="Cover" src={image}/>
-                    <FlexItem flex={1}>
-                        <Flex justifyContent="center" gapsColumn="0.25rem">
-                            <SongTitleWithArtists song={theme.song}/>
-                            <Text small maxLines={1}>
-                                <Text>{theme.slug} from </Text>
-                                <Link to={`/anime/${anime.alias}`}>
-                                    <Text link>{anime.name}</Text>
-                                </Link>
-                            </Text>
-                        </Flex>
-                    </FlexItem>
-                    <Flex row alignItems="center" gapsRow="0.5rem">
-                        <Text small>Version {entry.version || 1}</Text>
-                        <ThemeEntryTags entry={entry}/>
-                        <Text link>&bull;</Text>
-                        <VideoTags video={video}/>
+        <StyledVideoInfo>
+            <Flex row alignItems="center" gapsRow="1rem">
+                <StyledCover alt="Cover" src={image}/>
+                <FlexItem flex={1}>
+                    <Flex justifyContent="center" gapsColumn="0.25rem">
+                        <SongTitleWithArtists song={theme.song}/>
+                        <Text small maxLines={1}>
+                            <Text>{theme.slug} from </Text>
+                            <Link to={`/anime/${anime.alias}`}>
+                                <Text link>{anime.name}</Text>
+                            </Link>
+                        </Text>
                     </Flex>
+                </FlexItem>
+                <Flex row alignItems="center" gapsRow="0.5rem">
+                    <Text small>Version {entry.version || 1}</Text>
+                    <ThemeEntryTags entry={entry}/>
+                    <Text link>&bull;</Text>
+                    <VideoTags video={video}/>
                 </Flex>
-                <Flex row gapsRow="2rem">
-                    <FlexItem flex={2}>
-                        <Flex gapsColumn="1rem">
-                            <Title variant="section">Related entries</Title>
-                            <Flex row gapsRow="1rem">
-                                <FlexItem flex={1}>
-                                    <AnimeSearchResultCard anime={anime} hideThemes/>
-                                </FlexItem>
-                                <FlexItem flex={1}>
-                                    <Flex gapsColumn="1rem">
-                                        {theme.song.artists.map((artist) => (
-                                            <ArtistSearchResultCard artist={artist}/>
-                                        ))}
+            </Flex>
+            <Flex row gapsRow="2rem">
+                <FlexItem flex={2}>
+                    <Flex gapsColumn="1rem">
+                        <Title variant="section">Related entries</Title>
+                        <Flex row gapsRow="1rem">
+                            <FlexItem flex={1}>
+                                <AnimeSearchResultCard anime={anime} hideThemes/>
+                            </FlexItem>
+                            <FlexItem flex={1}>
+                                <Flex gapsColumn="1rem">
+                                    {theme.song.artists.map((artist) => (
+                                        <ArtistSearchResultCard key={artist.name} artist={artist}/>
+                                    ))}
+                                </Flex>
+                            </FlexItem>
+                        </Flex>
+                    </Flex>
+                </FlexItem>
+                <FlexItem flex={1}>
+                    {!!otherEntries.length && (
+                        <Flex gapsColumn="1rem" alignItems="flex-end">
+                            <Title variant="section">Other versions</Title>
+                            {otherEntries.map((otherEntry) => (
+                                <React.Fragment key={otherEntry.version}>
+                                    <Flex row alignItems="center" gapsRow="0.5rem">
+                                        <Text small>Version {otherEntry.version || 1}</Text>
+                                        <ThemeEntryTags entry={entry}/>
                                     </Flex>
-                                </FlexItem>
-                            </Flex>
+                                    {otherEntry.videos.map((video, index) => (
+                                        <VideoButton key={index} video={video}/>
+                                    ))}
+                                </React.Fragment>
+                            ))}
                         </Flex>
-                    </FlexItem>
-                    <FlexItem flex={1}>
-                        {!!otherEntries.length && (
-                            <Flex gapsColumn="1rem" alignItems="flex-end">
-                                <Title variant="section">Other versions</Title>
-                                {otherEntries.map((otherEntry) => (
-                                    <>
-                                        <Flex row alignItems="center" gapsRow="0.5rem">
-                                            <Text small>Version {otherEntry.version || 1}</Text>
-                                            <ThemeEntryTags entry={entry}/>
-                                        </Flex>
-                                        {otherEntry.videos.map((video, index) => (
-                                            <VideoButton key={index} video={video}/>
-                                        ))}
-                                    </>
-                                ))}
-                            </Flex>
-                        )}
-                    </FlexItem>
-                </Flex>
-            </StyledVideoInfo>
-        </Flex>
+                    )}
+                </FlexItem>
+            </Flex>
+        </StyledVideoInfo>
     );
 }