From 86bc8d97a0d38df4013daf517788894e1d3faf79 Mon Sep 17 00:00:00 2001
From: Deluan <deluan@deluan.com>
Date: Sat, 13 Jun 2020 14:38:25 -0400
Subject: [PATCH] Support dark themes in "Playing" indicator

---
 ui/src/common/SongTitleField.js                |  17 ++++++++++++-----
 ui/src/icons/playing-dark.gif                  | Bin 0 -> 2349 bytes
 .../icons/{playing.gif => playing-light.gif}   | Bin
 3 files changed, 12 insertions(+), 5 deletions(-)
 create mode 100644 ui/src/icons/playing-dark.gif
 rename ui/src/icons/{playing.gif => playing-light.gif} (100%)

diff --git a/ui/src/common/SongTitleField.js b/ui/src/common/SongTitleField.js
index 173a02078..fb6de5ae5 100644
--- a/ui/src/common/SongTitleField.js
+++ b/ui/src/common/SongTitleField.js
@@ -1,10 +1,12 @@
 import { makeStyles } from '@material-ui/core/styles'
 import React from 'react'
-import { useSelector } from 'react-redux'
-import get from 'lodash.get'
-import playing from '../icons/playing.gif'
-import { FunctionField } from 'react-admin'
 import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
+import { FunctionField } from 'react-admin'
+import get from 'lodash.get'
+import { useTheme } from '@material-ui/core/styles'
+import PlayingLight from '../icons/playing-light.gif'
+import PlayingDark from '../icons/playing-dark.gif'
 
 const useStyles = makeStyles({
   playingIcon: {
@@ -17,6 +19,7 @@ const useStyles = makeStyles({
 })
 
 const SongTitleField = ({ showTrackNumbers, ...props }) => {
+  const theme = useTheme()
   const classes = useStyles()
   const { record } = props
   const currentTrack = useSelector((state) => get(state, 'queue.current', {}))
@@ -38,7 +41,11 @@ const SongTitleField = ({ showTrackNumbers, ...props }) => {
   return (
     <>
       {isCurrent && (
-        <img src={playing} className={classes.playingIcon} alt="playing" />
+        <img
+          src={theme.palette.type === 'light' ? PlayingLight : PlayingDark}
+          className={classes.playingIcon}
+          alt="playing"
+        />
       )}
       <FunctionField
         {...props}
diff --git a/ui/src/icons/playing-dark.gif b/ui/src/icons/playing-dark.gif
new file mode 100644
index 0000000000000000000000000000000000000000..9413d54af30faf16de0fdc6061cf74c349218830
GIT binary patch
literal 2349
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

literal 0
HcmV?d00001

diff --git a/ui/src/icons/playing.gif b/ui/src/icons/playing-light.gif
similarity index 100%
rename from ui/src/icons/playing.gif
rename to ui/src/icons/playing-light.gif