From 6dea2acdf558f39c868be92c5657190d9fb6bd46 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Fri, 28 Aug 2020 18:02:05 +0200
Subject: transcript UX

---
 .../annotations/annotationForms/annotationForm.gallery.js        | 7 +++++++
 .../annotations/annotationForms/annotationForm.image.js          | 7 +++++++
 .../app/views/viewer/player/components.inline/inline.image.js    | 5 +++--
 .../app/views/viewer/player/components.inline/inline.video.js    | 9 ++++++---
 .../app/views/viewer/player/components.media/media.carousel.js   | 2 +-
 .../frontend/app/views/viewer/player/player.transcript.css       | 1 +
 .../views/viewer/transcript/components/elementTypes.gallery.js   | 3 +--
 .../app/views/viewer/transcript/components/elementTypes.image.js | 3 +--
 .../app/views/viewer/transcript/components/elementTypes.text.js  | 8 ++++----
 .../app/views/viewer/transcript/components/elementTypes.video.js | 3 +--
 .../frontend/app/views/viewer/transcript/components/index.js     | 3 ++-
 .../frontend/app/views/viewer/transcript/transcript.css          | 1 +
 12 files changed, 35 insertions(+), 17 deletions(-)

(limited to 'animism-align/frontend/app')

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 e85c6f3..5fb8958 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
@@ -48,6 +48,13 @@ export const AnnotationFormGallery = ({ annotation, media, handleSettingsSelect,
         onChange={handleSettingsSelect}
       />
 
+      <Checkbox
+        label="Hide in transcript"
+        name="hide_in_transcript"
+        checked={annotation.settings.hide_in_transcript}
+        onChange={handleSettingsSelect}
+      />
+
       <Select
         title='Color'
         name='color'
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
index 285dbcc..a4d952d 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
@@ -48,6 +48,13 @@ export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect, h
         onChange={handleSettingsSelect}
       />
 
+      <Checkbox
+        label="Hide in transcript"
+        name="hide_in_transcript"
+        checked={annotation.settings.hide_in_transcript}
+        onChange={handleSettingsSelect}
+      />
+
       {(annotation.settings.fullscreen && !annotation.settings.inline) && (
         <AnnotationFormFullscreen
           annotation={annotation}
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
index 7e237a1..10a4653 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
@@ -11,8 +11,9 @@ export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotati
   if (annotation.settings.fullscreen) {
     return (
       <div className="media image fullscreen" onClick={e => onAnnotationClick(e, paragraph, annotation)}>
-        <div className="speaker-icon">{SpeakerIcon}</div>
-        <div className="img" style={{ backgroundImage: 'url(' + item.settings.display.url + ')'}} />
+        <div className="img" style={{ backgroundImage: 'url(' + item.settings.display.url + ')'}}>
+          <div className="speaker-icon">{SpeakerIcon}</div>
+        </div>
         <MediaCitation media={item} />
       </div>
     )
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
index 3e70b24..a1dc344 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
@@ -11,12 +11,15 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotati
   const className = currentParagraph ? 'media video current' : 'media video'
   const annotation = paragraph.annotations[0]
   const item = media.lookup[annotation.settings.media_id]
+  if (!item) return <div>Media not found: {annotation.settings.media_id}</div>
   const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
+  const width = window.innerWidth
+  const height = window.innerHeight * 0.8
   const style = {
     backgroundColor: color.backgroundColor,
     color: color.textColor,
+    height: height + 32
   }
-  if (!item) return <div>Media not found: {annotation.settings.media_id}</div>
   // console.log(annotation.settings)
   return (
     <div
@@ -29,8 +32,8 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotati
           muted
           controls={false}
           byline={false}
-          width={window.innerWidth}
-          height={window.innerHeight * 0.8}
+          width={width}
+          height={height}
         />
       </div>
       <MediaCitation media={item} />
diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.carousel.js b/animism-align/frontend/app/views/viewer/player/components.media/media.carousel.js
index cfd1e48..914a8d9 100644
--- a/animism-align/frontend/app/views/viewer/player/components.media/media.carousel.js
+++ b/animism-align/frontend/app/views/viewer/player/components.media/media.carousel.js
@@ -18,7 +18,7 @@ export const Carousel = ({ media }) => {
     <div ref={sliderRef} className='keen-slider carousel-items'>
       {image_order.map(id => {
         const image = display_lookup[id]
-        console.log(image)
+        // console.log(image)
         return (
           <CarouselItem key={id} image={image} />
         )
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 ef7bbc7..712e0a9 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -165,6 +165,7 @@
   max-height: calc(100vh - 7rem);
 }
 .player-transcript .media.fullscreen .img {
+  position: relative;
   width: 100vw;
   height: 100vh;
   background-size: cover;
diff --git a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.gallery.js b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.gallery.js
index 895c9dd..6d6db2d 100644
--- a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.gallery.js
+++ b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.gallery.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 
 import { MediaCitation } from './elementTypes.image'
 
-export const MediaGallery = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
+export const MediaGallery = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick }) => {
   if (!media.lookup) return <div />
   const className = currentParagraph ? 'media current' : 'media'
   const annotation = paragraph.annotations[0]
@@ -15,7 +15,6 @@ export const MediaGallery = ({ paragraph, media, currentParagraph, currentAnnota
     <div
       className={className}
       onClick={e => onAnnotationClick(e, paragraph, annotation)}
-      onDoubleClick={e => onDoubleClick(e, paragraph)}
     >
       {"["}
       <MediaCitation media={item} />
diff --git a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.image.js b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.image.js
index 4f4f960..64de3a2 100644
--- a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.image.js
+++ b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.image.js
@@ -27,7 +27,7 @@ export const MediaCitation = ({ media }) => {
   )
 }
 
-export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
+export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick }) => {
   if (!media.lookup) return <div />
   const className = currentParagraph ? 'media image current' : 'media image'
   const annotation = paragraph.annotations[0]
@@ -40,7 +40,6 @@ export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotati
     <div
       className={className}
       onClick={e => onAnnotationClick(e, paragraph, annotation)}
-      onDoubleClick={e => onDoubleClick(e, paragraph)}
     >
       {"["}
       <MediaCitation media={item} />
diff --git a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js
index 3fc13b4..292eec8 100644
--- a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js
+++ b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js
@@ -2,14 +2,13 @@ import React, { Component } from 'react'
 
 import { ROMAN_NUMERALS } from 'app/constants'
 
-export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
+export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => {
   let className = paragraph.type
   if (className !== 'paragraph') className += ' paragraph'
   if (currentParagraph) className += ' current'
   return (
     <div
       className={className}
-      onDoubleClick={e => onDoubleClick(e, paragraph)}
     >
       {paragraph.annotations.map(annotation => (
         <span
@@ -23,13 +22,14 @@ export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAn
   )
 }
 
-export const ParagraphHeading = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
+export const ParagraphHeading = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => {
   let className = currentParagraph ? 'section_heading current' : 'section_heading'
   const text = paragraph.annotations.map(annotation => annotation.text).join(' ')
+  const firstAnnotation = paragraph.annotations[0]
   return (
     <div
       className={className}
-      onDoubleClick={e => onDoubleClick(e, paragraph)}
+      onClick={e => onAnnotationClick(e, paragraph, firstAnnotation)}
     >
       <span>{ROMAN_NUMERALS[paragraph.sectionIndex]}{'. '}{text}</span>
     </div>
diff --git a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.video.js b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.video.js
index 7cb03bb..423a055 100644
--- a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.video.js
+++ b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.video.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 
 import { MediaCitation } from './elementTypes.image'
 
-export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
+export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick }) => {
   if (!media.lookup) return <div />
   const className = currentParagraph ? 'media current' : 'media'
   const annotation = paragraph.annotations[0]
@@ -15,7 +15,6 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotati
     <div
       className={className}
       onClick={e => onAnnotationClick(e, paragraph, annotation)}
-      onDoubleClick={e => onDoubleClick(e, paragraph)}
     >
       {"["}
       <MediaCitation media={item} />
diff --git a/animism-align/frontend/app/views/viewer/transcript/components/index.js b/animism-align/frontend/app/views/viewer/transcript/components/index.js
index 4641c45..3b5901d 100644
--- a/animism-align/frontend/app/views/viewer/transcript/components/index.js
+++ b/animism-align/frontend/app/views/viewer/transcript/components/index.js
@@ -21,9 +21,10 @@ export const transcriptElementLookup = {
   intro_paragraph: React.memo(Paragraph),
   blockquote: React.memo(Paragraph),
 
-  hidden: React.memo(HiddenParagraph),
+  hidden: React.memo(Paragraph),
   heading_text: React.memo(HiddenParagraph),
   intro: React.memo(HiddenParagraph),
+  schedule: React.memo(HiddenParagraph),
 
   section_heading: React.memo(ParagraphHeading),
   header: React.memo(ParagraphHeading),
diff --git a/animism-align/frontend/app/views/viewer/transcript/transcript.css b/animism-align/frontend/app/views/viewer/transcript/transcript.css
index 9e4eff6..0ffcf32 100644
--- a/animism-align/frontend/app/views/viewer/transcript/transcript.css
+++ b/animism-align/frontend/app/views/viewer/transcript/transcript.css
@@ -82,6 +82,7 @@
 /* paragraph subtypes */
 
 .transcript .section_heading {
+  cursor: pointer;
   text-align: center;
   padding-top: 2rem;
 }
-- 
cgit v1.2.3-70-g09d2