transcript UX

4 files changed, 11 insertions, 6 deletions

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;