commit latest 🙃

This commit is contained in:
Benjamin Jones 2021-03-26 10:45:10 +01:00
parent aa7ffc900b
commit f1bd7697fa
7 changed files with 74 additions and 24 deletions

View File

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

View File

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

View File

@ -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

View File

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

View File

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

View File

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

View File

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