added video embed for archive episodes

src/components/Info/index.js

@@ -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 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 =
     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 && (
+      {embedURL ? (
-        <TrailerEmbed
+        <VideoEmbed onClose={deactivateEmbed} url={embedURL} />
-          onClose={toggleTrailerActive}
+      ) : null}
-          url={config.seriesTrailer}
-        />
-      )}
       {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}

src/components/Info/styles.js

@@ -183,6 +183,7 @@ export const VideoCard = ({
   previewPath,
   hasPassed,
   videoUrl,
+  onClickButton,
 }) => {
   const startDate = new Date(start)
   const utcDate = zonedTimeToUtc(startDate, 'Europe/Berlin')
@@ -211,17 +212,19 @@ export const VideoCard = ({
         </Fragment>
       )}
       <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>
   )
 }

src/components/VideoEmbed/index.js

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

src/data/config.js

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