From cfdf406f6c80ce8497585dd7d830ce86ab7a586b Mon Sep 17 00:00:00 2001 From: brandon Date: Sun, 12 May 2024 21:18:59 -0700 Subject: [PATCH] background fades to new color, new left side menu (WIP) --- .gitignore | 5 +- .syncedlyrics/musixmatch_token.json | 6 +- __pycache__/_canvas.cpython-310.pyc | Bin 1633 -> 0 bytes protos/__pycache__/canvas_pb2.cpython-310.pyc | Bin 1842 -> 0 bytes spotifycontroller.py | 9 +- templates/webapp.html | 80 +++++++++--------- 6 files changed, 49 insertions(+), 51 deletions(-) delete mode 100644 __pycache__/_canvas.cpython-310.pyc delete mode 100755 protos/__pycache__/canvas_pb2.cpython-310.pyc diff --git a/.gitignore b/.gitignore index fc10c07..28b76b4 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,7 @@ client_id client_secret code spotify-gui.js.code-workspace -.syncedlyrics/musixmatch_token.json \ No newline at end of file +.syncedlyrics/musixmatch_token.json +__pycache__/_canvas.cpython-310.pyc +protos/__pycache__/canvas_pb2.cpython-310.pyc +__pycache__/_canvas.cpython-310.pyc diff --git a/.syncedlyrics/musixmatch_token.json b/.syncedlyrics/musixmatch_token.json index c5b0e8d..bf89c99 100644 --- a/.syncedlyrics/musixmatch_token.json +++ b/.syncedlyrics/musixmatch_token.json @@ -1,5 +1 @@ -<<<<<<< HEAD -{"token": "240508682dd31a29b369cb3e363b37522b3f583074e0a18384854b", "expiration_time": 1715204997} -======= -{"token": "240507dc1c1d721b422f329d191594415da1e4aec72fa0405c547e", "expiration_time": 1715112558} ->>>>>>> parent of d3a4e97 (revert 49cd2b87355a0031b1376f1842d894c19f0f0d67) +{"token": "2405094b2701c575f2a99e2a27bcc795a1413ae719c296da64cae9", "expiration_time": 1715289885} \ No newline at end of file diff --git a/__pycache__/_canvas.cpython-310.pyc b/__pycache__/_canvas.cpython-310.pyc deleted file mode 100644 index cce70f14e16ada5a905a8a4b653d944d7bcdfe93..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1633 zcmZ8hL2uhO6ecNImL1!1)~s0%+dLElW+1kkcEz@!>*hEvnzgeH+i3$!?q@%zm@$vETz3;tGUa^=*F#h~w^LR6h z&|h+Ka}Zd33p02Qf+C71$VlJVz_2D0GF1#^sv0UrR53DCH8h$rvQ#s4nl*A%H}W(` z^KX!`LRV-3-UW&Ws9O9RJfcpO#JAe6aKxfzxi77-&wiY-K*a0sDg)nh0~UUKB7`4o zHyVL&PaNio`g~M}J>eWL>b5rx?=fqD+nwEBcds*y)iERx=i0Aq<_pJjtBO34q8O{x z5>|}a?}!&5wzoU>_ThfOcyK5UMu)qeJ(~i!!C`M9PCU2LX+>F5Z(msFD_G<69KXF#k?|4WQ|vY4e?M z-SYj3V_Oo{hR;3W9nFrzPi|^o)#meg?bzef+Kf+_YkQQ@m@qeN4ANe0d|7{3|NN_p z(;YNk0Px_evh|?;puSc4Y-i?7Xl3h*-G}$8;o2y4{LKnw#}iAi&B_rEb34r9j8{Gl zs#>fyp>KT=7FwPwpk%e-!e`-Xs;xb@+|kS$u`n;oTWgNM;(D_!<8s_lTx`yu%G?Q) zoPdzo6X<7%ipv(}7({iQ%Ywx^IBhY%*4_x0lq?Qboe6R7f7g>yjNyTj&cjx$idY z1ouH`z>Yj7M8z6Ng40LC>RV0E|DzQ^PYSpM`vsCGpeOt;9IF-+i1~-`ZLB4&7}S@S z_(%7XiY4gr4Y1%JNTEsFa{9CAw>#|vbGY|?o4+sBg>G|y_|zP-kER}-P1s}E9f8b5M>;M;Xev$~cE!@3${9dHV#B~Ag(;H<=HFE`C&q$(_XUbs+j zk)`9`^EH~eP;rTse^PLTq4RZCVwDRG^w7D%N;C@+SZ4a`4VwE-3xA|}RwA1e!Ma5Y ztU`+q6tYd%5>%ydo|Yw7Nl=xp12QDHk)SHw1hlo}VpOHuz*Qw@Ca6ju0NPn{F{;vh zUx~lHhi8wDna@HyVzd^7JmL=bYNOeB%)*+(DXU+_$=g#e5oN*&-5}y2NaY)e1e|*@ zCFau+_XxEkdt?g+RCY9TJ<3AyyQV0p=-B=nThyf+qw4T!T?9OG$Md?}Idg31727>P znMN47A~Fg{pM|ce*3`#&qli+zJ!PgQr4q{6Z@^J#>ao20w}v(?KXRk_VeI6r$H25N zm~n)13%5*wA^mY-|7ram&-GOX>I-|uHY!DtM_iu>=5U`18Hm2~kBTyh3PPGolW1k= zUJ`5>Wyh|^2<*yejZaW2ng`5GLF}dd5AO|V07`~|5R*3}aWc~K`k%w~Wsb}Y$c6n! z_nJsjSwT7WL*TiN8<|-+k~20?VHSAYri_x&+{{V4kYpCw6EiO*@Vv;K^jwI!-Jeyo z@ot{JpE3BaEN~D<=`QnpaBoa2&L_Fwd4e*F-8}^9v5wXxB+omYZmWG<(F_x9zC)2-quuPBRCFVY^yAi1CG~6@8ShueH`*v8 zi}nCtCnOl{AGO6cw8rWKZVxIRr^(=D*K&UWe6nQI!UroA$U@)!6ZG)r9hGlSt^UC6f?N0FIF5&__7iT; zyv!0pxkCspPdJ}=Y|)`G1VT8h-~zd6_E3+R$}L8=f0$a(cSZmPG>O8YEyZO=Vp^a%O~qo&nA?6tasPVX{1@%YI01lYJn zA3ckw%?T62p0I{bEq^v`E{B%Di~Ru)Zjqpt91z$br+teYk{d65u+D?Xg-L=ppz*Jx zS(59wNde<1!sXi(^XacjScJRE<-h077sFGqBZl#KnhcxVnN6W@#IQS$UU9$H4f!Or zr*c1@jGs+rZvC|w%JLJ#q#dF9>cRXn_vMt+na93@8c@VjSW .animated-background { transition: background-color 1s ease-in-out; /* add a transition effect */ - background-color: #fff; /* initial background color */ - } - .animated-background.update-color { - background-color: var(--color); /* change the background color to black */ - } - @keyframes fade-in { - to { - background-color: var(--color); /* change the background color to black */ - } + background-color: var(--color); /* initial background color */ + transition: margin-left 0.5s; /* add a transition effect */ } .progress-container { position: fixed; bottom: 8px; width: 100%; - background-color: #ddd; + transition: background-color 1s ease-in-out; /* add a transition effect */ + background-color: var(--color); } .progress-bar { width: 0%; height: 10px; - background-color: #d734e9; text-align: center; line-height: 4px; color: white; @@ -39,12 +32,14 @@ font-weight: bold; text-align: center; margin-bottom: 5px; + transition: color 1s ease-in-out; /* add a transition effect */ } .artist-text { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 29px; text-align: center; margin-top: 5px; + transition: color 1s ease-in-out; /* add a transition effect */ } .middle { position: relative; @@ -69,6 +64,7 @@ text-align: center; } .buttons { + transition: filter 1s ease-in-out; /* add a transition effect */ position: absolute; bottom: 0; left: 0; @@ -91,11 +87,26 @@ vertical-align: center; width: 33%; } + /* LEFT SIDE SWIPE PAGE */ + .leftside { + height: 100%; + width: 0; + position: fixed; + top: 0; + left: 0; + background-color: var(--color); + overflow-x: hidden; + transition: 0.5s; + }
+
+ Close +
+ Swipe
Song Image @@ -244,56 +255,49 @@ const img = document.getElementById('image'); img.crossOrigin = 'Anonymous'; animatedBackground = document.querySelector('.animated-background'); - -document.documentElement.style - .setProperty('--my-variable-name', '100px'); + progressContainer = document.querySelector('.progress-container'); //get property - -getComputedStyle(document.documentElement) - .getPropertyValue('--my-variable-name'); // returns value if (img.complete) { const color = colorThief.getColor(img); - // document.body.style.backgroundColor = 'rgb(' + color + ')'; - // document.body.style.backgroundColor = 'rgb(' + color + ')'; animatedBackground.style.setProperty('--color', 'rgb(' + color + ')'); - animatedBackground.classList.add('update-color'); + progressContainer.style.setProperty('--color', 'rgb(' + color + ')'); getLuminance(color); } else { img.addEventListener('load', function() { const color = colorThief.getColor(img); - // document.body.style.backgroundColor = 'rgb(' + color + ')'; animatedBackground.style.setProperty('--color', 'rgb(' + color + ')'); - animatedBackground.classList.add('update-color'); + progressContainer.style.setProperty('--color', 'rgb(' + color + ')'); getLuminance(color); }); } } function getLuminance(color) { + songText = document.querySelector('.song-text'); + artistText = document.querySelector('.artist-text'); + buttonsDiv = document.querySelector('.buttons'); if (Math.sqrt(0.299 * (color[0] ** 2) + 0.587 * (color[1] ** 2) + 0.114 * (color[2] ** 2)) > 170) { - document.getElementById('name').style.color = 'black'; - document.getElementById('artist').style.color = 'black'; - document.getElementById('lyric').style.color = 'black'; - document.getElementById('previous').style.filter = 'invert(100%)'; - document.getElementById('playpause').style.filter = 'invert(100%)'; - document.getElementById('next').style.filter = 'invert(100%)'; - document.getElementById('like').style.filter = 'invert(100%)'; - document.getElementById('progress_container').style.backgroundColor = 'rgb(' + color + ')'; + songText.style.color = 'black'; + artistText.style.color = 'black'; + buttonsDiv.style.filter = 'invert(100%)'; darkColor = [color[0] - 75, color[1] - 75, color[2] - 75] document.getElementById('progress_bar').style.backgroundColor = 'rgb(' + darkColor + ')'; } else { - document.getElementById('name').style.color = 'white'; - document.getElementById('artist').style.color = 'white'; - document.getElementById('lyric').style.color = 'white'; - document.getElementById('previous').style.filter = ''; - document.getElementById('playpause').style.filter = ''; - document.getElementById('next').style.filter = ''; - document.getElementById('like').style.filter = ''; - document.getElementById('progress_container').style.backgroundColor = 'rgb(' + color + ')'; + songText.style.color = 'white'; + artistText.style.color = 'white'; + buttonsDiv.style.filter = ''; lightColor = [color[0] + 75, color[1] + 75, color[2] + 75] document.getElementById('progress_bar').style.backgroundColor = 'rgb(' + lightColor + ')'; } } + function openNav() { + document.getElementById('leftpage').style.width = "100%"; + document.querySelector('.animated-background').style.marginLeft = "100%"; + } + function closeNav() { + document.getElementById('leftpage').style.width = "0"; + document.querySelector('.animated-background').style.marginLeft = "0"; + } // function getLuminance() { // }