artists animation

6 files changed, 44 insertions, 20 deletions

diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.gallery.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.gallery.js
index 55bdd86..0a8b3fb 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.gallery.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.gallery.js
@@ -58,6 +58,15 @@ export const AnnotationFormGallery = ({ annotation, media, handleSettingsSelect,
         onChange={handleSettingsSelect}
       />
 
+      <Select
+        title='Arrow Color'
+        name='arrow_color'
+        selected={annotation.settings.arrow_color}
+        options={CURTAIN_COLOR_SELECT_OPTIONS}
+        defaultOption='Color of UI arrows'
+        onChange={handleSettingsSelect}
+      />
+
       {(annotation.settings.fullscreen && !annotation.settings.inline) && (
         <AnnotationFormFullscreen
           annotation={annotation}
diff --git a/animism-align/frontend/app/views/episode/components/episode.form.js b/animism-align/frontend/app/views/episode/components/episode.form.js
index 01b13e6..63d55e7 100644
--- a/animism-align/frontend/app/views/episode/components/episode.form.js
+++ b/animism-align/frontend/app/views/episode/components/episode.form.js
@@ -112,9 +112,12 @@ export default class EpisodeForm extends Component {
     }
     const { isNew, onSubmit } = this.props
     const { data } = this.state
-    const requiredKeys = "title episode_number release_date".split(" ")
+    const requiredKeys = "episode_number release_date".split(" ")
     const validKeys = "title episode_number release_date is_live settings".split(" ")
     const validData = validKeys.reduce((a,b) => { a[b] = data[b]; return a }, {})
+    if (!data.title) {
+      data.title = "TBD"
+    }
     const errorFields = requiredKeys.filter(key => !validData[key])
     if (errorFields.length) {
       console.log('error', errorFields, validData)
diff --git a/animism-align/frontend/app/views/viewer/checklist/credits.components.js b/animism-align/frontend/app/views/viewer/checklist/credits.components.js
index 9e0b6f2..91855ef 100644
--- a/animism-align/frontend/app/views/viewer/checklist/credits.components.js
+++ b/animism-align/frontend/app/views/viewer/checklist/credits.components.js
@@ -92,7 +92,7 @@ const CreditsVenue = ({ venue, open, setOpen }) => {
 export const ArtistColumns = ({ artists }) => {
   const artistGroups = groupColumns(artists.trim().split('\n'), 4)
   return (
-    <div>
+    <div className='artist-columns'>
       <div className='credits-title'>
         Artists
       </div>
diff --git a/animism-align/frontend/app/views/viewer/checklist/credits.css b/animism-align/frontend/app/views/viewer/checklist/credits.css
index 0375703..8dda469 100644
--- a/animism-align/frontend/app/views/viewer/checklist/credits.css
+++ b/animism-align/frontend/app/views/viewer/checklist/credits.css
@@ -86,4 +86,15 @@
 }
 .venue-info .credits-info div {
   min-height: 0.875rem;
+}
+
+/* artists */
+
+.artist-columns {
+  height: 0;
+  overflow: hidden;
+  transition: height 0.5s;
+}
+.open + .artist-columns {
+  height: 10rem;
 }
\ No newline at end of file
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 17d0990..59d1ff5 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
@@ -47,13 +47,12 @@ const ScheduleComponent = ({ episodes }) => {
         <i>Animism</i>
         {' on '}
         <a href="https://e-flux.com/">e-flux.com</a>
-        {' is the ninth iteration of the exhibition and overall '}
-        {'research project presented at Museum of Contemporary Art Antwerp (M HKA) and Extra City, '}
-        {'Antwerp, 2010, Kunsthalle Bern, 2010, '}
-        {'Generali Foundation, Vienna, 2011, Haus der Kulturen der Welt, '}
-        {'Berlin, 2012, e-flux, New York, 2012, OCT Contemporary Art Terminal (OCAT) Shenzhen, 2013, '}
-        {'Ilmin Museum of Art, Seoul, 2013, '}
-        {'and Ashkal Alwan, Beirut, 2014.'}
+        {' '}
+        {'is the ninth iteration of the exhibition and overall research project presented at Museum of '}
+        {'Contemporary Art Antwerp (M HKA) and Extra City, Antwerp, 2010; Kunsthalle Bern, 2010; Generali '}
+        {'Foundation, Vienna, 2011; Haus der Kulturen der Welt, Berlin, 2012; e-flux, New York, 2012; OCT '}
+        {'Contemporary Art Terminal (OCAT) Shenzhen, 2013; Ilmin Museum of Art, Seoul, 2013; and Ashkal '}
+        {'Alwan, Beirut, 2014.'}
         <br/><br/>
         {'Presented here in its digital iteration, '}
         {'the exhibition will be released in four episodes starting October 2020.'}
@@ -63,6 +62,7 @@ const ScheduleComponent = ({ episodes }) => {
         {episodes.order.map(id => {
           const episode = episodes.lookup[id]
           const isOpen = episode.id === open
+          const hasTitle = !!episode.title && episode.title !== "TBD"
           let className = 'schedule-row'
           if (episode.is_live) {
             className += ' active'
@@ -82,14 +82,13 @@ const ScheduleComponent = ({ episodes }) => {
                   {episode.release_date}
                 </div>
                 <div className='schedule-title'>
-                  {'Episode '}{episode.episode_number}{': '}
-                  <i>{episode.title}</i>
+                  {'Episode '}{episode.episode_number}
+                  {hasTitle && ': '}
+                  {hasTitle && <i>{episode.title}</i>}
                 </div>
                 {episode.is_live && <Arrow type={isOpen ? 'up' : 'down'} />}
               </div>
-              {isOpen &&
-                <ArtistColumns artists={episode.settings.artists} />
-              }
+              <ArtistColumns artists={episode.settings.artists} />
             </div>
           )
         })}
diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.css b/animism-align/frontend/app/views/viewer/player/components.media/media.css
index 72eec07..6f9e96a 100644
--- a/animism-align/frontend/app/views/viewer/player/components.media/media.css
+++ b/animism-align/frontend/app/views/viewer/player/components.media/media.css
@@ -51,6 +51,11 @@
 .viewer-fullscreen .carousel-component .nav-arrow {
   max-height: calc(100vh - 19rem);
 }
+.carousel-component .nav-arrow polygon {
+  fill: #fff;
+  stroke-width: 0.1px;
+  stroke: #444;
+}
 .carousel-component .nav-arrow.prev {
   left: 0;
 }
@@ -61,20 +66,17 @@
   background: transparent;
   outline: 0;
 }
+/*
 .carousel-component .nav-arrow:hover {
   backdrop-filter: contrast(344%) grayscale(100%);
   background: rgba(255,255,255,0.9)
 }
-/*.white .carousel-component .nav-arrow { background: rgba(255,255,255,0.0); }
-.white .carousel-component .nav-arrow:hover { background: rgba(255,255,255,0.0); }
-*/.black .carousel-component .nav-arrow { background: rgba(0,0,0,0.0); }
-.black .carousel-component .nav-arrow:hover { background: rgba(0,0,0,0.0); }
-.carousel-component .arrow {
+*/.carousel-component .arrow {
    width: 4rem;
 }
 .carousel-component .arrow-disabled {
   cursor: default;
-  opacity: 0.2;
+  opacity: 0.0;
 }
 .carousel-component .dots {
   position: absolute;