change call volume

Nerimity · Oct 14, 2024 · 0b19e88 · 0b19e88
1 parent 3c26125
commit 0b19e88
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 5 deletions.
diff --git a/src/chat-api/store/useVoiceUsers.ts b/src/chat-api/store/useVoiceUsers.ts
@@ -25,6 +25,7 @@ export type VoiceUser = RawVoice & {
   videoStream?: MediaStream;
   vad?: VADInstance;
   voiceActivity: boolean;
+  audio?: HTMLAudioElement
 };
 
 // voiceUsers[channelId][userId] = VoiceUser
@@ -185,7 +186,7 @@ const getVoiceUsers = (channelId: string): VoiceUser[] => {
 };
 
 const getVoiceUser = (channelId: string, userId: string) => {
-  return voiceUsers[channelId][userId];
+  return voiceUsers[channelId]?.[userId];
 };
 
 export async function createPeer(voiceUser: VoiceUser | RawVoice) {
@@ -315,9 +316,10 @@ const onStream = (voiceUser: VoiceUser | RawVoice, stream: MediaStream) => {
     stream.onremovetrack = null;
   };
 
+  let mic: HTMLAudioElement | undefined = undefined;
   if (streamType === "audioStream") {
     setVAD(stream, voiceUser);
-    const mic = new Audio();
+    mic = new Audio();
     const deviceId = getStorageString(StorageKeys.outputDeviceId, undefined);
     if (deviceId) {
       mic.setSinkId(JSON.parse(deviceId));
@@ -327,6 +329,7 @@ const onStream = (voiceUser: VoiceUser | RawVoice, stream: MediaStream) => {
   }
   setVoiceUsers(voiceUser.channelId, voiceUser.userId, {
     [streamType]: stream,
+    audio: mic,
   });
 };
 

diff --git a/src/components/main-pane-header/MainPaneHeader.tsx b/src/components/main-pane-header/MainPaneHeader.tsx
@@ -40,6 +40,7 @@ import {
   hasBit,
 } from "@/chat-api/Bitwise";
 import { WebcamModal } from "./WebcamModal";
+import MemberContextMenu from "../member-context-menu/MemberContextMenu";
 
 export default function MainPaneHeader() {
   const {
@@ -444,6 +445,11 @@ function VoiceParticipantItem(props: {
   onClick: () => void;
 }) {
   const { voiceUsers } = useStore();
+  const params = useParams<{ serverId?: string; channelId?: string }>();
+  const [contextPosition, setContextPosition] = createSignal<null | {
+    x: number;
+    y: number;
+  }>(null);
 
   const isMuted = () => {
     return !voiceUsers.micEnabled(
@@ -467,16 +473,29 @@ function VoiceParticipantItem(props: {
       event.preventDefault();
     }
   };
+  const onContextMenu = (event: MouseEvent) => {
+    event.preventDefault();
+    setContextPosition({ x: event.clientX, y: event.clientY });
+  };
 
   return (
     <CustomLink
+      onContextMenu={onContextMenu}
       onClick={onClick}
       href={RouterEndpoints.PROFILE(user().id)}
       class={classNames(
         styles.voiceParticipantItem,
         conditionalClass(props.selected, styles.selected)
       )}
     >
+      <MemberContextMenu
+        position={contextPosition()}
+        serverId={params.serverId}
+        userId={user().id}
+        onClose={() => {
+          setContextPosition(null);
+        }}
+      />
       <Avatar
         user={user()}
         size={props.size === "small" ? 40 : 60}

diff --git a/src/components/member-context-menu/MemberContextMenu.tsx b/src/components/member-context-menu/MemberContextMenu.tsx
@@ -3,7 +3,7 @@ import { copyToClipboard } from "@/common/clipboard";
 import ContextMenu, {
   ContextMenuProps,
 } from "@/components/ui/context-menu/ContextMenu";
-import { createEffect, createSignal, For, Show } from "solid-js";
+import { createEffect, createSignal, For, on, Show } from "solid-js";
 import useStore from "@/chat-api/store/useStore";
 import LegacyModal from "@/components/ui/legacy-modal/LegacyModal";
 import { ServerRole } from "@/chat-api/store/useServerRoles";
@@ -29,6 +29,7 @@ import { Trans } from "@mbarzda/solid-i18next";
 import Input from "../ui/input/Input";
 import { Notice } from "../ui/Notice/Notice";
 import Text from "../ui/Text";
+import Avatar from "../ui/Avatar";
 type Props = Omit<ContextMenuProps, "items"> & {
   serverId?: string;
   userId: string;
@@ -153,6 +154,7 @@ export default function MemberContextMenu(props: Props) {
   return (
     <>
       <ContextMenu
+        header={<Header userId={props.userId} />}
         {...props}
         items={[
           {
@@ -178,6 +180,62 @@ export default function MemberContextMenu(props: Props) {
   );
 }
 
+function Header(props: { userId: string }) {
+  const [voiceVolume, setVoiceVolume] = createSignal(1);
+  const store = useStore();
+  const user = () => store.users.get(props.userId);
+
+  const voiceUser = () =>
+    store.voiceUsers.getVoiceUser(
+      store.voiceUsers.currentVoiceChannelId()!,
+      props.userId
+    );
+  const audio = () => voiceUser()?.audio;
+
+  createEffect(
+    on(audio, () => {
+      const audio = voiceUser()?.audio;
+      if (!audio) return;
+      console.log(audio.volume);
+      setVoiceVolume(audio.volume);
+    })
+  );
+
+  const isMe = () => user()?.id === store.account.user()?.id;
+
+  const onVolumeChange = (e: any) => {
+    setVoiceVolume(Number(e.currentTarget?.value!));
+    const audio = voiceUser()?.audio;
+    if (!audio) return;
+    audio.volume = Number(e.currentTarget?.value!);
+  };
+
+  return (
+    <Show when={user()}>
+      <div class={styles.header}>
+        <div class={styles.headerDetails}>
+          <Avatar user={user()} size={24} />
+          <div class={styles.username}>{user()!.username}</div>
+        </div>
+      </div>
+
+      <Show when={audio() && !isMe()}>
+        <div class={styles.voiceVolume}>
+          <div class={styles.label}>Call Volume</div>
+          <input
+            type="range"
+            min={0}
+            max={1}
+            step={0.01}
+            value={voiceVolume()}
+            onInput={onVolumeChange}
+          />
+        </div>
+      </Show>
+    </Show>
+  );
+}
+
 function KickModal(props: { member: ServerMember; close: () => void }) {
   const [requestSent, setRequestSent] = createSignal(false);
   const onKickClick = async () => {

diff --git a/src/components/member-context-menu/styles.module.scss b/src/components/member-context-menu/styles.module.scss
@@ -68,3 +68,38 @@
     margin-top: 10px;
   }
 }
+
+.header {
+  display: flex;
+  flex-direction: column;
+}
+.headerDetails {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 34px;
+  margin-left: 6px;
+  font-size: 14px;
+
+  .username {
+    position: absolute;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: bold;
+    white-space: nowrap;
+    left: 30px;
+    right: 0;
+  }
+}
+
+.voiceVolume {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 4px;
+  .label {
+    font-size: 14px;
+    margin-left: 4px;
+  }
+}
diff --git a/src/components/message-pane/message-item/MessageItem.tsx b/src/components/message-pane/message-item/MessageItem.tsx
@@ -991,7 +991,7 @@ const FileEmbed = (props: {
   };
 }) => {
   const { createPortal } = useCustomPortal();
-  const isImage = () => props.file?.mime.startsWith("image/");
+  const isImage = () => props.file?.mime?.startsWith("image/");
 
   const previewClick = () => {
     createPortal((close) => (

diff --git a/src/components/ui/context-menu/ContextMenu.tsx b/src/components/ui/context-menu/ContextMenu.tsx
@@ -42,10 +42,11 @@ export interface ContextMenuProps {
     x: number;
     y: number;
   } | null;
+  header?: JSXElement;
 }
 
 export default function ContextMenu(props: ContextMenuProps) {
-  let [contextMenuEl, setContextMenuEl] = createSignal<HTMLDivElement | null>(
+  const [contextMenuEl, setContextMenuEl] = createSignal<HTMLDivElement | null>(
     null
   );
   const [pos, setPos] = createSignal({ top: "0", left: "0" });
@@ -174,6 +175,7 @@ export default function ContextMenu(props: ContextMenuProps) {
           style={isMobileWidth() ? {} : pos()}
         >
           <div class={styles.contextMenuInner}>
+            {props.header}
             <For each={items}>
               {(item, i) => (
                 <Show when={item.show !== false}>