From 9ed29c74de68a335e85cc589983d30950a0ba044 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 14 Oct 2020 19:38:27 +0200
Subject: credits in columns

---
 .../player/components.inline/inline.utility.js     | 146 +++------------------
 1 file changed, 15 insertions(+), 131 deletions(-)

(limited to 'animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js')

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)
-- 
cgit v1.2.3-70-g09d2