From 081251061d6fa55f2c4f2b6fb5abd3ff058706d4 Mon Sep 17 00:00:00 2001 From: austinried <4966622+austinried@users.noreply.github.com> Date: Mon, 28 Mar 2022 13:30:57 +0900 Subject: [PATCH] Library store refactor (#76) * start of music store refactor moving stuff into a state cache better separate it from view logic * added paginated list/album list * reworked fetchAlbumList to remove ui state refactored home screen to use new method i broke playing songs somehow, JS thread goes into a loop * don't reset parts manually, do it all at once * fixed perf issue related to too many rerenders rerenders were caused by strict equality check on object/array picks switched artistInfo to new store updated zustand and fixed deprecation warnings * update typescript and use workspace tsc version for vscode * remove old artistInfo * switched to new playlist w/songs removed more unused stuff * remove unused + (slightly) rework search * refactor star * use only original/large imges for covers/artist fix view artist from context menu add loading indicators to song list and artist views (show info we have right away) * set starred/unstar assuming it works and correct state on error * reorg, remove old music slice files * added back fix for song cover art * sort artists by localCompare name * update licenses * fix now playing background grey bar * update react-native-gesture-handler for node-fetch security alert * fix another gradient height grey bar issue * update licenses again * remove thumbnail cache * rename to remove "Library" from methods * Revert "remove thumbnail cache" This reverts commit e0db4931f11bbf4cd8e73102d06505c6ae85f4a6. * use ids for lists, pull state later * Revert "use only original/large imges for covers/artist" This reverts commit c9aea9065ce6ebe3c8b09c10dd74d4de153d76fd. * deep equal ListItem props for now this needs a bigger refactor * use immer as middleware * refactor api client to use string method hoping to use this for requestKey/deduping next * use thumbnails in list items * Revert "refactor api client to use string method" This reverts commit 234326135b7af96cb91b941e7ca515f45c632556. * rename/cleanup * store servers by id * get rid of settings selectors * renames for clarity remove unused estimateContentLength setting * remove trackplayer selectors * fix migration for library filter settings * fixed shuffle order reporting wrong track/queue * removed the other selectors * don't actually need es6/react for our state * fix slow artist sort on star localeCompare is too slow for large lists --- .vscode/settings.json | 3 + android/app/src/main/assets/licenses.html | 386 +++++++++++--- android/app/src/main/assets/licenses/npm.txt | 137 ++--- android/licenses.yml | 8 +- app/App.tsx | 5 +- app/components/BackgroundHeaderFlatList.tsx | 2 +- app/components/ContextMenu.tsx | 16 +- app/components/HeaderBar.tsx | 4 +- app/components/ListItem.tsx | 41 +- app/components/ListPlayerControls.tsx | 11 +- app/components/NowPlayingBar.tsx | 19 +- app/components/ProgressHook.tsx | 5 +- app/components/Star.tsx | 20 +- app/hooks/cache.ts | 37 +- app/hooks/library.ts | 63 +++ app/hooks/list.ts | 26 +- app/hooks/music.ts | 62 --- app/hooks/{server.ts => settings.ts} | 17 +- app/hooks/trackplayer.ts | 12 +- app/models/cache.ts | 4 +- app/models/{music.ts => library.ts} | 39 +- app/models/settings.ts | 20 - app/models/state.ts | 14 + app/models/trackplayer.ts | 18 + app/navigation/BottomTabBar.tsx | 7 +- app/navigation/BottomTabNavigator.tsx | 5 +- app/playbackservice.ts | 11 +- app/screens/ArtistView.tsx | 89 +++- app/screens/Home.tsx | 93 +++- app/screens/LibraryAlbums.tsx | 71 ++- app/screens/LibraryArtists.tsx | 25 +- app/screens/LibraryPlaylists.tsx | 16 +- app/screens/NowPlayingQueue.tsx | 10 +- app/screens/NowPlayingView.tsx | 52 +- app/screens/Search.tsx | 48 +- app/screens/SearchResultsView.tsx | 79 ++- app/screens/ServerView.tsx | 21 +- app/screens/Settings.tsx | 47 +- app/screens/SongListView.tsx | 94 +++- app/screens/SplashPage.tsx | 2 +- app/state/cache.ts | 178 +++---- app/state/library.ts | 521 +++++++++++++++++++ app/state/migrations.ts | 25 + app/state/music.ts | 471 ----------------- app/state/musicmap.ts | 142 ----- app/state/settings.ts | 204 +++----- app/state/store.ts | 137 +++-- app/state/trackplayer.ts | 184 +++---- app/state/trackplayermap.ts | 15 +- app/subsonic/api.ts | 93 ++-- app/subsonic/params.ts | 4 + app/subsonic/responses.ts | 232 +++++---- app/util/state.ts | 21 + index.js | 7 +- package.json | 11 +- tsconfig.json | 2 +- yarn.lock | 93 ++-- 57 files changed, 2136 insertions(+), 1843 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 app/hooks/library.ts delete mode 100644 app/hooks/music.ts rename app/hooks/{server.ts => settings.ts} (50%) rename app/models/{music.ts => library.ts} (51%) create mode 100644 app/models/state.ts create mode 100644 app/models/trackplayer.ts create mode 100644 app/state/library.ts delete mode 100644 app/state/music.ts delete mode 100644 app/state/musicmap.ts create mode 100644 app/util/state.ts diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..55712c1 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "typescript.tsdk": "node_modules/typescript/lib" +} \ No newline at end of file diff --git a/android/app/src/main/assets/licenses.html b/android/app/src/main/assets/licenses.html index b21e89e..4b5d966 100644 --- a/android/app/src/main/assets/licenses.html +++ b/android/app/src/main/assets/licenses.html @@ -573,7 +573,7 @@

annotation

Copyright © Original Author. All rights reserved.

-

http://developer.android.com/tools/extras/support-library.html

+

https://developer.android.com/jetpack/androidx/releases/annotation#1.2.0

@@ -3039,6 +3039,253 @@
Copyright [yyyy] [name of copyright owner]

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

+
+ +

core-ktx

+

Copyright © Original Author. All rights reserved.

+

https://developer.android.com/jetpack/androidx/releases/core#1.6.0

+ +
+

+ Apache License +
+ Version 2.0, January 2004 +
+ http://www.apache.org/licenses/ +

+

TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

+

1. Definitions.

+

+ "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. +

+

+ "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. +

+

+ "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. +

+

+ "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. +

+

+ "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. +

+

+ "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. +

+

+ "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). +

+

+ "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. +

+

+ "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." +

+

+ "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. +

+
+

2. Grant of Copyright License.

+

+ Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. +

+
+
+

3. Grant of Patent License.

+

+ Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. +

+
+
+

4. Redistribution.

+

+ You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: +

+
+ +

+ You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. +

+
+

5. Submission of Contributions.

+

+ Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. +

+
+
+

6. Trademarks.

+

+ This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. +

+
+
+

7. Disclaimer of Warranty.

+

+ Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. +

+
+
+

8. Limitation of Liability.

+

+ In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. +

+
+
+

9. Accepting Warranty or Additional Liability.

+

+ While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. +

+
+

END OF TERMS AND CONDITIONS

+

APPENDIX: How to apply the Apache License to your work.

+

+ To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. +

+
Copyright [yyyy] [name of copyright owner]

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
+
+

core

@@ -24043,7 +24290,7 @@ SOFTWARE. ----- -The following software may be included in this product: babel-preset-fbjs, fbjs, fbjs-css-vars, invariant, prop-types. A copy of the source code may be downloaded from https://github.com/facebook/fbjs.git (babel-preset-fbjs), https://github.com/facebook/fbjs.git (fbjs), https://github.com/facebook/fbjs.git (fbjs-css-vars), https://github.com/zertosh/invariant (invariant), https://github.com/facebook/prop-types.git (prop-types). This software contains the following license and notice below: +The following software may be included in this product: babel-preset-fbjs, invariant, prop-types. A copy of the source code may be downloaded from https://github.com/facebook/fbjs.git (babel-preset-fbjs), https://github.com/zertosh/invariant (invariant), https://github.com/facebook/prop-types.git (prop-types). This software contains the following license and notice below: MIT License @@ -25482,32 +25729,6 @@ SOFTWARE. ----- -The following software may be included in this product: cross-fetch. A copy of the source code may be downloaded from https://github.com/lquixada/cross-fetch.git. This software contains the following license and notice below: - -The MIT License (MIT) - -Copyright (c) 2017 Leonardo Quixadá - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. - ------ - The following software may be included in this product: cross-spawn. A copy of the source code may be downloaded from git@github.com:moxystudio/node-cross-spawn.git. This software contains the following license and notice below: The MIT License (MIT) @@ -26181,6 +26402,32 @@ THE SOFTWARE. ----- +The following software may be included in this product: fast-deep-equal. A copy of the source code may be downloaded from git+https://github.com/epoberezkin/fast-deep-equal.git. This software contains the following license and notice below: + +MIT License + +Copyright (c) 2017 Evgeny Poberezkin + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + +----- + The following software may be included in this product: fill-range, is-number, micromatch. A copy of the source code may be downloaded from https://github.com/jonschlinkert/fill-range.git (fill-range), https://github.com/jonschlinkert/is-number.git (is-number), https://github.com/micromatch/micromatch.git (micromatch). This software contains the following license and notice below: The MIT License (MIT) @@ -27201,7 +27448,7 @@ OR OTHER DEALINGS IN THE SOFTWARE. ----- -The following software may be included in this product: lodash, lodash.template, lodash.templatesettings. A copy of the source code may be downloaded from https://github.com/lodash/lodash.git (lodash), https://github.com/lodash/lodash.git (lodash.template), https://github.com/lodash/lodash.git (lodash.templatesettings). This software contains the following license and notice below: +The following software may be included in this product: lodash, lodash.merge, lodash.template, lodash.templatesettings. A copy of the source code may be downloaded from https://github.com/lodash/lodash.git (lodash), https://github.com/lodash/lodash.git (lodash.merge), https://github.com/lodash/lodash.git (lodash.template), https://github.com/lodash/lodash.git (lodash.templatesettings). This software contains the following license and notice below: Copyright OpenJS Foundation and other contributors @@ -28739,11 +28986,11 @@ SOFTWARE. ----- -The following software may be included in this product: react-native-gesture-handler, react-native-reanimated. A copy of the source code may be downloaded from git+https://github.com/software-mansion/react-native-gesture-handler.git (react-native-gesture-handler), git+https://github.com/software-mansion/react-native-reanimated.git (react-native-reanimated). This software contains the following license and notice below: +The following software may be included in this product: react-native-gesture-handler. A copy of the source code may be downloaded from git+https://github.com/software-mansion/react-native-gesture-handler.git. This software contains the following license and notice below: The MIT License (MIT) -Copyright (c) 2016 Krzysztof Magiera +Copyright (c) 2016 Software Mansion Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal @@ -28889,6 +29136,32 @@ OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. ----- +The following software may be included in this product: react-native-reanimated. A copy of the source code may be downloaded from git+https://github.com/software-mansion/react-native-reanimated.git. This software contains the following license and notice below: + +The MIT License (MIT) + +Copyright (c) 2016 Krzysztof Magiera + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + +----- + The following software may be included in this product: react-native-safe-area-context. A copy of the source code may be downloaded from https://github.com/th3rdwave/react-native-safe-area-context.git. This software contains the following license and notice below: MIT License @@ -29666,31 +29939,6 @@ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ----- -The following software may be included in this product: setimmediate. A copy of the source code may be downloaded from https://github.com/YuzuJS/setImmediate.git. This software contains the following license and notice below: - -Copyright (c) 2012 Barnesandnoble.com, llc, Donavon West, and Domenic Denicola - -Permission is hereby granted, free of charge, to any person obtaining -a copy of this software and associated documentation files (the -"Software"), to deal in the Software without restriction, including -without limitation the rights to use, copy, modify, merge, publish, -distribute, sublicense, and/or sell copies of the Software, and to -permit persons to whom the Software is furnished to do so, subject to -the following conditions: - -The above copyright notice and this permission notice shall be -included in all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF -MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE -LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION -OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION -WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. - ------ - The following software may be included in this product: setprototypeof. A copy of the source code may be downloaded from https://github.com/wesleytodd/setprototypeof.git. This software contains the following license and notice below: Copyright (c) 2015, Wes Todd @@ -30345,32 +30593,6 @@ PERFORMANCE OF THIS SOFTWARE. ----- -The following software may be included in this product: ua-parser-js. A copy of the source code may be downloaded from https://github.com/faisalman/ua-parser-js.git. This software contains the following license and notice below: - -MIT License - -Copyright (c) 2012-2021 Faisal Salman <> - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. - ------ - The following software may be included in this product: uglify-es. A copy of the source code may be downloaded from https://github.com/mishoo/UglifyJS2.git#harmony. This software contains the following license and notice below: UglifyJS is released under the BSD license: diff --git a/android/app/src/main/assets/licenses/npm.txt b/android/app/src/main/assets/licenses/npm.txt index 40edcd6..79b80ab 100644 --- a/android/app/src/main/assets/licenses/npm.txt +++ b/android/app/src/main/assets/licenses/npm.txt @@ -1235,7 +1235,7 @@ SOFTWARE. ----- -The following software may be included in this product: babel-preset-fbjs, fbjs, fbjs-css-vars, invariant, prop-types. A copy of the source code may be downloaded from https://github.com/facebook/fbjs.git (babel-preset-fbjs), https://github.com/facebook/fbjs.git (fbjs), https://github.com/facebook/fbjs.git (fbjs-css-vars), https://github.com/zertosh/invariant (invariant), https://github.com/facebook/prop-types.git (prop-types). This software contains the following license and notice below: +The following software may be included in this product: babel-preset-fbjs, invariant, prop-types. A copy of the source code may be downloaded from https://github.com/facebook/fbjs.git (babel-preset-fbjs), https://github.com/zertosh/invariant (invariant), https://github.com/facebook/prop-types.git (prop-types). This software contains the following license and notice below: MIT License @@ -2674,32 +2674,6 @@ SOFTWARE. ----- -The following software may be included in this product: cross-fetch. A copy of the source code may be downloaded from https://github.com/lquixada/cross-fetch.git. This software contains the following license and notice below: - -The MIT License (MIT) - -Copyright (c) 2017 Leonardo Quixadá - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. - ------ - The following software may be included in this product: cross-spawn. A copy of the source code may be downloaded from git@github.com:moxystudio/node-cross-spawn.git. This software contains the following license and notice below: The MIT License (MIT) @@ -3373,6 +3347,32 @@ THE SOFTWARE. ----- +The following software may be included in this product: fast-deep-equal. A copy of the source code may be downloaded from git+https://github.com/epoberezkin/fast-deep-equal.git. This software contains the following license and notice below: + +MIT License + +Copyright (c) 2017 Evgeny Poberezkin + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + +----- + The following software may be included in this product: fill-range, is-number, micromatch. A copy of the source code may be downloaded from https://github.com/jonschlinkert/fill-range.git (fill-range), https://github.com/jonschlinkert/is-number.git (is-number), https://github.com/micromatch/micromatch.git (micromatch). This software contains the following license and notice below: The MIT License (MIT) @@ -4393,7 +4393,7 @@ OR OTHER DEALINGS IN THE SOFTWARE. ----- -The following software may be included in this product: lodash, lodash.template, lodash.templatesettings. A copy of the source code may be downloaded from https://github.com/lodash/lodash.git (lodash), https://github.com/lodash/lodash.git (lodash.template), https://github.com/lodash/lodash.git (lodash.templatesettings). This software contains the following license and notice below: +The following software may be included in this product: lodash, lodash.merge, lodash.template, lodash.templatesettings. A copy of the source code may be downloaded from https://github.com/lodash/lodash.git (lodash), https://github.com/lodash/lodash.git (lodash.merge), https://github.com/lodash/lodash.git (lodash.template), https://github.com/lodash/lodash.git (lodash.templatesettings). This software contains the following license and notice below: Copyright OpenJS Foundation and other contributors @@ -5931,11 +5931,11 @@ SOFTWARE. ----- -The following software may be included in this product: react-native-gesture-handler, react-native-reanimated. A copy of the source code may be downloaded from git+https://github.com/software-mansion/react-native-gesture-handler.git (react-native-gesture-handler), git+https://github.com/software-mansion/react-native-reanimated.git (react-native-reanimated). This software contains the following license and notice below: +The following software may be included in this product: react-native-gesture-handler. A copy of the source code may be downloaded from git+https://github.com/software-mansion/react-native-gesture-handler.git. This software contains the following license and notice below: The MIT License (MIT) -Copyright (c) 2016 Krzysztof Magiera +Copyright (c) 2016 Software Mansion Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal @@ -6081,6 +6081,32 @@ OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. ----- +The following software may be included in this product: react-native-reanimated. A copy of the source code may be downloaded from git+https://github.com/software-mansion/react-native-reanimated.git. This software contains the following license and notice below: + +The MIT License (MIT) + +Copyright (c) 2016 Krzysztof Magiera + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + +----- + The following software may be included in this product: react-native-safe-area-context. A copy of the source code may be downloaded from https://github.com/th3rdwave/react-native-safe-area-context.git. This software contains the following license and notice below: MIT License @@ -6858,31 +6884,6 @@ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ----- -The following software may be included in this product: setimmediate. A copy of the source code may be downloaded from https://github.com/YuzuJS/setImmediate.git. This software contains the following license and notice below: - -Copyright (c) 2012 Barnesandnoble.com, llc, Donavon West, and Domenic Denicola - -Permission is hereby granted, free of charge, to any person obtaining -a copy of this software and associated documentation files (the -"Software"), to deal in the Software without restriction, including -without limitation the rights to use, copy, modify, merge, publish, -distribute, sublicense, and/or sell copies of the Software, and to -permit persons to whom the Software is furnished to do so, subject to -the following conditions: - -The above copyright notice and this permission notice shall be -included in all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF -MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE -LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION -OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION -WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. - ------ - The following software may be included in this product: setprototypeof. A copy of the source code may be downloaded from https://github.com/wesleytodd/setprototypeof.git. This software contains the following license and notice below: Copyright (c) 2015, Wes Todd @@ -7537,32 +7538,6 @@ PERFORMANCE OF THIS SOFTWARE. ----- -The following software may be included in this product: ua-parser-js. A copy of the source code may be downloaded from https://github.com/faisalman/ua-parser-js.git. This software contains the following license and notice below: - -MIT License - -Copyright (c) 2012-2021 Faisal Salman <> - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. - ------ - The following software may be included in this product: uglify-es. A copy of the source code may be downloaded from https://github.com/mishoo/UglifyJS2.git#harmony. This software contains the following license and notice below: UglifyJS is released under the BSD license: diff --git a/android/licenses.yml b/android/licenses.yml index dd668db..efa6856 100644 --- a/android/licenses.yml +++ b/android/licenses.yml @@ -15,7 +15,7 @@ copyrightHolder: Original Author license: The Apache Software License, Version 2.0 licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt - url: http://developer.android.com/tools/extras/support-library.html + url: https://developer.android.com/jetpack/androidx/releases/annotation#1.2.0 - artifact: androidx.appcompat:appcompat-resources:+ name: appcompat-resources copyrightHolder: Original Author @@ -70,6 +70,12 @@ license: The Apache Software License, Version 2.0 licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt url: https://developer.android.com/jetpack/androidx +- artifact: androidx.core:core-ktx:+ + name: core-ktx + copyrightHolder: Original Author + license: The Apache Software License, Version 2.0 + licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt + url: https://developer.android.com/jetpack/androidx/releases/core#1.6.0 - artifact: androidx.core:core:+ name: core copyrightHolder: Original Author diff --git a/app/App.tsx b/app/App.tsx index c1f2580..6c6dfcd 100644 --- a/app/App.tsx +++ b/app/App.tsx @@ -5,12 +5,11 @@ import React from 'react' import { StatusBar, View, StyleSheet } from 'react-native' import ProgressHook from './components/ProgressHook' import { useStore } from './state/store' -import { selectTrackPlayer } from './state/trackplayer' import { MenuProvider } from 'react-native-popup-menu' const Debug = () => { - const currentTrack = useStore(selectTrackPlayer.currentTrack) - console.log(currentTrack?.title) + const currentTrackTitle = useStore(store => store.currentTrack?.title) + console.log('currentTrackTitle', currentTrackTitle) return <> } diff --git a/app/components/BackgroundHeaderFlatList.tsx b/app/components/BackgroundHeaderFlatList.tsx index 87c07f8..e419216 100644 --- a/app/components/BackgroundHeaderFlatList.tsx +++ b/app/components/BackgroundHeaderFlatList.tsx @@ -37,7 +37,7 @@ function BackgroundHeaderFlatList(props: BackgroundHeaderFlatListProp } ListHeaderComponentStyle={[headerStyle]} - ListEmptyComponent={} + ListEmptyComponent={props.ListEmptyComponent || } /> ) } diff --git a/app/components/ContextMenu.tsx b/app/components/ContextMenu.tsx index 633d6be..dc40054 100644 --- a/app/components/ContextMenu.tsx +++ b/app/components/ContextMenu.tsx @@ -1,8 +1,6 @@ import PressableOpacity from '@app/components/PressableOpacity' -import { useStarred } from '@app/hooks/music' -import { AlbumListItem, Artist, Song, StarrableItemType } from '@app/models/music' -import { selectMusic } from '@app/state/music' -import { useStore } from '@app/state/store' +import { useStar } from '@app/hooks/library' +import { StarrableItemType, Song, Artist, Album } from '@app/models/library' import colors from '@app/styles/colors' import font from '@app/styles/font' import { NavigationProp, useNavigation } from '@react-navigation/native' @@ -12,9 +10,8 @@ import { ScrollView, StyleProp, StyleSheet, Text, View, ViewStyle } from 'react- import { Menu, MenuOption, MenuOptions, MenuTrigger, renderers } from 'react-native-popup-menu' import IconFA from 'react-native-vector-icons/FontAwesome' import IconFA5 from 'react-native-vector-icons/FontAwesome5' -// import IconMat from 'react-native-vector-icons/MaterialIcons' import CoverArt from './CoverArt' -import Star from './Star' +import { Star } from './Star' const { SlideInMenu } = renderers @@ -144,14 +141,13 @@ const OptionStar = React.memo<{ type: StarrableItemType additionalText?: string }>(({ id, type, additionalText: text }) => { - const starred = useStarred(id, type) - const setStarred = useStore(selectMusic.starItem) + const { starred, toggleStar } = useStar(id, type) return ( } text={(starred ? 'Unstar' : 'Star') + (text ? ` ${text}` : '')} - onSelect={() => setStarred(id, type, starred)} + onSelect={toggleStar} /> ) }) @@ -203,7 +199,7 @@ const OptionViewAlbum = React.memo<{ // )) export type AlbumContextPressableProps = ContextMenuProps & { - album: AlbumListItem + album: Album } export const AlbumContextPressable: React.FC = props => { diff --git a/app/components/HeaderBar.tsx b/app/components/HeaderBar.tsx index 202875c..c391d47 100644 --- a/app/components/HeaderBar.tsx +++ b/app/components/HeaderBar.tsx @@ -8,10 +8,10 @@ import Animated from 'react-native-reanimated' import PressableOpacity from './PressableOpacity' import IconMat from 'react-native-vector-icons/MaterialIcons' import { ReactComponentLike } from 'prop-types' -import { AlbumListItem, Song } from '@app/models/music' import { AlbumContextPressable, NowPlayingContextPressable } from './ContextMenu' +import { Album, Song } from '@app/models/library' -export type HeaderContextItem = Song | AlbumListItem +export type HeaderContextItem = Song | Album const More = React.memo<{ contextItem?: HeaderContextItem }>(({ contextItem }) => { const moreIcon = diff --git a/app/components/ListItem.tsx b/app/components/ListItem.tsx index 0e36e1a..e148d1d 100644 --- a/app/components/ListItem.tsx +++ b/app/components/ListItem.tsx @@ -1,8 +1,5 @@ -import { useStarred } from '@app/hooks/music' import { useIsPlaying } from '@app/hooks/trackplayer' -import { AlbumListItem, Artist, ListableItem, Song } from '@app/models/music' -import { selectMusic } from '@app/state/music' -import { useStore } from '@app/state/store' +import { Album, Artist, ListableItem, Song } from '@app/models/library' import colors from '@app/styles/colors' import font from '@app/styles/font' import { useNavigation } from '@react-navigation/native' @@ -13,7 +10,8 @@ import IconMat from 'react-native-vector-icons/MaterialIcons' import { AlbumContextPressable, ArtistContextPressable, SongContextPressable } from './ContextMenu' import CoverArt from './CoverArt' import PressableOpacity from './PressableOpacity' -import Star from './Star' +import { PressableStar } from './Star' +import equal from 'fast-deep-equal/es6/react' const TitleTextSong = React.memo<{ contextId?: string @@ -58,7 +56,6 @@ const ListItem: React.FC<{ style?: StyleProp }> = ({ item, contextId, queueId, onPress, showArt, showStar, subtitle, listStyle, style }) => { const navigation = useNavigation() - const starred = useStarred(item.id, item.itemType) showStar = showStar === undefined ? true : showStar listStyle = listStyle || 'small' @@ -101,7 +98,7 @@ const ListItem: React.FC<{ ) const albumPressable = useCallback( ({ children }) => ( - + {children} ), @@ -133,13 +130,6 @@ const ListItem: React.FC<{ PressableComponent = artistPressable } - const starItem = useStore(selectMusic.starItem) - const toggleStarred = useCallback(() => { - if (item.itemType !== 'playlist') { - starItem(item.id, item.itemType, starred) - } - }, [item.id, item.itemType, starItem, starred]) - let title = <> if (item.itemType === 'song' && queueId !== undefined) { title = @@ -151,9 +141,20 @@ const ListItem: React.FC<{ const resizeMode = 'cover' let coverArt = <> if (item.itemType === 'artist') { - coverArt = + coverArt = ( + + ) } else { - coverArt = + coverArt = ( + + ) } return ( @@ -178,10 +179,8 @@ const ListItem: React.FC<{ - {showStar && ( - - - + {showStar && item.itemType !== 'playlist' && ( + )} @@ -259,4 +258,4 @@ const bigStyles = StyleSheet.create({ }, }) -export default React.memo(ListItem) +export default React.memo(ListItem, equal) diff --git a/app/components/ListPlayerControls.tsx b/app/components/ListPlayerControls.tsx index 3a94983..665fad4 100644 --- a/app/components/ListPlayerControls.tsx +++ b/app/components/ListPlayerControls.tsx @@ -1,7 +1,7 @@ import Button from '@app/components/Button' -import { Song } from '@app/models/music' +import { Song } from '@app/models/library' +import { QueueContextType } from '@app/models/trackplayer' import { useStore } from '@app/state/store' -import { QueueContextType, selectTrackPlayer } from '@app/state/trackplayer' import colors from '@app/styles/colors' import React, { useState } from 'react' import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native' @@ -17,7 +17,7 @@ const ListPlayerControls = React.memo<{ style?: StyleProp }>(({ songs, typeName, queueName, queueContextType, queueContextId, style }) => { const [downloaded, setDownloaded] = useState(false) - const setQueue = useStore(selectTrackPlayer.setQueue) + const setQueue = useStore(store => store.setQueue) return ( @@ -36,11 +36,14 @@ const ListPlayerControls = React.memo<{ diff --git a/app/components/NowPlayingBar.tsx b/app/components/NowPlayingBar.tsx index 27d84e8..4df563d 100644 --- a/app/components/NowPlayingBar.tsx +++ b/app/components/NowPlayingBar.tsx @@ -2,7 +2,6 @@ import CoverArt from '@app/components/CoverArt' import PressableOpacity from '@app/components/PressableOpacity' import { usePause, usePlay } from '@app/hooks/trackplayer' import { useStore } from '@app/state/store' -import { selectTrackPlayer } from '@app/state/trackplayer' import colors from '@app/styles/colors' import font from '@app/styles/font' import { useNavigation } from '@react-navigation/native' @@ -12,7 +11,8 @@ import { State } from 'react-native-track-player' import IconFA5 from 'react-native-vector-icons/FontAwesome5' const ProgressBar = React.memo(() => { - const { position, duration } = useStore(selectTrackPlayer.progress) + const position = useStore(store => store.progress.position) + const duration = useStore(store => store.progress.duration) let progress = 0 if (duration > 0) { @@ -41,7 +41,7 @@ const progressStyles = StyleSheet.create({ }) const Controls = React.memo(() => { - const state = useStore(selectTrackPlayer.playerState) + const state = useStore(store => store.playerState) const play = usePlay() const pause = usePause() @@ -78,9 +78,12 @@ const Controls = React.memo(() => { const NowPlayingBar = React.memo(() => { const navigation = useNavigation() - const track = useStore(selectTrackPlayer.currentTrack) + const currentTrackExists = useStore(store => !!store.currentTrack) + const coverArt = useStore(store => store.currentTrack?.coverArt) + const title = useStore(store => store.currentTrack?.title) + const artist = useStore(store => store.currentTrack?.artist) - const displayStyle: ViewStyle = { display: track ? 'flex' : 'none' } + const displayStyle: ViewStyle = { display: currentTrackExists ? 'flex' : 'none' } return ( navigation.navigate('now-playing')} style={[styles.container, displayStyle]}> @@ -89,14 +92,14 @@ const NowPlayingBar = React.memo(() => { - {track?.title} + {title} - {track?.artist} + {artist} diff --git a/app/components/ProgressHook.tsx b/app/components/ProgressHook.tsx index f72998a..01bd4a2 100644 --- a/app/components/ProgressHook.tsx +++ b/app/components/ProgressHook.tsx @@ -1,11 +1,10 @@ import { useStore } from '@app/state/store' -import { selectTrackPlayer } from '@app/state/trackplayer' import React, { useEffect } from 'react' import { State, useProgress } from 'react-native-track-player' const ProgressHook = () => { - const playerState = useStore(selectTrackPlayer.playerState) - const setProgress = useStore(selectTrackPlayer.setProgress) + const playerState = useStore(store => store.playerState) + const setProgress = useStore(store => store.setProgress) const progress = useProgress(250) useEffect(() => { diff --git a/app/components/Star.tsx b/app/components/Star.tsx index c58d5e9..4d1a06e 100644 --- a/app/components/Star.tsx +++ b/app/components/Star.tsx @@ -1,8 +1,11 @@ +import { useStar } from '@app/hooks/library' import colors from '@app/styles/colors' import React from 'react' +import { PressableStateCallbackType, StyleProp, ViewStyle } from 'react-native' import IconFA from 'react-native-vector-icons/FontAwesome' +import PressableOpacity from './PressableOpacity' -const Star = React.memo<{ +export const Star = React.memo<{ starred: boolean size: number }>(({ starred, size }) => { @@ -11,4 +14,17 @@ const Star = React.memo<{ ) }) -export default Star +export const PressableStar = React.memo<{ + id: string + type: 'album' | 'artist' | 'song' + size: number + style?: StyleProp | ((state: PressableStateCallbackType) => StyleProp) | undefined +}>(({ id, type, size, style }) => { + const { starred, toggleStar } = useStar(id, type) + + return ( + + + + ) +}) diff --git a/app/hooks/cache.ts b/app/hooks/cache.ts index 71e74ca..be3eb51 100644 --- a/app/hooks/cache.ts +++ b/app/hooks/cache.ts @@ -1,16 +1,12 @@ import { CacheImageSize, CacheItemTypeKey } from '@app/models/cache' -import { ArtistInfo } from '@app/models/music' -import { selectCache } from '@app/state/cache' -import { selectMusic } from '@app/state/music' -import { selectSettings } from '@app/state/settings' -import { useStore, Store } from '@app/state/store' +import { Store, useStore, useStoreDeep } from '@app/state/store' import { useCallback, useEffect } from 'react' const useFileRequest = (key: CacheItemTypeKey, id: string) => { const file = useStore( useCallback( (store: Store) => { - const activeServerId = store.settings.activeServer + const activeServerId = store.settings.activeServerId if (!activeServerId) { return } @@ -23,7 +19,7 @@ const useFileRequest = (key: CacheItemTypeKey, id: string) => { const request = useStore( useCallback( (store: Store) => { - const activeServerId = store.settings.activeServer + const activeServerId = store.settings.activeServerId if (!activeServerId) { return } @@ -40,8 +36,8 @@ const useFileRequest = (key: CacheItemTypeKey, id: string) => { export const useCoverArtFile = (coverArt = '-1', size: CacheImageSize = 'thumbnail') => { const type: CacheItemTypeKey = size === 'original' ? 'coverArt' : 'coverArtThumb' const { file, request } = useFileRequest(type, coverArt) - const client = useStore(selectSettings.client) - const cacheItem = useStore(selectCache.cacheItem) + const client = useStore(store => store.client) + const cacheItem = useStore(store => store.cacheItem) useEffect(() => { if (!file && client) { @@ -61,28 +57,25 @@ export const useCoverArtFile = (coverArt = '-1', size: CacheImageSize = 'thumbna export const useArtistArtFile = (artistId: string, size: CacheImageSize = 'thumbnail') => { const type: CacheItemTypeKey = size === 'original' ? 'artistArt' : 'artistArtThumb' - const fetchArtistInfo = useStore(selectMusic.fetchArtistInfo) + const fetchArtistInfo = useStore(store => store.fetchArtistInfo) + const artistInfo = useStoreDeep(store => store.library.artistInfo[artistId]) const { file, request } = useFileRequest(type, artistId) - const cacheItem = useStore(selectCache.cacheItem) + const cacheItem = useStore(store => store.cacheItem) useEffect(() => { - if (!file) { + if (!artistInfo) { + fetchArtistInfo(artistId) + return + } + + if (!file && artistInfo) { cacheItem(type, artistId, async () => { - let artistInfo: ArtistInfo | undefined - const cachedArtistInfo = useStore.getState().artistInfo[artistId] - - if (cachedArtistInfo) { - artistInfo = cachedArtistInfo - } else { - artistInfo = await fetchArtistInfo(artistId) - } - return type === 'artistArtThumb' ? artistInfo?.smallImageUrl : artistInfo?.largeImageUrl }) } // intentionally leaving file out so it doesn't re-render if the request fails // eslint-disable-next-line react-hooks/exhaustive-deps - }, [artistId, cacheItem, fetchArtistInfo, type]) + }, [artistId, cacheItem, fetchArtistInfo, type, artistInfo]) return { file, request } } diff --git a/app/hooks/library.ts b/app/hooks/library.ts new file mode 100644 index 0000000..c210a53 --- /dev/null +++ b/app/hooks/library.ts @@ -0,0 +1,63 @@ +import { useStore } from '@app/state/store' +import { StarParams } from '@app/subsonic/params' +import { useCallback, useEffect } from 'react' + +type StarrableItem = 'album' | 'artist' | 'song' + +function starParams(id: string, type: StarrableItem): StarParams { + const params: StarParams = {} + if (type === 'album') { + params.albumId = id + } else if (type === 'artist') { + params.artistId = id + } else { + params.id = id + } + + return params +} + +export const useStar = (id: string, type: StarrableItem) => { + const fetchAlbum = useStore(store => store.fetchAlbum) + const fetchArtist = useStore(store => store.fetchArtist) + const fetchSong = useStore(store => store.fetchSong) + + const _starred = useStore( + useCallback( + store => { + if (type === 'album') { + return store.library.albums[id] ? !!store.library.albums[id].starred : null + } else if (type === 'artist') { + return store.library.artists[id] ? !!store.library.artists[id].starred : null + } else { + return store.library.songs[id] ? !!store.library.songs[id].starred : null + } + }, + [id, type], + ), + ) + + useEffect(() => { + if (_starred === null) { + if (type === 'album') { + fetchAlbum(id) + } else if (type === 'artist') { + fetchArtist(id) + } else { + fetchSong(id) + } + } + }, [fetchAlbum, fetchArtist, fetchSong, id, _starred, type]) + + const starred = !!_starred + + const _star = useStore(store => store.star) + const _unstar = useStore(store => store.unstar) + + const star = useCallback(() => _star(starParams(id, type)), [_star, id, type]) + const unstar = useCallback(() => _unstar(starParams(id, type)), [_unstar, id, type]) + + const toggleStar = useCallback(() => (starred ? unstar() : star()), [star, starred, unstar]) + + return { star, unstar, toggleStar, starred } +} diff --git a/app/hooks/list.ts b/app/hooks/list.ts index 87e8443..c9cbbc9 100644 --- a/app/hooks/list.ts +++ b/app/hooks/list.ts @@ -1,5 +1,5 @@ import { useState, useCallback } from 'react' -import { useActiveServerRefresh } from './server' +import { useActiveServerRefresh } from './settings' export const useFetchList = (fetchList: () => Promise) => { const [list, setList] = useState([]) @@ -28,8 +28,26 @@ export const useFetchList = (fetchList: () => Promise) => { return { list, refreshing, refresh, reset } } +export const useFetchList2 = (fetchList: () => Promise) => { + const [refreshing, setRefreshing] = useState(false) + + const refresh = useCallback(async () => { + setRefreshing(true) + await fetchList() + setRefreshing(false) + }, [fetchList]) + + useActiveServerRefresh( + useCallback(async () => { + await refresh() + }, [refresh]), + ) + + return { refreshing, refresh } +} + export const useFetchPaginatedList = ( - fetchList: (size?: number, offset?: number) => Promise, + fetchList: (size: number, offset: number) => Promise, pageSize: number, ) => { const [list, setList] = useState([]) @@ -53,8 +71,8 @@ export const useFetchPaginatedList = ( useActiveServerRefresh( useCallback(() => { - reset() - }, [reset]), + refresh() + }, [refresh]), ) const fetchNextPage = useCallback(() => { diff --git a/app/hooks/music.ts b/app/hooks/music.ts deleted file mode 100644 index 26fc962..0000000 --- a/app/hooks/music.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { selectMusic } from '@app/state/music' -import { Store, useStore } from '@app/state/store' -import { useCallback, useEffect } from 'react' - -export const useArtistInfo = (id: string) => { - const artistInfo = useStore(useCallback((state: Store) => state.artistInfo[id], [id])) - const fetchArtistInfo = useStore(selectMusic.fetchArtistInfo) - - useEffect(() => { - if (!artistInfo) { - fetchArtistInfo(id) - } - }, [artistInfo, fetchArtistInfo, id]) - - return artistInfo -} - -export const useAlbumWithSongs = (id: string) => { - const album = useStore(useCallback((state: Store) => state.albumsWithSongs[id], [id])) - const fetchAlbum = useStore(selectMusic.fetchAlbumWithSongs) - - useEffect(() => { - if (!album) { - fetchAlbum(id) - } - }, [album, fetchAlbum, id]) - - return album -} - -export const usePlaylistWithSongs = (id: string) => { - const playlist = useStore(useCallback((state: Store) => state.playlistsWithSongs[id], [id])) - const fetchPlaylist = useStore(selectMusic.fetchPlaylistWithSongs) - - useEffect(() => { - if (!playlist) { - fetchPlaylist(id) - } - }, [fetchPlaylist, id, playlist]) - - return playlist -} - -export const useStarred = (id: string, type: string) => { - return useStore( - useCallback( - (state: Store) => { - switch (type) { - case 'song': - return state.starredSongs[id] - case 'album': - return state.starredAlbums[id] - case 'artist': - return state.starredArtists[id] - default: - return false - } - }, - [type, id], - ), - ) -} diff --git a/app/hooks/server.ts b/app/hooks/settings.ts similarity index 50% rename from app/hooks/server.ts rename to app/hooks/settings.ts index f6a29ab..d1a8106 100644 --- a/app/hooks/server.ts +++ b/app/hooks/settings.ts @@ -1,15 +1,14 @@ import { useReset } from '@app/hooks/trackplayer' -import { selectSettings } from '@app/state/settings' import { useStore } from '@app/state/store' import { useEffect } from 'react' export const useSwitchActiveServer = () => { - const activeServer = useStore(selectSettings.activeServer) - const setActiveServer = useStore(selectSettings.setActiveServer) + const activeServerId = useStore(store => store.settings.activeServerId) + const setActiveServer = useStore(store => store.setActiveServer) const resetPlayer = useReset() return async (id: string) => { - if (id === activeServer?.id) { + if (id === activeServerId) { return } @@ -19,11 +18,15 @@ export const useSwitchActiveServer = () => { } export const useActiveServerRefresh = (refresh: () => void) => { - const activeServer = useStore(selectSettings.activeServer) + const activeServerId = useStore(store => store.settings.activeServerId) useEffect(() => { - if (activeServer) { + if (activeServerId) { refresh() } - }, [activeServer, refresh]) + }, [activeServerId, refresh]) +} + +export const useFirstRun = () => { + return useStore(store => Object.keys(store.settings.servers).length === 0) } diff --git a/app/hooks/trackplayer.ts b/app/hooks/trackplayer.ts index 12f1848..948b422 100644 --- a/app/hooks/trackplayer.ts +++ b/app/hooks/trackplayer.ts @@ -1,5 +1,5 @@ -import { useStore } from '@app/state/store' -import { getQueue, selectTrackPlayer, trackPlayerCommands } from '@app/state/trackplayer' +import { useStore, useStoreDeep } from '@app/state/store' +import { getQueue, trackPlayerCommands } from '@app/state/trackplayer' import TrackPlayer from 'react-native-track-player' export const usePlay = () => { @@ -57,7 +57,7 @@ export const useSeekTo = () => { } export const useReset = (enqueue = true) => { - const resetStore = useStore(selectTrackPlayer.resetTrackPlayerState) + const resetStore = useStore(store => store.resetTrackPlayerState) const reset = async () => { await TrackPlayer.reset() @@ -68,9 +68,9 @@ export const useReset = (enqueue = true) => { } export const useIsPlaying = (contextId: string | undefined, track: number) => { - const queueContextId = useStore(selectTrackPlayer.queueContextId) - const currentTrackIdx = useStore(selectTrackPlayer.currentTrackIdx) - const shuffleOrder = useStore(selectTrackPlayer.shuffleOrder) + const queueContextId = useStore(store => store.queueContextId) + const currentTrackIdx = useStore(store => store.currentTrackIdx) + const shuffleOrder = useStoreDeep(store => store.shuffleOrder) if (contextId === undefined) { return track === currentTrackIdx diff --git a/app/models/cache.ts b/app/models/cache.ts index cff273e..5bd23cd 100644 --- a/app/models/cache.ts +++ b/app/models/cache.ts @@ -1,4 +1,4 @@ -import { Album, PlaylistListItem, Artist, Song } from './music' +import { Album, Playlist, Artist, Song } from './library' export enum CacheItemType { coverArt = 'coverArt', @@ -27,7 +27,7 @@ export type DownloadedAlbum = Album & { songs: string[] } -export type DownloadedPlaylist = PlaylistListItem & { +export type DownloadedPlaylist = Playlist & { songs: string[] } diff --git a/app/models/music.ts b/app/models/library.ts similarity index 51% rename from app/models/music.ts rename to app/models/library.ts index d4e5fb8..2143f4c 100644 --- a/app/models/music.ts +++ b/app/models/library.ts @@ -6,14 +6,13 @@ export interface Artist { coverArt?: string } -export interface ArtistInfo extends Artist { - albums: Album[] +export interface ArtistInfo { + id: string smallImageUrl?: string largeImageUrl?: string - topSongs: Song[] } -export interface AlbumListItem { +export interface Album { itemType: 'album' id: string name: string @@ -21,24 +20,10 @@ export interface AlbumListItem { artistId?: string starred?: Date coverArt?: string -} - -export interface Album extends AlbumListItem { - coverArt?: string year?: number } -export interface AlbumWithSongs extends Album { - songs: Song[] -} - -export interface SearchResults { - artists: Artist[] - albums: AlbumListItem[] - songs: Song[] -} - -export interface PlaylistListItem { +export interface Playlist { itemType: 'playlist' id: string name: string @@ -46,10 +31,6 @@ export interface PlaylistListItem { coverArt?: string } -export interface PlaylistWithSongs extends PlaylistListItem { - songs: Song[] -} - export interface Song { itemType: 'song' id: string @@ -62,13 +43,15 @@ export interface Song { discNumber?: number duration?: number starred?: Date - - streamUri: string coverArt?: string } -export type ListableItem = Song | AlbumListItem | Artist | PlaylistListItem +export interface SearchResults { + artists: string[] + albums: string[] + songs: string[] +} -export type HomeLists = { [key: string]: AlbumListItem[] } +export type StarrableItemType = 'album' | 'song' | 'artist' -export type StarrableItemType = 'song' | 'album' | 'artist' +export type ListableItem = Album | Song | Artist | Playlist diff --git a/app/models/settings.ts b/app/models/settings.ts index 9c77c8d..d715e20 100644 --- a/app/models/settings.ts +++ b/app/models/settings.ts @@ -30,23 +30,3 @@ export type ArtistFilterType = 'random' | 'starred' | 'alphabeticalByName' export interface ArtistFilterSettings { type: ArtistFilterType } - -export interface AppSettings { - servers: Server[] - screens: { - home: { - lists: string[] - } - library: { - albums: AlbumFilterSettings - artists: ArtistFilterSettings - } - } - activeServer?: string - scrobble: boolean - estimateContentLength: boolean - maxBitrateWifi: number - maxBitrateMobile: number - minBuffer: number - maxBuffer: number -} diff --git a/app/models/state.ts b/app/models/state.ts new file mode 100644 index 0000000..3c68c17 --- /dev/null +++ b/app/models/state.ts @@ -0,0 +1,14 @@ +export interface ById { + [id: string]: T +} + +export type OneToMany = ById + +export interface OrderedById { + byId: ById + allIds: string[] +} + +export interface PaginatedList { + [offset: number]: string[] +} diff --git a/app/models/trackplayer.ts b/app/models/trackplayer.ts new file mode 100644 index 0000000..5a68e0b --- /dev/null +++ b/app/models/trackplayer.ts @@ -0,0 +1,18 @@ +import { Track } from 'react-native-track-player' + +export type TrackExt = Track & { + id: string + coverArt?: string + artistId?: string + albumId?: string + track?: number + discNumber?: number +} + +export type Progress = { + position: number + duration: number + buffered: number +} + +export type QueueContextType = 'album' | 'playlist' | 'song' | 'artist' diff --git a/app/navigation/BottomTabBar.tsx b/app/navigation/BottomTabBar.tsx index e867ea2..54b4c8a 100644 --- a/app/navigation/BottomTabBar.tsx +++ b/app/navigation/BottomTabBar.tsx @@ -1,7 +1,6 @@ import NowPlayingBar from '@app/components/NowPlayingBar' import PressableOpacity from '@app/components/PressableOpacity' -import { selectSettings } from '@app/state/settings' -import { useStore } from '@app/state/store' +import { useFirstRun } from '@app/hooks/settings' import colors from '@app/styles/colors' import dimensions from '@app/styles/dimensions' import font from '@app/styles/font' @@ -10,7 +9,7 @@ import { BottomTabBarProps } from '@react-navigation/bottom-tabs' import { BottomTabNavigationEventMap } from '@react-navigation/bottom-tabs/lib/typescript/src/types' import { NavigationHelpers, ParamListBase } from '@react-navigation/native' import React from 'react' -import { StyleSheet, Text, View, Image, ImageStyle } from 'react-native' +import { Image, ImageStyle, StyleSheet, Text, View } from 'react-native' const BottomTabButton = React.memo<{ routeKey: string @@ -20,7 +19,7 @@ const BottomTabButton = React.memo<{ icon: OutlineFillIcon navigation: NavigationHelpers }>(({ routeKey, label, name, isFocused, icon, navigation }) => { - const firstRun = useStore(selectSettings.firstRun) + const firstRun = useFirstRun() const disabled = firstRun && name !== 'settings' diff --git a/app/navigation/BottomTabNavigator.tsx b/app/navigation/BottomTabNavigator.tsx index 86adf96..1419dcf 100644 --- a/app/navigation/BottomTabNavigator.tsx +++ b/app/navigation/BottomTabNavigator.tsx @@ -1,3 +1,4 @@ +import { useFirstRun } from '@app/hooks/settings' import BottomTabBar from '@app/navigation/BottomTabBar' import LibraryTopTabNavigator from '@app/navigation/LibraryTopTabNavigator' import ArtistView from '@app/screens/ArtistView' @@ -8,8 +9,6 @@ import ServerView from '@app/screens/ServerView' import SettingsView from '@app/screens/Settings' import SongListView from '@app/screens/SongListView' import WebViewScreen from '@app/screens/WebViewScreen' -import { selectSettings } from '@app/state/settings' -import { useStore } from '@app/state/store' import colors from '@app/styles/colors' import font from '@app/styles/font' import { BottomTabNavigationProp, createBottomTabNavigator } from '@react-navigation/bottom-tabs' @@ -177,7 +176,7 @@ const SettingsTab = () => { const Tab = createBottomTabNavigator() const BottomTabNavigator = () => { - const firstRun = useStore(selectSettings.firstRun) + const firstRun = useFirstRun() return ( diff --git a/app/playbackservice.ts b/app/playbackservice.ts index fa1b1bb..c926944 100644 --- a/app/playbackservice.ts +++ b/app/playbackservice.ts @@ -1,4 +1,4 @@ -import { getCurrentTrack, getPlayerState, TrackExt, trackPlayerCommands } from '@app/state/trackplayer' +import { getCurrentTrack, getPlayerState, trackPlayerCommands } from '@app/state/trackplayer' import TrackPlayer, { Event, State } from 'react-native-track-player' import { useStore } from './state/store' import { unstable_batchedUpdates } from 'react-native' @@ -44,13 +44,12 @@ let serviceCreated = false const createService = async () => { useStore.subscribe( - (currentTrack?: TrackExt) => { - if (currentTrack) { - useStore.getState().scrobbleTrack(currentTrack.id) + state => state.currentTrack?.id, + (currentTrackId?: string) => { + if (currentTrackId) { + useStore.getState().scrobbleTrack(currentTrackId) } }, - state => state.currentTrack, - (prev, next) => prev?.id === next?.id, ) NetInfo.fetch().then(state => { diff --git a/app/screens/ArtistView.tsx b/app/screens/ArtistView.tsx index 0caf18c..42059c8 100644 --- a/app/screens/ArtistView.tsx +++ b/app/screens/ArtistView.tsx @@ -5,16 +5,15 @@ import GradientScrollView from '@app/components/GradientScrollView' import Header from '@app/components/Header' import HeaderBar from '@app/components/HeaderBar' import ListItem from '@app/components/ListItem' -import { useArtistInfo } from '@app/hooks/music' -import { Album, Song } from '@app/models/music' -import { useStore } from '@app/state/store' -import { selectTrackPlayer } from '@app/state/trackplayer' +import { Album, Song } from '@app/models/library' +import { useStore, useStoreDeep } from '@app/state/store' import colors from '@app/styles/colors' import dimensions from '@app/styles/dimensions' import font from '@app/styles/font' +import { mapById } from '@app/util/state' import { useLayout } from '@react-native-community/hooks' import { useNavigation } from '@react-navigation/native' -import React from 'react' +import React, { useCallback, useEffect } from 'react' import { ActivityIndicator, StyleSheet, Text, View } from 'react-native' import { useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated' @@ -47,12 +46,12 @@ const TopSongs = React.memo<{ name: string artistId: string }>(({ songs, name, artistId }) => { - const setQueue = useStore(selectTrackPlayer.setQueue) + const setQueue = useStore(store => store.setQueue) return ( <>
Top Songs
- {songs.map((s, i) => ( + {songs.slice(0, 5).map((s, i) => ( (({ albums }) => { + const albumsLayout = useLayout() + + const sortedAlbums = [...albums] + .sort((a, b) => a.name.localeCompare(b.name)) + .sort((a, b) => (b.year || 0) - (a.year || 0)) + + const albumSize = albumsLayout.width / 2 - styles.contentContainer.paddingHorizontal / 2 + + return ( + <> +
Albums
+ + {sortedAlbums.map(a => ( + + ))} + + + ) +}) + const ArtistViewFallback = React.memo(() => ( @@ -74,8 +96,19 @@ const ArtistViewFallback = React.memo(() => ( )) const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) => { - const artist = useArtistInfo(id) - const albumsLayout = useLayout() + const artist = useStoreDeep(useCallback(store => store.library.artists[id], [id])) + const topSongIds = useStoreDeep(useCallback(store => store.library.artistNameTopSongs[artist?.name], [artist?.name])) + const topSongs = useStoreDeep( + useCallback(store => (topSongIds ? mapById(store.library.songs, topSongIds) : undefined), [topSongIds]), + ) + const albumIds = useStoreDeep(useCallback(store => store.library.artistAlbums[id], [id])) + const albums = useStoreDeep( + useCallback(store => (albumIds ? mapById(store.library.albums, albumIds) : undefined), [albumIds]), + ) + + const fetchArtist = useStore(store => store.fetchArtist) + const fetchTopSongs = useStore(store => store.fetchArtistTopSongs) + const coverLayout = useLayout() const headerOpacity = useSharedValue(0) @@ -91,16 +124,22 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) => } }) - const albumSize = albumsLayout.width / 2 - styles.contentContainer.paddingHorizontal / 2 + useEffect(() => { + if (!artist || !albumIds) { + fetchArtist(id) + } + }, [artist, albumIds, fetchArtist, id]) + + useEffect(() => { + if (artist && !topSongIds) { + fetchTopSongs(artist.name) + } + }, [artist, fetchTopSongs, topSongIds]) if (!artist) { return } - const _albums = [...artist.albums] - .sort((a, b) => a.name.localeCompare(b.name)) - .sort((a, b) => (b.year || 0) - (a.year || 0)) - return ( @@ -115,17 +154,18 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) => {artist.name} - {artist.topSongs.length > 0 ? ( - + {topSongs && albums ? ( + topSongs.length > 0 ? ( + <> + + + + ) : ( + + ) ) : ( - <> + )} -
Albums
- - {_albums.map(a => ( - - ))} -
@@ -200,6 +240,9 @@ const styles = StyleSheet.create({ fontFamily: font.regular, textAlign: 'center', }, + loading: { + marginTop: 30, + }, }) export default ArtistView diff --git a/app/screens/Home.tsx b/app/screens/Home.tsx index a21b91c..42ecd07 100644 --- a/app/screens/Home.tsx +++ b/app/screens/Home.tsx @@ -3,17 +3,17 @@ import CoverArt from '@app/components/CoverArt' import GradientScrollView from '@app/components/GradientScrollView' import Header from '@app/components/Header' import NothingHere from '@app/components/NothingHere' -import { useActiveServerRefresh } from '@app/hooks/server' -import { AlbumListItem } from '@app/models/music' -import { selectMusic } from '@app/state/music' -import { selectSettings } from '@app/state/settings' -import { useStore } from '@app/state/store' +import { useActiveServerRefresh } from '@app/hooks/settings' +import { useStore, useStoreDeep } from '@app/state/store' import colors from '@app/styles/colors' import font from '@app/styles/font' -import { GetAlbumListType } from '@app/subsonic/params' +import { GetAlbumList2TypeBase, GetAlbumListType } from '@app/subsonic/params' import { useNavigation } from '@react-navigation/native' -import React, { useCallback } from 'react' +import equal from 'fast-deep-equal/es6/react' +import produce from 'immer' +import React, { useCallback, useState } from 'react' import { RefreshControl, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native' +import create, { StateSelector } from 'zustand' const titles: { [key in GetAlbumListType]?: string } = { recent: 'Recently Played', @@ -23,9 +23,14 @@ const titles: { [key in GetAlbumListType]?: string } = { } const AlbumItem = React.memo<{ - album: AlbumListItem -}>(({ album }) => { + id: string +}>(({ id }) => { const navigation = useNavigation() + const album = useStoreDeep(useCallback(store => store.library.albums[id], [id])) + + if (!album) { + return <> + } return ( (({ name, data }) => { + type: string +}>(({ type }) => { + const list = useHomeStoreDeep(useCallback(store => store.lists[type] || [], [type])) + const Albums = () => ( - {data.map(album => ( - + {list.map(id => ( + ))} ) @@ -73,24 +79,57 @@ const Category = React.memo<{ return ( -
{name}
- {data.length > 0 ? : } +
{titles[type as GetAlbumListType] || ''}
+ {list.length > 0 ? : }
) }) +interface HomeState { + lists: { [type: string]: string[] } + setList: (type: string, list: string[]) => void +} + +const useHomeStore = create(set => ({ + lists: {}, + + setList: (type, list) => { + set( + produce(state => { + state.lists[type] = list + }), + ) + }, +})) + +function useHomeStoreDeep(stateSelector: StateSelector) { + return useHomeStore(stateSelector, equal) +} + const Home = () => { - const types = useStore(selectSettings.homeLists) - const lists = useStore(selectMusic.homeLists) - const updating = useStore(selectMusic.homeListsUpdating) - const update = useStore(selectMusic.fetchHomeLists) - const clear = useStore(selectMusic.clearHomeLists) + const [refreshing, setRefreshing] = useState(false) + const types = useStoreDeep(store => store.settings.screens.home.listTypes) + const fetchAlbumList = useStore(store => store.fetchAlbumList) + const setList = useHomeStore(store => store.setList) + + const refresh = useCallback(async () => { + setRefreshing(true) + + await Promise.all( + types.map(async type => { + const ids = await fetchAlbumList({ type: type as GetAlbumList2TypeBase, size: 20, offset: 0 }) + setList(type, ids) + }), + ) + + setRefreshing(false) + }, [fetchAlbumList, setList, types]) useActiveServerRefresh( useCallback(() => { - clear() - update() - }, [clear, update]), + types.forEach(type => setList(type, [])) + refresh() + }, [refresh, setList, types]), ) return ( @@ -99,15 +138,15 @@ const Home = () => { contentContainerStyle={styles.scrollContentContainer} refreshControl={ }> {types.map(type => ( - + ))} diff --git a/app/screens/LibraryAlbums.tsx b/app/screens/LibraryAlbums.tsx index 351a40d..42abb5e 100644 --- a/app/screens/LibraryAlbums.tsx +++ b/app/screens/LibraryAlbums.tsx @@ -3,24 +3,26 @@ import CoverArt from '@app/components/CoverArt' import FilterButton, { OptionData } from '@app/components/FilterButton' import GradientFlatList from '@app/components/GradientFlatList' import { useFetchPaginatedList } from '@app/hooks/list' -import { Album, AlbumListItem } from '@app/models/music' -import { selectMusic } from '@app/state/music' -import { selectSettings } from '@app/state/settings' -import { useStore } from '@app/state/store' +import { useStore, useStoreDeep } from '@app/state/store' import colors from '@app/styles/colors' import font from '@app/styles/font' -import { GetAlbumList2Type } from '@app/subsonic/params' +import { GetAlbumList2Params, GetAlbumList2Type } from '@app/subsonic/params' import { useNavigation } from '@react-navigation/native' -import React, { useEffect } from 'react' +import React, { useCallback } from 'react' import { StyleSheet, Text, useWindowDimensions, View } from 'react-native' const AlbumItem = React.memo<{ - album: AlbumListItem + id: string size: number height: number -}>(({ album, size, height }) => { +}>(({ id, size, height }) => { + const album = useStoreDeep(useCallback(store => store.library.albums[id], [id])) const navigation = useNavigation() + if (!album) { + return <> + } + return ( = ({ item }) => + item: { id: string; size: number; height: number } +}> = ({ item }) => const filterOptions: OptionData[] = [ { text: 'By Name', value: 'alphabeticalByName' }, @@ -57,24 +59,57 @@ const filterOptions: OptionData[] = [ ] const AlbumsList = () => { - const fetchAlbums = useStore(selectMusic.fetchAlbums) - const { list, refreshing, refresh, reset, fetchNextPage } = useFetchPaginatedList(fetchAlbums, 300) - const filter = useStore(selectSettings.libraryAlbumFilter) - const setFilter = useStore(selectSettings.setLibraryAlbumFilter) + const filter = useStoreDeep(store => store.settings.screens.library.albumsFilter) + const setFilter = useStore(store => store.setLibraryAlbumFilter) + + const fetchAlbumList = useStore(store => store.fetchAlbumList) + const fetchPage = useCallback( + (size: number, offset: number) => { + let params: GetAlbumList2Params + switch (filter.type) { + case 'byYear': + params = { + size, + offset, + type: filter.type, + fromYear: filter.fromYear, + toYear: filter.toYear, + } + break + case 'byGenre': + params = { + size, + offset, + type: filter.type, + genre: filter.genre, + } + break + default: + params = { + size, + offset, + type: filter.type, + } + break + } + return fetchAlbumList(params) + }, + [fetchAlbumList, filter.fromYear, filter.genre, filter.toYear, filter.type], + ) + + const { list, refreshing, refresh, fetchNextPage } = useFetchPaginatedList(fetchPage, 300) const layout = useWindowDimensions() const size = layout.width / 3 - styles.itemWrapper.marginHorizontal * 2 const height = size + 36 - useEffect(() => reset(), [reset, filter]) - return ( ({ album, size, height }))} + data={list.map(id => ({ id, size, height }))} renderItem={AlbumListRenderItem} - keyExtractor={item => item.album.id} + keyExtractor={item => item.id} numColumns={3} removeClippedSubviews={true} refreshing={refreshing} diff --git a/app/screens/LibraryArtists.tsx b/app/screens/LibraryArtists.tsx index 9f4f1bb..c7fc3bb 100644 --- a/app/screens/LibraryArtists.tsx +++ b/app/screens/LibraryArtists.tsx @@ -1,12 +1,10 @@ import FilterButton, { OptionData } from '@app/components/FilterButton' import GradientFlatList from '@app/components/GradientFlatList' import ListItem from '@app/components/ListItem' -import { useFetchList } from '@app/hooks/list' -import { Artist } from '@app/models/music' +import { useFetchList2 } from '@app/hooks/list' +import { Artist } from '@app/models/library' import { ArtistFilterType } from '@app/models/settings' -import { selectMusic } from '@app/state/music' -import { selectSettings } from '@app/state/settings' -import { useStore } from '@app/state/store' +import { useStore, useStoreDeep } from '@app/state/store' import React, { useEffect, useState } from 'react' import { StyleSheet, View } from 'react-native' @@ -21,13 +19,17 @@ const filterOptions: OptionData[] = [ ] const ArtistsList = () => { - const fetchArtists = useStore(selectMusic.fetchArtists) - const { list, refreshing, refresh } = useFetchList(fetchArtists) - const filter = useStore(selectSettings.libraryArtistFilter) - const setFilter = useStore(selectSettings.setLibraryArtistFiler) + const fetchArtists = useStore(store => store.fetchArtists) + const { refreshing, refresh } = useFetchList2(fetchArtists) + const artists = useStoreDeep(store => store.library.artists) + const artistOrder = useStoreDeep(store => store.library.artistOrder) + + const filter = useStoreDeep(store => store.settings.screens.library.artistsFilter) + const setFilter = useStore(store => store.setLibraryArtistFiler) const [sortedList, setSortedList] = useState([]) useEffect(() => { + const list = Object.values(artists) switch (filter.type) { case 'random': setSortedList([...list].sort(() => Math.random() - 0.5)) @@ -35,11 +37,14 @@ const ArtistsList = () => { case 'starred': setSortedList([...list].filter(a => a.starred)) break + case 'alphabeticalByName': + setSortedList(artistOrder.map(id => artists[id])) + break default: setSortedList([...list]) break } - }, [list, filter]) + }, [filter.type, artists, artistOrder]) return ( diff --git a/app/screens/LibraryPlaylists.tsx b/app/screens/LibraryPlaylists.tsx index 9c3fb00..f1c47c2 100644 --- a/app/screens/LibraryPlaylists.tsx +++ b/app/screens/LibraryPlaylists.tsx @@ -1,23 +1,23 @@ import GradientFlatList from '@app/components/GradientFlatList' import ListItem from '@app/components/ListItem' -import { useFetchList } from '@app/hooks/list' -import { PlaylistListItem } from '@app/models/music' -import { selectMusic } from '@app/state/music' -import { useStore } from '@app/state/store' +import { useFetchList2 } from '@app/hooks/list' +import { Playlist } from '@app/models/library' +import { useStore, useStoreDeep } from '@app/state/store' import React from 'react' import { StyleSheet } from 'react-native' -const PlaylistRenderItem: React.FC<{ item: PlaylistListItem }> = ({ item }) => ( +const PlaylistRenderItem: React.FC<{ item: Playlist }> = ({ item }) => ( ) const PlaylistsList = () => { - const fetchPlaylists = useStore(selectMusic.fetchPlaylists) - const { list, refreshing, refresh } = useFetchList(fetchPlaylists) + const fetchPlaylists = useStore(store => store.fetchPlaylists) + const { refreshing, refresh } = useFetchList2(fetchPlaylists) + const playlists = useStoreDeep(store => store.library.playlists) return ( item.id} onRefresh={refresh} diff --git a/app/screens/NowPlayingQueue.tsx b/app/screens/NowPlayingQueue.tsx index 247f0a7..aa7964a 100644 --- a/app/screens/NowPlayingQueue.tsx +++ b/app/screens/NowPlayingQueue.tsx @@ -2,10 +2,8 @@ import GradientFlatList from '@app/components/GradientFlatList' import ListItem from '@app/components/ListItem' import NowPlayingBar from '@app/components/NowPlayingBar' import { useSkipTo } from '@app/hooks/trackplayer' -import { Song } from '@app/models/music' -import { useStore } from '@app/state/store' -import { selectTrackPlayer } from '@app/state/trackplayer' -import { selectTrackPlayerMap } from '@app/state/trackplayermap' +import { Song } from '@app/models/library' +import { useStore, useStoreDeep } from '@app/state/store' import React from 'react' import { StyleSheet, View } from 'react-native' @@ -27,8 +25,8 @@ const SongRenderItem: React.FC<{ ) const NowPlayingQueue = React.memo<{}>(() => { - const queue = useStore(selectTrackPlayer.queue) - const mapTrackExtToSong = useStore(selectTrackPlayerMap.mapTrackExtToSong) + const queue = useStoreDeep(store => store.queue) + const mapTrackExtToSong = useStore(store => store.mapTrackExtToSong) const skipTo = useSkipTo() return ( diff --git a/app/screens/NowPlayingView.tsx b/app/screens/NowPlayingView.tsx index 696a713..fb8f619 100644 --- a/app/screens/NowPlayingView.tsx +++ b/app/screens/NowPlayingView.tsx @@ -2,13 +2,10 @@ import CoverArt from '@app/components/CoverArt' import HeaderBar from '@app/components/HeaderBar' import ImageGradientBackground from '@app/components/ImageGradientBackground' import PressableOpacity from '@app/components/PressableOpacity' -import Star from '@app/components/Star' -import { useStarred } from '@app/hooks/music' +import { PressableStar } from '@app/components/Star' import { useNext, usePause, usePlay, usePrevious, useSeekTo } from '@app/hooks/trackplayer' -import { selectMusic } from '@app/state/music' -import { useStore } from '@app/state/store' -import { QueueContextType, selectTrackPlayer, TrackExt } from '@app/state/trackplayer' -import { selectTrackPlayerMap } from '@app/state/trackplayermap' +import { QueueContextType, TrackExt } from '@app/models/trackplayer' +import { useStore, useStoreDeep } from '@app/state/store' import colors from '@app/styles/colors' import font from '@app/styles/font' import formatDuration from '@app/util/formatDuration' @@ -41,9 +38,9 @@ function getContextName(type?: QueueContextType) { const NowPlayingHeader = React.memo<{ track?: TrackExt }>(({ track }) => { - const queueName = useStore(selectTrackPlayer.queueName) - const queueContextType = useStore(selectTrackPlayer.queueContextType) - const mapTrackExtToSong = useStore(selectTrackPlayerMap.mapTrackExtToSong) + const queueName = useStore(store => store.queueName) + const queueContextType = useStore(store => store.queueContextType) + const mapTrackExtToSong = useStore(store => store.mapTrackExtToSong) if (!track) { return <> @@ -94,11 +91,11 @@ const headerStyles = StyleSheet.create({ }) const SongCoverArt = () => { - const track = useStore(selectTrackPlayer.currentTrack) + const coverArt = useStore(store => store.currentTrack?.coverArt) return ( - + ) } @@ -117,26 +114,22 @@ const coverArtStyles = StyleSheet.create({ }) const SongInfo = () => { - const track = useStore(selectTrackPlayer.currentTrack) - const id = track?.id || '-1' - const type = 'song' - const starred = useStarred(id, type) - const setStarred = useStore(selectMusic.starItem) + const id = useStore(store => store.currentTrack?.id) + const artist = useStore(store => store.currentTrack?.artist) + const title = useStore(store => store.currentTrack?.title) return ( - {track?.title} + {title} - {track?.artist} + {artist} - setStarred(id, type, starred)}> - - + ) @@ -170,7 +163,8 @@ const infoStyles = StyleSheet.create({ }) const SeekBar = () => { - const { position, duration } = useStore(selectTrackPlayer.progress) + const position = useStore(store => store.progress.position) + const duration = useStore(store => store.progress.duration) const seekTo = useSeekTo() const [value, setValue] = useState(0) const [sliding, setSliding] = useState(false) @@ -262,15 +256,15 @@ const seekStyles = StyleSheet.create({ }) const PlayerControls = () => { - const state = useStore(selectTrackPlayer.playerState) + const state = useStore(store => store.playerState) const play = usePlay() const pause = usePause() const next = useNext() const previous = usePrevious() - const shuffled = useStore(selectTrackPlayer.shuffled) - const toggleShuffle = useStore(selectTrackPlayer.toggleShuffle) - const repeatMode = useStore(selectTrackPlayer.repeatMode) - const toggleRepeat = useStore(selectTrackPlayer.toggleRepeatMode) + const shuffled = useStore(store => !!store.shuffleOrder) + const toggleShuffle = useStore(store => store.toggleShuffle) + const repeatMode = useStore(store => store.repeatMode) + const toggleRepeat = useStore(store => store.toggleRepeatMode) const navigation = useNavigation() let playPauseIcon: string @@ -392,7 +386,7 @@ type RootStackParamList = { type NowPlayingProps = NativeStackScreenProps const NowPlayingView: React.FC = ({ navigation }) => { - const track = useStore(selectTrackPlayer.currentTrack) + const track = useStoreDeep(store => store.currentTrack) useEffect(() => { if (!track) { @@ -404,7 +398,7 @@ const NowPlayingView: React.FC = ({ navigation }) => { return ( - + diff --git a/app/screens/Search.tsx b/app/screens/Search.tsx index ab07b0e..fc9cad1 100644 --- a/app/screens/Search.tsx +++ b/app/screens/Search.tsx @@ -4,13 +4,12 @@ import Header from '@app/components/Header' import ListItem from '@app/components/ListItem' import NothingHere from '@app/components/NothingHere' import TextInput from '@app/components/TextInput' -import { useActiveServerRefresh } from '@app/hooks/server' -import { ListableItem, SearchResults, Song } from '@app/models/music' -import { selectMusic } from '@app/state/music' -import { useStore } from '@app/state/store' -import { selectTrackPlayer } from '@app/state/trackplayer' +import { useActiveServerRefresh } from '@app/hooks/settings' +import { Song, Album, Artist, SearchResults } from '@app/models/library' +import { useStore, useStoreDeep } from '@app/state/store' import colors from '@app/styles/colors' import font from '@app/styles/font' +import { mapById } from '@app/util/state' import { useFocusEffect, useNavigation } from '@react-navigation/native' import debounce from 'lodash.debounce' import React, { useCallback, useMemo, useRef, useState } from 'react' @@ -25,7 +24,7 @@ import { } from 'react-native' const SongItem = React.memo<{ item: Song }>(({ item }) => { - const setQueue = useStore(selectTrackPlayer.setQueue) + const setQueue = useStore(store => store.setQueue) return ( (({ item }) => { const ResultsCategory = React.memo<{ name: string query: string - items: ListableItem[] -}>(({ name, query, items }) => { + ids: string[] + type: 'artist' | 'album' | 'song' +}>(({ name, query, type, ids }) => { + const items: (Album | Artist | Song)[] = useStoreDeep( + useCallback( + store => { + switch (type) { + case 'album': + return mapById(store.library.albums, ids) + case 'artist': + return mapById(store.library.artists, ids) + case 'song': + return mapById(store.library.songs, ids) + default: + return [] + } + }, + [ids, type], + ), + ) + const navigation = useNavigation() if (items.length === 0) { @@ -54,8 +72,8 @@ const ResultsCategory = React.memo<{ <>
{name}
{items.map(a => - a.itemType === 'song' ? ( - + type === 'song' ? ( + ) : ( ), @@ -78,15 +96,15 @@ const Results = React.memo<{ }>(({ results, query }) => { return ( <> - - - + + + ) }) const Search = () => { - const fetchSearchResults = useStore(selectMusic.fetchSearchResults) + const fetchSearchResults = useStore(store => store.fetchSearchResults) const [results, setResults] = useState({ artists: [], albums: [], songs: [] }) const [refreshing, setRefreshing] = useState(false) const [text, setText] = useState('') @@ -118,7 +136,7 @@ const Search = () => { () => debounce(async (query: string) => { setRefreshing(true) - setResults(await fetchSearchResults(query)) + setResults(await fetchSearchResults({ query, albumCount: 5, artistCount: 5, songCount: 5 })) setRefreshing(false) }, 400), [fetchSearchResults], diff --git a/app/screens/SearchResultsView.tsx b/app/screens/SearchResultsView.tsx index da53ff4..0354045 100644 --- a/app/screens/SearchResultsView.tsx +++ b/app/screens/SearchResultsView.tsx @@ -1,18 +1,18 @@ import GradientFlatList from '@app/components/GradientFlatList' import ListItem from '@app/components/ListItem' import { useFetchPaginatedList } from '@app/hooks/list' -import { AlbumListItem, Artist, Song } from '@app/models/music' -import { selectMusic } from '@app/state/music' -import { useStore } from '@app/state/store' -import { selectTrackPlayer } from '@app/state/trackplayer' +import { Album, Artist, Song } from '@app/models/library' +import { useStore, useStoreDeep } from '@app/state/store' +import { Search3Params } from '@app/subsonic/params' +import { mapById } from '@app/util/state' import { useNavigation } from '@react-navigation/native' import React, { useCallback, useEffect } from 'react' import { StyleSheet } from 'react-native' -type SearchListItemType = AlbumListItem | Song | Artist +type SearchListItemType = Album | Song | Artist const ResultsListItem: React.FC<{ item: SearchListItemType }> = ({ item }) => { - const setQueue = useStore(selectTrackPlayer.setQueue) + const setQueue = useStore(store => store.setQueue) let onPress if (item.itemType === 'song') { @@ -40,27 +40,62 @@ const SearchResultsView: React.FC<{ type: 'album' | 'artist' | 'song' }> = ({ query, type }) => { const navigation = useNavigation() - const fetchSearchResults = useStore(selectMusic.fetchSearchResults) - const { list, refreshing, refresh, fetchNextPage } = useFetchPaginatedList( + const fetchSearchResults = useStore(store => store.fetchSearchResults) + const { list, refreshing, refresh, fetchNextPage } = useFetchPaginatedList( useCallback( - (size, offset) => - fetchSearchResults(query, type, size, offset).then(results => { - switch (type) { - case 'album': - return results.albums - case 'artist': - return results.artists - case 'song': - return results.songs - default: - return [] - } - }), + async (size, offset) => { + const params: Search3Params = { query } + if (type === 'album') { + params.albumCount = size + params.albumOffset = offset + } else if (type === 'artist') { + params.artistCount = size + params.artistOffset = offset + } else if (type === 'song') { + params.songCount = size + params.songOffset = offset + } else { + params.albumCount = 5 + params.artistCount = 5 + params.songCount = 5 + } + + const results = await fetchSearchResults(params) + + switch (type) { + case 'album': + return results.albums + case 'artist': + return results.artists + case 'song': + return results.songs + default: + return [] + } + }, [fetchSearchResults, query, type], ), 100, ) + const items: SearchListItemType[] = useStoreDeep( + useCallback( + store => { + switch (type) { + case 'album': + return mapById(store.library.albums, list) + case 'artist': + return mapById(store.library.artists, list) + case 'song': + return mapById(store.library.songs, list) + default: + return [] + } + }, + [list, type], + ), + ) + useEffect(() => { navigation.setOptions({ title: `Search: "${query}"`, @@ -70,7 +105,7 @@ const SearchResultsView: React.FC<{ return ( i.toString()} onRefresh={refresh} diff --git a/app/screens/ServerView.tsx b/app/screens/ServerView.tsx index c187b6d..19713e9 100644 --- a/app/screens/ServerView.tsx +++ b/app/screens/ServerView.tsx @@ -1,8 +1,7 @@ import Button from '@app/components/Button' import GradientScrollView from '@app/components/GradientScrollView' import { Server } from '@app/models/settings' -import { selectSettings } from '@app/state/settings' -import { useStore } from '@app/state/store' +import { useStore, useStoreDeep } from '@app/state/store' import colors from '@app/styles/colors' import font from '@app/styles/font' import toast from '@app/util/toast' @@ -19,13 +18,13 @@ const ServerView: React.FC<{ id?: string }> = ({ id }) => { const navigation = useNavigation() - const activeServer = useStore(selectSettings.activeServer) - const servers = useStore(selectSettings.servers) - const addServer = useStore(selectSettings.addServer) - const updateServer = useStore(selectSettings.updateServer) - const removeServer = useStore(selectSettings.removeServer) - const server = id ? servers.find(s => s.id === id) : undefined - const pingServer = useStore(selectSettings.pingServer) + const activeServerId = useStore(store => store.settings.activeServerId) + const servers = useStoreDeep(store => store.settings.servers) + const addServer = useStore(store => store.addServer) + const updateServer = useStore(store => store.updateServer) + const removeServer = useStore(store => store.removeServer) + const server = id ? servers[id] : undefined + const pingServer = useStore(store => store.pingServer) const [address, setAddress] = useState(server?.address || '') const [username, setUsername] = useState(server?.username || '') @@ -44,8 +43,8 @@ const ServerView: React.FC<{ }, [address, username, password]) const canRemove = useCallback(() => { - return id && servers.length > 1 && activeServer?.id !== id - }, [id, servers, activeServer]) + return id && Object.keys(servers).length > 1 && activeServerId !== id + }, [id, servers, activeServerId]) const exit = useCallback(() => { if (navigation.canGoBack()) { diff --git a/app/screens/Settings.tsx b/app/screens/Settings.tsx index b2c7b62..5990a6b 100644 --- a/app/screens/Settings.tsx +++ b/app/screens/Settings.tsx @@ -5,11 +5,9 @@ import PressableOpacity from '@app/components/PressableOpacity' import SettingsItem from '@app/components/SettingsItem' import SettingsSwitch from '@app/components/SettingsSwitch' import TextInput from '@app/components/TextInput' -import { useSwitchActiveServer } from '@app/hooks/server' +import { useSwitchActiveServer } from '@app/hooks/settings' import { Server } from '@app/models/settings' -import { selectCache } from '@app/state/cache' -import { selectSettings } from '@app/state/settings' -import { useStore } from '@app/state/store' +import { useStore, useStoreDeep } from '@app/state/store' import colors from '@app/styles/colors' import font from '@app/styles/font' import { useNavigation } from '@react-navigation/core' @@ -22,7 +20,7 @@ import { version } from '../../package.json' const ServerItem = React.memo<{ server: Server }>(({ server }) => { - const activeServer = useStore(selectSettings.activeServer) + const activeServerId = useStore(store => store.settings.activeServerId) const switchActiveServer = useSwitchActiveServer() const navigation = useNavigation() @@ -36,7 +34,7 @@ const ServerItem = React.memo<{ subtitle={server.username} onPress={() => navigation.navigate('server', { id: server.id })}> - {activeServer && activeServer.id === server.id ? ( + {activeServerId === server.id ? ( ) : ( @@ -193,27 +191,22 @@ function secondsUnit(seconds: string): string { } const SettingsContent = React.memo(() => { - const servers = useStore(selectSettings.servers) - const scrobble = useStore(selectSettings.scrobble) - const setScrobble = useStore(selectSettings.setScrobble) + const servers = useStoreDeep(store => store.settings.servers) + const scrobble = useStore(store => store.settings.scrobble) + const setScrobble = useStore(store => store.setScrobble) - // doesn't seem to ever be a case where we want this off - // will remove later if there isn't a use case for disabling - // const estimateContentLength = useStore(selectSettings.estimateContentLength) - // const setEstimateContentLength = useStore(selectSettings.setEstimateContentLength) + const maxBitrateWifi = useStore(store => store.settings.maxBitrateWifi) + const setMaxBitrateWifi = useStore(store => store.setMaxBitrateWifi) - const maxBitrateWifi = useStore(selectSettings.maxBitrateWifi) - const setMaxBitrateWifi = useStore(selectSettings.setMaxBitrateWifi) + const maxBitrateMobile = useStore(store => store.settings.maxBitrateMobile) + const setMaxBitrateMobile = useStore(store => store.setMaxBitrateMobile) - const maxBitrateMobile = useStore(selectSettings.maxBitrateMobile) - const setMaxBitrateMobile = useStore(selectSettings.setMaxBitrateMobile) + const minBuffer = useStore(store => store.settings.minBuffer) + const setMinBuffer = useStore(store => store.setMinBuffer) + const maxBuffer = useStore(store => store.settings.maxBuffer) + const setMaxBuffer = useStore(store => store.setMaxBuffer) - const minBuffer = useStore(selectSettings.minBuffer) - const setMinBuffer = useStore(selectSettings.setMinBuffer) - const maxBuffer = useStore(selectSettings.maxBuffer) - const setMaxBuffer = useStore(selectSettings.setMaxBuffer) - - const clearImageCache = useStore(selectCache.clearImageCache) + const clearImageCache = useStore(store => store.clearImageCache) const [clearing, setClearing] = useState(false) const navigation = useNavigation() @@ -239,7 +232,7 @@ const SettingsContent = React.memo(() => { return (
Servers
- {servers.map(s => ( + {Object.values(servers).map(s => ( ))}