Small bug fixes for the extension (#1122)

Author: ilianoKokoro

CHANGELOG-nightly.md

@@ -1,5 +1,7 @@
 ### 3.1.6.2000
 
+-   Fixed the profile redirection when clicking on a user on the Twitch dashboard
+-   Fixed some keyboard shortcuts not working
 -   Added an Always On autocompletion option for emotes
 -   Fixed an issue where the default highlight sound would not play on Firefox
 

src/app/chat/UserCard.vue

@@ -167,6 +167,8 @@ const props = defineProps<{
 	target: ChatUser;
 }>();
 
+const TWITCH_ROOT_URL = "https://twitch.tv";
+
 const emit = defineEmits<{
 	(e: "close"): void;
 	(e: "mount-handle", handle: HTMLDivElement): void;
@@ -440,7 +442,7 @@ function highlightUserMessages(): void {
 }
 
 function getProfileURL(): string {
-	return window.location.origin + "/" + props.target.username;
+	return `${TWITCH_ROOT_URL}/${props.target.username}`;
 }
 
 function formatDateToString(date?: string): string {

src/app/emote-menu/EmoteMenuSet.vue

@@ -48,7 +48,7 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, reactive, ref, watch, watchEffect } from "vue";
 import { useI18n } from "vue-i18n";
-import { onKeyDown, until, useMagicKeys, useTimeout } from "@vueuse/core";
+import { onKeyDown, until, useKeyModifier, useTimeout } from "@vueuse/core";
 import { debounceFn } from "@/common/Async";
 import { determineRatio } from "@/common/Image";
 import { useConfig } from "@/composable/useSettings";
@@ -82,7 +82,7 @@ const collapsedSets = useConfig<Set<string>>("ui.emote_menu.collapsed_sets");
 const favorites = useConfig<Set<string>>("ui.emote_menu.favorites");
 const usage = useConfig<Map<string, number>>("ui.emote_menu.usage");
 
-const { alt } = useMagicKeys();
+const alt = useKeyModifier("Alt");
 const collapsed = ref(isCollapsed());
 
 function sortCase(ae: SevenTV.ActiveEmote): number {

src/app/settings/SettingsMenu.vue

@@ -123,8 +123,8 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, onMounted, ref, watch } from "vue";
-import { useBreakpoints, useMagicKeys } from "@vueuse/core";
+import { nextTick, onMounted, ref, watch, watchEffect } from "vue";
+import { useBreakpoints, useEventListener, useKeyModifier } from "@vueuse/core";
 import { useActor } from "@/composable/useActor";
 import { useSettings } from "@/composable/useSettings";
 import useUpdater from "@/composable/useUpdater";
@@ -265,20 +265,36 @@ const openProfile = () => {
 	nextTick(() => ctx.switchView("profile"));
 };
 
-const keys = useMagicKeys();
-const paintToolShortcut = keys["Alt+Shift+P"];
-const storeShortcut = keys["Alt+Shift+S"];
+const isAlt = useKeyModifier("Alt");
+const isShift = useKeyModifier("Shift");
+const isMeta = useKeyModifier("Meta");
+const isCtrl = useKeyModifier("Control");
 
-watch(paintToolShortcut, (press) => {
-	if (!press) return;
-
-	ctx.switchView("paint");
+const keys = ref({
+	p: false,
+	s: false,
 });
 
-watch(storeShortcut, (press) => {
-	if (!press) return;
+useEventListener(window, "keydown", updateKeys, { capture: true });
+useEventListener(window, "keyup", updateKeys, { capture: true });
+
+function updateKeys(e: KeyboardEvent) {
+	const isPressed = e.type === "keydown";
+	if (e.key.toUpperCase() === "S") {
+		keys.value.s = isPressed;
+	} else if (e.key.toUpperCase() === "P") {
+		keys.value.p = isPressed;
+	}
+}
 
-	ctx.switchView("store");
+watchEffect(() => {
+	if (isAlt.value && isShift.value && !(isMeta.value || isCtrl.value)) {
+		if (keys.value.p && !keys.value.s) {
+			ctx.switchView("paint");
+		} else if (keys.value.s && !keys.value.p) {
+			ctx.switchView("store");
+		}
+	}
 });
 
 watch(

src/site/kick.com/modules/chat-input/ChatInput.vue

@@ -37,7 +37,7 @@
 
 <script setup lang="ts">
 import { onUnmounted, reactive, ref, toRaw, toRef, watch } from "vue";
-import { useMagicKeys } from "@vueuse/core";
+import { useKeyModifier } from "@vueuse/core";
 import { useStore } from "@/store/main";
 import { TabToken, getSearchRange } from "@/common/Input";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
@@ -111,7 +111,7 @@ function findCommandListener(predicate: (listener: Kick.Lexical.CommandListener<
 	);
 }
 
-const { shift: isShiftPressed } = useMagicKeys();
+const isShiftPressed = useKeyModifier("Shift");
 
 function onKeyDown(ev: KeyboardEvent) {
 	const editor = toRaw(editorRef.value);
@@ -134,7 +134,7 @@ function onKeyDown(ev: KeyboardEvent) {
 					insertAtAnchor(colon.matches[colon.select].token);
 					colon.active = false;
 				} else if (ev.key === "Tab") {
-					handleTab(node, selection, isShiftPressed.value);
+					handleTab(node, selection, isShiftPressed.value ?? undefined);
 				}
 				break;
 			case "ArrowUp":

src/site/twitch.tv/modules/chat-input/ChatInput.vue

@@ -13,7 +13,7 @@
 <!-- eslint-disable prettier/prettier -->
 <script setup lang="ts">
 import { onUnmounted, ref, watch } from "vue";
-import { useEventListener, useMagicKeys } from "@vueuse/core";
+import { useEventListener, useKeyModifier } from "@vueuse/core";
 import { useStore } from "@/store/main";
 import { REACT_TYPEOF_TOKEN } from "@/common/Constant";
 import { imageHostToSrcset } from "@/common/Image";
@@ -92,7 +92,8 @@ const preHistory = ref<Twitch.ChatSlateLeaf[] | undefined>();
 const history = ref<Twitch.ChatSlateLeaf[][]>([]);
 const historyLocation = ref(-1);
 
-const { ctrl: isCtrl, shift: isShift } = useMagicKeys();
+const isCtrl = useKeyModifier("Control");
+const isShift = useKeyModifier("Shift");
 
 useEventListener(window, "keydown", handleCapturedKeyDown, { capture: true });
 
@@ -404,7 +405,7 @@ function onKeyDown(ev: KeyboardEvent) {
 
 	switch (ev.key) {
 		case "Tab":
-			handleTabPress(ev, isShift.value);
+			handleTabPress(ev, isShift.value ?? undefined);
 			break;
 		case "ArrowUp":
 			if (useHistory(true)) {

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

@@ -25,7 +25,7 @@
 
 <script setup lang="ts">
 import { nextTick, reactive, ref, toRef, watch } from "vue";
-import { until, useDocumentVisibility, useMagicKeys, useTimeoutFn, watchDebounced } from "@vueuse/core";
+import { until, useDocumentVisibility, useKeyModifier, useTimeoutFn, watchDebounced } from "@vueuse/core";
 import { storeToRefs } from "pinia";
 import { useStore } from "@/store/main";
 import { normalizeUsername } from "@/common/Color";
@@ -503,7 +503,7 @@ watchDebounced(
 );
 
 // Scroll Pausing on hotkey / hover
-const { alt } = useMagicKeys();
+const alt = useKeyModifier("Alt");
 
 let pausedByHotkey = false;
 watch([alt, isHovering], ([isAlt, isHover]) => {