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
type fixes
author
Benedikt Strehle
date
(Jul 3, 2024, 10:17 PM +0200)
commit
ea6eb3d6
ea6eb3d649143ac79398c3c0ee493b784a9bc45c
parent
3d76b7a9
3d76b7a90c607cbbe0c6694859d6a3e5dd014f3b
+37
-44
+3
-2
backend/sessions.ts
+3
-2
backend/sessions.ts
···
1
1
import { Context } from "uix/routing/context.ts";
2
-
import { ObjectRef } from "unyt_core/runtime/pointers.ts";
2
+
import { ObjectRef } from "datex-core-legacy/runtime/pointers.ts";
3
3
4
4
export type Item = {
5
5
title: string;
···
145
145
export const getSortedQueue = (code: string) => {
146
146
const session = sessions[code];
147
147
if (!session) {
148
-
return;
148
+
console.log("no session!")
149
+
return $$([])
149
150
}
150
151
return always(() => {
151
152
return session.queue.toSorted((a, b) => {
+7
-10
common/client.tsx
+7
-10
common/client.tsx
···
17
17
18
18
const sorted = await getSortedQueue(code);
19
19
20
-
const searchResults: Item[] = $$([]);
20
+
const searchResults = $$<Item[]>([]);
21
21
22
-
const activeView: "queue" | "search" | "settings" = $$("queue");
22
+
const activeView = $$<"queue" | "search" | "settings">("queue");
23
23
24
24
const showSearch = $$(false);
25
25
···
83
83
84
84
{toggle(showSearch,
85
85
<div class="space-y-4">{
86
-
// @ts-ignore - uix stuff that doesn't work with types
87
-
searchResults.$.map((item: Item) => {
88
-
// @ts-ignore - uix stuff that doesn't work with types
89
-
return <QueueItem item={item.$} type={'search'} code={code}></QueueItem>
86
+
searchResults.$.map(item => {
87
+
return <QueueItem item={item} type={'search'} code={code}></QueueItem>
90
88
})}
91
89
</div>,
92
90
<div class="space-y-4">{
93
-
// @ts-ignore - uix stuff that doesn't work with types
94
-
sorted.$.map((item: Item) => {
95
-
// @ts-ignore - uix stuff that doesn't work with types
96
-
return <QueueItem item={item.$} type={'client'} code={code}></QueueItem>
91
+
sorted.$.map(item => {
92
+
console.log("sorterd item",item);
93
+
return <QueueItem item={item} type={'client'} code={code}></QueueItem>
97
94
})}
98
95
</div>)}
99
96
+1
-1
common/components/QR.tsx
+1
-1
common/components/QR.tsx
+1
-1
common/components/QRCodeOverlay.tsx
+1
-1
common/components/QRCodeOverlay.tsx
+4
-5
common/components/Queue.tsx
+4
-5
common/components/Queue.tsx
···
1
+
import { ObjectRef } from "datex-core-legacy/runtime/pointers.ts";
1
2
import { QueueItem } from "./QueueItem.tsx";
2
3
import { Item } from "backend/sessions.ts";
3
4
4
5
export type QueueType = 'player' | 'client' | 'search';
5
6
6
-
export function Queue({ items, type, code }: Readonly<{ items: Item[], type: QueueType, code: string }>) {
7
+
export function Queue({ items, type, code }: Readonly<{ items: ObjectRef<Item[]>, type: QueueType, code: string }>) {
7
8
return <div class="space-y-4">{
8
-
// @ts-ignore - uix stuff that doesn't work with types
9
-
items.$.map((item: Item) => {
10
-
// @ts-ignore - uix stuff that doesn't work with types
11
-
return <QueueItem item={item.$} type={type} code={code}></QueueItem>
9
+
items.$.map(item => {
10
+
return <QueueItem item={item} type={type} code={code}></QueueItem>
12
11
})}
13
12
</div>
14
13
}
+9
-9
common/components/QueueItem.tsx
+9
-9
common/components/QueueItem.tsx
···
1
-
import { ObjectRef } from "unyt_core/runtime/pointers.ts";
1
+
import { ObjectRef } from "datex-core-legacy/runtime/pointers.ts";
2
2
import { QueueType } from "./Queue.tsx";
3
3
import { getSessionWithCode, getUserId, Item, toggleLike } from "backend/sessions.ts";
4
4
···
9
9
}: Readonly<{ item: ObjectRef<Item>; type: QueueType; code: string }>) {
10
10
const userId = (await getUserId()).userId;
11
11
12
-
function sleep(ms) {
12
+
function sleep(ms: number) {
13
13
return new Promise(resolve => setTimeout(resolve, ms));
14
14
}
15
15
···
88
88
}
89
89
}
90
90
91
-
function getAction() {
91
+
async function getAction() {
92
92
if (type === "player") {
93
93
return (
94
94
<>
95
-
<div class="font-semibold">{always(() => item.likes.val.size)}</div>
95
+
<div class="font-semibold">{always(() => item.likes.size)}</div>
96
96
<svg
97
97
xmlns="http://www.w3.org/2000/svg"
98
98
viewBox="0 0 24 24"
···
111
111
}}
112
112
>
113
113
{always(() => {
114
-
if (item.likes.val.has(userId))
114
+
if (item.likes.has(userId))
115
115
return (
116
116
<div class="text-accent-500 fill-accent-500 stroke-accent-500 flex">
117
-
<div class="font-semibold">{item.likes.val.size}</div>
117
+
<div class="font-semibold">{item.likes.size}</div>
118
118
<svg
119
119
xmlns="http://www.w3.org/2000/svg"
120
120
viewBox="0 0 24 24"
···
128
128
else
129
129
return (
130
130
<div class="flex">
131
-
<div class="font-semibold">{item.likes.val.size}</div>
131
+
<div class="font-semibold">{item.likes.size}</div>
132
132
<svg
133
133
xmlns="http://www.w3.org/2000/svg"
134
134
fill="none"
···
159
159
if ((session.queue.some((v) => v.id == item.id) || session.currentlyPlaying?.id == item.id)) {
160
160
return;
161
161
}
162
-
session?.$.queue.val.push(item);
162
+
session?.queue.push(item);
163
163
toggleLike(code, item.id);
164
164
}}
165
165
id={`button-${item.id}`}
···
181
181
<p class="text-xs">{item.duration} minutes</p>
182
182
</div>
183
183
<div class="queueicon2 flex h-full justify-center items-center stroke-black dark:stroke-white px-2">
184
-
{getAction()}
184
+
{await getAction()}
185
185
</div>
186
186
</div>
187
187
</div>
+1
-1
common/components/VideoPlayer.tsx
+1
-1
common/components/VideoPlayer.tsx
···
7
7
async function playNext() {
8
8
// @ts-ignore - YouTube API
9
9
if (!player || player.getPlayerState() !== YT.PlayerState.PLAYING) {
10
-
const video = await getAndRemoveNextVideoFromSession(code.val);
10
+
const video = await getAndRemoveNextVideoFromSession(code);
11
11
if (video) {
12
12
play(video.id);
13
13
}
+4
-6
common/page.tsx
+4
-6
common/page.tsx
···
16
16
export default async function App() {
17
17
const session = await getSessionUserHosts();
18
18
19
-
const code = $$(session.code as string);
19
+
const code = $$(session.code);
20
20
21
21
const current = always(() => {
22
22
if (session.currentlyPlaying) {
···
34
34
});
35
35
36
36
const sorted = await getSortedQueue(code);
37
+
console.log("soert",sorted)
37
38
38
39
const timeLeft = always(() => {
39
40
let timeCounter = "0:00";
···
56
57
</div>
57
58
<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">
58
59
<div class="flex px-8 mx-0 mt-8 mb-4">
59
-
{/* @ts-ignore - uix doesn't support types? */}
60
60
<VideoPlayer queue={session.queue} code={code} />
61
61
</div>
62
62
<div class="flex items-center justify-end px-12 h-10 mb-4">
···
79
79
)
80
80
)}
81
81
<div class="space-y-4">{
82
-
// @ts-ignore - uix stuff that doesn't work with types
83
-
sorted.$.map((item: Item) => {
84
-
// @ts-ignore - uix stuff that doesn't work with types
85
-
return <QueueItem item={item.$} type={'player'} code={code}></QueueItem>
82
+
sorted.$.map(item => {
83
+
return <QueueItem item={item} type={'player'} code={code}></QueueItem>
86
84
})}
87
85
</div>
88
86
</div>
+1
-1
deno.json
+1
-1
deno.json
+6
-8
importmap.json
+6
-8
importmap.json
···
1
1
{
2
2
"imports": {
3
-
"datex-core-legacy": "https://cdn.unyt.org/datex-core-js-legacy@0.1.x/datex.ts",
4
-
"datex-core-legacy/": "https://cdn.unyt.org/datex-core-js-legacy@0.1.x/",
5
-
"unyt_core": "https://cdn.unyt.org/datex-core-js-legacy@0.1.x/datex.ts",
6
-
"unyt_core/": "https://cdn.unyt.org/datex-core-js-legacy@0.1.x/",
7
-
"uix": "https://cdn.unyt.org/uix@0.2.x/uix.ts",
8
-
"uix/": "https://cdn.unyt.org/uix@0.2.x/src/",
9
-
"uix/jsx-runtime": "https://cdn.unyt.org/uix@0.2.x/src/jsx-runtime/jsx.ts",
10
-
"unyt-tests/": "https://cdn.unyt.org/unyt_tests/"
3
+
"datex-core-legacy": "https://dev.cdn.unyt.org/unyt_core/datex.ts",
4
+
"datex-core-legacy/": "https://dev.cdn.unyt.org/unyt_core/",
5
+
"uix": "https://dev.cdn.unyt.org/uix1/uix.ts",
6
+
"uix/": "https://dev.cdn.unyt.org/uix1/src/",
7
+
"uix/jsx-runtime": "https://dev.cdn.unyt.org/uix1/src/jsx-runtime/jsx.ts",
8
+
"unyt-tests/": "https://dev.cdn.unyt.org/unyt_tests/"
11
9
}
12
10
}