underscore/stream
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

lots of polish

Browse Source
This commit is contained in:
sunda 2021-11-01 23:34:29 +01:00
parent e6e05d90ef
commit c2c7e0f3a5
35 changed files with 889 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
index.js
View File

@ -8,19 +8,22 @@ import { zonedTimeToUtc, utcToZonedTime } from 'date-fns-tz'
import Main from './app'
import SeriesPage from './src/pages/SeriesPage'
import { useEventApi, usePeertubeApi } from './src/hooks/data'
import { useStreamStore, useTheme } from './src/store'
import { useStreamStore, useTheme, useUiStore } from './src/store'
import { useTimeout } from './src/hooks/timerHooks'
import LoaderLayout from './src/pages/LoaderLayout'
import FourOhFour from './src/pages/404'
import Series from './src/pages/Series'
import Program from './src/pages/Program'
import StreamPreview from './src/components/StreamPreview'
import Video from './src/components/Video'
// import { useWindowSize } from './src/hooks/dom'
const App = () => {
const { theme } = useTheme((store) => store)
const { data, loading: eventsLoading } = useEventApi()
const { data, loading: eventsLoading, error } = useEventApi()
const [minLoadTimePassed, setMinTimeUp] = useState(false)
const { setCurrentStream, currentStream, streamIsLive } = useStreamStore(store => store)
const streamActive = useUiStore(store => store.streamActive)
usePeertubeApi(data.episodes)
useTimeout(() => {
@ -55,16 +58,15 @@ const App = () => {
const seriesData = data.series ? Object.values(data.series) : []
return (
<ThemeProvider theme={theme}>
{!seriesData.length || eventsLoading || !minLoadTimePassed ? (
<LoaderLayout />
{!seriesData.length || eventsLoading || !minLoadTimePassed || error ? (
<LoaderLayout error={error} />
) : (
<Fragment>
<BrowserRouter>
<Switch>
<Route exact path="/" component={Main} />
<Route exact path="/" component={Program} />
<Route exact path="/series" component={Series} />
<Route exact path="/program" component={Program} />
{seriesData.length ? seriesData.map(series => (
@ -76,7 +78,8 @@ const App = () => {
</Route>
</Switch>
</BrowserRouter>
<StreamPreview stream={currentStream} isLive={streamIsLive} />
{streamActive ? <Video stream={currentStream} /> :
<StreamPreview stream={currentStream} isLive={streamIsLive} />}
</Fragment>
)}
</ThemeProvider>)

4
package.json
View File

@ -15,7 +15,7 @@
"react-dom": "preact/compat"
},
"dependencies": {
"@peertube/embed-api": "^0.0.4",
"@peertube/embed-api": "^0.0.5",
"axios": "^0.21.1",
"date-fns": "^2.19.0",
"date-fns-tz": "^1.1.4",
@ -47,4 +47,4 @@
"sass": "^1.32.8",
"scss": "^0.2.4"
}
}
}

6
src/components/Button/index.js
View File

@ -3,11 +3,11 @@ import { colours } from '../../assets/theme'
const Button = styled.button`
background-color: transparent;
border: 1px solid ${colours.rose};
border: 1px solid ${props => props.colour || colours.rose};
padding: 0.3em 1em;
font-family: Karla;
font-weight: inherit;
color: ${colours.rose};
color: ${props => props.colour || colours.rose};
opacity: 1;
text-decoration: none;
font-size: 24px;
@ -21,7 +21,7 @@ const Button = styled.button`
}
:hover {
background-color: ${colours.rose};
background-color: ${props => props.hoverColour || colours.rose};
color: ${colours.midnightDarker};
svg {

4
src/components/Chat/index.js
View File

@ -37,8 +37,8 @@ const Chat = ({ overlayActive }) => {
</ChatFrame>
</ChatWrapper>
) : (
<ChatHeader chatIsOpen={false} onClick={toggleChatOpen}>
<Label weight="400" size={24}>
<ChatHeader chatIsOpen={false} onClick={toggleChatOpen} $active={overlayActive}>
<Label weight="400" size={16} colour={colours.midnightDarker}>
CHAT
</Label>
<OpenIcon colour={colours.white} size={16} />

25
src/components/Chat/styles.js
View File

@ -1,4 +1,4 @@
import styled from 'styled-components'
import styled, { css } from 'styled-components'
import { colours, ui } from '../../assets/theme'
import CrossSvg from '../Svg/Cross'
import ChevronSvg from '../Svg/Chevron'
@ -27,17 +27,15 @@ export const ChatHeader = styled.div`
border-radius: ${props =>
props.chatIsOpen ? `${ui.borderRadius}px 0 0 0` : '0'};
z-index: 2;
background-color: ${props => (props.chatIsOpen ? '#00000036' : '#ffffffba')};
background-color: ${props => (props.chatIsOpen ? `${colours.midnightDarker}db` : '#ffffffba')};
backdrop-filter: blur(2px);
height: 32px;
box-sizing: border-box;
display: flex;
align-items: center;
width: ${props => (props.chatIsOpen ? '100%' : 'fit-content')};
justify-content: space-between;
padding: 0px 0px 3px 0px;
padding: ${props => props.chatIsOpen ? '0px 0px 3px 0px' : '0.3em 0'};
right: ${props => (props.chatIsOpen ? '0' : '32px')};
box-sizing: content-box;
border: ${props =>
@ -50,12 +48,25 @@ export const ChatHeader = styled.div`
margin-left: 12px;
margin-right: ${props => (props.chatIsOpen ? '0' : '12px')};
color: ${props =>
props.chatIsOpen ? colours.white : colours.midnightDarker};
props.chatIsOpen ? colours.white : colours.midnightDarker};
}
svg path {
fill: ${props =>
props.chatIsOpen ? colours.white : colours.midnightDarker};
props.chatIsOpen ? colours.white : colours.midnightDarker};
}
opacity: 0.001;
transform: translateY(20%);
transition: all 0.2s ease-in-out;
transition-delay: 0.2s;
cursor: pointer;
${props =>
(props.$active || props.chatIsOpen) &&
css`
transform: translateY(0%);
opacity: 1;
`};
`
export const CloseBox = styled(CrossSvg)`

35
src/components/EpisodeCard/styles.js
View File

@ -4,6 +4,14 @@ import { Label, H2 } from '../Text'
import Flexbox, { Row as FlexRow, Column as FlexColumn } from '../Flex'
import Button from '../Button'
const imageWidthStyles = `
width: 25vw;
@media screen and (max-width: ${screenSizes.md}px) {
width: 85vw;
}
`
export const ButtonRow = styled(Flexbox)`
width: 100%;
align-items: stretch;
@ -29,11 +37,10 @@ export const ButtonRow = styled(Flexbox)`
`
export const Left = styled(FlexColumn)`
margin-right: 1em;
width: 20vw;
@media screen and (max-width: ${screenSizes.md}px) {
width: 80vw;
margin-right: 2em;
${imageWidthStyles};
@media screen and (max-width: ${screenSizes.md}px) {
margin-right: 0em;
}
`
@ -45,15 +52,7 @@ export const Center = styled(FlexColumn)`
`
export const Title = styled(H2)`
max-width: 60%;
@media screen and (max-width: ${screenSizes.md}px) {
max-width: 80%;
}
@media screen and (max-width: ${screenSizes.sm}px) {
max-width: 70%;
}
max-width: 80%;
margin-bottom: 1em;
`
@ -68,7 +67,6 @@ export const Right = styled.div`
}
`
export const StyledButton = styled(Button)`
/* width: max-content; */
margin-top: 0.5em;
padding: 0.3em 2em;
@ -79,14 +77,9 @@ export const StyledButton = styled(Button)`
export const Img = styled.div`
background: url(${({ src }) => src});
/* height: 215px; */
width: 20vw;
padding-bottom: calc((9 / 16) * 100%);
background-size: cover;
position: relative;
background-position: center;
@media screen and (max-width: ${screenSizes.md}px) {
width: 80vw;
}
${imageWidthStyles};
`

5
src/components/Header/index.js
View File

@ -9,6 +9,7 @@ import { Span } from '../Text'
import navigation from '../../data/navigation'
import { colours, screenSizes, textSizes } from '../../assets/theme'
import { useTheme, useUiStore } from '../../store'
import strings from '../../data/strings'
const Navigation = ({ theme = {}, lang = 'en', miniHeader, toggleMobileMenu }) => navigation[lang].map(navItem => (
<Link
@ -64,7 +65,9 @@ export const MobileMenuToggle = ({ miniHeader, ...props }) => {
colour={miniHeader ? theme.background : theme.foreground || colours.rose}
fontFamily="Lunchtype24"
{...props}
> Menu</Span>)
>
{strings.en.menu}
</Span>)
}

2
src/components/Link/styles.js
View File

@ -15,7 +15,7 @@ export const RRLink = styled(Link)`
color: ${colours.highlight};
font-size: 21px;
position: absolute;
top: 50%;
top: 45%;
font-family: 'Karla';
transform: translateY(-50%);
}

2
src/components/Loader/index.js
View File

@ -12,10 +12,10 @@ const Loader = ({
offset = 0,
animation = defaultLoader,
colour = colours.rose,
rate = 300
}) => {
const [text, setText] = useState('.')
const arrayPosition = useRef(offset)
const rate = 300
useInterval(
() => {

69
src/components/Select/index.js Normal file
View File

@ -0,0 +1,69 @@
import { Fragment, h } from 'preact'
import { arrayOf, number, shape, string } from 'prop-types'
import { useCallback, useRef, useState } from 'preact/hooks'
import { withTheme } from 'styled-components'
import { useOnClickOutside } from '../../hooks/dom'
import { Label } from '../Text'
import { Box, Item, Container, OptionsWrapper, ChevronIcon } from './styles'
import { colours } from '../../assets/theme'
const Select = withTheme(({ options, selectedIndex, onChange, theme, bottom, withIcon = true, ...rest }) => {
const [isOpen, setIsOpen] = useState(false)
const close = () => { setIsOpen(false) }
const open = () => { setIsOpen(true) }
const optionsRef = useRef([])
const toggle = () => { setIsOpen(itsopen => !itsopen) }
const ref = useRef()
useOnClickOutside(ref, useCallback(() => close()))
const handleItemClick = (index) => {
if (typeof onChange === 'function') {
close()
onChange(index)
}
}
const handleKeyPress = (e) => {
e.preventDefault()
if (e.keyCode === 32) {
open()
}
if (e.keyCode === 40) {
open()
console.log('optionsRef.current', optionsRef.current)
// optionsRef.current[1].focus();
}
}
return (
<Container ref={ref} {...rest}>
{options && options.length ? (
<Fragment>
<Box onClick={toggle} tabIndex={0} onKeyDown={handleKeyPress} data-hoverable>
<Label colour={colours.midnight}>{options[selectedIndex].label}</Label>
{withIcon && <ChevronIcon colour={colours.midnight} size={14} />}
</Box>
{isOpen && options && options.length ? (
<OptionsWrapper ref={optionsRef} bottom={bottom} >
{options.map((option, optionIndex) => option.value !== options[selectedIndex].value && (
<Item tabIndex={0} data-hoverable onClick={() => handleItemClick(optionIndex)} key={option.value} ref={optionsRef[optionIndex]}>
{option.label}
</Item>
))}
</OptionsWrapper>
) : null}
</Fragment>
) : <Box />}
</Container>
)
})
Select.propTypes = {
options: arrayOf(shape({
label: string,
})),
selectedIndex: number,
}
export default Select

63
src/components/Select/styles.js Normal file
View File

@ -0,0 +1,63 @@
import { h } from 'preact'
import styled, { css } from 'styled-components'
import { colours } from '../../assets/theme'
import ChevronSvg from '../Svg/Chevron'
import { Label } from '../Text'
export const Container = styled.div`
position: relative;
max-width: min-content;
margin-left: 8px;
background-color: red;
`
export const OptionsWrapper = styled.div`
position: absolute;
display: flex;
flex-direction: ${props => props.bottom ? 'column-reverse' : 'column'};
bottom: ${props => props.bottom ? '100%' : 'auto'};
transform: translateY(${props => props.bottom ? '1' : '-1'}px);
div {
margin-${props => props.bottom ? 'top' : 'bottom'}: -1px;
}
`
export const Box = styled.div`
padding: 4px 16px;
/* border: 1px solid ${({ theme }) => theme.foreground}; */
/* background: ${({ theme }) => theme.background}; */
position: relative;
display: flex;
flex-direction: row;
align-items: center;
border: 1px solid ${colours.midnight};
min-width: 45px;
text-align: center;
label {
position: relative;
top: 1px;
line-height: 1;
}
${({ selectable }) => selectable && css`
&:hover {
background: ${colours.white};
label {
color: ${colours.midnightDarker};
}
}
`}
`
export const Item = ({ label, children, ...rest }) => (
<Box selectable {...rest}>
<Label>{label || children}</Label>
</Box>
)
export const ChevronIcon = styled(ChevronSvg)`
margin-left: 8px
`

4
src/components/SeriesCard/index.js
View File

@ -19,12 +19,12 @@ const SeriesCard = ({ series: { image, episodes: allEpisodes, title, subtitle, h
<LabelBlock
$position="top"
>
{episodes.length} {strings.en.episodes}
{episodes.length} {episodes.length === 1 ? strings.en.episode : strings.en.episodes}
</LabelBlock>
<LabelBlock
$position="bottom"
>
{isPast ? strings.en.lastStream : strings.en.nextStream} {episodes && episodes.length && formatDistanceToNow(new Date(episodes[0].endsOn), { addSuffix: true })}
{isPast ? strings.en.lastStream : strings.en.nextStream} {episodes && episodes.length && formatDistanceToNow(new Date(episodes[0][isPast ? 'endsOn' : 'beginsOn']), { addSuffix: true })}
</LabelBlock>
</Img>

25
src/components/StreamPreview/index.js
View File

@ -5,20 +5,25 @@ import { string } from 'prop-types'
import Link from '../Link'
import { Label } from '../Text'
import strings from '../../data/strings'
import { Box, Img, Iframe } from './styles'
import { colours, textSizes } from '../../assets/theme'
import { Row } from '../Flex'
import CrossSvg from '../Svg/Cross'
import { useUiStore } from '../../store'
import { getLabel } from './helpers'
import Chevron from '../Svg/Chevron'
import { Frame, Img, Iframe, InnerWrapper } from './styles'
// import { useEventApi } from '../../hooks/data'
const StreamPreview = ({ stream, isLive, ...rest }) => {
const currentLanguage = 'en'
const videoiFrame = useRef(null)
const ptVideo = useRef(null)
const { isMinimized, toggleMinimized } = useUiStore(store => ({ isMinimized: store.streamPreviewMinimized, toggleMinimized: store.toggleStreamPreviewMinimized }))
const { isMinimized, toggleMinimized, setStreamActive } = useUiStore(store => ({
isMinimized: store.streamPreviewMinimized,
toggleMinimized: store.toggleStreamPreviewMinimized,
setStreamActive: store.setStreamActive
}))
useEffect(() => {
@ -35,14 +40,18 @@ const StreamPreview = ({ stream, isLive, ...rest }) => {
}
}, [isLive, isMinimized])
const activateStream = () => {
setStreamActive(true)
}
return stream ? (
<Box isMinimized={isMinimized}>
<Frame isMinimized={isMinimized}>
<Row justify="space-between">
<Label colour={colours.midnightDarker} size={textSizes.lg}>{getLabel(stream, isLive, isMinimized)}</Label>
<Label colour={colours.midnightDarker} size={textSizes.lg} onClick={activateStream}>{getLabel(stream, isLive, isMinimized)}</Label>
{isMinimized ? <Chevron colour={colours.midnightDarker} size={14} onClick={toggleMinimized} /> : <CrossSvg colour={colours.midnightDarker} size={16} onClick={toggleMinimized} />}
</Row>
{!isMinimized ?
<Fragment>
<InnerWrapper onClick={activateStream}>
{isLive ?
<Iframe
width="560"
@ -55,9 +64,9 @@ const StreamPreview = ({ stream, isLive, ...rest }) => {
allowFullScreen
ref={videoiFrame}
/>
: <Img src={stream.image} />}
</Fragment> : null}
</Box>
: <Img src={stream.image} onClick={activateStream} />}
</InnerWrapper> : null}
</Frame>
) : null
}

71
src/components/StreamPreview/styles.js
View File

@ -1,7 +1,15 @@
import styled from 'styled-components'
import styled, { css } from 'styled-components'
import { colours, screenSizes } from '../../assets/theme'
export const Box = styled.div`
const ratio169 = css`
&:before {
display: block;
content: "";
width: 100%;
padding-top: calc((9 / 16) * 100%);
};`
export const Frame = styled.div`
position: fixed;
bottom: ${props => props.isMinimized ? 0 : '2em'};
right: ${props => props.isMinimized ? 0 : '2em'};
@ -24,34 +32,73 @@ export const Box = styled.div`
`
export const Img = styled.div`
background: url(${({ src }) => src});
width: 16vw;
padding-bottom: calc((9 / 16) * 100%);
background-size: cover;
position: relative;
background-position: center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
`
export const Iframe = styled.iframe`
pointer-events: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
`
export const InnerWrapper = styled.div`
cursor: pointer;
position: relative;
width: 16vw;
&:before {
display: block;
content: "";
width: 100%;
padding-top: calc((9 / 16) * 100%);
};
@media screen and (max-width: ${screenSizes.xl}px) {
width: 20vw;
}
@media screen and (max-width: ${screenSizes.lg}px) {
width: 25vw;
}
@media screen and (max-width: ${screenSizes.md}px) {
width: 33vw;
}
@media screen and (max-width: ${screenSizes.sm}px) {
width: 50vw;
}
@media screen and (max-width: ${screenSizes.xs}px) {
width: 60vw;
}
`
&:hover {
opacity: 0.5;
export const Iframe = styled.iframe`
width: 20vw;
height: 11.2vw;
&:after {
display: block;
content: url("data:image/svg+xml,<svg width='32' viewbox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path stroke-width='2' stroke='white' fill='transparent' d='M2.12436,1.73205 C2.12436,0.96225 2.95769,0.481125 3.62436,0.866025 L21.6244,11.2583 C22.291,11.6432 22.291,12.6055 21.6244,12.9904 L3.62436,23.3827 C2.95769,23.7676 2.12436,23.2865 2.12436,22.5167 L2.12436,1.73205 Z'/></svg>");
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 24px;
width: 24px;
};
}
`

62
src/components/Svg/VideoOverlay/index.js Normal file
View File

@ -0,0 +1,62 @@
import { Fragment, h } from 'preact'
import { bool, string } from 'prop-types'
import styled from 'styled-components'
import { colours } from '../../../assets/theme'
import { useUiStore } from '../../../store'
import { InfoButton, PositionedCross as CrossSvg, OverlayWrapper, TopLeft } from './styles'
const StyledP = styled(P)`
&:first-of-type {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
&:last-of-type {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
`
const renderTitles = titles =>
titles.split('\\n').map(title => (
<StyledP key={title} size={18}>
{title}
</StyledP>
))
const VideoOverlay = ({
active,
title,
org,
onClick,
onClickFullscreen,
isFullscreen,
streamIsLive,
}) => {
const setStreamActive = useUiStore(store => store.setStreamActive)
const closeStream = () => setStreamActive(false)
return (
<Fragment>
<OverlayWrapper onClick={onClick}>
<TopLeft $active={active}>
{title ? renderTitles(title) : null}
</TopLeft>
</OverlayWrapper>
<CrossSvg colour={colours.white} size={32} $active={active} onClick={closeStream} />
<InfoButton $active={active} onClick={onClickFullscreen} postition="bl" colour={colours.midnight} hoverColour={colours.offwhite}>
{isFullscreen ? 'EXIT FULLSCREEN' : 'FULLSCREEN'}
</InfoButton>
</Fragment>
)
}
VideoOverlay.propTypes = {
active: bool,
title: string.isRequired,
org: string,
}
export default VideoOverlay

84
src/components/Svg/VideoOverlay/styles.js Normal file
View File

@ -0,0 +1,84 @@
import styled, { css } from 'styled-components'
import { colours } from '../../assets/theme'
import Button from '../Button'
import Cross from '../Svg/Cross'
export const OverlayWrapper = styled.div`
z-index: 2;
position: fixed;
height: 100vh;
width: 100vw;
`
export const TopLeft = styled.div`
opacity: 0;
transform: translateY(-20%);
transition: all 0.2s ease-in-out;
padding: 2em;
${props =>
props.$active &&
css`
transform: translateY(0%);
opacity: 1;
`};
p,
svg {
backdrop-filter: blur(20px);
background-color: ${colours.midnight}40;
padding: 4px 8px;
display: inline-block;
margin-right: 45%;
}
`
export const PositionedCross = styled(Cross)`
position: fixed;
right: 32px;
top: 32px;
opacity: 0.001;
transform: translateY(-20%);
transition: all 0.2s ease-in-out;
transition-delay: 0.2s;
z-index: 100;
${props =>
props.$active &&
css`
transform: translateY(0%);
opacity: 1;
`};
&:hover {
opacity: 0.7;
}
`
export const InfoButton = styled(Button)`
opacity: 0.001;
transform: translateY(
${props => (props.postition === 'bl' ? '20%' : '-20%')}
);
transition: all 0.2s ease-in-out;
transition-delay: 0.2s;
position: fixed;
right: ${props => (props.postition === 'bl' ? 'initial' : '32px')};
top: ${props => (props.postition === 'bl' ? 'initial' : '32px')};
bottom: ${props => (props.postition === 'bl' ? '0' : 'initial')};
left: ${props => (props.postition === 'bl' ? '32px' : 'initial')};
z-index: 100;
width: auto;
background-color: #ffffffba;
padding: 0.1em 0.5em;
font-size: 21px;
${props =>
props.$active &&
css`
transform: translateY(0%);
opacity: 1;
`};
&:hover {
opacity: 0.7;
}
`

111
src/components/Video/index.js
View File

@ -15,15 +15,22 @@ import Overlay from '../VideoOverlay'
import { VideoWrapper, Iframe, PlayButton } from './styles'
import config from '../../data/config'
import { useToggle } from '../../hooks/utility'
import { useInterval } from '../../hooks/timerHooks'
import { useStreamStore, useUiStore } from '../../store'
const Video = ({ video, org, setInfoActive }) => {
const Video = () => {
const { currentStream: stream, streamIsLive } = useStreamStore(store => store)
const [isPlaying, setPlaying] = useState(false)
const [isFullscreen, toggleIsFullscreen] = useToggle(false)
// const [is1080p, toggle1080p] = useToggle(true)
const videoiFrame = useRef(null)
const overlayTimeout = useRef(null)
const [videoReady, setVideoReady] = useState(false)
const [overlayActive, setOverlayActiveState] = useState(true)
const ptVideo = useRef(null)
const resolutions = useRef(null)
const [volume, setVolume] = useState(1)
useEffect(() => {
const setVideo = async () => {
@ -31,12 +38,26 @@ const Video = ({ video, org, setInfoActive }) => {
await player.ready
ptVideo.current = player
player.setVolume(100)
player.setVolume(1)
resolutions.current = await player.getResolutions()
if (streamIsLive) {
setPlaying(true)
try {
player.play()
} catch (error) {
console.log({ error })
setOverlayActiveState(true)
setPlaying(false)
}
}
setVideoReady(true)
}
setVideo()
}, [])
const playVideo = () => {
const { current: player } = ptVideo
if (!videoReady) return
@ -63,6 +84,7 @@ const Video = ({ video, org, setInfoActive }) => {
}
}
const toggleVideo = () => {
if (isPlaying) {
pauseVideo()
@ -71,6 +93,15 @@ const Video = ({ video, org, setInfoActive }) => {
}
}
useEffect(() => {
toggleVideo()
}, [streamIsLive])
useEffect(() => {
if (!videoReady) return
ptVideo.current.setVolume(volume)
}, [volume])
const toggleFullscreen = () => {
toggleIsFullscreen()
if (!document.fullscreenElement) {
@ -80,6 +111,21 @@ const Video = ({ video, org, setInfoActive }) => {
}
}
const volumeUp = () => {
if (volume.current === 1) return
setVolume(volume + 0.1)
}
const volumeDown = async () => {
if (volume.current === 0) return
console.log()
setVolume(volume - 0.1)
const vol = await ptVideo.current.getVolume()
console.log({ vol })
}
const handleKeyPress = keyCode => {
if (keyCode === 32) {
// key == 'space'
@ -89,6 +135,16 @@ const Video = ({ video, org, setInfoActive }) => {
// key == 'f'
toggleFullscreen()
}
if (keyCode === 38) {
// key == 'arrow UP'
console.log('volup')
volumeUp()
}
if (keyCode === 40) {
// key == 'arrow DOWN'
console.log('voldown')
volumeDown()
}
}
useEffect(() => {
@ -114,49 +170,50 @@ const Video = ({ video, org, setInfoActive }) => {
<VideoWrapper
$active={overlayActive || !isPlaying}
onMouseMove={activateOverlay}
isLive={streamIsLive}
>
<Overlay
onClick={toggleVideo}
onClick={streamIsLive ? toggleVideo : null}
active={overlayActive || !isPlaying}
title={video.title}
setInfoActive={setInfoActive}
title={stream.title}
onClickFullscreen={toggleFullscreen}
isFullscreen={isFullscreen}
resolutions={resolutions.current}
videoRef={ptVideo.current}
streamIsLive={streamIsLive}
/>
{!isPlaying && <PlayButton />}
{!isPlaying && <PlayButton streamIsLive={streamIsLive} />}
<Iframe
sandbox="allow-same-origin allow-scripts allow-popups"
src={`${config.peertube_root}${video.embedPath}?api=1&controls=false&vq=hd1080`}
src={`${config.peertube_root}${stream.embedPath}?api=1&controls=false&vq=hd1080`}
frameborder="0"
allowfullscreen
allow="autoplay"
ref={videoiFrame}
/>
<Chat overlayActive={overlayActive} />
<Chat overlayActive={overlayActive || !isPlaying} />
</VideoWrapper>
)
}
Video.propTypes = {
video: shape({
account: object,
category: object,
channel: object,
description: string,
duration: number,
embedPath: string,
end: instanceOf(Date),
id: string,
language: object,
previewPath: string,
start: instanceOf(Date),
state: object,
title: 'Testing a livesteam :)',
videoUrl: string,
views: number,
}),
title: string.isRequired,
org: string,
// stream: shape({
// account: object,
// category: object,
// channel: object,
// description: string,
// duration: number,
// embedPath: string,
// end: instanceOf(Date),
// id: string,
// language: object,
// previewPath: string,
// start: instanceOf(Date),
// state: object,
// videoUrl: string,
// views: number,
// }),
// title: string.isRequired,
}
export default Video

22
src/components/Video/styles.js
View File

@ -3,8 +3,14 @@ import styled from 'styled-components'
import { Label } from '../Text'
import translations from '../../data/strings'
import Button from '../Button'
import Loader from '../Loader'
import { colours } from '../../assets/theme'
const getCursor = ({ isLive, $active }) => {
if (!isLive) return 'default'
return $active ? 'pointer' : 'none'
}
export const VideoWrapper = styled.div`
width: 100vw;
height: 100vh;
@ -14,11 +20,16 @@ export const VideoWrapper = styled.div`
bottom: 0;
left: 0;
right: 0;
cursor: ${props => (props.$active ? 'pointer' : 'none')};
cursor: ${props => getCursor(props)};
display: flex;
justify-content: center;
align-items: center;
`
// const g = Label?.f?.e
export const Iframe = styled.iframe`
z-index: -1;
width: 100vw;
@ -38,15 +49,15 @@ const ButtonWrapper = styled.div`
padding: 1em 2em;
background-color: #ffffffba;
display: flex;
flex-direction: row;
flex-direction: column;
align-items: center;
border: 1px solid ${colours.midnight};
}
label {
color: ${colours.midnightDarker};
margin-left: 8px;
font-size: 20px;
margin: ${props => props.streamIsLive ? '0' : '8px 0 0 8px'};
font-size: 16px;
}
:hover div {
@ -57,7 +68,8 @@ const ButtonWrapper = styled.div`
export const PlayButton = props => (
<ButtonWrapper {...props}>
<div>
<Label>{translations.en.joinStream}</Label>
{!props.streamIsLive && <Loader colour={colours.midnight} rate={500} />}
<Label>{props.streamIsLive ? translations.en.joinStream : translations.en.streamStartingSoon}</Label>
</div>
</ButtonWrapper>
)

82
src/components/VideoOverlay/index.js
View File

@ -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 =>
</StyledP>
))
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)
<Fragment>
<OverlayWrapper onClick={onClick}>
<TopLeft $active={active}>
{/* <Logo active={active} /> */}
{title ? renderTitles(title) : null}
</TopLeft>
</OverlayWrapper>
<InfoButton $active={active} onClick={() => setInfoActive(true)}>
INFO
</InfoButton>
<InfoButton $active={active} onClick={onClickFullscreen} postition="bl">
{isFullscreen ? 'EXIT FULLSCREEN' : 'FULLSCREEN'}
</InfoButton>
</Fragment>
)
useEffect(() => {
if (videoRef) {
videoRef.setResolution(resolutions[resoltionIndex] ? resolutions[resoltionIndex].value : -1)
}
}, [resoltionIndex])
return (
<Fragment>
<OverlayWrapper onClick={onClick}>
<TopLeft $active={active}>
{/* <Logo active={active} /> */}
{title ? renderTitles(title) : null}
</TopLeft>
</OverlayWrapper>
<CrossSvg colour={colours.white} size={32} $active={active} onClick={closeStream} />
<ButtonRow>
<InfoButton $active={active} onClick={onClickFullscreen} postition="bl" colour={colours.midnightDarker} hoverColour={colours.offwhite}>
{isFullscreen ? 'EXIT FULLSCREEN' : 'FULLSCREEN'}
</InfoButton>
{streamIsLive && resolutions ? <ResoltionSelect options={resolutions} onChange={setResolutionIndex} selectedIndex={resoltionIndex} $active={active} bottom withIcon={false} /> : null}
</ButtonRow>
</Fragment>
)
}
VideoOverlay.propTypes = {
active: bool,

91
src/components/VideoOverlay/styles.js
View File

@ -1,14 +1,14 @@
import styled, { css } from 'styled-components'
import { colours } from '../../assets/theme'
import burb from '../../assets/img/IconSM.png'
import Button from '../Button'
import Select from '../Select'
import Cross from '../Svg/Cross'
export const OverlayWrapper = styled.div`
z-index: 2;
position: fixed;
height: 100vh;
width: 100vw;
/* pointer-events: none; */
`
export const TopLeft = styled.div`
opacity: 0;
@ -32,21 +32,15 @@ export const TopLeft = styled.div`
}
`
export const InfoButton = styled(Button)`
export const PositionedCross = styled(Cross)`
position: fixed;
right: 32px;
top: 32px;
opacity: 0.001;
transform: translateY(
${props => (props.postition === 'bl' ? '20%' : '-20%')}
);
transform: translateY(-20%);
transition: all 0.2s ease-in-out;
transition-delay: 0.2s;
position: fixed;
right: ${props => (props.postition === 'bl' ? 'initial' : '32px')};
top: ${props => (props.postition === 'bl' ? 'initial' : '32px')};
bottom: ${props => (props.postition === 'bl' ? '0' : 'initial')};
left: ${props => (props.postition === 'bl' ? '32px' : 'initial')};
z-index: 100;
width: auto;
background-color: #ffffffba;
${props =>
props.$active &&
@ -59,3 +53,74 @@ export const InfoButton = styled(Button)`
opacity: 0.7;
}
`
export const InfoButton = styled(Button)`
opacity: 0.001;
transform: translateY(
${props => (props.postition === 'bl' ? '20%' : '-20%')}
);
transition: all 0.2s ease-in-out;
transition-delay: 0.2s;
z-index: 100;
width: auto;
background-color: #ffffffba;
padding: 0.1em 0.5em;
font-size: 21px;
${props =>
props.$active &&
css`
transform: translateY(0%);
opacity: 1;
`};
&:hover {
opacity: 0.7;
}
`
export const ButtonRow = styled.div`
position: fixed;
bottom: 0;
left: 32px;
display: flex;
flex-direction: row;
z-index: 100;
button:not(:first-of-type) {
margin-left: -1px;
}
label, button {
font-size: 16px;
}
@media screen and (max-width: 1000px) {
left: 0;
}
`
export const ResoltionSelect = styled(Select)`
z-index: 100;
background-color: #ffffffba;
font-size: 21px;
position: relative;
bottom: -1px;
opacity: 0.001;
transform: translateY(20%);
transition: all 0.2s ease-in-out;
transition-delay: 0.2s;
cursor: pointer;
label {
cursor: pointer;
}
${props =>
props.$active &&
css`
transform: translateY(0%);
opacity: 1;
`};
`

2
src/data/navigation.js
View File

@ -2,7 +2,7 @@ export default {
en: [
{
label: 'Program guide',
to: '/program'
to: '/'
},
{
label: 'Series',

5
src/data/strings.js
View File

@ -4,6 +4,7 @@ export default {
pastStream: 'Previous Episodes',
nowPlaying: 'Currently streaming',
startingSoon: 'Starting soon',
streamStartingSoon: 'Stream starting soon',
noStreams: 'No upcoming streams, check back soon.',
underscoreTagline: ['LEAVE THE', 'SURVEILLANCE ECONOMY', '— TOGETHER.'],
streamDateFuture: 'Going live at: ',
@ -20,9 +21,13 @@ export default {
pastSeries: 'Past Series',
lastStream: 'Last stream',
nextStream: 'Next stream',
episode: 'episode',
episodes: 'episodes',
today: 'today',
tomorrow: 'tomorrow',
eventDetails: 'Event details',
errorTitle: 'Hmm...',
errorBody: 'Something went wrong, please try again later',
menu: 'Menu'
},
}

29
src/hooks/data.js
View File

@ -103,20 +103,27 @@ export const useEventCalendar = () => {
export const useEventApi = () => {
const [data, setData] = useSeriesStore(store => [store.series, store.setSeries])
const [error, setError] = useState(null)
const [loading, setLoading] = useState(!!data.length)
async function fetchData() {
if (!data.length) {
setLoading(true)
const { data: responseData } = await axios.get(
`${config.EVENTS_API_URL}/events`
)
try {
setData(responseData)
console.log({ data: responseData })
setLoading(false)
const { data: responseData } = await axios.get(
`${config.EVENTS_API_URL}/events`
)
setData(responseData)
console.log({ data: responseData })
setLoading(false)
}
catch (err) {
console.log('ERROR')
setError(err)
setLoading(false)
}
}
}
@ -124,7 +131,7 @@ export const useEventApi = () => {
fetchData()
}, [])
return { loading, data }
return { loading, data, error }
}
export const usePeertubeApi = async () => {
@ -133,13 +140,13 @@ export const usePeertubeApi = async () => {
if (!currentStream) return
const fetchData = async () => {
if (!currentStream.peertubeId) return
const { peertubeId } = currentStream
const { peertubeLive } = currentStream
if (!peertubeLive || !peertubeLive.id) return
const {
data: { state, embedPath }
} = await axios.get(`https://tv.undersco.re/api/v1/videos/${peertubeId}`)
} = await axios.get(`https://tv.undersco.re/api/v1/videos/${peertubeLive.id}`)
setStreamIsLive(state.id === 1)
setCurrentStream({ ...currentStream, embedPath })

40
src/hooks/dom.js
View File

@ -1,27 +1,27 @@
import { useState, useEffect } from 'preact/hooks'
const getWidth = () =>
const getClientWidth = () =>
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth
const getHeight = () =>
const getClientHeight = () =>
window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight
// save current window width in the state object
export const useWindowDimensions = () => {
const [width, setWidth] = useState(getWidth())
const [height, setHeight] = useState(getHeight())
const [width, setWidth] = useState(getClientWidth())
const [height, setHeight] = useState(getClientHeight())
useEffect(() => {
let timeoutId = null
const resizeListener = () => {
clearTimeout(timeoutId)
timeoutId = setTimeout(() => {
setWidth(getWidth())
setHeight(getHeight())
setWidth(getClientWidth())
setHeight(getClientHeight())
}, 50)
}
window.addEventListener('resize', resizeListener)
@ -62,4 +62,30 @@ export const useWindowSize = () => {
return () => window.removeEventListener('resize', handleResize)
}, []) // Empty array ensures that effect is only run on mount
return windowSize
}
}
export const useOnClickOutside = (ref, handler) => {
useEffect(() => {
const listener = (event) => {
// Do nothing if clicking ref's element or descendent elements
if (!ref.current || ref.current.contains(event.target)) {
return
}
handler(event)
}
document.addEventListener('mousedown', listener)
document.addEventListener('touchstart', listener)
return () => {
document.removeEventListener('mousedown', listener)
document.removeEventListener('touchstart', listener)
}
},
// Add ref and handler to effect dependencies
// It's worth noting that because passed in handler is a new ...
// ... function on every render that will cause this effect ...
// ... callback/cleanup to run every render. It's not a big deal ...
// ... but to optimize you can wrap handler in useCallback before ...
// ... passing it into this hook.
[ref, handler],
)
}

48
src/layouts/InfoLayout/index.js
View File

@ -13,28 +13,36 @@ import {
import Header from '../../components/Header'
import { ImageLogo } from '../../components/Logo'
import { useWindowSize } from '../../hooks/dom'
import { screenSizes } from '../../assets/theme'
const InfoLayout = ({ title, subtitle, image, children, theme }) => (
<Wrapper theme={theme}>
<PositionedLink to="/" theme={theme}>
<ImageLogo />
</PositionedLink>
<Content>
{children}
</Content>
<Hero image={image}>
<Header theme={theme} miniHeader />
<H1>{title}</H1>
<H1
css={`
const InfoLayout = ({ title, subtitle, image, children, theme }) => {
const { width: screenWidth } = useWindowSize()
const isMobile = screenWidth < screenSizes.md
return (
<Wrapper theme={theme}>
<PositionedLink to="/" $theme={theme}>
<ImageLogo />
</PositionedLink>
{isMobile ? <Header theme={theme} /> : null}
<Content>
{children}
</Content>
<Hero image={image}>
<Header theme={theme} miniHeader />
<H1 colour={theme.foreground}>{title}</H1>
<H1 colour={theme.foreground}
css={`
max-width: 50%;
`}
>
{subtitle}
</H1>
<FadeTop colour={theme.foreground} />
</Hero>
</Wrapper>
)
>
{subtitle}
</H1>
<FadeTop colour={theme.foreground} />
</Hero>
</Wrapper>
)
}
export default InfoLayout

21
src/layouts/InfoLayout/styles.js
View File

@ -18,7 +18,12 @@ export const Wrapper = styled.div`
@media screen and (max-width: ${screenSizes.lg}px) {
padding: 1.5em;
}
@media screen and (max-width: ${screenSizes.sm}px) {
@media screen and (max-width: ${screenSizes.md}px) {
/* padding: 1.5em 1.5em 1.5em 10em; */
display: flex;
justify-content: center;
}
@media screen and (max-width: ${screenSizes.sm}px)
padding: 1em;
}
@ -78,9 +83,17 @@ export const Hero = styled.div`
h1{
margin-bottom: 0.2em;
&:not(:last-of-type) {
font-size: 12vw;
}}
font-size: 12.5vw;
@media screen and (max-width: ${screenSizes.lg}px) {
font-size: 9vw;
}
@media screen and (min-width: ${screenSizes.lg}px) {
font-size: 14vw;
}
}}
@media screen and (max-width: ${screenSizes.md}px) {
display: none;
}
@ -115,7 +128,7 @@ export const PositionedLink = styled(Link)`
z-index: 2;
top: 0;
left: 0;
background-color: ${({ theme }) => theme.background};
background-color: ${({ $theme }) => $theme.background};
&:hover img {
filter: invert(1);

14
src/pages/LoaderLayout/index.js
View File

@ -1,27 +1,33 @@
import { h } from 'preact'
import translations from '../../data/strings'
import { H1 } from '../../components/Text'
import { H1, H2 } from '../../components/Text'
import {
Wrapper,
LoaderWrapper,
Hero,
PositionedLogo as Logo,
TaglineContainer,
ErrorBlock
} from './styles'
import Loader from '../../components/Loader'
import { colours } from '../../assets/theme'
const LoaderLayout = () => (
const LoaderLayout = ({ error }) => (
<Wrapper>
<Logo active />
<LoaderWrapper>
<Loader />
{error ? (
<ErrorBlock>
<H1 colour={colours.white}>{translations.en.errorTitle}</H1>
<H2 colour={colours.white}>{translations.en.errorBody}</H2>
</ErrorBlock>) : <Loader />}
</LoaderWrapper>
<Hero />
<TaglineContainer>
{translations &&
translations.en.underscoreTagline.map(line => (
<H1 key={line}>{line}</H1>
<H1 key={line} colour={colours.midnightDarker}>{line}</H1>
))}
</TaglineContainer>
</Wrapper>

20
src/pages/LoaderLayout/styles.js
View File

@ -17,11 +17,13 @@ export const Wrapper = styled.div`
box-sizing: border-box;
position: fixed;
overflow-y: scroll;
`
p,
h1,
h2 {
color: ${colours.midnightDarker};
export const ErrorBlock = styled.div`
padding: 1em;
h1 {
margin-bottom: 0.5em
}
`
@ -108,7 +110,7 @@ export const FadeBottom = styled.div`
`
export const TaglineContainer = styled.div`
width: 100%;
width: ${heroWidth};
bottom: 0em;
padding-bottom: 0;
right: 1em;
@ -116,15 +118,17 @@ export const TaglineContainer = styled.div`
justify-content: flex-end;
flex-direction: column;
align-items: flex-end;
position: fixed;
z-index: 2;
h1 {
margin-bottom: 0.2em;
text-align: right;
}
@media screen and (max-width: ${screenSizes.md}px) {
width: 100%;
h1 {
color: ${colours.rose};
font-size: 24px;

28
src/pages/Program/index.js
View File

@ -1,7 +1,7 @@
/* eslint-disable react/prop-types */
import { isWithinInterval } from 'date-fns'
import { h } from 'preact'
import { H1, H2 } from '../../components/Text'
import { H1, H2, Label } from '../../components/Text'
import strings from '../../data/strings'
import { useEventApi } from '../../hooks/data'
import { Content, ScheduleList, Day } from './styles'
@ -9,7 +9,7 @@ import { Content, ScheduleList, Day } from './styles'
import Page from '../../layouts/Page'
import { formatDay, getScheduleFromData } from './helpers'
import EpisodeCard from '../../components/EpisodeCard'
import { colours } from '../../assets/theme'
import { colours, textSizes } from '../../assets/theme'
const Program = () => {
const { data } = useEventApi()
@ -19,18 +19,20 @@ const Program = () => {
return (
<Page title={strings.en.program}>
<Content>
<ScheduleList>
{Object.entries(episodes).length === 0 ? (
<Label size={textSizes.lg}>There are currently no streams scheduled, check back soon!</Label>
) :
<ScheduleList>
{Object.keys(episodes || {}).sort((a, b) => new Date(a) - new Date(b)).map(day => (
<Day>
<H1 colour={colours.rose}>{formatDay(day)}</H1>
{episodes[day].map(episode => (
<EpisodeCard {...episode} />
))}
{Object.keys(episodes || {}).sort((a, b) => new Date(a) - new Date(b)).map(day => (
<Day>
<H1 colour={colours.rose}>{formatDay(day)}</H1>
{episodes[day].map(episode => (
<EpisodeCard {...episode} />
))}
</Day>
))}
</ScheduleList>
</Day>
))}
</ScheduleList>}
{/* <H1>Program</H1> */}
</Content>

12
src/pages/Program/styles.js
View File

@ -19,13 +19,21 @@ export const Day = styled.div`
`
export const Content = styled.div`
width: 80vw;
width: 85vw;
max-width: ${screenSizes.lg}px;
margin: 0 auto;
padding: 64px 0;
overflow-y: scroll;
min-height: 50vh;
display: flex;
justify-content: center;
align-items: center;
& > label {
line-height: 1;
max-width: 35%;
text-align: center;
}
::-webkit-scrollbar {
display: none;

26
src/pages/Series/index.js
View File

@ -4,7 +4,7 @@ import { Fragment, h } from 'preact'
import { H1, H2 } from '../../components/Text'
import strings from '../../data/strings'
import { useEventApi } from '../../hooks/data'
import { Content, SeriesGrid, SeriesRow } from './styles'
import { Content, SeriesGrid, SeriesRow, Title } from './styles'
import Page from '../../layouts/Page'
import SeriesCard from '../../components/SeriesCard'
@ -29,21 +29,19 @@ const Series = () => {
return (
<Page title={strings.en.series}>
<Content>
{currentSeries.map(series => (
<Fragment>
<Title colour={colours.rose}>{strings.en.currentSeries}</Title>
<SeriesGrid>
<SeriesCard series={series} />
</SeriesGrid>
</Fragment>
))}
<Title colour={colours.rose}>{strings.en.pastSeries}</Title>
<SeriesGrid>
{currentSeries.map(series => (
<Fragment>
<H1 colour={colours.rose}>{strings.en.currentSeries}</H1>
<SeriesRow>
<SeriesCard series={series} />
</SeriesRow>
</Fragment>
{pastSeries.map(series => (
<SeriesCard series={series} isPast />
))}
<H1 colour={colours.rose}>{strings.en.pastSeries}</H1>
<SeriesRow>
{pastSeries.map(series => (
<SeriesCard series={series} isPast />
))}
</SeriesRow>
</SeriesGrid>
</Content>
</Page>

37
src/pages/Series/styles.js
View File

@ -1,14 +1,43 @@
import styled from 'styled-components'
import { screenSizes } from '../../assets/theme'
import { Row } from '../../components/Flex'
import { H1 } from '../../components/Text'
export const spacing = [2, 4, 8, 16, 24, 32, 48, 64, 128, 256, 512]
export const Content = styled.div`
padding-top: 64px;
width: 85vw;
max-width: ${screenSizes.lg + 150}px;
margin: 0 auto;
padding: 64px 0;
overflow-y: scroll;
min-height: 50vh;
::-webkit-scrollbar {
display: none;
}
`
export const SeriesGrid = styled.div`
margin-left: 32px;
display: grid;
grid-column-gap: ${spacing[4]}px;
grid-row-gap: ${spacing[6]}px;
margin-bottom: 5em;
padding: 0 2px;
@media screen and (min-width: ${screenSizes.sm}px) {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media screen and (min-width: ${screenSizes.md}px) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media screen and (min-width: ${screenSizes.lg}px) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media screen and (min-width: ${screenSizes.xl}px) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
`
export const SeriesRow = styled(Row)`
margin: 3em 0 6em 0;
export const Title = styled(H1)`
margin-bottom: 0.5em
`

17
src/pages/SeriesPage/index.js
View File

@ -3,7 +3,7 @@ import { h, Fragment } from 'preact'
import { useEffect } from 'preact/hooks'
import striptags from 'striptags'
import { H1 } from '../../components/Text'
import { H1, Label } from '../../components/Text'
import Markdown from '../../components/Markdown'
import translations from '../../data/strings'
import InfoLayout from '../../layouts/InfoLayout'
@ -13,6 +13,7 @@ import {
Title,
InfoContent,
Row,
LogosRow,
ActionButton as Button,
TrailerContainer,
} from './styles'
@ -23,12 +24,15 @@ import { defaultTheme } from '../../assets/theme'
const SeriesPage = ({ data }) => {
const theme = data.theme || defaultTheme
const { orgs } = data
const credits = data.credits ? `
## Credits
${data.credits}
` : null
const orgsList = Object.values(orgs || {})
const dateString = `${new Date()}`
let tzShort =
// Works for the majority of modern browsers
@ -106,7 +110,16 @@ const SeriesPage = ({ data }) => {
<Markdown theme={theme}>{credits}</Markdown>
</InfoContent> : null}
</Fragment>
{orgsList.length ? <LogosRow $wrap>
{orgsList.map((org, index) => (
<Fragment>
<a href={org.orgUrl}>
<img src={org.logoUrl} alt={`${org.orgName} logo`} />
</a>
{orgsList.length === 2 && index + 1 !== orgsList.length ? <Label colour={theme.foreground}>{'//'}</Label> : null}
</Fragment>
))}
</LogosRow> : null}
</InfoLayout>
</Page>
)

26
src/pages/SeriesPage/styles.js
View File

@ -48,7 +48,7 @@ export const Row = styled.div`
display: flex;
flex-direction: row;
margin-bottom: 32px;
flex-wrap: ${props => props.wrap ? 'wrap' : 'nowrap'};
flex-wrap: ${props => props.$wrap ? 'wrap' : 'nowrap'};
a {
display: block;
@ -59,6 +59,26 @@ export const Row = styled.div`
}
`
export const LogosRow = styled(Row)`
align-items: center;
max-width: 600px;
justify-content: space-between;
padding: 32px 0 ;
a {
width: auto;
margin-right: 0;
&[href]:hover {
opacity: 0.7
}
}
img {
height: 64px;
}
`
export const InfoContent = styled.div`
max-width: 600px;
margin: 0 0 0em 2px;
@ -138,7 +158,6 @@ const LinkBlock = styled(Link)`
const renderTitles = titles =>
titles.split('\\n').map(title => <H2 key={title}>{title}</H2>)
export const EpisodeCard = ({
title,
image,
@ -151,6 +170,7 @@ export const EpisodeCard = ({
onClickButton,
tzShort,
theme,
peertubeReplay,
id
}) => {
const startDate = new Date(beginsOn)
@ -181,7 +201,7 @@ export const EpisodeCard = ({
)}
<Markdown theme={theme}>{description}</Markdown>
{hasPassed ? (
<Button onClick={onClickButton}>{translations.en.watchEpisode}</Button>
<a href={peertubeReplay.url || url}><Button>{peertubeReplay.url ? translations.en.watchEpisode : translations.en.eventDetails}</Button></a>
) : (
<ButtonsRows title={title} description={description} beginsOn={beginsOn} endsOn={endsOn} url={url} />
)}

10
src/store/index.js
View File

@ -16,7 +16,7 @@ export const useSeriesStore = create((set, get) => ({
}
}))
export const [useTheme] = create(set => ({
export const useTheme = create(set => ({
theme: defaultTheme,
// Methods
@ -24,18 +24,18 @@ export const [useTheme] = create(set => ({
setDefaultTheme: () => set({ theme: defaultTheme })
}))
export const [useUiStore] = create((set, get) => ({
export const useUiStore = create((set, get) => ({
mobileMenuOpen: false,
streamPreviewMinimized: false,
streamPreviewMinimized: true,
streamActive: false,
// Methods
toggleMobileMenu: () => set({ mobileMenuOpen: !get().mobileMenuOpen }),
toggleStreamPreviewMinimized: () => set({ streamPreviewMinimized: !get().streamPreviewMinimized }),
toggleStreamActive: () => set({ streamActive: !get().streamActive }),
setStreamActive: (streamActive) => set({ streamActive }),
}))
export const [useStreamStore] = create((set) => ({
export const useStreamStore = create((set) => ({
currentStream: null,
streamIsLive: false,