feat: add reversed mode & improvements to lyrics animation (#1226)

* feat(reversed-mode): add reversed mode & improvements to lyrics animation

* feat(lyrics-animation): improve `:active` style

* fix: extra white space after artist in lyrics view

* refactor: remove unused function

* feat: slightly add duration of transition to improve replication from Apple Music style

src/views/settings.vue

@@ -384,6 +384,23 @@
         </div>
       </div>
 
+      <div class="item">
+        <div class="left">
+          <div class="title">{{ $t('settings.enableReversedMode') }}</div>
+        </div>
+        <div class="right">
+          <div class="toggle">
+            <input
+              id="enable-reversed-mode"
+              v-model="enableReversedMode"
+              type="checkbox"
+              name="enable-reversed-mode"
+            />
+            <label for="enable-reversed-mode"></label>
+          </div>
+        </div>
+      </div>
+
       <div class="item">
         <div class="left">
           <div class="title" style="transform: scaleX(-1)">🐈️ 🏳️‍🌈</div>
@@ -805,6 +822,21 @@ export default {
         });
       },
     },
+    enableReversedMode: {
+      get() {
+        if (this.settings.enableReversedMode === undefined) return false;
+        return this.settings.enableReversedMode;
+      },
+      set(value) {
+        this.$store.commit('updateSettings', {
+          key: 'enableReversedMode',
+          value,
+        });
+        if (value === false) {
+          this.$store.state.player.reversed = false;
+        }
+      },
+    },
     enableGlobalShortcut: {
       get() {
         return this.settings.enableGlobalShortcut;