last fix

components/FullScreenLyrics/FullScreenLyrics.tsx

@@ -40,6 +40,7 @@ export default function FullScreenLyrics(): ReactElement {
               currentLine: line,
               lyricsProgressMs,
               nextLine: lyrics.lines[i + 1],
+              index: i,
             });
 
             return <LyricLine line={line} type={type} key={i} />;
@@ -76,9 +77,9 @@ export default function FullScreenLyrics(): ReactElement {
           height: calc(100% + var(--border-width) * 2);
           background: linear-gradient(
             60deg,
-            ${lyricsBackgroundColor || "transparent"} 0%,
+            ${lyricsBackgroundColor ?? "transparent"} 0%,
             #ffffff80 50%,
-            ${lyricsBackgroundColor || "transparent"} 100%
+            ${lyricsBackgroundColor ?? "transparent"} 100%
           );
           background-size: 300% 300%;
           background-position: 0 50%;

components/FullScreenLyrics/LyricLine.tsx

@@ -1,11 +1,12 @@
 import { ReactElement, useEffect, useRef } from "react";
 
 import { useAuth, useLyricsContext, useSpotify } from "hooks";
+import { LineType } from "types/lyrics";
 import { IFormatLyricsResponse } from "utils";
 
 interface ILyricLineProps {
   line: IFormatLyricsResponse["lines"][0];
-  type: "current" | "previous" | "next";
+  type: LineType;
 }
 
 export function LyricLine({ line, type }: ILyricLineProps): ReactElement {

components/LyricsPIPButton/LyricsPIPButton.tsx

@@ -67,7 +67,7 @@ export default function LyricsPIPButton({
           font-family: Lato, sans-serif;
           font-size: 2.5rem;
           text-transform: uppercase;
-          background: ${background || "transparent"};
+          background: ${background ?? "transparent"};
           border: none;
         }
         .lyrics-pip-button:hover {

components/icons/LyricsPictureInPicture.tsx

@@ -5,7 +5,7 @@ export default function LyricsPictureInPicture(
 ): ReactElement {
   return (
     <svg role="img" height="20" width="20" viewBox="-2 0 20 16" {...props}>
-      <g fill="currentColor" fill-rule="evenodd">
+      <g fill="currentColor" fillRule="evenodd">
         <g opacity="0.6">
           <path d="M1 3v9h14V3H1zm0-1h14a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z"></path>
           <path d="M10 8h4v3h-4z"></path>

types/lyrics.ts

@@ -0,0 +1,12 @@
+export enum LineType {
+  FIRST = "first",
+  CURRENT = "current",
+  PREVIOUS = "previous",
+  NEXT = "next",
+}
+
+export interface IAllLines {
+  color: string;
+  text: string;
+  type: LineType;
+}

utils/applyLyricLinePositionAndColor.ts

@@ -1,5 +1,6 @@
-import { findIndexOrLast } from "./findIndexOrLast";
+import { LineType } from "types/lyrics";
 import {
+  findIndexOrLast,
   LINE_HEIGHT,
   LYRICS_PADDING_LEFT,
   LYRICS_PIP_HEADER_HEIGH,
@@ -10,15 +11,15 @@ export function applyLyricLinePositionAndColor(
   allLines: {
     color: string;
     text: string;
-    type: "current" | "previous" | "next";
+    type: LineType;
   }[],
   containerHeight: number
 ): void {
   const containerMiddle = containerHeight / 2;
-  const currentLineIndex = findIndexOrLast(
-    allLines,
-    (line) => line.type === "current"
-  );
+  const currentLineIndex = findIndexOrLast(allLines, (line) => {
+    const validTypes = ["current", "first"];
+    return validTypes.includes(line.type);
+  });
 
   allLines.forEach((line, index) => {
     const isOneOfFirstLines =

utils/getLinesFittingCanvas.ts

@@ -1,4 +1,5 @@
 import { IFormatLyricsResponse } from "./formatLyrics";
+import { IAllLines, LineType } from "types/lyrics";
 
 export function getLinesFittingCanvas(
   ctx: CanvasRenderingContext2D,
@@ -29,30 +30,34 @@ interface IGetLineInfo {
   lyricLineColor: string;
   lyricTextColor: string;
   lyricsProgressMs: number;
+  index: number;
 }
 interface IGetLineType {
   currentLine: IFormatLyricsResponse["lines"][0];
   nextLine: IFormatLyricsResponse["lines"][0];
   lyricsProgressMs: number;
+  index: number;
 }
 
 export function getLineType({
   currentLine,
   lyricsProgressMs,
   nextLine,
-}: IGetLineType): "current" | "previous" | "next" {
+  index,
+}: IGetLineType): LineType {
   const isPreviousLine =
     currentLine.startTimeMs &&
     Number(currentLine.startTimeMs) <= lyricsProgressMs;
   const isNextLine =
     nextLine?.startTimeMs && Number(nextLine?.startTimeMs) >= lyricsProgressMs;
-
   const isCurrentLine = isPreviousLine && isNextLine;
+  const isFirstLine = index === 0;
 
-  const lineTypes = {
-    current: isCurrentLine,
-    previous: isPreviousLine,
-    next: isNextLine,
+  const lineTypes: Record<LineType, boolean> = {
+    current: !!isCurrentLine,
+    previous: !!isPreviousLine,
+    first: isFirstLine,
+    next: !!isNextLine,
   };
 
   const type = Object.keys(lineTypes).find(
@@ -68,21 +73,24 @@ export function getLineInfo({
   lyricTextColor,
   lyricsProgressMs,
   nextLine,
+  index,
 }: IGetLineInfo): {
   color: string;
   text: string;
-  type: "current" | "previous" | "next";
+  type: LineType;
 } {
   const type = getLineType({
     currentLine,
     lyricsProgressMs,
     nextLine,
+    index,
   });
 
-  const lineColors = {
+  const lineColors: Record<LineType, string> = {
     current: "#fff",
     previous: lyricLineColor + "80",
     next: lyricTextColor,
+    first: lyricTextColor,
   };
 
   return {
@@ -108,16 +116,8 @@ export function getAllLinesFittingWidth({
   lyricTextColor,
   lyricsProgressMs,
   canvasWidth,
-}: IgetAllLinesFittingWidth): {
-  color: string;
-  text: string;
-  type: "previous" | "current" | "next";
-}[] {
-  const allLines: {
-    color: string;
-    text: string;
-    type: "previous" | "current" | "next";
-  }[] = [];
+}: IgetAllLinesFittingWidth): IAllLines[] {
+  const allLines: IAllLines[] = [];
 
   lines.forEach((line, i) => {
     const lineInfo = getLineInfo({
@@ -126,6 +126,7 @@ export function getAllLinesFittingWidth({
       lyricsProgressMs,
       lyricTextColor,
       nextLine: lines[i + 1],
+      index: i,
     });
 
     const linesText = getLinesFittingCanvas(

utils/index.ts

@@ -57,3 +57,4 @@ export * from "./templateReplace";
 export * from "./topBar";
 export * from "./wait";
 export * from "./within";
+export * from "./findIndexOrLast";