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

View File

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

View File

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

View File

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