preloading curtain images

3 files changed, 16 insertions, 4 deletions

diff --git a/animism-align/frontend/app/views/media/components/media.formGallery.js b/animism-align/frontend/app/views/media/components/media.formGallery.js
index a62a4dc..ab7c8ed 100644
--- a/animism-align/frontend/app/views/media/components/media.formGallery.js
+++ b/animism-align/frontend/app/views/media/components/media.formGallery.js
@@ -3,7 +3,8 @@ import { Link } from 'react-router-dom'
 import { ReactSortable } from "react-sortablejs"
 
 import actions from 'app/actions'
-import { capitalize, preloadImage, simpleArraysEqual } from 'app/utils'
+import { capitalize, simpleArraysEqual } from 'app/utils'
+import { preloadImage } from 'app/utils/image.utils'
 import { DISPLAY_SIZE, DISPLAY_QUALITY, THUMBNAIL_SIZE, THUMBNAIL_QUALITY } from 'app/constants'
 
 import { TextInput, LabelDescription, FileInputField, Select, TextArea, Checkbox, SubmitButton, Loader } from 'app/common'
diff --git a/animism-align/frontend/app/views/media/components/media.formImage.js b/animism-align/frontend/app/views/media/components/media.formImage.js
index 7f22af0..dbbf69f 100644
--- a/animism-align/frontend/app/views/media/components/media.formImage.js
+++ b/animism-align/frontend/app/views/media/components/media.formImage.js
@@ -3,7 +3,8 @@ import { Link } from 'react-router-dom'
 
 import { session } from 'app/session'
 import actions from 'app/actions'
-import { capitalize, preloadImage, cropImage } from 'app/utils'
+import { capitalize } from 'app/utils'
+import { preloadImage, cropImage } from 'app/utils/image.utils'
 import { DISPLAY_SIZE, DISPLAY_QUALITY, THUMBNAIL_SIZE, THUMBNAIL_QUALITY } from 'app/constants'
 
 import { TextInput, LabelDescription, UploadImage, Select, TextArea, Checkbox, SubmitButton, Loader } from 'app/common'
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index 71dfa46..1113680 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -12,8 +12,9 @@ import {
 } from 'app/constants'
 import { floatInRange, timestampToSeconds } from 'app/utils'
 import { buildParagraphs } from 'app/utils/transcript.utils'
-import { annotationFadeTimings } from 'app/utils/annotation.utils'
+import { annotationFadeTimings, displayThumbnailURL } from 'app/utils/annotation.utils'
 import { getNextSection } from 'app/utils/viewer.utils'
+import { preloadImages } from 'app/utils/image.utils'
 
 /* building the list of sections from the raw annotation list */
 
@@ -112,6 +113,7 @@ export const loadSections = () => dispatch => {
     }
 
     // build timeline of gallery / carousel advance instructions. this is in reverse so we can step thru it
+    // TODO: modify this to append these instructions to a list based on media_id, so we can grab it for the gallery
     if (GALLERY_UTILITY_ANNOTATION_TYPES.has(annotation.type) && currentSection.fullscreenTimeline.length) {
       const lastTimelineEvent = currentSection.fullscreenTimeline[currentSection.fullscreenTimeline.length - 1]
       annotation.settings.frame_index = parseInt(annotation.settings.frame_index)
@@ -178,7 +180,7 @@ export const loadSections = () => dispatch => {
       }
     }
     if ((!currentSection.fullscreenTimeline.length || time_to_first_fullscreen_element > 0.0) && currentSection.index !== 0) {
-      // here we should create a dummy curtain event
+      // this section has no initial fullscreen event, so we should create a blank dummy curtain event
       sectionColor = currentSection.paragraphs[0].annotations[0].settings.color || 'white'
       initial_curtain_event = makeFullscreenEvent(0, {
         start_ts: currentSection.start_ts,
@@ -206,6 +208,14 @@ export const loadSections = () => dispatch => {
     currentSection.inlineParagraphCount = currentSection.paragraphs.filter(p => !p.hidden).length
     // console.log(i, currentSection.inlineParagraphCount)
   })
+
+  // Preload chapter cover URLs
+  const chapterCurtainImages = sections
+    .map(section => section.fullscreenTimeline.length && section.fullscreenTimeline[0].mediaItem)
+    .map(section => displayThumbnailURL(section))
+    .filter(s => !!s)
+  preloadImages(chapterCurtainImages)
+
   // console.log(sections)
   // console.log(footnoteList)
   dispatch({ type: types.viewer.load_sections, sections, footnoteList })