ensure media elements have their source blocked correctly (#3414)

See highlight/rrweb#97

* Fixes a bug in the `needsMask` processing that would stop recording
children if `highlight-mask` was set on a div with `enableStrictPrivacy`
set globally.
* Adds source obfuscation for other media elements: video, audio, and
source.
* brings back client visibility listener start/stop since that was not
the cause of this bug.

Testing: [gamma app with new client recording with strict privacy
on](https://app.highlight.io/1/sessions/Zmu6YxT5nVUbkUnnN5U7tNRckUGU)

before the fix -
https://app.highlight.io/649/sessions/o5jfoC9BXXjBkxqwpVbNNDWK3hcI
after the fix -
https://app.highlight.io/649/sessions/9DR6a5arNtGacbkr2pwyPn5ENh3E

Author: Vadman97

client/src/index.tsx

@@ -764,6 +764,7 @@ SessionSecureID: ${this.sessionData.sessionSecureID}`,
 		this._lastVisibilityChangeTime = new Date().getTime()
 		this.logger.log(`Detected window ${hidden ? 'hidden' : 'visible'}.`)
 		if (!hidden) {
+			await this.initialize()
 			this.addCustomEvent('TabHidden', false)
 		} else {
 			this.addCustomEvent('TabHidden', true)
@@ -794,6 +795,7 @@ SessionSecureID: ${this.sessionData.sessionSecureID}`,
 					}
 				}
 			}
+			this.stopRecording()
 		}
 	}
 

docs

@@ -1,6 +1,6 @@
 {
 	"name": "highlight.run",
-	"version": "5.1.6",
+	"version": "5.1.7",
 	"scripts": {
 		"build": "yarn typegen && rollup -c",
 		"dev": "doppler run -- rollup -c -w",

firstload/package.json

@@ -473,6 +473,42 @@ export const Buttons = () => {
 						}
 					/>
 				</Box>
+
+				<Box mb="24">
+					<Box display="flex">
+						{[
+							'asdf',
+							'highlight-mask',
+							'highlight-block',
+							'highlight-ignored',
+						].map((c) => (
+							<Box
+								key={c}
+								display="flex"
+								flexDirection="column"
+								className={c}
+								id={`video-test-${c}`}
+								data-id={`video-test-${c}`}
+							>
+								<span>class `{c}`</span>
+								<video
+									controls={true}
+									width="250"
+									className={`asdf-${c}`}
+								>
+									<source
+										src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
+										type="video/webm"
+									/>
+									<source
+										src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
+										type="video/mp4"
+									/>
+								</video>
+							</Box>
+						))}
+					</Box>
+				</Box>
 			</div>
 		</div>
 	)