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 pull request #11 from flo-bit/moritzbarv-patch-1
youtube player component
author
Florian
committer
GitHub
date
(Jun 2, 2024, 7:16 PM +0200)
commit
636b1c9f
636b1c9f149d04fe22fc4c2581308aefb31a8e26
parent
321938a3
321938a362fd7eaa93a9681805ede3d840b271e0
+57
-35
+52
-4
common/components/VideoPlayer.tsx
+52
-4
common/components/VideoPlayer.tsx
···
1
-
export default function VideoPlayer() {
1
+
export default function VideoPlayer({ videoList }: Readonly<{ videoList: string[] }>) {
2
+
// @ts-ignore - YouTube API
3
+
let player;
2
4
3
-
return (<div class="relative aspect-video bg-white/5 border border-white/10 w-full overflow-hidden object-cover rounded-xl">
5
+
function startPlaying() {
6
+
// @ts-ignore - YouTube API
7
+
if (videoList.length > 0 && (!player || player.getPlayerState() !== YT.PlayerState.PLAYING)) {
8
+
play(videoList[0]);
9
+
}
10
+
}
4
11
5
-
<div class="w-full h-full flex items-center justify-center text-white"> CURRENT YOUTUBE VIDEO </div>
12
+
function play(videoId: string) {
13
+
// @ts-ignore - YouTube API
14
+
if (player) {
15
+
player.loadVideoById(videoId);
16
+
} else {
17
+
// @ts-ignore - YouTube API
18
+
player = new window.YT.Player('player', {
19
+
height: '315',
20
+
width: '560',
21
+
videoId: videoId,
22
+
events: {
23
+
'onStateChange': onStateChange
24
+
}
25
+
});
26
+
}
27
+
}
6
28
29
+
// @ts-ignore - YouTube API
30
+
function onStateChange(event) {
31
+
// @ts-ignore - YouTube API
32
+
if (event.data === window.YT.PlayerState.ENDED) {
33
+
videoList.shift();
34
+
if (videoList.length > 0) {
35
+
play(videoList[0]);
36
+
}
37
+
}
38
+
}
39
+
40
+
function onYouTubeIframeAPIReady() {
41
+
startPlaying();
42
+
}
43
+
44
+
const tag = document.createElement('script');
45
+
tag.src = "https://www.youtube.com/iframe_api";
46
+
document.body.appendChild(tag);
47
+
48
+
// @ts-ignore - YouTube API
49
+
globalThis.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady
50
+
51
+
return (
52
+
<div class="relative aspect-video bg-white/5 border border-white/10 w-full overflow-hidden object-cover rounded-xl">
53
+
<div id="player" class="w-full h-full flex items-center justify-center text-white font-semibold"> Loading video... </div>
7
54
</div>);
8
55
9
-
}
56
+
}
57
+
+5
-2
common/page.tsx
+5
-2
common/page.tsx
···
4
4
import QRCodeOverlay from "./components/QRCodeOverlay.tsx";
5
5
6
6
export default function App() {
7
+
const videoIds = $$(['k1BneeJTDcU', 'dQw4w9WgXcQ', '-eohHwsplvY']);
8
+
7
9
return (
8
10
<main class="w-screen h-screen relative">
9
11
<div class="mx-auto grid md:grid-cols-2 h-screen">
···
16
18
class="flex flex-col overflow-y-hidden h-screen bg-white/5 border border-white/10 rounded-xl"
17
19
>
18
20
<div class="flex px-8 mx-0 my-8 ">
19
-
<VideoPlayer />
21
+
<VideoPlayer videoList={videoIds}/>
22
+
20
23
</div>
21
24
<div class="px-4 py-4 border-t border-white/20 mx-0 overflow-y-scroll flex-grow">
22
25
<Queue />
···
26
29
27
30
<QRCodeOverlay />
28
31
</main>);
29
-
}
32
+
}
-29
frontend/entrypoint.css
-29
frontend/entrypoint.css
···
856
856
height: 4rem;
857
857
}
858
858
859
-
.size-6 {
860
-
width: 1.5rem;
861
-
height: 1.5rem;
862
-
}
863
-
864
859
.size-8 {
865
860
width: 2rem;
866
861
height: 2rem;
867
862
}
868
863
869
-
.size-10 {
870
-
width: 2.5rem;
871
-
height: 2.5rem;
872
-
}
873
-
874
864
.h-20 {
875
865
height: 5rem;
876
866
}
···
939
929
940
930
.rounded-full {
941
931
border-radius: 9999px;
942
-
}
943
-
944
-
.rounded-md {
945
-
border-radius: 0.375rem;
946
932
}
947
933
948
934
.rounded-xl {
···
1021
1007
padding-bottom: 1rem;
1022
1008
}
1023
1009
1024
-
.py-2 {
1025
-
padding-top: 0.5rem;
1026
-
padding-bottom: 0.5rem;
1027
-
}
1028
-
1029
-
.py-2\.5 {
1030
-
padding-top: 0.625rem;
1031
-
padding-bottom: 0.625rem;
1032
-
}
1033
-
1034
1010
.pr-1 {
1035
1011
padding-right: 0.25rem;
1036
1012
}
···
1123
1099
}
1124
1100
1125
1101
@media (min-width: 640px) {
1126
-
.sm\:text-sm {
1127
-
font-size: 0.875rem;
1128
-
line-height: 1.25rem;
1129
-
}
1130
-
1131
1102
.sm\:leading-6 {
1132
1103
line-height: 1.5rem;
1133
1104
}