feat: Hide live stream chat #452

YouTube-Enhancer · Apr 26, 2024 · e823cb5 · e823cb5
1 parent fb9b6b4
commit e823cb5
Show file tree

Hide file tree

Showing 28 changed files with 168 additions and 17 deletions.
diff --git a/public/locales/ca-ES.json b/public/locales/ca-ES.json
@@ -209,6 +209,10 @@
 						"label": "Automatic theater mode",
 						"title": "Automatically enables theater mode when you load a video"
 					},
+					"hideLiveStreamChat": {
+						"label": "Hide live stream chat",
+						"title": "Hides the live stream chat"
+					},
 					"hideScrollbar": {
 						"label": "Hide scrollbar",
 						"title": "Hides the pages scrollbar"

diff --git a/public/locales/cs-CZ.json b/public/locales/cs-CZ.json
@@ -209,6 +209,10 @@
 						"label": "Automatic theater mode",
 						"title": "Automatically enables theater mode when you load a video"
 					},
+					"hideLiveStreamChat": {
+						"label": "Hide live stream chat",
+						"title": "Hides the live stream chat"
+					},
 					"hideScrollbar": {
 						"label": "Hide scrollbar",
 						"title": "Hides the pages scrollbar"

diff --git a/public/locales/de-DE.json b/public/locales/de-DE.json
@@ -209,6 +209,10 @@
 						"label": "Automatischer Theatermodus",
 						"title": "Automatisch den Theatermodus aktivieren, wenn ein Video geladen wird"
 					},
+					"hideLiveStreamChat": {
+						"label": "Hide live stream chat",
+						"title": "Hides the live stream chat"
+					},
 					"hideScrollbar": {
 						"label": "Scrollbar ausblenden",
 						"title": "Versteckt die Scrollleiste"

diff --git a/public/locales/en-GB.json b/public/locales/en-GB.json
@@ -209,6 +209,10 @@
 						"label": "Automatic theatre mode",
 						"title": "Automatically enables theatre mode when you load a video"
 					},
+					"hideLiveStreamChat": {
+						"label": "Hide live stream chat",
+						"title": "Hides the live stream chat"
+					},
 					"hideScrollbar": {
 						"label": "Hide scrollbar",
 						"title": "Hides the pages scrollbar"

diff --git a/public/locales/en-US.json b/public/locales/en-US.json
@@ -209,6 +209,10 @@
 						"label": "Automatic theater mode",
 						"title": "Automatically enables theater mode when you load a video"
 					},
+					"hideLiveStreamChat": {
+						"label": "Hide live stream chat",
+						"title": "Hides the live stream chat"
+					},
 					"hideScrollbar": {
 						"label": "Hide scrollbar",
 						"title": "Hides the pages scrollbar"

diff --git a/public/locales/en-US.json.d.ts b/public/locales/en-US.json.d.ts
@@ -143,6 +143,7 @@ interface EnUS {
 						label: "Automatic theater mode";
 						title: "Automatically enables theater mode when you load a video";
 					};
+					hideLiveStreamChat: { label: "Hide live stream chat"; title: "Hides the live stream chat" };
 					hideScrollbar: { label: "Hide scrollbar"; title: "Hides the pages scrollbar" };
 					hideShorts: { label: "Hide shorts"; title: "Hides all shorts" };
 					loopButton: {

diff --git a/public/locales/es-ES.json b/public/locales/es-ES.json
@@ -209,6 +209,10 @@
 						"label": "Modo cine automático",
 						"title": "Activar automáticamente el modo cine al cargar un vídeo"
 					},
+					"hideLiveStreamChat": {
+						"label": "Hide live stream chat",
+						"title": "Hides the live stream chat"
+					},
 					"hideScrollbar": {
 						"label": "Ocultar barra de desplazamiento",
 						"title": "Oculta la barra de desplazamiento de la página"

diff --git a/public/locales/fa-IR.json b/public/locales/fa-IR.json
@@ -209,6 +209,10 @@
 						"label": "Automatic theater mode",
 						"title": "Automatically enables theater mode when you load a video"
 					},
+					"hideLiveStreamChat": {
+						"label": "Hide live stream chat",
+						"title": "Hides the live stream chat"
+					},
 					"hideScrollbar": {
 						"label": "Hide scrollbar",
 						"title": "Hides the pages scrollbar"

diff --git a/public/locales/fr-FR.json b/public/locales/fr-FR.json
@@ -209,6 +209,10 @@
 						"label": "Mode cinéma automatique",
 						"title": "Activer automatiquement le mode cinéma lorsque vous chargez une vidéo"
 					},
+					"hideLiveStreamChat": {
+						"label": "Hide live stream chat",
+						"title": "Hides the live stream chat"
+					},
 					"hideScrollbar": {
 						"label": "Cacher la barre de défilement",
 						"title": "Cache la barre de défilement des pages"

diff --git a/public/locales/he-IL.json b/public/locales/he-IL.json
@@ -209,6 +209,10 @@
 						"label": "Automatic theater mode",
 						"title": "Automatically enables theater mode when you load a video"
 					},
+					"hideLiveStreamChat": {
+						"label": "Hide live stream chat",
+						"title": "Hides the live stream chat"
+					},
 					"hideScrollbar": {
 						"label": "Hide scrollbar",
 						"title": "Hides the pages scrollbar"

diff --git a/public/locales/hi-IN.json b/public/locales/hi-IN.json
@@ -209,6 +209,10 @@
 						"label": "Automatic theater mode",
 						"title": "Automatically enables theater mode when you load a video"
 					},
+					"hideLiveStreamChat": {
+						"label": "Hide live stream chat",
+						"title": "Hides the live stream chat"
+					},
 					"hideScrollbar": {
 						"label": "Hide scrollbar",
 						"title": "Hides the pages scrollbar"

diff --git a/public/locales/it-IT.json b/public/locales/it-IT.json
@@ -209,6 +209,10 @@
 						"label": "Modalità teatro automatica",
 						"title": "Attiva automaticamente la modalità teatro quando carichi un video"
 					},
+					"hideLiveStreamChat": {
+						"label": "Hide live stream chat",
+						"title": "Hides the live stream chat"
+					},
 					"hideScrollbar": {
 						"label": "Nascondi barra scorrimento",
 						"title": "Nasconde la barra di scorrimento delle pagine"

diff --git a/public/locales/ja-JP.json b/public/locales/ja-JP.json
@@ -209,6 +209,10 @@
 						"label": "自動シアターモード",
 						"title": "動画の読み込み時に自動的にシアターモードを有効にする"
 					},
+					"hideLiveStreamChat": {
+						"label": "Hide live stream chat",
+						"title": "Hides the live stream chat"
+					},
 					"hideScrollbar": {
 						"label": "スクロールバー隠す機能",
 						"title": "ページのスクロールバーを隠す"

diff --git a/public/locales/pl-PL.json b/public/locales/pl-PL.json
@@ -209,6 +209,10 @@
 						"label": "Automatic theater mode",
 						"title": "Automatically enables theater mode when you load a video"
 					},
+					"hideLiveStreamChat": {
+						"label": "Hide live stream chat",
+						"title": "Hides the live stream chat"
+					},
 					"hideScrollbar": {
 						"label": "Hide scrollbar",
 						"title": "Hides the pages scrollbar"

diff --git a/public/locales/pt-BR.json b/public/locales/pt-BR.json
@@ -209,6 +209,10 @@
 						"label": "Modo teatro automático",
 						"title": "Ativar automaticamente o modo teatro quando você carregar um vídeo"
 					},
+					"hideLiveStreamChat": {
+						"label": "Hide live stream chat",
+						"title": "Hides the live stream chat"
+					},
 					"hideScrollbar": {
 						"label": "Ocultar a barra de rolagem",
 						"title": "Oculta a barra de rolagem da página"

diff --git a/public/locales/ru-RU.json b/public/locales/ru-RU.json
@@ -209,6 +209,10 @@
 						"label": "Включить автоматический режим кинотеатра",
 						"title": "Автоматически включать режим кинотеатра при загрузке видео"
 					},
+					"hideLiveStreamChat": {
+						"label": "Hide live stream chat",
+						"title": "Hides the live stream chat"
+					},
 					"hideScrollbar": {
 						"label": "Включить скрытие полосы прокрутки страницы",
 						"title": "Скрывает полосу прокрутки страницы"

diff --git a/public/locales/sv-SE.json b/public/locales/sv-SE.json
@@ -209,6 +209,10 @@
 						"label": "Automatiskt teaterläge",
 						"title": "Aktiverar automatiskt teaterläge när du startar en video"
 					},
+					"hideLiveStreamChat": {
+						"label": "Hide live stream chat",
+						"title": "Hides the live stream chat"
+					},
 					"hideScrollbar": {
 						"label": "Dölj rullningslisten",
 						"title": "Döljer sidornas rullningsfält"

diff --git a/public/locales/tr-TR.json b/public/locales/tr-TR.json
@@ -209,6 +209,10 @@
 						"label": "Otomatik tiyatro modu",
 						"title": "Video yüklediğinizde tiyatro modunu otomatik olarak etkinleştirir"
 					},
+					"hideLiveStreamChat": {
+						"label": "Hide live stream chat",
+						"title": "Hides the live stream chat"
+					},
 					"hideScrollbar": {
 						"label": "Kaydırma çubuğu gizlemeyi etkinleştir",
 						"title": "Sayfa kaydırma çubuğunu gizler"

diff --git a/public/locales/zh-CN.json b/public/locales/zh-CN.json
@@ -209,6 +209,10 @@
 						"label": "自动启用剧场模式",
 						"title": "当视频打开时，自动启用剧场模式"
 					},
+					"hideLiveStreamChat": {
+						"label": "Hide live stream chat",
+						"title": "Hides the live stream chat"
+					},
 					"hideScrollbar": {
 						"label": "启用隐藏滚动条",
 						"title": "隐藏页面滚动条"

diff --git a/public/locales/zh-TW.json b/public/locales/zh-TW.json
@@ -209,6 +209,10 @@
 						"label": "自動啟用劇院模式",
 						"title": "載入影片時自動啟用劇院模式"
 					},
+					"hideLiveStreamChat": {
+						"label": "Hide live stream chat",
+						"title": "Hides the live stream chat"
+					},
 					"hideScrollbar": {
 						"label": "隱藏捲軸",
 						"title": "隱藏頁面捲軸"

diff --git a/src/components/Settings/Settings.tsx b/src/components/Settings/Settings.tsx
@@ -656,6 +656,14 @@ export default function Settings() {
 						title={t("settings.sections.miscellaneous.features.hideShorts.title")}
 						type="checkbox"
 					/>
+					<Setting
+						checked={settings.enable_hide_live_stream_chat?.toString() === "true"}
+						id="enable_hide_live_stream_chat"
+						label={t("settings.sections.miscellaneous.features.hideLiveStreamChat.label")}
+						onChange={setCheckboxOption("enable_hide_live_stream_chat")}
+						title={t("settings.sections.miscellaneous.features.hideLiveStreamChat.title")}
+						type="checkbox"
+					/>
 				</SettingSection>
 				<SettingSection>
 					<SettingTitle title={t("settings.sections.videoHistory.title")} />
@@ -1087,15 +1095,15 @@ export default function Settings() {
 				</SettingSection>
 				<div className="sticky bottom-0 left-0 z-10 flex justify-between gap-1 bg-[#f5f5f5] p-2 dark:bg-[#181a1b]">
 					<input
-						className="danger p-2 text-sm dark:hover:bg-[rgba(24,26,27,0.5)] sm:text-base md:text-lg"
+						className="danger p-2 text-sm sm:text-base md:text-lg dark:hover:bg-[rgba(24,26,27,0.5)]"
 						id="clear_data_button"
 						onClick={clearData}
 						title={t("settings.sections.bottomButtons.clear.title")}
 						type="button"
 						value={t("settings.sections.bottomButtons.clear.value")}
 					/>
 					<input
-						className="accent p-2 text-sm dark:hover:bg-[rgba(24,26,27,0.5)] sm:text-base md:text-lg"
+						className="accent p-2 text-sm sm:text-base md:text-lg dark:hover:bg-[rgba(24,26,27,0.5)]"
 						id="import_settings_button"
 						onClick={importSettings}
 						title={t("settings.sections.importExportSettings.importButton.title")}
@@ -1104,7 +1112,7 @@ export default function Settings() {
 					/>
 					{isPopup && (
 						<button
-							className="accent flex items-center justify-center p-2 text-sm dark:hover:bg-[rgba(24,26,27,0.5)] sm:text-base md:text-lg"
+							className="accent flex items-center justify-center p-2 text-sm sm:text-base md:text-lg dark:hover:bg-[rgba(24,26,27,0.5)]"
 							id="openinnewtab_button"
 							onClick={() => openInNewTab("src/pages/options/index.html")}
 							title={t("settings.sections.bottomButtons.openTab.title")}
@@ -1114,7 +1122,7 @@ export default function Settings() {
 						</button>
 					)}
 					<input
-						className="accent p-2 text-sm dark:hover:bg-[rgba(24,26,27,0.5)] sm:text-base md:text-lg"
+						className="accent p-2 text-sm sm:text-base md:text-lg dark:hover:bg-[rgba(24,26,27,0.5)]"
 						id="export_settings_button"
 						onClick={exportSettings}
 						title={t("settings.sections.importExportSettings.exportButton.title")}
@@ -1123,7 +1131,7 @@ export default function Settings() {
 					/>
 					{notifications.filter((n) => n.action === "reset_settings").length > 0 ?
 						<input
-							className="danger p-2 text-sm dark:hover:bg-[rgba(24,26,27,0.5)] sm:text-base md:text-lg"
+							className="danger p-2 text-sm sm:text-base md:text-lg dark:hover:bg-[rgba(24,26,27,0.5)]"
 							id="confirm_button"
 							onClick={() => {
 								const notificationToRemove = notifications.find((n) => n.action === "reset_settings");
@@ -1146,7 +1154,7 @@ export default function Settings() {
 							value={t("settings.sections.bottomButtons.confirm.value")}
 						/>
 					:	<input
-							className="warning p-2 text-sm dark:hover:bg-[rgba(24,26,27,0.5)] sm:text-base md:text-lg"
+							className="warning p-2 text-sm sm:text-base md:text-lg dark:hover:bg-[rgba(24,26,27,0.5)]"
 							id="reset_button"
 							onClick={resetOptions}
 							title={t("settings.sections.bottomButtons.reset.title")}

diff --git a/src/features/hideLiveStreamChat/index.css b/src/features/hideLiveStreamChat/index.css
@@ -0,0 +1,3 @@
+.yte-hide-live-stream-chat {
+	display: none !important;
+}
diff --git a/src/features/hideLiveStreamChat/index.ts b/src/features/hideLiveStreamChat/index.ts
@@ -0,0 +1,42 @@
+import type { YouTubePlayerDiv } from "@/src/types";
+
+import { type ElementClassPair, modifyElementsClassList, waitForAllElements, waitForSpecificMessage } from "@/src/utils/utilities";
+
+import "./index.css";
+const liveStreamChatElementPairs: ElementClassPair[] = [
+	{
+		className: "yte-hide-live-stream-chat",
+		selector: "div#chat-container"
+	},
+	{
+		className: "yte-hide-live-stream-chat",
+		selector: "div#chat-container #chat"
+	},
+	{
+		className: "yte-hide-live-stream-chat",
+		selector: "#full-bleed-container #panels-full-bleed-container"
+	}
+];
+export async function enableHideLiveStreamChat() {
+	const optionsData = await waitForSpecificMessage("options", "request_data", "content");
+	const {
+		data: {
+			options: { enable_hide_live_stream_chat: enableHideLiveStreamChat }
+		}
+	} = optionsData;
+	if (!enableHideLiveStreamChat) return;
+	await waitForAllElements(["div#player", "div#player-wide-container", "div#video-container", "div#player-container"]);
+	const player = document.querySelector<YouTubePlayerDiv>("div#movie_player");
+	if (!player) return;
+	const playerData = await player.getVideoData();
+	if (!playerData.isLive) return;
+	modifyElementsClassList("add", liveStreamChatElementPairs);
+}
+
+export async function disableHideLiveStreamChat() {
+	const player = document.querySelector<YouTubePlayerDiv>("div#movie_player");
+	if (!player) return;
+	const playerData = await player.getVideoData();
+	if (!playerData.isLive) return;
+	modifyElementsClassList("remove", liveStreamChatElementPairs);
+}
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
@@ -30,18 +30,18 @@ export const localePercentages: Record<AvailableLocales, number> = {
   "en-GB": 2,
   "es-ES": 63,
   "fa-IR": 0,
-  "fr-FR": 67,
+  "fr-FR": 66,
   "he-IL": 0,
   "hi-IN": 0,
-  "it-IT": 100,
-  "ja-JP": 100,
+  "it-IT": 99,
+  "ja-JP": 99,
   "pl-PL": 0,
-  "pt-BR": 74,
-  "ru-RU": 100,
-  "sv-SE": 98,
-  "tr-TR": 75,
-  "zh-CN": 100,
-  "zh-TW": 95
+  "pt-BR": 73,
+  "ru-RU": 99,
+  "sv-SE": 97,
+  "tr-TR": 74,
+  "zh-CN": 99,
+  "zh-TW": 94
 };
 export const localeDirection: Record<AvailableLocales, "ltr" | "rtl"> = {
 	"ca-ES": "ltr",

diff --git a/src/pages/content/index.ts b/src/pages/content/index.ts
@@ -275,6 +275,11 @@ const storageChangeHandler = async (changes: StorageChanges, areaName: string) =
 				playerSpeed: options.player_speed
 			});
 		},
+		enable_hide_live_stream_chat: (__oldValue, newValue) => {
+			sendExtensionOnlyMessage("hideLiveStreamChatChange", {
+				hideLiveStreamChatEnabled: newValue
+			});
+		},
 		enable_hide_scrollbar: (__oldValue, newValue) => {
 			sendExtensionOnlyMessage("hideScrollBarChange", {
 				hideScrollBarEnabled: newValue