option to loop video

3 files changed, 15 insertions, 4 deletions

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 b89a412..ce07d09 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
@@ -43,6 +43,12 @@ export const AnnotationFormVideo = ({ annotation, media, handleSettingsSelect, h
         onChange={handleSettingsSelect}
       />
       <Checkbox
+        label="Loop"
+        name="loop"
+        checked={annotation.settings.loop}
+        onChange={handleSettingsSelect}
+      />
+      <Checkbox
         label="Show poster image"
         name="poster"
         checked={annotation.settings.poster}
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 929daef..2d249a4 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
@@ -23,7 +23,7 @@ class FullscreenVideo extends Component {
   componentDidUpdate(prevProps) {
     if (Math.abs(this.props.play_ts - prevProps.play_ts) > 2.0) {
       // handle seek
-      const seek = this.props.play_ts - this.props.element.start_ts
+      const seek = (this.props.play_ts - this.props.element.start_ts) % this.state.duration
       this.setState({ seek })
     }
   }
@@ -63,6 +63,7 @@ class FullscreenVideo extends Component {
             paused={!playing}
             autoplay={true}
             muted={true}
+            loop={!!element.settings.loop}
             seek={this.state.seek}
             responsive={true}
             controls={false}
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index d63ced5..3800623 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -137,15 +137,15 @@ export const loadSections = () => dispatch => {
   if (currentSection) {
     currentSection.mediaLabels = Object.keys(currentMediaLabels).sort().join(', ')
     currentSection.paragraphs = buildParagraphs(sectionTextAnnotationOrder, currentSection.index)
-    currentSection.duration = timeline.duration
+    currentSection.end_ts = timeline.duration
   }
 
   let time_to_first_fullscreen_element, initial_curtain_event
   // last fixes on the sections
-  for (let i = 0; i < sections.length - 1; i++) {
+  for (let i = 0; i < sections.length; i++) {
     currentSection = sections[i]
     // set the end_ts for each section (i.e. just before the next section starts)
-    if (currentSection.end_ts === 0) {
+    if (currentSection.end_ts === 0 && i < sections.length - 1) {
       currentSection.end_ts = sections[i+1].start_ts - 1
     }
     // if the first fullscreen event is close to the beginning of the section, move it there
@@ -206,6 +206,8 @@ const makeFullscreenEvent = (index, annotation) => {
   }
   if (annotation.settings.color) {
     event.color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
+  } else {
+    event.color = CURTAIN_COLOR_LOOKUP.white
   }
   return event
 }
@@ -351,6 +353,8 @@ export const vitrineGo = direction => dispatch => {
   }
 }
 
+/* growl */
+
 export const openGrowl = message => dispatch => {
   dispatch({ type: types.viewer.open_growl, message })
 }