From f1bd7697fac4e8b685691053b995427a844edaa6 Mon Sep 17 00:00:00 2001 From: Benjamin Jones Date: Fri, 26 Mar 2021 10:45:10 +0100 Subject: [PATCH] =?UTF-8?q?commit=20latest=20=F0=9F=99=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Chat/index.js | 9 ++++++++- src/components/Chat/styles.js | 13 ++++++++----- src/components/Svg/Chevron.js | 25 ++++++++++++++++++++++++ src/components/Svg/Cross.js | 7 ++++++- src/components/Svg/proptypes.js | 8 ++++++++ src/components/Video/index.js | 34 +++++++++++++++++---------------- src/components/Video/styles.js | 2 +- 7 files changed, 74 insertions(+), 24 deletions(-) create mode 100644 src/components/Svg/Chevron.js create mode 100644 src/components/Svg/proptypes.js 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 }) => ( @@ -13,4 +14,8 @@ 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;