feat(lyrics-plus): add japanese lyrics conversion tool

CustomApps/lyrics-plus/OptionsMenu.js

@@ -85,6 +85,76 @@ const OptionsMenu = react.memo(({ options, onSelect, selected, defaultValue, bol
     );
 });
 
+const TranslationMenu = react.memo(({ showTranslationButton, translatorLoaded }) => {
+    if (!showTranslationButton) return null;
+
+    return react.createElement(
+        Spicetify.ReactComponent.ContextMenu,
+        {
+            menu: react.createElement(
+                Spicetify.ReactComponent.Menu,
+                {},
+                react.createElement("h3", null, " Conversions"),
+                translatorLoaded
+                    ? react.createElement(OptionList, {
+                          items: [
+                              {
+                                  desc: "Mode",
+                                  key: "translation-mode",
+                                  type: ConfigSelection,
+                                  options: {
+                                      furigana: "Furigana",
+                                      romaji: "Romaji",
+                                      hiragana: "Hiragana",
+                                      katakana: "Katakana",
+                                  },
+                                  renderInline: true,
+                              },
+                              {
+                                  desc: "Convert",
+                                  key: "translate",
+                                  type: ConfigSlider,
+                                  trigger: "click",
+                                  action: "toggle",
+                                  renderInline: true,
+                              },
+                          ],
+                          onChange: (name, value) => {
+                              CONFIG.visual[name] = value;
+                              localStorage.setItem(`${APP_NAME}:visual:${name}`, value);
+                              lyricContainerUpdate && lyricContainerUpdate();
+                          },
+                      })
+                    : react.createElement(
+                          "div",
+                          null,
+                          react.createElement("p1", null, "Loading"),
+                          react.createElement("div", { class: "lyircs-translation-spinner" }, "")
+                      )
+            ),
+            trigger: "click",
+            action: "toggle",
+            renderInline: true,
+        },
+        react.createElement(
+            "button",
+            {
+                className: "lyrics-config-button",
+            },
+            react.createElement(
+                "p1",
+                {
+                    width: 16,
+                    height: 16,
+                    viewBox: "0 0 16 10.3",
+                    fill: "currentColor",
+                },
+                "あ"
+            )
+        )
+    );
+});
+
 const AdjustmentsMenu = react.memo(({ mode }) => {
     return react.createElement(
         Spicetify.ReactComponent.ContextMenu,

CustomApps/lyrics-plus/Pages.js

@@ -30,9 +30,15 @@ const IdlingIndicator = ({ isActive, progress, delay }) => {
                 "--indicator-delay": delay + "ms",
             },
         },
-        react.createElement("div", { className: `lyrics-idling-indicator__circle ${progress >= 0.05 ? "active" : ""}` }),
-        react.createElement("div", { className: `lyrics-idling-indicator__circle ${progress >= 0.33 ? "active" : ""}` }),
-        react.createElement("div", { className: `lyrics-idling-indicator__circle ${progress >= 0.66 ? "active" : ""}` })
+        react.createElement("div", {
+            className: `lyrics-idling-indicator__circle ${progress >= 0.05 ? "active" : ""}`,
+        }),
+        react.createElement("div", {
+            className: `lyrics-idling-indicator__circle ${progress >= 0.33 ? "active" : ""}`,
+        }),
+        react.createElement("div", {
+            className: `lyrics-idling-indicator__circle ${progress >= 0.66 ? "active" : ""}`,
+        })
     );
 };
 
@@ -204,7 +210,14 @@ const SyncedLyricsPage = react.memo(({ lyrics = [], provider, copyright, isKara
                                 .catch(() => Spicetify.showNotification("Failed to copy lyrics to clipboard"));
                         },
                     },
-                    !isKara ? text : react.createElement(KaraokeLine, { text, startTime, position, isActive })
+                    !isKara
+                        ? text
+                        : react.createElement(KaraokeLine, {
+                              text,
+                              startTime,
+                              position,
+                              isActive,
+                          })
                 );
             })
         ),
@@ -458,7 +471,14 @@ const SyncedExpandedLyricsPage = react.memo(({ lyrics, provider, copyright, isKa
                             .catch(() => Spicetify.showNotification("Failed to copy lyrics to clipboard"));
                     },
                 },
-                !isKara ? text : react.createElement(KaraokeLine, { text, startTime, position, isActive })
+                !isKara
+                    ? text
+                    : react.createElement(KaraokeLine, {
+                          text,
+                          startTime,
+                          position,
+                          isActive,
+                      })
             );
         }),
         react.createElement("p", {
@@ -581,7 +601,11 @@ const GeniusPage = react.memo(
         const lyricsEl1 = react.createElement(
             "div",
             null,
-            react.createElement(VersionSelector, { items: versions, index: versionIndex, callback: onVersionChange }),
+            react.createElement(VersionSelector, {
+                items: versions,
+                index: versionIndex,
+                callback: onVersionChange,
+            }),
             react.createElement("div", {
                 className: "lyrics-lyricsContainer-LyricsLine lyrics-lyricsContainer-LyricsLine-active",
                 ref: (c) => (container = c),
@@ -599,7 +623,11 @@ const GeniusPage = react.memo(
             const lyricsEl2 = react.createElement(
                 "div",
                 null,
-                react.createElement(VersionSelector, { items: versions, index: versionIndex2, callback: onVersionChange2 }),
+                react.createElement(VersionSelector, {
+                    items: versions,
+                    index: versionIndex2,
+                    callback: onVersionChange2,
+                }),
                 react.createElement("div", {
                     className: "lyrics-lyricsContainer-LyricsLine lyrics-lyricsContainer-LyricsLine-active",
                     ref: (c) => (container2 = c),

CustomApps/lyrics-plus/README.md

@@ -22,6 +22,10 @@ Lyrics in Unsynced and Genius modes can be search and jump to. Hit Ctrl + Shift
 
 ![search](./search.png)
 
+Choose between different option of displaying japanese lyrics. [Furigana, Romaji, Hirgana, Katakana]
+
+![conversion](./conversion.png)
+
 Customise colors, change providers' priorities in config menu. Config menu locates in Profile Menu (top right button with your user name).
 
 To install, run:
@@ -35,3 +39,4 @@ spicetify apply
 
 -   A few parts of app code are taken from Spotify official app, including SyncedLyricsPage, CSS animation and TabBar. Please do not distribute these code else where out of Spotify/Spicetify context.
 -   Netease synced lyrics parser is adapted from [mantou132/Spotify-Lyrics](https://github.com/mantou132/Spotify-Lyrics). Give it a Star if you like this app.
+-   The Algorithm for converting japanese lyrics is based on [Hexenq's Kuroshiro](https://github.com/hexenq/kuroshiro).