feat: video player

.eslintrc.json

@@ -70,6 +70,7 @@
     "react/prefer-stateless-function": 0,
     "react/forbid-prop-types": 0,
     "react/no-unescaped-entities": 0,
+    "jsx-a11y/media-has-caption": 0,
     "jsx-a11y/accessible-emoji": 0,
     "react/require-default-props": 0,
     "react/jsx-props-no-spreading": 0,

src/components/card/index.js

@@ -1,6 +1,5 @@
 import React, { useState, useContext, createContext } from 'react';
 import CancelIcon from '@material-ui/icons/Cancel';
-import PlayArrowIcon from '@material-ui/icons/PlayArrow';
 
 import {
   Container,
@@ -17,7 +16,6 @@ import {
   Entities,
   Item,
   Image,
-  PlayButton,
 } from './styles/card';
 
 export const FeatureContext = createContext();
@@ -77,11 +75,7 @@ Card.Image = function CardImage({ ...restProps }) {
   return <Image {...restProps} />;
 };
 
-Card.PlayButton = function CardPlayButton({ children, ...restProps }) {
-  return <PlayButton>{children}</PlayButton>;
-};
-
-Card.Feature = function CardFeature({ category, ...restProps }) {
+Card.Feature = function CardFeature({ children, category, ...restProps }) {
   const { showFeature, itemFeature, setShowFeature } = useContext(FeatureContext);
 
   return showFeature ? (
@@ -97,10 +91,8 @@ Card.Feature = function CardFeature({ category, ...restProps }) {
             {itemFeature.genre.charAt(0).toUpperCase() + itemFeature.genre.slice(1)}
           </FeatureText>
         </Group>
-        <PlayButton>
-          <PlayArrowIcon className="play" />
-          Play
-        </PlayButton>
+
+        {children}
       </Content>
     </Feature>
   ) : null;

src/components/card/styles/card.js

@@ -134,32 +134,6 @@ export const Content = styled.div`
   }
 `;
 
-export const PlayButton = styled.button`
-  background-color: #e50914;
-  border-color: #ff0a16;
-  width: 115px;
-  height: 45px;
-  text-transform: uppercase;
-  font-weight: bold;
-  color: white;
-  font-size: 18px;
-  height: 45px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-left: 0;
-
-  &:hover {
-    transform: scale(1.05);
-    background-color: #ff0a16;
-  }
-
-  svg.play {
-    margin-right: 5px;
-  }
-`;
-
 export const Maturity = styled.div`
   background-color: ${({ rating }) => (rating >= 15 ? 'red' : 'green')};
   border-radius: 15px;

src/components/header/index.js

@@ -69,8 +69,8 @@ Header.Feature = function HeaderFeature({ children, ...restProps }) {
   return <Feature>{children}</Feature>;
 };
 
-Header.Picture = function HeaderPicture({ ...restProps }) {
-  return <Picture {...restProps} />;
+Header.Picture = function HeaderPicture({ src, ...restProps }) {
+  return <Picture {...restProps} src={`/images/users/${src}.png`} />;
 };
 
 Header.Dropdown = function HeaderDropdown({ children, ...restProps }) {

src/components/header/styles/header.js

@@ -98,12 +98,20 @@ export const Dropdown = styled.div`
   top: 32px;
   right: 10px;
 
+  ${Group}:last-of-type ${Link} {
+    cursor: pointer;
+  }
+
   ${Group} {
     margin-bottom: 10px;
 
     &:last-of-type {
       margin-bottom: 0;
     }
+
+    ${Link}, ${Picture} {
+      cursor: default;
+    }
   }
 
   button {
@@ -121,14 +129,18 @@ export const Profile = styled.div`
   display: flex;
   align-items: center;
   margin-left: 20px;
-  cursor: pointer;
   position: relative;
 
   svg {
     color: white;
     margin-left: 5px;
   }
 
+  button,
+  svg {
+    cursor: pointer;
+  }
+
   &:hover > ${Dropdown} {
     display: flex;
     flex-direction: column;

src/components/index.js

@@ -8,3 +8,4 @@ export { default as Profiles } from './profiles';
 export { default as Footer } from './footer';
 export { default as Header } from './header';
 export { default as Loading } from './loading';
+export { default as Player } from './player';

src/components/loading/index.js

@@ -5,7 +5,7 @@ export default function Loading({ src, ...restProps }) {
   return (
     <Spinner {...restProps}>
       <LockBody />
-      <Picture src={src} />
+      <Picture src={`/images/users/${src}.png`} />
     </Spinner>
   );
 }

src/components/player/index.js

@@ -0,0 +1,44 @@
+import React, { useState, useEffect, useContext, createRef, createContext } from 'react';
+import PlayArrowIcon from '@material-ui/icons/PlayArrow';
+import ReactDOM from 'react-dom';
+import { Container, Button, Overlay, Inner } from './styles/player';
+
+export const PlayerContext = createContext();
+
+export default function Player({ children, ...restProps }) {
+  const [showPlayer, setShowPlayer] = useState(false);
+
+  return (
+    <PlayerContext.Provider value={{ showPlayer, setShowPlayer }}>
+      <Container {...restProps}>{children}</Container>
+    </PlayerContext.Provider>
+  );
+}
+
+Player.Video = function PlayerVideo({ ...restProps }) {
+  const { showPlayer, setShowPlayer } = useContext(PlayerContext);
+
+  return showPlayer
+    ? ReactDOM.createPortal(
+        <Overlay onClick={() => setShowPlayer(false)}>
+          <Inner>
+            <video id="netflix-player" controls>
+              <source src="/videos/bunny.mp4" type="video/mp4" />
+            </video>
+          </Inner>
+        </Overlay>,
+        document.body
+      )
+    : null;
+};
+
+Player.Button = function PlayerButton({ ...restProps }) {
+  const { showPlayer, setShowPlayer } = useContext(PlayerContext);
+
+  return (
+    <Button onClick={() => setShowPlayer(!showPlayer)}>
+      <PlayArrowIcon className="play" />
+      Play
+    </Button>
+  );
+};

src/components/player/styles/player.js

@@ -0,0 +1,88 @@
+import styled from 'styled-components/macro';
+
+export const Container = styled.div``;
+
+export const Overlay = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  margin: 0 20px;
+`;
+
+export const Inner = styled.div`
+  position: relative;
+  width: 100%;
+  max-width: 900px;
+  margin: auto;
+
+  video {
+    height: 100%;
+    width: 100%;
+  }
+`;
+
+export const Close = styled.button`
+  position: absolute;
+  right: 15px;
+  top: 15px;
+  width: 22px;
+  height: 22px;
+  opacity: 0.3;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &:before,
+  &:after {
+    position: absolute;
+    left: 10px;
+    top: 0;
+    content: ' ';
+    height: 22px;
+    width: 2px;
+    background-color: #333;
+  }
+
+  &:before {
+    transform: rotate(45deg);
+  }
+  &:after {
+    transform: rotate(-45deg);
+  }
+`;
+
+export const Button = styled.button`
+  background-color: #e50914;
+  border-color: #ff0a16;
+  width: 115px;
+  height: 45px;
+  text-transform: uppercase;
+  font-weight: bold;
+  color: white;
+  font-size: 18px;
+  height: 45px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-left: 0;
+
+  &:hover {
+    transform: scale(1.05);
+    background-color: #ff0a16;
+  }
+
+  svg.play {
+    margin-right: 5px;
+  }
+`;

src/components/profiles/styles/profiles.js

@@ -40,6 +40,7 @@ export const Picture = styled.img`
   max-width: 150px;
   height: auto;
   border: 3px solid black;
+  cursor: pointer;
 `;
 
 export const Item = styled.li`
@@ -48,7 +49,6 @@ export const Item = styled.li`
   list-style-type: none;
   text-align: center;
   margin-right: 30px;
-  cursor: pointer;
 
   &:hover > ${Picture} {
     border: 3px solid white;

src/containers/browse.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useContext } from 'react';
 import Fuse from 'fuse.js';
-import { Card, Header, Loading } from '../components';
+import { Card, Header, Loading, Player } from '../components';
 import * as ROUTES from '../constants/routes';
 import logo from '../logo.svg';
 import { FirebaseContext } from '../context/firebase';
@@ -40,7 +40,7 @@ export function BrowseContainer({ slides }) {
 
   return profile.displayName ? (
     <>
-      {loading ? <Loading src={`/images/users/${user.photoURL}.png`} /> : <Loading.ReleaseBody />}
+      {loading ? <Loading src={user.photoURL} /> : <Loading.ReleaseBody />}
 
       <Header src="joker1">
         <Header.Frame>
@@ -56,15 +56,12 @@ export function BrowseContainer({ slides }) {
           <Header.Group>
             <Header.Search searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
             <Header.Profile>
-              <Header.Picture src={`/images/users/${user.photoURL}.png`} />
+              <Header.Picture src={user.photoURL} />
               <Header.Dropdown>
                 <Header.Group>
-                  <Header.Picture src={`/images/users/${user.photoURL}.png`} />
+                  <Header.Picture src={user.photoURL} />
                   <Header.TextLink>{user.displayName}</Header.TextLink>
                 </Header.Group>
-                <Header.Group>
-                  <Header.TextLink onClick={() => console.log('favourites')}>Favourites</Header.TextLink>
-                </Header.Group>
                 <Header.Group>
                   <Header.TextLink onClick={() => firebase.auth().signOut()}>Sign out</Header.TextLink>
                 </Header.Group>
@@ -99,7 +96,12 @@ export function BrowseContainer({ slides }) {
                 </Card.Item>
               ))}
             </Card.Entities>
-            <Card.Feature category={category} />
+            <Card.Feature category={category}>
+              <Player>
+                <Player.Button />
+                <Player.Video />
+              </Player>
+            </Card.Feature>
           </Card>
         ))}
       </Card.Group>

src/hooks/use-content.js

@@ -1,8 +1,6 @@
 import { useEffect, useState, useContext } from 'react';
 import { FirebaseContext } from '../context/firebase';
 
-// with the profile id updating, this is going to get called again and again,
-// need to figure out how to stop that
 export default function useContent(target) {
   const [content, setContent] = useState([]);
   const { firebase } = useContext(FirebaseContext);