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

UI for stream series pages

Browse Source
This commit is contained in:
Sunda 2021-10-11 19:15:09 +02:00
parent 3cab6fb683
commit a3bea12645
7 changed files with 57 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app.js
View File

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

4
index.js
View File

@ -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 ? (
<LoaderLayout />
@ -29,7 +27,7 @@ const App = () => {
<Switch>
<Route exact path="/" component={Main} />
{seriesData.length ? seriesData.map(series => (
<Route exact path={`/series/${slugify(series.name)}`}>
<Route exact path={`/series/${series.slug}`}>
<SeriesPage data={series} />
</Route>)) : null}
</Switch>

12
src/components/InfoLayout/index.js
View File

@ -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 }) => (
<Wrapper>
<Content>
{loading ? (
<LoaderWrapper>
<Loader />
</LoaderWrapper>
) : (
children
)}
{children}
</Content>
<Hero>
<Hero image={image}>
<div>
<H1>{title}</H1>
<H1

12
src/components/InfoLayout/styles.js
View File

@ -1,8 +1,5 @@
import styled from 'styled-components'
import { colours } from '../../assets/theme'
import bg from '../../assets/img/hero/2md.png'
import { H1 } from '../Text'
import Logo from '../Logo'
@ -13,7 +10,7 @@ export const Wrapper = styled.div`
width: 100vw;
padding: 2em;
display: flex;
background-color: ${colours.roseLight};
background-color: ${colours.midnight};
box-sizing: border-box;
position: fixed;
overflow-y: scroll;
@ -21,7 +18,7 @@ export const Wrapper = styled.div`
p,
h1,
h2 {
color: ${colours.midnightDarker};
color: ${colours.rose};
}
@media screen and (max-width: 1200px) {
@ -57,7 +54,7 @@ export const Fade = styled.div`
export const Hero = styled.div`
width: ${heroWidth};
height: 100vh;
background: url(${bg});
background: url(${(props) => 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;

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

@ -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 }) => (
<MarkdownWrapper $withLinebreaks={withLinebreaks}>
@ -36,6 +36,9 @@ const Markdown = ({ children, withLinebreaks, options, ...rest }) => (
h2: {
component: H2,
},
h3: {
component: H3,
},
},
...options,
}}

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

@ -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 (
<InfoLayout title={data.name} subtitle={striptags(data.summary)}>
<InfoLayout title={data.title} subtitle={striptags(data.subtitle)} image={data.image}>
{embedURL ? (
<VideoEmbed onClose={deactivateEmbed} url={embedURL} />
) : null}
<Fragment>
<InfoContent>
<H1>{data.name}:</H1>
<H1>{data.summary}</H1>
<Markdown withLinebreaks>{intro}</Markdown>
<H1>{data.title}:</H1>
<H1>{data.subtitle}</H1>
<Markdown withLinebreaks>{data.description}</Markdown>
<Trailer imgSrc={trailerThumb} onClick={onClickTrailerButton} />
@ -105,15 +89,16 @@ const SeriesPage = ({ data }) => {
{/* {currentVideo && (
<Fragment>
<Title>{translations.en.nowPlaying}:</Title>
<VideoCard {...currentVideo} />
<EpisodeCard {...currentVideo} />
</Fragment>
)}
{futureStreams.length ? (
*/}
{data.episodes.future.length ? (
<Fragment>
<Title>{translations.en.nextStream}:</Title>
{futureStreams.map(feeditem => (
<VideoCard
{data.episodes.future.map(feeditem => (
<EpisodeCard
key={feeditem.start}
tzShort={tzShort}
{...feeditem}
@ -121,13 +106,12 @@ const SeriesPage = ({ data }) => {
))}
</Fragment>
) : null}
{pastStreams.length ? (
{data.episodes.past.length ? (
<Fragment>
<Title>{translations.en.pastStream}:</Title>
{pastStreams.map(feeditem => (
<VideoCard
key={feeditem.start}
<Title>Past streams:</Title>
{data.episodes.past.map(feeditem => (
<EpisodeCard
key={feeditem.beginsOn}
hasPassed
onClickButton={() =>
setEmbedUrl(`${config.peertube_root}${feeditem.embedPath}`)
@ -136,10 +120,11 @@ const SeriesPage = ({ data }) => {
/>
))}
</Fragment>
) : null} */}
{/* <InfoContent>
) : null}
<InfoContent>
<Title>Credits</Title>
<Markdown>{credits}</Markdown>
</InfoContent> */}
</InfoContent>
</Fragment>
</InfoLayout>

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

@ -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 => <H2 key={title}>{title}</H2>)
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 (
<VCWrapper>
<DateLabel colour={colours.midnight} size={textSizes.lg}>
<DateLabel size={textSizes.lg}>
{`${hasPassed ? translations.en.streamDatePast : ''}`}
<Span bold colour={colours.midnight}>
<Span bold colour={colours.rose}>
{hasPassed
? format(zonedDate, 'dd/MM/yy')
: `${format(zonedDate, 'do LLLL y // HH:mm')} ${tzShort}`}
@ -177,15 +180,15 @@ export const VideoCard = ({
{videoUrl && hasPassed ? (
<LinkBlock href={videoUrl}>
<ItemTitleWrapper>{renderTitles(title)}</ItemTitleWrapper>
<VCImg src={`${config.peertube_root}${previewPath}`} alt="" />
<VCImg src={image} alt="" />
</LinkBlock>
) : (
<Fragment>
<ItemTitleWrapper>{renderTitles(title)}</ItemTitleWrapper>
<VCImg src={`${config.peertube_root}${previewPath}`} alt="" />
<VCImg src={image} alt="" />
</Fragment>
)}
<P>{description}</P>
<Markdown withLinebreaks>{description}</Markdown>
{hasPassed ? (
<Button onClick={onClickButton}>{translations.en.watchEpisode}</Button>
) : (
@ -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,