Sync changes from master branch (#67)

* Fixes index out of bounds bug and adds global placeholder variable

* Adds placeholder image

* Update spotify.html.j2

* Easy way to add more thems, added a dark theme

* Easy theme selection

* Themes and Templates setup guide

* Themes and Templates (#1)

* Update templates.json

* Update templates.json

* Update templates.json

* Update spotify.py

* Update spotify.py

* Update spotify.py

* Update spotify.py

* Update spotify.py

* Update spotify.py

* Update spotify.py

* Update spotify.py

* Update spotify.py

* Update templates.json

* Add spotify link for song and artist

- Added Spotify link to song title
- Added Spotify logo svg that takes the user to Spotify to listen to the currently playing song
- Added Spotify link to song artist

* Added support for Docker

- Updated SetUp.md with a "Run locally with Docker" section
- Moved requirements.txt to the root of the repo since some hosting
  services require the file to be there (eg. Heroku https://elements.heroku.com/buildpacks/heroku/heroku-buildpack-python)

* Apply codefactor.io suggestions

- Use specific python docker image (less error prone)
- Use '--no-cache-dir' flag in pip since pip cache makes docker images larger

* Prepare for Heroku deployment

- Heroku will bind the app to $PORT

- Add parameter to API to be able to customize the background color of the svg

- Add parameter to API to be able to customize the border color of the svg

- Add SetUp.md section on how to customize your card with URL parameters

Update SetUp.md with a section on how to customize the card

* Updated setup instructions and removed default spotify logo

* Change mail provider to custom built one

* Give Kudos in README

* Update eq if currently listening to or not

* Preview spotify logo

* Add header

* Give room for header

change color of status for contrast

* Update currentStatus

* Test height proporty

* change colors + margin

* Add gradient to eq

* Add background to bars

* Give transparency fill to bars

* Re-add background to bars to evaluate interactions

* Fix background for all bars to apply gradients

* Fix syntax error

* Zoom in background for gradient scroll

* Slow animation of gradient

* Set gradient animation to run first, then sound

* Modify zoom of bar background

* absolute bar travel time

* remove alternate animation for bars

* uncenter start background position

* remove sound animation for debug

* Zoom out background

* remove random.radient

* Remove debug

* Only randomize sound animation duration

* Speed up and add more bars

* Actually speed them up

* ZOOOOOM

* change bar animation to ease

* Slow down bar speeds

* Update README.md

* set bar animation to ease-out

* Set bars to ease in

* Speed up gradient animation

* Speed up gradient animation

* Get only last played song if not listening

* Fix syntax error on itemIndex declaration

* Generate random bezier for bar animations

* Expand speed window for bars

* Pan time window to favor fast

* add preview and prepare for PR

* Add preview and prepare for PR

* change preview.mp4 to .gif

* Split away from table

* General improvements

- Refresh token only when it expires (saves 1 request most of the time)
- Apply suggestions from python lsp-server

* Add album-cover related gradients (#66)

* Visualize light theme

* sync with gradients branch

most likely will revert

* Sorry light mode I am too tired for you

* Hope to add average color for the gradient

* nth child for all bar in bars real bar foobar bar!

* Make the EQ bar colors be based upon the album cover

* Fix req.txt

* silly imports, why are you so... you

* Give the song title a nice gradient

* textPalette -> songPalette

* Dark mode compatibility

* prevent .env changes from being made to the docker image, unless running locally

* Add gradient to the text in the song name, attempt animation

* remove animation from text

* frantic commenting

* Why does this work on a contianer from my computer but not on vercel

* aha!

* Add in some nice animations for the colors

* Add in some nice animations for the text colors

* Add glow keyframes for the text

* remove glow animation

* remove text shadow entirely

* force commit to rebuild vercel?

* undo last change,(literally nothing)

* Speed up artist gradient

* Only set the barPalette if there is no song currently playing

Attempt to set songPalette to the recently playing url, but there may be a requirement for a barPalette

* Give barPalette some love

* Add placeholder URL if no image exists

* Enable personalized changes

* Enable personalized changes

* Revert personalized changes

* Revert margin change

---------

Co-authored-by: Lloyd Owen <2387296o@student.gla.ac.uk>
Co-authored-by: Andrew Novac <anovaec@gmail.com>
Co-authored-by: Ethan Shoham <69990209+Ethan-S-Dev@users.noreply.github.com>
Co-authored-by: Ethan Shoham <ethan380s@gmail.com>
Co-authored-by: AlexandrosAlexiou <alex.alexiouu@gmail.com>
Co-authored-by: Alexander Hamilton <65139378+GalexY727@users.noreply.github.com>
Co-authored-by: Alexander Hamilton <a.hamilton72006@gmail.com>

api/templates/spotify-dark.html.j2

@@ -13,6 +13,18 @@
                     position: static;
                     margin-top: -5px;
                     margin-left: 10px;
+                    background: linear-gradient(
+                                    -125deg, 
+                                    rgb({{ songPalette[0][0] }}, {{ songPalette[0][1] }}, {{ songPalette[0][2] }}),
+                                    rgb({{ songPalette[1][0] }}, {{ songPalette[1][1] }}, {{ songPalette[1][2] }})
+                                );                    
+                    background-size: 200% 100%;
+                    background-position: 0% 50%;
+                    -webkit-text-fill-color: transparent;
+                    -webkit-background-clip: text;
+                    -webkit-box-decoration-break: clone;
+                    box-decoration-break: clone;
+                    animation: gradient 17s ease infinite;
                 }
                 
                 .container {
@@ -34,13 +46,25 @@
 
                 .song {
                     width: 330px;
-                    color: #f7f7f7;
+                    color: #666;
                     overflow: hidden;
                     margin-top: 3px;
                     font-size: 24px;
                     text-align: center;
                     white-space: nowrap;
                     text-overflow: ellipsis;
+                    background: linear-gradient(
+                                    125deg, 
+                                    rgb({{ songPalette[0][0] }}, {{ songPalette[0][1] }}, {{ songPalette[0][2] }}),
+                                    rgb({{ songPalette[1][0] }}, {{ songPalette[1][1] }}, {{ songPalette[1][2] }})
+                                );
+                    background-size: 200% 100%;
+                    background-position: 0% 50%;
+                    -webkit-text-fill-color: transparent;
+                    -webkit-background-clip: text;
+                    -webkit-box-decoration-break: clone;
+                    box-decoration-break: clone;
+                    animation: gradient 15s ease infinite;
                 }
 
                 .artist {
@@ -53,6 +77,18 @@
                     overflow: hidden;
                     white-space: nowrap;
                     text-overflow: ellipsis;
+                    background: linear-gradient(
+                                    -125deg, 
+                                    rgb({{ songPalette[0][0] }}, {{ songPalette[0][1] }}, {{ songPalette[0][2] }}),
+                                    rgb({{ songPalette[1][0] }}, {{ songPalette[1][1] }}, {{ songPalette[1][2] }})
+                                );                    
+                    background-size: 200% 100%;
+                    background-position: 0% 50%;
+                    -webkit-text-fill-color: transparent;
+                    -webkit-background-clip: text;
+                    -webkit-box-decoration-break: clone;
+                    box-decoration-break: clone;
+                    animation: gradient 12s ease infinite;
                 }
 
                 .cover {
@@ -74,11 +110,17 @@
                     position: absolute;
                     background: #5433FF;  /* fallback for old browsers */
                     background: -webkit-linear-gradient(to right, #20BDFF, #ab66ff, #5433FF, #20BDFF);  /* Chrome 10-25, Safari 5.1-6 */
-                    background: linear-gradient(to right, #20BDFF, #ab66ff, #5433FF, #20BDFF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+                    background: linear-gradient(
+                                    90deg, 
+                                    rgb({{ barPalette[0][0] }}, {{ barPalette[0][1] }}, {{ barPalette[0][2] }}) 0%, 
+                                    rgb({{ barPalette[1][0] }}, {{ barPalette[1][1] }}, {{ barPalette[1][2] }}) 33%, 
+                                    rgb({{ barPalette[2][0] }}, {{ barPalette[2][1] }}, {{ barPalette[2][2] }}) 66%, 
+                                    rgb({{ barPalette[3][0] }}, {{ barPalette[3][1] }}, {{ barPalette[3][2] }}) 100%
+                                );
                     background-size: 200% 100%;
                     background-position: 0% 50%;
                     background-attachment: fixed;
-                    animation: gradient 15s ease infinite, sound 0ms -800ms ease-in infinite alternate;
+                    animation: gradient 15s ease infinite, pulse 0ms -800ms ease-in infinite alternate;
                 }
                 
                 .spotify-logo {
@@ -109,7 +151,7 @@
                     }
                 }
                 
-                @keyframes sound {
+                @keyframes pulse {
                     0% {
                         height: 3px;
                         opacity: .35;

api/templates/spotify.html.j2

@@ -3,16 +3,29 @@
         <div xmlns="http://www.w3.org/1999/xhtml" class="container">
             <style>
                 .main {
-                    /*margin-top: 40px;*/
+                    margin-top: 40px;
                     display: flex;
                 }
 
                 .currentStatus {
                     float: left;
+                    color: #f7f7f7;
                     font-size: 24px;
                     position: static;
                     margin-top: -5px;
                     margin-left: 10px;
+                    background: linear-gradient(
+                                    -125deg, 
+                                    rgb({{ songPalette[0][0] }}, {{ songPalette[0][1] }}, {{ songPalette[0][2] }}),
+                                    rgb({{ songPalette[1][0] }}, {{ songPalette[1][1] }}, {{ songPalette[1][2] }})
+                                );                    
+                    background-size: 200% 100%;
+                    background-position: 0% 50%;
+                    -webkit-text-fill-color: transparent;
+                    -webkit-background-clip: text;
+                    -webkit-box-decoration-break: clone;
+                    box-decoration-break: clone;
+                    animation: gradient 17s ease infinite;
                 }
                 
                 .container {
@@ -39,6 +52,18 @@
                     text-align: center;
                     white-space: nowrap;
                     text-overflow: ellipsis;
+                    background: linear-gradient(
+                                    125deg, 
+                                    rgb({{ songPalette[0][0] }}, {{ songPalette[0][1] }}, {{ songPalette[0][2] }}),
+                                    rgb({{ songPalette[1][0] }}, {{ songPalette[1][1] }}, {{ songPalette[1][2] }})
+                                );
+                    background-size: 200% 100%;
+                    background-position: 0% 50%;
+                    -webkit-text-fill-color: transparent;
+                    -webkit-background-clip: text;
+                    -webkit-box-decoration-break: clone;
+                    box-decoration-break: clone;
+                    animation: gradient 15s ease infinite;
                 }
 
                 .artist {
@@ -51,6 +76,18 @@
                     overflow: hidden;
                     white-space: nowrap;
                     text-overflow: ellipsis;
+                    background: linear-gradient(
+                                    -125deg, 
+                                    rgb({{ songPalette[0][0] }}, {{ songPalette[0][1] }}, {{ songPalette[0][2] }}),
+                                    rgb({{ songPalette[1][0] }}, {{ songPalette[1][1] }}, {{ songPalette[1][2] }})
+                                );                    
+                    background-size: 200% 100%;
+                    background-position: 0% 50%;
+                    -webkit-text-fill-color: transparent;
+                    -webkit-background-clip: text;
+                    -webkit-box-decoration-break: clone;
+                    box-decoration-break: clone;
+                    animation: gradient 12s ease infinite;
                 }
 
                 .cover {
@@ -74,11 +111,17 @@
                     position: absolute;
                     background: #78ff8c;  /* fallback for old browsers */
                     background: -webkit-linear-gradient(to right, #7ad8ff, #5eff69, #78ff8c, #7ad8ff);  /* Chrome 10-25, Safari 5.1-6 */
-                    background: linear-gradient(to right, #7ad8ff, #5eff69, #78ff8c, #7ad8ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+                    background: linear-gradient(
+                                    90deg, 
+                                    rgb({{ barPalette[0][0] }}, {{ barPalette[0][1] }}, {{ barPalette[0][2] }}) 0%, 
+                                    rgb({{ barPalette[1][0] }}, {{ barPalette[1][1] }}, {{ barPalette[1][2] }}) 33%, 
+                                    rgb({{ barPalette[2][0] }}, {{ barPalette[2][1] }}, {{ barPalette[2][2] }}) 66%, 
+                                    rgb({{ barPalette[3][0] }}, {{ barPalette[3][1] }}, {{ barPalette[3][2] }}) 100%
+                                );                    
                     background-size: 200% 100%;
                     background-position: 0% 50%;
                     background-attachment: fixed;
-                    animation: gradient 15s ease infinite, sound 0ms -800ms ease-in infinite alternate;
+                    animation: gradient 15s ease infinite, pulse 0ms -800ms ease-in infinite alternate;
                 }
                 
                 .spotify-logo {
@@ -108,7 +151,7 @@
                     }
                 }
 
-                @keyframes sound {
+                @keyframes pulse {
                     0% {
                         height: 3px;
                         opacity: .35;
@@ -148,4 +191,4 @@
 
         </div>
     </foreignObject>
-</svg>
+</svg>

docker-compose.yml

@@ -1,6 +1,8 @@
 version: '3.8'
 services:
     spotify-readme:
+        env_file:
+            - .env
         build: .
         ports:
             - "5000:5000"

requirements.txt

@@ -14,3 +14,4 @@ requests==2.24.0
 toml==0.10.2
 urllib3==1.25.11
 Werkzeug==1.0.1
+colorthief==0.2.1