Added Lyrics Feature

.gitignore

@@ -73,4 +73,7 @@ package
 *.orig
 
 # generated version file
-version.generated.ts
+version.generated.ts
+
+# idea generated folder
+.idea/

README.md

@@ -27,6 +27,14 @@ Lofi is a mini Spotify player with visualizations. It is _not_ a replacement for
 - Visualization-ready (WebGL)
 - ≤ 100MB memory footprint
 
+## Lyrics (new feature)
+
+| Custom Font and background color | Minimalistic and simple|
+|--|--|
+|![](https://github.com/alient12/lofi/assets/73688480/2f0824c9-1a18-4730-9906-e9cf04030d14)|![](https://github.com/alient12/lofi/assets/73688480/0a95ac65-68b8-4a9d-84e5-ab3ad671024e)|
+
+Installing `Circular Std Book` font is recommanded for lyrics.
+
 # Building
 
 To build, you'll need `node-gyp`, a compatible Python version (2.x), and your operating system's SDK (Microsoft Build Tools or Xcode).

src/constants.ts

@@ -12,6 +12,7 @@ export const MAX_BAR_THICKNESS = 20;
 export const MIN_FONT_SIZE = 6;
 export const MAX_FONT_SIZE = 32;
 export const TRACK_INFO_GAP = { X: 10, Y: 10 };
+export const LYRICS_GAP = { X: 0, Y: 10 };
 export const MAX_CORNER_RADIUS = 20;
 
 export const MIN_SKIP_SONG_DELAY = 5;
@@ -22,6 +23,7 @@ export enum WindowTitle {
   FullscreenViz = 'fullscreen-visualization',
   Settings = 'Lofi Settings',
   TrackInfo = 'track-info',
+  Lyrics = 'lyrics',
 }
 
 export enum WindowName {
@@ -30,6 +32,7 @@ export enum WindowName {
   FullscreenViz = 'fullscreen-visualization',
   Settings = 'settings',
   TrackInfo = 'track-info',
+  Lyrics = 'lyrics',
 }
 
 export enum IpcMessage {
@@ -53,4 +56,5 @@ export enum ApplicationUrl {
   Help = 'https://www.lofi.rocks/help',
   Discord = 'https://discord.gg/YuH9UJk',
   GitHub = 'https://github.com/dvx/lofi',
+  FindLyricsToken = 'https://github.com/akashrchandran/syrics/wiki/Finding-sp_dc',
 }

src/main/main.ts

@@ -13,6 +13,7 @@ import {
   nativeImage,
   Rectangle,
   screen,
+  session,
   shell,
   Tray,
 } from 'electron';
@@ -37,8 +38,10 @@ import {
   getAboutWindowOptions,
   getFullscreenVisualizationWindowOptions,
   getFullscreenVizBounds,
+  getLyricsWindowOptions,
   getSettingsWindowOptions,
   getTrackInfoWindowOptions,
+  moveLyric,
   moveTrackInfo,
   setAlwaysOnTop,
   settingsSchema,
@@ -142,6 +145,7 @@ const createMainWindow = (): void => {
     // See: https://github.com/electron/electron/issues/9477#issuecomment-406833003
     mainWindow.setBounds(bounds);
     moveTrackInfo(mainWindow, screen);
+    moveLyric(mainWindow, screen);
 
     mainWindow.webContents.send(IpcMessage.WindowMoved, bounds);
   });
@@ -162,6 +166,7 @@ const createMainWindow = (): void => {
 
   mainWindow.on('resize', () => {
     moveTrackInfo(mainWindow, screen);
+    moveLyric(mainWindow, screen);
   });
 
   mainWindow.on('resized', () => {
@@ -174,7 +179,10 @@ const createMainWindow = (): void => {
 
   ipcMain.on(
     IpcMessage.SettingsChanged,
-    (_: Event, { x, y, size, isAlwaysOnTop, isDebug, isVisibleInTaskbar, visualizationScreenId }: Settings) => {
+    (
+      _: Event,
+      { x, y, size, isAlwaysOnTop, isDebug, isVisibleInTaskbar, visualizationScreenId, SPDCToken }: Settings
+    ) => {
       setAlwaysOnTop({ window: mainWindow, isAlwaysOnTop });
       mainWindow.setSkipTaskbar(!isVisibleInTaskbar);
       showDevTool(mainWindow, isDebug);
@@ -184,12 +192,26 @@ const createMainWindow = (): void => {
         mainWindow.center();
       }
       moveTrackInfo(mainWindow, screen);
+      moveLyric(mainWindow, screen);
 
       const fullscreenVizWindow = findWindow(WindowTitle.FullscreenViz);
       if (fullscreenVizWindow) {
         const fullscreenVizBounds = getFullscreenVizBounds(mainWindow.getBounds(), screen, visualizationScreenId);
         fullscreenVizWindow.setBounds(fullscreenVizBounds);
       }
+      if (SPDCToken !== '') {
+        session.defaultSession.cookies.set({
+          url: 'https://spotify.com',
+          name: 'sp_dc',
+          value: SPDCToken,
+          sameSite: 'no_restriction',
+          domain: '.spotify.com',
+          secure: true,
+          httpOnly: true,
+          path: '/',
+          expirationDate: new Date().getTime() + 24 * 60 * 60 * 1000,
+        });
+      }
     }
   );
 
@@ -262,6 +284,13 @@ const createMainWindow = (): void => {
         };
       }
 
+      case WindowName.Lyrics: {
+        return {
+          action: 'allow',
+          overrideBrowserWindowOptions: getLyricsWindowOptions(mainWindow, settings.isAlwaysOnTop),
+        };
+      }
+
       case WindowName.Auth: {
         shell.openExternal(details.url);
         break;
@@ -324,6 +353,16 @@ const createMainWindow = (): void => {
         break;
       }
 
+      case WindowName.Lyrics: {
+        moveLyric(mainWindow, screen);
+        childWindow.setIgnoreMouseEvents(true);
+        setAlwaysOnTop({ window: childWindow, isAlwaysOnTop: settings.isAlwaysOnTop });
+        if (MACOS) {
+          childWindow.setWindowButtonVisibility(false);
+        }
+        break;
+      }
+
       default: {
         break;
       }
@@ -342,6 +381,19 @@ app.on('ready', () => {
   }
 
   createMainWindow();
+  if (settings.SPDCToken !== '') {
+    session.defaultSession.cookies.set({
+      url: 'https://spotify.com',
+      name: 'sp_dc',
+      value: settings.SPDCToken,
+      sameSite: 'no_restriction',
+      domain: '.spotify.com',
+      secure: true,
+      httpOnly: true,
+      path: '/',
+      expirationDate: new Date().getTime() + 24 * 60 * 60 * 1000,
+    });
+  }
 
   tray = new Tray(icon);
 
@@ -397,6 +449,7 @@ app.on('ready', () => {
     const isOnLeft = checkIfAppIsOnLeftSide(currentDisplay, bounds.x, bounds.width);
     mainWindow.webContents.send(IpcMessage.WindowReady, { isOnLeft, displays });
     moveTrackInfo(mainWindow, screen);
+    moveLyric(mainWindow, screen);
   });
 });
 

src/main/main.utils.ts

@@ -3,6 +3,7 @@ import { z } from 'zod';
 
 import {
   IpcMessage,
+  LYRICS_GAP,
   MAX_BAR_THICKNESS,
   MAX_SIDE_LENGTH,
   MAX_SKIP_SONG_DELAY,
@@ -29,8 +30,8 @@ export const getCommonWindowOptions = (): BrowserWindowConstructorOptions => ({
 
 export const getSettingsWindowOptions = (): BrowserWindowConstructorOptions => ({
   ...getCommonWindowOptions(),
-  height: 420,
-  minHeight: 420,
+  height: 580,
+  minHeight: 580,
   width: 420,
   minWidth: 420,
   title: WindowTitle.Settings,
@@ -74,6 +75,26 @@ export const getTrackInfoWindowOptions = (
   };
 };
 
+export const getLyricsWindowOptions = (
+  mainWindow: BrowserWindow,
+  isAlwaysOnTop: boolean
+): BrowserWindowConstructorOptions => {
+  const { x, y, width, height } = mainWindow.getBounds();
+  return {
+    ...getCommonWindowOptions(),
+    parent: mainWindow,
+    skipTaskbar: true,
+    alwaysOnTop: isAlwaysOnTop,
+    height: 1000,
+    width: 1000,
+    transparent: true,
+    center: false,
+    x: x + LYRICS_GAP.X - width,
+    y: y + height + LYRICS_GAP.Y,
+    title: WindowTitle.Lyrics,
+  };
+};
+
 export const showDevTool = (window: BrowserWindow, isShow: boolean): void => {
   if (isShow) {
     window.webContents.openDevTools({ mode: 'detach' });
@@ -128,6 +149,27 @@ export const moveTrackInfo = (mainWindow: BrowserWindow, screen: Screen): void =
   mainWindow.webContents.send(IpcMessage.SideChanged, { isOnLeft });
 };
 
+export const moveLyric = (mainWindow: BrowserWindow, screen: Screen): void => {
+  const { x, y, width, height } = mainWindow.getBounds();
+  const LyricsWindow = findWindow(WindowTitle.Lyrics);
+  if (!LyricsWindow) {
+    return;
+  }
+
+  const currentDisplay = screen.getDisplayNearestPoint({ x, y });
+  const isOnLeft = checkIfAppIsOnLeftSide(currentDisplay, x, width);
+
+  const originalBounds = LyricsWindow.getBounds();
+  const newBounds = {
+    ...originalBounds,
+    x: isOnLeft ? x + LYRICS_GAP.X : x - originalBounds.width - LYRICS_GAP.X + width,
+    y: y + height + LYRICS_GAP.Y,
+  };
+
+  LyricsWindow.setBounds(newBounds);
+  mainWindow.webContents.send(IpcMessage.SideChanged, { isOnLeft });
+};
+
 export const settingsSchema = z.object({
   x: z.number(),
   y: z.number(),

src/models/settings.ts

@@ -36,6 +36,19 @@ export interface Settings {
   showFreemiumWarning: boolean;
   cornerRadius: number;
   trackInfoRefreshTimeInSeconds: number;
+  SPDCToken: string;
+  isShowLyrics: boolean;
+  isAlwaysShowLyrics: boolean;
+  lyricMaxLength: number;
+  lyricsFontSize: number;
+  lyricsColor: string;
+  nextLyricsColor: string;
+  lyricsBackgroundColor: string;
+  lyricsBackgroundOpacity: number;
+  lyricsFont: string;
+  isLyricsBlur: boolean;
+  isLyricsRandomBackground: boolean;
+  lyricsCornerRadius: number;
 }
 
 export const DEFAULT_SETTINGS: Settings = {
@@ -68,4 +81,17 @@ export const DEFAULT_SETTINGS: Settings = {
   showFreemiumWarning: true,
   cornerRadius: 0,
   trackInfoRefreshTimeInSeconds: 1,
+  SPDCToken: '',
+  isShowLyrics: false,
+  isAlwaysShowLyrics: false,
+  lyricMaxLength: 30,
+  lyricsFontSize: 14,
+  lyricsColor: '#FFFFFF',
+  nextLyricsColor: '#000000',
+  lyricsBackgroundColor: '#000000',
+  lyricsBackgroundOpacity: 50,
+  lyricsFont: 'Inter UI',
+  isLyricsBlur: true,
+  isLyricsRandomBackground: true,
+  lyricsCornerRadius: 0,
 };