1 files changed, 9 insertions, 3 deletions
diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.list.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.list.js
index 34a944d..fd7ade4 100644
--- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.list.js
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.list.js
@@ -22,7 +22,7 @@ class ViewerSectionsList extends Component {
     this.scrollRef.current.scrollLeft += delta
   }
   render() {
-    const { play_ts, sections, currentSection } = this.props
+    const { play_ts, sections, media, currentSection } = this.props
     return (
       <div
         ref={this.scrollRef}
@@ -31,7 +31,12 @@ class ViewerSectionsList extends Component {
       >
         {sections.map(section => {
           // console.log(section)
-          const media = section.media.length ? section.media[0].media : null
+          let mediaItem
+          if (section.cover_id) {
+            mediaItem = media.lookup[section.cover_id]
+          } else {
+            mediaItem = section.media.length ? section.media[0].media : null
+          }
           const { no_audio, section_nav_color } = section
           const progress = sectionProgressPercentage(section, play_ts)
           return (
@@ -42,7 +47,7 @@ class ViewerSectionsList extends Component {
             >
               <div>
                 <div className="section-thumbnail" style={{
-                  backgroundImage: media && 'url(' + thumbnailURL(media) + ')',
+                  backgroundImage: mediaItem && 'url(' + thumbnailURL(mediaItem) + ')',
                 }}>
                   {!no_audio &&
                     <div className={"section-duration-" + section_nav_color}>
@@ -77,6 +82,7 @@ class ViewerSectionsList extends Component {
 }
 
 const mapStateToProps = state => ({
+  media: state.media.index,
   nav: state.viewer.nav,
   play_ts: state.audio.play_ts,
   sections: state.viewer.sections,