diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer')
5 files changed, 34 insertions, 11 deletions
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.parent.js b/animism-align/frontend/app/views/viewer/nav/nav.parent.js index fb505c2..5697d88 100644 --- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js +++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js @@ -15,11 +15,13 @@ class NavParent extends Component { <div className='nav-section-name'> <span className="section-link link" onClick={() => actions.viewer.toggleComponent('nav')}> <Arrow type={viewer.nav ? 'down' : 'up'} /> - <span> - {ROMAN_NUMERALS[0]} - {'. '} - {'Introduction'} - </span> + {viewer.currentSection && + <span> + {ROMAN_NUMERALS[viewer.currentSection.index]} + {'. '} + {viewer.currentSection.title} + </span> + } </span> </div> <NavPlayer /> diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.image.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.image.js index 6ca6d79..15525f4 100644 --- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.image.js +++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.image.js @@ -1,16 +1,21 @@ import React from 'react' export const FullscreenImage = ({ element, media, transitionDuration }) => { + const { color } = element const item = media.lookup[element.settings.media_id] const style = { + backgroundColor: color.backgroundColor, + color: color.textColor, transitionDuration, - backgroundImage: 'url(' + item.settings.display.url + ')', } return ( <div className='fullscreen-element image' style={style} > + <div style={{ + backgroundImage: 'url(' + item.settings.display.url + ')', + }} /> </div> ) } diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js index 9122426..6ca7ec8 100644 --- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js +++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js @@ -2,17 +2,27 @@ import React from 'react' import VimeoPlayer from '@u-wave/react-vimeo' export const FullscreenVideo = ({ element, media, transitionDuration }) => { + const { color } = element const item = media.lookup[element.settings.media_id] const style = { + backgroundColor: color.backgroundColor, + color: color.textColor, transitionDuration, - backgroundImage: 'url(' + item.settings.display.url + ')', } + console.log(item, window.innerWidth, window.innerHeight) return ( <div className='fullscreen-element video' style={style} > - <VimeoPlayer video={data.url} autoplay muted /> + <VimeoPlayer + video={item.url} + autoplay muted + controls={false} + byline={false} + width={window.innerWidth} + height={window.innerHeight} + /> </div> ) } 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 fb4d8af..8d38fa0 100644 --- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css +++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css @@ -38,12 +38,18 @@ height: 100%; top: 0; left: 0; + display: flex; + align-items: center; + justify-content: center; } .viewer-fullscreen .curtain { } -.viewer-fullscreen .image { - background-size: cover; +.viewer-fullscreen .image div { + width: 90%; + height: 90%; + background-size: contain; + background-repeat: no-repeat; background-position: center center; } diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js index a456646..679cafc 100644 --- a/animism-align/frontend/app/views/viewer/viewer.actions.js +++ b/animism-align/frontend/app/views/viewer/viewer.actions.js @@ -137,7 +137,7 @@ const makeFullscreenEvent = (index, annotation) => { settings: annotation.settings, type: annotation.type, } - if (event.type === 'curtain') { + if (annotation.settings.color) { event.color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white } return event |