flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/youtube-party-dj. democratic youtube player, everyone can vote and add songs, uni project, made with uix
update + usernames display
author
mab10
date
(Jul 5, 2024, 9:36 PM +0200)
commit
565eaf65
565eaf653a88f9a478677b7d67b32767aee0616f
parent
d675e83e
d675e83e3caf3ae5eac1d179cc38dec67adc42ff
+65
-6
+18
common/components/UserDisplay.tsx
+18
common/components/UserDisplay.tsx
···
1
+
export default function UserDisplay({ names }: Readonly<{ names: string[] }>) {
2
+
// Filter out any names that are "anon" before rendering
3
+
const filteredNames = names.filter(name => name.toLowerCase() !== "anon");
4
+
5
+
return (
6
+
<div class="flex flex-wrap justify-start items-center gap-4 p-4">
7
+
{filteredNames.map((name) => (
8
+
<div class="bg-purple-600 text-white px-4 py-2 rounded-full shadow-lg">
9
+
{name}
10
+
</div>
11
+
))}
12
+
</div>
13
+
);
14
+
}
15
+
16
+
17
+
18
+
+22
-6
common/page.tsx
+22
-6
common/page.tsx
···
4
4
import { QueueItem } from "./components/QueueItem.tsx";
5
5
6
6
import QRCodeOverlay from "./components/QRCodeOverlay.tsx";
7
+
import UserDisplay from "./components/UserDisplay.tsx";
7
8
import { getSessionUserHosts, getSortedQueue } from "backend/sessions.ts";
8
9
import { NowPlaying } from "./components/NowPlaying.tsx";
9
10
import addDurations from "./helper.tsx";
···
19
20
const code = $$(session.code);
20
21
21
22
const arr = Array.from(session.clientIds);
23
+
const num = arr.length;
22
24
console.log(arr);
23
-
//const userNum = nickArray.length;
24
-
//console.log(userNum);
25
+
const users = Object.values(session.clients).map(client => client.name);
26
+
console.log(users);
25
27
26
28
const current = always(() => {
27
29
if (session.currentlyPlaying) {
···
50
52
51
53
loadInitialTheme();
52
54
55
+
53
56
return (
54
57
<main class="w-screen h-screen relative bg-gray-50 dark:bg-gray-950">
55
58
<div class="mx-auto grid md:grid-cols-2 h-screen">
56
-
<div class="h-screen hidden md:flex items-center flex-col justify-center p-8">
57
-
<QRCode code={code} />
58
-
<div class="text-black dark:text-white text-3xl font-semibold mt-4">
59
-
Party code: <a target="_blank" href={window.location.origin + '/client/' + code}>{code}</a>
59
+
60
+
<div class="flex flex-col h-screen hidden md:flex items-center justify-start p-8">
61
+
62
+
<div class="w-full max-w-lg mx-auto mt-6 mb-12">
63
+
<QRCode code={code}/>
64
+
<div class="text-black dark:text-white text-3xl font-semibold mt-4 text-center">
65
+
Party code: <a target="_blank" href={`${window.location.origin}/welcome?code=${encodeURIComponent(code)}`}>{code}</a>
66
+
</div>
60
67
</div>
68
+
69
+
<div class="w-full flex justify-center mt-4">
70
+
{/* <div class="text-xl text-white dark:text-white font-semibold">
71
+
{num}
72
+
</div> */}
73
+
<UserDisplay names={users} />
74
+
</div>
75
+
61
76
</div>
77
+
62
78
<div class="flex flex-col overflow-y-hidden h-screen bg-white dark:bg-white/5 border border-black dark:border-white/10 rounded-xl">
63
79
<div class="flex px-8 mx-0 mt-8 mb-4">
64
80
<VideoPlayer queue={session.queue} code={code} />
+25
frontend/entrypoint.css
+25
frontend/entrypoint.css
···
847
847
margin-bottom: 1rem;
848
848
}
849
849
850
+
.mb-12 {
851
+
margin-bottom: 3rem;
852
+
}
853
+
850
854
.mb-2 {
851
855
margin-bottom: 0.5rem;
852
856
}
···
865
869
866
870
.mt-4 {
867
871
margin-top: 1rem;
872
+
}
873
+
874
+
.mt-6 {
875
+
margin-top: 1.5rem;
868
876
}
869
877
870
878
.mt-8 {
···
988
996
max-width: 34rem;
989
997
}
990
998
999
+
.max-w-lg {
1000
+
max-width: 32rem;
1001
+
}
1002
+
991
1003
.flex-1 {
992
1004
flex: 1 1 0%;
993
1005
}
···
1009
1021
flex-direction: column;
1010
1022
}
1011
1023
1024
+
.flex-wrap {
1025
+
flex-wrap: wrap;
1026
+
}
1027
+
1012
1028
.place-content-center {
1013
1029
place-content: center;
1014
1030
}
···
1019
1035
1020
1036
.items-center {
1021
1037
align-items: center;
1038
+
}
1039
+
1040
+
.justify-start {
1041
+
justify-content: flex-start;
1022
1042
}
1023
1043
1024
1044
.justify-end {
···
1123
1143
.bg-gray-950 {
1124
1144
--tw-bg-opacity: 1;
1125
1145
background-color: rgb(3 7 18 / var(--tw-bg-opacity));
1146
+
}
1147
+
1148
+
.bg-purple-600 {
1149
+
--tw-bg-opacity: 1;
1150
+
background-color: rgb(147 51 234 / var(--tw-bg-opacity));
1126
1151
}
1127
1152
1128
1153
.bg-rose-300 {