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

---
 animism-align/frontend/app/constants.js            |   2 +-
 animism-align/frontend/app/utils/viewer.utils.js   |  19 +++
 .../app/views/episode/components/episode.form.js   |  16 ---
 .../app/views/venue/components/venue.form.js       |  25 ----
 animism-align/frontend/app/views/venue/venue.css   |   7 +-
 .../views/viewer/checklist/credits.components.js   | 112 ++++++++++++++++
 .../app/views/viewer/checklist/credits.content.js  |   4 +-
 .../app/views/viewer/checklist/credits.css         |  82 ++++++++++++
 .../player/components.inline/inline.utility.js     | 146 +++------------------
 .../app/views/viewer/player/player.transcript.css  |  78 +----------
 .../frontend/app/views/viewer/viewer.container.js  |   1 +
 11 files changed, 242 insertions(+), 250 deletions(-)
 create mode 100644 animism-align/frontend/app/views/viewer/checklist/credits.components.js
 create mode 100644 animism-align/frontend/app/views/viewer/checklist/credits.css

diff --git a/animism-align/frontend/app/constants.js b/animism-align/frontend/app/constants.js
index a9f51ec..1cf26cd 100644
--- a/animism-align/frontend/app/constants.js
+++ b/animism-align/frontend/app/constants.js
@@ -108,4 +108,4 @@ export const GROWL = {
   REACHED_END_OF_FIRST_SECTION: "Click \"Next\" to advance the exhibition.",
 }
 
-export const VIDEO_SCRUBBER_HIDE_DELAY = 2000
+export const VIDEO_SCRUBBER_HIDE_DELAY = 1500
diff --git a/animism-align/frontend/app/utils/viewer.utils.js b/animism-align/frontend/app/utils/viewer.utils.js
index b61f998..efc7a35 100644
--- a/animism-align/frontend/app/utils/viewer.utils.js
+++ b/animism-align/frontend/app/utils/viewer.utils.js
@@ -12,3 +12,22 @@ export const getNextSection = section => {
   }
   return sections[section.index + 1]
 }
+
+export const parseCredits = lines => {
+  let sections = []
+  let current
+  lines.split("\n").forEach((s, i) => {
+    if (s[0] === "#") {
+      current = {
+        title: s.replace("#", "").trim(),
+        lines: [],
+        i
+      }
+      sections.push(current)
+    } else {
+      current.lines.push(s.trim())
+    }
+  })
+  return sections
+}
+
diff --git a/animism-align/frontend/app/views/episode/components/episode.form.js b/animism-align/frontend/app/views/episode/components/episode.form.js
index 8a2fb8f..01b13e6 100644
--- a/animism-align/frontend/app/views/episode/components/episode.form.js
+++ b/animism-align/frontend/app/views/episode/components/episode.form.js
@@ -173,22 +173,6 @@ export default class EpisodeForm extends Component {
             onChange={this.handleSelect}
           />
 
-          <TextArea
-            title="Curator"
-            name="curator"
-            data={data.settings}
-            onChange={this.handleSettingsChangeEvent}
-            autoComplete="off"
-          />
-
-          <TextArea
-            title="Author"
-            name="author"
-            data={data.settings}
-            onChange={this.handleSettingsChangeEvent}
-            autoComplete="off"
-          />
-
           <TextArea
             title="Artists"
             name="artists"
diff --git a/animism-align/frontend/app/views/venue/components/venue.form.js b/animism-align/frontend/app/views/venue/components/venue.form.js
index 7e611eb..b1a124f 100644
--- a/animism-align/frontend/app/views/venue/components/venue.form.js
+++ b/animism-align/frontend/app/views/venue/components/venue.form.js
@@ -154,14 +154,6 @@ export default class VenueForm extends Component {
             autoComplete="off"
           />
 
-          <TextArea
-            title="Curator"
-            name="curator"
-            data={data.settings}
-            onChange={this.handleSettingsChangeEvent}
-            autoComplete="off"
-          />
-
           <TextArea
             title="Artists"
             name="artists"
@@ -170,23 +162,6 @@ export default class VenueForm extends Component {
             autoComplete="off"
           />
 
-          <TextInput
-            title="Publication Heading"
-            name="publication_heading"
-            required
-            data={data.settings}
-            onChange={this.handleSettingsChangeEvent}
-            autoComplete="off"
-          />
-
-          <TextArea
-            title="Publication"
-            name="publication"
-            data={data.settings}
-            onChange={this.handleSettingsChangeEvent}
-            autoComplete="off"
-          />
-
           <TextArea
             title="Credits"
             name="credits"
diff --git a/animism-align/frontend/app/views/venue/venue.css b/animism-align/frontend/app/views/venue/venue.css
index fc9f36d..e19c170 100644
--- a/animism-align/frontend/app/views/venue/venue.css
+++ b/animism-align/frontend/app/views/venue/venue.css
@@ -13,4 +13,9 @@
 .venue-list div a {
   display: block;
   margin-bottom: 0.25rem;
-}
\ No newline at end of file
+}
+
+.venueContainer textarea[name="credits"] {
+  width: 30rem;
+  height: 20rem;
+}
diff --git a/animism-align/frontend/app/views/viewer/checklist/credits.components.js b/animism-align/frontend/app/views/viewer/checklist/credits.components.js
new file mode 100644
index 0000000..6063843
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/checklist/credits.components.js
@@ -0,0 +1,112 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { Arrow } from '../nav/viewer.icons'
+import { parseCredits } from 'app/utils/viewer.utils'
+
+const VenuesComponent = ({ venues }) => {
+  // const [ open, setOpen ] = React.useState(-1)
+  return (
+    <div className='site-credits'>
+      <div className='credits-title'>
+        Previous venues
+      </div>
+      {venues.order.map(id => (
+        <CreditsVenue
+          key={id}
+          venue={venues.lookup[id]}
+        />
+      ))}
+    </div>
+  )
+}
+
+const mapStateToProps = state => ({
+  episodes: state.episode.index,
+  venues: state.venue.index,
+})
+
+export const Venues = connect(mapStateToProps)(VenuesComponent)
+
+export const CreditsColumns = ({ lines }) => {
+  const creditSections = parseCredits(lines)
+  return (
+    <div className='credits'>
+      {creditSections.map(section => (
+        <div key={section.i}>
+          <div className='credits-title'>
+            {section.title}
+          </div>
+          <div className='credits-info'>
+            {section.lines.map((line, j) => (
+              <div
+                key={j}
+                dangerouslySetInnerHTML={{ __html: line || " " }}
+              />
+            ))}
+          </div>
+        </div>
+      ))}
+    </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>
+      )}
+    </div>
+  )
+}
diff --git a/animism-align/frontend/app/views/viewer/checklist/credits.content.js b/animism-align/frontend/app/views/viewer/checklist/credits.content.js
index 8683563..29e534e 100644
--- a/animism-align/frontend/app/views/viewer/checklist/credits.content.js
+++ b/animism-align/frontend/app/views/viewer/checklist/credits.content.js
@@ -2,8 +2,8 @@ import React, { Component } from 'react'
 
 import {
   Schedule,
-  Credits,
 } from '../player/components.inline/inline.utility'
+import { Venues } from './credits.components'
 
 import SubscriptionForm from '../forms/subscription.form'
 
@@ -15,7 +15,7 @@ export default class CreditsContent extends Component {
           <span>Credits</span>
         </div>
         <Schedule />
-        <Credits />
+        <Venues />
         <SubscriptionForm />
       </div>
     )
diff --git a/animism-align/frontend/app/views/viewer/checklist/credits.css b/animism-align/frontend/app/views/viewer/checklist/credits.css
new file mode 100644
index 0000000..730813d
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/checklist/credits.css
@@ -0,0 +1,82 @@
+/* schedule credits */
+
+.credits-content {
+  font-size: 0.875rem;
+}
+.credits-content a {
+  color: #000;
+  text-decoration: none;
+  border-bottom: 1px solid;
+}
+.credits {
+  display: flex;
+  flex-direction: row;
+  margin: 0 auto;
+  width: 45rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+.credits > div {
+  width: 14.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;
+  line-height: 1.3;
+}
+.credits-info div {
+  padding-left: 1rem;
+  text-indent: -1rem;
+  min-height: 1rem;
+  }
+
+/* site credits */
+
+.site-credits {
+  width: 45rem;
+  margin: 0 auto;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  line-height: 1.3;
+}
+.site-credits .site-lines {
+  margin-bottom: 2rem
+}
+.site-credits .site-lines div {
+  min-height: 0.875rem;
+}
+.site-credits .site-lines .credits-title {
+  margin-bottom: 0.375rem;
+}
+
+/* venues */
+
+.site-credits .venue {
+  border-bottom: 1px solid black;
+}
+.venue-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 0.375rem 0 0 0;
+  cursor: pointer;
+}
+.venue-header svg {
+  width: 2.5rem;
+  height: 2.5rem;
+  transform: translateX(0.6rem) translateY(-0.5rem);
+}
+.venue-info.credits {
+  padding-top: 0rem;
+}
+.venue-info .credits-info div {
+  min-height: 0.875rem;
+}
\ 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 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)
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 b1bf64d..0ac1a0c 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -13,6 +13,7 @@
 }
 
 .player-transcript .section_heading,
+.credits-content .section_heading,
 .player-transcript .paragraph.intro_paragraph {
   font-family: "Freight Text", serif;
   font-size: 3rem;
@@ -21,9 +22,11 @@
   margin: 0 auto;
   padding-bottom: 2rem;
 }
+.credits-content .section_heading,
 .player-transcript .section_heading {
   text-align: center;
 }
+.credits-content .section_heading,
 .player-transcript .section_heading:first-child {
   margin-top: 4rem;
 }
@@ -285,7 +288,7 @@
   display: flex;
   flex-direction: column;
   margin: 0 auto;
-  padding-top: 1.5rem;
+  padding-top: 2.5rem;
 }
 .schedule > div {
   padding: 0.375rem 0;
@@ -312,76 +315,3 @@
   border-bottom: 1px solid;
 }
 
-/* schedule credits */
-
-.credits {
-  display: flex;
-  flex-direction: row;
-  margin: 0 auto;
-  width: 45rem;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-.credits > div {
-  width: 14.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;
-  line-height: 1.3;
-}
-.credits-info div {
-  padding-left: 1rem ;
-  text-indent: -1rem ;
-}
-
-/* site credits */
-
-.site-credits {
-  width: 45rem;
-  margin: 0 auto;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  line-height: 1.3;
-}
-.site-credits .site-lines {
-  margin-bottom: 2rem
-}
-.site-credits .site-lines div {
-  min-height: 0.875rem;
-}
-.site-credits .site-lines .credits-title {
-  margin-bottom: 0.375rem;
-}
-
-/* venues */
-
-.site-credits .venue {
-  border-bottom: 1px solid black;
-}
-.venue-header {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: 0.375rem 0 0 0;
-  cursor: pointer;
-}
-.venue-header svg {
-  width: 2.5rem;
-  height: 2.5rem;
-  transform: translateX(0.6rem) translateY(-0.5rem);
-}
-.venue-info.credits {
-  padding-top: 0rem;
-}
-.venue-info .credits-info div {
-  min-height: 0.875rem;
-}
diff --git a/animism-align/frontend/app/views/viewer/viewer.container.js b/animism-align/frontend/app/views/viewer/viewer.container.js
index 6395a68..dde5ba6 100644
--- a/animism-align/frontend/app/views/viewer/viewer.container.js
+++ b/animism-align/frontend/app/views/viewer/viewer.container.js
@@ -12,6 +12,7 @@ import './sections/subscribe.css'
 import './sections/footnotes.css'
 import './transcript/transcript.css'
 import './checklist/checklist.css'
+import './checklist/credits.css'
 import './modals/modals.css'
 import './forms/forms.css'
 import './player/player.container.css'
-- 
cgit v1.2.3-70-g09d2