diff --git a/index.js b/index.js
old mode 100644
new mode 100755
index 34c3402..de0c0c6
--- a/index.js
+++ b/index.js
@@ -16,13 +16,16 @@ 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 Chat from './src/components/Chat'
// import { useWindowSize } from './src/hooks/dom'
const App = () => {
- const { theme } = useTheme((store) => store)
+ const { theme } = useTheme(store => store)
const { data, loading: eventsLoading, error } = useEventApi()
const [minLoadTimePassed, setMinTimeUp] = useState(false)
- const { setCurrentStream, currentStream, streamIsLive } = useStreamStore(store => store)
+ const { setCurrentStream, currentStream, streamIsLive } = useStreamStore(
+ store => store
+ )
const streamActive = useUiStore(store => store.streamActive)
usePeertubeApi(data.episodes)
@@ -37,7 +40,10 @@ const App = () => {
new Date(stream.beginsOn),
'Europe/Berlin'
)
- const utcEndDate = zonedTimeToUtc(new Date(stream.endsOn), 'Europe/Berlin')
+ const utcEndDate = zonedTimeToUtc(
+ new Date(stream.endsOn),
+ 'Europe/Berlin'
+ )
const { timeZone } = Intl.DateTimeFormat().resolvedOptions()
const zonedStartDate = utcToZonedTime(utcStartDate, 'Europe/Berlin')
@@ -69,23 +75,30 @@ const App = () => {
- {seriesData.length ? seriesData.map(series => (
-
-
- )) : null}
+ {seriesData.length
+ ? seriesData.map(series => (
+
+
+
+ ))
+ : null}
- {streamActive ? :
- }
+
+ {streamActive ? (
+
+ ) : (
+
+ )}
)}
- )
+
+ )
}
-
const appEl = document.getElementById('app')
render(, appEl)
diff --git a/src/components/Chat/index.js b/src/components/Chat/index.js
old mode 100644
new mode 100755
index afb0955..21b0861
--- a/src/components/Chat/index.js
+++ b/src/components/Chat/index.js
@@ -26,18 +26,23 @@ const Chat = ({ overlayActive }) => {
-
+ sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
+ title="chat"
+ /> */}
) : (
-
+
diff --git a/src/components/EpisodeCard/styles.js b/src/components/EpisodeCard/styles.js
old mode 100644
new mode 100755
index 9142d46..97a7b1f
--- a/src/components/EpisodeCard/styles.js
+++ b/src/components/EpisodeCard/styles.js
@@ -16,7 +16,8 @@ export const ButtonRow = styled(Flexbox)`
width: 100%;
align-items: stretch;
- button, a{
+ button,
+ a {
font-size: 16px;
width: 49%;
height: 100%;
@@ -29,34 +30,35 @@ export const ButtonRow = styled(Flexbox)`
@media screen and (min-width: ${screenSizes.md}px) and (max-width: ${screenSizes.lg}px) {
flex-direction: column;
- button, a {
+ button,
+ a {
width: 100%;
+ height: auto;
}
}
-
`
export const Left = styled(FlexColumn)`
margin-right: 2em;
${imageWidthStyles};
-
+
@media screen and (max-width: ${screenSizes.md}px) {
margin-right: 0em;
}
- `
+`
export const Center = styled(FlexColumn)`
-@media screen and (max-width: ${screenSizes.md}px) {
- order: 2;
- position: relative;
- top: -1em;
-}
- `
+ @media screen and (max-width: ${screenSizes.md}px) {
+ order: 2;
+ position: relative;
+ top: -1em;
+ }
+`
export const Title = styled(H2)`
max-width: 80%;
margin-bottom: 1em;
- `
+`
export const Right = styled.div`
flex: 1;
@@ -66,7 +68,7 @@ export const Right = styled.div`
display: block;
margin-bottom: 0.2em;
}
-
+
@media screen and (max-width: ${screenSizes.md}px) {
position: relative;
top: 1.2em;
@@ -89,4 +91,4 @@ export const Img = styled.div`
position: relative;
background-position: center;
${imageWidthStyles};
-`
\ No newline at end of file
+`
diff --git a/src/components/Loader/styles.js b/src/components/Loader/styles.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/StreamPreview/index.js b/src/components/StreamPreview/index.js
old mode 100644
new mode 100755
index 413bbeb..7606447
--- a/src/components/StreamPreview/index.js
+++ b/src/components/StreamPreview/index.js
@@ -1,10 +1,7 @@
-import { Fragment, h } from 'preact'
+import { h } from 'preact'
import { useEffect, useRef } from 'preact/hooks'
import { PeerTubePlayer } from '@peertube/embed-api'
-import { string } from 'prop-types'
-import Link from '../Link'
import { Label } from '../Text'
-import strings from '../../data/strings'
import { colours, textSizes } from '../../assets/theme'
import { Row } from '../Flex'
import CrossSvg from '../Svg/Cross'
@@ -13,18 +10,18 @@ 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, setStreamActive } = useUiStore(store => ({
- isMinimized: store.streamPreviewMinimized,
- toggleMinimized: store.toggleStreamPreviewMinimized,
- setStreamActive: store.setStreamActive
- }))
-
+ const { isMinimized, toggleMinimized, setStreamActive } = useUiStore(
+ store => ({
+ isMinimized: store.streamPreviewMinimized,
+ toggleMinimized: store.toggleStreamPreviewMinimized,
+ setStreamActive: store.setStreamActive,
+ })
+ )
useEffect(() => {
const setupAndPlayVideo = async () => {
@@ -47,12 +44,30 @@ const StreamPreview = ({ stream, isLive, ...rest }) => {
return stream ? (
-
- {isMinimized ? : }
+
+ {isMinimized ? (
+
+ ) : (
+
+ )}
- {!isMinimized ?
+ {!isMinimized ? (
- {isLive ?
+ {isLive ? (
: null}
+ ) : (
+
+ )}
+
+ ) : null}
) : null
}
-
export default StreamPreview
diff --git a/src/pages/Series/index.js b/src/pages/Series/index.js
old mode 100644
new mode 100755
index bdbdda9..669288e
--- a/src/pages/Series/index.js
+++ b/src/pages/Series/index.js
@@ -14,20 +14,23 @@ const Series = () => {
const { data } = useEventApi()
const pastSeries = []
- const currentSeries = data.series ? data.series.filter(series => {
- if (series.episodes.future.length) {
- return true
- }
- if (series.episodes.past.every(({ beginsOn }) => isFuture(addYears(new Date(beginsOn), 1)))) {
- return true
- }
-
- pastSeries.push(series)
- return false
- }) : []
-
- console.log({ currentSeries })
+ const currentSeries = data.series
+ ? data.series.filter(series => {
+ if (series.episodes.future.length) {
+ return true
+ }
+ if (
+ series.episodes.past.every(({ beginsOn }) =>
+ isFuture(addYears(new Date(beginsOn), 1))
+ )
+ ) {
+ return true
+ }
+ pastSeries.push(series)
+ return false
+ })
+ : []
return (
@@ -48,7 +51,8 @@ const Series = () => {
))}
- ) : null}
+
+ ) : null}
)
diff --git a/src/pages/SeriesPage/index.js b/src/pages/SeriesPage/index.js
old mode 100644
new mode 100755
index 88522be..dea0e69
--- a/src/pages/SeriesPage/index.js
+++ b/src/pages/SeriesPage/index.js
@@ -26,24 +26,37 @@ const SeriesPage = ({ data }) => {
const theme = data.theme || defaultTheme
const { orgs } = data
- const credits = data.credits ? `
+ const credits = data.credits
+ ? `
## Credits
${data.credits}
- ` : null
+ `
+ : null
const orgsList = Object.values(orgs || {})
+ console.log({ orgsList })
const links = data.links.length ? splitArray(data.links, 2) : null
+ console.log({ description: data.description })
return (
-
+
{data.title}:
{data.subtitle}
- {data.description ? {data.description} : null}
+ {data.description ? (
+
+ {data.description}
+
+ ) : null}
{data.trailer ? (
@@ -51,29 +64,27 @@ const SeriesPage = ({ data }) => {
) : null}
- {links ?
- links.map(linkRow =>
- {linkRow.map(link => (
-
-
-
- ))}
-
) : null
- }
+ {links
+ ? links.map(linkRow => (
+
+ {linkRow.map(link => (
+
+
+
+ ))}
+
+ ))
+ : null}
{data.episodes.future.length ? (
{translations.en.program}:
{data.episodes.future.map(feeditem => (
-
+
))}
) : null}
@@ -91,18 +102,22 @@ const SeriesPage = ({ data }) => {
))}
) : null}
- {credits ?
- {credits}
- : null}
+ {credits ? (
+
+ {credits}
+
+ ) : null}
{orgsList.length ? (
{orgsList.map((org, index) => (
-
-
-
- {orgsList.length === 2 && index + 1 !== orgsList.length ? : null}
+
+ {orgsList.length < 4 !== 1 &&
+ orgsList.length < 4 &&
+ index + 1 !== orgsList.length ? (
+
+ ) : null}
))}
diff --git a/src/pages/SeriesPage/styles.js b/src/pages/SeriesPage/styles.js
old mode 100644
new mode 100755
index a9708f8..6658ff5
--- a/src/pages/SeriesPage/styles.js
+++ b/src/pages/SeriesPage/styles.js
@@ -40,7 +40,6 @@ export const TrailerContainer = styled.div`
}
`
-
export const ActionButton = styled(Button)`
font-size: 18px;
`
@@ -49,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;
@@ -61,23 +60,24 @@ export const Row = styled.div`
`
export const LogosRow = styled(Row)`
- align-items: center;
- max-width: 600px;
- justify-content: space-between;
- padding: 32px 0 ;
+ align-items: center;
+ max-width: 600px;
+ justify-content: space-between;
+ padding: 32px 0;
- a {
- width: auto;
- margin-right: 0;
+ a {
+ width: auto;
+ margin-right: 0;
- &[href]:hover {
- opacity: 0.7
- }
+ &[href]:hover {
+ opacity: 0.7;
}
+ }
- img {
- height: 64px;
- }
+ img {
+ max-height: 42px;
+ width: 25%;
+ }
`
export const InfoContent = styled.div`
@@ -170,7 +170,7 @@ export const EpisodeCard = ({
videoUrl,
theme,
peertubeReplay,
- id
+ id,
}) => {
const startDate = new Date(beginsOn)
@@ -179,11 +179,14 @@ export const EpisodeCard = ({
const zonedDate = utcToZonedTime(utcDate, timeZone)
- const timezoneLabel = format(zonedDate, hasPassed ? 'dd/MM/yy' : 'do LLLL y // HH:mm zzz', {
- timeZone,
- locale: enGB,
- })
-
+ const timezoneLabel = format(
+ zonedDate,
+ hasPassed ? 'dd/MM/yy' : 'do LLLL y // HH:mm zzz',
+ {
+ timeZone,
+ locale: enGB,
+ }
+ )
return (
@@ -204,11 +207,25 @@ export const EpisodeCard = ({
)}
- {description}
+
+ {description}
+
{hasPassed ? (
-
+
+
+
) : (
-
+
)}
)