Fix in call avatars

kryptokrona · Dec 28, 2024 · a21c364 · a21c364
1 parent b77142f
commit a21c364
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 32 deletions.
diff --git a/src/lib/components/chat/InCallAvatar.svelte b/src/lib/components/chat/InCallAvatar.svelte
@@ -1,6 +1,6 @@
 <script>
 import { get_avatar } from "$lib/utils/hugin-utils"
-import { audioLevel, user } from '$lib/stores/user.js'
+import { audioLevel, rooms, user } from '$lib/stores/user.js'
 export let call
 let isTalking = false
 let me = call.address === $user.myAddress
@@ -11,10 +11,27 @@ $: if ($audioLevel.call.some((a) => a.activeVoice == true && a.chat === call.add
     isTalking = false
 }
 
+const check_avatar = (address) => {
+    const found = $rooms.avatars.find(a => a.address === address)
+    if (found) return found.avatar
+    else return false
+}
+
 </script>
 
 <div class="img" class:talking={isTalking || (me && $audioLevel.meTalking)}>
-<img class="avatar" src="data:image/png;base64,{get_avatar(call.address)}" alt="" />
+    {#await check_avatar(call.address)}
+    {:then avatar}
+     {#if avatar}
+        <img
+            class="custom-avatar"
+            src="{avatar}"
+            alt=""
+        />
+    {:else}
+        <img class="avatar" src="data:image/png;base64,{get_avatar(call.address)}" alt="" />
+    {/if}
+    {/await}
 </div>
 
 <style lang="scss">
@@ -31,5 +48,13 @@ $: if ($audioLevel.call.some((a) => a.activeVoice == true && a.chat === call.add
         margin-right: 2px;
 
     }
+
+.custom-avatar {
+    height: 40px;
+    width:  40px;
+    border-radius: 15px;
+    padding: 10px;
+}
+    
 </style>
 
diff --git a/src/lib/components/chat/VoiceUser.svelte b/src/lib/components/chat/VoiceUser.svelte
@@ -32,11 +32,12 @@
 
 </script>
 
-<div class:talking={isTalking || (me && $audioLevel.meTalking)} in:fade class="card hugin-voice-user" on:click="{() => console.log("Click")}">
+<div in:fade class="card hugin-voice-user" on:click="{() => console.log("Click")}">
     {#await check_avatar(voice_user.address)}
         {:then avatar}
         {#if avatar}
             <img
+
                 class="custom-avatar"
                 src="{avatar}"
                 alt=""
@@ -113,8 +114,8 @@
         margin-right: 2px;
     }
 
-    .talking .voice-avatar {
-        border: 1px solid var(--success-color);
+    .talking {
+        border: 1px solid var(--success-color) !important;
     }
 
     .connecting {
@@ -134,12 +135,20 @@
         margin-left: 5px;
     }
 
-    .custom-avatar {
-        height: 25px;
-        width: 25px;
-        border-radius: 10px;
-        padding: 5px;
-    }
+.custom-avatar {
+    height: 35px;
+    width: 35px;
+    border-radius: 15px;
+    padding: 8px;
+    margin-left: -2px;
+    border: 1px solid transparent;
+}
+
+.img {
+    border: 1px solid transparent;
+    border-radius: 10px;
+    padding: 1px;
+}
     
     
 </style>
diff --git a/src/lib/components/webrtc/MyVideo.svelte b/src/lib/components/webrtc/MyVideo.svelte
@@ -2,7 +2,7 @@
 //To handle true and false, or in this case show and hide.
 import { fade, fly } from 'svelte/transition'
 import { createEventDispatcher, onDestroy, onMount } from 'svelte'
-import { webRTC, user, swarm } from '$lib/stores/user.js'
+import { webRTC, user, swarm, rooms } from '$lib/stores/user.js'
 import {layoutState, videoGrid} from '$lib/stores/layout-state.js'
 import VoiceUserIcon from '../icons/VoiceUserIcon.svelte'
 import { get_avatar } from '$lib/utils/hugin-utils'
@@ -54,7 +54,11 @@ $: if ($swarm.call.length > 4) {
   many = true
 } else many = false
 
-
+const check_avatar = (address) => {
+    const found = $rooms.avatars.find(a => a.address === address)
+    if (found) return found.avatar
+    else return false
+}
 
 $: window_medium
 </script>
@@ -81,7 +85,20 @@ $: window_medium
         </div>
         {/if}
         {#if !$videoSettings.screenshare && !$videoSettings.myVideo}
-            <img in:fly src="data:image/png;base64,{get_avatar($user.myAddress, 'png', true)}" alt="" />
+        {#await check_avatar($user.myAddress)}
+        {:then avatar}
+        {#if avatar}
+            <img
+
+                class="custom-avatar"
+                src="{avatar}"
+                alt=""
+            />
+        {:else}
+
+        <img in:fly src="data:image/png;base64,{get_avatar($user.myAddress, 'png', true)}" alt="" />
+        {/if}
+        {/await}
         {/if}
 </div>
 

diff --git a/src/lib/components/webrtc/PeerVideo.svelte b/src/lib/components/webrtc/PeerVideo.svelte
@@ -2,7 +2,7 @@
 //To handle true and false, or in this case show and hide.
 import { fade, fly } from 'svelte/transition'
 import { createEventDispatcher, onDestroy, onMount } from 'svelte'
-import { audioLevel, user, swarm } from '$lib/stores/user.js'
+import { audioLevel, user, swarm, rooms } from '$lib/stores/user.js'
 import Minus from '../icons/Minus.svelte'
 import Plus from '../icons/Plus.svelte'
 import {layoutState, videoGrid} from '$lib/stores/layout-state.js'
@@ -81,6 +81,8 @@ $: if ($audioLevel.call.some((a) => a.activeVoice == true && a.chat === call.cha
     isTalking = false
 }
 
+$: address = active ? call.chat : call.address
+
 $:  if (thisWindow && windowCheck) {
         console.log('This window reactive')
         if ($videoGrid.peerVideos.some(a => a.size === 2 && a.chat !== call.chat) && thisWindow.size > 0) {
@@ -152,6 +154,11 @@ const resize = (size) => {
     many = true
   } else many = false
 
+  const check_avatar = (address) => {
+    const found = $rooms.avatars.find(a => a.address === address)
+    if (found) return found.avatar
+    else return false
+    }
 </script>
 
 <div class="card" in:fly={{ x: -150}} class:many={many} class:show={showWindow} class:talking="{isTalking}" class:min={thisWindow.size === 1 && !many} class:hide={thisWindow.size === 0} class:max={thisWindow.size === 2} class:medium={thisWindow.size === 3}>
@@ -169,11 +176,24 @@ const resize = (size) => {
         </div>
     </div>
     {/await}
-    {#if !active}
-    <img src="data:image/png;base64,{get_avatar(call.address, 'png', true)}" alt="" />
-    {:else}
-    <img src="data:image/png;base64,{get_avatar(call.chat, 'png', true)}" alt="" />
-    {/if}
+    {#await check_avatar(address)}
+        {:then avatar}
+        {#if avatar}
+            <img
+
+                class="custom-avatar"
+                src="{avatar}"
+                alt=""
+            />
+        {:else}
+            {#if !active}
+            <img src="data:image/png;base64,{get_avatar(call.address, 'png', true)}" alt="" />
+            {:else}
+            <img src="data:image/png;base64,{get_avatar(call.chat, 'png', true)}" alt="" />
+            {/if}
+        {/if}
+        {/await}
+
     <div in:fade class="fade">
         <div class="toggles">
           <Minus on:click={()=> resize('min')}/>
@@ -357,6 +377,5 @@ p {
     position: relative;
     left: 5px;
 }
-    
 
 </style>
diff --git a/src/routes/rooms/components/RoomHugins.svelte b/src/routes/rooms/components/RoomHugins.svelte
@@ -433,6 +433,7 @@ p {
     width: 30px;
     border-radius: 10px;
     padding: 5px;
+    margin: 1px;
 }
 
 </style>
diff --git a/src/routes/rooms/components/UserOptions.svelte b/src/routes/rooms/components/UserOptions.svelte
@@ -26,20 +26,9 @@
         }
     }
 
-    const sendMoney = (user) => {
-        $transactions.tip = true
-        $transactions.send = {
-            to: info.address,
-            name: info.name
-        }
-    }
-
 </script>
 
 <div class="menu">
-    {#if inRoom}
-    <span on:click={sendMoney} class="action">Tip</span>
-    {/if}
     <span on:click={toggleBlock} class="action">Block</span>
     {#if admin}
     <span on:click={toggleBan} class="action">Ban</span>