2 files changed, 50 insertions, 17 deletions

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>
           )
         })}
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css
index b1acc33..9b6e3da 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -310,28 +310,40 @@
   margin: 0 auto;
   padding-top: 2.5rem;
 }
-.schedule > div {
-  padding: 0.375rem 0;
-}
 .schedule-row {
+  position: relative;
   display: flex;
   flex-direction: row;
   align-items: flex-start;
-  border-bottom: 1px solid;
+  border-top: 1px solid;
+  padding: 0.375rem 0;
 }
-.schedule-row:last-child {
+.schedule > div:last-child .schedule-row {
   border-bottom: 0;
 }
+.schedule-row.active {
+  cursor: pointer;
+}
 .schedule-row.inactive {
   color: #888;
 }
 .schedule-date {
-  width: 10rem;
+  width: 15rem;
 }
 .schedule-title {
-  width: 35rem;
+  width: 32rem;
+  padding-right: 3rem;
 }
 .schedule-heading {
-  border-bottom: 1px solid;
+  padding: 0.375rem 0;
 }
-
+.schedule-row .arrow {
+  position: absolute;
+  top: 0rem;
+  right: 0;
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.schedule .credits {
+  padding-top: 0rem;
+}
\ No newline at end of file