mirrors
/
navidrome
mirror of https://github.com/navidrome/navidrome.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add a hacky way to style the react-player.

This commit is contained in:
Deluan 2021-06-25 17:34:16 -04:00
parent 823fef8e43
commit a1551074bb
8 changed files with 181 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/src/App.js
View File

@ -1,6 +1,5 @@
import React, { useEffect } from 'react'
import ReactGA from 'react-ga'
import 'react-jinke-music-player/assets/index.css'
import { Provider, useDispatch } from 'react-redux'
import { createHashHistory } from 'history'
import { Admin as RAAdmin, Resource } from 'react-admin'

1
ui/src/reducers/playQueue.js
View File

@ -1,4 +1,3 @@
import 'react-jinke-music-player/assets/index.css'
import { v4 as uuidv4 } from 'uuid'
import subsonic from '../subsonic'
import config from '../config'

30
ui/src/themes/dark.css.js Normal file
View File

@ -0,0 +1,30 @@
module.exports = `
.react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover {
color: #7171d5
}
.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle, .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-track {
background-color: #5f5fc4
}
.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
box-shadow: 0 0 2px #5f5fc4
}
.react-jinke-music-player-main .audio-item.playing svg {
color: #5f5fc4
}
.react-jinke-music-player-main .audio-item.playing .player-singer {
color: #5f5fc4 !important
}
.audio-lists-panel-content .audio-item.playing, .audio-lists-panel-content .audio-item.playing svg {
color: #5f5fc4
}
.audio-lists-panel-content .audio-item:active .group:not([class=".player-delete"]) svg, .audio-lists-panel-content .audio-item:hover .group:not([class=".player-delete"]) svg {
color: #5f5fc4
}
`

1
ui/src/themes/dark.js
View File

@ -35,5 +35,6 @@ export default {
},
player: {
theme: 'dark',
stylesheet: require('./dark.css.js'),
},
}

1
ui/src/themes/extradark.js
View File

@ -31,5 +31,6 @@ export default {
},
player: {
theme: 'dark',
stylesheet: require('./dark.css.js'),
},
}

120
ui/src/themes/light.css.js Normal file
View File

@ -0,0 +1,120 @@
module.exports = `
.react-jinke-music-player-main.light-theme .loading svg {
color: #5f5fc4;
font-size: 24px
}
.react-jinke-music-player-mobile-play-model-tip {
background-color: #5f5fc4;
}
.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle, .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-track {
background-color: #5f5fc4
}
.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
box-shadow: 0 0 2px #5f5fc4
}
.react-jinke-music-player-main.light-theme .audio-item.playing svg {
color: #5f5fc4
}
.react-jinke-music-player-main.light-theme .audio-item.playing .player-singer {
color: #5f5fc4 !important
}
.audio-lists-panel-content .audio-item.playing, .audio-lists-panel-content .audio-item.playing svg {
color: #5f5fc4
}
.audio-lists-panel-content .audio-item:active .group:not([class=".player-delete"]) svg, .audio-lists-panel-content .audio-item:hover .group:not([class=".player-delete"]) svg {
color: #5f5fc4
}
.react-jinke-music-player-main.light-theme ::-webkit-scrollbar-thumb {
background-color: #5f5fc4;
}
.react-jinke-music-player-main.light-theme svg {
color: #5f5fc4
}
.react-jinke-music-player-main.light-theme svg:active, .react-jinke-music-player-main.light-theme svg:hover {
color: #7171d5
}
.react-jinke-music-player-main.light-theme .rc-slider-rail {
background-color: rgba(0, 0, 0, .09) !important
}
.react-jinke-music-player-main.light-theme .music-player-controller {
background-color: #fff;
border-color: #fff
}
.react-jinke-music-player-main.light-theme .music-player-panel {
background-color: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 34, 77, .05);
color: #5f5fc4
}
.react-jinke-music-player-main.light-theme .music-player-panel .img-content {
box-shadow: 0 0 10px #dcdcdc
}
.react-jinke-music-player-main.light-theme .music-player-panel .progress-load-bar {
background-color: rgba(0, 0, 0, .06) !important
}
.react-jinke-music-player-main.light-theme .rc-switch {
color: #fff
}
.react-jinke-music-player-main.light-theme .rc-switch:after {
background-color: #fff
}
.react-jinke-music-player-main.light-theme .rc-switch-checked {
background-color: #5f5fc4 !important;
border: 1px solid #5f5fc4
}
.react-jinke-music-player-main.light-theme .rc-switch-inner {
color: #fff
}
.react-jinke-music-player-main.light-theme .audio-lists-btn {
background-color: #f7f8fa !important
}
.react-jinke-music-player-main.light-theme .audio-lists-btn:active, .react-jinke-music-player-main.light-theme .audio-lists-btn:hover {
background-color: #fdfdfe;
color: #444
}
.react-jinke-music-player-main.light-theme .audio-lists-btn > .group:hover, .react-jinke-music-player-main.light-theme .audio-lists-btn > .group:hover > svg {
color: #444
}
.react-jinke-music-player-main.light-theme .audio-lists-panel {
background-color: #fff;
box-shadow: 0 0 2px #dcdcdc;
color: #444
}
.react-jinke-music-player-main.light-theme .audio-lists-panel .audio-item {
background-color: #fff
}
.react-jinke-music-player-main.light-theme .audio-lists-panel .audio-item:nth-child(odd) {
background-color: #fafafa !important
}
.react-jinke-music-player-main.light-theme .audio-lists-panel .audio-item.playing {
background-color: #f2f2f2 !important
}
.react-jinke-music-player-main.light-theme .audio-lists-panel .audio-item.playing, .react-jinke-music-player-main.light-theme .audio-lists-panel .audio-item.playing svg {
color: #5f5fc4 !important
}
`

1
ui/src/themes/light.js
View File

@ -49,5 +49,6 @@ export default {
},
player: {
theme: 'light',
stylesheet: require('./light.css.js'),
},
}

29
ui/src/themes/useCurrentTheme.js
View File

@ -3,10 +3,11 @@ import useMediaQuery from '@material-ui/core/useMediaQuery'
import themes from './index'
import { AUTO_THEME_ID } from '../consts'
import config from '../config'
import { useEffect } from 'react'
const useCurrentTheme = () => {
const prefersLightMode = useMediaQuery('(prefers-color-scheme: light)')
return useSelector((state) => {
const theme = useSelector((state) => {
if (state.theme === AUTO_THEME_ID) {
return prefersLightMode ? themes.LightTheme : themes.DarkTheme
}
@ -18,6 +19,32 @@ const useCurrentTheme = () => {
'DarkTheme'
return themes[themeName]
})
useEffect(() => {
const styles = document.getElementsByTagName('style')
let style
for (let i = 0; i < styles.length; i++) {
if (styles[i].id === 'nd-player-style-override') {
style = styles[i]
}
}
if (theme.player.stylesheet) {
if (style === undefined) {
style = document.createElement('style')
style.id = 'nd-player-style-override'
style.innerHTML = theme.player.stylesheet
document.head.appendChild(style)
} else {
style.innerHTML = theme.player.stylesheet
}
} else {
if (style !== undefined) {
document.head.removeChild(style)
}
}
}, [theme])
return theme
}
export default useCurrentTheme