separate action onclicking vod and live player

SevenTV · Jul 29, 2023 · b45886b · b45886b
1 parent 512a5b5
commit b45886b
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -774,6 +774,7 @@ declare module Twitch {
 	export type VideoPlayerComponent = ReactExtended.WritableComponent<{
 		containerRef: HTMLDivElement;
 		mediaPlayerInstance: MediaPlayerInstance;
+		children: any;
 	}>;
 
 	export interface MediaPlayerInstance {