From f38815753af0b72c0407a2efe448a6c8a027ddca Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Fri, 7 Aug 2020 18:16:54 +0200
Subject: add intro gif

---
 animism-align/frontend/app/constants.js            |  6 ++-
 .../frontend/app/utils/transcript.utils.js         | 24 ++++++++++-
 .../components/annotations/annotation.form.js      |  2 +-
 .../annotationForms/annotationForm.utility.js      | 48 ++++++++++++++++++++++
 .../annotations/annotationForms/index.js           |  2 +
 .../annotationTypes/annotationTypes.utility.js     | 34 +++++++++++++++
 .../annotations/annotationTypes/index.js           |  2 +
 .../views/viewer/player/components.inline/index.js |  5 +++
 .../player/components.inline/inline.utility.js     | 22 ++++++++++
 .../app/views/viewer/player/player.transcript.css  | 31 ++++++++++++++
 .../frontend/app/views/viewer/viewer.actions.js    | 13 ++++--
 11 files changed, 182 insertions(+), 7 deletions(-)
 create mode 100644 animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js

(limited to 'animism-align')

diff --git a/animism-align/frontend/app/constants.js b/animism-align/frontend/app/constants.js
index 2ed5563..1acdf5b 100644
--- a/animism-align/frontend/app/constants.js
+++ b/animism-align/frontend/app/constants.js
@@ -56,7 +56,11 @@ export const MEDIA_LABEL_TYPES = {
   vitrine: 'Vitrine',
 }
 
-export const UTILITY_ANNOTATION_TYPES = new Set([
+export const INLINE_UTILITY_ANNOTATION_TYPES = new Set([
+  'intro',
+])
+
+export const FULLSCREEN_UTILITY_ANNOTATION_TYPES = new Set([
   'curtain',
 ])
 
diff --git a/animism-align/frontend/app/utils/transcript.utils.js b/animism-align/frontend/app/utils/transcript.utils.js
index 6400394..f6ab7a8 100644
--- a/animism-align/frontend/app/utils/transcript.utils.js
+++ b/animism-align/frontend/app/utils/transcript.utils.js
@@ -2,7 +2,8 @@ import { store, history, dispatch } from 'app/store'
 import {
   TEXT_ANNOTATION_TYPES,
   MEDIA_ANNOTATION_TYPES,
-  UTILITY_ANNOTATION_TYPES,
+  INLINE_UTILITY_ANNOTATION_TYPES,
+  FULLSCREEN_UTILITY_ANNOTATION_TYPES,
 } from 'app/constants'
 
 export const buildParagraphs = (annotationOrder, sectionCount) => {
@@ -21,7 +22,26 @@ export const buildParagraphs = (annotationOrder, sectionCount) => {
     const paragraph = paragraphLookup[annotation.paragraph_id]
 
     // if this annotation is a utility (curtain, gallery instructions), then skip it
-    if (UTILITY_ANNOTATION_TYPES.has(annotation.type)) {
+    if (FULLSCREEN_UTILITY_ANNOTATION_TYPES.has(annotation.type)) {
+      return
+    }
+
+    // if this annotation is an inline utility (intro div) don't skip it
+    if (INLINE_UTILITY_ANNOTATION_TYPES.has(annotation.type)) {
+      if (!annotation.settings.hideCitation) {
+        const item = {
+          id: ('index_' + annotation.id),
+          type: annotation.type,
+          start_ts: annotation.start_ts,
+          end_ts: 0,
+          annotations: [annotation],
+        }
+        if (annotation.type === 'intro') {
+          paragraphs.unshift(item)
+        } else {
+          paragraphs.push(item)
+        }
+      }
       return
     }
 
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotation.form.js b/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
index 5842aab..80a960f 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
@@ -16,7 +16,7 @@ const ANNOTATION_TYPES = [
   'sentence', 'section_heading', 'heading_text', 'paragraph_end',
   'video',
   'image', 'image_carousel',
-  'curtain',
+  'curtain', 'intro',
 ].map(name => ({ name, label: capitalize(name.replace('_', ' ')) }))
 
 class AnnotationForm extends Component {
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js
index 6c835c5..750c3a7 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js
@@ -5,6 +5,54 @@ import { TextInput, LabelDescription, Select, Checkbox } from 'app/common'
 import { CURTAIN_COLOR_SELECT_OPTIONS } from 'app/constants'
 import { annotationFadeTimings } from 'app/utils/annotation.utils'
 
+export const AnnotationFormIntro = ({ annotation, media, handleSettingsChange, handleSettingsSelect }) => {
+  if (!media.lookup) return <div />
+  const { lookup, order } = media
+  const image_list_items = order.filter(id => lookup[id].type === 'file').map(id => {
+    const image = lookup[id]
+    return {
+      name: image.id,
+      label: image.title
+    }
+  })
+  return (
+    <div className='options'>
+      <Select
+        name='media_id'
+        className="media_id"
+        selected={annotation.settings.media_id}
+        options={image_list_items}
+        defaultOption='Choose a file'
+        onChange={handleSettingsSelect}
+      />
+
+      <TextInput
+        title="Title"
+        name="title"
+        placeholder="Enter title or leave blank"
+        data={annotation.settings}
+        onChange={handleSettingsChange}
+        autoComplete="off"
+      />
+
+      <TextInput
+        title="Subtitle"
+        name="subtitle"
+        placeholder="Enter subtitle or leave blank"
+        data={annotation.settings}
+        onChange={handleSettingsChange}
+        autoComplete="off"
+      />
+
+      <AnnotationFormFullscreen
+        annotation={annotation}
+        handleSettingsChange={handleSettingsChange}
+        handleSettingsSelect={handleSettingsSelect}
+      />
+    </div>
+  )
+}
+
 export const AnnotationFormCurtain = ({ annotation, handleSettingsChange, handleSettingsSelect }) => {
   return (
     <div className='options'>
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js
index 0b36d9a..dd601bc 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js
@@ -12,11 +12,13 @@ import {
 
 import {
   AnnotationFormCurtain,
+  AnnotationFormIntro,
 } from './annotationForm.utility'
 
 export const annotationFormLookup = {
   section_heading: AnnotationFormSectionHeading,
   image: AnnotationFormImage,
   video: AnnotationFormVideo,
+  intro: AnnotationFormIntro,
   curtain: AnnotationFormCurtain,
 }
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.utility.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.utility.js
index 8b59e18..296e5bc 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.utility.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.utility.js
@@ -3,6 +3,40 @@ import React, { Component } from 'react'
 import { annotationFadeTimings } from 'app/utils/annotation.utils'
 import { durationToHeight } from 'app/utils/align.utils'
 
+export const AnnotationIntro = ({ y, annotation, timeline, selected, onClick, onDoubleClick }) => {
+  const className = selected ? 'annotation utility intro selected' : 'annotation utility intro'
+  const {
+    fadeInDuration, fadeOutDuration, duration,
+    start_ts, end_ts, fade_in_end_ts, fade_out_start_ts,
+  } = annotationFadeTimings(annotation)
+  const durationHeight = durationToHeight(duration, timeline)
+  const fadeInHeight = durationToHeight(fadeInDuration, timeline)
+  const fadeOutHeight = durationToHeight(fadeOutDuration, timeline)
+  let style = {
+    top: y,
+  }
+  if (annotation.settings.fullscreen) {
+    style.height = durationHeight
+  }
+  return (
+    <div
+      className={className}
+      style={style}
+      onClick={e => onClick(e, annotation)}
+      onDoubleClick={e => onDoubleClick(e, annotation)}
+    > 
+      <div style={{ height: fadeInHeight }} className='fadeIn' />
+      <div style={{ height: fadeOutHeight }} className='fadeOut' />
+      <span style={{ top: fadeInHeight }}>
+        Intro:<br/>
+        {annotation.settings.title}<br />
+        {annotation.settings.subtitle}<br />
+      </span>
+    </div>
+  )
+}
+
+
 export const AnnotationCurtain = ({ y, annotation, timeline, selected, onClick, onDoubleClick }) => {
   const className = selected ? 'annotation utility curtain selected' : 'annotation utility curtain'
   const {
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js
index 1a1c5ec..5b13496 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js
@@ -17,6 +17,7 @@ import {
 
 import {
   AnnotationCurtain,
+  AnnotationIntro,
 } from './annotationTypes.utility'
 
 export const AnnotationElementLookup = {
@@ -26,5 +27,6 @@ export const AnnotationElementLookup = {
   paragraph_end: React.memo(AnnotationParagraphEnd),
   video: React.memo(AnnotationVideo),
   image: React.memo(AnnotationImage),
+  intro: React.memo(AnnotationIntro),
   curtain: React.memo(AnnotationCurtain),
 }
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/index.js b/animism-align/frontend/app/views/viewer/player/components.inline/index.js
index e46751e..781378e 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/index.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/index.js
@@ -12,6 +12,10 @@ import {
   MediaImage
 } from './inline.image'
 
+import {
+  Intro
+} from './inline.utility'
+
 export const inlineComponents = {
   paragraph: React.memo(Paragraph),
   intro_paragraph: React.memo(Paragraph),
@@ -22,4 +26,5 @@ export const inlineComponents = {
   header: React.memo(ParagraphHeading),
   video: React.memo(MediaVideo),
   image: React.memo(MediaImage),
+  intro: React.memo(Intro),
 }
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
new file mode 100644
index 0000000..dd4dbfe
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js
@@ -0,0 +1,22 @@
+import React, { Component } from 'react'
+
+export const Intro = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick }) => {
+  let className = 'site-intro'
+  const annotation = paragraph.annotations[0]
+  const item = media.lookup[annotation.settings.media_id]
+  console.log(item)
+  const style = {
+    backgroundImage: 'url(' + item.settings.file.url + ')',
+  }
+  return (
+    <div
+      className={className}
+      style={style}
+    >
+      <div className='inner'>
+        {annotation.settings.title && <span dangerouslySetInnerHTML={{ __html: annotation.settings.title }} />}
+        {annotation.settings.subtitle && <span dangerouslySetInnerHTML={{ __html: annotation.settings.subtitle }} />}
+      </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 8862587..fa7e3d7 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -136,3 +136,34 @@
   font-family: "Neue Haas Unica";
   color: #888;
 }
+
+/* intro */
+
+.site-intro {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background: black;
+  background-size: cover;
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+.site-intro .inner {
+  position: absolute;
+  top: 0; left: 50%;
+  transform: translateZ(0) translateX(-50%);
+  width: 100%;
+  height: 100%;
+  padding-bottom: 3rem;
+  max-width: 90%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  font-family: "Freight Text", serif;
+  font-size: 12vh;
+  line-height: 1;
+  text-align: center;
+}
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index f03b16d..8c03a10 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -2,7 +2,9 @@ import * as types from 'app/types'
 import { store, history, dispatch } from 'app/store'
 import {
   MEDIA_ANNOTATION_TYPES, MEDIA_LABEL_TYPES,
-  TEXT_ANNOTATION_TYPES, UTILITY_ANNOTATION_TYPES,
+  TEXT_ANNOTATION_TYPES,
+  INLINE_UTILITY_ANNOTATION_TYPES,
+  FULLSCREEN_UTILITY_ANNOTATION_TYPES,
   CURTAIN_COLOR_LOOKUP,
 } from 'app/constants'
 import { buildParagraphs } from 'app/utils/transcript.utils'
@@ -96,8 +98,13 @@ export const loadSections = () => dispatch => {
       }
     }
 
+    // build timeline of special inline items
+    if (INLINE_UTILITY_ANNOTATION_TYPES.has(annotation.type)) {
+      sectionTextAnnotationOrder.push(annotation.id)
+    }
+
     // build timeline of fullscreen events
-    if (UTILITY_ANNOTATION_TYPES.has(annotation.type) || annotation.settings.fullscreen) {
+    if (FULLSCREEN_UTILITY_ANNOTATION_TYPES.has(annotation.type) || annotation.settings.fullscreen) {
       const event = makeFullscreenEvent(eventIndex++, annotation)
       fullscreenTimeline.push(event)
     }
@@ -123,7 +130,7 @@ export const loadSections = () => dispatch => {
     }
   }
 
-  // console.log(sections)
+  console.log(sections)
   // console.log(fullscreenTimeline)
   dispatch({ type: types.viewer.load_sections, sections, fullscreenTimeline })
 }
-- 
cgit v1.2.3-70-g09d2