diff options
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; |