Add: [Preview] FullAppDisplay - LyricsPlus integration

LegionAG · Nov 25, 2021 · 1560167 · 1560167
1 parent 04eef8a
commit 1560167
Show file tree

Hide file tree

Showing 3 changed files with 463 additions and 352 deletions.
diff --git a/CustomApps/lyrics-plus/index.js b/CustomApps/lyrics-plus/index.js
@@ -331,6 +331,7 @@ class LyricsContainer extends react.Component {
         };
         this.mousetrap.reset();
         this.mousetrap.bind(CONFIG.visual["fullscreen-key"], this.toggleFullscreen);
+        window.addEventListener("fad-request", lyricContainerUpdate);
     }
 
     componentWillUnmount() {
@@ -456,11 +457,15 @@ class LyricsContainer extends react.Component {
         }
 
         this.state.mode = mode;
+        const fadLyricsContainer = document.getElementById("fad-lyrics-plus-container");
 
         const out = react.createElement(
             "div",
             {
-                className: "lyrics-lyricsContainer-LyricsContainer" + (CONFIG.visual["fade-blur"] ? " blur-enabled" : ""),
+                className:
+                    "lyrics-lyricsContainer-LyricsContainer" +
+                    (CONFIG.visual["fade-blur"] ? " blur-enabled" : "") +
+                    (fadLyricsContainer ? " fad-enabled" : ""),
                 style: this.styleVariables,
             },
             react.createElement("div", {
@@ -493,6 +498,8 @@ class LyricsContainer extends react.Component {
 
         if (this.state.isFullscreen) {
             return reactDOM.createPortal(out, this.fullscreenContainer);
+        } else if (fadLyricsContainer) {
+            return reactDOM.createPortal(out, fadLyricsContainer);
         } else {
             return out;
         }

diff --git a/CustomApps/lyrics-plus/style.css b/CustomApps/lyrics-plus/style.css
@@ -500,3 +500,24 @@ button.switch.small {
 #lyrics-fullscreen-container .lyrics-lyricsContainer-LyricsContainer::-webkit-scrollbar {
     background-color: var(--lyrics-color-background);
 }
+
+.lyrics-lyricsContainer-LyricsContainer.fad-enabled {
+    height: 100vh;
+    margin-top: 0;
+    margin-bottom: 0;
+    overflow-y: scroll;
+}
+
+.lyrics-lyricsContainer-LyricsContainer.fad-enabled .lyrics-lyricsContainer-LyricsLine {
+    margin-left: 100px;
+    margin-right: 100px;
+}
+
+.lyrics-lyricsContainer-LyricsContainer.fad-enabled .lyrics-lyricsContainer-LyricsBackground,
+.lyrics-lyricsContainer-LyricsContainer.fad-enabled .lyrics-lyricsContainer-Provider {
+    display: none;
+}
+
+.lyrics-lyricsContainer-LyricsContainer.fad-enabled .lyrics-lyricsContainer-SyncedLyricsPage {
+    width: 100%;
+}