diff options
8 files changed, 133 insertions, 77 deletions
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 ae58db4..b06916f 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 @@ -58,6 +58,22 @@ export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect, h onChange={handleSettingsSelect} /> + {(annotation.settings.fullscreen && !annotation.settings.inline) && ( + <Checkbox + label="Hide inline image" + name="hide_poster_inline" + checked={annotation.settings.hide_poster_inline} + onChange={handleSettingsSelect} + /> + )} + + <Checkbox + label="Hide caption" + name="hide_caption" + checked={annotation.settings.hide_caption} + onChange={handleSettingsSelect} + /> + <Checkbox label="Hide in transcript" name="hide_in_transcript" 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 a70cd1f..60ba7c9 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 @@ -10,8 +10,9 @@ export const FullscreenImage = ({ element, media, transitionDuration }) => { color: color.textColor, transitionDuration, } + let url; - console.log(element, item) + // console.log(element, item) if (item.type === 'gallery') { const index = parseInt(element.settings.frame_index) const frame_id = item.settings.image_order[index] 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 2fdcba7..213f17c 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 @@ -20,6 +20,8 @@ class FullscreenVideo extends Component { seek: 0.0, // whether or not the scrubber is scrubbing scrubbing: false, + // whether or not the video is ready and displaying an image + ready: false, } constructor(props) { super(props) @@ -46,7 +48,7 @@ class FullscreenVideo extends Component { } } handlePlay() { - + this.setState({ ready: true }) } handlePause() { @@ -62,7 +64,7 @@ class FullscreenVideo extends Component { render() { const { element, media, transitionDuration, playing } = this.props - const { duration, seconds } = this.state + const { duration, seconds, ready } = this.state const { color } = element const item = media.lookup[element.settings.media_id] const style = { @@ -70,13 +72,19 @@ class FullscreenVideo extends Component { color: color.textColor, transitionDuration, } + const playerStyle = { + opacity: ready ? 1.0 : 0.0 + } // return ( <div className='fullscreen-element video' style={style} > - <div className='vimeoPlayer'> + <div + className='videoPlayer' + style={playerStyle} + > <VimeoPlayer video={item.url} paused={!playing} diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js index 1f81aae..880d17b 100644 --- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js +++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js @@ -9,31 +9,44 @@ export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotati const item = media.lookup[annotation.settings.media_id] if (!item) return <div>Media not found: {annotation.settings.media_id}</div> - let url; - if (item.type === 'gallery' && item.settings.display_lookup[annotation.settings.frame_index]) { - url = item.settings.display_lookup[annotation.settings.frame_index].url + let url, captionItem; + if (item.type === 'gallery') { + const index = parseInt(annotation.settings.frame_index) + const frame_id = item.settings.image_order[index] + const frame = item.settings.display_lookup[frame_id] + if (!frame) { + console.error("Slide not found:", annotation.settings.frame_index) + return <div /> + } + url = frame.url + captionItem = item.settings.caption_lookup[frame_id] || item } else { url = item.settings.display.url + captionItem = item + } + if (annotation.settings.hide_caption) { + captionItem = null } - if (annotation.settings.fullscreen) { - return ( - <div className="media image fullscreen" onClick={e => onAnnotationClick(e, paragraph, annotation)}> - <div className="img" style={{ backgroundImage: 'url(' + item.settings.display.url + ')'}}> - <div className="speaker-icon">{SpeakerIcon}</div> - </div> - <MediaCitation media={item} /> - </div> - ) - } else { - return ( - <div className="media image" onClick={e => onAnnotationClick(e, paragraph, annotation)}> - <div className="image-container"> - <img src={url} /> - <div className="speaker-icon">{SpeakerIcon}</div> - </div> - <MediaCitation media={item} /> + // "fullscreen-style inline images" + // if (annotation.settings.fullscreen) { + // return ( + // <div className="media image fullscreen" onClick={e => onAnnotationClick(e, paragraph, annotation)}> + // <div className="img" style={{ backgroundImage: 'url(' + url + ')'}}> + // <div className="speaker-icon">{SpeakerIcon}</div> + // </div> + // <MediaCitation media={captionItem} /> + // </div> + // ) + // } else { + return ( + <div className="media image" onClick={e => onAnnotationClick(e, paragraph, annotation)}> + <div className="image-container"> + <img src={url} /> + <div className="speaker-icon">{SpeakerIcon}</div> </div> - ) - } + <MediaCitation media={captionItem} /> + </div> + ) + // } } diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js index d7cc967..513293a 100644 --- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js +++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js @@ -6,61 +6,77 @@ import { SpeakerIcon } from '../../nav/viewer.icons' import { MediaCitation } from '../components.media' import { posterURL } from 'app/utils/annotation.utils' -export const MediaVideo = ({ paragraph, media, currentParagraph, onAnnotationClick }) => { - if (!media.lookup) return <div /> - // const { color } = element - const className = currentParagraph ? 'media video current' : 'media video' - const annotation = paragraph.annotations[0] - const item = media.lookup[annotation.settings.media_id] - if (!item) return <div>Media not found: {annotation.settings.media_id}</div> - const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white - const height = window.innerHeight - (17 * 16) - let style = { - color: color.textColor, - height: height + 32, - backgroundColor: color.backgroundColor, +export class MediaVideo extends Component { + state = { + ready: false, } + constructor(props) { + super(props) + this.handlePlay = this.handlePlay.bind(this) + } + handlePlay() { + this.setState({ ready: true }) + } + render() { + const { paragraph, media, currentParagraph, onAnnotationClick } = this.props + const { ready } = this.state + if (!media.lookup) return <div /> + // const { color } = element + const className = currentParagraph ? 'media video current' : 'media video' + const annotation = paragraph.annotations[0] + const item = media.lookup[annotation.settings.media_id] + if (!item) return <div>Media not found: {annotation.settings.media_id}</div> + const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white + const height = window.innerHeight - (17 * 16) + let style = { + color: color.textColor, + height: height + 32, + backgroundColor: color.backgroundColor, + } - // if this is a fullscreen video, display the poster image - if (annotation.settings.fullscreen && !annotation.settings.inline) { - const color = CURTAIN_COLOR_LOOKUP[annotation.settings.poster_background_color || annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white - style.color = color.textColor - style.backgroundColor = color.backgroundColor - style.backgroundImage = 'url(' + posterURL(item) + ')' - if (annotation.settings.poster_size) { - style.backgroundSize = annotation.settings.poster_size + // if this is a fullscreen video, display the poster image + if (annotation.settings.fullscreen && !annotation.settings.inline) { + const color = CURTAIN_COLOR_LOOKUP[annotation.settings.poster_background_color || annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white + style.color = color.textColor + style.backgroundColor = color.backgroundColor + style.backgroundImage = 'url(' + posterURL(item) + ')' + if (annotation.settings.poster_size) { + style.backgroundSize = annotation.settings.poster_size + } + return ( + <div className={className}> + <div + className='videoPoster' + style={style} + onClick={e => onAnnotationClick(e, paragraph, annotation)} + > + <div className="speaker-icon">{SpeakerIcon}</div> + </div> + <MediaCitation media={item} /> + </div> + ) } + + const poster = annotation.settings.poster ? { + backgroundImage: 'url(' + posterURL(item) + ')', + } : {} + style.opacity = ready ? 1.0 : 0.0 return ( <div className={className}> - <div - className='videoPoster' - style={style} - onClick={e => onAnnotationClick(e, paragraph, annotation)} - > - <div className="speaker-icon">{SpeakerIcon}</div> + <div className='videoPlayer' style={style}> + <VimeoPlayer + video={item.url} + autoplay={annotation.settings.autoplay} + muted={true} + responsive={true} + controls={false} + byline={false} + style={poster} + onPlay={this.handlePlay} + /> </div> <MediaCitation media={item} /> </div> ) } - - const poster = annotation.settings.poster ? { - backgroundImage: 'url(' + posterURL(item) + ')', - } : {} - return ( - <div className={className}> - <div className='videoPlayer' style={style}> - <VimeoPlayer - video={item.url} - autoplay={annotation.settings.autoplay} - muted={true} - responsive={true} - controls={false} - byline={false} - style={poster} - /> - </div> - <MediaCitation media={item} /> - </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 a2a6da1..a3fcd68 100644 --- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css +++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css @@ -66,14 +66,15 @@ iframe { pointer-events: none; } -.viewer-fullscreen .video .vimeoPlayer { +.viewer-fullscreen .video .videoPlayer { pointer-events: none; width: 100%; height: calc(100vh) !important; - padding: 0 0 3rem 0 + padding: 0 0 3rem 0; + transition: opacity 0.5s; } -.viewer-fullscreen .video .vimeoPlayer div { +.viewer-fullscreen .video .videoPlayer div { width: 100%; height: 100% !important; padding: 0 !important; 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 34e94bc..e5db0ba 100644 --- a/animism-align/frontend/app/views/viewer/player/player.transcript.css +++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css @@ -221,6 +221,7 @@ width: 100%; height: calc(100vh - 15rem) !important; padding: 1rem 0; + transition: opacity 0.5s; } .player-transcript .media.video .videoPlayer div { height: 100%; diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js index beac797..449d224 100644 --- a/animism-align/frontend/app/views/viewer/viewer.actions.js +++ b/animism-align/frontend/app/views/viewer/viewer.actions.js @@ -129,7 +129,7 @@ export const loadSections = () => dispatch => { const event = makeFullscreenEvent(eventIndex++, annotation) currentSection.fullscreenTimeline.push(event) // for videos, we probably want to show a poster image - if (annotation.type === 'video' && !annotation.settings.hide_poster_inline) { + if ((annotation.type === 'image' || annotation.type === 'video') && !annotation.settings.hide_poster_inline) { sectionTextAnnotationOrder.push(annotation.id) } } |