Merge pull request #203 from wilywyrm/synced-lyrics-from-opensubsonic

Use the OpenSubsonic getLyricsBySongId to retrieve synced lyrics

Author: victoralvesf

.github/workflows/release.yml

@@ -1,6 +1,7 @@
 name: Release Desktop
 
 on:
+  workflow_dispatch:
   push:
     tags:
       - 'v*'
@@ -103,4 +104,4 @@ jobs:
         if: env.SHOULD_RUN == 'true' && matrix.os == 'ubuntu-latest'
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: pnpm ci:build:linux
+        run: pnpm ci:build:linux

src/api/queryServerInfo.ts

@@ -17,13 +17,27 @@ export async function queryServerInfo(url: string) {
       method: 'GET',
     })
     const data = await response.json()
+    
+    const extensionsMap: {[key: string]: number[]} = {}
+    if (data['subsonic-response']['openSubsonic']) {
+      const response = await fetch(`${url}/rest/getOpenSubsonicExtensions.view?${queries}`, {
+        method: 'GET',
+      })
+
+      const eData = await response.json()
+
+      for (const extension of eData['subsonic-response']['openSubsonicExtensions']) {
+        extensionsMap[extension['name']] = extension['versions']
+      }
+    }
 
     return {
       protocolVersion: data['subsonic-response'].version,
       protocolVersionNumber: parseInt(
         data['subsonic-response'].version.replaceAll('.', ''),
       ),
       serverType: data['subsonic-response'].type.toLowerCase() || 'subsonic',
+      extensionsSupported: extensionsMap,
     }
   } catch (_) {
     return {
@@ -32,4 +46,4 @@ export async function queryServerInfo(url: string) {
       serverType: 'subsonic',
     }
   }
-}
+}

src/app/components/fullscreen/lyrics.tsx

@@ -20,12 +20,13 @@ export function LyricsTab() {
   const { currentSong } = usePlayerSonglist()
   const { t } = useTranslation()
 
-  const { artist, title, duration } = currentSong
+  const { id, artist, title, duration } = currentSong
 
   const { data: lyrics, isLoading } = useQuery({
     queryKey: ['get-lyrics', artist, title, duration],
     queryFn: () =>
       subsonic.lyrics.getLyrics({
+        id,
         artist,
         title,
         duration,

src/service/lyrics.ts

@@ -1,11 +1,17 @@
 import { get, set } from 'idb-keyval'
 import { httpClient } from '@/api/httpClient'
 import { usePlayerStore } from '@/store/player.store'
-import { LyricsResponse } from '@/types/responses/song'
+import {
+  ILyric,
+  IStructuredLyric,
+  LyricsResponse,
+  StructuredLyricsResponse,
+} from '@/types/responses/song'
 import { lrclibClient } from '@/utils/appName'
-import { checkServerType } from '@/utils/servers'
+import { checkServerType, getServerExtensions } from '@/utils/servers'
 
 interface GetLyricsData {
+  id: string
   artist: string
   title: string
   album?: string
@@ -22,6 +28,7 @@ interface LRCLibResponse {
 
 async function getLyrics(getLyricsData: GetLyricsData) {
   const { preferSyncedLyrics } = usePlayerStore.getState().settings.lyrics
+  const { songLyricsEnabled } = getServerExtensions()
 
   const cacheKey = getLyricsCacheKey(getLyricsData, preferSyncedLyrics)
 
@@ -31,9 +38,47 @@ async function getLyrics(getLyricsData: GetLyricsData) {
     return cachedLyrics
   }
 
-  // If the user prefers synced lyrics, attempt to fetch them from the LrcLib first.
-  // If lyrics are found, return them immediately.
-  // If not, proceed with the default flow.
+  // First attempt to retrieve lyrics from the server.
+  // If we know it supports the OpenSubsonic songLyrics extension with timing info, use that.
+  // If the server does not support the extension or the lyrics returned from the server did
+  // not include timing information, fetch them from the LrcLib
+
+  let osUnsyncedLyricsFound: ILyric | undefined
+  if (songLyricsEnabled) {
+    const response = await httpClient<StructuredLyricsResponse>(
+      '/getLyricsBySongId',
+      {
+        method: 'GET',
+        query: {
+          id: getLyricsData.id,
+        },
+      },
+    )
+
+    if (preferSyncedLyrics) {
+      if (
+        response?.data.lyricsList.structuredLyrics &&
+        response.data.lyricsList.structuredLyrics.length > 0
+      ) {
+        const syncedLyrics = response?.data.lyricsList.structuredLyrics.find(
+          (lyrics) => lyrics.synced,
+        )
+
+        if (syncedLyrics) {
+          return osStructuredLyricsToILyric(syncedLyrics)
+        }
+        // save the plain lyrics from this call
+        osUnsyncedLyricsFound = osStructuredLyricsToILyric(
+          response.data.lyricsList.structuredLyrics[0],
+        )
+      }
+      // save the plain lyrics retrieved from the server
+      osUnsyncedLyricsFound = osStructuredLyricsToILyric(
+        response.data.lyricsList.structuredLyrics[0],
+      )
+    }
+  }
+
   if (preferSyncedLyrics) {
     const lyrics = await getLyricsFromLRCLib(getLyricsData)
 
@@ -44,6 +89,12 @@ async function getLyrics(getLyricsData: GetLyricsData) {
     }
   }
 
+  // if the server supported the songLyrics extension and lrc did not have lyrics, we don't need to query the server and lrc again.
+  // so return the plain lyrics if we found them
+  if (osUnsyncedLyricsFound) {
+    return osUnsyncedLyricsFound
+  }
+
   const response = await httpClient<LyricsResponse>('/getLyrics', {
     method: 'GET',
     query: {
@@ -157,6 +208,31 @@ function getLyricsCacheKey(
   return `lyrics:${artist}:${title}:${type}`
 }
 
+function osStructuredLyricsToILyric(lyrics: IStructuredLyric): ILyric {
+  return {
+    artist: lyrics.displayArtist,
+    title: lyrics.displayTitle,
+    value: formatLyrics(
+      lyrics.line
+        .map((l) => {
+          if (l.start != undefined) {
+            // l.start may have actual value 0 (falsy)
+            return `[${osStartMsToSongTimestamp(l.start)}] ${l.value}`
+          }
+          return l.value
+        })
+        .join('\n'),
+    ),
+  }
+}
+
+function osStartMsToSongTimestamp(startTime: number): string {
+  // Date() isoString is formatted as:
+  // YYYY-MM-DDTHH:mm:ss.sssZ -> mm:ss.ss
+  // 2011-10-05T14:48:00.000Z -> 48:00.00
+  return new Date(startTime).toISOString().slice(14, -2)
+}
+
 export const lyrics = {
   getLyrics,
   getLyricsFromLRCLib,

src/store/app.store.ts

@@ -205,6 +205,7 @@ export const useAppStore = createWithEqualityFn<IAppContext>()(
                     state.data.protocolVersion = serverInfo.protocolVersion
                     state.data.serverType = serverInfo.serverType
                     state.data.isServerConfigured = true
+                    state.data.extensionsSupported = serverInfo.extensionsSupported
                   })
                   return true
                 }
@@ -225,6 +226,7 @@ export const useAppStore = createWithEqualityFn<IAppContext>()(
                 state.data.protocolVersion = '1.16.0'
                 state.data.serverType = 'subsonic'
                 state.data.songCount = null
+                state.data.extensionsSupported = {}
                 state.pages.showInfoPanel = true
                 state.pages.hideRadiosSection = HIDE_RADIOS_SECTION ?? false
                 state.pages.artistsPageViewType = 'table'

src/types/responses/song.ts

@@ -18,6 +18,24 @@ export interface ILyric {
   value?: string
 }
 
+export interface ILyricsList {
+  structuredLyrics: IStructuredLyric[]
+}
+
+export interface IStructuredLyric {
+  displayArtist: string
+  displayTitle: string
+  lang?: string
+  offset?: number
+  synced: boolean
+  line: IStructuredLine[]
+}
+
+export interface IStructuredLine {
+  start?: number
+  value: string
+}
+
 export interface IContributor {
   role: string
   artist: IFeaturedArtist
@@ -83,5 +101,6 @@ export interface FavoritesResponse
   extends SubsonicResponse<{ starred2: SongList }> {}
 
 export interface LyricsResponse extends SubsonicResponse<{ lyrics: ILyric }> {}
+export interface StructuredLyricsResponse extends SubsonicResponse<{ lyricsList: ILyricsList }> {}
 
 export interface GetSongResponse extends SubsonicResponse<{ song: ISong }> {}

src/types/serverConfig.ts

@@ -11,6 +11,7 @@ export interface IServerConfig {
   password: string
   protocolVersion?: string
   serverType?: string
+  extensionsSupported?: {[key: string]: number[]}
 }
 
 export type PageViewType = 'grid' | 'table'

src/utils/servers.ts

@@ -13,3 +13,13 @@ export function checkServerType() {
     isLms,
   }
 }
+
+export function getServerExtensions() {
+  const { extensionsSupported } = useAppStore.getState().data
+
+  const songLyricsEnabled = extensionsSupported && extensionsSupported['songLyrics'] && extensionsSupported['songLyrics'].length > 0
+
+  return {
+    songLyricsEnabled,
+  }
+}