feat(player): show video stats icon in theatre mode

CHANGELOG-nightly.md

@@ -1,3 +1,12 @@
+### 3.1.18
+
+-   Video stats icon now visible in theatre mode, appearing in the player controls on hover
+
+### 3.1.17
+
+-   Fixed "Hide Bits Buttons" setting not working due to Twitch UI changes
+-   Suppress info and debug logs in production builds
+
 ### 3.1.16.2000
 
 -   Updated Firefox extension URL in onboarding

CHANGELOG.md

@@ -1,3 +1,12 @@
+### 3.1.18
+
+-   Video stats icon now visible in theatre mode, appearing in the player controls on hover
+
+### 3.1.17
+
+-   Fixed "Hide Bits Buttons" setting not working due to Twitch UI changes
+-   Suppress info and debug logs in production builds
+
 ### 3.1.16
 
 -   Fixed emote menu not showing emotes with same name but different casing

src/common/Logger.ts

@@ -17,6 +17,9 @@ export class Logger {
 	}
 
 	private print(type: LogType, text: string[], extraCSS: string[], objects?: object[]): void {
+		if (import.meta.env.MODE === "production" && (type === "info" || type === "debug")) {
+			return;
+		}
 		if (this.pipe) {
 			this.pipe(type, text, extraCSS, objects);
 			return;

src/site/twitch.tv/modules/hidden-elements/HiddenElementsModule.vue

@@ -196,6 +196,7 @@ export const config = [
 }
 
 .seventv-hide-bits-buttons {
+	button[aria-label="Bits and Points Balances"],
 	button[data-a-target="bits-button"],
 	button[data-a-target="top-nav-get-bits-button"] {
 		display: none !important;

src/site/twitch.tv/modules/player/PlayerStreamInfo.vue

@@ -56,10 +56,17 @@ function openStatsOverlay() {
 }
 
 function remount() {
-	const sibling = document.querySelector<HTMLElement>("span.live-time")?.parentElement;
-	if (!sibling || sibling.parentElement?.contains(container)) return;
-
-	sibling.insertAdjacentElement("afterend", container);
+	const isTheatreMode = document.querySelector(".persistent-player--theatre") !== null;
+
+	if (isTheatreMode) {
+		const theatreTarget = document.querySelector<HTMLElement>(".player-controls__right-control-group");
+		if (!theatreTarget || theatreTarget.contains(container)) return;
+		theatreTarget.prepend(container);
+	} else {
+		const sibling = document.querySelector<HTMLElement>("span.live-time")?.parentElement;
+		if (!sibling || sibling.parentElement?.contains(container)) return;
+		sibling.insertAdjacentElement("afterend", container);
+	}
 }
 
 defineExpose({ remount });
@@ -99,10 +106,20 @@ watch(
 
 onMounted(() => {
 	remount();
-});
 
-onUnmounted(() => {
-	container.remove();
+	const playerEl = document.querySelector(".persistent-player");
+	if (!playerEl) return;
+
+	const observer = new MutationObserver(() => {
+		remount();
+	});
+
+	observer.observe(playerEl, { attributeFilter: ["class"] });
+
+	onUnmounted(() => {
+		observer.disconnect();
+		container.remove();
+	});
 });
 </script>