fix: Stop Back Action at audiofolder root level (#2293)

* bugfix: Stop Back Action at audiofolder root level

This also allows to go back when folder is empty

Fixes #2224

* fix: Flake8 issue

* Remove some minor issues

Author: pabera

src/jukebox/jukebox/playlistgenerator.py

@@ -275,7 +275,12 @@ def get_directory_content(self, path='.'):
             logger.error(f" {e.__class__.__name__}: {e}")
         else:
             for m in content:
-                self.playlist.append({'type': TYPE_DECODE[m.filetype], 'name': m.name, 'path': m.path})
+                self.playlist.append({
+                    'type': TYPE_DECODE[m.filetype],
+                    'name': m.name,
+                    'path': m.path,
+                    'relpath': os.path.relpath(m.path, self._music_library_base_path)
+                })
 
     def _parse_nonrecusive(self, path='.'):
         return [x.path for x in self._get_directory_content(path) if x.filetype != TYPE_DIR]
@@ -294,7 +299,7 @@ def _parse_recursive(self, path='.'):
         return recursive_playlist
 
     def parse(self, path='.', recursive=False):
-        """Parse the folder ``path`` and create a playlist from it's content
+        """Parse the folder ``path`` and create a playlist from its content
 
         :param path: Path to folder **relative** to ``music_library_base_path``
         :param recursive: Parse folder recursivley, or stay in top-level folder

src/webapp/public/locales/de/translation.json

@@ -138,8 +138,8 @@
       "title": "Wähle ein Album, einen Ordner oder einen Song aus"
     },
     "folders": {
-      "no-music": "Keine Musik vorhanden!",
-      "empty-folder": "Dieser Ordner ist leer!",
+      "no-music": "☝️ Keine Musik vorhanden!",
+      "empty-folder": "Dieser Ordner ist leer! 🙈",
       "show-folder-content": "Zeige den Ordnerinhalt an",
       "back-button-label": "Zurück"
     },

src/webapp/public/locales/en/translation.json

@@ -138,8 +138,8 @@
       "title": "Select an album, folder or song"
     },
     "folders": {
-      "no-music": "No music found!",
-      "empty-folder": "This folder is empty!",
+      "no-music": "☝️ No music found!",
+      "empty-folder": "This folder is empty! 🙈",
       "show-folder-content": "Show folder content",
       "back-button-label": "Back"
     },

src/webapp/src/components/Cards/controls/actions/play-music/selected-folder.js

@@ -8,7 +8,6 @@ import {
 
 import NoMusicSelected from './no-music-selected';
 import FolderTypeAvatar from '../../../../Library/lists/folders/folder-type-avatar';
-import { DEFAULT_AUDIO_DIR } from '../../../../../config';
 
 const SelectedFolder = ({ values: [folder] }) => {
   // TODO: Implement type correctly
@@ -19,7 +18,7 @@ const SelectedFolder = ({ values: [folder] }) => {
       <List sx={{ width: '100%', margin: '10px' }}>
         <ListItem disablePadding>
           <FolderTypeAvatar type={type} />
-          <ListItemText primary={folder.replace(`${DEFAULT_AUDIO_DIR}/`, '')} />
+          <ListItemText primary={folder} />
         </ListItem>
       </List>
     );

src/webapp/src/components/Library/lists/folders/folder-list-item.js

@@ -13,20 +13,19 @@ import NavigateNextIcon from '@mui/icons-material/NavigateNext';
 import request from '../../../../utils/request';
 import FolderLink from './folder-link';
 import FolderTypeAvatar from './folder-type-avatar';
-import { DEFAULT_AUDIO_DIR } from '../../../../config';
 
 const FolderListItem = ({
   folder,
   isSelecting,
   registerMusicToCard,
 }) => {
   const { t } = useTranslation();
-  const { type, name, path } = folder;
+  const { type, name, relpath } = folder;
 
   const playItem = () => {
     switch(type) {
-      case 'directory': return request('play_folder', { folder: path, recursive: true });
-      case 'file': return request('play_single', { song_url: path.replace(`${DEFAULT_AUDIO_DIR}/`, '') });
+      case 'directory': return request('play_folder', { folder: relpath, recursive: true });
+      case 'file': return request('play_single', { song_url: relpath });
       // TODO: Add missing Podcast
       // TODO: Add missing Stream
       default: return;
@@ -35,8 +34,8 @@ const FolderListItem = ({
 
   const registerItemToCard = () => {
     switch(type) {
-      case 'directory': return registerMusicToCard('play_folder', { folder: path, recursive: true });
-      case 'file': return registerMusicToCard('play_single', { song_url: path.replace(`${DEFAULT_AUDIO_DIR}/`, '') });
+      case 'directory': return registerMusicToCard('play_folder', { folder: relpath, recursive: true });
+      case 'file': return registerMusicToCard('play_single', { song_url: relpath });
       // TODO: Add missing Podcast
       // TODO: Add missing Stream
       default: return;
@@ -50,7 +49,7 @@ const FolderListItem = ({
         type === 'directory'
           ? <IconButton
               component={FolderLink}
-              data={{ dir: path }}
+              data={{ dir: relpath }}
               edge="end"
               aria-label={t('library.folders.show-folder-content')}
             >

src/webapp/src/components/Library/lists/folders/folder-list.js

@@ -1,26 +1,32 @@
 import React, { memo } from 'react';
 import { dropLast } from "ramda";
+import { useTranslation } from 'react-i18next';
 
-import { List } from '@mui/material';
+import {
+  List,
+  ListItem,
+  Typography,
+} from '@mui/material';
 
 import FolderListItem from './folder-list-item';
 import FolderListItemBack from './folder-list-item-back';
 
-import { ROOT_DIRS } from '../../../../config';
+import { ROOT_DIR } from '../../../../config';
 
 const FolderList = ({
   dir,
   folders,
   isSelecting,
   registerMusicToCard,
 }) => {
+  const { t } = useTranslation();
+
   const getParentDir = (dir) => {
-    // TODO: ROOT_DIRS should be removed after paths are relative
     const decodedDir = decodeURIComponent(dir);
 
-    if (ROOT_DIRS.includes(decodedDir)) return undefined;
+    if (decodedDir === ROOT_DIR) return undefined;
 
-    const parentDir = dropLast(1, decodedDir.split('/')).join('/');
+    const parentDir = dropLast(1, decodedDir.split('/')).join('/') || ROOT_DIR;
     return parentDir;
   }
 
@@ -29,11 +35,14 @@ const FolderList = ({
   return (
     <List sx={{ width: '100%' }}>
       {parentDir &&
-        <FolderListItemBack
-          dir={parentDir}
-        />
+        <FolderListItemBack dir={parentDir} />
+      }
+      {folders.length === 0 &&
+        <ListItem sx={{ justifyContent: 'center' }}>
+          <Typography>{t('library.folders.empty-folder')}</Typography>
+        </ListItem>
       }
-      {folders.map((folder, key) =>
+      {folders.length > 0 && folders.map((folder, key) =>
         <FolderListItem
           key={key}
           folder={folder}

src/webapp/src/components/Library/lists/folders/index.js

@@ -10,13 +10,15 @@ import {
 import request from '../../../../utils/request';
 import FolderList from "./folder-list";
 
+import { ROOT_DIR } from '../../../../config';
+
 const Folders = ({
   musicFilter,
   isSelecting,
   registerMusicToCard,
 }) => {
   const { t } = useTranslation();
-  const { dir = './' } = useParams();
+  const { dir = ROOT_DIR } = useParams();
   const [folders, setFolders] = useState([]);
   const [error, setError] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
@@ -49,9 +51,8 @@ const Folders = ({
 
   if (isLoading) return <CircularProgress />;
   if (error) return <Typography>{t('library.loading-error')}</Typography>;
-  if (!filteredFolders.length) {
-    if (musicFilter) return <Typography>{`☝️ ${t('library.folders.no-music')}`}</Typography>;
-    return <Typography>{`${t('library.folders.empty-folder')} 🙈`}</Typography>;
+  if (musicFilter && !filteredFolders.length) {
+    return <Typography>{t('library.folders.no-music')}</Typography>;
   }
 
   return (

src/webapp/src/config.js

@@ -17,9 +17,7 @@ const SUBSCRIPTIONS = [
   'volume.level',
 ];
 
-const DEFAULT_AUDIO_DIR = '../../shared/audiofolders';
-const ROOT_DIRS = ['./', DEFAULT_AUDIO_DIR];
-
+const ROOT_DIR = './';
 
 // TODO: The reason why thos commands are empty objects is due to a legacy
 // situation where titles associated with those commands were stored here
@@ -83,11 +81,10 @@ const JUKEBOX_ACTIONS_MAP = {
 const TIMER_STEPS = [0, 2, 5, 10, 15, 20, 30, 45, 60, 120, 180, 240];
 
 export {
-  DEFAULT_AUDIO_DIR,
   JUKEBOX_ACTIONS_MAP,
   PUBSUB_ENDPOINT,
   REQRES_ENDPOINT,
-  ROOT_DIRS,
+  ROOT_DIR,
   SUBSCRIPTIONS,
   TIMER_STEPS,
 }