From 42589a753def8c659390588c38870ba11e83bd42 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Mon, 10 Aug 2020 17:59:23 +0200
Subject: schedule

---
 .../player/components.inline/inline.utility.js     | 66 ++++++++++++++++++++--
 .../app/views/viewer/player/player.transcript.css  | 50 +++++++++++++++-
 2 files changed, 111 insertions(+), 5 deletions(-)

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 2d70038..943b02a 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
@@ -8,6 +8,10 @@ export const Intro = ({ paragraph, media, currentParagraph, currentAnnotation, o
   const style = {
     backgroundImage: 'url(' + item.settings.file.url + ')',
   }
+  const nameLookup = Object.values(media.lookup).reduce((a,b) => {
+    a.add(b.author)
+    return a
+  }, new Set)
   return (
     <div>
       <div
@@ -20,14 +24,68 @@ export const Intro = ({ paragraph, media, currentParagraph, currentAnnotation, o
         </div>
       </div>
       <div className='schedule'>
-        <div>Schedule</div>
+        <div className='schedule-title'>Schedule</div>
+        {SCHEDULE.map(row => (
+          <div className={row.active ? 'schedule-row active' : 'schedule-row inactive'} key={row.id}>
+            <div className='schedule-date'>
+              {row.date}
+            </div>
+            <div className='schedule-title'>
+              {'Episode '}{row.id}{': '}
+              <i>{row.title}</i>
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className='credits'>
+        <div>
+          <div className='credits-title'>
+            Curator
+          </div>
+          <div className='credits-info'>
+            {ABOUT.curator}
+          </div>
+        </div>
+        <div>
+          <div className='credits-title'>
+            Authors
+          </div>
+          <div className='credits-info'>
+            {ABOUT.authors}
+          </div>
+        </div>
+        <div>
+          <div className='credits-title'>
+            Artists
+          </div>
+          <div className='credits-info'>
+            {Array.from(nameLookup).sort().join("\n")}
+          </div>
+        </div>
         <div>
+          <div className='credits-title'>
+            Sponsors
+          </div>
+          <div className='credits-info'>
+            {ABOUT.sponsors}
+          </div>
         </div>
       </div>
     </div>
   )
 }
 
-const schedule = [
-  { date: 'Mon 00-00, 2020', title: 'Episode 1: ' },
-]
\ No newline at end of file
+const SCHEDULE = [
+  { id: 1, active: true, date: 'Mon 00-00, 2020', title: 'Animist Origins & Export Projections' },
+  { id: 2, active: false, date: 'Mon 00-00, 2020', title: 'Animation & The Mummy Complex: The Museum' },
+  { id: 3, active: false, date: 'Mon 00-00, 2020', title: 'The Extirpation of Animism' },
+  { id: 4, active: false, date: 'Mon 00-00, 2020', title: 'Media History & Animism\'s Continuous Displacement' },
+  { id: 5, active: false, date: 'Mon 00-00, 2020', title: 'Soul-Design or Liminal Cosmologies' },
+  { id: 6, active: false, date: 'Mon 00-00, 2020', title: 'Animal, Mythic and Other' },
+]
+
+const ABOUT = {
+  curator: "Anselm Franke",
+  authors: "Anselm Franke\nAmal Issa",
+  sponsors: "This\nThis\nThis",
+}
\ No newline at end of file
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 cae31ca..96a36fb 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -169,4 +169,52 @@
   font-size: 12vh;
   line-height: 1;
   text-align: center;
-}
\ No newline at end of file
+}
+.schedule {
+  width: 45rem;
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  padding-top: 1.5rem;
+}
+.schedule > div {
+  padding: 0.375rem 0;
+}
+.schedule-row {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  border-top: 1px solid;
+}
+.schedule-row.inactive {
+  color: #888;
+}
+.schedule-date {
+  width: 10rem;
+}
+.schedule-title {
+  width: 35rem;
+}
+.credits {
+  display: flex;
+  flex-direction: row;
+  margin: 0 auto;
+  width: 45rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+.credits > div {
+  width: 10.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;
+}
-- 
cgit v1.2.3-70-g09d2