From 965a6f89aeeefd527bf8b253fa2931e940ea2842 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Fri, 28 Aug 2020 17:09:08 +0200
Subject: proper timing on inline images

---
 animism-align/frontend/app/utils/transcript.utils.js              | 4 ++++
 .../app/views/viewer/player/components.inline/inline.image.js     | 8 ++++----
 .../frontend/app/views/viewer/player/player.transcript.css        | 2 +-
 3 files changed, 9 insertions(+), 5 deletions(-)

(limited to 'animism-align/frontend')

diff --git a/animism-align/frontend/app/utils/transcript.utils.js b/animism-align/frontend/app/utils/transcript.utils.js
index f6ab7a8..3a21bda 100644
--- a/animism-align/frontend/app/utils/transcript.utils.js
+++ b/animism-align/frontend/app/utils/transcript.utils.js
@@ -54,6 +54,7 @@ export const buildParagraphs = (annotationOrder, sectionCount) => {
           type: annotation.type,
           start_ts: annotation.start_ts,
           end_ts: 0,
+          isMedia: true,
           annotations: [annotation],
         })
       }
@@ -99,6 +100,9 @@ export const buildParagraphs = (annotationOrder, sectionCount) => {
     if (!paragraphs[i].end_ts) {
       paragraphs[i].end_ts = paragraphs[i+1].start_ts - 0.1
     }
+    if (paragraphs[i].isMedia) {
+      paragraphs[i].start_ts = paragraphs[i+1].start_ts - 0.01
+    }
   }
   return paragraphs
 }
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 9928eef..7e237a1 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
@@ -10,18 +10,18 @@ export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotati
   if (!item) return <div>Media not found: {annotation.settings.media_id}</div>
   if (annotation.settings.fullscreen) {
     return (
-      <div className="media image fullscreen">
-        <div className="speaker-icon" onClick={e => onAnnotationClick(e, paragraph, annotation)}>{SpeakerIcon}</div>
+      <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 + ')'}} />
         <MediaCitation media={item} />
       </div>
     )
   } else {
     return (
-      <div className="media image">
+      <div className="media image" onClick={e => onAnnotationClick(e, paragraph, annotation)}>
         <div className="image-container">
           <img src={item.settings.display.url} />
-          <div className="speaker-icon" onClick={e => onAnnotationClick(e, paragraph, annotation)}>{SpeakerIcon}</div>
+          <div className="speaker-icon">{SpeakerIcon}</div>
         </div>
         <MediaCitation media={item} />
       </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 7e0b302..ef7bbc7 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -162,7 +162,7 @@
   cursor: pointer;
   display: block;
   max-width: 100%;
-  max-height: 90vh;
+  max-height: calc(100vh - 7rem);
 }
 .player-transcript .media.fullscreen .img {
   width: 100vw;
-- 
cgit v1.2.3-70-g09d2