From c7bbea7cfba2c961a48f507b0ac55956a2e84d22 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 22 Oct 2020 13:53:26 +0200
Subject: episodes UI

---
 .../player/components.inline/inline.utility.js     | 37 +++++++++++++++++-----
 1 file changed, 29 insertions(+), 8 deletions(-)

(limited to 'animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js')

diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js
index c1d4efb..17d0990 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js
@@ -2,7 +2,8 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
 import { MediaCitation } from '../components.media'
-import { CreditsColumns } from 'app/views/viewer/checklist/credits.components'
+import { Arrow } from 'app/views/viewer/nav/viewer.icons'
+import { CreditsColumns, ArtistColumns } from 'app/views/viewer/checklist/credits.components'
 
 export const Intro = ({ paragraph, media, onAnnotationClick }) => {
   const annotation = paragraph.annotations[0]
@@ -38,6 +39,7 @@ export const Intro = ({ paragraph, media, onAnnotationClick }) => {
 }
 
 const ScheduleComponent = ({ episodes }) => {
+  const [ open, setOpen ] = React.useState(-1)
   const currentEpisode = episodes.lookup[episodes.order[0]].settings
   return (
     <div>
@@ -60,15 +62,34 @@ const ScheduleComponent = ({ episodes }) => {
         <div className='schedule-heading'>Episodes</div>
         {episodes.order.map(id => {
           const episode = episodes.lookup[id]
+          const isOpen = episode.id === open
+          let className = 'schedule-row'
+          if (episode.is_live) {
+            className += ' active'
+          } else {
+            className += ' inactive'
+          }
+          if (open === episode.id) {
+            className += ' open'
+          }
           return (
-            <div className={episode.is_live ? 'schedule-row active' : 'schedule-row inactive'} key={episode.id}>
-              <div className='schedule-date'>
-                {episode.release_date}
-              </div>
-              <div className='schedule-title'>
-                {'Episode '}{episode.episode_number}{': '}
-                <i>{episode.title}</i>
+            <div key={episode.id}>
+              <div
+                className={className}
+                onClick={() => episode.is_live && setOpen(isOpen ? -1 : episode.id)}
+              >
+                <div className='schedule-date'>
+                  {episode.release_date}
+                </div>
+                <div className='schedule-title'>
+                  {'Episode '}{episode.episode_number}{': '}
+                  <i>{episode.title}</i>
+                </div>
+                {episode.is_live && <Arrow type={isOpen ? 'up' : 'down'} />}
               </div>
+              {isOpen &&
+                <ArtistColumns artists={episode.settings.artists} />
+              }
             </div>
           )
         })}
-- 
cgit v1.2.3-70-g09d2