3.1.1 (#1045)

CHANGELOG-nightly.md

@@ -1,3 +1,14 @@
+### 3.1.0.3000
+
+-   Fixed video player stats not showing
+-   Pass rendering of animated messages to twitch
+-   Add option to hide on screen celebrations
+
+### 3.1.0.2000
+
+-   Fixed badge width on kick
+-   Fixed an issue where settings would be hidden due to auto-filling the searchbox
+
 ### 3.1.0.1000
 
 -   Added rich embeds for 7TV emotes.

CHANGELOG.md

@@ -1,3 +1,11 @@
+### 3.1.1
+
+-   Fixed video player stats not showing
+-   Pass rendering of animated messages to twitch
+-   Add option to hide on screen celebrations
+-   Fixed badge width on kick
+-   Fixed an issue where settings would be hidden due to auto-filling the searchbox
+
 ### 3.1.0
 
 -   Added rich embeds for 7TV emotes.

package.json

@@ -3,7 +3,7 @@
 	"displayName": "7TV",
 	"description": "Improve your viewing experience on Twitch & YouTube with new features, emotes, vanity and performance.",
 	"private": true,
-	"version": "3.1.0",
+	"version": "3.1.1",
 	"dev_version": "1.0",
 	"scripts": {
 		"start": "NODE_ENV=dev yarn build:dev && NODE_ENV=dev vite --mode dev",

src/app/chat/Badge.vue

@@ -50,7 +50,5 @@ if (isApp(props.badge)) {
 .seventv-chat-badge {
 	display: inline-block;
 	vertical-align: baseline;
-	min-width: 1.8rem;
-	min-height: 1.8rem;
 }
 </style>

src/site/twitch.tv/modules/chat/ChatList.vue

@@ -106,14 +106,16 @@ const onMessage = (msgData: Twitch.AnyMessage): boolean => {
 
 	msg.channelID = ctx.id;
 
+	// Send message to our registered message handlers
+	messages.handlers.forEach((h) => h(msgData));
+
 	switch (msgData.type) {
 		case MessageType.MESSAGE:
 		case MessageType.SUBSCRIPTION:
 		case MessageType.RESUBSCRIPTION:
 		case MessageType.SUB_GIFT:
 		case MessageType.RAID:
 		case MessageType.SUB_MYSTERY_GIFT:
-		case MessageType.CHANNEL_POINTS_REWARD:
 		case MessageType.ANNOUNCEMENT_MESSAGE:
 		case MessageType.RESTRICTED_LOW_TRUST_USER_MESSAGE:
 		case MessageType.BITS_BADGE_TIER_MESSAGE:
@@ -123,6 +125,14 @@ const onMessage = (msgData: Twitch.AnyMessage): boolean => {
 			onChatMessage(msg, msgData);
 			break;
 
+		case MessageType.CHANNEL_POINTS_REWARD:
+			if (!(msgData as Twitch.ChannelPointsRewardMessage).animationID) {
+				onChatMessage(msg, msgData);
+			} else {
+				return false;
+			}
+			break;
+
 		case MessageType.MODERATION:
 			if (!IsModerationMessage(msgData)) break;
 
@@ -135,9 +145,6 @@ const onMessage = (msgData: Twitch.AnyMessage): boolean => {
 			return false;
 	}
 
-	// Send message to our registered message handlers
-	messages.handlers.forEach((h) => h(msgData));
-
 	return true;
 };
 

src/site/twitch.tv/modules/custom-commands/Commands/Song.vue

@@ -120,7 +120,6 @@ settings.register([
 		defaultValue: "",
 		options: {
 			placeholder: "Key",
-			type: "password",
 		},
 		predicate(v) {
 			return v.length == 32 || v == "";

src/site/twitch.tv/modules/hidden-elements/HiddenElementsModule.vue

@@ -149,6 +149,12 @@ export const config = [
 		hint: "If checked, the player extensions will be hidden",
 		defaultValue: false,
 	}),
+	declareConfig("player.hide_onscreen_celebrations", "TOGGLE", {
+		path: ["Player", ""],
+		label: "Hide On-Screen Celebrations",
+		hint: "If checked, on-screen celebrations will be hidden",
+		defaultValue: false,
+	}),
 ];
 </script>
 
@@ -271,15 +277,21 @@ export const config = [
 	}
 }
 
+/* stylelint-disable */
 .seventv-hide-player-ext {
-	/* stylelint-disable */
 	.video-player .extension-taskbar,
 	.video-player .extension-container,
 	.video-player .extensions-dock__layout,
 	.video-player .extensions-notifications,
 	.video-player .extensions-video-overlay-size-container {
 		display: none !important;
 	}
-	/* stylelint-enable */
 }
+
+.seventv-hide-onscreen-celebrations {
+	div.celebration__overlay {
+		display: none !important;
+	}
+}
+/* stylelint-enable */
 </style>

src/site/twitch.tv/modules/hidden-elements/hiddenElements.ts

@@ -21,6 +21,7 @@ const hideSubscribeButton = useConfig<boolean>("layout.hide_subscribe_button");
 const hideChatInputBox = useConfig<boolean>("layout.hide_chat_input_box");
 const hidePlayerExtensions = useConfig<boolean>("player.hide_player_extensions");
 const hideChannelPointBalanceButton = useConfig<boolean>("layout.hide_channel_point_balance_button");
+const hideOnscreenCelebrations = useConfig<boolean>("player.hide_onscreen_celebrations");
 
 export const hiddenElementSettings: Array<{ class: string; isHidden: Ref<boolean> }> = [
 	{ class: "seventv-hide-leaderboard", isHidden: hideLeaderboard },
@@ -43,4 +44,5 @@ export const hiddenElementSettings: Array<{ class: string; isHidden: Ref<boolean
 	{ class: "seventv-hide-chat-input-box", isHidden: hideChatInputBox },
 	{ class: "seventv-hide-player-ext", isHidden: hidePlayerExtensions },
 	{ class: "seventv-hide-channel-point-balance-button", isHidden: hideChannelPointBalanceButton },
+	{ class: "seventv-hide-onscreen-celebrations", isHidden: hideOnscreenCelebrations },
 ];

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

@@ -3,11 +3,11 @@
 		<PlayerController :inst="inst" :media-player="mediaPlayer" />
 	</template>
 
-	<template v-for="(inst, i) of streamInfo.instances" :key="inst.identifier">
+	<template v-if="playerAdvancedOptionsComponent.instances.length > 0">
 		<PlayerStreamInfo
 			v-if="shouldShowVideoStats"
-			:inst="inst"
-			:advanced-controls="playerAdvancedOptionsComponent.instances[i]"
+			ref="info"
+			:advanced-controls="playerAdvancedOptionsComponent.instances[0]"
 			:media-player="mediaPlayer"
 		/>
 	</template>
@@ -29,6 +29,7 @@ declareModule<"TWITCH">("player", {
 const mediaPlayer = ref<Twitch.MediaPlayerInstance>();
 
 const shouldShowVideoStats = useConfig<boolean>("player.video_stats");
+const info = ref<typeof PlayerStreamInfo | null>(null);
 
 const player = useComponentHook<Twitch.VideoPlayerComponent>(
 	{
@@ -39,6 +40,7 @@ const player = useComponentHook<Twitch.VideoPlayerComponent>(
 		hooks: {
 			render(inst, cur) {
 				mediaPlayer.value = inst.component.props.mediaPlayerInstance;
+				info.value?.remount?.();
 
 				return cur;
 			},
@@ -51,19 +53,7 @@ const playerAdvancedOptionsComponent = useComponentHook<Twitch.MediaPlayerAdvanc
 	parentSelector: ".persistent-player",
 	predicate: (n) => n.props && n.setStatsOverlay && n.setShowControls,
 });
-
-// hook to render video stats in the channel page view
-const streamInfo = useComponentHook<Twitch.StreamInfo>(
-	{
-		parentSelector: "#live-channel-stream-information",
-		predicate: (el) => el.props && el.props.liveSince,
-	},
-	{
-		trackRoot: true,
-	},
-);
 </script>
-
 <script lang="ts">
 export const config = [
 	declareConfig("player.skip_content_restriction", "TOGGLE", {

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

@@ -19,7 +19,7 @@
 </template>
 
 <script setup lang="ts">
-import { onUnmounted, reactive, ref, watch, watchEffect } from "vue";
+import { onMounted, onUnmounted, reactive, ref, watch } from "vue";
 import { HookedInstance } from "@/common/ReactHooks";
 import { definePropertyHook, unsetPropertyHook } from "@/common/Reflection";
 import { useTooltip } from "@/composable/useTooltip";
@@ -28,7 +28,6 @@ import GaugeIcon from "@/assets/svg/icons/GaugeIcon.vue";
 import PlayerStatsTooltip from "./PlayerStatsTooltip.vue";
 
 const props = defineProps<{
-	inst: HookedInstance<Twitch.StreamInfo>;
 	advancedControls: HookedInstance<Twitch.MediaPlayerAdvancedControls>;
 	mediaPlayer?: Twitch.MediaPlayerInstance;
 }>();
@@ -56,16 +55,14 @@ function openStatsOverlay() {
 	controls.setStatsOverlay(isOpen ? 0 : 1);
 }
 
-watchEffect(() => {
-	const rootNode = props.inst.domNodes.root;
-	if (!rootNode) return;
-
-	// Place stats next to the live time value
-	const sibling = rootNode.querySelector<HTMLElement>("span.live-time")?.parentElement;
+function remount() {
+	const sibling = document.querySelector<HTMLElement>("span.live-time")?.parentElement;
 	if (!sibling || sibling.parentElement?.contains(container)) return;
 
 	sibling.insertAdjacentElement("afterend", container);
-});
+}
+
+defineExpose({ remount });
 
 watch(
 	latency,
@@ -100,6 +97,10 @@ watch(
 	{ immediate: true },
 );
 
+onMounted(() => {
+	remount();
+});
+
 onUnmounted(() => {
 	container.remove();
 });

src/types/twitch.messages.d.ts

@@ -192,8 +192,10 @@ declare namespace Twitch {
 			cost: number;
 			isHighlighted: boolean;
 			name: string;
+			pricingType?: string;
 		};
 		userID: string;
+		animationID?: string;
 	}
 
 	export interface MassGiftMessage extends AnyMessage {