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

---
 .../views/viewer/checklist/credits.components.js   | 112 +++++++++++++++++++++
 .../app/views/viewer/checklist/credits.content.js  |   4 +-
 .../app/views/viewer/checklist/credits.css         |  82 +++++++++++++++
 3 files changed, 196 insertions(+), 2 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

(limited to 'animism-align/frontend/app/views/viewer/checklist')

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