separate action onclicking vod and live player

CHANGELOG-nightly.md

@@ -17,6 +17,7 @@
 -   Fixed an issue where replying to a thread starting from your own message would highlight the message
 -   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
 

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) {

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

@@ -80,8 +80,19 @@ export const config = [
 	}),
 	declareConfig("player.action_onclick", "DROPDOWN", {
 		path: ["Player", ""],
-		label: "Action on Click",
-		hint: "Choose an action to perform when clicking on the video player. (This setting may not work in channels with extensions shown)",
+		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],

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 {