diff options
Diffstat (limited to 'animism-align/frontend/app')
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 |