From d512bccf1e477417acda37202f18473af1e7e2fd Mon Sep 17 00:00:00 2001
From: MarcoMadera <marcoseguro2@gmail.com>
Date: Sun, 27 Aug 2023 18:10:29 -0700
Subject: [PATCH] lyrics calculations

---
 .../FullScreenLyrics/FullScreenLyrics.tsx     | 265 +++++++++++-------
 utils/getLinesFittingCanvas.ts                | 124 ++++++++
 2 files changed, 288 insertions(+), 101 deletions(-)

diff --git a/components/FullScreenLyrics/FullScreenLyrics.tsx b/components/FullScreenLyrics/FullScreenLyrics.tsx
index 6ec781aa..e4bbf79b 100644
--- a/components/FullScreenLyrics/FullScreenLyrics.tsx
+++ b/components/FullScreenLyrics/FullScreenLyrics.tsx
@@ -3,6 +3,7 @@ import {
   ReactElement,
   useEffect,
   useLayoutEffect,
+  useRef,
   useState,
 } from "react";
 
@@ -20,9 +21,11 @@ import { DisplayInFullScreen } from "types/spotify";
 import {
   colorCodedToHex,
   colorCodedToRGB,
-  getLinesFittingCanvas,
+  getAllLinesFittingWidth,
+  getLineType,
   getRandomColor,
   hexToHsl,
+  IFormatLyricsResponse,
   rgbToHex,
   ToastMessage,
 } from "utils";
@@ -31,6 +34,111 @@ interface FullScreenLyricsProps {
   appRef?: MutableRefObject<HTMLDivElement | undefined>;
 }
 
+interface ILyricLineProps {
+  line: IFormatLyricsResponse["lines"][0];
+  lyricsProgressMs: number;
+  lyrics: IFormatLyricsResponse;
+  type: "current" | "previous" | "next";
+  lyricLineColor: string;
+  lyricTextColor: string;
+}
+
+function LyricLine({
+  line,
+  lyricsProgressMs,
+  lyrics,
+  type,
+  lyricLineColor,
+  lyricTextColor,
+}: ILyricLineProps) {
+  const { player } = useSpotify();
+  const { user } = useAuth();
+  const isPremium = user?.product === "premium";
+  const lineRef = useRef<HTMLButtonElement>(null);
+
+  const lineColors = {
+    current: "#fff",
+    previous: lyricLineColor + "80",
+    next: lyricTextColor,
+  };
+
+  useEffect(() => {
+    const line = lineRef.current;
+    if (!line) return;
+    const currentLine = line.classList.contains("current");
+    if (currentLine) {
+      line.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+        inline: "nearest",
+      });
+    }
+  }, [lyricsProgressMs]);
+
+  return (
+    <button
+      onClick={(e) => {
+        e.stopPropagation();
+        if (
+          isPremium &&
+          line?.startTimeMs &&
+          player &&
+          lyrics.syncType === "LINE_SYNCED"
+        ) {
+          player.seek(Number(line.startTimeMs));
+        }
+      }}
+      className={`line ${type}`}
+      dir="auto"
+      ref={lineRef}
+    >
+      {line.words}
+      <style jsx>{`
+        .line {
+          display: block;
+          color: ${lyricTextColor};
+          background-color: transparent;
+          border: none;
+          width: 100%;
+          text-align: left;
+          padding-left: 144px;
+        }
+        .line.current {
+          color: ${lineColors.current};
+        }
+        .line.previous {
+          color: ${lineColors.previous};
+        }
+        .line.next {
+          color: ${lineColors.next};
+        }
+        .line:hover {
+          color: ${lyrics?.colors ? lyricLineColor : "#fff"};
+          opacity: 1;
+        }
+        @media (max-width: 768px) {
+          .line {
+            padding-left: 0;
+          }
+        }
+        @media (max-width: 658px) {
+          .line {
+            padding-left: 0;
+          }
+        }
+        .line {
+          font-size: 32px;
+          font-weight: 700;
+          letter-spacing: -0.04em;
+          line-height: 54px;
+          cursor: pointer;
+          transition: all 0.1s ease-out 0s;
+        }
+      `}</style>
+    </button>
+  );
+}
+
 export default function FullScreenLyrics({
   appRef,
 }: FullScreenLyricsProps): ReactElement {
@@ -75,17 +183,6 @@ export default function FullScreenLyrics({
     disableBackground: true,
   });
 
-  useEffect(() => {
-    const currentLine = document.querySelector(".line-current");
-    if (currentLine) {
-      currentLine.scrollIntoView({
-        behavior: "smooth",
-        block: "center",
-        inline: "nearest",
-      });
-    }
-  }, [lyricsProgressMs]);
-
   useEffect(() => {
     if (!isPremium) return;
     (player as Spotify.Player).getCurrentState().then((state) => {
@@ -156,48 +253,31 @@ export default function FullScreenLyrics({
   useEffect(() => {
     if (!isPictureInPictureLyircsCanvas || !pictureInPictureCanvas.current)
       return;
-    const lines = document.querySelectorAll(".line");
+    const lines = lyrics?.lines;
     const ctx = pictureInPictureCanvas.current.getContext("2d");
+    const canvasWidth = pictureInPictureCanvas.current.width;
+    const canvasHeight = pictureInPictureCanvas.current.height;
+    const LYRICS_PIP_HEADER_HEIGH = 100;
     if (!ctx) return;
-    const canvasHeight = pictureInPictureCanvas.current.height - 100;
+    const lyricsContainerHeight = canvasHeight - LYRICS_PIP_HEADER_HEIGH;
 
-    ctx.clearRect(0, 100, pictureInPictureCanvas.current.width, canvasHeight);
+    ctx.clearRect(0, 100, canvasWidth, lyricsContainerHeight);
     ctx.font = "24px Arial";
 
-    const canvasMiddle = canvasHeight / 2;
-    if (lyricsError) {
+    const canvasMiddle = lyricsContainerHeight / 2;
+    if (lyricsError || !lines) {
       ctx.fillStyle = lyricTextColor;
-      ctx.fillText(lyricsError, 10, canvasMiddle);
+      ctx.fillText(lyricsError ?? "", 10, canvasMiddle);
     }
 
-    const lineHeight = 40;
-    const allLines: {
-      color: string;
-      text: string;
-      type: "opaque" | "current" | "normal";
-    }[] = [];
-
-    lines.forEach((line) => {
-      const isOpaqueLine = line.classList.contains("line-opaque");
-      const isCurrentLine = line.classList.contains("line-current");
-      const color = isOpaqueLine
-        ? lyricTextColor + "80" // 50% opacity
-        : isCurrentLine
-        ? lyricLineColor
-        : lyricTextColor;
-
-      const linesText = getLinesFittingCanvas(
-        ctx,
-        line.textContent ?? "",
-        (pictureInPictureCanvas.current?.width ?? 10) - 20
-      );
-      linesText.forEach((lineText) => {
-        allLines.push({
-          color,
-          text: lineText,
-          type: isOpaqueLine ? "opaque" : isCurrentLine ? "current" : "normal",
-        });
-      });
+    const LINE_HEIGHT = 40;
+    const allLines = getAllLinesFittingWidth({
+      ctx,
+      lines: lines || [],
+      lyricLineColor,
+      lyricsProgressMs,
+      lyricTextColor,
+      canvasWidth,
     });
 
     const currentLineIndex = allLines.findIndex(
@@ -205,11 +285,29 @@ export default function FullScreenLyrics({
     );
 
     allLines.forEach((line, index) => {
+      const FIRST_LINES_TO_MIDDLE = 5;
+      const LAST_LINES_TO_MIDDLE = 7;
+      const isOneOfFirstLines = currentLineIndex < FIRST_LINES_TO_MIDDLE;
+      const isOfLastLines =
+        currentLineIndex > allLines.length - LAST_LINES_TO_MIDDLE;
+      const bottomLineTrace = isOfLastLines
+        ? lyricsContainerHeight +
+          LINE_HEIGHT +
+          10 -
+          LINE_HEIGHT * (allLines.length - currentLineIndex)
+        : canvasMiddle;
+      const middleHeight = isOneOfFirstLines
+        ? canvasMiddle - LINE_HEIGHT * (4 - currentLineIndex)
+        : bottomLineTrace;
+
       const lineY =
-        100 + canvasMiddle + lineHeight * (index - currentLineIndex);
-      ctx.fillStyle = line.color;
-      const limit = lineHeight + 100;
-      const isOutsideCanvas = lineY < limit || lineY > canvasHeight + limit;
+        LYRICS_PIP_HEADER_HEIGH +
+        middleHeight +
+        LINE_HEIGHT * (index - currentLineIndex);
+      ctx.fillStyle = line.color ?? "#fff";
+      const limit = LINE_HEIGHT + LYRICS_PIP_HEADER_HEIGH;
+      const isOutsideCanvas =
+        lineY < limit || lineY > lyricsContainerHeight + limit;
       if (isOutsideCanvas) return;
       ctx.fillText(line.text, 10, lineY);
     });
@@ -231,6 +329,7 @@ export default function FullScreenLyrics({
     lyricTextColor,
     lyricsBackgroundColor,
     pictureInPictureCanvas,
+    lyrics?.lines,
   ]);
 
   useEffect(() => {
@@ -302,34 +401,22 @@ export default function FullScreenLyrics({
       {lyrics && lyrics.lines.length > 0 && (
         <div className="lyrics">
           {lyrics.lines.map((line, i) => {
+            const type = getLineType({
+              currentLine: line,
+              lyricsProgressMs,
+              nextLine: lyrics.lines[i + 1],
+            });
+
             return (
-              <button
+              <LyricLine
+                line={line}
+                lyrics={lyrics}
+                lyricsProgressMs={lyricsProgressMs}
+                type={type}
+                lyricLineColor={lyricLineColor}
+                lyricTextColor={lyricTextColor}
                 key={i}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  if (
-                    isPremium &&
-                    line?.startTimeMs &&
-                    player &&
-                    lyrics.syncType === "LINE_SYNCED"
-                  ) {
-                    player.seek(Number(line.startTimeMs));
-                  }
-                }}
-                className={`line line${
-                  line.startTimeMs &&
-                  Number(line.startTimeMs) <= lyricsProgressMs &&
-                  lyrics?.lines[i + 1]?.startTimeMs &&
-                  Number(lyrics?.lines[i + 1]?.startTimeMs) >= lyricsProgressMs
-                    ? "-current"
-                    : Number(line.startTimeMs) <= lyricsProgressMs
-                    ? "-opaque"
-                    : ""
-                }`}
-                dir="auto"
-              >
-                {line.words}
-              </button>
+              />
             );
           })}
         </div>
@@ -428,19 +515,6 @@ export default function FullScreenLyrics({
             background-position: 100% 50%;
           }
         }
-        .line {
-          display: block;
-          color: ${lyricTextColor};
-          background-color: transparent;
-          border: none;
-          width: 100%;
-          text-align: left;
-          padding-left: 144px;
-        }
-        .line.line-current {
-          opacity: 1;
-          color: ${lyricLineColor};
-        }
       `}</style>
       <style jsx>{`
         .lyrics-container {
@@ -455,10 +529,6 @@ export default function FullScreenLyrics({
           position: sticky;
           top: 0;
         }
-        .line-opaque {
-          opacity: 0.5;
-          color: #fff;
-        }
         @media (max-width: 768px) {
           .lyrics-container {
             margin: 0px 64px;
@@ -481,9 +551,7 @@ export default function FullScreenLyrics({
           width: 100%;
           height: calc((var(--vh, 1vh) * 100) - 90px - 60px);
         }
-        .line,
-        .line-opaque,
-        .line-current {
+        .line {
           font-size: 32px;
           font-weight: 700;
           letter-spacing: -0.04em;
@@ -491,11 +559,6 @@ export default function FullScreenLyrics({
           cursor: pointer;
           transition: all 0.1s ease-out 0s;
         }
-        .lyrics .line:hover,
-        .lyrics .line-opaque:hover {
-          color: ${lyrics?.colors ? lyricLineColor : "#fff"};
-          opacity: 1;
-        }
         .lyrics {
           font-size: 2rem;
           color: #fff;
diff --git a/utils/getLinesFittingCanvas.ts b/utils/getLinesFittingCanvas.ts
index f7dd277d..f681017d 100644
--- a/utils/getLinesFittingCanvas.ts
+++ b/utils/getLinesFittingCanvas.ts
@@ -1,3 +1,5 @@
+import { IFormatLyricsResponse } from "./formatLyrics";
+
 export function getLinesFittingCanvas(
   ctx: CanvasRenderingContext2D,
   text: string,
@@ -20,3 +22,125 @@ export function getLinesFittingCanvas(
   lines.push(currentLine);
   return lines;
 }
+
+interface IGetLineInfo {
+  currentLine: IFormatLyricsResponse["lines"][0];
+  nextLine: IFormatLyricsResponse["lines"][0];
+  lyricLineColor: string;
+  lyricTextColor: string;
+  lyricsProgressMs: number;
+}
+interface IGetLineType {
+  currentLine: IFormatLyricsResponse["lines"][0];
+  nextLine: IFormatLyricsResponse["lines"][0];
+  lyricsProgressMs: number;
+}
+
+export function getLineType({
+  currentLine,
+  lyricsProgressMs,
+  nextLine,
+}: IGetLineType): "current" | "previous" | "next" {
+  const isPreviousLine =
+    currentLine.startTimeMs &&
+    Number(currentLine.startTimeMs) <= lyricsProgressMs;
+  const isNextLine =
+    nextLine?.startTimeMs && Number(nextLine?.startTimeMs) >= lyricsProgressMs;
+
+  const isCurrentLine = isPreviousLine && isNextLine;
+
+  const lineTypes = {
+    current: isCurrentLine,
+    previous: isPreviousLine,
+    next: isNextLine,
+  };
+
+  const type = Object.keys(lineTypes).find(
+    (key) => lineTypes[key as keyof typeof lineTypes]
+  ) as keyof typeof lineTypes;
+
+  return type;
+}
+
+export function getLineInfo({
+  currentLine,
+  lyricLineColor,
+  lyricTextColor,
+  lyricsProgressMs,
+  nextLine,
+}: IGetLineInfo): {
+  color: string;
+  text: string;
+  type: "current" | "previous" | "next";
+} {
+  const type = getLineType({
+    currentLine,
+    lyricsProgressMs,
+    nextLine,
+  });
+
+  const lineColors = {
+    current: "#fff",
+    previous: lyricLineColor + "80",
+    next: lyricTextColor,
+  };
+
+  return {
+    color: lineColors[type],
+    text: currentLine.words,
+    type,
+  };
+}
+
+interface IgetAllLinesFittingWidth {
+  lines: IFormatLyricsResponse["lines"];
+  ctx: CanvasRenderingContext2D;
+  lyricLineColor: string;
+  lyricTextColor: string;
+  lyricsProgressMs: number;
+  canvasWidth?: number;
+}
+
+export function getAllLinesFittingWidth({
+  ctx,
+  lines,
+  lyricLineColor,
+  lyricTextColor,
+  lyricsProgressMs,
+  canvasWidth,
+}: IgetAllLinesFittingWidth): {
+  color: string;
+  text: string;
+  type: "previous" | "current" | "next";
+}[] {
+  const allLines: {
+    color: string;
+    text: string;
+    type: "previous" | "current" | "next";
+  }[] = [];
+
+  lines.forEach((line, i) => {
+    const lineInfo = getLineInfo({
+      currentLine: line,
+      lyricLineColor,
+      lyricsProgressMs,
+      lyricTextColor,
+      nextLine: lines[i + 1],
+    });
+
+    const linesText = getLinesFittingCanvas(
+      ctx,
+      line.words ?? "",
+      (canvasWidth ?? 10) - 20
+    );
+    linesText.forEach((lineText) => {
+      allLines.push({
+        color: lineInfo.color,
+        text: lineText,
+        type: lineInfo.type,
+      });
+    });
+  });
+
+  return allLines;
+}