Compare commits
No commits in common. "3ab937bdb251f354f3271871c90fefede716e696" and "f10932b82182ff4580371878e55e8819d130fde3" have entirely different histories.
3ab937bdb2
...
f10932b821
1
.gitignore
vendored
Executable file → Normal file
@ -10,4 +10,3 @@ public
|
|||||||
.DS_Store
|
.DS_Store
|
||||||
.env*
|
.env*
|
||||||
yarn.lock
|
yarn.lock
|
||||||
.parcel-cache
|
|
||||||
|
0
.prettierrc
Executable file → Normal file
0
.vscode/settings.json
vendored
Executable file → Normal file
2
index.html
Executable file → Normal file
@ -53,7 +53,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script src="./index.js" type="module"></script>
|
<script src="./index.js"></script>
|
||||||
<!-- Matomo -->
|
<!-- Matomo -->
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var _paq = (window._paq = window._paq || [])
|
var _paq = (window._paq = window._paq || [])
|
||||||
|
43
index.js
Executable file → Normal file
@ -16,16 +16,13 @@ import Series from './src/pages/Series'
|
|||||||
import Program from './src/pages/Program'
|
import Program from './src/pages/Program'
|
||||||
import StreamPreview from './src/components/StreamPreview'
|
import StreamPreview from './src/components/StreamPreview'
|
||||||
import Video from './src/components/Video'
|
import Video from './src/components/Video'
|
||||||
import Chat from './src/components/Chat'
|
|
||||||
// import { useWindowSize } from './src/hooks/dom'
|
// import { useWindowSize } from './src/hooks/dom'
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const { theme } = useTheme(store => store)
|
const { theme } = useTheme((store) => store)
|
||||||
const { data, loading: eventsLoading, error } = useEventApi()
|
const { data, loading: eventsLoading, error } = useEventApi()
|
||||||
const [minLoadTimePassed, setMinTimeUp] = useState(false)
|
const [minLoadTimePassed, setMinTimeUp] = useState(false)
|
||||||
const { setCurrentStream, currentStream, streamIsLive } = useStreamStore(
|
const { setCurrentStream, currentStream, streamIsLive } = useStreamStore(store => store)
|
||||||
store => store
|
|
||||||
)
|
|
||||||
const streamActive = useUiStore(store => store.streamActive)
|
const streamActive = useUiStore(store => store.streamActive)
|
||||||
usePeertubeApi(data.episodes)
|
usePeertubeApi(data.episodes)
|
||||||
|
|
||||||
@ -40,17 +37,14 @@ const App = () => {
|
|||||||
new Date(stream.beginsOn),
|
new Date(stream.beginsOn),
|
||||||
'Europe/Berlin'
|
'Europe/Berlin'
|
||||||
)
|
)
|
||||||
const utcEndDate = zonedTimeToUtc(
|
const utcEndDate = zonedTimeToUtc(new Date(stream.endsOn), 'Europe/Berlin')
|
||||||
new Date(stream.endsOn),
|
|
||||||
'Europe/Berlin'
|
|
||||||
)
|
|
||||||
const { timeZone } = Intl.DateTimeFormat().resolvedOptions()
|
const { timeZone } = Intl.DateTimeFormat().resolvedOptions()
|
||||||
|
|
||||||
const zonedStartDate = utcToZonedTime(utcStartDate, 'Europe/Berlin')
|
const zonedStartDate = utcToZonedTime(utcStartDate, timeZone)
|
||||||
const zonedEndDate = utcToZonedTime(utcEndDate, 'Europe/Berlin')
|
const zonedEndDate = utcToZonedTime(utcEndDate, timeZone)
|
||||||
if (
|
if (
|
||||||
isWithinInterval(new Date(), {
|
isWithinInterval(new Date(), {
|
||||||
start: subHours(zonedStartDate, 2),
|
start: subHours(zonedStartDate, 1),
|
||||||
end: addHours(zonedEndDate, 1),
|
end: addHours(zonedEndDate, 1),
|
||||||
})
|
})
|
||||||
) {
|
) {
|
||||||
@ -60,6 +54,8 @@ const App = () => {
|
|||||||
}
|
}
|
||||||
}, [eventsLoading])
|
}, [eventsLoading])
|
||||||
|
|
||||||
|
// console.log({ episodes: data.episodes, series: data.series })
|
||||||
|
|
||||||
const seriesData = data.series ? Object.values(data.series) : []
|
const seriesData = data.series ? Object.values(data.series) : []
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -73,30 +69,23 @@ const App = () => {
|
|||||||
<Route exact path="/" component={Program} />
|
<Route exact path="/" component={Program} />
|
||||||
<Route exact path="/series" component={Series} />
|
<Route exact path="/series" component={Series} />
|
||||||
<Route exact path="/program" component={Program} />
|
<Route exact path="/program" component={Program} />
|
||||||
{seriesData.length
|
{seriesData.length ? seriesData.map(series => (
|
||||||
? seriesData.map(series => (
|
<Route exact path={`/series/${series.slug}`}>
|
||||||
<Route exact path={`/series/${series.slug}`}>
|
<SeriesPage data={series} />
|
||||||
<SeriesPage data={series} />
|
</Route>)) : null}
|
||||||
</Route>
|
|
||||||
))
|
|
||||||
: null}
|
|
||||||
<Route path="*">
|
<Route path="*">
|
||||||
<FourOhFour />
|
<FourOhFour />
|
||||||
</Route>
|
</Route>
|
||||||
</Switch>
|
</Switch>
|
||||||
</BrowserRouter>
|
</BrowserRouter>
|
||||||
|
{streamActive ? <Video stream={currentStream} /> :
|
||||||
{streamActive ? (
|
<StreamPreview stream={currentStream} isLive={streamIsLive} />}
|
||||||
<Video stream={currentStream} />
|
|
||||||
) : (
|
|
||||||
<StreamPreview stream={currentStream} isLive={streamIsLive} />
|
|
||||||
)}
|
|
||||||
</Fragment>
|
</Fragment>
|
||||||
)}
|
)}
|
||||||
</ThemeProvider>
|
</ThemeProvider>)
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const appEl = document.getElementById('app')
|
const appEl = document.getElementById('app')
|
||||||
|
|
||||||
render(<App />, appEl)
|
render(<App />, appEl)
|
||||||
|
0
netlify.toml
Executable file → Normal file
9
package.json
Executable file → Normal file
@ -1,11 +1,13 @@
|
|||||||
{
|
{
|
||||||
"name": "underscore_stream",
|
"name": "underscore_stream",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
|
"main": "index.js",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "yarn parcel index.html",
|
"start": "yarn parcel index.html",
|
||||||
"dev": "yarn parcel watch index.html",
|
"dev": "yarn parcel watch index.html",
|
||||||
"build": "parcel build index.html && cp -r static dist/static"
|
"build": "parcel build index.html && cp -r static dist/static",
|
||||||
|
"deploy": "yarn parcel build; rsync rsync -aP ./dist/ inu@95.216.203.71:/media/www/stream.undersco.re/"
|
||||||
},
|
},
|
||||||
"alias": {
|
"alias": {
|
||||||
"react": "preact/compat",
|
"react": "preact/compat",
|
||||||
@ -24,7 +26,7 @@
|
|||||||
"ical.js": "^1.4.0",
|
"ical.js": "^1.4.0",
|
||||||
"markdown-to-jsx": "^7.1.2",
|
"markdown-to-jsx": "^7.1.2",
|
||||||
"preact": "^10.5.12",
|
"preact": "^10.5.12",
|
||||||
"prop-types": "^15.8.1",
|
"prop-types": "^15.7.2",
|
||||||
"react-helmet": "^6.1.0",
|
"react-helmet": "^6.1.0",
|
||||||
"react-router-dom": "^5.3.0",
|
"react-router-dom": "^5.3.0",
|
||||||
"striptags": "^3.2.0",
|
"striptags": "^3.2.0",
|
||||||
@ -33,7 +35,6 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/eslint-parser": "^7.13.10",
|
"@babel/eslint-parser": "^7.13.10",
|
||||||
"@parcel/transformer-sass": "2.5.0",
|
|
||||||
"babel": "^6.23.0",
|
"babel": "^6.23.0",
|
||||||
"babel-plugin-transform-react-jsx": "^6.24.1",
|
"babel-plugin-transform-react-jsx": "^6.24.1",
|
||||||
"babel-preset-env": "^1.6.1",
|
"babel-preset-env": "^1.6.1",
|
||||||
@ -41,7 +42,7 @@
|
|||||||
"eslint-config-flying-rocket": "^1.1.1",
|
"eslint-config-flying-rocket": "^1.1.1",
|
||||||
"marked": "^2.0.3",
|
"marked": "^2.0.3",
|
||||||
"module-alias": "^2.0.3",
|
"module-alias": "^2.0.3",
|
||||||
"parcel": "^2.0.0",
|
"parcel-bundler": "1.12.3",
|
||||||
"parcel-plugin-ogimage": "^1.2.0",
|
"parcel-plugin-ogimage": "^1.2.0",
|
||||||
"prettier": "^1.9.1",
|
"prettier": "^1.9.1",
|
||||||
"sass": "^1.32.8",
|
"sass": "^1.32.8",
|
||||||
|
0
src/assets/fonts/Karla/Karla-Bold.ttf
Executable file → Normal file
0
src/assets/fonts/Karla/Karla-Medium.ttf
Executable file → Normal file
0
src/assets/fonts/Karla/Karla-Regular.ttf
Executable file → Normal file
0
src/assets/fonts/Karla/Karla-VariableFont_wght.ttf
Executable file → Normal file
0
src/assets/fonts/Lunchtype/lunchtype24-medium.ttf
Executable file → Normal file
0
src/assets/img/IconSM.png
Executable file → Normal file
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB |
0
src/assets/img/hero/1lg.png
Executable file → Normal file
Before Width: | Height: | Size: 906 KiB After Width: | Height: | Size: 906 KiB |
0
src/assets/img/hero/1sm.png
Executable file → Normal file
Before Width: | Height: | Size: 112 KiB After Width: | Height: | Size: 112 KiB |
0
src/assets/img/hero/2lg.png
Executable file → Normal file
Before Width: | Height: | Size: 603 KiB After Width: | Height: | Size: 603 KiB |
0
src/assets/img/hero/2md.png
Executable file → Normal file
Before Width: | Height: | Size: 178 KiB After Width: | Height: | Size: 178 KiB |
0
src/assets/img/hero/2sm.png
Executable file → Normal file
Before Width: | Height: | Size: 83 KiB After Width: | Height: | Size: 83 KiB |
0
src/assets/styles/fontface.scss
Executable file → Normal file
0
src/assets/styles/index.scss
Executable file → Normal file
0
src/assets/styles/reset.scss
Executable file → Normal file
0
src/assets/theme/index.js
Executable file → Normal file
0
src/components/Button/index.js
Executable file → Normal file
10
src/components/Chat/index.js
Executable file → Normal file
@ -27,21 +27,17 @@ const Chat = ({ overlayActive }) => {
|
|||||||
<CloseBox colour={colours.white} size={18} onClick={toggleChatOpen} />
|
<CloseBox colour={colours.white} size={18} onClick={toggleChatOpen} />
|
||||||
</ChatHeader>
|
</ChatHeader>
|
||||||
<iframe
|
<iframe
|
||||||
src={`https://e.widgetbot.io/channels/${config.chat.guildId}/${config.chat.channelId}`}
|
src={`https://titanembeds.com/embed/${config.chat.guildId}?css=${config.chat.css}&defaultchannel=${config.chat.channelId}&lang=en_EN`}
|
||||||
height={(height / 4) * 3}
|
height={(height / 4) * 3}
|
||||||
width="350"
|
width="350"
|
||||||
frameBorder="0"
|
frameBorder="0"
|
||||||
className="titanembed"
|
|
||||||
title="discord-chat"
|
title="discord-chat"
|
||||||
|
className="titanembed"
|
||||||
/>
|
/>
|
||||||
</ChatFrame>
|
</ChatFrame>
|
||||||
</ChatWrapper>
|
</ChatWrapper>
|
||||||
) : (
|
) : (
|
||||||
<ChatHeader
|
<ChatHeader chatIsOpen={false} onClick={toggleChatOpen} $active={overlayActive}>
|
||||||
chatIsOpen={false}
|
|
||||||
onClick={toggleChatOpen}
|
|
||||||
$active={overlayActive}
|
|
||||||
>
|
|
||||||
<Label weight="400" size={16} colour={colours.midnightDarker}>
|
<Label weight="400" size={16} colour={colours.midnightDarker}>
|
||||||
CHAT
|
CHAT
|
||||||
</Label>
|
</Label>
|
||||||
|
0
src/components/Chat/styles.js
Executable file → Normal file
36
src/components/EpisodeCard/index.js
Executable file → Normal file
@ -1,44 +1,25 @@
|
|||||||
import { h } from 'preact'
|
import { h } from 'preact'
|
||||||
import { ICalendar } from 'datebook'
|
import { ICalendar } from 'datebook'
|
||||||
// import { format } from 'date-fns'
|
import { format } from 'date-fns'
|
||||||
import striptags from 'striptags'
|
import striptags from 'striptags'
|
||||||
import { utcToZonedTime, zonedTimeToUtc, format } from 'date-fns-tz'
|
|
||||||
import enGB from 'date-fns/locale/en-GB'
|
|
||||||
|
|
||||||
import Link from '../Link'
|
import Link from '../Link'
|
||||||
import { H2, H3, Label } from '../Text'
|
import { H2, H3, Label } from '../Text'
|
||||||
import Flex from '../Flex'
|
|
||||||
|
|
||||||
import { Img, Left, Right, Center, Title, ButtonRow, StyledButton as Button } from './styles'
|
|
||||||
|
|
||||||
import strings from '../../data/strings'
|
import strings from '../../data/strings'
|
||||||
import { colours, screenSizes } from '../../assets/theme'
|
|
||||||
import { andList } from '../../helpers/string'
|
import { andList } from '../../helpers/string'
|
||||||
|
import { colours, screenSizes } from '../../assets/theme'
|
||||||
|
import { Img, Left, Right, Center, Title, ButtonRow, StyledButton as Button } from './styles'
|
||||||
import { useEventApi } from '../../hooks/data'
|
import { useEventApi } from '../../hooks/data'
|
||||||
import { useWindowSize } from '../../hooks/dom'
|
import { useWindowSize } from '../../hooks/dom'
|
||||||
|
import Flex from '../Flex'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const EpisodeCard = ({ image, title, seriesId, beginsOn, endsOn, id: episodeId, url, description, ...rest }) => {
|
const EpisodeCard = ({ image, title, seriesId, beginsOn, endsOn, id, url, description, ...rest }) => {
|
||||||
const { data: { series: allSeries } } = useEventApi()
|
const { data: { series: allSeries } } = useEventApi()
|
||||||
|
|
||||||
const series = seriesId ? allSeries.filter(({ id }) => id === seriesId)[0] : {}
|
const series = seriesId ? allSeries.filter(({ id }) => id === seriesId)[0] : {}
|
||||||
const hosts = series.hosts ? series.hosts.map(host => host.actor.name) : null
|
const hosts = series.hosts ? series.hosts.map(host => host.actor.name) : null
|
||||||
const startDate = new Date(beginsOn)
|
const startTime = format(new Date(beginsOn), 'h:mma')
|
||||||
|
|
||||||
const { timeZone } = Intl.DateTimeFormat().resolvedOptions()
|
|
||||||
const utcDate = zonedTimeToUtc(startDate, timeZone)
|
|
||||||
|
|
||||||
const zonedDate = utcToZonedTime(utcDate, timeZone)
|
|
||||||
|
|
||||||
const startTime = format(zonedDate, 'h:mma', {
|
|
||||||
timeZone,
|
|
||||||
locale: enGB,
|
|
||||||
})
|
|
||||||
const tzShort = format(zonedDate, 'zzz', {
|
|
||||||
timeZone,
|
|
||||||
locale: enGB,
|
|
||||||
})
|
|
||||||
|
|
||||||
const { width: screenWidth } = useWindowSize()
|
const { width: screenWidth } = useWindowSize()
|
||||||
const isMobile = screenWidth < screenSizes.md
|
const isMobile = screenWidth < screenSizes.md
|
||||||
@ -47,7 +28,7 @@ const EpisodeCard = ({ image, title, seriesId, beginsOn, endsOn, id: episodeId,
|
|||||||
return (
|
return (
|
||||||
<Flex align="stretch" direction={isMobile ? 'column' : 'row'} {...rest}>
|
<Flex align="stretch" direction={isMobile ? 'column' : 'row'} {...rest}>
|
||||||
<Left>
|
<Left>
|
||||||
<Link to={`/series/${series.slug}#${episodeId}`}>
|
<Link to={`/series/${series.slug}#${id}`}>
|
||||||
<Img src={image} />
|
<Img src={image} />
|
||||||
</Link>
|
</Link>
|
||||||
<ButtonsRows title={title} description={description} beginsOn={beginsOn} endsOn={endsOn} url={url} />
|
<ButtonsRows title={title} description={description} beginsOn={beginsOn} endsOn={endsOn} url={url} />
|
||||||
@ -62,8 +43,7 @@ const EpisodeCard = ({ image, title, seriesId, beginsOn, endsOn, id: episodeId,
|
|||||||
</div>
|
</div>
|
||||||
</Center>
|
</Center>
|
||||||
<Right>
|
<Right>
|
||||||
<Label size={24} colour={colours.rose} weight="600" align="right" block>{startTime}</Label>
|
<Label size={24} colour={colours.rose} weight="600">{startTime}</Label>
|
||||||
<Label size={18} colour={colours.rose} weight="600" align="right" block>{tzShort}</Label>
|
|
||||||
</Right>
|
</Right>
|
||||||
</Flex>
|
</Flex>
|
||||||
)
|
)
|
||||||
|
29
src/components/EpisodeCard/styles.js
Executable file → Normal file
@ -16,8 +16,7 @@ export const ButtonRow = styled(Flexbox)`
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
|
|
||||||
button,
|
button, a{
|
||||||
a {
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
width: 49%;
|
width: 49%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -30,12 +29,11 @@ export const ButtonRow = styled(Flexbox)`
|
|||||||
@media screen and (min-width: ${screenSizes.md}px) and (max-width: ${screenSizes.lg}px) {
|
@media screen and (min-width: ${screenSizes.md}px) and (max-width: ${screenSizes.lg}px) {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
button,
|
button, a {
|
||||||
a {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
`
|
`
|
||||||
|
|
||||||
export const Left = styled(FlexColumn)`
|
export const Left = styled(FlexColumn)`
|
||||||
@ -45,33 +43,26 @@ export const Left = styled(FlexColumn)`
|
|||||||
@media screen and (max-width: ${screenSizes.md}px) {
|
@media screen and (max-width: ${screenSizes.md}px) {
|
||||||
margin-right: 0em;
|
margin-right: 0em;
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
export const Center = styled(FlexColumn)`
|
export const Center = styled(FlexColumn)`
|
||||||
@media screen and (max-width: ${screenSizes.md}px) {
|
@media screen and (max-width: ${screenSizes.md}px) {
|
||||||
order: 2;
|
order: 2;
|
||||||
position: relative;
|
}
|
||||||
top: -1em;
|
`
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|
||||||
export const Title = styled(H2)`
|
export const Title = styled(H2)`
|
||||||
max-width: 80%;
|
max-width: 80%;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
`
|
`
|
||||||
|
|
||||||
export const Right = styled.div`
|
export const Right = styled.div`
|
||||||
flex: 1;
|
flex: 1;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
|
||||||
label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 0.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: ${screenSizes.md}px) {
|
@media screen and (max-width: ${screenSizes.md}px) {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 1.2em;
|
top: 1em;
|
||||||
order: 1;
|
order: 1;
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
0
src/components/Flex/index.js
Executable file → Normal file
0
src/components/Header/index.js
Executable file → Normal file
0
src/components/Header/styles.js
Executable file → Normal file
0
src/components/Link/index.js
Executable file → Normal file
0
src/components/Link/styles.js
Executable file → Normal file
0
src/components/Loader/index.js
Executable file → Normal file
0
src/components/Loader/styles.js
Normal file
0
src/components/Logo/index.js
Executable file → Normal file
0
src/components/Markdown/index.js
Executable file → Normal file
4
src/components/Markdown/styles.js
Executable file → Normal file
@ -28,10 +28,6 @@ export const MarkdownWrapper = styled.span`
|
|||||||
|
|
||||||
p {
|
p {
|
||||||
margin-bottom: ${props => (props.$withLinebreaks ? '32px' : '0')};
|
margin-bottom: ${props => (props.$withLinebreaks ? '32px' : '0')};
|
||||||
|
|
||||||
&:last-of-type {
|
|
||||||
margin-bottom: ${props => (props.$withLinebreaks ? '8px' : '0')};
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
p > p {
|
p > p {
|
||||||
|
0
src/components/Select/index.js
Executable file → Normal file
0
src/components/Select/styles.js
Executable file → Normal file
0
src/components/Seo/index.js
Executable file → Normal file
49
src/components/SeriesCard/index.js
Executable file → Normal file
@ -7,31 +7,15 @@ import { Img, LabelBlock, Wrapper } from './styles'
|
|||||||
import { andList } from '../../helpers/string'
|
import { andList } from '../../helpers/string'
|
||||||
import { colours } from '../../assets/theme'
|
import { colours } from '../../assets/theme'
|
||||||
|
|
||||||
const SeriesCard = ({
|
const SeriesCard = ({ series: { image, episodes, title, subtitle, hosts: hostsArray, slug, }, isPast, ...rest }) => {
|
||||||
series: { image, episodes, title, subtitle, hosts: hostsArray, slug },
|
|
||||||
isPast,
|
|
||||||
...rest
|
|
||||||
}) => {
|
|
||||||
const hosts = hostsArray.map(({ actor }) => actor.name)
|
const hosts = hostsArray.map(({ actor }) => actor.name)
|
||||||
|
|
||||||
const episodesLength = episodes.past.length + episodes.future.length
|
const episodesLength = episodes.past.length + episodes.future.length
|
||||||
|
|
||||||
const getNextLastStreamText = () => {
|
const getNextLastStreamText = () => {
|
||||||
const hasFutureEpisodes = episodes.future.length
|
const hasFutureEpisodes = episodes.future.length
|
||||||
const prefix = hasFutureEpisodes
|
const prefix = hasFutureEpisodes ? strings.en.nextStream : strings.en.lastStream
|
||||||
? strings.en.nextStream
|
const mainText = formatDistanceToNow(new Date(episodes[hasFutureEpisodes ? 'future' : 'past'][0][hasFutureEpisodes ? 'endsOn' : 'beginsOn']), { addSuffix: true })
|
||||||
: strings.en.lastStream
|
|
||||||
|
|
||||||
const episodesList = episodes[hasFutureEpisodes ? 'future' : 'past']
|
|
||||||
|
|
||||||
const mainText = formatDistanceToNow(
|
|
||||||
new Date(
|
|
||||||
episodesList[hasFutureEpisodes ? 0 : episodesList.length - 1][
|
|
||||||
hasFutureEpisodes ? 'endsOn' : 'beginsOn'
|
|
||||||
]
|
|
||||||
),
|
|
||||||
{ addSuffix: true }
|
|
||||||
)
|
|
||||||
|
|
||||||
return `${prefix} ${mainText}`
|
return `${prefix} ${mainText}`
|
||||||
}
|
}
|
||||||
@ -40,24 +24,21 @@ const SeriesCard = ({
|
|||||||
<Link to={`series/${slug}`}>
|
<Link to={`series/${slug}`}>
|
||||||
<Wrapper {...rest}>
|
<Wrapper {...rest}>
|
||||||
<Img src={image}>
|
<Img src={image}>
|
||||||
<LabelBlock $position="top">
|
<LabelBlock
|
||||||
{episodesLength}{' '}
|
$position="top"
|
||||||
{episodesLength === 1 ? strings.en.episode : strings.en.episodes}
|
>
|
||||||
|
{episodesLength} {episodesLength === 1 ? strings.en.episode : strings.en.episodes}
|
||||||
|
</LabelBlock>
|
||||||
|
<LabelBlock
|
||||||
|
$position="bottom"
|
||||||
|
>
|
||||||
|
{getNextLastStreamText()}
|
||||||
</LabelBlock>
|
</LabelBlock>
|
||||||
<LabelBlock $position="bottom">{getNextLastStreamText()}</LabelBlock>
|
|
||||||
</Img>
|
</Img>
|
||||||
|
|
||||||
<H2 size={32} colour={colours.rose}>
|
<H2 size={32} colour={colours.rose}>{title}</H2>
|
||||||
{title}
|
<H3 size={21} colour={colours.rose}>{subtitle}</H3>
|
||||||
</H2>
|
{hosts.length ? <Label size={16} colour={colours.rose}>— {andList(hosts)}</Label> : null}
|
||||||
<H3 size={21} colour={colours.rose}>
|
|
||||||
{subtitle}
|
|
||||||
</H3>
|
|
||||||
{hosts.length ? (
|
|
||||||
<Label size={16} colour={colours.rose}>
|
|
||||||
— {andList(hosts)}
|
|
||||||
</Label>
|
|
||||||
) : null}
|
|
||||||
</Wrapper>
|
</Wrapper>
|
||||||
</Link>
|
</Link>
|
||||||
)
|
)
|
||||||
|
0
src/components/SeriesCard/styles.js
Executable file → Normal file
0
src/components/StreamPreview/helpers.js
Executable file → Normal file
53
src/components/StreamPreview/index.js
Executable file → Normal file
@ -1,7 +1,10 @@
|
|||||||
import { h } from 'preact'
|
import { Fragment, h } from 'preact'
|
||||||
import { useEffect, useRef } from 'preact/hooks'
|
import { useEffect, useRef } from 'preact/hooks'
|
||||||
import { PeerTubePlayer } from '@peertube/embed-api'
|
import { PeerTubePlayer } from '@peertube/embed-api'
|
||||||
|
import { string } from 'prop-types'
|
||||||
|
import Link from '../Link'
|
||||||
import { Label } from '../Text'
|
import { Label } from '../Text'
|
||||||
|
import strings from '../../data/strings'
|
||||||
import { colours, textSizes } from '../../assets/theme'
|
import { colours, textSizes } from '../../assets/theme'
|
||||||
import { Row } from '../Flex'
|
import { Row } from '../Flex'
|
||||||
import CrossSvg from '../Svg/Cross'
|
import CrossSvg from '../Svg/Cross'
|
||||||
@ -10,18 +13,18 @@ import { getLabel } from './helpers'
|
|||||||
import Chevron from '../Svg/Chevron'
|
import Chevron from '../Svg/Chevron'
|
||||||
|
|
||||||
import { Frame, Img, Iframe, InnerWrapper } from './styles'
|
import { Frame, Img, Iframe, InnerWrapper } from './styles'
|
||||||
|
// import { useEventApi } from '../../hooks/data'
|
||||||
|
|
||||||
const StreamPreview = ({ stream, isLive, ...rest }) => {
|
const StreamPreview = ({ stream, isLive, ...rest }) => {
|
||||||
const currentLanguage = 'en'
|
const currentLanguage = 'en'
|
||||||
const videoiFrame = useRef(null)
|
const videoiFrame = useRef(null)
|
||||||
const ptVideo = useRef(null)
|
const ptVideo = useRef(null)
|
||||||
const { isMinimized, toggleMinimized, setStreamActive } = useUiStore(
|
const { isMinimized, toggleMinimized, setStreamActive } = useUiStore(store => ({
|
||||||
store => ({
|
isMinimized: store.streamPreviewMinimized,
|
||||||
isMinimized: store.streamPreviewMinimized,
|
toggleMinimized: store.toggleStreamPreviewMinimized,
|
||||||
toggleMinimized: store.toggleStreamPreviewMinimized,
|
setStreamActive: store.setStreamActive
|
||||||
setStreamActive: store.setStreamActive,
|
}))
|
||||||
})
|
|
||||||
)
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const setupAndPlayVideo = async () => {
|
const setupAndPlayVideo = async () => {
|
||||||
@ -44,30 +47,12 @@ const StreamPreview = ({ stream, isLive, ...rest }) => {
|
|||||||
return stream ? (
|
return stream ? (
|
||||||
<Frame isMinimized={isMinimized}>
|
<Frame isMinimized={isMinimized}>
|
||||||
<Row justify="space-between">
|
<Row justify="space-between">
|
||||||
<Label
|
<Label colour={colours.midnightDarker} size={textSizes.lg} onClick={activateStream}>{getLabel(stream, isLive, isMinimized)}</Label>
|
||||||
colour={colours.midnightDarker}
|
{isMinimized ? <Chevron colour={colours.midnightDarker} size={14} onClick={toggleMinimized} /> : <CrossSvg colour={colours.midnightDarker} size={16} onClick={toggleMinimized} />}
|
||||||
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>
|
</Row>
|
||||||
{!isMinimized ? (
|
{!isMinimized ?
|
||||||
<InnerWrapper onClick={activateStream}>
|
<InnerWrapper onClick={activateStream}>
|
||||||
{isLive ? (
|
{isLive ?
|
||||||
<Iframe
|
<Iframe
|
||||||
width="560"
|
width="560"
|
||||||
height="315"
|
height="315"
|
||||||
@ -79,13 +64,11 @@ const StreamPreview = ({ stream, isLive, ...rest }) => {
|
|||||||
allowFullScreen
|
allowFullScreen
|
||||||
ref={videoiFrame}
|
ref={videoiFrame}
|
||||||
/>
|
/>
|
||||||
) : (
|
: <Img src={stream.image} onClick={activateStream} />}
|
||||||
<Img src={stream.image} onClick={activateStream} />
|
</InnerWrapper> : null}
|
||||||
)}
|
|
||||||
</InnerWrapper>
|
|
||||||
) : null}
|
|
||||||
</Frame>
|
</Frame>
|
||||||
) : null
|
) : null
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export default StreamPreview
|
export default StreamPreview
|
||||||
|
0
src/components/StreamPreview/styles.js
Executable file → Normal file
0
src/components/Svg/Chevron.js
Executable file → Normal file
0
src/components/Svg/Cross.js
Executable file → Normal file
0
src/components/Svg/Play.js
Executable file → Normal file
0
src/components/Svg/VideoOverlay/index.js
Executable file → Normal file
0
src/components/Svg/VideoOverlay/styles.js
Executable file → Normal file
0
src/components/Svg/base.js
Executable file → Normal file
0
src/components/Svg/proptypes.js
Executable file → Normal file
0
src/components/Text/index.js
Executable file → Normal file
0
src/components/Text/styles.js
Executable file → Normal file
13
src/components/Video/index.js
Executable file → Normal file
@ -1,7 +1,13 @@
|
|||||||
import { h } from 'preact'
|
import { h } from 'preact'
|
||||||
import { useEffect, useRef, useState } from 'preact/hooks'
|
import { useEffect, useRef, useState } from 'preact/hooks'
|
||||||
import { instanceOf, number, object, shape, string } from 'prop-types'
|
import {
|
||||||
|
instanceOf,
|
||||||
|
number,
|
||||||
|
object,
|
||||||
|
shape,
|
||||||
|
string,
|
||||||
|
} from 'prop-types'
|
||||||
|
import 'regenerator-runtime/runtime'
|
||||||
import { PeerTubePlayer } from '@peertube/embed-api'
|
import { PeerTubePlayer } from '@peertube/embed-api'
|
||||||
|
|
||||||
import Chat from '../Chat'
|
import Chat from '../Chat'
|
||||||
@ -51,6 +57,7 @@ const Video = () => {
|
|||||||
setVideo()
|
setVideo()
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
|
|
||||||
const playVideo = () => {
|
const playVideo = () => {
|
||||||
const { current: player } = ptVideo
|
const { current: player } = ptVideo
|
||||||
if (!videoReady) return
|
if (!videoReady) return
|
||||||
@ -77,6 +84,7 @@ const Video = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const toggleVideo = () => {
|
const toggleVideo = () => {
|
||||||
if (isPlaying) {
|
if (isPlaying) {
|
||||||
pauseVideo()
|
pauseVideo()
|
||||||
@ -117,6 +125,7 @@ const Video = () => {
|
|||||||
console.log({ vol })
|
console.log({ vol })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const handleKeyPress = keyCode => {
|
const handleKeyPress = keyCode => {
|
||||||
if (keyCode === 32) {
|
if (keyCode === 32) {
|
||||||
// key == 'space'
|
// key == 'space'
|
||||||
|
0
src/components/Video/styles.js
Executable file → Normal file
0
src/components/VideoEmbed/index.js
Executable file → Normal file
0
src/components/VideoEmbed/styles.js
Executable file → Normal file
0
src/components/VideoOverlay/index.js
Executable file → Normal file
0
src/components/VideoOverlay/styles.js
Executable file → Normal file
6
src/data/config.js
Executable file → Normal file
@ -1,9 +1,8 @@
|
|||||||
export default {
|
export default {
|
||||||
meta: {
|
meta: {
|
||||||
title: 'Underscore streams',
|
title: 'Underscore streams',
|
||||||
description:
|
description: 'Quality live programming from beyond the surveillance economy.',
|
||||||
'Quality live programming from beyond the surveillance economy.',
|
img: 'https://stream.undersco.re/static/meta.png'
|
||||||
img: 'https://stream.undersco.re/static/meta.png',
|
|
||||||
},
|
},
|
||||||
peertube_root: 'https://tv.undersco.re',
|
peertube_root: 'https://tv.undersco.re',
|
||||||
EVENTS_API_URL: 'https://api.undersco.re',
|
EVENTS_API_URL: 'https://api.undersco.re',
|
||||||
@ -12,5 +11,6 @@ export default {
|
|||||||
chat: {
|
chat: {
|
||||||
guildId: '709318870909059082',
|
guildId: '709318870909059082',
|
||||||
channelId: '826751398757793842',
|
channelId: '826751398757793842',
|
||||||
|
css: '215',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
0
src/data/navigation.js
Executable file → Normal file
0
src/data/strings.js
Executable file → Normal file
0
src/helpers/environment.js
Executable file → Normal file
0
src/helpers/string.js
Executable file → Normal file
0
src/helpers/utils.js
Executable file → Normal file
206
src/hooks/data.js
Executable file → Normal file
@ -1,110 +1,108 @@
|
|||||||
import { h } from 'preact'
|
import { h, render } from 'preact'
|
||||||
import { useEffect, useState } from 'preact/hooks'
|
import { useEffect, useState } from 'preact/hooks'
|
||||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
|
||||||
|
|
||||||
import { secondsToMilliseconds } from 'date-fns'
|
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
// import ICAL from 'ical.js'
|
import ICAL from 'ical.js'
|
||||||
import config from '../data/config'
|
import config from '../data/config'
|
||||||
import { useSeriesStore, useStreamStore } from '../store/index'
|
import { useSeriesStore, useStreamStore } from '../store/index'
|
||||||
|
import 'regenerator-runtime/runtime'
|
||||||
import { useInterval } from './timerHooks'
|
import { useInterval } from './timerHooks'
|
||||||
|
import { secondsToMilliseconds } from 'date-fns'
|
||||||
|
|
||||||
// export const useEventCalendar = () => {
|
export const useEventCalendar = () => {
|
||||||
// const [data, setData] = useState([])
|
const [data, setData] = useState([])
|
||||||
// const [loading, setLoading] = useState(true)
|
const [loading, setLoading] = useState(true)
|
||||||
|
|
||||||
// async function fetchData() {
|
async function fetchData() {
|
||||||
// setLoading(true)
|
setLoading(true)
|
||||||
|
|
||||||
// const { data: responseData } = await axios.get(
|
const { data: responseData } = await axios.get(
|
||||||
// `https://cloud.undersco.re/remote.php/dav/public-calendars/${config.calendarId}/?export`
|
`https://cloud.undersco.re/remote.php/dav/public-calendars/${config.calendarId}/?export`
|
||||||
// )
|
)
|
||||||
// const jCalData = ICAL.parse(responseData)
|
const jCalData = ICAL.parse(responseData)
|
||||||
// const comp = new ICAL.Component(jCalData)
|
const comp = new ICAL.Component(jCalData)
|
||||||
|
|
||||||
// const vevents = comp.getAllSubcomponents('vevent')
|
const vevents = comp.getAllSubcomponents('vevent')
|
||||||
|
|
||||||
// const calEvents = vevents
|
const calEvents = vevents
|
||||||
// .filter(
|
.filter(
|
||||||
// vevent =>
|
vevent =>
|
||||||
// vevent.getFirstPropertyValue('status') === null ||
|
vevent.getFirstPropertyValue('status') === null ||
|
||||||
// (vevent.getFirstPropertyValue('status') &&
|
(vevent.getFirstPropertyValue('status') &&
|
||||||
// vevent.getFirstPropertyValue('status').toUpperCase() ===
|
vevent.getFirstPropertyValue('status').toUpperCase() ===
|
||||||
// 'CONFIRMED')
|
'CONFIRMED')
|
||||||
// )
|
)
|
||||||
// .map(vevent => {
|
.map(vevent => {
|
||||||
// const event = new ICAL.Event(vevent)
|
const event = new ICAL.Event(vevent)
|
||||||
// return event
|
return event
|
||||||
// })
|
})
|
||||||
// .sort((a, b) => a.startDate.toJSDate() - b.startDate.toJSDate())
|
.sort((a, b) => a.startDate.toJSDate() - b.startDate.toJSDate())
|
||||||
|
|
||||||
// await Promise.all(
|
await Promise.all(
|
||||||
// calEvents.map(async calItem => {
|
calEvents.map(async calItem => {
|
||||||
// const url = calItem.component.getAllProperties('url')[0]
|
const url = calItem.component.getAllProperties('url')[0]
|
||||||
// if (url) {
|
if (url) {
|
||||||
// const id = url
|
const id = url
|
||||||
// .getFirstValue()
|
.getFirstValue()
|
||||||
// .split('/')
|
.split('/')
|
||||||
// .pop()
|
.pop()
|
||||||
// const {
|
const {
|
||||||
// data: {
|
data: {
|
||||||
// account,
|
account,
|
||||||
// category,
|
category,
|
||||||
// channel,
|
channel,
|
||||||
// embedPath,
|
embedPath,
|
||||||
// language,
|
language,
|
||||||
// state,
|
state,
|
||||||
// previewPath,
|
previewPath,
|
||||||
// views,
|
views,
|
||||||
// duration,
|
duration,
|
||||||
// },
|
},
|
||||||
// } = await axios.get(`https://tv.undersco.re/api/v1/videos/${id}`)
|
} = await axios.get(`https://tv.undersco.re/api/v1/videos/${id}`)
|
||||||
|
|
||||||
// const item = {
|
const item = {
|
||||||
// title: calItem.summary,
|
title: calItem.summary,
|
||||||
// account,
|
account,
|
||||||
// category,
|
category,
|
||||||
// channel,
|
channel,
|
||||||
// description: calItem.description,
|
description: calItem.description,
|
||||||
// embedPath,
|
embedPath,
|
||||||
// language,
|
language,
|
||||||
// state,
|
state,
|
||||||
// previewPath,
|
previewPath,
|
||||||
// views,
|
views,
|
||||||
// start: calItem.startDate.toJSDate(),
|
start: calItem.startDate.toJSDate(),
|
||||||
// end: calItem.endDate.toJSDate(),
|
end: calItem.endDate.toJSDate(),
|
||||||
// id,
|
id,
|
||||||
// duration,
|
duration,
|
||||||
// videoUrl: url.getFirstValue(),
|
videoUrl: url.getFirstValue(),
|
||||||
// }
|
}
|
||||||
// setData(arr => [...arr, item])
|
setData(arr => [...arr, item])
|
||||||
// } else {
|
} else {
|
||||||
// const item = {
|
const item = {
|
||||||
// title: calItem.summary,
|
title: calItem.summary,
|
||||||
// description: calItem.description,
|
description: calItem.description,
|
||||||
// start: calItem.startDate.toJSDate(),
|
start: calItem.startDate.toJSDate(),
|
||||||
// end: calItem.endDate.toJSDate(),
|
end: calItem.endDate.toJSDate(),
|
||||||
// }
|
}
|
||||||
// setData(arr => [...arr, item])
|
setData(arr => [...arr, item])
|
||||||
// }
|
}
|
||||||
// })
|
})
|
||||||
// )
|
)
|
||||||
|
|
||||||
// setLoading(false)
|
setLoading(false)
|
||||||
// }
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchData()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return { loading, data }
|
||||||
|
}
|
||||||
|
|
||||||
// useEffect(() => {
|
|
||||||
// fetchData()
|
|
||||||
// }, [])
|
|
||||||
|
|
||||||
// return { loading, data }
|
|
||||||
// }
|
|
||||||
|
|
||||||
export const useEventApi = () => {
|
export const useEventApi = () => {
|
||||||
const [data, setData] = useSeriesStore(store => [
|
const [data, setData] = useSeriesStore(store => [store.series, store.setSeries])
|
||||||
store.series,
|
|
||||||
store.setSeries,
|
|
||||||
])
|
|
||||||
const [error, setError] = useState(null)
|
const [error, setError] = useState(null)
|
||||||
const [loading, setLoading] = useState(!!data.length)
|
const [loading, setLoading] = useState(!!data.length)
|
||||||
|
|
||||||
@ -113,12 +111,15 @@ export const useEventApi = () => {
|
|||||||
setLoading(true)
|
setLoading(true)
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
|
||||||
const { data: responseData } = await axios.get(
|
const { data: responseData } = await axios.get(
|
||||||
`${config.EVENTS_API_URL}/events`
|
`${config.EVENTS_API_URL}/events`
|
||||||
)
|
)
|
||||||
setData(responseData)
|
setData(responseData)
|
||||||
|
console.log({ data: responseData })
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
} catch (err) {
|
}
|
||||||
|
catch (err) {
|
||||||
console.log('ERROR')
|
console.log('ERROR')
|
||||||
setError(err)
|
setError(err)
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
@ -134,12 +135,7 @@ export const useEventApi = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const usePeertubeApi = async () => {
|
export const usePeertubeApi = async () => {
|
||||||
const {
|
const { currentStream, setCurrentStream, setStreamIsLive, streamIsLive } = useStreamStore(store => store)
|
||||||
currentStream,
|
|
||||||
setCurrentStream,
|
|
||||||
setStreamIsLive,
|
|
||||||
streamIsLive,
|
|
||||||
} = useStreamStore(store => store)
|
|
||||||
|
|
||||||
if (!currentStream) return
|
if (!currentStream) return
|
||||||
|
|
||||||
@ -147,11 +143,10 @@ export const usePeertubeApi = async () => {
|
|||||||
const { peertubeLive } = currentStream
|
const { peertubeLive } = currentStream
|
||||||
if (!peertubeLive || !peertubeLive.id) return
|
if (!peertubeLive || !peertubeLive.id) return
|
||||||
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
data: { state, embedPath },
|
data: { state, embedPath }
|
||||||
} = await axios.get(
|
} = await axios.get(`https://tv.undersco.re/api/v1/videos/${peertubeLive.id}`)
|
||||||
`https://tv.undersco.re/api/v1/videos/${peertubeLive.id}`
|
|
||||||
)
|
|
||||||
|
|
||||||
setStreamIsLive(state.id === 1)
|
setStreamIsLive(state.id === 1)
|
||||||
setCurrentStream({ ...currentStream, embedPath })
|
setCurrentStream({ ...currentStream, embedPath })
|
||||||
@ -161,10 +156,7 @@ export const usePeertubeApi = async () => {
|
|||||||
fetchData()
|
fetchData()
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
useInterval(
|
useInterval(() => {
|
||||||
() => {
|
fetchData()
|
||||||
fetchData()
|
}, streamIsLive ? secondsToMilliseconds(15) : secondsToMilliseconds(1))
|
||||||
},
|
|
||||||
streamIsLive ? secondsToMilliseconds(15) : secondsToMilliseconds(1)
|
|
||||||
)
|
|
||||||
}
|
}
|
0
src/hooks/dom.js
Executable file → Normal file
0
src/hooks/timerHooks.js
Executable file → Normal file
0
src/hooks/utility.js
Executable file → Normal file
0
src/layouts/InfoLayout/index.js
Executable file → Normal file
0
src/layouts/InfoLayout/styles.js
Executable file → Normal file
0
src/layouts/Page/index.js
Executable file → Normal file
0
src/layouts/Page/styles.js
Executable file → Normal file
0
src/pages/404/index.js
Executable file → Normal file
0
src/pages/404/styles.js
Executable file → Normal file
0
src/pages/LoaderLayout/index.js
Executable file → Normal file
0
src/pages/LoaderLayout/styles.js
Executable file → Normal file
0
src/pages/Program/helpers.js
Executable file → Normal file
0
src/pages/Program/index.js
Executable file → Normal file
0
src/pages/Program/styles.js
Executable file → Normal file
32
src/pages/Series/index.js
Executable file → Normal file
@ -14,23 +14,20 @@ const Series = () => {
|
|||||||
const { data } = useEventApi()
|
const { data } = useEventApi()
|
||||||
const pastSeries = []
|
const pastSeries = []
|
||||||
|
|
||||||
const currentSeries = data.series
|
const currentSeries = data.series ? data.series.filter(series => {
|
||||||
? data.series.filter(series => {
|
if (series.episodes.future.length) {
|
||||||
if (series.episodes.future.length) {
|
return true
|
||||||
return true
|
}
|
||||||
}
|
if (series.episodes.past.every(({ beginsOn }) => isFuture(addYears(new Date(beginsOn), 1)))) {
|
||||||
if (
|
return true
|
||||||
series.episodes.past.every(({ beginsOn }) =>
|
}
|
||||||
isFuture(addYears(new Date(beginsOn), 1))
|
|
||||||
)
|
pastSeries.push(series)
|
||||||
) {
|
return false
|
||||||
return true
|
}) : []
|
||||||
}
|
|
||||||
|
console.log({ currentSeries })
|
||||||
|
|
||||||
pastSeries.push(series)
|
|
||||||
return false
|
|
||||||
})
|
|
||||||
: []
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Page title={strings.en.series}>
|
<Page title={strings.en.series}>
|
||||||
@ -51,8 +48,7 @@ const Series = () => {
|
|||||||
<SeriesCard series={series} isPast />
|
<SeriesCard series={series} isPast />
|
||||||
))}
|
))}
|
||||||
</SeriesGrid>
|
</SeriesGrid>
|
||||||
</Fragment>
|
</Fragment>) : null}
|
||||||
) : null}
|
|
||||||
</Content>
|
</Content>
|
||||||
</Page>
|
</Page>
|
||||||
)
|
)
|
||||||
|
0
src/pages/Series/styles.js
Executable file → Normal file
111
src/pages/SeriesPage/index.js
Executable file → Normal file
@ -1,7 +1,7 @@
|
|||||||
/* eslint-disable react/prop-types */
|
/* eslint-disable react/prop-types */
|
||||||
import { h, Fragment } from 'preact'
|
import { h, Fragment } from 'preact'
|
||||||
import { useEffect } from 'preact/hooks'
|
import { useEffect } from 'preact/hooks'
|
||||||
import enGB from 'date-fns/locale/en-GB'
|
import striptags from 'striptags'
|
||||||
|
|
||||||
import { H1, Label } from '../../components/Text'
|
import { H1, Label } from '../../components/Text'
|
||||||
import Markdown from '../../components/Markdown'
|
import Markdown from '../../components/Markdown'
|
||||||
@ -14,7 +14,6 @@ import {
|
|||||||
InfoContent,
|
InfoContent,
|
||||||
Row,
|
Row,
|
||||||
LogosRow,
|
LogosRow,
|
||||||
FooterImage,
|
|
||||||
ActionButton as Button,
|
ActionButton as Button,
|
||||||
TrailerContainer,
|
TrailerContainer,
|
||||||
} from './styles'
|
} from './styles'
|
||||||
@ -27,38 +26,37 @@ const SeriesPage = ({ data }) => {
|
|||||||
const theme = data.theme || defaultTheme
|
const theme = data.theme || defaultTheme
|
||||||
const { orgs } = data
|
const { orgs } = data
|
||||||
|
|
||||||
const credits = data.credits
|
const credits = data.credits ? `
|
||||||
? `
|
|
||||||
## Credits
|
## Credits
|
||||||
${data.credits}
|
${data.credits}
|
||||||
`
|
` : null
|
||||||
: null
|
|
||||||
|
|
||||||
const orgsList = Object.values(orgs || {})
|
const orgsList = Object.values(orgs || {})
|
||||||
|
|
||||||
const footerImages = data?.resources?.filter(({ title }) =>
|
const dateString = `${new Date()}`
|
||||||
title.includes('FOOTER_IMG')
|
let tzShort =
|
||||||
)
|
// Works for the majority of modern browsers
|
||||||
|
dateString.match(/\(([^\)]+)\)$/) ||
|
||||||
|
// IE outputs date strings in a different format:
|
||||||
|
dateString.match(/([A-Z]+) [\d]{4}$/)
|
||||||
|
|
||||||
|
if (tzShort) {
|
||||||
|
// Old Firefox uses the long timezone name (e.g., "Central
|
||||||
|
// Daylight Time" instead of "CDT")
|
||||||
|
tzShort = tzShort[1].match(/[A-Z]/g).join('')
|
||||||
|
}
|
||||||
|
|
||||||
const links = data.links.length ? splitArray(data.links, 2) : null
|
const links = data.links.length ? splitArray(data.links, 2) : null
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Page title={data.title} theme={data.theme} withHeader={false}>
|
<Page title={data.title} theme={data.theme} withHeader={false}>
|
||||||
<InfoLayout
|
<InfoLayout title={data.title} subtitle={data.subtitle} image={data.image} theme={theme}>
|
||||||
title={data.title}
|
|
||||||
subtitle={data.subtitle}
|
|
||||||
image={data.image}
|
|
||||||
theme={theme}
|
|
||||||
>
|
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<InfoContent>
|
<InfoContent>
|
||||||
<H1>{data.title}:</H1>
|
<H1>{data.title}:</H1>
|
||||||
<H1>{data.subtitle}</H1>
|
<H1>{data.subtitle}</H1>
|
||||||
{data.description ? (
|
{data.description ? <Markdown withLinebreaks theme={theme}>{data.description}</Markdown> : null}
|
||||||
<Markdown withLinebreaks theme={theme}>
|
|
||||||
{data.description}
|
|
||||||
</Markdown>
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
{data.trailer ? (
|
{data.trailer ? (
|
||||||
<TrailerContainer>
|
<TrailerContainer>
|
||||||
@ -66,27 +64,30 @@ const SeriesPage = ({ data }) => {
|
|||||||
</TrailerContainer>
|
</TrailerContainer>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
{links
|
{links ?
|
||||||
? links.map(linkRow => (
|
links.map(linkRow => <Row>
|
||||||
<Row>
|
{linkRow.map(link => (
|
||||||
{linkRow.map(link => (
|
<a
|
||||||
<a
|
href={link.resourceUrl}
|
||||||
href={link.resourceUrl}
|
target="_blank"
|
||||||
target="_blank"
|
rel="noopener noreferrer"
|
||||||
rel="noopener noreferrer"
|
>
|
||||||
>
|
<Button>{link.summary}</Button>
|
||||||
<Button>{link.summary}</Button>
|
</a>
|
||||||
</a>
|
))}
|
||||||
))}
|
</Row>) : null
|
||||||
</Row>
|
}
|
||||||
))
|
|
||||||
: null}
|
|
||||||
</InfoContent>
|
</InfoContent>
|
||||||
{data.episodes.future.length ? (
|
{data.episodes.future.length ? (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<Title>{translations.en.program}:</Title>
|
<Title>{translations.en.program}:</Title>
|
||||||
{data.episodes.future.map(feeditem => (
|
{data.episodes.future.map(feeditem => (
|
||||||
<EpisodeCard theme={theme} key={feeditem.start} {...feeditem} />
|
<EpisodeCard
|
||||||
|
theme={theme}
|
||||||
|
key={feeditem.start}
|
||||||
|
tzShort={tzShort}
|
||||||
|
{...feeditem}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
</Fragment>
|
</Fragment>
|
||||||
) : null}
|
) : null}
|
||||||
@ -104,34 +105,20 @@ const SeriesPage = ({ data }) => {
|
|||||||
))}
|
))}
|
||||||
</Fragment>
|
</Fragment>
|
||||||
) : null}
|
) : null}
|
||||||
{credits ? (
|
{credits ? <InfoContent>
|
||||||
<InfoContent>
|
<Markdown theme={theme}>{credits}</Markdown>
|
||||||
<Markdown theme={theme}>{credits}</Markdown>
|
</InfoContent> : null}
|
||||||
</InfoContent>
|
|
||||||
) : null}
|
|
||||||
</Fragment>
|
</Fragment>
|
||||||
{orgsList.length ? (
|
{orgsList.length ? <LogosRow $wrap>
|
||||||
<LogosRow $wrap>
|
{orgsList.map((org, index) => (
|
||||||
{orgsList.map((org, index) => (
|
<Fragment>
|
||||||
<Fragment>
|
<a href={org.orgUrl}>
|
||||||
<img src={org.logoUrl} alt={`${org.orgName} logo`} />
|
<img src={org.logoUrl} alt={`${org.orgName} logo`} />
|
||||||
{orgsList.length < 4 !== 1 &&
|
</a>
|
||||||
orgsList.length < 4 &&
|
{orgsList.length === 2 && index + 1 !== orgsList.length ? <Label colour={theme.foreground}>{'//'}</Label> : null}
|
||||||
index + 1 !== orgsList.length ? (
|
</Fragment>
|
||||||
<Label colour={theme.foreground}>{'//'}</Label>
|
))}
|
||||||
) : null}
|
</LogosRow> : null}
|
||||||
</Fragment>
|
|
||||||
))}
|
|
||||||
</LogosRow>
|
|
||||||
) : null}
|
|
||||||
{footerImages.length
|
|
||||||
? footerImages.map(image => (
|
|
||||||
<FooterImage
|
|
||||||
src={image.resourceUrl}
|
|
||||||
alt={`${image.orgName} logo`}
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
: null}
|
|
||||||
</InfoLayout>
|
</InfoLayout>
|
||||||
</Page>
|
</Page>
|
||||||
)
|
)
|
||||||
|
93
src/pages/SeriesPage/styles.js
Executable file → Normal file
@ -1,24 +1,23 @@
|
|||||||
import { h, Fragment } from 'preact'
|
import { h, Fragment } from 'preact'
|
||||||
import { zonedTimeToUtc, utcToZonedTime, format } from 'date-fns-tz'
|
import { zonedTimeToUtc, utcToZonedTime, format } from 'date-fns-tz'
|
||||||
import enGB from 'date-fns/locale/en-GB'
|
|
||||||
import { bool, func, instanceOf, string } from 'prop-types'
|
import { bool, func, instanceOf, string } from 'prop-types'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
|
import { colours, textSizes } from '../../assets/theme'
|
||||||
|
import config from '../../data/config'
|
||||||
|
|
||||||
import Markdown from '../../components/Markdown'
|
import Markdown from '../../components/Markdown'
|
||||||
import Logo from '../../components/Logo'
|
import Logo from '../../components/Logo'
|
||||||
|
import translations from '../../data/strings'
|
||||||
|
import CrossSvg from '../../components/Svg/Cross'
|
||||||
|
|
||||||
import { H1, H2, Span, Label } from '../../components/Text'
|
import { H1, H2, Span, Label } from '../../components/Text'
|
||||||
import Link from '../../components/Link'
|
import Link from '../../components/Link'
|
||||||
import Button from '../../components/Button'
|
import Button from '../../components/Button'
|
||||||
import CrossSvg from '../../components/Svg/Cross'
|
import { slugify } from '../../helpers/string'
|
||||||
import { ButtonsRows } from '../../components/EpisodeCard'
|
import { ButtonsRows } from '../../components/EpisodeCard'
|
||||||
|
|
||||||
import translations from '../../data/strings'
|
|
||||||
import { colours, textSizes } from '../../assets/theme'
|
|
||||||
import config from '../../data/config'
|
|
||||||
import { slugify } from '../../helpers/string'
|
|
||||||
|
|
||||||
export const TrailerContainer = styled.div`
|
export const TrailerContainer = styled.div`
|
||||||
height: 21em;
|
height: 22em;
|
||||||
border: 1px solid ${colours.midnightDarker};
|
border: 1px solid ${colours.midnightDarker};
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
|
|
||||||
@ -40,6 +39,7 @@ export const TrailerContainer = styled.div`
|
|||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
|
|
||||||
export const ActionButton = styled(Button)`
|
export const ActionButton = styled(Button)`
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
`
|
`
|
||||||
@ -48,7 +48,7 @@ export const Row = styled.div`
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
margin-bottom: 32px;
|
margin-bottom: 32px;
|
||||||
flex-wrap: ${props => (props.$wrap ? 'wrap' : 'nowrap')};
|
flex-wrap: ${props => props.$wrap ? 'wrap' : 'nowrap'};
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
@ -60,29 +60,23 @@ export const Row = styled.div`
|
|||||||
`
|
`
|
||||||
|
|
||||||
export const LogosRow = styled(Row)`
|
export const LogosRow = styled(Row)`
|
||||||
align-items: center;
|
align-items: center;
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 32px 0;
|
padding: 32px 0 ;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
width: auto;
|
width: auto;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
|
|
||||||
&[href]:hover {
|
&[href]:hover {
|
||||||
opacity: 0.7;
|
opacity: 0.7
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
img {
|
||||||
max-height: 42px;
|
height: 64px;
|
||||||
width: 25%;
|
}
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|
||||||
export const FooterImage = styled.img`
|
|
||||||
max-width: 600px;
|
|
||||||
padding: 32px 0;
|
|
||||||
`
|
`
|
||||||
|
|
||||||
export const InfoContent = styled.div`
|
export const InfoContent = styled.div`
|
||||||
@ -173,32 +167,25 @@ export const EpisodeCard = ({
|
|||||||
url,
|
url,
|
||||||
hasPassed,
|
hasPassed,
|
||||||
videoUrl,
|
videoUrl,
|
||||||
|
onClickButton,
|
||||||
|
tzShort,
|
||||||
theme,
|
theme,
|
||||||
peertubeReplay,
|
peertubeReplay,
|
||||||
id,
|
id
|
||||||
}) => {
|
}) => {
|
||||||
const startDate = new Date(beginsOn)
|
const startDate = new Date(beginsOn)
|
||||||
|
const utcDate = zonedTimeToUtc(startDate, 'Europe/Berlin')
|
||||||
|
|
||||||
const { timeZone } = Intl.DateTimeFormat().resolvedOptions() // client timezone eg. 'Europe/Berlin'
|
const { timeZone } = Intl.DateTimeFormat().resolvedOptions()
|
||||||
const utcDate = zonedTimeToUtc(startDate, timeZone) // convert the start date to UTC
|
|
||||||
|
|
||||||
const zonedDate = utcToZonedTime(utcDate, timeZone)
|
const zonedDate = utcToZonedTime(utcDate, timeZone)
|
||||||
|
|
||||||
const timezoneLabel = format(
|
|
||||||
zonedDate,
|
|
||||||
hasPassed ? 'dd/MM/yy' : 'do LLLL y // HH:mm zzz',
|
|
||||||
{
|
|
||||||
timeZone,
|
|
||||||
locale: enGB,
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<VCWrapper id={id}>
|
<VCWrapper id={id}>
|
||||||
<DateLabel size={textSizes.lg} colour={theme.foreground}>
|
<DateLabel size={textSizes.lg} colour={theme.foreground}>
|
||||||
{`${hasPassed ? translations.en.streamDatePast : ''}`}
|
{`${hasPassed ? translations.en.streamDatePast : ''}`}
|
||||||
<Span bold colour={theme.foreground}>
|
<Span bold colour={theme.foreground}>
|
||||||
{timezoneLabel}
|
{hasPassed
|
||||||
|
? format(zonedDate, 'dd/MM/yy')
|
||||||
|
: `${format(zonedDate, 'do LLLL y // HH:mm')} ${tzShort}`}
|
||||||
</Span>
|
</Span>
|
||||||
</DateLabel>
|
</DateLabel>
|
||||||
{videoUrl && hasPassed ? (
|
{videoUrl && hasPassed ? (
|
||||||
@ -212,25 +199,11 @@ export const EpisodeCard = ({
|
|||||||
<VCImg src={image} alt="" />
|
<VCImg src={image} alt="" />
|
||||||
</Fragment>
|
</Fragment>
|
||||||
)}
|
)}
|
||||||
<Markdown withLinebreaks theme={theme}>
|
<Markdown theme={theme}>{description}</Markdown>
|
||||||
{description}
|
|
||||||
</Markdown>
|
|
||||||
{hasPassed ? (
|
{hasPassed ? (
|
||||||
<a href={peertubeReplay.url || url}>
|
<a href={peertubeReplay.url || url}><Button>{peertubeReplay.url ? translations.en.watchEpisode : translations.en.eventDetails}</Button></a>
|
||||||
<Button>
|
|
||||||
{peertubeReplay.url
|
|
||||||
? translations.en.watchEpisode
|
|
||||||
: translations.en.eventDetails}
|
|
||||||
</Button>
|
|
||||||
</a>
|
|
||||||
) : (
|
) : (
|
||||||
<ButtonsRows
|
<ButtonsRows title={title} description={description} beginsOn={beginsOn} endsOn={endsOn} url={url} />
|
||||||
title={title}
|
|
||||||
description={description}
|
|
||||||
beginsOn={beginsOn}
|
|
||||||
endsOn={endsOn}
|
|
||||||
url={url}
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
</VCWrapper>
|
</VCWrapper>
|
||||||
)
|
)
|
||||||
|
0
src/store/index.js
Executable file → Normal file
0
static/android-chrome-192x192.png
Executable file → Normal file
Before Width: | Height: | Size: 82 KiB After Width: | Height: | Size: 82 KiB |
0
static/apple-touch-icon.png
Executable file → Normal file
Before Width: | Height: | Size: 72 KiB After Width: | Height: | Size: 72 KiB |
0
static/browserconfig.xml
Executable file → Normal file
0
static/favicon-16x16.png
Executable file → Normal file
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
0
static/favicon-32x32.png
Executable file → Normal file
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
0
static/favicon.ico
Executable file → Normal file
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
0
static/logo.png
Executable file → Normal file
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 41 KiB |
0
static/meta.png
Executable file → Normal file
Before Width: | Height: | Size: 232 KiB After Width: | Height: | Size: 232 KiB |
0
static/mstile-150x150.png
Executable file → Normal file
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
0
static/safari-pinned-tab.svg
Executable file → Normal file
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |