From 62438499500d1e731300c245826563136f5f8b4c Mon Sep 17 00:00:00 2001
From: Marcin Pietruszka <marcin@webskill.pl>
Date: Thu, 15 Sep 2022 22:07:53 +0200
Subject: [PATCH] Media Recording: Fix Canvas audio/controls (#12316)

---
 .../src/components/mediaRecording/playPauseButton.js      | 1 +
 .../src/components/mediaRecording/playbackMedia.js        | 8 +++++++-
 .../src/components/mediaRecording/videoMode.js            | 1 +
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/story-editor/src/components/mediaRecording/playPauseButton.js b/packages/story-editor/src/components/mediaRecording/playPauseButton.js
index 0f3364b926f7..6b01c41e624c 100644
--- a/packages/story-editor/src/components/mediaRecording/playPauseButton.js
+++ b/packages/story-editor/src/components/mediaRecording/playPauseButton.js
@@ -34,6 +34,7 @@ const ICON_SVG_SIZE = 72;
 
 const Controls = styled.div`
   position: absolute;
+  z-index: 2;
 `;
 
 const ButtonWrapper = styled.button.attrs({ tabIndex: -1 })`
diff --git a/packages/story-editor/src/components/mediaRecording/playbackMedia.js b/packages/story-editor/src/components/mediaRecording/playbackMedia.js
index a89d2962909c..872ca5f2bf0c 100644
--- a/packages/story-editor/src/components/mediaRecording/playbackMedia.js
+++ b/packages/story-editor/src/components/mediaRecording/playbackMedia.js
@@ -160,7 +160,12 @@ function PlaybackMedia() {
       if (hasVideoEffect && canvasRef.current) {
         canvasRef.current.getContext('2d');
         setCanvasNode(canvasRef.current);
-        setCanvasStream(canvasRef.current.captureStream());
+        const canvasStreamRaw = canvasRef.current.captureStream();
+        const liveStreamAudio = liveStream.getAudioTracks();
+        if (liveStreamAudio.length > 0) {
+          canvasStreamRaw.addTrack(liveStreamAudio[0]);
+        }
+        setCanvasStream(canvasStreamRaw);
       }
       if (videoEffect === VIDEO_EFFECTS.BLUR) {
         selfieSegmentation.onResults(onSelfieSegmentationResults);
@@ -187,6 +192,7 @@ function PlaybackMedia() {
       }
     }
     run();
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- including liveStream will cause freeze
   }, [videoEffect, hasVideoEffect, streamNode, setCanvasStream, setCanvasNode]);
 
   // Only previewing a gif means that the play button is hidden,
diff --git a/packages/story-editor/src/components/mediaRecording/videoMode.js b/packages/story-editor/src/components/mediaRecording/videoMode.js
index 9d69f05b737e..c3331e408d97 100644
--- a/packages/story-editor/src/components/mediaRecording/videoMode.js
+++ b/packages/story-editor/src/components/mediaRecording/videoMode.js
@@ -29,6 +29,7 @@ import { Switch } from '../form';
 
 const Wrapper = styled.div`
   position: absolute;
+  z-index: 2;
   top: 20px;
   right: 20px;
   width: 70px;