From b45886bf2af1083b156a252eedde92bf01255c81 Mon Sep 17 00:00:00 2001
From: iw2d <neer5684@gmail.com>
Date: Sat, 29 Jul 2023 15:47:36 +0545
Subject: [PATCH] separate action onclicking vod and live player

---
 CHANGELOG-nightly.md                          |  1 +
 .../modules/player/PlayerController.vue       | 29 ++++++++++++++-----
 .../twitch.tv/modules/player/PlayerModule.vue | 22 ++++++++++++++
 src/types/twitch.d.ts                         |  1 +
 4 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG-nightly.md b/CHANGELOG-nightly.md
index feebff161..650eb8b40 100644
--- a/CHANGELOG-nightly.md
+++ b/CHANGELOG-nightly.md
@@ -11,6 +11,7 @@
 -   Fixed an issue where emotes would take a long time to load if external emote providers gave slow response times
 -   Fixed a regression in previous nightly build causing channel emote sets to not receive EventAPI subscriptions
 -   Removed old deprecated fallback cosmetics fetching using the v2 API
+-	Added ability to set separate actions on clicking VOD and live video player 
 
 ### 3.0.14.1000
 
diff --git a/src/site/twitch.tv/modules/player/PlayerController.vue b/src/site/twitch.tv/modules/player/PlayerController.vue
index d20f2ba0c..79e1502be 100644
--- a/src/site/twitch.tv/modules/player/PlayerController.vue
+++ b/src/site/twitch.tv/modules/player/PlayerController.vue
@@ -19,7 +19,7 @@ const props = defineProps<{
 
 const shouldHideContentWarning = useConfig<boolean>("player.skip_content_restriction");
 const actionOnClick = useConfig<number>("player.action_onclick");
-
+const actionOnClickVOD = useConfig<number>("player.action_onclick_vod");
 const contentWarning = ref<ReactComponentHook<Twitch.VideoPlayerContentRestriction> | null>(null);
 const playerOverlay = ref<HTMLElement | null>(null);
 
@@ -68,12 +68,26 @@ watchEffect(() => {
 		);
 		if (!playerOverlay.value) return;
 
-		if (actionOnClick.value === 1) {
-			defineNamedEventHandler(playerOverlay.value, "PlayerActionOnClick", "click", togglePause);
-		} else if (actionOnClick.value === 2) {
-			defineNamedEventHandler(playerOverlay.value, "PlayerActionOnClick", "click", toggleMute);
-		} else {
-			unsetNamedEventHandler(playerOverlay.value, "PlayerActionOnClick", "click");
+		const isLiveOrVOD =
+			props.inst.component.props.children.props.children.props.children.props.children.props.children.props
+				.children.props.children.props.children.props.children.props.children.props.content.type;
+
+		if (isLiveOrVOD === "vod") {
+			if (actionOnClickVOD.value === 1) {
+				defineNamedEventHandler(playerOverlay.value, "PlayerActionOnClick", "click", togglePause);
+			} else if (actionOnClickVOD.value === 2) {
+				defineNamedEventHandler(playerOverlay.value, "PlayerActionOnClick", "click", toggleMute);
+			} else {
+				unsetNamedEventHandler(playerOverlay.value, "PlayerActionOnClick", "click");
+			}
+		} else if (isLiveOrVOD === "live") {
+			if (actionOnClick.value === 1) {
+				defineNamedEventHandler(playerOverlay.value, "PlayerActionOnClick", "click", togglePause);
+			} else if (actionOnClick.value === 2) {
+				defineNamedEventHandler(playerOverlay.value, "PlayerActionOnClick", "click", toggleMute);
+			} else {
+				unsetNamedEventHandler(playerOverlay.value, "PlayerActionOnClick", "click");
+			}
 		}
 	}
 });
@@ -101,6 +115,7 @@ function defineClickHandler() {
 
 // watch for setting changes of the "action"
 watch(actionOnClick, defineClickHandler);
+watch(actionOnClickVOD, defineClickHandler);
 
 onUnmounted(() => {
 	if (contentWarning.value) {
diff --git a/src/site/twitch.tv/modules/player/PlayerModule.vue b/src/site/twitch.tv/modules/player/PlayerModule.vue
index c3bae6238..15a0dab92 100644
--- a/src/site/twitch.tv/modules/player/PlayerModule.vue
+++ b/src/site/twitch.tv/modules/player/PlayerModule.vue
@@ -89,5 +89,27 @@ export const config = [
 		],
 		defaultValue: 0,
 	}),
+	declareConfig("player.action_onclick", "DROPDOWN", {
+		path: ["Player", ""],
+		label: "Action on Click (Live Player)",
+		hint: "Choose an action to perform when clicking on the live video player. (This setting may not work in channels with extensions shown)",
+		options: [
+			["None", 0],
+			["Pause/Unpause", 1],
+			["Mute/Unmute", 2],
+		],
+		defaultValue: 0,
+	}),
+	declareConfig("player.action_onclick_vod", "DROPDOWN", {
+		path: ["Player", ""],
+		label: "Action on Click (VOD)",
+		hint: "Choose an action to perform when clicking on the VOD video player. (This setting may not work in channels with extensions shown)",
+		options: [
+			["None", 0],
+			["Pause/Unpause", 1],
+			["Mute/Unmute", 2],
+		],
+		defaultValue: 0,
+	}),
 ];
 </script>
diff --git a/src/types/twitch.d.ts b/src/types/twitch.d.ts
index 23eba7c31..ed2984689 100644
--- a/src/types/twitch.d.ts
+++ b/src/types/twitch.d.ts
@@ -774,6 +774,7 @@ declare module Twitch {
 	export type VideoPlayerComponent = ReactExtended.WritableComponent<{
 		containerRef: HTMLDivElement;
 		mediaPlayerInstance: MediaPlayerInstance;
+		children: any;
 	}>;
 
 	export interface MediaPlayerInstance {