diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer/player')
4 files changed, 19 insertions, 7 deletions
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 adbc443..cd40746 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 @@ -166,6 +166,7 @@ class FullscreenVideo extends Component { mediaItem={item} cc={cc} onScrub={this.handleScrub} + scrubMasterAudio={true} /> <VideoSubtitles cc={cc} 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 ea73d03..00f2de4 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 @@ -1,6 +1,7 @@ import React, { Component } from 'react' import VimeoPlayer from 'app/utils/vendor/vimeo' +import actions from 'app/actions' import { CURTAIN_COLOR_LOOKUP } from 'app/constants' import { SpeakerIcon } from '../../nav/viewer.icons' import { MediaCitation } from '../components.media' @@ -61,7 +62,14 @@ export class MediaVideo extends Component { <div className='videoPoster' style={style} - onClick={e => onAnnotationClick(e, paragraph, annotation)} + onClick={e => { + if (annotation.settings.can_play_full_video) { + e && e.stopPropagation() + actions.viewer.openVideoModal(item, color) + } else { + onAnnotationClick(e, paragraph, annotation) + } + }} > <div className='posterImage'> <img src={posterURL(item)} /> diff --git a/animism-align/frontend/app/views/viewer/player/components.media/video.scrubber.js b/animism-align/frontend/app/views/viewer/player/components.media/video.scrubber.js index e43c7ec..10677dc 100644 --- a/animism-align/frontend/app/views/viewer/player/components.media/video.scrubber.js +++ b/animism-align/frontend/app/views/viewer/player/components.media/video.scrubber.js @@ -47,15 +47,17 @@ class VideoScrubber extends Component { this.defer = false } scrub(x, scrubbing) { - const { timing, start_ts, video_start_ts, onScrub, duration } = this.props + const { timing, start_ts, video_start_ts, onScrub, onToggle, duration, scrubMasterAudio } = this.props const bounds = this.scrubberRef.current.getBoundingClientRect() // get percent offset from the scrubber const percent = clamp((x - bounds.left) / bounds.width, 0, 1) // this offset in seconds based on the length of the fullscreen element const seconds = percent * duration // we can use this to seek the audio - actions.audio.seek(start_ts + seconds) - actions.audio.play() + if (scrubMasterAudio) { + actions.audio.seek(start_ts + seconds) + actions.audio.play() + } // apply the video start offset. // in case the video loops, modulo the length of the original video const video_seek = ((seconds + video_start_ts) % timing.duration) @@ -104,7 +106,7 @@ class VideoScrubber extends Component { clearTimeout(this.hideTimeout) } render() { - const { playing, start_ts, play_ts, volume, timing, video_start_ts, duration, cc, mediaItem } = this.props + const { playing, start_ts, play_ts, volume, timing, video_start_ts, duration, cc, mediaItem, onToggle } = this.props const { hovering, showing } = this.state // remove video start offset from timing // console.log(start_ts, play_ts) @@ -119,7 +121,7 @@ class VideoScrubber extends Component { return ( <div className={className}> <div className='start-controls'> - <PlayButton playing={playing} /> + <PlayButton playing={playing} onClick={onToggle} /> </div> <div className='scrub-bar-container' @@ -153,7 +155,6 @@ class VideoScrubber extends Component { } const mapStateToProps = state => ({ - playing: state.audio.playing, volume: state.audio.volume, cc: state.audio.cc, }) diff --git a/animism-align/frontend/app/views/viewer/player/player.container.js b/animism-align/frontend/app/views/viewer/player/player.container.js index 77de555..39a08dc 100644 --- a/animism-align/frontend/app/views/viewer/player/player.container.js +++ b/animism-align/frontend/app/views/viewer/player/player.container.js @@ -7,6 +7,7 @@ import { preloadSectionImages } from 'app/utils/image.utils' import PlayerTranscript from './player.transcript' import PlayerFullscreen from './player.fullscreen' +import VideoModal from '../modals/modals.video' class PlayerContainer extends Component { constructor(props) { @@ -110,6 +111,7 @@ class PlayerContainer extends Component { <div className='viewer-container'> <PlayerTranscript /> <PlayerFullscreen /> + <VideoModal /> </div> ) } |