1+ import { useEffect , useRef } from "react" ;
2+ import { useBoothSocket } from "../../../hooks/boothSocket" ;
3+
4+ import '../../../assets/css/karaoke.scss' ;
5+ import CDGPlayer from "./cdgplayer" ;
6+ import Webcam from "react-webcam" ;
7+ import { Stack , Typography } from "@mui/material" ;
8+ import { songTitle } from "../../../utils/songs" ;
9+ import OsdSong from "./osd_song" ;
10+ import VideoPlayer from "./videoplayer" ;
11+ import { b64ImageToBlob } from "../../../utils/files" ;
12+ import { useTranslation } from "react-i18next" ;
13+
14+ /**
15+ * This is a temp file
16+ * Currently, the karaoke module in index.tsx is a clone of the photobooth
17+ * With the capability to play songs
18+ * Later this probably will be merged as only one
19+ * Or something else, IDK yet
20+ *
21+ * But the idea is that the photobooth thing should still work when in Karaoke
22+ */
23+ export default function Karaoke ( ) {
24+ const { t} = useTranslation ( ) ;
25+ const { appState, lastMessage, sendMessage } = useBoothSocket ( ) ;
26+ const webcamRef = useRef < Webcam > ( null ) ;
27+ const module = appState . modules . karaoke ;
28+
29+ const takePicture = async ( ) => {
30+ if ( ! webcamRef || ! webcamRef . current ) {
31+ return ;
32+ }
33+
34+ const imageSrc = webcamRef . current . getScreenshot ( ) ;
35+ if ( imageSrc ) {
36+ let form = new FormData ( ) ;
37+
38+ form . append ( 'image' , b64ImageToBlob ( imageSrc ) ) ;
39+ form . append ( 'unattended' , 'true' )
40+ form . append ( 'event' , '' + appState ?. app_state ?. current_event ?. id )
41+
42+ try {
43+ await fetch ( '/api/picture' , {
44+ method : 'POST' ,
45+ body : form ,
46+ } ) ;
47+ } catch {
48+ }
49+ }
50+ } ;
51+
52+ useEffect ( ( ) => {
53+ if ( ! lastMessage ) {
54+ return ;
55+ }
56+
57+ if ( lastMessage . type == 'UNATTENDED_PICTURE' ) {
58+ takePicture ( ) ;
59+ }
60+ } , [ lastMessage ] ) ;
61+
62+ return < div className = "karaoke" >
63+ < Webcam
64+ forceScreenshotSourceSize
65+ ref = { webcamRef }
66+ width = { appState . modules . photobooth . webcam_resolution . width }
67+ height = { appState . modules . photobooth . webcam_resolution . height }
68+ screenshotFormat = "image/jpeg"
69+ videoConstraints = { { facingMode : 'user' , ...appState . modules . photobooth . webcam_resolution } }
70+ className = 'karaoke__webcam'
71+ />
72+ {
73+ module . currentSong && module . preplayTimer == 0 &&
74+ < >
75+ {
76+ module . currentSong . format . toLowerCase ( ) === 'cdg' &&
77+ < CDGPlayer
78+ cdgAlpha = { .8 }
79+ cdgSize = { window . innerHeight / 2 }
80+ width = { window . innerWidth / 2 }
81+ height = { window . innerHeight / 2 }
82+ isPlaying = { module . started }
83+ song = { module . currentSong }
84+ onEnd = { ( ) => sendMessage ( 'karaoke/PLAYING_ENDED' ) }
85+ onError = { ( ) => { } }
86+ onLoad = { ( ) => { } }
87+ onPlay = { ( ) => { } }
88+ onStatus = { ( x : any ) => sendMessage ( 'karaoke/PLAYING_STATUS' , { 'current' : x . position , 'total' : x . total } ) }
89+ />
90+ }
91+ {
92+ module . currentSong . format . toLowerCase ( ) !== 'cdg' && < VideoPlayer
93+ isPlaying = { module . started }
94+ song = { module . currentSong }
95+ onEnd = { ( ) => sendMessage ( 'karaoke/PLAYING_ENDED' ) }
96+ onStatus = { ( x : any ) => sendMessage ( 'karaoke/PLAYING_STATUS' , { 'current' : x . position , 'total' : x . total } ) }
97+ />
98+ }
99+ </ >
100+ }
101+ {
102+ module . currentSong && module . preplayTimer > 0 &&
103+ < Stack display = "column" className = "karaoke__no_song" >
104+ < Typography variant = "h1" > { t ( 'karaoke.now_playing' ) } :</ Typography >
105+ < Typography variant = "h2" > { songTitle ( module . currentSong ) } </ Typography >
106+ < Typography variant = "h3" > { module . preplayTimer } </ Typography >
107+ {
108+ module . currentSong . sung_by && module . currentSong . sung_by . length > 0 &&
109+ < Typography variant = "h2" > { t ( 'karaoke.sung_by' ) } { module . currentSong . sung_by } </ Typography >
110+ }
111+ </ Stack >
112+ }
113+ {
114+ ! module . currentSong &&
115+ < Stack display = "column" className = "karaoke__no_song" >
116+ < Typography variant = "h1" > { t ( 'karaoke.no_song_playing' ) } </ Typography >
117+ </ Stack >
118+ }
119+ {
120+ module . queue . length > 0 &&
121+ < Stack className = "karaoke__next_song" gap = { 1 } >
122+ < Typography variant = "h3" > { t ( 'karaoke.next_up' ) } :</ Typography >
123+ < OsdSong song = { module . queue [ 0 ] } />
124+ </ Stack >
125+ }
126+ </ div > ;
127+ }
0 commit comments