From a3bea126458933aee51af8b6690ed8a4f9879d40 Mon Sep 17 00:00:00 2001
From: Sunda <>
Date: Mon, 11 Oct 2021 19:15:09 +0200
Subject: [PATCH] UI for stream series pages
---
app.js | 2 +-
index.js | 4 +-
src/components/InfoLayout/index.js | 12 ++----
src/components/InfoLayout/styles.js | 12 +++---
src/components/Markdown/index.js | 5 ++-
src/pages/SeriesPage/index.js | 65 +++++++++++------------------
src/pages/SeriesPage/styles.js | 30 +++++++------
7 files changed, 57 insertions(+), 73 deletions(-)
diff --git a/app.js b/app.js
index b58a565..dadf66b 100644
--- a/app.js
+++ b/app.js
@@ -10,7 +10,7 @@ import { useTimeout } from './src/hooks/timerHooks'
export default (props) => {
- console.log({ props })
+ // console.log({ props })
const [currentVideo, setCurrentVideo] = useState(null)
const [streamIsLive, setStreamIsLive] = useState(false)
const [infoActive, setInfoActive] = useState(false)
diff --git a/index.js b/index.js
index 13198aa..f246e8a 100644
--- a/index.js
+++ b/index.js
@@ -4,7 +4,6 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Main from './app'
import SeriesPage from './src/pages/SeriesPage'
-import { slugify } from './src/helpers/string'
import { useEventApi, useEventCalendar } from './src/hooks/data'
import { useTimeout } from './src/hooks/timerHooks'
import LoaderLayout from './src/pages/LoaderLayout'
@@ -20,7 +19,6 @@ const App = () => {
const seriesData = Object.values(seriesDataArray)
- console.log(seriesData)
return calLoading || eventsLoading || !minLoadTimePassed ? (
@@ -29,7 +27,7 @@ const App = () => {
{seriesData.length ? seriesData.map(series => (
-
+
)) : null}
diff --git a/src/components/InfoLayout/index.js b/src/components/InfoLayout/index.js
index 34e28ad..ec7fa87 100644
--- a/src/components/InfoLayout/index.js
+++ b/src/components/InfoLayout/index.js
@@ -17,18 +17,12 @@ import Loader from '../Loader'
import { useTimeout } from '../../hooks/timerHooks'
import { NdcLogo, RFLogo } from '../Logo'
-const InfoLayout = ({ title, subtitle, children, loading }) => (
+const InfoLayout = ({ title, subtitle, image, children }) => (
- {loading ? (
-
-
-
- ) : (
- children
- )}
+ {children}
-
+
{title}
props.image});
background-size: cover;
background-position-x: right;
position: fixed;
@@ -76,7 +73,8 @@ export const Hero = styled.div`
}
h1:not(:last-of-type) {
- font-size: 15vw;
+ font-size: 12vw;
+ margin-bottom: 0.5em;
@media screen and (max-height: 600px) {
font-size: 20vh;
diff --git a/src/components/Markdown/index.js b/src/components/Markdown/index.js
index 2c430a9..2d775e0 100644
--- a/src/components/Markdown/index.js
+++ b/src/components/Markdown/index.js
@@ -2,7 +2,7 @@
import { h, Fragment } from 'preact'
import MarkdownRenderer from 'markdown-to-jsx'
import { MarkdownWrapper } from './styles'
-import { P, A, H1, H2, Span } from '../Text'
+import { P, A, H1, H2, H3, Span } from '../Text'
const Markdown = ({ children, withLinebreaks, options, ...rest }) => (
@@ -36,6 +36,9 @@ const Markdown = ({ children, withLinebreaks, options, ...rest }) => (
h2: {
component: H2,
},
+ h3: {
+ component: H3,
+ },
},
...options,
}}
diff --git a/src/pages/SeriesPage/index.js b/src/pages/SeriesPage/index.js
index d371217..941ce5f 100644
--- a/src/pages/SeriesPage/index.js
+++ b/src/pages/SeriesPage/index.js
@@ -6,11 +6,11 @@ import striptags from 'striptags'
import { H1 } from '../../components/Text'
import Markdown from '../../components/Markdown'
-// import translations from '../../data/strings'
+import translations from '../../data/strings'
import InfoLayout from '../../components/InfoLayout'
import VideoEmbed from '../../components/VideoEmbed'
import {
- VideoCard,
+ EpisodeCard,
Title,
InfoContent,
PositionedCross as CrossSvg,
@@ -36,28 +36,12 @@ const SeriesPage = ({ data }) => {
setEmbedUrl('')
}
- console.log({ data })
+ console.log({ past: data.episodes.past, future: data.episodes.future })
- // const pastStreams =
- // data && data.length
- // ? data.filter(feeditem => isPast(new Date(feeditem.end)))
- // : []
-
- // const futureStreams =
- // data && data.length
- // ? data
- // .filter(
- // feeditem =>
- // feeditem.id !== (currentVideo && currentVideo.id) &&
- // isFuture(new Date(feeditem.start))
- // )
- // .sort(
- // (a, b) =>
- // // Turn your strings into dates, and then subtract them
- // // to get a value that is either negative, positive, or zero.
- // new Date(a.start) - new Date(b.start)
- // )
- // : []
+ const credits = `
+ ## Credits
+ ${data.credits}
+ `
const dateString = `${new Date()}`
let tzShort =
@@ -73,15 +57,15 @@ const SeriesPage = ({ data }) => {
}
return (
-
+
{embedURL ? (
) : null}
- {data.name}:
- {data.summary}
- {intro}
+ {data.title}:
+ {data.subtitle}
+ {data.description}
@@ -105,15 +89,16 @@ const SeriesPage = ({ data }) => {
{/* {currentVideo && (
{translations.en.nowPlaying}:
-
+
)}
- {futureStreams.length ? (
+ */}
+ {data.episodes.future.length ? (
{translations.en.nextStream}:
- {futureStreams.map(feeditem => (
- (
+ {
))}
) : null}
-
- {pastStreams.length ? (
+ {data.episodes.past.length ? (
- {translations.en.pastStream}:
- {pastStreams.map(feeditem => (
- Past streams:
+ {data.episodes.past.map(feeditem => (
+
setEmbedUrl(`${config.peertube_root}${feeditem.embedPath}`)
@@ -136,10 +120,11 @@ const SeriesPage = ({ data }) => {
/>
))}
- ) : null} */}
- {/*
+ ) : null}
+
+ Credits
{credits}
- */}
+
diff --git a/src/pages/SeriesPage/styles.js b/src/pages/SeriesPage/styles.js
index c132cbd..acee253 100644
--- a/src/pages/SeriesPage/styles.js
+++ b/src/pages/SeriesPage/styles.js
@@ -1,9 +1,11 @@
import { h, Fragment } from 'preact'
import { zonedTimeToUtc, utcToZonedTime, format } from 'date-fns-tz'
-import { bool, instanceOf, string } from 'prop-types'
+import { bool, func, instanceOf, string } from 'prop-types'
import styled from 'styled-components'
import { colours, textSizes } from '../../assets/theme'
import config from '../../data/config'
+
+import Markdown from '../../components/Markdown'
import Logo from '../../components/Logo'
import translations from '../../data/strings'
import CrossSvg from '../../components/Svg/Cross'
@@ -149,26 +151,27 @@ const LinkBlock = styled(Link)`
const renderTitles = titles =>
titles.split('\\n').map(title => {title}
)
-export const VideoCard = ({
+export const EpisodeCard = ({
title,
description,
- start,
- previewPath,
+ beginsOn,
hasPassed,
videoUrl,
onClickButton,
tzShort,
+ image
}) => {
- const startDate = new Date(start)
+ const startDate = new Date(beginsOn)
+ console.log({ startDate })
const utcDate = zonedTimeToUtc(startDate, 'Europe/Berlin')
const { timeZone } = Intl.DateTimeFormat().resolvedOptions()
const zonedDate = utcToZonedTime(utcDate, timeZone)
return (
-
+
{`${hasPassed ? translations.en.streamDatePast : ''}`}
-
+
{hasPassed
? format(zonedDate, 'dd/MM/yy')
: `${format(zonedDate, 'do LLLL y // HH:mm')} ${tzShort}`}
@@ -177,15 +180,15 @@ export const VideoCard = ({
{videoUrl && hasPassed ? (
{renderTitles(title)}
-
+
) : (
{renderTitles(title)}
-
+
)}
- {description}
+ {description}
{hasPassed ? (
) : (
@@ -203,10 +206,13 @@ export const VideoCard = ({
)
}
-VideoCard.propTypes = {
+EpisodeCard.propTypes = {
title: string,
description: string,
- start: instanceOf(Date),
+ beginsOn: instanceOf(Date),
+ onClickButton: func,
+ tzShort: string,
+ image: string,
previewPath: string,
hasPassed: bool,
videoUrl: string,