Bring us into compliance with YouTube API terms (#2111)

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>

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
 	 *********************************************************/

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).