Containerized branch based on 303-proxy_http_ffmpeg_streams #305

honestlai · 2023-12-28T11:05:46Z

My first pull request. Not sure if I'm doing this right, but between GPT and KB's, things are happening. Resolves #293

Future commits with a more detailed readme on the docker deployment scenarios and options coming soon.

…n files for container deployments

honestlai · 2023-12-28T11:07:44Z

In the master, I included my css changes to splash.html and the full screen on button press when the splash page first loads

docker/entrypoint.sh

docker/README.md

templates/splash.html

docker/README.md

…area, also updated the docker readme

…area, updated the Dockerfile to pull from this branch, and updated the docker readme

Fixed a few broken/incorrect links

docker/Dockerfile

docker/entrypoint.sh

vicwomg · 2023-12-29T16:21:38Z

templates/splash.html

+  #now-playing {
+    padding: 10px 20px 10px 20px;
+    border-bottom-left-radius: 20px;  
+  }
  #qr-code {
    max-width: 25%;
+    border-top-right-radius: 20px; /* Rounded corner */
+    text-align: center; /* Center QR code */   
+    padding: 20px;
  }
  #up-next {
    max-width: 75%;
+    border-top-left-radius: 20px; /* Rounded corner */ 
+    padding: 10px 20px 10px 20px; 


I had a look and I'm not crazy about these boxes. They cover up much more screen real estate than the text alone, much of it being blank space. If the goal is to make the text more readable, I feel that adding a black or semi-transparent stroke effect to them would achieve the same thing and minimize how much of the video this is all covering up. https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke

On second thought, stroke is not great because it's an internal, not external stroke so it makes the text thinner. But an 8-axis shadow should work:
https://stackoverflow.com/a/47511171/2909171

Hmm.... I really like the look, to me it makes the interface very polished looking, and on most my screens it's rare they cover up important words.

I think what I might try to do is configure this so by default it's off, but ad a check box in the admin area so it can be turned on and off dynamically.

I do like the general look, I think it's just the excessive blank space that bugs me. Maybe if the singer name goes on the same line as the song title, it would be cleaner. Then give it a max-width so it will wrap if necessary.

btw, I don't think it's trivial to add admin settings checkboxes that will affect client side frontend. You'd probably have to dip into flask

Another thought, maybe the project in general should allow css overrides for custom "skinning". There's no way any interface will make everyone happy.

Ya, I'm definitely feeling that with the QR code area at the moment.

vicwomg · 2023-12-29T16:22:19Z

templates/splash.html

  #qr-code {
    max-width: 25%;
+    border-top-right-radius: 20px; /* Rounded corner */
+    text-align: center; /* Center QR code */   


I'd prefer for this to remain left-aligned so it's less likely to cover karaoke video text.

can do, not a biggie. It looked a little awkward when I had a long url there... I have one instance spun up on my personal server, and I know it would look odd to have the QR code left aligned.... buuuut even centered, the long URL + the QR doesn't look the greatest graphically either.

Been pondering a way to make it look more visually appealing... or maybe make the url text disappear altogether once a certain character count is reached.

Yeah, I agree its not great either way, maybe lowering the text size of the url would make it look more symmetrical. Or it might be worth adding a command line option to hide the url, but show the QR code, for minimalists. If that were the case a corner-aligned QR code would look pretty clean. But that's another ticket

This might be worth adding as a tick box option in the admin area.

docker/entrypoint.sh

… changes

…n a headless Ubuntu VPS

… connected to while troubleshooting

…o the splash screen... and possibly other guest connections

frankchau93 · 2024-03-14T20:30:14Z

I'm trying to run this on my machine but i keep getting an error:

PiKaraoke | ____ _ _ __ _
PiKaraoke | | _ () |/ /__ _ _ __ __ _ ___ | | _____
PiKaraoke | | |) | | ' // | '__/ _ |/ _ | |/ / _
PiKaraoke | | __/| | . \ (| | | | (| | () | < /
PiKaraoke | || |||__,|| _,|_/|_|____|
PiKaraoke |
PiKaraoke | URL was not set and Docker hostname could not be found. Users and guests will need to manually connect to http://(docker hostname):5555. The displayed QR code will not function properly.
PiKaraoke | hostname: unrecognized option: I
PiKaraoke | BusyBox v1.36.1 (2023-11-07 18:53:09 UTC) multi-call binary.
PiKaraoke |
PiKaraoke | Usage: hostname [-sidf] [HOSTNAME | -F FILE]
PiKaraoke |
PiKaraoke | Show or set hostname or DNS domain name
PiKaraoke |
PiKaraoke | -s Short
PiKaraoke | -i Addresses for the hostname
PiKaraoke | -d DNS domain name
PiKaraoke | -f Fully qualified domain name
PiKaraoke | -F FILE Use FILE's content as hostname
PiKaraoke | Traceback (most recent call last):
PiKaraoke | File "/pikaraoke/app.py", line 827, in
PiKaraoke | k = karaoke.Karaoke(
PiKaraoke | ^^^^^^^^^^^^^^^^
PiKaraoke | File "/pikaraoke/karaoke.py", line 134, in init
PiKaraoke | addresses_str = check_output(["hostname", "-I"]).strip().decode("utf-8", "ignore")
PiKaraoke | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
PiKaraoke | File "/usr/lib/python3.11/subprocess.py", line 466, in check_output
PiKaraoke | return run(*popenargs, stdout=PIPE, timeout=timeout, check=True,
PiKaraoke | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
PiKaraoke | File "/usr/lib/python3.11/subprocess.py", line 571, in run
PiKaraoke | raise CalledProcessError(retcode, process.args,
PiKaraoke | subprocess.CalledProcessError: Command '['hostname', '-I']' returned non-zero exit status 1.

Slightly altered branch based on 303-Proxy that includes dockerizatio…

fbf466d

…n files for container deployments