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 { 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>
)
}

View File

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

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

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 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 (
<VideoWrapper
$active={overlayActive || !playing}
onClick={() => setPlaying(!playing)}
onMouseMove={activateOverlay}
// ref={videoWrapperEl}
>
<Overlay
onClick={() => setPlaying(!playing)}
active={overlayActive || !playing}
title={title}
org={org}

View File

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