From 49c867b989c1aa05c8c90b0df4aded2dbcb2a65c Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 12 Nov 2020 16:21:54 +0100 Subject: higher res curtain bg --- .../frontend/app/utils/annotation.utils.js | 38 +++++++++++++++++++--- .../components.fullscreen/fullscreen.utility.js | 4 +-- .../app/views/viewer/player/player.fullscreen.css | 2 +- 3 files changed, 36 insertions(+), 8 deletions(-) diff --git a/animism-align/frontend/app/utils/annotation.utils.js b/animism-align/frontend/app/utils/annotation.utils.js index a5d3f39..5bf21b5 100644 --- a/animism-align/frontend/app/utils/annotation.utils.js +++ b/animism-align/frontend/app/utils/annotation.utils.js @@ -17,6 +17,7 @@ export const annotationFadeTimings = annotation => { } export const thumbnailURL = media => { + let image_id // console.log(media) switch (media.type) { case 'video': @@ -35,7 +36,7 @@ export const thumbnailURL = media => { if (!media.settings.image_order || !media.settings.image_order.length) { return null } - const image_id = media.settings.image_order[0] + image_id = media.settings.image_order[0] return media.settings.thumbnail_lookup[image_id].url default: @@ -43,10 +44,37 @@ export const thumbnailURL = media => { } } -export const posterURL = data => { - if (!data.settings.video) return null - if (data.settings.poster) return data.settings.poster.url - return data.settings.video.thumbnail_url +export const displayThumbnailURL = media => { + let image_id + switch (media.type) { + case 'video': + if (media.settings.poster) { + return media.settings.poster.url + } + return media.settings.video.thumbnail_url + + case 'image': + return media.settings.display.url + + case 'gallery': + if (media.settings.thumbnail) { + return media.settings.thumbnail.url + } + if (!media.settings.image_order || !media.settings.image_order.length) { + return null + } + image_id = media.settings.image_order[0] + return media.settings.display_lookup[image_id].url + + default: + return null + } +} + +export const posterURL = media => { + if (!media.settings.video) return null + if (media.settings.poster) return media.settings.poster.url + return media.settings.video.thumbnail_url } export const sectionProgress = (section, play_ts) => { diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js index a58f29c..5ec4833 100644 --- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js +++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js @@ -1,7 +1,7 @@ import React from 'react' import { EPILEPSY_WARNING, ROMAN_NUMERALS } from 'app/constants' -import { thumbnailURL } from 'app/utils/annotation.utils' +import { displayThumbnailURL } from 'app/utils/annotation.utils' export const FullscreenCurtain = ({ element, transitionDuration }) => { // console.log(element, isEntering) @@ -13,7 +13,7 @@ export const FullscreenCurtain = ({ element, transitionDuration }) => { } console.log(element) const curtainBackground = element.mediaItem && { - backgroundImage: 'url(' + (thumbnailURL(element.mediaItem)) + ')', + backgroundImage: 'url(' + (displayThumbnailURL(element.mediaItem)) + ')', } let texts = [] // console.log(element) diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css index 28ac255..4f7b33d 100644 --- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css +++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css @@ -144,7 +144,7 @@ iframe { opacity: 0; } .fullscreen-element.curtain.fade-enter-done .curtain-background { - opacity: 0.3; + opacity: 0.25; } .fullscreen-element.curtain.fade-exit div, .fullscreen-element.curtain.fade-exit-done div { -- cgit v1.2.3-70-g09d2