2 files changed, 32 insertions, 10 deletions
diff --git a/animism-align/frontend/app/views/viewer/sections/sections.css b/animism-align/frontend/app/views/viewer/sections/sections.css
index ca1d86e..77cd12f 100644
--- a/animism-align/frontend/app/views/viewer/sections/sections.css
+++ b/animism-align/frontend/app/views/viewer/sections/sections.css
@@ -117,19 +117,20 @@
   margin: 1rem 0 1rem 1rem;
   font-size: 16px;
   cursor: pointer;
-  opacity: 0.6;
-  transition: opacity 0.2s;
+  position: relative;
 }
-.viewer-sections .viewer-section:hover {
-  opacity: 1.0;
+.viewer-sections .viewer-section .section-content {
+  transition: opacity 0.2s;
+  opacity: 0.6;
 }
-.viewer-sections .viewer-section.current-section {
+.viewer-sections .viewer-section.current-section .section-content,
+.viewer-sections .viewer-section:hover .section-content {
   opacity: 1.0;
 }
 .viewer-sections .viewer-section:last-child {
   margin-right: 1rem;
 }
-.viewer-section > div {
+.viewer-section .section-content {
   height: calc(20rem - 4px);
   width: 12rem;
 }
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 0d34a45..8fc1238 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
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
 import actions from 'app/actions'
-import { ROMAN_NUMERALS } from 'app/constants'
+import { ROMAN_NUMERALS, SECTION_LIMITED_MESSAGE } from 'app/constants'
 import { timestamp } from 'app/utils'
 import { thumbnailURL, sectionProgressPercentage } from 'app/utils/annotation.utils'
 import { SpeakerIcon } from '../nav/viewer.icons'
@@ -10,6 +10,9 @@ import { SpeakerIcon } from '../nav/viewer.icons'
 const SECTION_WIDTH = 13 * 16
 
 class ViewerSectionsList extends Component {
+  state = {
+    selectedSectionIndex: -1,
+  }
   constructor(props) {
     super(props)
     this.scrollRef = React.createRef()
@@ -33,8 +36,20 @@ class ViewerSectionsList extends Component {
     let delta = Math.abs(e.deltaY) > Math.abs(e.deltaX) ? e.deltaY : e.deltaX
     this.scrollRef.current.scrollLeft += delta
   }
+  handleSectionClick(e, section) {
+    if (this.props.onlyEnableFirstSection) {
+      this.setState({ selectedSectionIndex: section.index })
+      clearTimeout(this.warningFadeTimeout)
+      this.warningFadeTimeout = setTimeout(() => {
+        this.setState({ selectedSectionIndex: -1 })
+      }, 10000)
+    } else {
+      actions.viewer.seekToSection(section)
+    }
+  }
   render() {
-    const { play_ts, sections, media, currentSection } = this.props
+    const { play_ts, sections, media, currentSection, onlyEnableFirstSection } = this.props
+    const { selectedSectionIndex } = this.state
     return (
       <div
         ref={this.scrollRef}
@@ -55,9 +70,9 @@ class ViewerSectionsList extends Component {
             <div
               className={(!currentSection || section.index === currentSection.index) ? "viewer-section current-section" : "viewer-section"}
               key={section.index}
-              onClick={() => actions.viewer.seekToSection(section)}
+              onClick={e => this.handleSectionClick(e, section)}
             >
-              <div>
+              <div className="section-content">
                 <div className="section-thumbnail" style={{
                   backgroundImage: mediaItem && 'url(' + thumbnailURL(mediaItem) + ')',
                 }}>
@@ -85,6 +100,11 @@ class ViewerSectionsList extends Component {
                   {section.mediaLabels}
                 </div>
               </div>
+              {!!(onlyEnableFirstSection && section.index) && (
+                <div className={section.index === selectedSectionIndex ? 'section-limited visible' : 'section-limited'}>
+                  {SECTION_LIMITED_MESSAGE}
+                </div>
+              )}
             </div>
           )
         })}
@@ -96,6 +116,7 @@ class ViewerSectionsList extends Component {
 const mapStateToProps = state => ({
   media: state.media.index,
   nav: state.viewer.nav,
+  onlyEnableFirstSection: state.viewer.onlyEnableFirstSection,
   play_ts: state.audio.play_ts,
   sections: state.viewer.sections,
   currentSection: state.viewer.currentSection,