From 720e41ccec9fecdb4dc2a889f55d1973ff72fde6 Mon Sep 17 00:00:00 2001
From: Mia <49593536+mia-pi-git@users.noreply.github.com>
Date: Mon, 10 Apr 2023 21:39:05 -0500
Subject: [PATCH] Bring us into compliance with YouTube API terms (#2111)

---
 index.template.html      |  2 +-
 src/battle-log.ts        | 58 ++++++++++++++++++++++++++++++++++++++--
 website/pages/privacy.md |  5 +++-
 3 files changed, 61 insertions(+), 4 deletions(-)

diff --git a/index.template.html b/index.template.html
index dcb3cc3bc..3aac30a1e 100644
--- a/index.template.html
+++ b/index.template.html
@@ -64,7 +64,7 @@ https://psim.us/dev
 	</div>
 	<div class="mainmenufooter">
 		<div class="bgcredit"></div>
-		<small><a href="//dex.pokemonshowdown.com/" target="_blank">Pok&eacute;dex</a> | <a href="//replay.pokemonshowdown.com/" target="_blank">Replays</a> | <a href="//pokemonshowdown.com/rules" target="_blank">Rules</a> | <a href="//pokemonshowdown.com/credits" target="_blank">Credits</a> | <a href="http://smogon.com/forums/" target="_blank">Forum</a></small>
+		<small><a href="//dex.pokemonshowdown.com/" target="_blank">Pok&eacute;dex</a> | <a href="//replay.pokemonshowdown.com/" target="_blank">Replays</a> | <a href="//pokemonshowdown.com/rules" target="_blank">Rules</a> | <a href="//pokemonshowdown.com/credits" target="_blank">Credits</a> | <a href="http://smogon.com/forums/" target="_blank">Forum</a> | <a href="//pokemonshowdown.com/privacy" target="_blank">Privacy policy</a></small>
 	</div>
 </div></div>
 <script>
diff --git a/src/battle-log.ts b/src/battle-log.ts
index 56dc3d989..cbacd789c 100644
--- a/src/battle-log.ts
+++ b/src/battle-log.ts
@@ -741,6 +741,8 @@ export class BattleLog {
 		};
 	})();
 
+	static players: any[] = [];
+	static ytLoading: Promise<void> | null = null;
 	static tagPolicy: ((tagName: string, attribs: string[]) => any) | null = null;
 	static initSanitizeHTML() {
 		if (this.tagPolicy) return;
@@ -899,12 +901,15 @@ export class BattleLog {
 				if (!videoId) return {tagName: 'img', attribs: ['alt', `invalid src for <youtube>`]};
 
 				const time = /(?:\?|&)(?:t|start)=([0-9]+)/.exec(src)?.[1];
-
+				this.players.push(null);
+				const idx = this.players.length;
+				this.initYoutubePlayer(idx);
 				return {
 					tagName: 'iframe',
 					attribs: [
+						'id', `youtube-iframe-${idx}`,
 						'width', width, 'height', height,
-						'src', `https://www.youtube.com/embed/${videoId}${time ? `?start=${time}` : ''}`,
+						'src', `https://www.youtube.com/embed/${videoId}?enablejsapi=1&playsinline=1${time ? `&start=${time}` : ''}`,
 						'frameborder', '0', 'allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture', 'allowfullscreen', 'allowfullscreen',
 					],
 				};
@@ -1016,6 +1021,55 @@ export class BattleLog {
 		this.localizeTime);
 	}
 
+	static initYoutubePlayer(idx: number) {
+		const id = `youtube-iframe-${idx}`;
+		const loadPlayer = () => {
+			if (!$(`#${id}`).length) return;
+			const player = new window.YT.Player(id, {
+				events: {
+					onStateChange: (event: any) => {
+						if (event.data === window.YT.PlayerState.PLAYING) {
+							for (const curPlayer of BattleLog.players) {
+								if (player === curPlayer) continue;
+								curPlayer?.pauseVideo?.();
+							}
+						}
+					},
+				},
+			});
+			this.players[idx - 1] = player;
+		};
+		// wait for html element to be in DOM
+		this.ensureYoutube().then(() => {
+			setTimeout(() => loadPlayer(), 300);
+		});
+	}
+
+	static ensureYoutube(): Promise<void> {
+		if (this.ytLoading) return this.ytLoading;
+
+		this.ytLoading = new Promise(resolve => {
+			const el = document.createElement('script');
+			el.type = 'text/javascript';
+			el.async = true;
+			el.src = 'https://youtube.com/iframe_api';
+			el.onload = () => {
+				// since the src loads more files remotely we'll just wait
+				// until the player exists
+				const loopCheck = () => {
+					if (!window.YT?.Player) {
+						setTimeout(() => loopCheck(), 300);
+					} else {
+						resolve();
+					}
+				};
+				loopCheck();
+			};
+			document.body.appendChild(el);
+		});
+		return this.ytLoading;
+	}
+
 	/*********************************************************
 	 * Replay files
 	 *********************************************************/
diff --git a/website/pages/privacy.md b/website/pages/privacy.md
index e348c7ed1..7e2711def 100644
--- a/website/pages/privacy.md
+++ b/website/pages/privacy.md
@@ -28,5 +28,8 @@ We reserve the right (but not the obligation) to keep text logs of all chatting
 
 ## Other services
 
-We use several Google APIs to help improve chat experience. 
+We (the `API Client`) use several Google APIs, including YouTube API Services, to help improve chat experience. 
+
+The `API Client` allows third parties to serve content, including advertisements.
+
 [Review Google's privacy policy](https://policies.google.com/privacy).