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

---
 .../frontend/app/views/viewer/nav/nav.parent.js    | 13 ++++++-
 .../frontend/app/views/viewer/nav/viewer.router.js |  3 ++
 .../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 +----
 .../frontend/app/views/viewer/viewer.actions.js    |  9 +++++
 .../frontend/app/views/viewer/viewer.reducer.js    |  1 +
 9 files changed, 109 insertions(+), 18 deletions(-)
 create mode 100644 animism-align/frontend/app/views/viewer/player/player.credits.js

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

diff --git a/animism-align/frontend/app/views/viewer/nav/nav.parent.js b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
index fc72cf3..0f445a5 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -19,6 +19,7 @@ class NavParent extends Component {
     this.handleMouseLeave = this.handleMouseLeave.bind(this)
     this.handleMouseEnterNext = this.handleMouseEnterNext.bind(this)
     this.handleMouseLeaveNext = this.handleMouseLeaveNext.bind(this)
+    this.goToNextSection = this.goToNextSection.bind(this)
   }
   handleMouseEnter(){
     if (this.state.suppressHover) return
@@ -37,6 +38,16 @@ class NavParent extends Component {
       this.setState({ suppressHover: false })
     }, 50)
   }
+  goToNextSection() {
+    const { viewer } = this.props
+    if (viewer.nextSection) {
+      actions.viewer.seekToSection(viewer.nextSection)
+    } else if (viewer.credits) {
+      actions.viewer.seekToBeginning()
+    } else {
+      actions.viewer.showCredits()
+    }
+  }
   render() {
     const { viewer, play_ts, started } = this.props
     let containerClassName = "viewer-nav " + viewer.navStyle
@@ -68,7 +79,7 @@ class NavParent extends Component {
               <span
                 className="next-link link"
                 onMouseEnter={this.handleMouseEnterNext}
-                onClick={() => actions.viewer.seekToSection(viewer.nextSection)}
+                onClick={this.goToNextSection}
               >
                 Next
                 <Arrow type={'right'} />
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.router.js b/animism-align/frontend/app/views/viewer/nav/viewer.router.js
index 7f18b94..b177d2d 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.router.js
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.router.js
@@ -34,6 +34,9 @@ class ViewerRouter extends Component {
       case 'video':
         actions.viewer.seekToSection(getSection(4))
         break
+      case 'credits':
+        actions.viewer.showCredits()
+        break
       case 'end':
         break
     }
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)
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index 10d6edd..6ce2f01 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -283,6 +283,15 @@ export const seekToTimestamp = play_ts => dispatch => {
   actions.audio.play()
 }
 
+export const seekToBeginning = () => dispatch => {
+  actions.viewer.hideComponent("credits")
+  actions.viewer.seekToTimestamp(0.0)
+}
+
+export const showCredits = () => dispatch => {
+  actions.viewer.showComponent("credits")
+}
+
 export const setSectionFromTimestamp = play_ts => dispatch => {
   const { sections, currentSection } = store.getState().viewer
   const insideSection = sections.some((section, i) => {
diff --git a/animism-align/frontend/app/views/viewer/viewer.reducer.js b/animism-align/frontend/app/views/viewer/viewer.reducer.js
index 1589ea4..24ef24d 100644
--- a/animism-align/frontend/app/views/viewer/viewer.reducer.js
+++ b/animism-align/frontend/app/views/viewer/viewer.reducer.js
@@ -7,6 +7,7 @@ const initialState = {
   checklist: false,
   nav: false,
   share: false,
+  credits: false,
 
   /* section look and navigation */
   sections: { loading: true },
-- 
cgit v1.2.3-70-g09d2