Restructuring and functional component-ifying

2021-11-19 17:24:30 +13:00
parent 699e809568
commit 2777851889
20 changed files with 89 additions and 286 deletions
--- a/src/js/views/Library/LibraryBrowse.js
+++ b/src/js/views/Library/LibraryBrowse.js
@ -0,0 +1,156 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import Header from '../../components/Header';
+import { Grid } from '../../components/Grid';
+import Loader from '../../components/Loader';
+import Icon from '../../components/Icon';
+import * as uiActions from '../../services/ui/actions';
+import * as mopidyActions from '../../services/mopidy/actions';
+import { formatImages, encodeUri } from '../../util/format';
+import { I18n, i18n } from '../../locale';
+import { makeLoadingSelector } from '../../util/selectors';
+
+class LibraryBrowse extends React.Component {
+  componentDidMount() {
+    this.loadDirectory();
+    this.props.uiActions.setWindowTitle(i18n('library.browse.title'));
+  }
+
+  loadDirectory = () => {
+    const {
+      mopidyActions: {
+        getDirectory,
+      },
+    } = this.props;
+
+    getDirectory(null);
+  }
+
+  render = () => {
+    const {
+      loading,
+      directory,
+    } = this.props;
+
+    if (!directory) {
+      if (loading) {
+        return <Loader body loading />;
+      }
+      return null;
+    }
+
+    const grid_items = [];
+    if (directory.subdirectories) {
+      for (const subdirectory of directory.subdirectories) {
+        switch (subdirectory.name) {
+          case 'Dirble':
+            subdirectory.icons = ['/iris/assets/backgrounds/browse-dirble.jpg'];
+            break;
+
+          case 'Files':
+            subdirectory.icons = ['/iris/assets/backgrounds/browse-folders.jpg'];
+            break;
+
+          case 'Local media':
+            subdirectory.icons = ['/iris/assets/backgrounds/browse-folders.jpg'];
+            break;
+
+          case 'Spotify':
+          case 'Spotify Browse':
+          case 'Spotify Web Browse':
+            subdirectory.icons = ['/iris/assets/backgrounds/browse-spotify.jpg'];
+            break;
+
+          case 'Spotify Tunigo':
+          case 'Tunigo':
+            subdirectory.icons = ['/iris/assets/backgrounds/browse-tunigo.jpg'];
+            break;
+
+          case 'TuneIn':
+            subdirectory.icons = ['/iris/assets/backgrounds/browse-tunein.jpg'];
+            break;
+
+          case 'SoundCloud':
+            subdirectory.icons = ['/iris/assets/backgrounds/browse-soundcloud.jpg'];
+            break;
+
+          case 'Mixcloud':
+            subdirectory.icons = ['/iris/assets/backgrounds/browse-mixcloud.jpg'];
+            break;
+
+          case 'iTunes Store: Podcasts':
+            subdirectory.icons = ['/iris/assets/backgrounds/browse-itunes.jpg'];
+            break;
+
+          case 'Soma FM':
+            subdirectory.icons = ['/iris/assets/backgrounds/browse-somafm.jpg'];
+            break;
+
+          case 'Tidal':
+            subdirectory.icons = ['/iris/assets/backgrounds/browse-tidal.jpg'];
+            break;
+
+          case 'Google':
+          case 'Google Play':
+          case 'Google Play Music':
+            subdirectory.icons = ['/iris/assets/backgrounds/browse-google.jpg'];
+            break;
+
+          case 'YouTube Music':
+            subdirectory.icons = ['/iris/assets/backgrounds/browse-youtube.jpg'];
+            break;
+
+          default:
+            subdirectory.icons = ['/iris/assets/backgrounds/browse-default.jpg'];
+        }
+
+        grid_items.push({
+          name: subdirectory.name,
+          link: `/library/browse/${encodeURIComponent(subdirectory.name)}/${encodeUri(subdirectory.uri)}`,
+          icons: formatImages(subdirectory.icons),
+        });
+      }
+    }
+
+    return (
+      <div className="view library-local-view">
+        <Header>
+          <Icon name="folder" type="material" />
+          <I18n path="library.browse.title" />
+        </Header>
+        <section className="content-wrapper">
+          <div className="grid grid--tiles">
+            <Grid items={grid_items} sourceIcon={false} />
+          </div>
+        </section>
+      </div>
+    );
+  }
+}
+
+const loadingSelector = makeLoadingSelector(['(.*)mopidy_library.browse(.*)']);
+const mapStateToProps = (state) => {
+  const {
+    mopidy: {
+      directory: _directory = {},
+    },
+    ui: {
+      library_directory_view: view,
+    },
+  } = state;
+  const directory = _directory && _directory.uri === null ? _directory : null;
+
+  return {
+    loading: loadingSelector(state),
+    directory,
+    view,
+  };
+};
+
+const mapDispatchToProps = (dispatch) => ({
+  uiActions: bindActionCreators(uiActions, dispatch),
+  mopidyActions: bindActionCreators(mopidyActions, dispatch),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(LibraryBrowse);