add more emphasis to current song (#283)

* add more emphasis to current song

* add css indicator (rivolumelineup)

* don't use absolute position, support album track number

* Respect order of set-queue function (fix race condition)

* Fix table row actions button on album detail and play queue

* Fix album detail table customizations

* Bump to v0.4.1

* Fix opacity mask for unsynced lyrics container

* Separate sidebar icons to new component

- Fixes react render issue

* Add app focus hook

* Remove css play image

* Add player status as cell refresh condition for queue

* Add current song images

* Add current song styles for all song tables

* Revert row index cell width

* Remove animated svg on browser

---------

Co-authored-by: jeffvli <jeffvictorli@gmail.com>
Co-authored-by: Jeff <42182408+jeffvli@users.noreply.github.com>
This commit is contained in:
Kendall Garner 2023-10-19 01:32:11 +00:00 committed by GitHub
parent 9964f95d5d
commit 8a53fab751
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 248 additions and 16 deletions

View file

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="100 130 57 80" xmlns="http://www.w3.org/2000/svg">
<rect x="100" y="130" width="12" height="20" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-origin: 106px 140px;"/>
<rect x="115" y="130" width="12" height="60" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-origin: 121px 160px;"/>
<rect x="130" y="130" width="12" height="80" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-origin: 136px 170px;"/>
<rect x="145" y="130" width="12" height="45" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-origin: 151px 152.5px;"/>
</svg>

After

Width:  |  Height:  |  Size: 656 B

View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="100 130 57 80" xmlns="http://www.w3.org/2000/svg">
<rect x="100" y="130" width="12" height="80" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-origin: 106px 170px;">
<animate attributeName="height" values="80;15;80" begin="0.1s" dur="0.95s" keyTimes="0; 0.47368; 1" repeatCount="indefinite" calcMode="spline" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"/>
</rect>
<rect x="115" y="130" width="12" height="80" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-origin: 121px 170px;">
<animate attributeName="height" values="25;80;25" begin="0.1s" dur="0.95s" keyTimes="0; 0.44444; 1" repeatCount="indefinite" calcMode="spline" keySplines="0.45 0 0.55 1; 0.45 0 0.55 1"/>
</rect>
<rect x="130" y="130" width="12" height="80" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-origin: 136px 170px;">
<animate attributeName="height" values="80;10;80" begin="0.1s" dur="0.85s" keyTimes="0; 0.42105; 1" repeatCount="indefinite" calcMode="spline" keySplines="0.65 0 0.35 1; 0.65 0 0.35 1"/>
</rect>
<rect x="145" y="130" width="12" height="80" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-origin: 151px 170px;">
<animate attributeName="height" values="30;80;30" begin="0.1s" dur="1.05s" keyTimes="0; 0.31579; 1" repeatCount="indefinite" calcMode="spline" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"/>
</rect>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB