From 4b5a5abe1bc6b8a9e0901df40a0db99e99cffd03 Mon Sep 17 00:00:00 2001
From: Deluan <deluan@navidrome.org>
Date: Sat, 24 Apr 2021 21:13:14 -0400
Subject: [PATCH] Fix Web Scroller compatibility

This fixes https://github.com/web-scrobbler/web-scrobbler/issues/2828
---
 ui/src/audioplayer/Player.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/ui/src/audioplayer/Player.js b/ui/src/audioplayer/Player.js
index 9615ded3..7d21f58a 100644
--- a/ui/src/audioplayer/Player.js
+++ b/ui/src/audioplayer/Player.js
@@ -12,6 +12,7 @@ import {
 } from '@material-ui/core/styles'
 import { useMediaQuery } from '@material-ui/core'
 import { GlobalHotKeys } from 'react-hotkeys'
+import clsx from 'clsx'
 import subsonic from '../subsonic'
 import {
   scrobble,
@@ -85,14 +86,16 @@ const AudioTitle = React.memo(({ audioInfo, isMobile }) => {
   return (
     <Link to={`/album/${audioInfo.albumId}/show`} className={className}>
       <span>
-        <span className={classes.songTitle}>{audioInfo.name}</span>
+        <span className={clsx(classes.songTitle, 'songTitle')}>
+          {audioInfo.name}
+        </span>
         {isDesktop && (
           <QualityInfo record={qi} className={classes.qualityInfo} />
         )}
       </span>
       {!isMobile && (
         <div className={classes.artistAlbum}>
-          <span className={classes.songInfo}>
+          <span className={clsx(classes.songInfo, 'songInfo')}>
             {`${audioInfo.singer} - ${audioInfo.album}`}
           </span>
         </div>