diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js')
| -rw-r--r-- | animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js | 146 |
1 files changed, 15 insertions, 131 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 4235ed1..c1d4efb 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,7 @@ import React, { Component } from 'react' import { connect } from 'react-redux' import { MediaCitation } from '../components.media' -import { Arrow } from '../../nav/viewer.icons' +import { CreditsColumns } from 'app/views/viewer/checklist/credits.components' export const Intro = ({ paragraph, media, onAnnotationClick }) => { const annotation = paragraph.annotations[0] @@ -42,15 +42,22 @@ const ScheduleComponent = ({ episodes }) => { return ( <div> <div className="schedule-about"> - {'Animism on e-flux.com is the ninth iteration of the exhibition and overall '} - {'research project presented at Extra City and MuHKA, Antwerp, 2010; Kunsthalle '} - {'Bern, 2010; Generali Foundation, Vienna, 2011; the Haus der Kulturen der Welt, '} - {'Berlin, 2012; e-flux, New York, 2012; OCAT Shenzhen, 2013; Times Museum Seoul, '} - {'2013; and Ashkal Alwan, Beirut, 2014. Presented here in its digital iteration, '} + <i>Animism</i> + {' on '} + <a href="https://e-flux.com/">e-flux.com</a> + {' is the ninth iteration of the exhibition and overall '} + {'research project presented at Museum of Contemporary Art Antwerp (M HKA) and Extra City, '} + {'Antwerp, 2010, Kunsthalle Bern, 2010, '} + {'Generali Foundation, Vienna, 2011, Haus der Kulturen der Welt, '} + {'Berlin, 2012, e-flux, New York, 2012, OCT Contemporary Art Terminal (OCAT) Shenzhen, 2013, '} + {'Ilmin Museum of Art, Seoul, 2013, '} + {'and Ashkal Alwan, Beirut, 2014.'} + <br/><br/> + {'Presented here in its digital iteration, '} {'the exhibition will be released in four episodes starting October 2020.'} </div> <div className='schedule'> - <div className='schedule-heading'>Schedule</div> + <div className='schedule-heading'>Episodes</div> {episodes.order.map(id => { const episode = episodes.lookup[id] return ( @@ -66,129 +73,7 @@ const ScheduleComponent = ({ episodes }) => { ) })} </div> - <div className='credits'> - <div> - <div className='credits-title'> - Curator - </div> - <div className='credits-info'> - {currentEpisode.curator} - </div> - </div> - <div> - <div className='credits-title'> - Author - </div> - <div className='credits-info'> - {currentEpisode.author} - </div> - </div> - <div> - <div className='credits-title'> - Artists - </div> - <div className='credits-info'> - {currentEpisode.artists} - </div> - </div> - </div> - </div> - ) -} - -const CreditsComponent = ({ episodes, venues }) => { - const currentEpisode = episodes.lookup[episodes.order[0]].settings - // const [ open, setOpen ] = React.useState(-1) - const lines = currentEpisode.credits.split("\n").map((s, i) => { - if (s[0] === "#") { - return ( - <div className='credits-title' key={i}> - {s.replace("#", "").trim()} - </div> - ) - } - return ( - <div - key={i} - dangerouslySetInnerHTML={{ __html: s || " " }} - /> - ) - }) - return ( - <div className='site-credits'> - <div className='site-lines'> - {lines} - </div> - <div className='credits-title'> - Previous venues - </div> - {venues.order.map(id => ( - <CreditsVenue - key={id} - venue={venues.lookup[id]} - /> - ))} - </div> - ) -} - -const CreditsVenue = ({ venue }) => { - const [ open, setOpen ] = React.useState(-1) - const isOpen = open === venue.id - const curators = venue.settings.curator.trim().split('\n') - const artists = venue.settings.artists.trim().split('\n') - const publication_heading = venue.settings.publication_heading - const publication = venue.settings.publication.trim().split('\n') - return ( - <div className={isOpen ? 'venue open' : 'venue'}> - <div className='venue-header' onClick={() => setOpen(isOpen ? -1 : venue.id)}> - <div> - {venue.title}<br /> - {venue.date} - </div> - <Arrow type={isOpen ? 'up' : 'down'} /> - </div> - {isOpen && ( - <div className='venue-info credits'> - <div> - <div className='credits-title'> - {curators.length > 1 ? 'Curators' : 'Curator'} - </div> - <div className='credits-info'> - {curators.map((line, i) => ( - <div key={i}>{line}</div> - ))} - </div> - </div> - - <div> - <div className='credits-title'> - Artists - </div> - <div className='credits-info'> - {artists.map((line, i) => ( - <div key={i}>{line}</div> - ))} - </div> - </div> - - {publication.length > 1 && ( - <div> - <div className='credits-title'> - {publication_heading} - </div> - <div className='credits-info'> - {publication.map((line, i) => ( - <div - key={i} - dangerouslySetInnerHTML={{ __html: line || " " }} - /> - ))} - </div> - </div> - )} - </div> - )} + <CreditsColumns lines={currentEpisode.credits} /> </div> ) } @@ -199,4 +84,3 @@ const mapStateToProps = state => ({ }) export const Schedule = connect(mapStateToProps)(ScheduleComponent) -export const Credits = connect(mapStateToProps)(CreditsComponent) |