Skip to content

Commit 46a871f

Browse files
SOH69SOH69
committed
ui improvements
1 parent efcc3ba commit 46a871f

File tree

8 files changed

+61
-35
lines changed

8 files changed

+61
-35
lines changed

‎web/src/app.css

+1
Original file line numberDiff line numberDiff line change
@@ -40,4 +40,5 @@ html, body {
4040
backface-visibility: hidden;
4141
-webkit-backface-visibility: hidden; /* for Safari */
4242
-webkit-font-smoothing: subpixel-antialiased;
43+
transform: translateZ(0);
4344
}

‎web/src/components/body.svelte

+22-17
Original file line numberDiff line numberDiff line change
@@ -52,37 +52,37 @@
5252
}
5353
</script>
5454

55-
<div class="w-full h-[270px] flex flex-col p-4 gap-[5.5px] focus-fix">
56-
<div class="w-full h-[108px] rounded-[6px] bg-[#18162F] flex flex-col p-4 gap-[11px] drop-shadow-md">
55+
<div class="w-full h-[270px] flex flex-col p-4 gap-[5.5px]">
56+
<div class="w-full h-[108px] rounded-[6px] bg-[#18162F] flex flex-col p-4 gap-[11px] shadow-md shadow-[#18162F]/40">
5757
<div class="text-white text-[16px] font-bold flex gap-[10px]">
5858
<i
59-
class={$RADIODATA.volume == 0 ? "fa-solid fa-volume-xmark" : "fa-brands fa-bluetooth-b"}
59+
class={$RADIODATA.volume == 0 ? "fa-solid fa-volume-xmark focus-fix" : "fa-brands fa-bluetooth-b focus-fix"}
6060
on:click={toggleMute}
6161
role="button"
6262
tabindex="0"
6363
on:keydown={(event) => { if (event.key === 'Enter') toggleMute(); }}
6464
></i>
6565
{#if $RADIODATA.onRadio}
6666
{#if $RADIODATA.insideJammerZone}
67-
<i class="fa-solid fa-ban text-red-500" style="animation: pulse 0.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;"></i>
67+
<i class="fa-solid fa-ban text-red-500 focus-fix" style="animation: pulse 0.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;"></i>
6868
{:else}
69-
<i class="fa-solid fa-tower-cell" style="animation: pulse 0.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;"></i>
70-
<i class="fa-solid fa-server"></i>
69+
<i class="fa-solid fa-tower-cell focus-fix" style="animation: pulse 0.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;"></i>
70+
<i class="fa-solid fa-server focus-fix"></i>
7171
{/if}
7272
{#if ($RADIODATA.favourite).indexOf($RADIODATA.channel) === -1}
7373
<i
74-
class="fa-regular fa-star ml-auto cursor-pointer text-yellow-400"
74+
class="fa-regular fa-star ml-auto cursor-pointer text-yellow-400 focus-fix"
7575
on:click={() => togglefav(true)}
7676
role="button"
7777
tabindex="0"
7878
on:keydown={(event) => { if (event.key === 'Enter') togglefav(true); }}
7979
></i>
8080
{:else}
8181
{#if ($RADIODATA.userData.favourite).indexOf($RADIODATA.channel) === -1}
82-
<i class="fa-solid fa-star ml-auto cursor-not-allowed text-yellow-600"></i>
82+
<i class="fa-solid fa-star ml-auto cursor-not-allowed text-yellow-600 focus-fix"></i>
8383
{:else}
8484
<i
85-
class="fa-solid fa-star ml-auto cursor-pointer text-yellow-400"
85+
class="fa-solid fa-star ml-auto cursor-pointer text-yellow-400 focus-fix"
8686
on:click={() => togglefav(false)}
8787
role="button"
8888
tabindex="0"
@@ -95,21 +95,21 @@
9595
</div>
9696
<div class="flex flex-col">
9797
{#if $RADIODATA.onRadio}
98-
<div class="text-white text-[16px] font-bold">{$RADIODATA.locale['ui.header']}</div>
98+
<div class="text-white text-[16px] font-bold focus-fix">{$RADIODATA.locale['ui.header']}</div>
9999
<div class="text-white text-[11px] font-medium flex justify-between w-full overflow-hidden">
100-
<div class="w-[40%]">{$RADIODATA.locale['ui.frequency']}:</div>
101-
<div class="whitespace-nowrap w-[56%] overflow-hidden">
100+
<div class="w-[40%] focus-fix">{$RADIODATA.locale['ui.frequency']}:</div>
101+
<div class="whitespace-nowrap w-[56%] overflow-hidden focus-fix">
102102
<Marquee channel={String($RADIODATA.channel)}/>
103103
</div>
104104
</div>
105-
<button class="bg-[#FF453AFF] w-full h-[22px] text-white rounded-[6px] font-bold flex justify-center items-center text-[11px] mt-1" on:click={() => SendEvent(Send.leave)}>{$RADIODATA.locale['ui.disconnect']}</button>
105+
<button class="bg-[#FF453AFF] w-full h-[22px] text-white rounded-[6px] font-bold flex justify-center items-center text-[11px] mt-1 focus-fix" on:click={() => SendEvent(Send.leave)}>{$RADIODATA.locale['ui.disconnect']}</button>
106106
{:else}
107107
<div class="text-white text-[16px] font-bold">{$RADIODATA.locale['ui.notconnected']}</div>
108108
{/if}
109109
</div>
110110
</div>
111111

112-
<div class="w-full rounded-[6px] bg-[#18162F] flex justify-center items-center p-4 text-white text-[11px] drop-shadow-md gap-[6px]">
112+
<div class="w-full rounded-[6px] bg-[#18162F] flex justify-center items-center p-4 text-white text-[11px] shadow-md shadow-[#18162F]/40 gap-[6px]">
113113
{#if volume > 70}
114114
<i class="fa-solid fa-volume-high"></i>
115115
{:else if volume > 35}
@@ -122,7 +122,7 @@
122122
<input id="vol-range" type="range" value={$RADIODATA.volume} class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700" disabled="{!$RADIODATA.onRadio}" on:change={changeVolume} on:mouseup={handleSliderRelease}>
123123
</div>
124124

125-
<div class="w-full rounded-[6px] bg-[#18162F] flex py-4 text-white drop-shadow-md justify-between">
125+
<div class="w-full rounded-[6px] bg-[#18162F] flex py-4 text-white shadow-md shadow-[#18162F]/40 justify-between">
126126
<button class="grow flex flex-col justify-center items-center gap-[6px]" on:click={changeTab('channel')}>
127127
<i class="fa-solid fa-list-ul"></i>
128128
<span class="text-[9px]">{$RADIODATA.locale['ui.channels']}</span>
@@ -131,15 +131,20 @@
131131
<i class="fa-solid fa-walkie-talkie"></i>
132132
<span class="text-[9px]">{$RADIODATA.locale['ui.radio']}</span>
133133
</button>
134-
{#if $RADIODATA.overlay != 'never'}
134+
{#if $RADIODATA.overlay == 'never'}
135+
<button class="grow flex flex-col justify-center items-center gap-[6px]" on:click={changeTab('setting')}>
136+
<i class="fa-solid fa-gear"></i>
137+
<span class="text-[9px]">{$RADIODATA.locale['ui.settings']}</span>
138+
</button>
139+
{:else}
135140
<button class="grow flex flex-col justify-center items-center gap-[6px]" style="color:{$RADIODATA.onRadio? 'white':'#AAAFB4'}" disabled="{!$RADIODATA.onRadio}" on:click={changeTab('members')}>
136141
<i class="fa-solid fa-user-tag"></i>
137142
<span class="text-[9px]">{$RADIODATA.locale['ui.members']}</span>
138143
</button>
139144
{/if}
140145
</div>
141146

142-
<div class="w-full rounded-[6px] bg-[#18162F] flex justify-center items-center py-3 text-white text-[11px] drop-shadow-md gap-[6px]">
147+
<div class="w-full rounded-[6px] bg-[#18162F] flex justify-center items-center py-3 text-white text-[11px] shadow-md shadow-[#18162F]/40 gap-[6px]">
143148
<i class="fa-solid fa-location-arrow mt-1"></i>
144149
<span>{$RADIODATA.street}</span>
145150
</div>

‎web/src/components/channel.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
</script>
1111

1212
<div class="w-full h-[220px] flex flex-col p-4 gap-[5.5px] grow-0 shrink-0">
13-
<div class="w-full h-full rounded-[6px] bg-[#18162F] flex flex-col gap-[11px] drop-shadow-md">
13+
<div class="w-full h-full rounded-[6px] bg-[#18162F] flex flex-col gap-[11px] shadow-md shadow-[#18162F]/40">
1414
<ChannelTab channels={$RADIODATA[currenttab]}/>
1515
</div>
1616
</div>

‎web/src/components/connect.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
</script>
2222

2323
<div class="w-full h-[265px] flex flex-col p-4 gap-[9px]">
24-
<div class="w-full rounded-[6px] h-[38px] bg-[#18162F] drop-shadow-md flex items-center justify-between text-white px-4">
24+
<div class="w-full rounded-[6px] h-[38px] bg-[#18162F] shadow-md shadow-[#18162F]/40 flex items-center justify-between text-white px-4">
2525
<div class="font-bold text-[22px] min-w-[19px]">{channelnumber}</div>
2626
{#if channelnumber.length >= 1}
2727
<i class="fa-solid fa-circle-arrow-right text-[16px] cursor-pointer"

‎web/src/components/header.svelte

+4-4
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
</script>
2727

2828
{#if showmsg}
29-
<div class="w-full h-[33px] bg-[#18162F] flex items-center justify-between px-4 text-white text-[16px] rounded-t-md overflow-hidden whitespace-nowrap">
29+
<div class="relative w-full h-[33px] bg-[#18162F] flex items-center justify-between px-4 text-white text-[16px] overflow-hidden whitespace-nowrap">
3030
{#if showmsg.length >= 26}
3131
<MarqueeTextWidget>
3232
<div class="mr-4 font-bold w-full text-center text-[12px]">
@@ -38,7 +38,7 @@
3838
{/if}
3939
</div>
4040
{:else}
41-
<div transition:fadeSlide="{{duration: 300}}" class="w-full h-[32px] bg-[#18162F] flex items-center justify-between px-4 text-white text-[16px] rounded-t-lg">
41+
<div transition:fadeSlide="{{duration: 300}}" class="relative w-full h-[32px] bg-[#18162F] flex items-center justify-between px-4 text-white text-[16px]">
4242
{#if $RADIODATA.insideJammerZone}
4343
<i class="fa-solid fa-triangle-exclamation animate-pulse animate-infinite animate-duration-100 text-red-500"></i>
4444
{:else}
@@ -52,9 +52,9 @@
5252
{:else if $RADIODATA.battery >= 40}
5353
<i class="fa-solid fa-battery-half"></i>
5454
{:else if $RADIODATA.battery >= 20}
55-
<i class="fa-solid fa-battery-quarter"></i>
55+
<i class="fa-solid fa-battery-quarter text-yellow-500"></i>
5656
{:else}
57-
<i class="fa-solid fa-battery-empty"></i>
57+
<i class="fa-solid fa-battery-empty text-red-500 animate-pulse"></i>
5858
{/if}
5959
</div>
6060
{/if}

‎web/src/components/playerlist.svelte

+28-10
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,12 @@
33
import { RADIODATA, SHOWPLAYERLIST, PLAYERLIST } from "@stores/stores";
44
import { SendEvent } from "@utils/eventsHandlers";
55
import { Receive, Send } from "@enums/events";
6+
import { onMount } from "svelte";
7+
import { writable } from "svelte/store";
68
export let changeTab;
79
10+
const muted = writable<boolean[]>([]);
11+
812
ReceiveEvent(Receive.updateRadioTalking, (data: any) => {
913
$PLAYERLIST[data.radioId].isTalking = data.radioTalking
1014
})
@@ -14,26 +18,40 @@
1418
SendEvent(Send.showPlayerList, $SHOWPLAYERLIST)
1519
}
1620
21+
function mutePlayer(id: string) {
22+
SendEvent(Send.togglemutePlayer, Number(id)).then((data: boolean[]| null) => {
23+
if (data == null) return;
24+
muted.set(data);
25+
})
26+
}
27+
28+
onMount(() => {
29+
SendEvent(Send.getMutedList).then((data: any) => {
30+
muted.set(data);
31+
})
32+
})
33+
1734
</script>
1835

1936
{#if $PLAYERLIST != null}
20-
<div class="w-full h-[230px] drop-shadow-md p-4">
21-
<div class="w-full h-full bg-[#18162F] rounded-[6px] text-white font-bold overflow-scroll no-scrollbar">
37+
<div class="w-full h-[230px] p-4">
38+
<div class="w-full h-full bg-[#18162F] rounded-[6px] text-white font-bold overflow-scroll no-scrollbar shadow-md shadow-[#18162F]/40">
2239
{#each Object.entries($PLAYERLIST) as [id, player], index (id)}
23-
<div class="w-full h-[32px] flex items-center gap-[11px] px-4">
24-
<div class="w-[13px] h-[13px] rounded-full" style="background-color: {player.isTalking? "white":"#212146"}"></div>
25-
<span class="text-[11px]">{player.name}</span>
40+
<div class="flex justify-between w-full h-[32px] items-center px-4">
41+
<div class="flex items-center gap-[11px]">
42+
<div class="w-[13px] h-[13px] rounded-full" style="background-color: {player.isTalking? "white":"#212146"}"></div>
43+
<span class="text-[11px]">{player.name}</span>
44+
</div>
45+
<button on:click={()=> mutePlayer(id)}><i class="fa-solid fa-microphone-slash text-[10px]" style="color: {$muted[Number(id)-1] ? "white":"#616161"}"></i></button>
2646
</div>
2747
{/each}
2848
</div>
2949
</div>
3050

3151
<div class="w-full pb-4 px-4 flex gap-2">
32-
{#if $RADIODATA.overlay != 'never'}
33-
<button class="w-[70%] py-3 bg-[#18162F] flex justify-center items-center gap-[11px] text-white text-[11px] rounded-[6px] font-bold drop-shadow-md" on:click={()=> showPlayerList()}>{$SHOWPLAYERLIST? $RADIODATA.locale['ui.hide_overlay']:$RADIODATA.locale['ui.show_overlay']}</button>
34-
{/if}
35-
<button class="w-[25%] py-3 bg-[#18162F] flex justify-center items-center gap-[11px] text-white text-[11px] rounded-[6px] font-bold drop-shadow-md" on:click={changeTab('setting')}>
36-
<i class="fa-solid fa-gear text-[14px]"></i>
52+
<button class="w-[70%] py-3 bg-[#18162F] flex justify-center items-center gap-[11px] text-white text-[11px] rounded-[6px] font-bold shadow-md shadow-[#18162F]/40" on:click={()=> showPlayerList()}>{$SHOWPLAYERLIST? $RADIODATA.locale['ui.hide_overlay']:$RADIODATA.locale['ui.show_overlay']}</button>
53+
<button class="w-[25%] py-3 bg-[#18162F] flex justify-center items-center gap-[11px] text-white text-[11px] rounded-[6px] font-bold shadow-md shadow-[#18162F]/40" on:click={changeTab('setting')}>
54+
<i class="fa-solid fa-gear text-[14px]"></i>
3755
</button>
3856
</div>
3957
{/if}

‎web/src/enums/events.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -22,5 +22,8 @@ export enum Send {
2222
updateRadioSize = 'updateRadioSize',
2323
allowMovement = 'allowMovement',
2424
leave = 'leave',
25-
mute = 'toggleMute'
25+
mute = 'toggleMute',
26+
getMutedList = 'getMutedList',
27+
togglemutePlayer = 'togglemutePlayer',
28+
enableClicks = 'enableClicks',
2629
}

‎web/src/providers/Visibility.svelte

-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<script lang="ts">
2-
import Radio from '@components/radio.svelte';
32
import { Receive, Send } from '@enums/events';
43
import { VISIBLE, CONFIG, SHOW, RADIODATA, SHOWPLAYERLIST, SHOWFORCEPLAYERLIST } from '@stores/stores';
54
import { ReceiveEvent, SendEvent } from '@utils/eventsHandlers';

0 commit comments

Comments
 (0)