diff --git a/src/components/Chat/index.js b/src/components/Chat/index.js
index d7771d9..da07da6 100644
--- a/src/components/Chat/index.js
+++ b/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 = ({}) => {
+
)
}
diff --git a/src/components/Chat/styles.js b/src/components/Chat/styles.js
index 84b1466..0a24eed 100644
--- a/src/components/Chat/styles.js
+++ b/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;
@@ -41,11 +39,11 @@ export const ChatHeader = styled.div`
props.chatIsOpen ? 'none' : `1px solid ${colours.white}`};
border-bottom: ${props =>
props.chatIsOpen ? `1px solid ${colours.white}75` : 'none'};
- border-right: none;
+ border-right: none;
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;
+`
diff --git a/src/components/Svg/Chevron.js b/src/components/Svg/Chevron.js
new file mode 100644
index 0000000..a731043
--- /dev/null
+++ b/src/components/Svg/Chevron.js
@@ -0,0 +1,25 @@
+import { h } from 'preact'
+import { svgPropTypes } from './proptypes'
+
+const Chevron = ({ colour = 'inherit', size, ...rest }) => (
+
+)
+
+Chevron.propTypes = {
+ ...svgPropTypes,
+}
+
+export default Chevron
diff --git a/src/components/Svg/Cross.js b/src/components/Svg/Cross.js
index 8a53243..c0a6026 100644
--- a/src/components/Svg/Cross.js
+++ b/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 }) => (
)
+Cross.propTypes = {
+ ...svgPropTypes,
+}
+
export default Cross
diff --git a/src/components/Svg/proptypes.js b/src/components/Svg/proptypes.js
new file mode 100644
index 0000000..a0a26f5
--- /dev/null
+++ b/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
diff --git a/src/components/Video/index.js b/src/components/Video/index.js
index 58570e1..255e611 100644
--- a/src/components/Video/index.js
+++ b/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)
- player.play()
+
+ try {
+ player.play()
+ } catch (error) {
+ console.log({ error })
+ setOverlayActiveState(true)
+ setPlaying(false)
+ }
} else {
setOverlayActiveState(true)
player.pause()
}
}, [playing])
- const goFullscreen = () => {
- // toggleFullscreen()
- }
-
- const exitFullscreen = () => {
- // toggleFullscreen()
+ const toggleFullscreen = () => {
+ if (!document.fullscreenElement) {
+ document.documentElement.requestFullscreen()
+ } else if (document.exitFullscreen) {
+ document.exitFullscreen()
+ }
}
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 (
setPlaying(!playing)}
onMouseMove={activateOverlay}
// ref={videoWrapperEl}
>
setPlaying(!playing)}
active={overlayActive || !playing}
title={title}
org={org}
diff --git a/src/components/Video/styles.js b/src/components/Video/styles.js
index 4d330cb..46e52c3 100644
--- a/src/components/Video/styles.js
+++ b/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;