From 5cb08bd401118a0ae3ff267b806c864b1d588292 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 1 Oct 2020 11:04:40 +0200
Subject: a place for credits

---
 .../player/components.inline/inline.utility.js     | 43 ++++++++++++++++++++--
 .../app/views/viewer/player/player.container.js    | 11 ++++--
 .../app/views/viewer/player/player.credits.js      | 24 ++++++++++++
 .../app/views/viewer/player/player.transcript.css  | 13 +++++++
 .../app/views/viewer/player/player.transcript.js   | 10 +----
 5 files changed, 84 insertions(+), 17 deletions(-)
 create mode 100644 animism-align/frontend/app/views/viewer/player/player.credits.js

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

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 486b8e5..7e108f4 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
@@ -36,8 +36,7 @@ export const Intro = ({ paragraph, media, onAnnotationClick }) => {
   )
 }
 
-const ScheduleComponent = ({ episodes, venues }) => {
-  console.log(episodes.lookup[episodes.order[0]])
+const ScheduleComponent = ({ episodes }) => {
   const currentEpisode = episodes.lookup[episodes.order[0]].settings
   return (
     <div>
@@ -96,10 +95,46 @@ const ScheduleComponent = ({ episodes, venues }) => {
   )
 }
 
+const CreditsComponent = ({ episodes, venues }) => {
+  const currentEpisode = episodes.lookup[episodes.order[0]].settings
+  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}>{s || " "}</div>
+    )
+  })
+  return (
+    <div className='site-credits'>
+      {lines}
+    </div>
+  )
+}
+
+const CreditsVenue = ({ venue }) => {
+  return (
+    <div />
+  )
+}
+
+export const SubscriptionForm = () => {
+  return (
+    <div className="subscription-form">
+      Stay up to date and get notified when the next episode is available
+      <input type="text" placeholder="Email address here" />
+    </div>
+  )
+}
+
 const mapStateToProps = state => ({
   episodes: state.episode.index,
-  episode: state.episode.show.res || {},
   venues: state.venue.index,
 })
 
-export const Schedule = connect(mapStateToProps)(ScheduleComponent)
\ No newline at end of file
+export const Schedule = connect(mapStateToProps)(ScheduleComponent)
+export const Credits = connect(mapStateToProps)(CreditsComponent)
diff --git a/animism-align/frontend/app/views/viewer/player/player.container.js b/animism-align/frontend/app/views/viewer/player/player.container.js
index bbad771..e940bfa 100644
--- a/animism-align/frontend/app/views/viewer/player/player.container.js
+++ b/animism-align/frontend/app/views/viewer/player/player.container.js
@@ -2,10 +2,10 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
 import actions from 'app/actions'
-import { GROWL } from 'app/constants'
 import { floatInRange, clamp } from 'app/utils'
 
 import PlayerTranscript from './player.transcript'
+import PlayerCredits from './player.credits'
 import PlayerFullscreen from './player.fullscreen'
 
 class PlayerContainer extends Component {
@@ -84,12 +84,15 @@ class PlayerContainer extends Component {
   
   render() {
     // const { } = this.props
-    const { currentSection } = this.props
-    if (!currentSection) { return <div /> }
+    const { currentSection, viewer } = this.props
+    if (!currentSection && !viewer.credits) { return <div /> }
     // console.log(currentSection)
     return (
       <div className='viewer-container'>
-        <PlayerTranscript section={currentSection} />
+        {viewer.credits
+          ? <PlayerCredits />
+          : <PlayerTranscript section={currentSection} />
+        }
         <PlayerFullscreen />
       </div>
     )
diff --git a/animism-align/frontend/app/views/viewer/player/player.credits.js b/animism-align/frontend/app/views/viewer/player/player.credits.js
new file mode 100644
index 0000000..f8a0fa8
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/player.credits.js
@@ -0,0 +1,24 @@
+import React, { Component } from 'react'
+
+import {
+  Schedule,
+  Credits,
+  SubscriptionForm,
+} from './components.inline/inline.utility'
+
+export default class PlayerCredits extends Component {
+  render() {
+    return (
+      <div className="player-transcript player-credits">
+        <div className='content'>
+          <div className='section_heading'>
+            <span>Credits</span>
+          </div>
+          <Schedule />
+          <Credits />
+          <SubscriptionForm />
+        </div>
+      </div>
+    )
+  }
+}
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 4ea459b..ce4d143 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -328,3 +328,16 @@
   padding: 0.375rem 0;
   white-space: pre-line;
 }
+
+.site-credits {
+  width: 45rem;
+  margin: 0 auto;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+.site-credits .credits-title {
+  margin-bottom: 0.375rem;
+}
+.site-credits div {
+  min-height: 0.875rem;
+}
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.js b/animism-align/frontend/app/views/viewer/player/player.transcript.js
index c34475c..d6702bb 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.js
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.js
@@ -12,7 +12,6 @@ import { inlineComponents } from './components.inline'
 class PlayerTranscript extends Component {
   constructor(props){
     super(props)
-    this.handleClose = this.handleClose.bind(this)
     this.handleAnnotationClick = this.handleAnnotationClick.bind(this)
     this.handleParagraphDoubleClick = this.handleParagraphDoubleClick.bind(this)
     this.handleScroll = this.handleScroll.bind(this)
@@ -44,9 +43,6 @@ class PlayerTranscript extends Component {
   handleParagraphDoubleClick(e, paragraph) {
   }
   
-  handleClose() {
-  }
-
   handleScroll(e) {
     if (this.props.viewer.growlOpen) {
       actions.viewer.closeGrowl()
@@ -81,8 +77,4 @@ const mapStateToProps = state => ({
   viewer: state.viewer,
 })
 
-const mapDispatchToProps = dispatch => ({
-  // uploadActions: bindActionCreators({ ...uploadActions }, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(PlayerTranscript)
+export default connect(mapStateToProps)(PlayerTranscript)
-- 
cgit v1.2.3-70-g09d2