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

---
 .../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 +
 5 files changed, 87 insertions(+), 1 deletion(-)

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

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),
 }
-- 
cgit v1.2.3-70-g09d2