From eea02896b0c6846cc20df0414f2878da0e40ef56 Mon Sep 17 00:00:00 2001 From: zeeshaun <1766264+zeeshaun@users.noreply.github.com> Date: Sun, 31 May 2026 19:23:59 -0500 Subject: [PATCH 1/3] Add chat sound mute toggle --- components/chat/ChatLobby.vue | 63 ++++++++++++++++++++++++++++++++--- components/hub/ChatPanel.vue | 43 ++++++++++++++++++++++++ composables/useSound.ts | 54 ++++++++++++++++++++++++++++-- 3 files changed, 152 insertions(+), 8 deletions(-) diff --git a/components/chat/ChatLobby.vue b/components/chat/ChatLobby.vue index 8f805f04..e6a85c34 100644 --- a/components/chat/ChatLobby.vue +++ b/components/chat/ChatLobby.vue @@ -4,10 +4,16 @@ import ChatMessages from "~/components/chat/ChatMessages.vue"; import ChatInput from "~/components/chat/ChatInput.vue"; import ChatMatchHeader from "~/components/chat/ChatMatchHeader.vue"; import Empty from "~/components/ui/empty/Empty.vue"; +import { Volume2, VolumeX } from "lucide-vue-next"; + +defineOptions({ + inheritAttrs: false, +}); @@ -293,7 +320,12 @@ import { useSound } from "~/composables/useSound"; import { useMatchLobbyStore } from "~/stores/MatchLobbyStore"; const { rightSidebarOpen } = useRightSidebar(); -const { playNotificationSound } = useSound(); +const { + isEnabled: chatSoundState, + isAutoMutedForInGame: chatSoundAutoMutedForInGame, + playNotificationSound: playChatNotificationSound, + updateSettings: updateSoundSettings, +} = useSound(); interface ChatMessagesRef { scrollToBottom: (force?: boolean) => void; @@ -397,6 +429,24 @@ export default { participantsCount() { return this.participants.length; }, + chatSoundEnabled() { + return chatSoundState.value; + }, + chatSoundActive() { + return chatSoundState.value && !chatSoundAutoMutedForInGame.value; + }, + chatSoundToggleLabel() { + if (chatSoundAutoMutedForInGame.value) { + return this.$t( + "ui_extras.auto_muted_in_game", + "Auto-muted while in game", + ); + } + + return chatSoundState.value + ? this.$t("ui_extras.mute") + : this.$t("ui_extras.unmute"); + }, matchInfo() { if (this.type !== "match") { return null; @@ -510,6 +560,9 @@ export default { direction: "outbound", }); }, + toggleChatSound() { + updateSoundSettings(!chatSoundState.value); + }, handleBottomStateChange(atBottom: boolean) { this.isAtBottom = atBottom; }, @@ -583,7 +636,7 @@ export default { this.lastReadMessageCount = this.messages.length; } if (this.playNotificationSound && !isOwnMessage) { - playNotificationSound(); + playChatNotificationSound(); } this.$emit("message-received", { diff --git a/components/hub/ChatPanel.vue b/components/hub/ChatPanel.vue index f81394eb..d909c079 100644 --- a/components/hub/ChatPanel.vue +++ b/components/hub/ChatPanel.vue @@ -9,6 +9,8 @@ import { Shield, MessageSquare, ExternalLink, + Volume2, + VolumeX, } from "lucide-vue-next"; import { useRouter } from "#app"; import ChatLobby from "~/components/chat/ChatLobby.vue"; @@ -17,6 +19,7 @@ import TooltipProvider from "~/components/ui/tooltip/TooltipProvider.vue"; import TooltipTrigger from "~/components/ui/tooltip/TooltipTrigger.vue"; import TooltipContent from "~/components/ui/tooltip/TooltipContent.vue"; import { useMatchLobbyStore } from "~/stores/MatchLobbyStore"; +import { useSound } from "~/composables/useSound"; const props = defineProps<{ isSidebarOpen: boolean; @@ -30,6 +33,11 @@ const { tabs, unreadCounts, setActiveTab, resetUnread, incrementUnread } = useChatTabs(); const matchLobbyStore = useMatchLobbyStore(); +const { + isEnabled: chatSoundEnabled, + isAutoMutedForInGame: chatSoundAutoMutedForInGame, + updateSettings: updateSoundSettings, +} = useSound(); const isMobile = useMediaQuery("(max-width: 768px)"); const activeChatId = ref(null); @@ -65,6 +73,18 @@ const activeParticipantsCount = computed(() => { return map.size; }); +const chatSoundActive = computed( + () => chatSoundEnabled.value && !chatSoundAutoMutedForInGame.value, +); + +const chatSoundToggleLabel = computed(() => { + if (chatSoundAutoMutedForInGame.value) { + return t("ui_extras.auto_muted_in_game", "Auto-muted while in game"); + } + + return chatSoundEnabled.value ? t("ui_extras.mute") : t("ui_extras.unmute"); +}); + const activeParticipants = computed< { steam_id: string; name: string; avatar_url?: string }[] >(() => { @@ -224,6 +244,10 @@ function handlePopOut() { ].join(","); window.open(route.href, "_blank", features); } + +function toggleChatSound() { + updateSoundSettings(!chatSoundEnabled.value); +}