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

---
 animism-align/frontend/app/utils/viewer.utils.js   |  2 +-
 .../views/paragraph/components/paragraph.list.js   |  1 +
 .../views/viewer/checklist/credits.components.js   | 34 ++++++++++++--------
 .../player/components.inline/inline.utility.js     | 37 +++++++++++++++++-----
 .../app/views/viewer/player/player.transcript.css  | 30 ++++++++++++------
 5 files changed, 73 insertions(+), 31 deletions(-)

diff --git a/animism-align/frontend/app/utils/viewer.utils.js b/animism-align/frontend/app/utils/viewer.utils.js
index ef975dc..9cf8e8f 100644
--- a/animism-align/frontend/app/utils/viewer.utils.js
+++ b/animism-align/frontend/app/utils/viewer.utils.js
@@ -32,7 +32,7 @@ export const parseCredits = lines => {
 }
 
 export const groupColumns = (lines, cols) => {
-  const perColumn = Math.floor(lines.length / cols)
+  const perColumn = Math.ceil(lines.length / cols)
   const columns = []
   for (let i = 0; i < cols; i++) {
     columns.push(lines.slice(i * perColumn, (i+1) * perColumn))
diff --git a/animism-align/frontend/app/views/paragraph/components/paragraph.list.js b/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
index 8ce58f8..dadf8c8 100644
--- a/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
+++ b/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
@@ -37,6 +37,7 @@ class ParagraphList extends Component {
   setCurrentAnnotation(paragraph, play_ts) {
     const { id: currentParagraph, annotations } = paragraph
     const possibleAnnotations = annotations.filter(a => a.type === 'sentence')
+    if (!possibleAnnotations.length) return
     let currentAnnotation
     let annotation
     let i = 0, next_i
diff --git a/animism-align/frontend/app/views/viewer/checklist/credits.components.js b/animism-align/frontend/app/views/viewer/checklist/credits.components.js
index de24639..9e0b6f2 100644
--- a/animism-align/frontend/app/views/viewer/checklist/credits.components.js
+++ b/animism-align/frontend/app/views/viewer/checklist/credits.components.js
@@ -55,7 +55,6 @@ export const CreditsColumns = ({ lines }) => {
 const CreditsVenue = ({ venue, open, setOpen }) => {
   // const [ open, setOpen ] = React.useState(-1)
   const isOpen = open === venue.id
-  const artistGroups = groupColumns(venue.settings.artists.trim().split('\n'), 4)
   const creditSections = parseCredits(venue.settings.credits)
   return (
     <div className={isOpen ? 'venue open' : 'venue'}>
@@ -68,18 +67,7 @@ const CreditsVenue = ({ venue, open, setOpen }) => {
       </div>
       {isOpen && (
         <div className='venue-info'>
-          <div className='credits-title'>
-            Artists
-          </div>
-          <div className="credits">
-            {artistGroups.map((group, i) => (
-              <div className='credits-info' key={i}>
-                {group.map((line, j) => (
-                  <div key={j}>{line}</div>
-                ))}
-              </div>
-            ))}
-          </div>
+          <ArtistColumns artists={venue.settings.artists} />
           {creditSections.map(section => (
             <div key={section.i}>
               <div className='credits-title'>
@@ -100,3 +88,23 @@ const CreditsVenue = ({ venue, open, setOpen }) => {
     </div>
   )
 }
+
+export const ArtistColumns = ({ artists }) => {
+  const artistGroups = groupColumns(artists.trim().split('\n'), 4)
+  return (
+    <div>
+      <div className='credits-title'>
+        Artists
+      </div>
+      <div className="credits">
+        {artistGroups.map((group, i) => (
+          <div className='credits-info' key={i}>
+            {group.map((line, j) => (
+              <div key={j}>{line}</div>
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
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
-- 
cgit v1.2.3-70-g09d2