From 378cf21af6ae5ad09a120ec86f29b5bbc82f1d7c Mon Sep 17 00:00:00 2001
From: DecibillyJoel <23534814+DecibillyJoel@users.noreply.github.com>
Date: Tue, 31 May 2022 15:53:52 -0400
Subject: [PATCH] Improve Smooth Lyric Animation (#1096)

* app-mainMenu can be triggered by right click

Currently you can't open the little Cider popup menu without first uncollapsing the sidebar. This is extremely an extremely unepic sussy amogus L gamer moment. This change allows you to right click to bypass uncollapsing the sidebar and get straight to the hot app-mainMenu action. I think Cider speedrunners will greatly appreciate this quality of life addition. Please consider accepting this PR (short for pull request) to improve the UX (short for user experience).

* Improve Smooth Lyric Animation

PR #1094 introduced a few issues:
A) The animations would be paused when Cider was out of focus, making the lyrics remain grayed out
B) The animation was too slow, making it harder to sing along with karaoke mode on faster-paced songs
C) The easing method was inconsistent with the rest of the app and made the color look a little janky

This PR fixes issue A by changing the animation method from an animation to a transition, fixes B by increasing the speed (which themes can easily adjust if preferred), and fixes C by using the existing var(--appleEase) as the easing method
---
 src/renderer/style.less | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/renderer/style.less b/src/renderer/style.less
index bf434bfb..c65e5afb 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -1680,7 +1680,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 }
 
 .lyric-line.active .verse.verse-active {
-  animation: lyricVerseAnimation 0.75s ease-in-out forwards;
+  opacity: 1;
+  transition: opacity 0.35s var(--appleEase);
 }
 
 .lyric-line:hover {
@@ -1703,10 +1704,10 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
 .lyric-line.active {
   --bgSpeed: 1s;
+  opacity: 1;
   transform: scale(1);
   /*background: var(--keyColor);*/
-  transition: transform 0.2s var(--appleEase);
-  animation: lyricVerseAnimation 1s ease-in-out forwards;
+  transition: transform 0.2s var(--appleEase), opacity 0.35s var(--appleEase);
 }
 
 .lyric-line:not(.active) {
@@ -1788,16 +1789,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   display: flex;
 }
 
-@keyframes lyricVerseAnimation {
-  0% {
-    opacity: 0.6;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
 @keyframes lyricWaitingLine {
   0% {
     opacity: 0.25;