Automatically play sound in MediaViewer when play tapped in SoundRecorder (#1408)

src/components/MediaViewer/MainMediaDisplay.js

@@ -17,6 +17,7 @@ import AttributionButton from "./AttributionButton";
 import CustomImageZoom from "./CustomImageZoom";
 
 type Props = {
+  autoPlaySound?: boolean, // automatically start playing a sound when it is visible
   editable?: boolean,
   horizontalScroll: any,
   onDeletePhoto?: Function,
@@ -38,6 +39,7 @@ type Props = {
 }
 
 const MainMediaDisplay = ( {
+  autoPlaySound,
   editable,
   horizontalScroll,
   onDeletePhoto = ( ) => { },
@@ -105,6 +107,7 @@ const MainMediaDisplay = ( {
       }}
     >
       <SoundContainer
+        autoPlay={autoPlaySound}
         sizeClass="h-72 w-screen"
         sound={sound}
         isVisible={items.indexOf( sound ) === selectedMediaIndex}
@@ -123,6 +126,7 @@ const MainMediaDisplay = ( {
       }
     </View>
   ), [
+    autoPlaySound,
     displayHeight,
     editable,
     items,

src/components/MediaViewer/MediaViewer.js

@@ -20,6 +20,7 @@ import MediaSelector from "./MediaSelector";
 import MediaViewerHeader from "./MediaViewerHeader";
 
 type Props = {
+  autoPlaySound?: boolean, // automatically start playing a sound when it is visible
   editable?: boolean,
   // Optional component to use as the header
   header?: Function,
@@ -42,6 +43,7 @@ type Props = {
 }
 
 const MediaViewer = ( {
+  autoPlaySound,
   editable,
   header,
   onClose = ( ) => { },
@@ -117,6 +119,7 @@ const MediaViewer = ( {
           )
       }
       <MainMediaDisplay
+        autoPlaySound={autoPlaySound}
         editable={editable}
         photos={photos}
         sounds={sounds}

src/components/MediaViewer/MediaViewerModal.js

@@ -6,6 +6,7 @@ import type { Node } from "react";
 import React from "react";
 
 type Props = {
+  autoPlaySound?: boolean, // automatically start playing a sound when it is visible
   editable?: boolean,
   // Optional component to use as the header
   header?: Function,
@@ -29,6 +30,7 @@ type Props = {
 }
 
 const MediaViewerModal = ( {
+  autoPlaySound,
   editable,
   header,
   onClose = ( ) => { },
@@ -46,6 +48,7 @@ const MediaViewerModal = ( {
     disableSwipeDirection
     modal={(
       <MediaViewer
+        autoPlaySound={autoPlaySound}
         editable={editable}
         header={header}
         onClose={onClose}

src/components/ObsDetails/SoundContainer.js

@@ -39,7 +39,12 @@ const SoundSlider = ( { playBackState, onSlidingComplete } ) => {
   );
 };
 
-const SoundContainer = ( { sizeClass, isVisible, sound } ) => {
+const SoundContainer = ( {
+  autoPlay,
+  isVisible,
+  sizeClass,
+  sound
+} ) => {
   const { isInternetReachable } = useNetInfo( );
   const playerRef = useRef( new AudioRecorderPlayer( ) );
   const player = playerRef.current;
@@ -167,6 +172,13 @@ const SoundContainer = ( { sizeClass, isVisible, sound } ) => {
     await stopSound( );
   }, [stopSound] ) );
 
+  // if autoPlay was selected and this is visible, start playback automatically
+  useEffect( ( ) => {
+    if ( isVisible && autoPlay ) {
+      playSound( );
+    }
+  }, [autoPlay, isVisible, playSound] );
+
   if ( isInternetReachable === false ) {
     return (
       <OfflineNotice

src/components/SoundRecorder/SoundRecorder.js

@@ -277,6 +277,7 @@ const SoundRecorder = (): Node => {
         showModal={mediaViewerVisible}
         onClose={( ) => setMediaViewerVisible( false )}
         sounds={sounds}
+        autoPlaySound
       />
       <BottomSheet
         headerText="RECORDING SOUNDS"