fullscreen text

10 files changed, 59 insertions, 19 deletions

diff --git a/animism-align/frontend/app/constants.js b/animism-align/frontend/app/constants.js
index 5abe350..b6b3bf2 100644
--- a/animism-align/frontend/app/constants.js
+++ b/animism-align/frontend/app/constants.js
@@ -77,11 +77,11 @@ export const GALLERY_UTILITY_ANNOTATION_TYPES = new Set([
 ])
 
 export const CURTAIN_COLORS = [
-  { label: 'white', backgroundColor: '#ffffff', textColor: '#000000' },
-  { label: 'light gray', backgroundColor: '#eeeeee', textColor: '#000000' },
-  { label: 'dark blue', backgroundColor: '#1a1f33', textColor: '#ffffff' },
-  { label: 'dark gray', backgroundColor: '#222222', textColor: '#ffffff' },
-  { label: 'black', backgroundColor: '#000000', textColor: '#ffffff' },
+  { label: 'white', backgroundColor: 'rgba(255,255,255,1.0)', textColor: '#000000' },
+  { label: 'light gray', backgroundColor: 'rgba(238,238,238,1.0)', textColor: '#000000' },
+  { label: 'dark blue', backgroundColor: 'rgba(26,31,51,1.0)', textColor: '#ffffff' },
+  { label: 'dark gray', backgroundColor: 'rgba(34,34,34,1.0)', textColor: '#ffffff' },
+  { label: 'black', backgroundColor: 'rgba(0,0,0,1.0)', textColor: '#ffffff' },
 ]
 
 export const BLACK_WHITE_SELECT_OPTIONS = [
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotation.index.js b/animism-align/frontend/app/views/align/components/annotations/annotation.index.js
index b42f1ee..8e1fa43 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotation.index.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotation.index.js
@@ -43,6 +43,7 @@ class AnnotationIndex extends PureComponent {
   }
   handleClick(e, annotation) {
     e.stopPropagation()
+    if (!annotation) return
     if (e.shiftKey) {
       e.preventDefault()
       this.handleParagraphSelection(annotation, e.metaKey)
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.gallery.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.gallery.js
index 61d24e3..c7df7f8 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.gallery.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.gallery.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 
 import { durationToHeight } from 'app/utils/align.utils'
 import { capitalize } from 'app/utils'
-import { annotationFadeTimings, thumbnailURL } from 'app/utils/annotation.utils'
+import { annotationFadeTimings } from 'app/utils/annotation.utils'
 
 import { checkAnnotationMediaNotReady, AnnotationMediaLoading } from './annotationTypes.utility'
 
@@ -10,7 +10,7 @@ export const AnnotationGallery = ({ y, annotation, media, timeline, selected, on
   const { text } = annotation
   const className = selected ? 'annotation media gallery selected' : 'annotation media gallery'
   if (checkAnnotationMediaNotReady(annotation, media)) {
-    return <AnnotationMediaLoading y={y} className={className} onClick={onClick} onDoubleClick={onDoubleClick} />
+    return <AnnotationMediaLoading y={y} annotation={annotation} className={className} onClick={onClick} onDoubleClick={onDoubleClick} />
   }
   const mediaItem = media[annotation.settings.media_id]
 
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.image.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.image.js
index 7c97d99..8574067 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.image.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.image.js
@@ -9,7 +9,7 @@ export const AnnotationImage = ({ y, annotation, media, timeline, selected, onCl
   const { text } = annotation
   const className = selected ? 'annotation media image selected' : 'annotation media image'
   if (checkAnnotationMediaNotReady(annotation, media)) {
-    return <AnnotationMediaLoading y={y} className={className} onClick={onClick} onDoubleClick={onDoubleClick} />
+    return <AnnotationMediaLoading y={y} annotation={annotation} className={className} onClick={onClick} onDoubleClick={onDoubleClick} />
   }
   const mediaItem = media[annotation.settings.media_id]
 
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 07c986c..1238163 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
@@ -91,7 +91,7 @@ export const AnnotationMediaLoading = ({ y, annotation, media, className, onClic
         style={{ top: y }}
         onClick={e => onClick(e, annotation)}
         onDoubleClick={e => onDoubleClick(e, annotation)}
-      >LOADING...</div>
+      >MEDIA NOT SET</div>
     )
   }
   if (!(annotation.settings.media_id in media)) {
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.video.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.video.js
index 1ebc804..4533a5d 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.video.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.video.js
@@ -1,19 +1,24 @@
 import React, { Component } from 'react'
 
-import { thumbnailURL } from 'app/utils/annotation.utils'
+import { annotationFadeTimings } from 'app/utils/annotation.utils'
+import { durationToHeight } from 'app/utils/align.utils'
 import { checkAnnotationMediaNotReady, AnnotationMediaLoading } from './annotationTypes.utility'
 
-export const AnnotationVideo = ({ y, annotation, media, selected, onClick, onDoubleClick }) => {
+export const AnnotationVideo = ({ y, annotation, media, timeline, selected, onClick, onDoubleClick }) => {
   const { start_ts, text } = annotation
   const className = selected ? 'annotation media video selected' : 'annotation media video'
   if (checkAnnotationMediaNotReady(annotation, media)) {
-    return <AnnotationMediaLoading y={y} className={className} onClick={onClick} onDoubleClick={onDoubleClick} />
+    return <AnnotationMediaLoading y={y} annotation={annotation} className={className} onClick={onClick} onDoubleClick={onDoubleClick} />
   }
   const data = media[annotation.settings.media_id]
+  const {
+    fadeInDuration, fadeOutDuration, duration,
+  } = annotationFadeTimings(annotation)
+  const durationHeight = annotation.settings.fullscreen ? durationToHeight(duration, timeline) : 'auto'
   return (
     <div
       className={className}
-      style={{ top: y }}
+      style={{ top: y, height: durationHeight }}
       onClick={e => onClick(e, annotation)}
       onDoubleClick={e => onDoubleClick(e, annotation)}
     >
@@ -27,9 +32,3 @@ export const AnnotationVideo = ({ y, annotation, media, selected, onClick, onDou
     </div>
   )
 }
-
-/*
-      <div className='img'>
-        <img src={thumbnailURL(data)} alt={data.title} />
-      </div>
-*/
\ No newline at end of file
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 bbe09ee..f83f460 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.router.js
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.router.js
@@ -40,6 +40,9 @@ class ViewerRouter extends Component {
       case 'footnotes':
         actions.viewer.showComponent('footnotes')
         break
+      case 'textplate':
+        actions.viewer.seekToTimestamp(timestampToSeconds('44:39'))
+        break
       case 'end':
         break
     }
diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.text.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.text.js
new file mode 100644
index 0000000..d9f7117
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.text.js
@@ -0,0 +1,21 @@
+import React from 'react'
+
+export const FullscreenTextPlate = ({ element, transitionDuration }) => {
+  console.log(element)
+  const { color } = element
+  const style = {
+    backgroundColor: color.backgroundColor.replace('1.0', '0.8'),
+    color: color.textColor,
+    transitionDuration,
+  }
+  return (
+    <div
+      className='fullscreen-element text-plate'
+      style={style}
+    >
+      <span>
+        {element.annotation.text}
+      </span>
+    </div>
+  )
+}
diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js
index 4f0b38b..0ac69c5 100644
--- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js
@@ -16,6 +16,10 @@ import {
   FullscreenCurtain
 } from './fullscreen.utility'
 
+import {
+  FullscreenTextPlate
+} from './fullscreen.text'
+
 export const fullscreenComponents = {
   curtain: React.memo(FullscreenCurtain),
   video: React.memo(FullscreenVideo),
@@ -23,4 +27,5 @@ export const fullscreenComponents = {
   gallery: React.memo(FullscreenGallery),
   carousel: React.memo(FullscreenCarousel),
   vitrine: React.memo(FullscreenVitrine),
+  text_plate: React.memo(FullscreenTextPlate),
 }
diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
index c9a1e48..99c64cd 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
@@ -105,3 +105,14 @@ iframe {
   text-overflow: ellipsis;
   cursor: pointer;
 }
+
+/* text plates */
+
+.fullscreen-element.text-plate span {
+  font-family: "Freight Text", serif;
+  font-size: 3rem;
+  line-height: 1.28;
+  max-width: 90%;
+  white-space: pre-line;
+  text-align: center;
+}