-
+ {!props.streamIsLive && }
+
)
diff --git a/src/components/VideoOverlay/index.js b/src/components/VideoOverlay/index.js
index af13c36..c7b21e3 100644
--- a/src/components/VideoOverlay/index.js
+++ b/src/components/VideoOverlay/index.js
@@ -1,10 +1,12 @@
import { Fragment, h } from 'preact'
+import { useEffect, useState } from 'preact/hooks'
import { bool, string } from 'prop-types'
import styled from 'styled-components'
+import { colours } from '../../assets/theme'
+import { useUiStore } from '../../store'
-import Logo from '../Logo'
import { H2, P } from '../Text'
-import { InfoButton, OverlayWrapper, TopLeft } from './styles'
+import { InfoButton, PositionedCross as CrossSvg, OverlayWrapper, TopLeft, ButtonRow, ResoltionSelect } from './styles'
const StyledP = styled(P)`
&:first-of-type {
@@ -25,32 +27,72 @@ const renderTitles = titles =>
))
+const resolutions = [
+ {
+ value: -1,
+ label: 'AUTO',
+ },
+ {
+ value: 3,
+ label: '240p',
+ },
+ {
+ value: 0,
+ label: '480p',
+ },
+ {
+ value: 1,
+ label: '360p',
+ },
+ {
+ value: 2,
+ label: '720p',
+ },
+ {
+ value: 4,
+ label: '1080p',
+ }
+]
+
const VideoOverlay = ({
active,
title,
org,
- setInfoActive,
onClick,
onClickFullscreen,
isFullscreen,
-}) => (
- // const displayTitle = `${title}${org ? ` — ${org}` : ''}`
+ streamIsLive,
+ videoRef
+}) => {
+ const setStreamActive = useUiStore(store => store.setStreamActive)
+ const closeStream = () => setStreamActive(false)
+ const [resoltionIndex, setResolutionIndex] = useState(0)
-