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
discord bot control toggle
author
thaleius
date
(Jul 13, 2024, 9:38 PM UTC)
commit
7790e45e
7790e45e93cc58eea28d980adb50045e8642dd71
parent
1ea65bea
1ea65bea43f1c7b6c83671f3e908d6c0e70f6c64
+38
-12
+5
-7
common/components/VideoPlayer.tsx
+5
-7
common/components/VideoPlayer.tsx
···
77
77
})
78
78
79
79
return (
80
-
<div class="relative aspect-video bg-white dark:bg-white/5 border border-black dark:border-white/10 w-full overflow-hidden object-cover rounded-xl">
81
-
<div
82
-
id="player"
83
-
class="w-full h-full flex items-center justify-center dark:text-white text-black font-semibold"
84
-
>
85
-
{text}
86
-
</div>
80
+
<div
81
+
id="player"
82
+
class="w-full h-full flex items-center justify-center dark:text-white text-black font-semibold"
83
+
>
84
+
{text}
87
85
</div>
88
86
);
89
87
}
+2
-2
common/components/integrations/discord/DiscordPopup.tsx
+2
-2
common/components/integrations/discord/DiscordPopup.tsx
···
1
-
export function ToggleDiscordPopupButton() {
1
+
export function ToggleDiscordControls({ togglePointer }: { togglePointer: () => void }) {
2
2
const onClick = () => {
3
3
globalThis.open("/integration/discord", "_blank", 'location=yes,height=300,width=200,scrollbars=yes,status=yes');
4
4
}
5
5
6
6
return (
7
7
<div>
8
-
<button class="cursor-pointer" onclick={onClick}>
8
+
<button class="cursor-pointer" onclick={togglePointer}>
9
9
<div class="flex items-center justify-center w-10">
10
10
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36" fill="currentColor" class="rounded-lg size-6 active:size-5 hidden dark:block fill-white">
11
11
<g id="图层_2" data-name="图层 2">
+31
-3
common/page.tsx
+31
-3
common/page.tsx
···
14
14
loadInitialTheme,
15
15
} from "./components/ToggleThemeButton.tsx";
16
16
import { Item } from "../backend/sessions.ts";
17
-
import { ToggleDiscordPopupButton } from "common/components/integrations/discord/DiscordPopup.tsx";
17
+
18
+
import { ToggleDiscordControls } from "common/components/integrations/discord/DiscordPopup.tsx";
19
+
import Discord from "common/components/integrations/discord/Discord.tsx";
18
20
19
21
export default async function App() {
20
22
const session = await getSessionUserHosts();
···
26
28
console.log(arr);
27
29
const users = Object.values(session.clients).map(client => client.name);
28
30
console.log(users);
31
+
32
+
// discord controls toggle
33
+
const showDiscordControls = $$(false);
34
+
35
+
const toggleDiscordControls = () => {
36
+
showDiscordControls.val = !showDiscordControls.val;
37
+
}
29
38
30
39
const current = always(() => {
31
40
if (session.currentlyPlaying) {
···
76
85
77
86
}
78
87
88
+
// assign video player component to a variable, so it can be rendered conditionally
89
+
const videoPlayer = always(() => {
90
+
return <VideoPlayer queue={session.queue} code={code} />;
91
+
});
92
+
93
+
// assign discord component to a variable, so it doesn't rerender on every state change
94
+
const discord = always(() => <Discord />);
95
+
96
+
// show discord or video controls based on the state of showDiscordControls
97
+
const showDiscordOrVideoControls = always(() => {
98
+
if (showDiscordControls.val) {
99
+
return discord;
100
+
} else {
101
+
return videoPlayer;
102
+
}
103
+
});
104
+
79
105
return (
80
106
<main class="w-screen h-screen relative bg-gray-50 dark:bg-gray-950">
81
107
<div class="mx-auto grid md:grid-cols-2 h-screen">
···
94
120
95
121
<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">
96
122
<div class="flex px-8 mx-0 mt-8 mb-4">
97
-
<VideoPlayer queue={session.queue} code={code} />
123
+
<div class="relative aspect-video bg-white dark:bg-white/5 border border-black dark:border-white/10 w-full overflow-hidden object-cover rounded-xl">
124
+
{showDiscordOrVideoControls}
125
+
</div>
98
126
</div>
99
127
<div class="flex items-center justify-end px-12 h-10 mb-4">
100
-
<ToggleDiscordPopupButton />
128
+
<ToggleDiscordControls togglePointer={toggleDiscordControls} />
101
129
<ToggleThemeButton />
102
130
</div>
103
131