added video embed for archive episodes

This commit is contained in:
Benjamin Jones 2021-05-26 15:47:59 +02:00
parent 0ae9e00060
commit 4b1ede7130
4 changed files with 39 additions and 27 deletions

View File

@ -7,7 +7,7 @@ import { H1 } from '../Text'
import Markdown from '../Markdown' import Markdown from '../Markdown'
import translations from '../../data/strings' import translations from '../../data/strings'
import InfoLayout from '../InfoLayout' import InfoLayout from '../InfoLayout'
import TrailerEmbed from '../VideoEmbed' import VideoEmbed from '../VideoEmbed'
import { import {
VideoCard, VideoCard,
Title, Title,
@ -26,9 +26,16 @@ import config from '../../data/config'
import trailerThumb from '../../assets/img/main_thumb.png' import trailerThumb from '../../assets/img/main_thumb.png'
const Info = ({ data, loading, infoActive, setInfoActive, currentVideo }) => { const Info = ({ data, loading, infoActive, setInfoActive, currentVideo }) => {
const [trailerActive, setTrailerActive] = useState(false) const trailerUrl = `https://www.youtube-nocookie.com/embed/${config.seriesTrailerId}?autoplay=1&vq=hd1080`
const toggleTrailerActive = () => const [embedURL, setEmbedUrl] = useState('')
setTrailerActive(trailerState => !trailerState)
const onClickTrailerButton = () => {
setEmbedUrl(trailerUrl)
}
const deactivateEmbed = () => {
setEmbedUrl('')
}
const pastStreams = const pastStreams =
data && data.length data && data.length
? data.filter(feeditem => isPast(new Date(feeditem.end))) ? data.filter(feeditem => isPast(new Date(feeditem.end)))
@ -52,12 +59,9 @@ const Info = ({ data, loading, infoActive, setInfoActive, currentVideo }) => {
return ( return (
<InfoLayout loading={loading}> <InfoLayout loading={loading}>
{trailerActive && ( {embedURL ? (
<TrailerEmbed <VideoEmbed onClose={deactivateEmbed} url={embedURL} />
onClose={toggleTrailerActive} ) : null}
url={config.seriesTrailer}
/>
)}
{infoActive && ( {infoActive && (
<CrossSvg size="64" onClick={() => setInfoActive(false)} /> <CrossSvg size="64" onClick={() => setInfoActive(false)} />
)} )}
@ -68,7 +72,7 @@ const Info = ({ data, loading, infoActive, setInfoActive, currentVideo }) => {
<H1>Finding the Future in Unexpected Places</H1> <H1>Finding the Future in Unexpected Places</H1>
<Markdown withLinebreaks>{intro}</Markdown> <Markdown withLinebreaks>{intro}</Markdown>
<Trailer imgSrc={trailerThumb} onClick={toggleTrailerActive} /> <Trailer imgSrc={trailerThumb} onClick={onClickTrailerButton} />
<Row> <Row>
<a <a
@ -107,7 +111,14 @@ const Info = ({ data, loading, infoActive, setInfoActive, currentVideo }) => {
<Fragment> <Fragment>
<Title>{translations.en.pastStream}:</Title> <Title>{translations.en.pastStream}:</Title>
{pastStreams.map(feeditem => ( {pastStreams.map(feeditem => (
<VideoCard key={feeditem.start} hasPassed {...feeditem} /> <VideoCard
key={feeditem.start}
hasPassed
onClickButton={() =>
setEmbedUrl(`${config.peertube_root}${feeditem.embedPath}`)
}
{...feeditem}
/>
))} ))}
</Fragment> </Fragment>
) : null} ) : null}

View File

@ -183,6 +183,7 @@ export const VideoCard = ({
previewPath, previewPath,
hasPassed, hasPassed,
videoUrl, videoUrl,
onClickButton,
}) => { }) => {
const startDate = new Date(start) const startDate = new Date(start)
const utcDate = zonedTimeToUtc(startDate, 'Europe/Berlin') const utcDate = zonedTimeToUtc(startDate, 'Europe/Berlin')
@ -211,17 +212,19 @@ export const VideoCard = ({
</Fragment> </Fragment>
)} )}
<P>{description}</P> <P>{description}</P>
<a {hasPassed ? (
href={ <Button onClick={onClickButton}>{translations.en.watchEpisode}</Button>
hasPassed ) : (
? videoUrl <a
: `webcal://cloud.undersco.re/remote.php/dav/public-calendars/${config.calendarId}/?export` href={
} hasPassed
> ? videoUrl
<Button> : `webcal://cloud.undersco.re/remote.php/dav/public-calendars/${config.calendarId}/?export`
{hasPassed ? translations.en.watchEpisode : translations.en.subEvent} }
</Button> >
</a> <Button>{translations.en.subEvent}</Button>
</a>
)}
</VCWrapper> </VCWrapper>
) )
} }

View File

@ -14,7 +14,6 @@ const Video = ({ url, onClose }) => {
overlayTimeout.current = null overlayTimeout.current = null
setOverlayActiveState(true) setOverlayActiveState(true)
console.log('overlayTimeout.current', overlayTimeout.current)
overlayTimeout.current = setTimeout( overlayTimeout.current = setTimeout(
() => setOverlayActiveState(false), () => setOverlayActiveState(false),
1500 1500
@ -29,7 +28,7 @@ const Video = ({ url, onClose }) => {
onMouseMove={activateOverlay} onMouseMove={activateOverlay}
width="560" width="560"
height="315" height="315"
src="https://www.youtube-nocookie.com/embed/b-JQ5Bo4JnI?autoplay=1&vq=hd1080" src={url}
frameborder="0" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen allowfullscreen

View File

@ -1,7 +1,6 @@
export default { export default {
peertube_root: 'https://tv.undersco.re', peertube_root: 'https://tv.undersco.re',
seriesTrailer: seriesTrailerId: 'b-JQ5Bo4JnI',
'https://tv.undersco.re/videos/embed/5e29327c-41de-4b48-b567-ee28b181336f',
calendarId: '9FzomgAfidHWCQcx', calendarId: '9FzomgAfidHWCQcx',
chat: { chat: {