commit latest 🙃

src/components/Chat/index.js

@@ -4,7 +4,13 @@ import { useWindowDimensions } from '../../hooks/dom'
 import { useToggle } from '../../hooks/utility'
 
 import { Label } from '../Text'
-import { ChatFrame, ChatWrapper, ChatHeader, CloseBox } from './styles'
+import {
+  ChatFrame,
+  ChatWrapper,
+  ChatHeader,
+  CloseBox,
+  OpenIcon,
+} from './styles'
 import { colours } from '../../assets/theme'
 
 const Chat = ({}) => {
@@ -34,6 +40,7 @@ const Chat = ({}) => {
       <Label weight="400" size={24}>
         Chat
       </Label>
+      <OpenIcon colour={colours.white} size={16} />
     </ChatHeader>
   )
 }

src/components/Chat/styles.js

@@ -1,6 +1,7 @@
 import styled from 'styled-components'
 import { colours, ui } from '../../assets/theme'
 import CrossSvg from '../Svg/Cross'
+import ChevronSvg from '../Svg/Chevron'
 import { Label } from '../Text'
 
 export const ChatFrame = styled.div`
@@ -15,7 +16,6 @@ export const ChatWrapper = styled.div`
   right: 0;
   backdrop-filter: blur(20px);
   background-color: ${colours.midnight}40;
-  /* padding: 20px; */
   border-radius: ${ui.borderRadius}px;
 `
 
@@ -23,10 +23,8 @@ export const ChatHeader = styled.div`
   position: absolute;
   bottom: ${props => (props.chatIsOpen ? 'initial' : 0)};
   top: ${props => (props.chatIsOpen ? '4px' : 'initial')};
-  /* cursor: ${props => (props.dragging ? 'grabbing' : 'grab')}; */
   border-radius: ${ui.borderRadius}px 0 0 0;
 
-
   height: 32px;
   box-sizing: border-box;
   display: flex;
@@ -45,7 +43,7 @@ export const ChatHeader = styled.div`
 
   label {
     margin-left: 12px;
-    margin-right: ${props => (props.chatIsOpen ? '0' : '12px')}
+    margin-right: ${props => (props.chatIsOpen ? '0' : '12px')};
   }
 `
 
@@ -53,3 +51,8 @@ export const CloseBox = styled(CrossSvg)`
   padding: 12px;
   cursor: pointer;
 `
+
+export const OpenIcon = styled(ChevronSvg)`
+  padding-right: 12px;
+  cursor: pointer;
+`

src/components/Svg/Chevron.js

@@ -0,0 +1,25 @@
+import { h } from 'preact'
+import { svgPropTypes } from './proptypes'
+
+const Chevron = ({ colour = 'inherit', size, ...rest }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    height={size}
+    viewBox="0 0 100 100"
+    {...rest}
+  >
+    <path
+      fill={colour}
+      fillRule="evenodd"
+      d="M49.68 19.005l.002-.003 46.733 46.733-14.849 14.85-31.889-31.89-30.889 30.89L3.94 64.735 49.675 19l.005.005z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+
+Chevron.propTypes = {
+  ...svgPropTypes,
+}
+
+export default Chevron

src/components/Svg/Cross.js

@@ -1,5 +1,6 @@
 import { h } from 'preact'
-import { bool, string } from 'prop-types'
+
+import { svgPropTypes } from './proptypes'
 
 const Cross = ({ colour = 'inherit', size, ...rest }) => (
   <svg viewBox="0 0 100 100" height={size} {...rest}>
@@ -13,4 +14,8 @@ const Cross = ({ colour = 'inherit', size, ...rest }) => (
   </svg>
 )
 
+Cross.propTypes = {
+  ...svgPropTypes,
+}
+
 export default Cross

src/components/Svg/proptypes.js

@@ -0,0 +1,8 @@
+import { number, string } from 'prop-types'
+
+export const svgPropTypes = {
+  colour: string,
+  size: number,
+}
+
+export default svgPropTypes

src/components/Video/index.js

@@ -6,16 +6,12 @@ import { PeerTubePlayer } from '@peertube/embed-api'
 
 import Chat from '../Chat'
 import Overlay from '../VideoOverlay'
-import { useToggle } from '../../hooks/utility'
 import { VideoWrapper, Iframe } from './styles'
 
 const Video = ({ playing, setPlaying, src, title, org, setInfoActive }) => {
   const videoiFrame = useRef(null)
   const overlayTimeout = useRef(null)
-  const videoWrapperEl = useRef(null)
   const [videoReady, setVideoReady] = useState(false)
-  // const [isFullscreen, toggleFullscreen] = useToggle(false)
-  // const [chatActive, setChatActive] = useState(false)
   const [overlayActive, setOverlayActiveState] = useState(true)
   const ptVideo = useRef(null)
 
@@ -38,29 +34,35 @@ const Video = ({ playing, setPlaying, src, title, org, setInfoActive }) => {
 
     if (playing) {
       setOverlayActiveState(false)
+
+      try {
         player.play()
+      } catch (error) {
+        console.log({ error })
+        setOverlayActiveState(true)
+        setPlaying(false)
+      }
     } else {
       setOverlayActiveState(true)
       player.pause()
     }
   }, [playing])
 
-  const goFullscreen = () => {
-    // toggleFullscreen()
+  const toggleFullscreen = () => {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen()
+    } else if (document.exitFullscreen) {
+      document.exitFullscreen()
     }
-
-  const exitFullscreen = () => {
-    // toggleFullscreen()
   }
 
   const handleKeyPress = keyCode => {
     if (keyCode === 32) {
       setPlaying(!playing)
     }
-    // if (keyCode === 70 && !isFullscreen) {
-    // console.log('goFullscreen')
-    // goFullscreen()
-    // }
+    if (keyCode === 70) {
+      toggleFullscreen()
+    }
     // if (keyCode === 70 && isFullscreen) {
     // console.log('exitFullscreen')
     // exitFullscreen()
@@ -89,11 +91,11 @@ const Video = ({ playing, setPlaying, src, title, org, setInfoActive }) => {
   return (
     <VideoWrapper
       $active={overlayActive || !playing}
-      onClick={() => setPlaying(!playing)}
       onMouseMove={activateOverlay}
       // ref={videoWrapperEl}
     >
       <Overlay
+        onClick={() => setPlaying(!playing)}
         active={overlayActive || !playing}
         title={title}
         org={org}

src/components/Video/styles.js

@@ -9,12 +9,12 @@ export const VideoWrapper = styled.div`
   bottom: 0;
   left: 0;
   right: 0;
+  /* pointer-events: none; */
   cursor: ${props => (props.$active ? 'pointer' : 'none')};
 `
 export const Iframe = styled.iframe`
   width: 100vw;
   height: 100vh;
-  pointer-events: none;
 `
 export const Overlay = styled.div`
   z-index: 2;