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
Merge branch 'main' of github.com:flo-bit/youtube-party-dj
author
Tobias Westphal
date
(Jun 14, 2024, 4:59 PM +0200)
commit
41e2b8e9
41e2b8e993d840a0e1e2e95069eafe1c56a2751a
parent
6aba18fa
6aba18fa5df64a368c571b29632da8d433abf3bc
+69
-73
+7
LICENSE
+7
LICENSE
···
1
+
Copyright 2024 - youtube party dj team
2
+
3
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4
+
5
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6
+
7
+
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+29
-62
README.md
+29
-62
README.md
···
1
-
# Youtube Party DJ
1
+
# youtube party dj
2
+
3
+
play a youtube queue on one device and other devices can add songs to the queue, as well as vote on songs. highest voted song plays next. wip.
4
+
5
+
Made with [UIX](https://uix.unyt.org/).
6
+
7
+
## demo
8
+
9
+
short demo video (left player, right a client)
10
+
11
+
12
+
https://github.com/flo-bit/youtube-party-dj/assets/45694132/ac43fc09-d47f-4611-9991-0aa098f1105a
2
13
3
-
## Development
4
14
5
-
1. Clone the repository
15
+
## development
16
+
17
+
1. clone the repository
6
18
7
19
```bash
8
20
git clone https://github.com/flo-bit/youtube-party-dj.git
9
21
```
10
22
11
-
2. Install [deno](https://docs.deno.com/runtime/manual/getting_started/installation)
23
+
2. install [deno](https://docs.deno.com/runtime/manual/getting_started/installation)
12
24
13
-
3. Install UIX
25
+
3. install uix
14
26
15
27
```bash
16
28
deno install --import-map https://cdn.unyt.org/uix/importmap.json -Aq -n uix https://cdn.unyt.org/uix/run.ts
17
29
```
18
30
19
-
4. Install [node.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) if you haven't already
31
+
4. install [node.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) if you haven't already
20
32
21
-
5. Install node modules, run this in the root directory of the project:
33
+
5. install node modules, run this in the root directory of the project:
22
34
23
35
```bash
24
36
npm install
25
37
```
26
38
27
-
6. Run development server, run this in the root directory of the project:
39
+
6. get a youtube api key and add a `.env` file in the root directory of the project with the following content:
40
+
41
+
```env
42
+
YOUTUBE_API_KEY=<your api key>
43
+
```
44
+
45
+
7. run development server, run this in the root directory of the project:
28
46
29
47
```bash
30
48
npm run dev
31
49
```
32
50
33
-
7. Open the browser and navigate to `http://localhost`
34
-
35
-
51
+
8. open the browser and navigate to `http://localhost`
36
52
53
+
## license
37
54
38
-
39
-
40
-
## UIX Base Project
41
-
42
-
This repository provides a simple UIX setup, including backend, frontend and configuration files.
43
-
44
-
*[UIX Docs](https://docs.unyt.org/manual/uix/getting-started)*
45
-
46
-
## Project Structure
47
-
48
-
### Directories
49
-
The source code is split into three directories.
50
-
51
-
The `backend` directory contains the backend logic that runs on [Deno](https://deno.com/).
52
-
53
-
The `frontend` directory contains the code for the frontend clients (running in the web browser).
54
-
55
-
The default export of the `backend/entrypoint.ts` and `frontend/entrypoint.ts` determine what content
56
-
gets displayed when visiting a page in the browser.
57
-
58
-
The `common` directory contains common modules that can be initialized both in the browser and in the deno backend - they can be imported from modules in the `backend` and `frontend` directory.
59
-
60
-
The directory names (`backend`, `frontend`, `common`) are important to tell UIX which code runs in which context. The default names can also be changed in the `app.dx` config file.
61
-
62
-
### app.dx
63
-
64
-
The `app.dx` configuration file is required for a UIX app to run. It needs to contain at least the app name.
65
-
The `app.dx` has to be placed next to the app directories (`frontend`, `backend` and `common`) in the default configuration.
66
-
67
-
## Cross realm imports
68
-
69
-
Frontend and common modules can import exported values from backend modules.
70
-
In the background, special interface module files are generated, making sure that the backend source code is never exposed to the frontend endpoints.
71
-
72
-
Access to these exports can be limited by setting DATEX permission filters.
73
-
74
-
## Development
75
-
76
-
Compilation of the TS files is not required. The project can be deployed as is.
77
-
There is a devcontainer set up, containing the latest deno version.
78
-
79
-
To run the project, Deno has to be installed:
80
-
hit `CTRL`+`F5` to launch the project with the launch configuration.
81
-
82
-
With the `--live` option, frontend browser tabs are automatically reloaded when a file has changed, which is useful for development, but should not be used in production.
83
-
84
-
This command starts the backend endpoint and also exposes a web server on port 80 or another available port.
85
-
86
-
---
87
-
88
-
<sub>© unyt 2024 • [unyt.org](https://unyt.org)</sub>
55
+
mit
+29
-6
common/components/QR.tsx
+29
-6
common/components/QR.tsx
···
1
-
export default function QRCode({ code }: { code: string }) {
2
-
const qrCodeSrc = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent([new URL(window.location.href).origin, "/client/", code].join(""))}&format=svg`
1
+
import { Pointer } from "unyt_core/runtime/pointers.ts";
2
+
3
+
export default function QRCode({ code }: { code: Pointer<string> & string}) {
4
+
const qrCode = always(() => {
5
+
if (code == "XXXX") {
6
+
const text = "Loading QR Code ";
7
+
const loadingText = $$(text);
8
+
9
+
let i = 0;
10
+
setInterval(() => {
11
+
loadingText.val += ".";
12
+
if (i < 3) {
13
+
i++;
14
+
} else {
15
+
i = 0;
16
+
loadingText.val = text;
17
+
}
18
+
}, 500);
19
+
20
+
return <span style={{color: "black"}}>{loadingText}</span>;
21
+
} else {
22
+
const qrCodeSrc = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent([new URL(window.location.href).origin, "/client/", code].join(""))}&format=svg`
23
+
24
+
return <img class="h-full" src={qrCodeSrc} alt="QR code" />;
25
+
}
26
+
});
3
27
4
28
return (
5
29
<div class="aspect-square w-3/4 md:w-full border border-white/10 rounded-xl z-10 overflow-hidden bg-white p-4">
6
-
<div id="qr-code-target" class="w-full h-full flex items-center justify-center text-white">
7
-
<img class="w-full h-full" src={qrCodeSrc} alt="QR code" />
30
+
<div class="w-full h-full flex items-center justify-center text-white">
31
+
{qrCode}
8
32
</div>
9
33
</div>
10
34
);
11
-
}
12
-
35
+
}
+2
-1
common/components/QRCodeOverlay.tsx
+2
-1
common/components/QRCodeOverlay.tsx
···
1
+
import { Pointer } from "unyt_core/runtime/pointers.ts";
1
2
import QRCode from "./QR.tsx";
2
3
3
-
export default function QRCodeOverlay({code}: {code: string}) {
4
+
export default function QRCodeOverlay({code}: {code: Pointer<string> & string}) {
4
5
const showQR = $$(false);
5
6
6
7
return (
+1
-1
common/components/QueueItem.tsx
+1
-1
common/components/QueueItem.tsx
+1
-2
common/page.tsx
+1
-2
common/page.tsx
···
19
19
<main class="w-screen h-screen relative">
20
20
<div class="mx-auto grid md:grid-cols-2 h-screen">
21
21
<div class="h-screen hidden md:flex items-center flex-col justify-center p-8">
22
-
<QRCode code={code}/>
23
-
22
+
<QRCode code={code} />
24
23
<div class="text-white text-3xl font-semibold mt-4">Party code: <span>{code}</span></div>
25
24
</div>
26
25
<div