Fixed names and mute status on in conference view

kryptokrona · Nov 12, 2024 · 821fbb7 · 821fbb7
1 parent d77f403
commit 821fbb7
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 38 deletions.
diff --git a/src/lib/components/webrtc/MyVideo.svelte b/src/lib/components/webrtc/MyVideo.svelte
@@ -71,8 +71,10 @@ $: window_medium
         playsinline
         autoplay
         bind:this="{myVideo}"></video>
-        <div class:in_call="{true}"></div>
-        <div class="name">{$user.username}</div>
+        <div class="status">
+            <div class:in_call="{true}"></div>
+            <div class="name">{$user.username}</div>
+        </div>
         {#if $videoSettings.loading}
         <div class="loader">
             <Moon color="#f5f5f5" size="77" unit="px"/>
@@ -112,6 +114,24 @@ $: window_medium
     }
 }
 
+.status {
+    display: flex;
+    top: 90%;
+    margin-left: 10px;
+    border-radius: 5px;
+    height: 20px;
+    width: 10px;
+    padding: 5px;
+    gap: 5px;
+    line-height: 9px;
+    font-family: "Montserrat";
+    width: fit-content;
+    position: relative;
+    opacity: 0.9;
+    border-radius: 50%;
+    z-index: 5;
+}
+
 .talking {
     border: 1px solid var(--success-color);
 }
@@ -133,19 +153,13 @@ $: window_medium
     padding: 10px;
 }
 
-
 .in_call {
-    left: 9px;
-    top: 92.4%;
-    border-radius: 5px;
+    padding: 5px;
     height: 10px;
     width: 10px;
-    padding: 5px;
-    line-height: 15px;
     font-family: "Montserrat";
     width: fit-content;
     background: var(--success-color);
-    position: relative;
     opacity: 0.9;
     border-radius: 50%;
     z-index: 5;
@@ -224,14 +238,7 @@ p {
 }
 
 .name {
-    left: 10px;
-    top: 90%;
-    border-radius: 5px;
-    height: 25px;
-    padding: 5px;
-    line-height: 15px;
     font-family: "Montserrat";
-    width: fit-content;
     position: relative;
     opacity: 0.8;
     color: white;

diff --git a/src/lib/components/webrtc/PeerVideo.svelte b/src/lib/components/webrtc/PeerVideo.svelte
@@ -9,12 +9,15 @@ import {layoutState, videoGrid} from '$lib/stores/layout-state.js'
 import { get_avatar } from '$lib/utils/hugin-utils'
 import VoiceUserIcon from '../icons/VoiceUserIcon.svelte'
 import { audioSettings } from '$lib/stores/mediasettings'
+import MuteIcon from '../icons/MuteIcon.svelte'
+import Screenshare from '../icons/Screenshare.svelte'
 let peerVideo = document.getElementById('peerVideo')
 let peerAudio
 let peerStream
 let thisWindow = false
 let windowCheck = false
 let audio = false
+let status = {}
 export let active = true
 export let call
 export let channel = []
@@ -33,6 +36,9 @@ onMount(() => {
     windowCheck = true
 })
 
+$: status = channel.find(a => a.address === call.chat)
+$: console.log("status?", status)
+
 async function setName() {
     if (!active) {
         return channel.find(a => call.address === a.address)
@@ -154,8 +160,15 @@ const resize = (size) => {
     <video in:fade id="peerVideo" playsinline autoplay bind:this="{peerVideo}"></video>
     <audio autoplay  bind:this="{peerAudio}"></audio>
     {#await setName() then contact}
-    <div class:in_call="{true}"></div>
-    <div class="name">{contact.name}</div>
+    <div class="status">
+        <div class:in_call="{true}"></div>
+        <div class="name">{contact.name}</div>
+        <div class="voicestatus">
+            {#if status?.audioMute}
+                <MuteIcon size={"20px"}/>
+            {/if}
+        </div>
+    </div>
     {/await}
     {#if !active}
     <img src="data:image/png;base64,{get_avatar(call.address, 'png', true)}" alt="" />
@@ -195,6 +208,23 @@ const resize = (size) => {
     }
 }
 
+.status {
+    display: flex;
+    top: 90%;
+    margin-left: 10px;
+    border-radius: 5px;
+    height: 20px;
+    width: 10px;
+    padding: 5px;
+    gap: 5px;
+    line-height: 9px;
+    font-family: "Montserrat";
+    width: fit-content;
+    position: relative;
+    opacity: 0.9;
+    border-radius: 50%;
+    z-index: 5;
+}
 img {
     width: 200px;
     height: 200px;
@@ -216,17 +246,12 @@ img {
 }
 
 .in_call {
-    left: 9px;
-    top: 92.4%;
-    border-radius: 5px;
+    padding: 5px;
     height: 10px;
     width: 10px;
-    padding: 5px;
-    line-height: 15px;
     font-family: "Montserrat";
     width: fit-content;
     background: var(--success-color);
-    position: relative;
     opacity: 0.9;
     border-radius: 50%;
     z-index: 5;
@@ -273,14 +298,7 @@ p {
 }
 
 .name {
-    left: 10px;
-    top: 90%;
-    border-radius: 5px;
-    height: 25px;
-    padding: 5px;
-    line-height: 15px;
     font-family: "Montserrat";
-    width: fit-content;
     position: relative;
     opacity: 0.8;
     color: white;
@@ -334,4 +352,12 @@ p {
     pointer-events: all !important;
 }
 
+.voicestatus {
+    bottom: 5px;
+    display: block;
+    position: relative;
+    left: 5px;
+}
+    
+
 </style>
diff --git a/src/routes/rooms/components/UserInfo.svelte b/src/routes/rooms/components/UserInfo.svelte
@@ -26,11 +26,8 @@
 
         <div in:fly="{{ y: 50 }}" out:fly="{{ y: -50 }}" class="card">
                 <div >
-                    <p>Ban
+                    <p>{user.name}</p>
                     <br>
-                    {user.name}
-
-                    </p>
                         <FillButton
                         red="{true}"
                         text="{"Ban"}"
@@ -57,15 +54,15 @@
         border: 1px solid var(--card-border);
         padding: 30px;
         border-radius: 8px;
-        width: 250px;
-        height: 300px;
+        width: 200px;
+        height: 200px;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
     }
     
     p {
-        font-size: 15px;
+        font-size: 17px;
         color: white;
         font-family: 'Montserrat';
     }