feat(theater-mode): add auto theater mode setting

CHANGELOG-nightly.md

@@ -1,3 +1,12 @@
+### Unreleased
+
+-   Video stats icon now visible in theater mode player controls
+-   Added auto theater mode setting
+
+### 3.1.17
+
+-   Fixed "Hide Bits Buttons" setting not working due to Twitch UI changes
+
 ### 3.1.16.2000
 
 -   Updated Firefox extension URL in onboarding

CHANGELOG.md

@@ -1,3 +1,12 @@
+### Unreleased
+
+-   Video stats icon now visible in theater mode player controls
+-   Added auto theater mode setting
+
+### 3.1.17
+
+-   Fixed "Hide Bits Buttons" setting not working due to Twitch UI changes
+
 ### 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/theater-mode/TheaterModeModule.vue

@@ -0,0 +1,46 @@
+<template />
+
+<script setup lang="ts">
+import { inject, ref, watch } from "vue";
+import { watchDebounced } from "@vueuse/shared";
+import { SITE_NAV_PATHNAME } from "@/common/Constant";
+import { declareModule } from "@/composable/useModule";
+import { declareConfig, useConfig } from "@/composable/useSettings";
+
+const { markAsReady } = declareModule("theater-mode", {
+	name: "Theater Mode",
+	depends_on: ["settings"],
+});
+
+const autoTheaterMode = useConfig<boolean>("ui.auto_theater_mode");
+const pathname = inject(SITE_NAV_PATHNAME) ?? ref("");
+
+function enterTheaterMode() {
+	if (!autoTheaterMode.value) return;
+
+	const btn = document.querySelector<HTMLElement>("[aria-label='Theatre Mode (alt+t)']");
+	if (!btn) return;
+
+	btn.click();
+}
+
+watchDebounced(pathname, enterTheaterMode, { debounce: 1000, immediate: true });
+
+watch(autoTheaterMode, (enabled) => {
+	if (!enabled) return;
+	enterTheaterMode();
+});
+
+markAsReady();
+</script>
+
+<script lang="ts">
+export const config = [
+	declareConfig("ui.auto_theater_mode", "TOGGLE", {
+		path: ["Appearance", "Interface"],
+		label: "Auto Theater Mode",
+		hint: "Automatically enter theater mode when opening a stream.",
+		defaultValue: false,
+	}),
+];
+</script>