fullscreen opacity change tweaks

3 files changed, 29 insertions, 15 deletions

diff --git a/animism-align/frontend/app/utils/index.js b/animism-align/frontend/app/utils/index.js
index 9b605c7..b7c05da 100644
--- a/animism-align/frontend/app/utils/index.js
+++ b/animism-align/frontend/app/utils/index.js
@@ -165,8 +165,8 @@ export const cropImage = (url, crop, maxSide) => {
         height = cropHeight
       }
 
-      canvas.width = w * width
-      canvas.height = h * height
+      canvas.width = width
+      canvas.height = height
 
       ctx.drawImage(
         image,
diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
index 5683418..26219c4 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
@@ -53,16 +53,30 @@ class PlayerFullscreen extends Component {
             if (!(element.type in fullscreenComponents)) {
               return null
             }
-            const isEntering = floatInRange(element.start_ts, play_ts, element.fade_in_end_ts)
-            const FullscreenComponent = fullscreenComponents[element.type]
-            const transitionDuration = (isEntering ? (1000 * element.fadeInDuration) : (1000 * element.fadeOutDuration)) + 'ms'
+            let {
+              type, index,
+              fadeInDuration, fadeOutDuration,
+              start_ts, end_ts,
+              fade_in_end_ts, fade_out_start_ts,
+            } = element
+            const isEntering = floatInRange(start_ts, play_ts, fade_in_end_ts)
+            const isLeaving = floatInRange(fade_out_start_ts, play_ts, end_ts)
+            const FullscreenComponent = fullscreenComponents[type]
+            fadeInDuration *= 1000
+            fadeOutDuration *= 1000
+            if (!isEntering && !isLeaving) {
+              fadeInDuration = 0
+              fadeOutDuration = 0
+            }
+            const transitionDuration = (isEntering ? fadeInDuration : fadeOutDuration) + 'ms'
+            console.log(play_ts, isEntering, isLeaving, fadeInDuration, fadeOutDuration)
             return (
               <CSSTransition
-                key={element.index}
+                key={index}
                 classNames="fade"
                 timeout={{
-                  enter: element.fadeInDuration * 1000,
-                  exit: element.fadeOutDuration * 1000,
+                  enter: fadeInDuration,
+                  exit: fadeOutDuration,
                 }}
                 component={FirstChild}
               >
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 fa7e3d7..cbf4b38 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -99,17 +99,17 @@
   box-decoration-break: clone;
   background: #e8e8e8;
   color: #000;
-  transition: all 0.2s;
+  transition: all 0.1s;
 }
 .player-transcript .paragraph .current {
-  box-shadow: -1px -1px 0 #e8e8e8,
-               1px -1px 0 #e8e8e8,
-              -1px  1px 0 #e8e8e8,
-               1px  1px 0 #e8e8e8;
+  box-shadow: -3px -2px 0 #e8e8e8,
+               3px -2px 0 #e8e8e8,
+              -3px  2px 0 #e8e8e8,
+               3px  2px 0 #e8e8e8;
   box-decoration-break: clone;
   background: #e8e8e8;
   color: #000;
-  transition: all 0.2s;
+  transition: all 0.1s;
 }
 
 /* media */
@@ -121,7 +121,7 @@
   margin: 0 auto;
   display: block;
   max-width: 100vw;
-  max-height: 100vh;
+  max-height: 90vh;
 }
 .player-transcript .media.fullscreen .img {
   width: 100vw;