diff options
| -rw-r--r-- | animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js | 66 | ||||
| -rw-r--r-- | animism-align/frontend/app/views/viewer/player/player.transcript.css | 50 |
2 files changed, 111 insertions, 5 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 2d70038..943b02a 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 @@ -8,6 +8,10 @@ export const Intro = ({ paragraph, media, currentParagraph, currentAnnotation, o const style = { backgroundImage: 'url(' + item.settings.file.url + ')', } + const nameLookup = Object.values(media.lookup).reduce((a,b) => { + a.add(b.author) + return a + }, new Set) return ( <div> <div @@ -20,14 +24,68 @@ export const Intro = ({ paragraph, media, currentParagraph, currentAnnotation, o </div> </div> <div className='schedule'> - <div>Schedule</div> + <div className='schedule-title'>Schedule</div> + {SCHEDULE.map(row => ( + <div className={row.active ? 'schedule-row active' : 'schedule-row inactive'} key={row.id}> + <div className='schedule-date'> + {row.date} + </div> + <div className='schedule-title'> + {'Episode '}{row.id}{': '} + <i>{row.title}</i> + </div> + </div> + ))} + </div> + <div className='credits'> + <div> + <div className='credits-title'> + Curator + </div> + <div className='credits-info'> + {ABOUT.curator} + </div> + </div> + <div> + <div className='credits-title'> + Authors + </div> + <div className='credits-info'> + {ABOUT.authors} + </div> + </div> + <div> + <div className='credits-title'> + Artists + </div> + <div className='credits-info'> + {Array.from(nameLookup).sort().join("\n")} + </div> + </div> <div> + <div className='credits-title'> + Sponsors + </div> + <div className='credits-info'> + {ABOUT.sponsors} + </div> </div> </div> </div> ) } -const schedule = [ - { date: 'Mon 00-00, 2020', title: 'Episode 1: ' }, -]
\ No newline at end of file +const SCHEDULE = [ + { id: 1, active: true, date: 'Mon 00-00, 2020', title: 'Animist Origins & Export Projections' }, + { id: 2, active: false, date: 'Mon 00-00, 2020', title: 'Animation & The Mummy Complex: The Museum' }, + { id: 3, active: false, date: 'Mon 00-00, 2020', title: 'The Extirpation of Animism' }, + { id: 4, active: false, date: 'Mon 00-00, 2020', title: 'Media History & Animism\'s Continuous Displacement' }, + { id: 5, active: false, date: 'Mon 00-00, 2020', title: 'Soul-Design or Liminal Cosmologies' }, + { id: 6, active: false, date: 'Mon 00-00, 2020', title: 'Animal, Mythic and Other' }, +] + +const ABOUT = { + curator: "Anselm Franke", + authors: "Anselm Franke\nAmal Issa", + sponsors: "This\nThis\nThis", +}
\ No newline at end of file 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 cae31ca..96a36fb 100644 --- a/animism-align/frontend/app/views/viewer/player/player.transcript.css +++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css @@ -169,4 +169,52 @@ font-size: 12vh; line-height: 1; text-align: center; -}
\ No newline at end of file +} +.schedule { + width: 45rem; + display: flex; + flex-direction: column; + margin: 0 auto; + padding-top: 1.5rem; +} +.schedule > div { + padding: 0.375rem 0; +} +.schedule-row { + display: flex; + flex-direction: row; + align-items: flex-start; + border-top: 1px solid; +} +.schedule-row.inactive { + color: #888; +} +.schedule-date { + width: 10rem; +} +.schedule-title { + width: 35rem; +} +.credits { + display: flex; + flex-direction: row; + margin: 0 auto; + width: 45rem; + padding-top: 1rem; + padding-bottom: 1rem; +} +.credits > div { + width: 10.5rem; + margin-right: 1rem; +} +.credits > div:last-child { + margin-right: 0; +} +.credits-title { + padding: 0.375rem 0; + border-bottom: 1px solid; +} +.credits-info { + padding: 0.375rem 0; + white-space: pre-line; +} |