GUI fixes

README.MD

@@ -1,21 +1,20 @@
 # lyric spot
-i believe in the radical idea that accessibility features shouldn't be locked behind a paywall, but what do i know? i'm just a silly lil' open source developer guy with a hearing disability, not a multi ~~millionaire~~ billionaire CEO that pays artists pennies for their work that makes his platform possible... anyways for [totally unrelated](https://www.theverge.com/2023/9/5/23860124/spotify-lyrics-premium-only-feature) reasons i'm proud to introduce lyric spot!
+<img align="left" width="100" height="100" style="padding-right: 20px;" src="local/static/favicon.ico"> i believe in the radical idea that accessibility features shouldn't be locked behind a paywall, but what do i know? i'm just a silly lil' open source developer guy with a hearing disability, not a multi ~~millionaire~~ billionaire CEO that pays artists pennies for their work that makes his platform possible... anyways for [totally unrelated](https://www.theverge.com/2023/9/5/23860124/spotify-lyrics-premium-only-feature) reasons i'm proud to introduce lyric spot!
+
+<br>
 
 # about
 lyric spot uses the spotify and genius APIs to find the lyrics of the song you're currently playing on spotify then displays those lyrics on a webpage. this hosting method means you can view them anywhere* and regardless of device type, as long as it has a web browser.
 
 *assuming you add lyric spot to a server and use a tunnel with port-forwarding, otherwise only when on the same network as the device running it.
 
 # bugs and suggestions
-bugs are bound to happen especially with a single developer managing multiple APIs as a side project to his university coursework, so don't be afraid to report any in the issues tab. the only issue that i know of that i can't fix is the genius API showing the wrong thing when the lyrics don't exist on the genius website for the current song, but hey i guess it's a reason to contribute, right? :)
-
 lyric spot is primarily a tool meant to help me understand music with my hearing loss so development will center on that premise. that being said, please put any ideas or suggestions in the issues tab and i'll try to get to them.
 
-here are the features i'm currently planning on implementing:
-- using the web UI for initial setup instead of terminal in order to make the installation process as easy as possible for non-techys, as well as adding credentials into the settings menu as a byproduct
-- firefox and chrome extensions; gives users the option to choose a lite version of lyric spot if they're not interested in they whole installation process
-    - pros: don't need to set up python or constantly run a python script on your machine
-    - cons: lyrics can only be accessed from the extension page on that specific browser on that specific machine, may be slower due to running in a browser, may not be able to cache lyrics as well
+### known issues
+- the genius API wrapper used won't fail a search, meaning it may return the wrong/gibberish lyrics
+
+<br>
 
 # ready to install?
-view the [tutorial](docs/tutorial.md) if you need help setting up lyric spot.
+view the [documentation](docs/tutorial.md) if you need help installing lyric spot.

docs/tutorial.md

@@ -1,6 +1,6 @@
 # lyric spot installation tutorial
 
-# step 0: prepare python
+## step 0: prepare python
 lyric spot is developed with python 3.11.7 and the external libraries flask 3.0.0, flask-socketio 5.3.6, requests 2.31.0, lyricsgenius 3.0.1, and urllib3 2.0.4
 
 lyric spot will more than likely run normally if you either already have a somewhat recent python release and keep PIP and it's installs up to date or you newly downloaded the recent python release and all the required libraries because you didn't already have python and/or the libraries installed. however, if you're having issues with installation or want to set up a virtual environment for lyric spot then those are the specs.
@@ -18,16 +18,16 @@ py -m pip install urllib3
 
 if you want to know more in-depth about setting up python, please refer to the python organization's documentation about their software (especially the ones on [downloading python](https://wiki.python.org/moin/BeginnersGuide/Download) and [virtual environments](https://docs.python.org/3/tutorial/venv.html))
 
-# step 1: download the source code
-because lyric spot is based in python, the same code can be run the same way regardless of device as long as python is installed correctly. if you want a copy of the documentation or a quick and dirty install then download the zip from the top of the github repo and unzip it, otherwise you can find the source code without the fluff inside the releases section so download and extract that tarball instead. to download with the console, use `curl` or `wget` to download the source code and `tar` to extract
+## step 1: download the source code
+because lyric spot is based in python, the same code can be run the same way regardless of device as long as python is installed correctly. if you want a copy of the documentation or a quick and dirty install then download the zip from the top of the github repo and unzip it, otherwise you can find the source code without the fluff inside the releases section so [download](https://github.com/sna1lBoy/lyric-spot/releases/latest/download/lyricSpot.tar.gz) and extract that tarball instead. to download with the console, use `curl` or `wget` to download the source code and `tar` to extract
 
 ```
 // example headless download
 wget https://github.com/sna1lBoy/lyric-spot/releases/latest/download/lyricSpot.tar.gz
 tar -xvzf lyricSpot.tar.gz
 ```
 
-# step 2: fill in config.ini
+## step 2: fill in config.ini
 if you open the `files` directory in the source code file, you'll find `config.ini` which will look like this
 
 ```
@@ -61,7 +61,7 @@ of the four undefined values, you only need to add values for three of them. for
 
 the last value is the client access token, which is much simpler. go to https://genius.com/api-clients and sign in/up. create a new client and give it a name and url (i used the same one as spotify), then click to generate an access token and paste it into the config.
 
-# step 3: authorize the application
+## step 3: authorize the application
 now that you've given lyric spot the info it needs to run correctly, it's finally time to run it! ...but wait, there's more! you'll need to generate an authorization code so spotify knows you give lyric spot permission to make API calls. 
 
 to run lyric spot, you'll need to use one of three previously mentioned commands depending on your python version
@@ -76,7 +76,7 @@ python main.py
 
 when first booted, lyric spot will see that you left the refresh token blank and ask you to visit an accounts.spotify link. a few seconds after you open it, you should be redirected to a blank page. but check the url and you should see "code" near the beginning of it. copy everything after the equals sign and paste it into the console. if you did that as well as step 2 correctly, you should get a green message saying lyric spot is now continuing normally and you're free to visit the web UI at the printed address. otherwise, make sure your spotify application is set up correctly with the config and try again.
 
-# step 4: optional side quests
+## step 4: optional side quests
 now you've successfully set up lyric spot on one of your devices and can access it on the same network from any device with a web browser. but what if you didn't have to manually launch it every time you turned on the host device? or what if you could access it outside your home network? this is were services and tunnels come in to play. if you're interested in these ideas, here are some materials to get you started:
 - https://www.wireguard.com/quickstart/
 - https://www.procustodibus.com/blog/2021/04/wireguard-point-to-site-port-forwarding/

main.py

@@ -101,7 +101,6 @@ def lyricsLoop():
             break
         time.sleep(refreshRate)
 
-
 # load index html for showing lyrics
 @app.route("/")
 def index():
@@ -160,6 +159,7 @@ def resetSettings():
 @app.route("/update")
 def update_content():
     global lyrics
+
     return jsonify(content=lyrics.replace("\n", "<br>"))
 
 # sockets so that the lyric loop only runs when this page is open to minimize api abuse (spotify deserves it lmao have you seen the api flow chart? (https://developer.spotify.com/images/documentation/web-api/auth-code-flow.png) but i don't want them banning my ass lol)
@@ -183,4 +183,4 @@ def handle_disconnect():
     cli.show_server_banner = lambda *x: None
     socketio.run(app, host="0.0.0.0", port=port, debug=False, log_output=False, allow_unsafe_werkzeug=True)
 except:
-    print("\033[91merror: issue serving app, are you connected to the internet?\033[0m")
+    print("\033[91merror: issue serving app, are you connected to the internet?\033[0m")

static/style.css

@@ -14,13 +14,18 @@
 }
 
 .settingsToggle {
-  padding: 25px;
   border: none;
   background: none;
   font-size: 25px;
+  z-index: 11;
+  position: absolute;
+  right: 30px;
+  top: 25px;
+  cursor: pointer;
 }
 
 .settingsButton {
+  cursor: pointer;
   font-family: "circular-black";
   font-size: 15px;
   padding: 10px;
@@ -51,3 +56,7 @@
   margin-left: 5px;
   width: 50px;
 }
+
+.setting input[type="color"] {
+  cursor: pointer;
+}

templates/index.html

@@ -29,7 +29,7 @@
     </script>
 
     <!-- settings html -->
-    <button class="settingsToggle"onclick= "toggleSettings()" style="z-index: 11; position: absolute; right: 10px; top: 10px;">⚙️</button>
+    <button class="settingsToggle" onclick="toggleSettings()" title="open settings menu">⚙️</button>
     <div id="settingsBox" class="hidden" style="  z-index: 10; position: absolute; right: 0px; top: 0px;">
         <div class="boxWrapper">
             <form id="settingsform" method="POST" action="/saveSettings">