1 files changed, 14 insertions, 4 deletions
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
index 6fa8f4e..c8eb68e 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
@@ -38,14 +38,21 @@ export const Arrow = React.memo(({ type }) => (
 
 // volume toggle
 
-export const VolumeControl = React.memo(({ volume }) => (
-  <div className={volume ? 'volume' : 'volume muted'} onClick={() => actions.audio.setVolume(volume ? 0.0 : 1.0)}>
+export const VolumeControlIcon = ({ volume }) => (
+  <div
+    className={volume ? 'volume' : 'volume muted'}
+    onClick={e => {
+      e && e.stopPropagation()
+      actions.audio.setVolume(volume ? 0.0 : 1.0)
+    }}
+  >
     <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
       <path d="M5,25h4.17l0,2.5H5V25z M15.33,27.5h4.17V20h-4.17V27.5z M20.5,27.5h4.17v-10H20.5V27.5z M25.67,27.5h4.17V15h-4.17V27.5z
        M30.83,27.5H35v-15h-4.17V27.5z M10.17,27.5h4.17v-5h-4.17V27.5z"/>
     </svg>
   </div>
-))
+)
+export const VolumeControl = React.memo(VolumeControlIcon)
 
 // play / pause button
 
@@ -64,7 +71,10 @@ export const PlayButton = ({ playing }) => {
   return (
     <div
       className={playing ? 'playToggle playing' : 'playToggle paused'}
-      onClick={() => playing ? actions.audio.pause() : actions.viewer.playFromClick()}
+      onClick={e => {
+        e && e.stopPropagation()
+        playing ? actions.audio.pause() : actions.viewer.playFromClick()
+      }}
     >
       {playing ? PauseIcon : PlayIcon}
     </div>