lots of polish

index.js

@@ -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 ? (
+      {!seriesData.length || eventsLoading || !minLoadTimePassed || error ? (
-        <LoaderLayout />
+        <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>)

package.json

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

src/components/Button/index.js

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

src/components/Chat/index.js

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

src/components/Chat/styles.js

@@ -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 =>
@@ -56,6 +54,19 @@ export const ChatHeader = styled.div`
     fill: ${props =>
     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)`

src/components/EpisodeCard/styles.js

@@ -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;
+  margin-right: 2em;
-  width: 20vw;
+  ${imageWidthStyles};
   
-@media screen and (max-width: ${screenSizes.md}px) {
+  @media screen and (max-width: ${screenSizes.md}px) {
-    width: 80vw;
     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%;
-  }
   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;
-  
+  ${imageWidthStyles};
-  @media screen and (max-width: ${screenSizes.md}px) {
-    width: 80vw;
-  }
 `

src/components/Header/index.js

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

src/components/Link/styles.js

@@ -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%);
     }

src/components/Loader/index.js

@@ -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(
     () => {

src/components/Select/index.js

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

src/components/Select/styles.js

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

src/components/SeriesCard/index.js

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

src/components/StreamPreview/index.js

@@ -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} />}
+            : <Img src={stream.image} onClick={activateStream} />}
-        </Fragment> : null}
+        </InnerWrapper> : null}
-    </Box>
+    </Frame>
   ) : null
 }
 

src/components/StreamPreview/styles.js

@@ -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,11 +32,40 @@ 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;
@@ -49,9 +86,19 @@ export const Img = styled.div`
   @media screen and (max-width: ${screenSizes.xs}px) {
     width: 60vw;
   }
-`
+  &:hover {
+    opacity: 0.5;
 
-export const Iframe = styled.iframe`
+
-  width: 20vw;
+    &:after {
-  height: 11.2vw;
+      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;
+    };
+  }
 `

src/components/Svg/VideoOverlay/index.js

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

src/components/Svg/VideoOverlay/styles.js

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

src/components/Video/index.js

@@ -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}
+        title={stream.title}
-        setInfoActive={setInfoActive}
         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({
+  // stream: shape({
-    account: object,
+  //   account: object,
-    category: object,
+  //   category: object,
-    channel: object,
+  //   channel: object,
-    description: string,
+  //   description: string,
-    duration: number,
+  //   duration: number,
-    embedPath: string,
+  //   embedPath: string,
-    end: instanceOf(Date),
+  //   end: instanceOf(Date),
-    id: string,
+  //   id: string,
-    language: object,
+  //   language: object,
-    previewPath: string,
+  //   previewPath: string,
-    start: instanceOf(Date),
+  //   start: instanceOf(Date),
-    state: object,
+  //   state: object,
-    title: 'Testing a livesteam :)',
+  //   videoUrl: string,
-    videoUrl: string,
+  //   views: number,
-    views: number,
+  // }),
-  }),
+  // title: string.isRequired,
-  title: string.isRequired,
-  org: string,
 }
 
 export default Video

src/components/Video/styles.js

@@ -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;
+    margin: ${props => props.streamIsLive ? '0' : '8px 0 0 8px'};
-    font-size: 20px;
+    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>
 )

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,17 +27,55 @@ 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,
-}) => (
+  streamIsLive,
-  // const displayTitle = `${title}${org ? ` — ${org}` : ''}`
+  videoRef
+}) => {
+  const setStreamActive = useUiStore(store => store.setStreamActive)
+  const closeStream = () => setStreamActive(false)
+  const [resoltionIndex, setResolutionIndex] = useState(0)
 
+
+  useEffect(() => {
+    if (videoRef) {
+      videoRef.setResolution(resolutions[resoltionIndex] ? resolutions[resoltionIndex].value : -1)
+    }
+  }, [resoltionIndex])
+
+  return (
     <Fragment>
       <OverlayWrapper onClick={onClick}>
         <TopLeft $active={active}>
@@ -43,14 +83,16 @@ const VideoOverlay = ({
           {title ? renderTitles(title) : null}
         </TopLeft>
       </OverlayWrapper>
-    <InfoButton $active={active} onClick={() => setInfoActive(true)}>
+      <CrossSvg colour={colours.white} size={32} $active={active} onClick={closeStream} />
-      INFO
+      <ButtonRow>
-    </InfoButton>
+        <InfoButton $active={active} onClick={onClickFullscreen} postition="bl" colour={colours.midnightDarker} hoverColour={colours.offwhite}>
-    <InfoButton $active={active} onClick={onClickFullscreen} postition="bl">
           {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,

src/components/VideoOverlay/styles.js

@@ -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(
+  transform: translateY(-20%);
-    ${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;
 
   ${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;
+    `};
+  `

src/data/navigation.js

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

src/data/strings.js

@@ -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'
   },
 }

src/hooks/data.js

@@ -103,28 +103,35 @@ 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)
 
+      try {
+
         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)
+      }
+    }
   }
 
   useEffect(() => {
     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 { peertubeLive } = currentStream
-    const { peertubeId } = 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 })

src/hooks/dom.js

@@ -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 [width, setWidth] = useState(getClientWidth())
-  const [height, setHeight] = useState(getHeight())
+  const [height, setHeight] = useState(getClientHeight())
 
   useEffect(() => {
     let timeoutId = null
     const resizeListener = () => {
       clearTimeout(timeoutId)
       timeoutId = setTimeout(() => {
-        setWidth(getWidth())
+        setWidth(getClientWidth())
-        setHeight(getHeight())
+        setHeight(getClientHeight())
       }, 50)
     }
     window.addEventListener('resize', resizeListener)
@@ -63,3 +63,29 @@ export const useWindowSize = () => {
   }, []) // 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],
+  )
+}

src/layouts/InfoLayout/index.js

@@ -13,19 +13,26 @@ 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 }) => (
+const InfoLayout = ({ title, subtitle, image, children, theme }) => {
+  const { width: screenWidth } = useWindowSize()
+  const isMobile = screenWidth < screenSizes.md
+
+  return (
     <Wrapper theme={theme}>
-    <PositionedLink to="/" theme={theme}>
+      <PositionedLink to="/" $theme={theme}>
         <ImageLogo />
       </PositionedLink>
+      {isMobile ? <Header theme={theme} /> : null}
       <Content>
         {children}
       </Content>
       <Hero image={image}>
         <Header theme={theme} miniHeader />
-      <H1>{title}</H1>
+        <H1 colour={theme.foreground}>{title}</H1>
-      <H1
+        <H1 colour={theme.foreground}
           css={`
             max-width: 50%;
           `}
@@ -35,6 +42,7 @@ const InfoLayout = ({ title, subtitle, image, children, theme }) => (
         <FadeTop colour={theme.foreground} />
       </Hero>
     </Wrapper>
-)
+  )
+}
 
 export default InfoLayout

src/layouts/InfoLayout/styles.js

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

src/pages/LoaderLayout/index.js

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

src/pages/LoaderLayout/styles.js

@@ -17,11 +17,13 @@ export const Wrapper = styled.div`
   box-sizing: border-box;
   position: fixed;
   overflow-y: scroll;
+`
 
-  p,
+export const ErrorBlock = styled.div`
-  h1,
+  padding: 1em;
-  h2 {
+
-    color: ${colours.midnightDarker};
+  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;
@@ -122,9 +124,11 @@ export const TaglineContainer = styled.div`
   
   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;

src/pages/Program/index.js

@@ -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,8 +19,10 @@ const Program = () => {
   return (
     <Page title={strings.en.program}>
       <Content>
+        {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>
@@ -30,7 +32,7 @@ const Program = () => {
 
               </Day>
             ))}
-        </ScheduleList>
+          </ScheduleList>}
         {/* <H1>Program</H1> */}
 
       </Content>

src/pages/Program/styles.js

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

src/pages/Series/index.js

@@ -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>
-        <SeriesGrid>
         {currentSeries.map(series => (
           <Fragment>
-              <H1 colour={colours.rose}>{strings.en.currentSeries}</H1>
+            <Title colour={colours.rose}>{strings.en.currentSeries}</Title>
-              <SeriesRow>
+            <SeriesGrid>
               <SeriesCard series={series} />
-              </SeriesRow>
+            </SeriesGrid>
           </Fragment>
         ))}
-          <H1 colour={colours.rose}>{strings.en.pastSeries}</H1>
+        <Title colour={colours.rose}>{strings.en.pastSeries}</Title>
-          <SeriesRow>
+        <SeriesGrid>
           {pastSeries.map(series => (
             <SeriesCard series={series} isPast />
           ))}
-          </SeriesRow>
         </SeriesGrid>
       </Content>
     </Page>

src/pages/Series/styles.js

@@ -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)`
+export const Title = styled(H1)`
-  margin: 3em 0 6em 0;
+  margin-bottom: 0.5em
 `

src/pages/SeriesPage/index.js

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

src/pages/SeriesPage/styles.js

@@ -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} />
       )}

src/store/index.js

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