Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Allow to enable/disable Cover Art in Web App & load from filesystem #2352

Merged
merged 8 commits into from
Apr 21, 2024
4 changes: 4 additions & 0 deletions resources/default-settings/jukebox.default.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -153,3 +153,7 @@ sync_rfidcards:
config_file: ../../shared/settings/sync_rfidcards.yaml
webapp:
coverart_cache_path: ../../src/webapp/build/cover-cache
# Load cover arts in Webapp. Change to false in case you have performance issue
# when handling a lot of music
# Defaults to true
show_covers: true
12 changes: 12 additions & 0 deletions src/jukebox/components/misc.py
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@
import jukebox.plugs as plugin
import jukebox.utils
from jukebox.daemon import get_jukebox_daemon
import jukebox.cfghandler

logger = logging.getLogger('jb.misc')
cfg = jukebox.cfghandler.get_handler('jukebox')


@plugin.register
Expand Down Expand Up @@ -105,3 +107,13 @@ def empty_rpc_call(msg: str = ''):
"""
if msg:
logger.warning(msg)


@plugin.register
def get_app_settings():
"""Return settings for web app stored in jukebox.yaml"""
show_covers = cfg.setndefault('webapp', 'show_covers', value=True)

return {
'show_covers': show_covers
}
21 changes: 12 additions & 9 deletions src/webapp/src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { Suspense } from 'react';

import Grid from '@mui/material/Grid';

import AppSettingsProvider from './context/appsettings';
import PubSubProvider from './context/pubsub';
import PlayerProvider from './context/player';
import Router from './router';
Expand All @@ -10,15 +11,17 @@ function App() {
return (
<PubSubProvider>
<PlayerProvider>
<Grid
alignItems="center"
container
direction="row"
id="routes"
justifyContent="center"
>
<Router />
</Grid>
<AppSettingsProvider>
<Grid
alignItems="center"
container
direction="row"
id="routes"
justifyContent="center"
>
<Router />
</Grid>
</AppSettingsProvider>
</PlayerProvider>
</PubSubProvider>
);
Expand Down
7 changes: 7 additions & 0 deletions src/webapp/src/commands/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ const commands = {
_package: 'volume',
plugin: 'ctrl',
method: 'set_volume',
argKeys: ['volume'],
s-martin marked this conversation as resolved.
Show resolved Hide resolved
},
getVolume: {
_package: 'volume',
Expand Down Expand Up @@ -250,6 +251,12 @@ const commands = {
argKeys: ['option'],
},

// Misc
getAppSettings: {
_package: 'misc',
plugin: 'get_app_settings'
},

// Synchronisation
'sync_rfidcards_all': {
_package: 'sync_rfidcards',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { forwardRef, useEffect, useState } from 'react';
import React, { forwardRef, useContext, useEffect, useState } from 'react';
import {
Link,
useLocation,
Expand All @@ -15,13 +15,22 @@ import {

import noCover from '../../../../../assets/noCover.jpg';

import AppSettingsContext from '../../../../../context/appsettings/context';
import request from '../../../../../utils/request';

const AlbumListItem = ({ albumartist, album, isButton = true }) => {
const { t } = useTranslation();
const { search: urlSearch } = useLocation();
const [coverImage, setCoverImage] = useState(noCover);

const {
settings,
} = useContext(AppSettingsContext);

const {
show_covers,
} = settings;

useEffect(() => {
const getCoverArt = async () => {
const { result } = await request('getAlbumCoverArt', {
Expand All @@ -35,7 +44,7 @@ const AlbumListItem = ({ albumartist, album, isButton = true }) => {
};
}

if (albumartist && album) {
if (albumartist && album && show_covers) {
getCoverArt();
}
}, [albumartist, album]);
Expand All @@ -61,9 +70,11 @@ const AlbumListItem = ({ albumartist, album, isButton = true }) => {
key={album}
>
<ListItemButton>
<ListItemAvatar>
<Avatar variant="rounded" alt="Cover" src={coverImage} />
</ListItemAvatar>
{show_covers &&
<ListItemAvatar>
<Avatar variant="rounded" alt="Cover" src={coverImage} />
</ListItemAvatar>
}
<ListItemText
primary={album || t('library.albums.unknown-album')}
secondary={albumartist || null}
Expand Down
9 changes: 8 additions & 1 deletion src/webapp/src/components/Player/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import Display from './display';
import SeekBar from './seekbar';
import Volume from './volume';

import AppSettingsContext from '../../context/appsettings/context';
import PlayerContext from '../../context/player/context';
import request from '../../utils/request';

Expand All @@ -18,6 +19,12 @@ const Player = () => {
const [coverImage, setCoverImage] = useState(undefined);
const [backgroundImage, setBackgroundImage] = useState('none');

const {
settings,
} = useContext(AppSettingsContext);

const { show_covers } = settings;

useEffect(() => {
const getCoverArt = async () => {
const { result } = await request('getSingleCoverArt', { song_url: file });
Expand All @@ -30,7 +37,7 @@ const Player = () => {
};
}

if (file) {
if (file && show_covers) {
getCoverArt();
}
}, [file]);
Expand Down
7 changes: 7 additions & 0 deletions src/webapp/src/context/appsettings/context.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { createContext } from 'react';

const AppSettingsContext = createContext({
showCovers: true,
});

export default AppSettingsContext;
33 changes: 33 additions & 0 deletions src/webapp/src/context/appsettings/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React, { useEffect, useState } from 'react';

import AppSettingsContext from './context';
import request from '../../utils/request';

const AppSettingsProvider = ({ children }) => {
const [settings, setSettings] = useState({});

useEffect(() => {
const loadAppSettings = async () => {
const { result, error } = await request('getAppSettings');
if(result) setSettings(result);
if(error) {
console.error('Error loading AppSettings');
}
}

loadAppSettings();
}, []);

const context = {
setSettings,
settings,
};

return(
<AppSettingsContext.Provider value={context}>
{ children }
</AppSettingsContext.Provider>
)
};

export default AppSettingsProvider;
Loading