summaryrefslogtreecommitdiff
path: root/animism-align/frontend/app/views/viewer/checklist/credits.components.js
blob: 6063843ad16c1547e45a600e8a66f826fbadde4c (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
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>
  )
}