proper keyboard movement in vitrine

3 files changed, 25 insertions, 8 deletions

diff --git a/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js b/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js
index 5b78295..4ae72c7 100644
--- a/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js
+++ b/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js
@@ -59,11 +59,7 @@ const VitrineNavigation = ({ media, index, direction }) => {
   }
   return (
     <div className={className} onClick={() => {
-      if (shouldClose) {
-        actions.viewer.closeVitrineModal()
-      } else {
-        actions.viewer.setVitrineIndex(targetIndex)
-      }
+      actions.viewer.vitrineGo(direction)
     }}>
       <div className='vitrine-nav-content'>
         {isPrev && <Arrow type='left'/>}
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 f783b9b..9e43c32 100644
--- a/animism-align/frontend/app/views/viewer/player/player.container.js
+++ b/animism-align/frontend/app/views/viewer/player/player.container.js
@@ -26,7 +26,7 @@ class PlayerContainer extends Component {
     if (document.activeElement !== document.body) {
       return
     }
-    const { currentSection, audio } = this.props
+    const { currentSection, audio, viewer } = this.props
     const { play_ts } = audio
     let start_ts = 0
     let end_ts = 0
@@ -43,12 +43,20 @@ class PlayerContainer extends Component {
       case 37: // left
       case 38: // up
         e.preventDefault()
-        actions.audio.seek(clamp(play_ts - 5.0, start_ts, end_ts))
+        if (viewer.vitrineModal.open) {
+          actions.viewer.vitrineGo(-1)
+        } else {
+          actions.audio.seek(clamp(play_ts - 5.0, start_ts, end_ts))
+        }
         break
       case 39: // right
       case 40: // down
         e.preventDefault()
-        actions.audio.seek(clamp(play_ts + 5.0, start_ts, end_ts))
+        if (viewer.vitrineModal.open) {
+          actions.viewer.vitrineGo(+1)
+        } else {
+          actions.audio.seek(clamp(play_ts + 5.0, start_ts, end_ts))
+        }
         break
     }
   }
@@ -99,6 +107,7 @@ class PlayerContainer extends Component {
 }
 
 const mapStateToProps = state => ({
+  viewer: state.viewer,
   audio: state.audio,
   sections: state.viewer.sections,
   currentSection: state.viewer.currentSection,
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index e8aaf0d..5673fd8 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -218,6 +218,18 @@ export const closeVitrineModal = (media, id) => dispatch => {
 export const setVitrineIndex = (index) => dispatch => {
   dispatch({ type: types.viewer.set_vitrine_index, index })
 }
+export const vitrineGo = direction => dispatch => {
+  const { vitrineModal } = store.getState().viewer
+  const { media, index } = vitrineModal
+  const targetIndex = index + direction
+  const shouldClose = (targetIndex < 0) || (targetIndex === media.settings.image_order.length)
+  if (shouldClose) {
+    actions.viewer.closeVitrineModal()
+  } else {
+    actions.viewer.setVitrineIndex(targetIndex)
+  }
+
+}
 
 export const openGrowl = message => dispatch => {
   dispatch({ type: types.viewer.open_growl, message })