diff options
11 files changed, 47 insertions, 31 deletions
diff --git a/animism-align/frontend/app/common/app.css b/animism-align/frontend/app/common/app.css index 362b933..e9efdc3 100644 --- a/animism-align/frontend/app/common/app.css +++ b/animism-align/frontend/app/common/app.css @@ -114,9 +114,6 @@ p { /* links */ -b { - color: #fff; -} a { text-decoration: underline; color: #8df; diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js index 0a6cc17..9ca5295 100644 --- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js +++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js @@ -39,6 +39,7 @@ export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect, h <AnnotationFormFullscreen annotation={annotation} handleSettingsChange={handleSettingsChange} + handleSettingsSelect={handleSettingsSelect} /> )} </div> diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js index a926741..6c835c5 100644 --- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js +++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js @@ -8,15 +8,6 @@ import { annotationFadeTimings } from 'app/utils/annotation.utils' export const AnnotationFormCurtain = ({ annotation, handleSettingsChange, handleSettingsSelect }) => { return ( <div className='options'> - <Select - title='Color' - name='color' - selected={annotation.settings.color} - options={CURTAIN_COLOR_SELECT_OPTIONS} - defaultOption='Pick a color' - onChange={handleSettingsSelect} - /> - <TextInput title="Curtain text" name="curtain_text" @@ -30,18 +21,28 @@ export const AnnotationFormCurtain = ({ annotation, handleSettingsChange, handle alwaysAccessible annotation={annotation} handleSettingsChange={handleSettingsChange} + handleSettingsSelect={handleSettingsSelect} /> </div> ) } -export const AnnotationFormFullscreen = ({ annotation, handleSettingsChange }) => { +export const AnnotationFormFullscreen = ({ annotation, handleSettingsChange, handleSettingsSelect }) => { const { fadeInDuration, fadeOutDuration, duration, start_ts, end_ts, fade_in_end_ts, fade_out_start_ts, } = annotationFadeTimings(annotation) return ( <div> + <Select + title='Color' + name='color' + selected={annotation.settings.color} + options={CURTAIN_COLOR_SELECT_OPTIONS} + defaultOption='Pick a color' + onChange={handleSettingsSelect} + /> + <TextInput title="Total duration" name="duration" diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js index 5b4e199..50ca033 100644 --- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js +++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js @@ -39,6 +39,7 @@ export const AnnotationFormVideo = ({ annotation, media, handleSettingsSelect, h <AnnotationFormFullscreen annotation={annotation} handleSettingsChange={handleSettingsChange} + handleSettingsSelect={handleSettingsSelect} /> )} </div> diff --git a/animism-align/frontend/app/views/media/components/media.indexOptions.js b/animism-align/frontend/app/views/media/components/media.indexOptions.js index 09a0f74..d8187c9 100644 --- a/animism-align/frontend/app/views/media/components/media.indexOptions.js +++ b/animism-align/frontend/app/views/media/components/media.indexOptions.js @@ -44,12 +44,6 @@ class IndexOptions extends Component { selected={options.sort} onChange={actions.upload.updateOption} /> - <Select - name={'thumbnailSize'} - options={thumbnailOptions} - selected={options.thumbnailSize} - onChange={actions.upload.updateOption} - /> </div> ) } diff --git a/animism-align/frontend/app/views/media/media.css b/animism-align/frontend/app/views/media/media.css index a2d95c8..81eae26 100644 --- a/animism-align/frontend/app/views/media/media.css +++ b/animism-align/frontend/app/views/media/media.css @@ -58,7 +58,6 @@ .imageSelection img { display: block; max-width: 100%; - max-height: 20rem; } .imageSelection img.loading { opacity: 0.5; 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 |