search

youkaclub / youka-desktop

The Best Karaoke Maker
https://www.youka.club/
460 stars 50 forks source link

Blank app #5

Closed sedubois closed 4 years ago

sedubois commented 4 years ago

Hi and thanks for sharing this app which I was curious to try. I've tried to run it locally by following the README instructions, but it opens an electron app with an empty screen. Is some extra setup needed or how can I debug this?

Screenshot 2020-04-20 at 10 41 50

I cloned the youka-desktop repo at revision bf45f56f1bf4032f85518a65b2fb403b9b1aa540.

Here is the npm start output:

$ npm start

> youka@0.1.0 start /Users/sdubois/Repos/youka-desktop
> concurrently "BROWSER=none craco start" "YOUKA_APP_URL=http://localhost:3000 electron src/main.js"

[0] Starting the development server...
[0] 
[0] Compiled successfully!
[0] 
[0] You can now view youka in the browser.
[0] 
[0]   http://localhost:3000/
[0] 
[0] Note that the development build is not optimized.
[0] To create a production build, use npm run build.

If I open http://localhost:3000/, I just get a blank screen, and the Javascript console has a single error ReferenceError: require is not defined thrown at external "crypto":1 (module.exports = require("crypto")).

I run on macOS 10.15.4 with Firefox 75.0.

sedubois commented 4 years ago

OK, somehow I managed to make the electron app display something by executing these commands separately in two terminal windows:

BROWSER=none ./node_modules/.bin/craco start
YOUKA_APP_URL=http://localhost:3000 ./node_modules/.bin/electron src/main.js
youkaclub commented 4 years ago

Hey @sedubois, browser can't execute nodejs modules, so all you need is to run "npm start" and refresh (Cmd+R) the electron window after the build is completed (I'll do it automatically in the future).

sedubois commented 4 years ago

Thanks, yes I had tested with npm start. Wasn't aware of the refresh, thanks for letting me know.

I was curious where in the code is the logic controlling the display of the subtitles (2 lines at a time with highlighting of the current one)?

youkaclub commented 4 years ago

currently it's implemented is server side (https://github.com/youkaclub/youka-api/blob/master/youka/captions.py#L83). the code adds css class name which defined here (https://github.com/youkaclub/youka-desktop/blob/master/src/index.css#L35)