Makussu/subtracks
1
0
Fork 0
mirror of https://github.com/austinried/subtracks.git synced 2025-12-27 00:59:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

Library store refactor (#76)

Browse Source 
* 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
This commit is contained in:
austinried 2022-03-28 13:30:57 +09:00 committed by GitHub
parent 09ca4974c5
commit 081251061d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
57 changed files with 2136 additions and 1843 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"typescript.tsdk": "node_modules/typescript/lib"
}

386
android/app/src/main/assets/licenses.html vendored
View File

@ -573,7 +573,7 @@
<!-- https://opensource.org/licenses/Apache-2.0 -->
<h1 class="title">annotation</h1>
<p class="notice">Copyright &copy; Original Author. All rights reserved.</p>
<p><a href="http://developer.android.com/tools/extras/support-library.html">http://developer.android.com/tools/extras/support-library.html</a></p>
<p><a href="https://developer.android.com/jetpack/androidx/releases/annotation#1.2.0">https://developer.android.com/jetpack/androidx/releases/annotation#1.2.0</a></p>
<input type="checkbox"><label></label>
<div class="license">
<h2>
@ -3039,6 +3039,253 @@
<pre>Copyright [yyyy] [name of copyright owner]&#x000A;&#x000A;Licensed under the Apache License, Version 2.0 (the "License");&#x000A;you may not use this file except in compliance with the License.&#x000A;You may obtain a copy of the License at&#x000A;&#x000A; http://www.apache.org/licenses/LICENSE-2.0&#x000A;&#x000A;Unless required by applicable law or agreed to in writing, software&#x000A;distributed under the License is distributed on an "AS IS" BASIS,&#x000A;WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.&#x000A;See the License for the specific language governing permissions and&#x000A;limitations under the License.</pre>
</div>
</div>
<div class="library">
<!-- https://opensource.org/licenses/Apache-2.0 -->
<h1 class="title">core-ktx</h1>
<p class="notice">Copyright &copy; Original Author. All rights reserved.</p>
<p><a href="https://developer.android.com/jetpack/androidx/releases/core#1.6.0">https://developer.android.com/jetpack/androidx/releases/core#1.6.0</a></p>
<input type="checkbox"><label></label>
<div class="license">
<h2>
Apache License
<br/>
Version 2.0, January 2004
<br/>
http://www.apache.org/licenses/
</h2>
<p>TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION</p>
<h2>1. Definitions.</h2>
<p>
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
</p>
<p>
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
</p>
<p>
"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.
</p>
<p>
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
</p>
<p>
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
</p>
<p>
"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.
</p>
<p>
"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).
</p>
<p>
"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.
</p>
<p>
"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."
</p>
<p>
"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.
</p>
<div class="block">
<h2 class="inline">2. Grant of Copyright License.</h2>
<p class="inline">
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.
</p>
</div>
<div class="block">
<h2 class="inline">3. Grant of Patent License.</h2>
<p class="inline">
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.
</p>
</div>
<div class="block">
<h2 class="inline">4. Redistribution.</h2>
<p class="inline">
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:
</p>
</div>
<ul class="low-alpha">
<li>
You must give any other recipients of the Work or
Derivative Works a copy of this License; and
</li>
<li>
You must cause any modified files to carry prominent notices
stating that You changed the files; and
</li>
<li>
You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of |
the Derivative Works; and
</li>
<li>
If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
</li>
</ul>
<p>
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.
</p>
<div class="block">
<h2 class="inline">5. Submission of Contributions.</h2>
<p class="inline">
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.
</p>
</div>
<div class="block">
<h2 class="inline">6. Trademarks.</h2>
<p class="inline">
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.
</p>
</div>
<div class="block">
<h2 class="inline">7. Disclaimer of Warranty.</h2>
<p class="inline">
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.
</p>
</div>
<div class="block">
<h2 class="inline">8. Limitation of Liability.</h2>
<p class="inline">
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.
</p>
</div>
<div class="block">
<h2 class="inline">9. Accepting Warranty or Additional Liability.</h2>
<p class="inline">
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.
</p>
</div>
<p>END OF TERMS AND CONDITIONS</p>
<h1>APPENDIX: How to apply the Apache License to your work.</h1>
<p>
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.
</p>
<pre>Copyright [yyyy] [name of copyright owner]&#x000A;&#x000A;Licensed under the Apache License, Version 2.0 (the "License");&#x000A;you may not use this file except in compliance with the License.&#x000A;You may obtain a copy of the License at&#x000A;&#x000A; http://www.apache.org/licenses/LICENSE-2.0&#x000A;&#x000A;Unless required by applicable law or agreed to in writing, software&#x000A;distributed under the License is distributed on an "AS IS" BASIS,&#x000A;WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.&#x000A;See the License for the specific language governing permissions and&#x000A;limitations under the License.</pre>
</div>
</div>
<div class="library">
<!-- https://opensource.org/licenses/Apache-2.0 -->
<h1 class="title">core</h1>
@ -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 <https://openjsf.org/>
@ -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 <swmansion.com>
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 <<f@faisalman.com>>
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:

137
android/app/src/main/assets/licenses/npm.txt vendored
View File

@ -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 <https://openjsf.org/>
@ -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 <swmansion.com>
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 <<f@faisalman.com>>
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:

8
android/licenses.yml
View File

@ -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

5
app/App.tsx
View File

@ -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 <></>
}

2
app/components/BackgroundHeaderFlatList.tsx
View File

@ -37,7 +37,7 @@ function BackgroundHeaderFlatList<ItemT>(props: BackgroundHeaderFlatListProp<Ite
</props.BackgroundComponent>
}
ListHeaderComponentStyle={[headerStyle]}
ListEmptyComponent={<NothingHere style={styles.nothing} />}
ListEmptyComponent={props.ListEmptyComponent || <NothingHere style={styles.nothing} />}
/>
)
}

16
app/components/ContextMenu.tsx
View File

@ -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 (
<ContextMenuIconTextOption
IconComponentRaw={<Star starred={starred} size={26} />}
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<AlbumContextPressableProps> = props => {

4
app/components/HeaderBar.tsx
View File

@ -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 = <IconMat name="more-vert" color="white" size={25} />

41
app/components/ListItem.tsx
View File

@ -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<ViewStyle>
}> = ({ 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 }) => (
<AlbumContextPressable album={item as AlbumListItem} onPress={onPress} triggerWrapperStyle={styles.item}>
<AlbumContextPressable album={item as Album} onPress={onPress} triggerWrapperStyle={styles.item}>
{children}
</AlbumContextPressable>
),
@ -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 = <TitleTextSong contextId={contextId} queueId={queueId} title={item.title} />
@ -151,9 +141,20 @@ const ListItem: React.FC<{
const resizeMode = 'cover'
let coverArt = <></>
if (item.itemType === 'artist') {
coverArt = <CoverArt type="artist" artistId={item.id} round={true} style={artStyle} resizeMode={resizeMode} />
coverArt = (
<CoverArt
type="artist"
artistId={item.id}
round={true}
style={artStyle}
resizeMode={resizeMode}
size="thumbnail"
/>
)
} else {
coverArt = <CoverArt type="cover" coverArt={item.coverArt} style={artStyle} resizeMode={resizeMode} />
coverArt = (
<CoverArt type="cover" coverArt={item.coverArt} style={artStyle} resizeMode={resizeMode} size="thumbnail" />
)
}
return (
@ -178,10 +179,8 @@ const ListItem: React.FC<{
</View>
</PressableComponent>
<View style={styles.controls}>
{showStar && (
<PressableOpacity onPress={toggleStarred} style={styles.controlItem}>
<Star size={26} starred={starred} />
</PressableOpacity>
{showStar && item.itemType !== 'playlist' && (
<PressableStar id={item.id} type={item.itemType} size={26} style={styles.controlItem} />
)}
</View>
</View>
@ -259,4 +258,4 @@ const bigStyles = StyleSheet.create({
},
})
export default React.memo(ListItem)
export default React.memo(ListItem, equal)

11
app/components/ListPlayerControls.tsx
View File

@ -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<ViewStyle>
}>(({ songs, typeName, queueName, queueContextType, queueContextId, style }) => {
const [downloaded, setDownloaded] = useState(false)
const setQueue = useStore(selectTrackPlayer.setQueue)
const setQueue = useStore(store => store.setQueue)
return (
<View style={[styles.controls, style]}>
@ -36,11 +36,14 @@ const ListPlayerControls = React.memo<{
<View style={styles.controlsCenter}>
<Button
title={`Play ${typeName}`}
disabled={songs.length === 0}
onPress={() => setQueue(songs, queueName, queueContextType, queueContextId, undefined, false)}
/>
</View>
<View style={styles.controlsSide}>
<Button onPress={() => setQueue(songs, queueName, queueContextType, queueContextId, undefined, true)}>
<Button
disabled={songs.length === 0}
onPress={() => setQueue(songs, queueName, queueContextType, queueContextId, undefined, true)}>
<Icon name="shuffle" size={26} color="white" />
</Button>
</View>

19
app/components/NowPlayingBar.tsx
View File

@ -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 (
<Pressable onPress={() => navigation.navigate('now-playing')} style={[styles.container, displayStyle]}>
@ -89,14 +92,14 @@ const NowPlayingBar = React.memo(() => {
<CoverArt
type="cover"
style={{ height: styles.subContainer.height, width: styles.subContainer.height }}
coverArt={track?.coverArt}
coverArt={coverArt}
/>
<View style={styles.detailsContainer}>
<Text numberOfLines={1} style={styles.detailsTitle}>
{track?.title}
{title}
</Text>
<Text numberOfLines={1} style={styles.detailsAlbum}>
{track?.artist}
{artist}
</Text>
</View>
<Controls />

5
app/components/ProgressHook.tsx
View File

@ -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(() => {

20
app/components/Star.tsx
View File

@ -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<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>) | undefined
}>(({ id, type, size, style }) => {
const { starred, toggleStar } = useStar(id, type)
return (
<PressableOpacity onPress={toggleStar} style={style}>
<Star size={size} starred={starred} />
</PressableOpacity>
)
})

35
app/hooks/cache.ts
View File

@ -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) {
cacheItem(type, artistId, async () => {
let artistInfo: ArtistInfo | undefined
const cachedArtistInfo = useStore.getState().artistInfo[artistId]
if (cachedArtistInfo) {
artistInfo = cachedArtistInfo
} else {
artistInfo = await fetchArtistInfo(artistId)
if (!artistInfo) {
fetchArtistInfo(artistId)
return
}
if (!file && artistInfo) {
cacheItem(type, artistId, async () => {
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 }
}

63
app/hooks/library.ts Normal file
View File

@ -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 }
}

26
app/hooks/list.ts
View File

@ -1,5 +1,5 @@
import { useState, useCallback } from 'react'
import { useActiveServerRefresh } from './server'
import { useActiveServerRefresh } from './settings'
export const useFetchList = <T>(fetchList: () => Promise<T[]>) => {
const [list, setList] = useState<T[]>([])
@ -28,8 +28,26 @@ export const useFetchList = <T>(fetchList: () => Promise<T[]>) => {
return { list, refreshing, refresh, reset }
}
export const useFetchList2 = (fetchList: () => Promise<void>) => {
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 = <T>(
fetchList: (size?: number, offset?: number) => Promise<T[]>,
fetchList: (size: number, offset: number) => Promise<T[]>,
pageSize: number,
) => {
const [list, setList] = useState<T[]>([])
@ -53,8 +71,8 @@ export const useFetchPaginatedList = <T>(
useActiveServerRefresh(
useCallback(() => {
reset()
}, [reset]),
refresh()
}, [refresh]),
)
const fetchNextPage = useCallback(() => {

62
app/hooks/music.ts
View File

@ -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],
),
)
}

17
app/hooks/server.ts → app/hooks/settings.ts
View File

@ -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)
}

12
app/hooks/trackplayer.ts
View File

@ -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

4
app/models/cache.ts
View File

@ -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[]
}

39
app/models/music.ts → app/models/library.ts
View File

@ -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

20
app/models/settings.ts
View File

@ -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
}

14
app/models/state.ts Normal file
View File

@ -0,0 +1,14 @@
export interface ById<T> {
[id: string]: T
}
export type OneToMany = ById<string[]>
export interface OrderedById<T> {
byId: ById<T>
allIds: string[]
}
export interface PaginatedList {
[offset: number]: string[]
}

18
app/models/trackplayer.ts Normal file
View File

@ -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'

7
app/navigation/BottomTabBar.tsx
View File

@ -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<ParamListBase, BottomTabNavigationEventMap>
}>(({ routeKey, label, name, isFocused, icon, navigation }) => {
const firstRun = useStore(selectSettings.firstRun)
const firstRun = useFirstRun()
const disabled = firstRun && name !== 'settings'

5
app/navigation/BottomTabNavigator.tsx
View File

@ -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 (
<Tab.Navigator tabBar={BottomTabBar} initialRouteName={firstRun ? 'settings' : 'home'}>

11
app/playbackservice.ts
View File

@ -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 => {

89
app/screens/ArtistView.tsx
View File

@ -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 (
<>
<Header>Top Songs</Header>
{songs.map((s, i) => (
{songs.slice(0, 5).map((s, i) => (
<ListItem
key={i}
item={s}
@ -67,6 +66,29 @@ const TopSongs = React.memo<{
)
})
const ArtistAlbums = React.memo<{
albums: Album[]
}>(({ 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 (
<>
<Header>Albums</Header>
<View style={styles.albums} onLayout={albumsLayout.onLayout}>
{sortedAlbums.map(a => (
<AlbumItem key={a.id} album={a} height={albumSize} width={albumSize} />
))}
</View>
</>
)
})
const ArtistViewFallback = React.memo(() => (
<GradientBackground style={styles.fallback}>
<ActivityIndicator size="large" color={colors.accent} />
@ -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 <ArtistViewFallback />
}
const _albums = [...artist.albums]
.sort((a, b) => a.name.localeCompare(b.name))
.sort((a, b) => (b.year || 0) - (a.year || 0))
return (
<View style={styles.container}>
<HeaderBar title={title} headerStyle={[styles.header, animatedOpacity]} />
@ -115,17 +154,18 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) =>
<Text style={styles.title}>{artist.name}</Text>
</View>
<View style={styles.contentContainer}>
{artist.topSongs.length > 0 ? (
<TopSongs songs={artist.topSongs} name={artist.name} artistId={artist.id} />
{topSongs && albums ? (
topSongs.length > 0 ? (
<>
<TopSongs songs={topSongs} name={artist.name} artistId={artist.id} />
<ArtistAlbums albums={albums} />
</>
) : (
<></>
<ArtistAlbums albums={albums} />
)
) : (
<ActivityIndicator size="large" color={colors.accent} style={styles.loading} />
)}
<Header>Albums</Header>
<View style={styles.albums} onLayout={albumsLayout.onLayout}>
{_albums.map(a => (
<AlbumItem key={a.id} album={a} height={albumSize} width={albumSize} />
))}
</View>
</View>
</GradientScrollView>
</View>
@ -200,6 +240,9 @@ const styles = StyleSheet.create({
fontFamily: font.regular,
textAlign: 'center',
},
loading: {
marginTop: 30,
},
})
export default ArtistView

93
app/screens/Home.tsx
View File

@ -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 (
<AlbumContextPressable
@ -49,9 +54,10 @@ const AlbumItem = React.memo<{
})
const Category = React.memo<{
name?: string
data: AlbumListItem[]
}>(({ name, data }) => {
type: string
}>(({ type }) => {
const list = useHomeStoreDeep(useCallback(store => store.lists[type] || [], [type]))
const Albums = () => (
<ScrollView
horizontal={true}
@ -59,8 +65,8 @@ const Category = React.memo<{
overScrollMode={'never'}
style={styles.artScroll}
contentContainerStyle={styles.artScrollContent}>
{data.map(album => (
<AlbumItem key={album.id} album={album} />
{list.map(id => (
<AlbumItem key={id} id={id} />
))}
</ScrollView>
)
@ -73,24 +79,57 @@ const Category = React.memo<{
return (
<View style={styles.category}>
<Header style={styles.header}>{name}</Header>
{data.length > 0 ? <Albums /> : <Nothing />}
<Header style={styles.header}>{titles[type as GetAlbumListType] || ''}</Header>
{list.length > 0 ? <Albums /> : <Nothing />}
</View>
)
})
interface HomeState {
lists: { [type: string]: string[] }
setList: (type: string, list: string[]) => void
}
const useHomeStore = create<HomeState>(set => ({
lists: {},
setList: (type, list) => {
set(
produce<HomeState>(state => {
state.lists[type] = list
}),
)
},
}))
function useHomeStoreDeep<U>(stateSelector: StateSelector<HomeState, U>) {
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={
<RefreshControl
refreshing={updating}
onRefresh={update}
refreshing={refreshing}
onRefresh={refresh}
colors={[colors.accent, colors.accentLow]}
progressViewOffset={StatusBar.currentHeight}
/>
}>
<View style={styles.content}>
{types.map(type => (
<Category key={type} name={titles[type as GetAlbumListType]} data={type in lists ? lists[type] : []} />
<Category key={type} type={type} />
))}
</View>
</GradientScrollView>

71
app/screens/LibraryAlbums.tsx
View File

@ -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 (
<AlbumContextPressable
album={album}
@ -41,8 +43,8 @@ const AlbumItem = React.memo<{
})
const AlbumListRenderItem: React.FC<{
item: { album: Album; size: number; height: number }
}> = ({ item }) => <AlbumItem album={item.album} size={item.size} height={item.height} />
item: { id: string; size: number; height: number }
}> = ({ item }) => <AlbumItem id={item.id} size={item.size} height={item.height} />
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 (
<View style={styles.container}>
<GradientFlatList
data={list.map(album => ({ 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}

25
app/screens/LibraryArtists.tsx
View File

@ -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<Artist[]>([])
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 (
<View style={styles.container}>

16
app/screens/LibraryPlaylists.tsx
View File

@ -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 }) => (
<ListItem item={item} showArt={true} showStar={false} listStyle="big" style={styles.listItem} />
)
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 (
<GradientFlatList
data={list}
data={Object.values(playlists)}
renderItem={PlaylistRenderItem}
keyExtractor={item => item.id}
onRefresh={refresh}

10
app/screens/NowPlayingQueue.tsx
View File

@ -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 (

52
app/screens/NowPlayingView.tsx
View File

@ -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 (
<View style={coverArtStyles.container}>
<CoverArt type="cover" size="original" coverArt={track?.coverArt} style={coverArtStyles.image} />
<CoverArt type="cover" size="original" coverArt={coverArt} style={coverArtStyles.image} />
</View>
)
}
@ -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 (
<View style={infoStyles.container}>
<View style={infoStyles.details}>
<Text numberOfLines={1} style={infoStyles.title}>
{track?.title}
{title}
</Text>
<Text numberOfLines={1} style={infoStyles.artist}>
{track?.artist}
{artist}
</Text>
</View>
<View style={infoStyles.controls}>
<PressableOpacity onPress={() => setStarred(id, type, starred)}>
<Star size={32} starred={starred} />
</PressableOpacity>
<PressableStar id={id || '-1'} type={'song'} size={32} />
</View>
</View>
)
@ -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<RootStackParamList, 'main'>
const NowPlayingView: React.FC<NowPlayingProps> = ({ navigation }) => {
const track = useStore(selectTrackPlayer.currentTrack)
const track = useStoreDeep(store => store.currentTrack)
useEffect(() => {
if (!track) {
@ -404,7 +398,7 @@ const NowPlayingView: React.FC<NowPlayingProps> = ({ navigation }) => {
return (
<View style={styles.container}>
<ImageGradientBackground imagePath={imagePath} />
<ImageGradientBackground imagePath={imagePath} height={'100%'} />
<NowPlayingHeader track={track} />
<View style={styles.content}>
<SongCoverArt />

48
app/screens/Search.tsx
View File

@ -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 (
<ListItem
@ -42,8 +41,27 @@ const SongItem = React.memo<{ item: Song }>(({ 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<{
<>
<Header>{name}</Header>
{items.map(a =>
a.itemType === 'song' ? (
<SongItem key={a.id} item={a} />
type === 'song' ? (
<SongItem key={a.id} item={a as Song} />
) : (
<ListItem key={a.id} item={a} showArt={true} showStar={false} />
),
@ -78,15 +96,15 @@ const Results = React.memo<{
}>(({ results, query }) => {
return (
<>
<ResultsCategory name="Artists" query={query} items={results.artists} />
<ResultsCategory name="Albums" query={query} items={results.albums} />
<ResultsCategory name="Songs" query={query} items={results.songs} />
<ResultsCategory name="Artists" query={query} type={'artist'} ids={results.artists} />
<ResultsCategory name="Albums" query={query} type={'album'} ids={results.albums} />
<ResultsCategory name="Songs" query={query} type={'song'} ids={results.songs} />
</>
)
})
const Search = () => {
const fetchSearchResults = useStore(selectMusic.fetchSearchResults)
const fetchSearchResults = useStore(store => store.fetchSearchResults)
const [results, setResults] = useState<SearchResults>({ 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],

59
app/screens/SearchResultsView.tsx
View File

@ -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,11 +40,28 @@ const SearchResultsView: React.FC<{
type: 'album' | 'artist' | 'song'
}> = ({ query, type }) => {
const navigation = useNavigation()
const fetchSearchResults = useStore(selectMusic.fetchSearchResults)
const { list, refreshing, refresh, fetchNextPage } = useFetchPaginatedList<SearchListItemType>(
const fetchSearchResults = useStore(store => store.fetchSearchResults)
const { list, refreshing, refresh, fetchNextPage } = useFetchPaginatedList(
useCallback(
(size, offset) =>
fetchSearchResults(query, type, size, offset).then(results => {
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
@ -55,12 +72,30 @@ const SearchResultsView: React.FC<{
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 (
<GradientFlatList
data={list}
data={items}
renderItem={SearchResultsRenderItem}
keyExtractor={(item, i) => i.toString()}
onRefresh={refresh}

21
app/screens/ServerView.tsx
View File

@ -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()) {

47
app/screens/Settings.tsx
View File

@ -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 })}>
<PressableOpacity style={styles.serverActive} onPress={setActive}>
{activeServer && activeServer.id === server.id ? (
{activeServerId === server.id ? (
<Icon name="checkbox-marked-circle" size={30} color={colors.accent} />
) : (
<Icon name="checkbox-blank-circle-outline" size={30} color={colors.text.secondary} />
@ -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 (
<View style={styles.content}>
<Header>Servers</Header>
{servers.map(s => (
{Object.values(servers).map(s => (
<ServerItem key={s.id} server={s} />
))}
<Button
@ -251,12 +244,6 @@ const SettingsContent = React.memo(() => {
<Header style={styles.header}>Network</Header>
<BitrateModal title="Maximum bitrate (Wi-Fi)" bitrate={maxBitrateWifi} setBitrate={setMaxBitrateWifi} />
<BitrateModal title="Maximum bitrate (mobile)" bitrate={maxBitrateMobile} setBitrate={setMaxBitrateMobile} />
{/* <SettingsSwitch
title="Estimate content length"
subtitle='Send the "estimateContentLength" flag when streaming. Helps fix issues with seeking when the server is transcoding songs.'
value={estimateContentLength}
setValue={setEstimateContentLength}
/> */}
<SettingsTextModal
title="Minimum buffer time"
value={minBuffer.toString()}

78
app/screens/SongListView.tsx
View File

@ -4,14 +4,13 @@ import HeaderBar from '@app/components/HeaderBar'
import ImageGradientFlatList from '@app/components/ImageGradientFlatList'
import ListItem from '@app/components/ListItem'
import ListPlayerControls from '@app/components/ListPlayerControls'
import NothingHere from '@app/components/NothingHere'
import { useCoverArtFile } from '@app/hooks/cache'
import { useAlbumWithSongs, usePlaylistWithSongs } from '@app/hooks/music'
import { AlbumWithSongs, PlaylistWithSongs, Song } from '@app/models/music'
import { useStore } from '@app/state/store'
import { selectTrackPlayer } from '@app/state/trackplayer'
import { Song, Album, Playlist } from '@app/models/library'
import { useStore, useStoreDeep } from '@app/state/store'
import colors from '@app/styles/colors'
import font from '@app/styles/font'
import React, { useState } from 'react'
import React, { useCallback, useEffect, useState } from 'react'
import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
type SongListType = 'album' | 'playlist'
@ -46,18 +45,19 @@ const SongRenderItem: React.FC<{
const SongListDetails = React.memo<{
title: string
type: SongListType
songList?: AlbumWithSongs | PlaylistWithSongs
songList?: Album | Playlist
songs?: Song[]
subtitle?: string
}>(({ title, songList, subtitle, type }) => {
}>(({ title, songList, songs, subtitle, type }) => {
const coverArtFile = useCoverArtFile(songList?.coverArt, 'thumbnail')
const [headerColor, setHeaderColor] = useState<string | undefined>(undefined)
const setQueue = useStore(selectTrackPlayer.setQueue)
const setQueue = useStore(store => store.setQueue)
if (!songList) {
return <SongListDetailsFallback />
}
const _songs = [...songList.songs]
const _songs = [...(songs || [])]
let typeName = ''
if (type === 'album') {
@ -101,12 +101,18 @@ const SongListDetails = React.memo<{
overScrollMode="never"
windowSize={7}
contentMarginTop={26}
ListEmptyComponent={
songs ? (
<NothingHere style={styles.nothing} />
) : (
<ActivityIndicator size="large" color={colors.accent} style={styles.listLoading} />
)
}
ListHeaderComponent={
<View style={styles.content}>
<CoverArt type="cover" size="original" coverArt={songList.coverArt} style={styles.cover} />
<Text style={styles.title}>{songList.name}</Text>
{subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : <></>}
{songList.songs.length > 0 && (
<ListPlayerControls
style={styles.controls}
songs={_songs}
@ -115,7 +121,6 @@ const SongListDetails = React.memo<{
queueContextId={songList.id}
queueContextType={type}
/>
)}
</View>
}
/>
@ -127,19 +132,58 @@ const PlaylistView = React.memo<{
id: string
title: string
}>(({ id, title }) => {
const playlist = usePlaylistWithSongs(id)
return <SongListDetails title={title} songList={playlist} subtitle={playlist?.comment} type="playlist" />
const playlist = useStoreDeep(useCallback(store => store.library.playlists[id], [id]))
const songs = useStoreDeep(
useCallback(
store => {
const ids = store.library.playlistSongs[id]
return ids ? ids.map(i => store.library.songs[i]) : undefined
},
[id],
),
)
const fetchPlaylist = useStore(store => store.fetchPlaylist)
useEffect(() => {
if (!playlist || !songs) {
fetchPlaylist(id)
}
}, [playlist, fetchPlaylist, id, songs])
return (
<SongListDetails title={title} songList={playlist} songs={songs} subtitle={playlist?.comment} type="playlist" />
)
})
const AlbumView = React.memo<{
id: string
title: string
}>(({ id, title }) => {
const album = useAlbumWithSongs(id)
const album = useStoreDeep(useCallback(store => store.library.albums[id], [id]))
const songs = useStoreDeep(
useCallback(
store => {
const ids = store.library.albumSongs[id]
return ids ? ids.map(i => store.library.songs[i]) : undefined
},
[id],
),
)
const fetchAlbum = useStore(store => store.fetchAlbum)
useEffect(() => {
if (!album || !songs) {
fetchAlbum(id)
}
}, [album, fetchAlbum, id, songs])
return (
<SongListDetails
title={title}
songList={album}
songs={songs}
subtitle={(album?.artist || '') + (album?.year ? ' • ' + album?.year : '')}
type="album"
/>
@ -196,6 +240,12 @@ const styles = StyleSheet.create({
listItem: {
paddingHorizontal: 20,
},
nothing: {
width: '100%',
},
listLoading: {
marginTop: 10,
},
})
export default SongListView

2
app/screens/SplashPage.tsx
View File

@ -45,7 +45,7 @@ const SplashPage: React.FC<{}> = ({ children }) => {
const splash = (
<Animated.View style={[styles.splashContainer, animatedStyles]} pointerEvents="none">
<GradientBackground style={styles.background}>
<GradientBackground style={styles.background} height="100%">
<View style={styles.logoContainer}>
<Image style={styles.image} source={require('@res/casette.png')} fadeDuration={0} />
<Text style={styles.text}>subtracks</Text>

74
app/state/cache.ts
View File

@ -1,10 +1,8 @@
import { CacheFile, CacheImageSize, CacheItemType, CacheItemTypeKey, CacheRequest } from '@app/models/cache'
import { mkdir, rmdir } from '@app/util/fs'
import PromiseQueue from '@app/util/PromiseQueue'
import produce from 'immer'
import RNFS from 'react-native-fs'
import { GetState, SetState } from 'zustand'
import { Store } from './store'
import { GetStore, SetStore } from './store'
const queues: Record<CacheItemTypeKey, PromiseQueue> = {
coverArt: new PromiseQueue(5),
@ -20,16 +18,6 @@ export type CacheDirsByServer = Record<string, Record<CacheItemTypeKey, string>>
export type CacheFilesByServer = Record<string, Record<CacheItemTypeKey, Record<string, CacheFile>>>
export type CacheRequestsByServer = Record<string, Record<CacheItemTypeKey, Record<string, CacheRequest>>>
// export type DownloadedItemsByServer = Record<
// string,
// {
// songs: { [songId: string]: DownloadedSong }
// albums: { [albumId: string]: DownloadedAlbum }
// artists: { [songId: string]: DownloadedArtist }
// playlists: { [playlistId: string]: DownloadedPlaylist }
// }
// >
export type CacheSlice = {
cacheItem: (
key: CacheItemTypeKey,
@ -51,13 +39,7 @@ export type CacheSlice = {
clearImageCache: () => Promise<void>
}
export const selectCache = {
cacheItem: (store: CacheSlice) => store.cacheItem,
fetchCoverArtFilePath: (store: CacheSlice) => store.fetchCoverArtFilePath,
clearImageCache: (store: CacheSlice) => store.clearImageCache,
}
export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): CacheSlice => ({
export const createCacheSlice = (set: SetStore, get: GetStore): CacheSlice => ({
// cache: {},
cacheDirs: {},
cacheFiles: {},
@ -69,7 +51,7 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
return
}
const activeServerId = get().settings.activeServer
const activeServerId = get().settings.activeServerId
if (!activeServerId) {
return
}
@ -115,23 +97,18 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
// },
}).promise
set(
produce<CacheSlice>(state => {
set(state => {
state.cacheRequests[activeServerId][key][itemId].progress = 1
delete state.cacheRequests[activeServerId][key][itemId].promise
}),
)
})
} catch {
set(
produce<CacheSlice>(state => {
set(state => {
delete state.cacheFiles[activeServerId][key][itemId]
delete state.cacheRequests[activeServerId][key][itemId]
}),
)
})
}
})
set(
produce<Store>(state => {
set(state => {
state.cacheFiles[activeServerId][key][itemId] = {
path,
date: Date.now(),
@ -141,8 +118,7 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
progress: 0,
promise,
}
}),
)
})
return await promise
},
@ -152,7 +128,7 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
return
}
const activeServerId = get().settings.activeServer
const activeServerId = get().settings.activeServerId
if (!activeServerId) {
return
}
@ -183,8 +159,7 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
await mkdir(`${RNFS.DocumentDirectoryPath}/servers/${serverId}/${type}`)
}
set(
produce<CacheSlice>(state => {
set(state => {
state.cacheFiles[serverId] = {
song: {},
coverArt: {},
@ -192,15 +167,13 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
artistArt: {},
artistArtThumb: {},
}
}),
)
})
get().prepareCache(serverId)
},
prepareCache: serverId => {
set(
produce<CacheSlice>(state => {
set(state => {
if (!state.cacheDirs[serverId]) {
state.cacheDirs[serverId] = {
song: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/song`,
@ -219,18 +192,15 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
artistArtThumb: {},
}
}
}),
)
})
},
pendingRemoval: {},
removeCache: async serverId => {
set(
produce<CacheSlice>(state => {
set(state => {
state.pendingRemoval[serverId] = true
}),
)
})
const cacheRequests = get().cacheRequests[serverId]
const pendingRequests: Promise<void>[] = []
@ -245,8 +215,7 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
await Promise.all(pendingRequests)
await rmdir(`${RNFS.DocumentDirectoryPath}/servers/${serverId}`)
set(
produce<CacheSlice>(state => {
set(state => {
delete state.pendingRemoval[serverId]
if (state.cacheDirs[serverId]) {
@ -258,8 +227,7 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
if (state.cacheRequests[serverId]) {
delete state.cacheRequests[serverId]
}
}),
)
})
},
clearImageCache: async () => {
@ -280,14 +248,12 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
await rmdir(get().cacheDirs[serverId].artistArt)
await mkdir(get().cacheDirs[serverId].artistArt)
set(
produce<CacheSlice>(state => {
set(state => {
state.cacheFiles[serverId].coverArt = {}
state.cacheFiles[serverId].coverArtThumb = {}
state.cacheFiles[serverId].artistArt = {}
state.cacheFiles[serverId].artistArtThumb = {}
}),
)
})
}
},
})

521
app/state/library.ts Normal file
View File

@ -0,0 +1,521 @@
import { Album, Artist, ArtistInfo, Playlist, SearchResults, Song } from '@app/models/library'
import { ById, OneToMany } from '@app/models/state'
import { GetStore, SetStore, Store } from '@app/state/store'
import {
AlbumID3Element,
ArtistID3Element,
ArtistInfo2Element,
ChildElement,
PlaylistElement,
} from '@app/subsonic/elements'
import { GetAlbumList2Params, Search3Params, StarParams } from '@app/subsonic/params'
import {
GetAlbumList2Response,
GetAlbumResponse,
GetArtistInfo2Response,
GetArtistResponse,
GetArtistsResponse,
GetPlaylistResponse,
GetPlaylistsResponse,
GetSongResponse,
GetTopSongsResponse,
Search3Response,
} from '@app/subsonic/responses'
import PromiseQueue from '@app/util/PromiseQueue'
import { mapId, mergeById, reduceById } from '@app/util/state'
import { WritableDraft } from 'immer/dist/types/types-external'
import pick from 'lodash.pick'
const songCoverArtQueue = new PromiseQueue(2)
export type LibrarySlice = {
library: {
artists: ById<Artist>
artistInfo: ById<ArtistInfo>
artistAlbums: OneToMany
artistNameTopSongs: OneToMany
artistOrder: string[]
albums: ById<Album>
albumSongs: OneToMany
playlists: ById<Playlist>
playlistSongs: OneToMany
songs: ById<Song>
}
resetLibrary: (state?: WritableDraft<Store>) => void
fetchArtists: () => Promise<void>
fetchArtist: (id: string) => Promise<void>
fetchArtistInfo: (artistId: string) => Promise<void>
fetchArtistTopSongs: (artistName: string) => Promise<void>
fetchAlbum: (id: string) => Promise<void>
fetchPlaylists: () => Promise<void>
fetchPlaylist: (id: string) => Promise<void>
fetchSong: (id: string) => Promise<void>
fetchAlbumList: (params: GetAlbumList2Params) => Promise<string[]>
fetchSearchResults: (params: Search3Params) => Promise<SearchResults>
star: (params: StarParams) => Promise<void>
unstar: (params: StarParams) => Promise<void>
_fixSongCoverArt: (songs: Song[]) => Promise<void>
}
const defaultLibrary = () => ({
artists: {},
artistAlbums: {},
artistInfo: {},
artistNameTopSongs: {},
artistOrder: [],
albums: {},
albumSongs: {},
playlists: {},
playlistSongs: {},
songs: {},
})
export const createLibrarySlice = (set: SetStore, get: GetStore): LibrarySlice => ({
library: defaultLibrary(),
resetLibrary: state => {
if (state) {
state.library = defaultLibrary()
return
}
set(store => {
store.library = defaultLibrary()
})
},
fetchArtists: async () => {
const client = get().client
if (!client) {
return
}
let response: GetArtistsResponse
try {
response = await client.getArtists()
} catch {
return
}
const artists = response.data.artists.map(mapArtist)
const artistsById = reduceById(artists)
const artistIds = mapId(artists)
set(state => {
state.library.artists = artistsById
state.library.artistAlbums = pick(state.library.artistAlbums, artistIds)
state.library.artistOrder = artistIds
})
},
fetchArtist: async id => {
const client = get().client
if (!client) {
return
}
let response: GetArtistResponse
try {
response = await client.getArtist({ id })
} catch {
return
}
const artist = mapArtist(response.data.artist)
const albums = response.data.albums.map(mapAlbum)
const albumsById = reduceById(albums)
set(state => {
state.library.artists[id] = artist
state.library.artistAlbums[id] = mapId(albums)
mergeById(state.library.albums, albumsById)
})
},
fetchArtistInfo: async id => {
const client = get().client
if (!client) {
return
}
let response: GetArtistInfo2Response
try {
response = await client.getArtistInfo2({ id })
} catch {
return
}
const info = mapArtistInfo(id, response.data.artistInfo)
set(state => {
state.library.artistInfo[id] = info
})
},
fetchArtistTopSongs: async artistName => {
const client = get().client
if (!client) {
return
}
let response: GetTopSongsResponse
try {
response = await client.getTopSongs({ artist: artistName, count: 50 })
} catch {
return
}
const topSongs = response.data.songs.map(mapSong)
const topSongsById = reduceById(topSongs)
get()._fixSongCoverArt(topSongs)
set(state => {
mergeById(state.library.songs, topSongsById)
state.library.artistNameTopSongs[artistName] = mapId(topSongs)
})
},
fetchAlbum: async id => {
const client = get().client
if (!client) {
return
}
let response: GetAlbumResponse
try {
response = await client.getAlbum({ id })
} catch {
return
}
const album = mapAlbum(response.data.album)
const songs = response.data.songs.map(mapSong)
const songsById = reduceById(songs)
get()._fixSongCoverArt(songs)
set(state => {
state.library.albums[id] = album
state.library.albumSongs[id] = mapId(songs)
mergeById(state.library.songs, songsById)
})
},
fetchPlaylists: async () => {
const client = get().client
if (!client) {
return
}
let response: GetPlaylistsResponse
try {
response = await client.getPlaylists()
} catch {
return
}
const playlists = response.data.playlists.map(mapPlaylist)
const playlistsById = reduceById(playlists)
set(state => {
state.library.playlists = playlistsById
state.library.playlistSongs = pick(state.library.playlistSongs, mapId(playlists))
})
},
fetchPlaylist: async id => {
const client = get().client
if (!client) {
return
}
let response: GetPlaylistResponse
try {
response = await client.getPlaylist({ id })
} catch {
return
}
const playlist = mapPlaylist(response.data.playlist)
const songs = response.data.playlist.songs.map(mapSong)
const songsById = reduceById(songs)
get()._fixSongCoverArt(songs)
set(state => {
state.library.playlists[id] = playlist
state.library.playlistSongs[id] = mapId(songs)
mergeById(state.library.songs, songsById)
})
},
fetchSong: async id => {
const client = get().client
if (!client) {
return
}
let response: GetSongResponse
try {
response = await client.getSong({ id })
} catch {
return
}
const song = mapSong(response.data.song)
get()._fixSongCoverArt([song])
set(state => {
state.library.songs[id] = song
})
},
fetchAlbumList: async params => {
const client = get().client
if (!client) {
return []
}
let response: GetAlbumList2Response
try {
response = await client.getAlbumList2(params)
} catch {
return []
}
const albums = response.data.albums.map(mapAlbum)
const albumsById = reduceById(albums)
set(state => {
mergeById(state.library.albums, albumsById)
})
return mapId(albums)
},
fetchSearchResults: async params => {
const empty = { artists: [], albums: [], songs: [] }
const client = get().client
if (!client) {
return empty
}
let response: Search3Response
try {
response = await client.search3(params)
} catch {
return empty
}
const artists = response.data.artists.map(mapArtist)
const artistsById = reduceById(artists)
const albums = response.data.albums.map(mapAlbum)
const albumsById = reduceById(albums)
const songs = response.data.songs.map(mapSong)
const songsById = reduceById(songs)
get()._fixSongCoverArt(songs)
set(state => {
mergeById(state.library.artists, artistsById)
mergeById(state.library.albums, albumsById)
mergeById(state.library.songs, songsById)
})
return {
artists: mapId(artists),
albums: mapId(albums),
songs: mapId(songs),
}
},
star: async params => {
const client = get().client
if (!client) {
return
}
let id = '-1'
let entity: 'songs' | 'artists' | 'albums' = 'songs'
if (params.id) {
id = params.id
entity = 'songs'
} else if (params.albumId) {
id = params.albumId
entity = 'albums'
} else if (params.artistId) {
id = params.artistId
entity = 'artists'
} else {
return
}
const item = get().library[entity][id]
const originalValue = item ? item.starred : null
set(state => {
state.library[entity][id].starred = new Date()
})
try {
await client.star(params)
} catch {
set(state => {
if (originalValue !== null) {
state.library[entity][id].starred = originalValue
}
})
}
},
unstar: async params => {
const client = get().client
if (!client) {
return
}
let id = '-1'
let entity: 'songs' | 'artists' | 'albums' = 'songs'
if (params.id) {
id = params.id
entity = 'songs'
} else if (params.albumId) {
id = params.albumId
entity = 'albums'
} else if (params.artistId) {
id = params.artistId
entity = 'artists'
} else {
return
}
const item = get().library[entity][id]
const originalValue = item ? item.starred : null
set(state => {
state.library[entity][id].starred = undefined
})
try {
await client.unstar(params)
} catch {
set(state => {
if (originalValue !== null) {
state.library[entity][id].starred = originalValue
}
})
}
},
// song cover art comes back from the api as a unique id per song even if it all points to the same
// album art, which prevents us from caching it once, so we need to use the album's cover art
_fixSongCoverArt: async songs => {
const client = get().client
if (!client) {
return
}
const albumsToGet: ById<Song[]> = {}
for (const song of songs) {
if (!song.albumId) {
continue
}
let album = get().library.albums[song.albumId]
if (album) {
song.coverArt = album.coverArt
continue
}
albumsToGet[song.albumId] = albumsToGet[song.albumId] || []
albumsToGet[song.albumId].push(song)
}
for (const id in albumsToGet) {
songCoverArtQueue
.enqueue(() => client.getAlbum({ id }))
.then(res => {
const album = mapAlbum(res.data.album)
set(state => {
state.library.albums[album.id] = album
for (const song of albumsToGet[album.id]) {
state.library.songs[song.id].coverArt = album.coverArt
}
})
})
}
},
})
function mapArtist(artist: ArtistID3Element): Artist {
return {
itemType: 'artist',
id: artist.id,
name: artist.name,
starred: artist.starred,
coverArt: artist.coverArt,
}
}
function mapArtistInfo(id: string, info: ArtistInfo2Element): ArtistInfo {
return {
id,
smallImageUrl: info.smallImageUrl,
largeImageUrl: info.largeImageUrl,
}
}
function mapAlbum(album: AlbumID3Element): Album {
return {
itemType: 'album',
id: album.id,
name: album.name,
artist: album.artist,
artistId: album.artistId,
starred: album.starred,
coverArt: album.coverArt,
year: album.year,
}
}
function mapPlaylist(playlist: PlaylistElement): Playlist {
return {
itemType: 'playlist',
id: playlist.id,
name: playlist.name,
comment: playlist.comment,
coverArt: playlist.coverArt,
}
}
function mapSong(song: ChildElement): Song {
return {
itemType: 'song',
id: song.id,
album: song.album,
albumId: song.albumId,
artist: song.artist,
artistId: song.artistId,
title: song.title,
track: song.track,
discNumber: song.discNumber,
duration: song.duration,
starred: song.starred,
}
}

25
app/state/migrations.ts
View File

@ -1,9 +1,34 @@
import { Server } from '@app/models/settings'
import { ById } from '@app/models/state'
const migrations: Array<(state: any) => any> = [
state => {
for (let server of state.settings.servers) {
server.usePlainPassword = false
}
return state
},
state => {
state.settings.servers = state.settings.servers.reduce((acc: ById<Server>, server: Server) => {
acc[server.id] = server
return acc
}, {} as ById<Server>)
state.settings.activeServerId = state.settings.activeServer
delete state.settings.activeServer
state.settings.screens.home.listTypes = [...state.settings.screens.home.lists]
delete state.settings.screens.home.lists
state.settings.screens.library.albumsFilter = { ...state.settings.screens.library.albums }
delete state.settings.screens.library.albums
state.settings.screens.library.artistsFilter = { ...state.settings.screens.library.artists }
delete state.settings.screens.library.artists
delete state.settings.estimateContentLength
return state
},
]

471
app/state/music.ts
View File

@ -1,471 +0,0 @@
import {
AlbumListItem,
AlbumWithSongs,
Artist,
ArtistInfo,
HomeLists,
PlaylistListItem,
PlaylistWithSongs,
SearchResults,
StarrableItemType,
} from '@app/models/music'
import { Store } from '@app/state/store'
import { GetAlbumList2Params, GetAlbumList2TypeBase, Search3Params, StarParams } from '@app/subsonic/params'
import produce from 'immer'
import { GetState, SetState } from 'zustand'
export type MusicSlice = {
//
// family-style state
//
artistInfo: { [id: string]: ArtistInfo }
fetchArtistInfo: (id: string) => Promise<ArtistInfo | undefined>
albumsWithSongs: { [id: string]: AlbumWithSongs }
fetchAlbumWithSongs: (id: string) => Promise<AlbumWithSongs | undefined>
playlistsWithSongs: { [id: string]: PlaylistWithSongs }
fetchPlaylistWithSongs: (id: string) => Promise<PlaylistWithSongs | undefined>
//
// lists-style state
//
fetchArtists: (size?: number, offset?: number) => Promise<Artist[]>
fetchPlaylists: () => Promise<PlaylistListItem[]>
fetchAlbums: () => Promise<AlbumListItem[]>
fetchSearchResults: (
query: string,
type?: 'album' | 'song' | 'artist',
size?: number,
offset?: number,
) => Promise<SearchResults>
homeLists: HomeLists
homeListsUpdating: boolean
fetchHomeLists: () => Promise<void>
clearHomeLists: () => void
//
// actions, etc.
//
starredSongs: { [id: string]: boolean }
starredAlbums: { [id: string]: boolean }
starredArtists: { [id: string]: boolean }
starItem: (id: string, type: StarrableItemType, unstar?: boolean) => Promise<void>
albumIdCoverArt: { [id: string]: string | undefined }
albumIdCoverArtRequests: { [id: string]: Promise<void> }
fetchAlbumCoverArt: (id: string) => Promise<void>
getAlbumCoverArt: (id: string | undefined) => Promise<string | undefined>
}
export const selectMusic = {
fetchArtistInfo: (state: Store) => state.fetchArtistInfo,
fetchAlbumWithSongs: (state: Store) => state.fetchAlbumWithSongs,
fetchPlaylistWithSongs: (state: Store) => state.fetchPlaylistWithSongs,
fetchArtists: (store: MusicSlice) => store.fetchArtists,
fetchPlaylists: (store: MusicSlice) => store.fetchPlaylists,
fetchAlbums: (store: MusicSlice) => store.fetchAlbums,
fetchSearchResults: (store: MusicSlice) => store.fetchSearchResults,
homeLists: (store: MusicSlice) => store.homeLists,
homeListsUpdating: (store: MusicSlice) => store.homeListsUpdating,
fetchHomeLists: (store: MusicSlice) => store.fetchHomeLists,
clearHomeLists: (store: MusicSlice) => store.clearHomeLists,
starItem: (store: MusicSlice) => store.starItem,
}
function reduceStarred(
starredType: { [id: string]: boolean },
items: { id: string; starred?: Date | boolean }[],
): { [id: string]: boolean } {
return {
...starredType,
...items.reduce((acc, val) => {
acc[val.id] = !!val.starred
return acc
}, {} as { [id: string]: boolean }),
}
}
export const createMusicSlice = (set: SetState<Store>, get: GetState<Store>): MusicSlice => ({
artistInfo: {},
fetchArtistInfo: async id => {
const client = get().client
if (!client) {
return undefined
}
try {
const [artistResponse, artistInfoResponse] = await Promise.all([
client.getArtist({ id }),
client.getArtistInfo2({ id }),
])
const topSongsResponse = await client.getTopSongs({ artist: artistResponse.data.artist.name, count: 50 })
const artistInfo = await get().mapArtistInfo(
artistResponse.data,
artistInfoResponse.data.artistInfo,
topSongsResponse.data.songs,
)
set(
produce<MusicSlice>(state => {
state.artistInfo[id] = artistInfo
state.starredSongs = reduceStarred(state.starredSongs, artistInfo.topSongs)
state.starredArtists = reduceStarred(state.starredArtists, [artistInfo])
state.starredAlbums = reduceStarred(state.starredAlbums, artistInfo.albums)
}),
)
return artistInfo
} catch {
return undefined
}
},
albumsWithSongs: {},
fetchAlbumWithSongs: async id => {
const client = get().client
if (!client) {
return undefined
}
try {
const response = await client.getAlbum({ id })
const album = await get().mapAlbumID3WithSongstoAlbumWithSongs(response.data.album, response.data.songs)
set(
produce<MusicSlice>(state => {
state.albumsWithSongs[id] = album
state.starredSongs = reduceStarred(state.starredSongs, album.songs)
state.starredAlbums = reduceStarred(state.starredAlbums, [album])
}),
)
return album
} catch {
return undefined
}
},
playlistsWithSongs: {},
fetchPlaylistWithSongs: async id => {
const client = get().client
if (!client) {
return undefined
}
try {
const response = await client.getPlaylist({ id })
const playlist = await get().mapPlaylistWithSongs(response.data.playlist)
set(
produce<MusicSlice>(state => {
state.playlistsWithSongs[id] = playlist
state.starredSongs = reduceStarred(state.starredSongs, playlist.songs)
}),
)
return playlist
} catch {
return undefined
}
},
fetchArtists: async () => {
const client = get().client
if (!client) {
return []
}
try {
const response = await client.getArtists()
const artists = response.data.artists.map(get().mapArtistID3toArtist)
set(
produce<MusicSlice>(state => {
state.starredArtists = reduceStarred(state.starredArtists, artists)
}),
)
return artists
} catch {
return []
}
},
fetchPlaylists: async () => {
const client = get().client
if (!client) {
return []
}
try {
const response = await client.getPlaylists()
return response.data.playlists.map(get().mapPlaylistListItem)
} catch {
return []
}
},
fetchAlbums: async (size = 500, offset = 0) => {
const client = get().client
if (!client) {
return []
}
try {
const filter = get().settings.screens.library.albums
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
}
const response = await client.getAlbumList2(params)
const albums = response.data.albums.map(get().mapAlbumID3toAlbumListItem)
set(
produce<MusicSlice>(state => {
state.starredAlbums = reduceStarred(state.starredAlbums, albums)
}),
)
return albums
} catch {
return []
}
},
fetchSearchResults: async (query, type, size, offset) => {
if (query.length < 2) {
return { artists: [], albums: [], songs: [] }
}
const client = get().client
if (!client) {
return { artists: [], albums: [], songs: [] }
}
try {
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 response = await client.search3(params)
const artists = response.data.artists.map(get().mapArtistID3toArtist)
const albums = response.data.albums.map(get().mapAlbumID3toAlbumListItem)
const songs = await get().mapChildrenToSongs(response.data.songs)
set(
produce<MusicSlice>(state => {
state.starredSongs = reduceStarred(state.starredSongs, songs)
state.starredArtists = reduceStarred(state.starredArtists, artists)
state.starredAlbums = reduceStarred(state.starredAlbums, albums)
}),
)
return { artists, albums, songs }
} catch {
return { artists: [], albums: [], songs: [] }
}
},
homeLists: {},
homeListsUpdating: false,
fetchHomeLists: async () => {
const client = get().client
if (!client) {
return
}
if (get().homeListsUpdating) {
return
}
set({ homeListsUpdating: true })
const types = get().settings.screens.home.lists
try {
const promises: Promise<any>[] = []
for (const type of types) {
promises.push(
client
.getAlbumList2({ type: type as GetAlbumList2TypeBase, size: 20 })
.then(response => {
const list = response.data.albums.map(get().mapAlbumID3toAlbumListItem)
set(
produce<MusicSlice>(state => {
state.homeLists[type] = list
state.starredAlbums = reduceStarred(state.starredAlbums, state.homeLists[type])
}),
)
})
.catch(() => {}),
)
}
await Promise.all(promises)
} finally {
set({ homeListsUpdating: false })
}
},
clearHomeLists: () => {
set({ homeLists: {} })
},
starredSongs: {},
starredAlbums: {},
starredArtists: {},
starItem: async (id, type, unstar = false) => {
const client = get().client
if (!client) {
return
}
let params: StarParams
let setStarred: (starred: boolean) => void
switch (type) {
case 'song':
params = { id }
setStarred = starred => {
set(
produce<MusicSlice>(state => {
state.starredSongs = reduceStarred(state.starredSongs, [{ id, starred }])
}),
)
}
break
case 'album':
params = { albumId: id }
setStarred = starred => {
set(
produce<MusicSlice>(state => {
state.starredAlbums = reduceStarred(state.starredAlbums, [{ id, starred }])
}),
)
}
break
case 'artist':
params = { artistId: id }
setStarred = starred => {
set(
produce<MusicSlice>(state => {
state.starredArtists = reduceStarred(state.starredArtists, [{ id, starred }])
}),
)
}
break
default:
return
}
try {
setStarred(!unstar)
if (unstar) {
await client.unstar(params)
} else {
await client.star(params)
}
} catch {
setStarred(unstar)
}
},
albumIdCoverArt: {},
albumIdCoverArtRequests: {},
fetchAlbumCoverArt: async id => {
const client = get().client
if (!client) {
return
}
const inProgress = get().albumIdCoverArtRequests[id]
if (inProgress !== undefined) {
return await inProgress
}
const promise = new Promise<void>(async resolve => {
try {
const response = await client.getAlbum({ id })
set(
produce<MusicSlice>(state => {
state.albumIdCoverArt[id] = response.data.album.coverArt
}),
)
} finally {
resolve()
}
}).then(() => {
set(
produce<MusicSlice>(state => {
delete state.albumIdCoverArtRequests[id]
}),
)
})
set(
produce<MusicSlice>(state => {
state.albumIdCoverArtRequests[id] = promise
}),
)
return await promise
},
getAlbumCoverArt: async id => {
if (!id) {
return
}
const existing = get().albumIdCoverArt[id]
if (existing) {
return existing
}
await get().fetchAlbumCoverArt(id)
return get().albumIdCoverArt[id]
},
})

142
app/state/musicmap.ts
View File

@ -1,142 +0,0 @@
import {
AlbumListItem,
AlbumWithSongs,
Artist,
ArtistInfo,
PlaylistListItem,
PlaylistWithSongs,
Song,
} from '@app/models/music'
import {
AlbumID3Element,
ArtistID3Element,
ArtistInfo2Element,
ChildElement,
PlaylistElement,
PlaylistWithSongsElement,
} from '@app/subsonic/elements'
import { GetArtistResponse } from '@app/subsonic/responses'
import { GetState, SetState } from 'zustand'
import { Store } from './store'
export type MusicMapSlice = {
mapChildToSong: (child: ChildElement, coverArt?: string) => Promise<Song>
mapChildrenToSongs: (children: ChildElement[], coverArt?: string) => Promise<Song[]>
mapArtistID3toArtist: (artist: ArtistID3Element) => Artist
mapArtistInfo: (
artistResponse: GetArtistResponse,
info: ArtistInfo2Element,
topSongs: ChildElement[],
) => Promise<ArtistInfo>
mapAlbumID3toAlbumListItem: (album: AlbumID3Element) => AlbumListItem
mapAlbumID3toAlbum: (album: AlbumID3Element) => AlbumListItem
mapAlbumID3WithSongstoAlbumWithSongs: (album: AlbumID3Element, songs: ChildElement[]) => Promise<AlbumWithSongs>
mapPlaylistListItem: (playlist: PlaylistElement) => PlaylistListItem
mapPlaylistWithSongs: (playlist: PlaylistWithSongsElement) => Promise<PlaylistWithSongs>
}
export const createMusicMapSlice = (set: SetState<Store>, get: GetState<Store>): MusicMapSlice => ({
mapChildToSong: async (child, coverArt) => {
return {
itemType: 'song',
id: child.id,
album: child.album,
albumId: child.albumId,
artist: child.artist,
artistId: child.artistId,
title: child.title,
track: child.track,
discNumber: child.discNumber,
duration: child.duration,
starred: child.starred,
coverArt: coverArt || (await get().getAlbumCoverArt(child.albumId)),
streamUri: get().buildStreamUri(child.id),
}
},
mapChildrenToSongs: async (children, coverArt) => {
const albumIds = children.reduce((acc, val) => {
if (val.albumId && !(val.albumId in acc)) {
acc[val.albumId] = get().getAlbumCoverArt(val.albumId)
}
return acc
}, {} as Record<string, Promise<string | undefined>>)
await Promise.all(Object.values(albumIds))
const songs: Song[] = []
for (const child of children) {
songs.push(await get().mapChildToSong(child, coverArt || (await get().getAlbumCoverArt(child.albumId))))
}
return songs
},
mapArtistID3toArtist: artist => {
return {
itemType: 'artist',
id: artist.id,
name: artist.name,
starred: artist.starred,
coverArt: artist.coverArt,
}
},
mapArtistInfo: async (artistResponse, info, topSongs) => {
const { artist, albums } = artistResponse
const mappedAlbums = albums.map(get().mapAlbumID3toAlbum)
return {
...get().mapArtistID3toArtist(artist),
albums: mappedAlbums,
smallImageUrl: info.smallImageUrl,
largeImageUrl: info.largeImageUrl,
topSongs: (await get().mapChildrenToSongs(topSongs)).slice(0, 5),
}
},
mapAlbumID3toAlbumListItem: album => {
return {
itemType: 'album',
id: album.id,
name: album.name,
artist: album.artist,
artistId: album.artistId,
starred: album.starred,
coverArt: album.coverArt,
}
},
mapAlbumID3toAlbum: album => {
return {
...get().mapAlbumID3toAlbumListItem(album),
coverArt: album.coverArt,
year: album.year,
}
},
mapAlbumID3WithSongstoAlbumWithSongs: async (album, songs) => {
return {
...get().mapAlbumID3toAlbum(album),
songs: await get().mapChildrenToSongs(songs),
}
},
mapPlaylistListItem: playlist => {
return {
itemType: 'playlist',
id: playlist.id,
name: playlist.name,
comment: playlist.comment,
coverArt: playlist.coverArt,
}
},
mapPlaylistWithSongs: async playlist => {
return {
...get().mapPlaylistListItem(playlist),
songs: await get().mapChildrenToSongs(playlist.songs),
coverArt: playlist.coverArt,
}
},
})

192
app/state/settings.ts
View File

@ -1,21 +1,36 @@
import { AppSettings, ArtistFilterSettings, AlbumFilterSettings, Server } from '@app/models/settings'
import { Store } from '@app/state/store'
import { AlbumFilterSettings, ArtistFilterSettings, Server } from '@app/models/settings'
import { ById } from '@app/models/state'
import { GetStore, SetStore } from '@app/state/store'
import { SubsonicApiClient } from '@app/subsonic/api'
import produce from 'immer'
import { GetState, SetState } from 'zustand'
export type SettingsSlice = {
settings: AppSettings
settings: {
servers: ById<Server>
activeServerId?: string
screens: {
home: {
listTypes: string[]
}
library: {
albumsFilter: AlbumFilterSettings
artistsFilter: ArtistFilterSettings
}
}
scrobble: boolean
maxBitrateWifi: number
maxBitrateMobile: number
minBuffer: number
maxBuffer: number
}
client?: SubsonicApiClient
setActiveServer: (id: string | undefined, force?: boolean) => Promise<void>
getActiveServer: () => Server | undefined
addServer: (server: Server) => Promise<void>
removeServer: (id: string) => Promise<void>
updateServer: (server: Server) => void
setScrobble: (scrobble: boolean) => void
setEstimateContentLength: (estimateContentLength: boolean) => void
setMaxBitrateWifi: (maxBitrateWifi: number) => void
setMaxBitrateMobile: (maxBitrateMobile: number) => void
setMinBuffer: (minBuffer: number) => void
@ -27,66 +42,26 @@ export type SettingsSlice = {
setLibraryArtistFiler: (filter: ArtistFilterSettings) => void
}
export const selectSettings = {
client: (state: SettingsSlice) => state.client,
firstRun: (state: SettingsSlice) => state.settings.servers.length === 0,
activeServer: (state: SettingsSlice) => state.settings.servers.find(s => s.id === state.settings.activeServer),
setActiveServer: (state: SettingsSlice) => state.setActiveServer,
servers: (state: SettingsSlice) => state.settings.servers,
addServer: (state: SettingsSlice) => state.addServer,
removeServer: (state: SettingsSlice) => state.removeServer,
updateServer: (state: SettingsSlice) => state.updateServer,
homeLists: (state: SettingsSlice) => state.settings.screens.home.lists,
scrobble: (state: SettingsSlice) => state.settings.scrobble,
setScrobble: (state: SettingsSlice) => state.setScrobble,
estimateContentLength: (state: SettingsSlice) => state.settings.estimateContentLength,
setEstimateContentLength: (state: SettingsSlice) => state.setEstimateContentLength,
maxBitrateWifi: (state: SettingsSlice) => state.settings.maxBitrateWifi,
setMaxBitrateWifi: (state: SettingsSlice) => state.setMaxBitrateWifi,
maxBitrateMobile: (state: SettingsSlice) => state.settings.maxBitrateMobile,
setMaxBitrateMobile: (state: SettingsSlice) => state.setMaxBitrateMobile,
minBuffer: (state: SettingsSlice) => state.settings.minBuffer,
setMinBuffer: (state: SettingsSlice) => state.setMinBuffer,
maxBuffer: (state: SettingsSlice) => state.settings.maxBuffer,
setMaxBuffer: (state: SettingsSlice) => state.setMaxBuffer,
pingServer: (state: SettingsSlice) => state.pingServer,
setLibraryAlbumFilter: (state: SettingsSlice) => state.setLibraryAlbumFilter,
libraryAlbumFilter: (state: SettingsSlice) => state.settings.screens.library.albums,
setLibraryArtistFiler: (state: SettingsSlice) => state.setLibraryArtistFiler,
libraryArtistFilter: (state: SettingsSlice) => state.settings.screens.library.artists,
}
export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>): SettingsSlice => ({
export const createSettingsSlice = (set: SetStore, get: GetStore): SettingsSlice => ({
settings: {
servers: [],
servers: {},
screens: {
home: {
lists: ['frequent', 'recent', 'starred', 'random'],
listTypes: ['frequent', 'recent', 'starred', 'random'],
},
library: {
albums: {
albumsFilter: {
type: 'alphabeticalByArtist',
fromYear: 1,
toYear: 9999,
genre: '',
},
artists: {
artistsFilter: {
type: 'alphabeticalByName',
},
},
},
scrobble: false,
estimateContentLength: true,
maxBitrateWifi: 0,
maxBitrateMobile: 192,
minBuffer: 6,
@ -95,12 +70,12 @@ export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>):
setActiveServer: async (id, force) => {
const servers = get().settings.servers
const currentActiveServerId = get().settings.activeServer
const newActiveServer = servers.find(s => s.id === id)
const currentActiveServerId = get().settings.activeServerId
const newActiveServer = id ? servers[id] : undefined
if (!newActiveServer) {
set({
client: undefined,
set(state => {
state.client = undefined
})
return
}
@ -111,26 +86,21 @@ export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>):
get().prepareCache(newActiveServer.id)
set(
produce<Store>(state => {
state.settings.activeServer = newActiveServer.id
set(state => {
state.settings.activeServerId = newActiveServer.id
state.client = new SubsonicApiClient(newActiveServer)
}),
)
get().resetLibrary(state)
})
},
getActiveServer: () => get().settings.servers.find(s => s.id === get().settings.activeServer),
addServer: async server => {
await get().createCache(server.id)
set(
produce<SettingsSlice>(state => {
state.settings.servers.push(server)
}),
)
set(state => {
state.settings.servers[server.id] = server
})
if (get().settings.servers.length === 1) {
if (Object.keys(get().settings.servers).length === 1) {
get().setActiveServer(server.id)
}
},
@ -138,53 +108,31 @@ export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>):
removeServer: async id => {
await get().removeCache(id)
set(
produce<SettingsSlice>(state => {
state.settings.servers = state.settings.servers.filter(s => s.id !== id)
}),
)
set(state => {
delete state.settings.servers[id]
})
},
updateServer: server => {
set(
produce<SettingsSlice>(state => {
state.settings.servers = replaceIndex(
state.settings.servers,
state.settings.servers.findIndex(s => s.id === server.id),
server,
)
}),
)
set(state => {
state.settings.servers[server.id] = server
})
if (get().settings.activeServer === server.id) {
if (get().settings.activeServerId === server.id) {
get().setActiveServer(server.id, true)
}
},
setScrobble: scrobble => {
set(
produce<SettingsSlice>(state => {
set(state => {
state.settings.scrobble = scrobble
}),
)
},
setEstimateContentLength: estimateContentLength => {
set(
produce<SettingsSlice>(state => {
state.settings.estimateContentLength = estimateContentLength
}),
)
get().rebuildQueue()
})
},
setMaxBitrateWifi: maxBitrateWifi => {
set(
produce<SettingsSlice>(state => {
set(state => {
state.settings.maxBitrateWifi = maxBitrateWifi
}),
)
})
if (get().netState === 'wifi') {
get().rebuildQueue()
@ -192,11 +140,9 @@ export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>):
},
setMaxBitrateMobile: maxBitrateMobile => {
set(
produce<SettingsSlice>(state => {
set(state => {
state.settings.maxBitrateMobile = maxBitrateMobile
}),
)
})
if (get().netState === 'mobile') {
get().rebuildQueue()
@ -208,11 +154,9 @@ export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>):
return
}
set(
produce<SettingsSlice>(state => {
set(state => {
state.settings.minBuffer = Math.max(1, Math.min(minBuffer, state.settings.maxBuffer / 2))
}),
)
})
get().rebuildQueue()
},
@ -222,11 +166,9 @@ export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>):
return
}
set(
produce<SettingsSlice>(state => {
set(state => {
state.settings.maxBuffer = Math.min(5 * 60, Math.max(maxBuffer, state.settings.minBuffer * 2))
}),
)
})
get().rebuildQueue()
},
@ -252,24 +194,14 @@ export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>):
},
setLibraryAlbumFilter: filter => {
set(
produce<SettingsSlice>(state => {
state.settings.screens.library.albums = filter
}),
)
set(state => {
state.settings.screens.library.albumsFilter = filter
})
},
setLibraryArtistFiler: filter => {
set(
produce<SettingsSlice>(state => {
state.settings.screens.library.artists = filter
}),
)
set(state => {
state.settings.screens.library.artistsFilter = filter
})
},
})
function replaceIndex<T>(array: T[], index: number, replacement: T): T[] {
const start = array.slice(0, index)
const end = array.slice(index + 1)
return [...start, replacement, ...end]
}

85
app/state/store.ts
View File

@ -1,19 +1,20 @@
import { createMusicSlice, MusicSlice } from '@app/state/music'
import { createSettingsSlice, SettingsSlice } from '@app/state/settings'
import AsyncStorage from '@react-native-async-storage/async-storage'
import create from 'zustand'
import { persist, StateStorage } from 'zustand/middleware'
import equal from 'fast-deep-equal'
import create, { GetState, Mutate, SetState, State, StateCreator, StateSelector, StoreApi } from 'zustand'
import { persist, subscribeWithSelector } from 'zustand/middleware'
import { CacheSlice, createCacheSlice } from './cache'
import { createLibrarySlice, LibrarySlice } from './library'
import migrations from './migrations'
import { createMusicMapSlice, MusicMapSlice } from './musicmap'
import { createTrackPlayerSlice, TrackPlayerSlice } from './trackplayer'
import { createTrackPlayerMapSlice, TrackPlayerMapSlice } from './trackplayermap'
import produce, { Draft } from 'immer'
import { WritableDraft } from 'immer/dist/internal'
const DB_VERSION = migrations.length
export type Store = SettingsSlice &
MusicSlice &
MusicMapSlice &
LibrarySlice &
TrackPlayerSlice &
TrackPlayerMapSlice &
CacheSlice & {
@ -21,45 +22,66 @@ export type Store = SettingsSlice &
setHydrated: (hydrated: boolean) => void
}
const storage: StateStorage = {
getItem: async name => {
try {
return await AsyncStorage.getItem(name)
} catch (err) {
console.error(`getItem error (key: ${name})`, err)
return null
}
// taken from zustand test examples:
// https://github.com/pmndrs/zustand/blob/v3.7.1/tests/middlewareTypes.test.tsx#L20
const immer =
<
T extends State,
CustomSetState extends SetState<T>,
CustomGetState extends GetState<T>,
CustomStoreApi extends StoreApi<T>,
>(
config: StateCreator<
T,
(partial: ((draft: Draft<T>) => void) | T, replace?: boolean) => void,
CustomGetState,
CustomStoreApi
>,
): StateCreator<T, CustomSetState, CustomGetState, CustomStoreApi> =>
(set, get, api) =>
config(
(partial, replace) => {
const nextState = typeof partial === 'function' ? produce(partial as (state: Draft<T>) => T) : (partial as T)
return set(nextState, replace)
},
setItem: async (name, item) => {
try {
await AsyncStorage.setItem(name, item)
} catch (err) {
console.error(`setItem error (key: ${name})`, err)
}
},
}
get,
api,
)
export const useStore = create<Store>(
export type SetStore = (partial: Store | ((draft: WritableDraft<Store>) => void), replace?: boolean | undefined) => void
export type GetStore = GetState<Store>
// types taken from zustand test examples:
// https://github.com/pmndrs/zustand/blob/v3.7.1/tests/middlewareTypes.test.tsx#L584
export const useStore = create<
Store,
SetState<Store>,
GetState<Store>,
Mutate<StoreApi<Store>, [['zustand/subscribeWithSelector', never], ['zustand/persist', Partial<Store>]]>
>(
subscribeWithSelector(
persist(
(set, get) => ({
immer((set, get) => ({
...createSettingsSlice(set, get),
...createMusicSlice(set, get),
...createMusicMapSlice(set, get),
...createLibrarySlice(set, get),
...createTrackPlayerSlice(set, get),
...createTrackPlayerMapSlice(set, get),
...createCacheSlice(set, get),
hydrated: false,
setHydrated: hydrated => set({ hydrated }),
setHydrated: hydrated =>
set(state => {
state.hydrated = hydrated
}),
})),
{
name: '@appStore',
version: DB_VERSION,
getStorage: () => storage,
whitelist: ['settings', 'cacheFiles'],
getStorage: () => AsyncStorage,
partialize: state => ({ settings: state.settings, cacheFiles: state.cacheFiles }),
onRehydrateStorage: _preState => {
return async (postState, _error) => {
await postState?.setActiveServer(postState.settings.activeServer, true)
await postState?.setActiveServer(postState.settings.activeServerId, true)
postState?.setHydrated(true)
}
},
@ -76,4 +98,7 @@ export const useStore = create<Store>(
},
},
),
),
)
export const useStoreDeep = <U>(stateSelector: StateSelector<Store, U>) => useStore(stateSelector, equal)

184
app/state/trackplayer.ts
View File

@ -1,27 +1,10 @@
import { NoClientError } from '@app/models/error'
import { Song } from '@app/models/music'
import { Song } from '@app/models/library'
import { Progress, QueueContextType, TrackExt } from '@app/models/trackplayer'
import PromiseQueue from '@app/util/PromiseQueue'
import produce from 'immer'
import TrackPlayer, { PlayerOptions, RepeatMode, State, Track } from 'react-native-track-player'
import { GetState, SetState } from 'zustand'
import { Store } from './store'
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'
import TrackPlayer, { PlayerOptions, RepeatMode, State } from 'react-native-track-player'
import { GetStore, SetStore } from './store'
export type TrackPlayerSlice = {
queueName?: string
@ -74,55 +57,26 @@ export type TrackPlayerSlice = {
getPlayerOptions: () => PlayerOptions
}
export const selectTrackPlayer = {
queueName: (store: TrackPlayerSlice) => store.queueName,
setQueueName: (store: TrackPlayerSlice) => store.setQueueName,
queueContextType: (store: TrackPlayerSlice) => store.queueContextType,
setQueueContextType: (store: TrackPlayerSlice) => store.setQueueContextType,
queueContextId: (store: TrackPlayerSlice) => store.queueContextId,
setQueueContextId: (store: TrackPlayerSlice) => store.setQueueContextId,
shuffleOrder: (store: TrackPlayerSlice) => store.shuffleOrder,
shuffled: (store: TrackPlayerSlice) => !!store.shuffleOrder,
toggleShuffle: (store: TrackPlayerSlice) => store.toggleShuffle,
repeatMode: (store: TrackPlayerSlice) => store.repeatMode,
toggleRepeatMode: (store: TrackPlayerSlice) => store.toggleRepeatMode,
playerState: (store: TrackPlayerSlice) => store.playerState,
setPlayerState: (store: TrackPlayerSlice) => store.setPlayerState,
currentTrack: (store: TrackPlayerSlice) => store.currentTrack,
currentTrackIdx: (store: TrackPlayerSlice) => store.currentTrackIdx,
setCurrentTrackIdx: (store: TrackPlayerSlice) => store.setCurrentTrackIdx,
queue: (store: TrackPlayerSlice) => store.queue,
setQueue: (store: TrackPlayerSlice) => store.setQueue,
progress: (store: TrackPlayerSlice) => store.progress,
setProgress: (store: TrackPlayerSlice) => store.setProgress,
scrobbleTrack: (store: TrackPlayerSlice) => store.scrobbleTrack,
setNetState: (store: TrackPlayerSlice) => store.setNetState,
buildStreamUri: (store: TrackPlayerSlice) => store.buildStreamUri,
resetTrackPlayerState: (store: TrackPlayerSlice) => store.resetTrackPlayerState,
}
export const trackPlayerCommands = new PromiseQueue(1)
export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store>): TrackPlayerSlice => ({
export const createTrackPlayerSlice = (set: SetStore, get: GetStore): TrackPlayerSlice => ({
queueName: undefined,
setQueueName: name => set({ queueName: name }),
setQueueName: name =>
set(state => {
state.queueName = name
}),
queueContextType: undefined,
setQueueContextType: queueContextType => set({ queueContextType }),
setQueueContextType: queueContextType =>
set(state => {
state.queueContextType = queueContextType
}),
queueContextId: undefined,
setQueueContextId: queueContextId => set({ queueContextId }),
setQueueContextId: queueContextId =>
set(state => {
state.queueContextId = queueContextId
}),
shuffleOrder: undefined,
toggleShuffle: async () => {
@ -140,7 +94,9 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
}
await TrackPlayer.add(tracks)
set({ shuffleOrder })
set(state => {
state.shuffleOrder = shuffleOrder
})
} else {
const tracks = unshuffleTracks(queue, queueShuffleOrder)
@ -155,11 +111,18 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
await TrackPlayer.add(tracks)
}
set({ shuffleOrder: undefined })
set(state => {
state.shuffleOrder = undefined
})
}
set({ queue: await getQueue() })
get().setCurrentTrackIdx(await getCurrentTrack())
const newQueue = await getQueue()
const newCurrentTrackIdx = await getCurrentTrack()
set(state => {
state.queue = newQueue
})
get().setCurrentTrackIdx(newCurrentTrackIdx)
})
},
@ -182,12 +145,17 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
}
await TrackPlayer.setRepeatMode(nextMode)
set({ repeatMode: nextMode })
set(state => {
state.repeatMode = nextMode
})
})
},
playerState: State.None,
setPlayerState: playerState => set({ playerState }),
setPlayerState: playerState =>
set(state => {
state.playerState = playerState
}),
currentTrack: undefined,
currentTrackIdx: undefined,
@ -201,7 +169,10 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
},
duckPaused: false,
setDuckPaused: duckPaused => set({ duckPaused }),
setDuckPaused: duckPaused =>
set(state => {
state.duckPaused = duckPaused
}),
queue: [],
setQueue: async (songs, name, contextType, contextId, playTrack, shuffle) => {
@ -217,31 +188,27 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
let queue = await get().mapSongstoTrackExts(songs)
try {
for (const t of queue) {
t.url = get().buildStreamUri(t.id)
}
} catch {
return
}
if (shuffled) {
const { tracks, shuffleOrder } = shuffleTracks(queue, playTrack)
set({ shuffleOrder })
set(state => {
state.shuffleOrder = shuffleOrder
})
queue = tracks
playTrack = 0
} else {
set({ shuffleOrder: undefined })
set(state => {
state.shuffleOrder = undefined
})
}
playTrack = playTrack || 0
try {
set({
queue,
queueName: name,
queueContextType: contextType,
queueContextId: contextId,
set(state => {
state.queue = queue
state.queueName = name
state.queueContextType = contextType
state.queueContextId = contextId
})
get().setCurrentTrackIdx(playTrack)
@ -264,7 +231,10 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
},
progress: { position: 0, duration: 0, buffered: 0 },
setProgress: progress => set({ progress }),
setProgress: progress =>
set(state => {
state.progress = progress
}),
scrobbleTrack: async id => {
const client = get().client
@ -286,7 +256,9 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
if (netState === get().netState) {
return
}
set({ netState })
set(state => {
state.netState = netState
})
get().rebuildQueue()
},
@ -298,7 +270,7 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
}
const currentTrack = await getCurrentTrack()
const state = await getPlayerState()
const playerState = await getPlayerState()
const position = (await TrackPlayer.getPosition()) || 0
const queueName = get().queueName
@ -316,11 +288,11 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
return
}
set({
queue,
queueName,
queueContextId,
queueContextType,
set(state => {
state.queue = queue
state.queueName = queueName
state.queueContextType = queueContextType
state.queueContextId = queueContextId
})
get().setCurrentTrackIdx(currentTrack)
@ -332,7 +304,7 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
await TrackPlayer.seekTo(position)
if (state === State.Playing || forcePlay) {
if (playerState === State.Playing || forcePlay) {
await TrackPlayer.play()
}
})
@ -346,23 +318,23 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
return client.streamUri({
id,
estimateContentLength: get().settings.estimateContentLength,
estimateContentLength: true,
maxBitRate: get().netState === 'mobile' ? get().settings.maxBitrateMobile : get().settings.maxBitrateWifi,
})
},
resetTrackPlayerState: () => {
set({
queueName: undefined,
queueContextType: undefined,
queueContextId: undefined,
shuffleOrder: undefined,
repeatMode: RepeatMode.Off,
playerState: State.None,
currentTrack: undefined,
currentTrackIdx: undefined,
queue: [],
progress: { position: 0, duration: 0, buffered: 0 },
set(state => {
state.queueName = undefined
state.queueContextType = undefined
state.queueContextId = undefined
state.shuffleOrder = undefined
state.repeatMode = RepeatMode.Off
state.playerState = State.None
state.currentTrack = undefined
state.currentTrackIdx = undefined
state.queue = []
state.progress = { position: 0, duration: 0, buffered: 0 }
})
},

15
app/state/trackplayermap.ts
View File

@ -1,8 +1,7 @@
import { Song } from '@app/models/music'
import { Song } from '@app/models/library'
import { TrackExt } from '@app/models/trackplayer'
import userAgent from '@app/util/userAgent'
import { GetState, SetState } from 'zustand'
import { Store } from './store'
import { TrackExt } from './trackplayer'
import { GetStore, SetStore } from '@app/state/store'
export type TrackPlayerMapSlice = {
mapSongtoTrackExt: (song: Song) => Promise<TrackExt>
@ -10,11 +9,7 @@ export type TrackPlayerMapSlice = {
mapTrackExtToSong: (song: TrackExt) => Song
}
export const selectTrackPlayerMap = {
mapTrackExtToSong: (store: TrackPlayerMapSlice) => store.mapTrackExtToSong,
}
export const createTrackPlayerMapSlice = (set: SetState<Store>, get: GetState<Store>): TrackPlayerMapSlice => ({
export const createTrackPlayerMapSlice = (set: SetStore, get: GetStore): TrackPlayerMapSlice => ({
mapSongtoTrackExt: async song => {
let artwork = require('@res/fallback.png')
if (song.coverArt) {
@ -29,7 +24,7 @@ export const createTrackPlayerMapSlice = (set: SetState<Store>, get: GetState<St
title: song.title,
artist: song.artist || 'Unknown Artist',
album: song.album || 'Unknown Album',
url: song.streamUri,
url: get().buildStreamUri(song.id),
userAgent,
artwork,
coverArt: song.coverArt,

93
app/subsonic/api.ts
View File

@ -11,6 +11,7 @@ import {
GetMusicDirectoryParams,
GetPlaylistParams,
GetPlaylistsParams,
GetSongParams,
GetTopSongsParams,
ScrobbleParams,
Search3Params,
@ -29,9 +30,10 @@ import {
GetMusicDirectoryResponse,
GetPlaylistResponse,
GetPlaylistsResponse,
GetSongResponse,
GetTopSongsResponse,
NullResponse,
Search3Response,
SubsonicResponse,
} from '@app/subsonic/responses'
import toast from '@app/util/toast'
import userAgent from '@app/util/userAgent'
@ -131,81 +133,72 @@ export class SubsonicApiClient {
// System
//
async ping(): Promise<SubsonicResponse<null>> {
const xml = await this.apiGetXml('ping')
return new SubsonicResponse<null>(xml, null)
async ping(): Promise<NullResponse> {
return new NullResponse(await this.apiGetXml('ping'))
}
//
// Browsing
//
async getArtists(): Promise<SubsonicResponse<GetArtistsResponse>> {
const xml = await this.apiGetXml('getArtists')
return new SubsonicResponse<GetArtistsResponse>(xml, new GetArtistsResponse(xml))
async getArtists(): Promise<GetArtistsResponse> {
return new GetArtistsResponse(await this.apiGetXml('getArtists'))
}
async getIndexes(params?: GetIndexesParams): Promise<SubsonicResponse<GetIndexesResponse>> {
const xml = await this.apiGetXml('getIndexes', params)
return new SubsonicResponse<GetIndexesResponse>(xml, new GetIndexesResponse(xml))
async getIndexes(params?: GetIndexesParams): Promise<GetIndexesResponse> {
return new GetIndexesResponse(await this.apiGetXml('getIndexes', params))
}
async getMusicDirectory(params: GetMusicDirectoryParams): Promise<SubsonicResponse<GetMusicDirectoryResponse>> {
const xml = await this.apiGetXml('getMusicDirectory', params)
return new SubsonicResponse<GetMusicDirectoryResponse>(xml, new GetMusicDirectoryResponse(xml))
async getMusicDirectory(params: GetMusicDirectoryParams): Promise<GetMusicDirectoryResponse> {
return new GetMusicDirectoryResponse(await this.apiGetXml('getMusicDirectory', params))
}
async getAlbum(params: GetAlbumParams): Promise<SubsonicResponse<GetAlbumResponse>> {
const xml = await this.apiGetXml('getAlbum', params)
return new SubsonicResponse<GetAlbumResponse>(xml, new GetAlbumResponse(xml))
async getAlbum(params: GetAlbumParams): Promise<GetAlbumResponse> {
return new GetAlbumResponse(await this.apiGetXml('getAlbum', params))
}
async getArtistInfo(params: GetArtistInfoParams): Promise<SubsonicResponse<GetArtistInfoResponse>> {
const xml = await this.apiGetXml('getArtistInfo', params)
return new SubsonicResponse<GetArtistInfoResponse>(xml, new GetArtistInfoResponse(xml))
async getArtistInfo(params: GetArtistInfoParams): Promise<GetArtistInfoResponse> {
return new GetArtistInfoResponse(await this.apiGetXml('getArtistInfo', params))
}
async getArtistInfo2(params: GetArtistInfo2Params): Promise<SubsonicResponse<GetArtistInfo2Response>> {
const xml = await this.apiGetXml('getArtistInfo2', params)
return new SubsonicResponse<GetArtistInfo2Response>(xml, new GetArtistInfo2Response(xml))
async getArtistInfo2(params: GetArtistInfo2Params): Promise<GetArtistInfo2Response> {
return new GetArtistInfo2Response(await this.apiGetXml('getArtistInfo2', params))
}
async getArtist(params: GetArtistParams): Promise<SubsonicResponse<GetArtistResponse>> {
const xml = await this.apiGetXml('getArtist', params)
return new SubsonicResponse<GetArtistResponse>(xml, new GetArtistResponse(xml))
async getArtist(params: GetArtistParams): Promise<GetArtistResponse> {
return new GetArtistResponse(await this.apiGetXml('getArtist', params))
}
async getTopSongs(params: GetTopSongsParams): Promise<SubsonicResponse<GetTopSongsResponse>> {
const xml = await this.apiGetXml('getTopSongs', params)
return new SubsonicResponse<GetTopSongsResponse>(xml, new GetTopSongsResponse(xml))
async getTopSongs(params: GetTopSongsParams): Promise<GetTopSongsResponse> {
return new GetTopSongsResponse(await this.apiGetXml('getTopSongs', params))
}
async getSong(params: GetSongParams): Promise<GetSongResponse> {
return new GetSongResponse(await this.apiGetXml('getSong', params))
}
//
// Album/song lists
//
async getAlbumList(params: GetAlbumListParams): Promise<SubsonicResponse<GetAlbumListResponse>> {
const xml = await this.apiGetXml('getAlbumList', params)
return new SubsonicResponse<GetAlbumListResponse>(xml, new GetAlbumListResponse(xml))
async getAlbumList(params: GetAlbumListParams): Promise<GetAlbumListResponse> {
return new GetAlbumListResponse(await this.apiGetXml('getAlbumList', params))
}
async getAlbumList2(params: GetAlbumList2Params): Promise<SubsonicResponse<GetAlbumList2Response>> {
const xml = await this.apiGetXml('getAlbumList2', params)
return new SubsonicResponse<GetAlbumList2Response>(xml, new GetAlbumList2Response(xml))
async getAlbumList2(params: GetAlbumList2Params): Promise<GetAlbumList2Response> {
return new GetAlbumList2Response(await this.apiGetXml('getAlbumList2', params))
}
//
// Playlists
//
async getPlaylists(params?: GetPlaylistsParams): Promise<SubsonicResponse<GetPlaylistsResponse>> {
const xml = await this.apiGetXml('getPlaylists', params)
return new SubsonicResponse<GetPlaylistsResponse>(xml, new GetPlaylistsResponse(xml))
async getPlaylists(params?: GetPlaylistsParams): Promise<GetPlaylistsResponse> {
return new GetPlaylistsResponse(await this.apiGetXml('getPlaylists', params))
}
async getPlaylist(params: GetPlaylistParams): Promise<SubsonicResponse<GetPlaylistResponse>> {
const xml = await this.apiGetXml('getPlaylist', params)
return new SubsonicResponse<GetPlaylistResponse>(xml, new GetPlaylistResponse(xml))
async getPlaylist(params: GetPlaylistParams): Promise<GetPlaylistResponse> {
return new GetPlaylistResponse(await this.apiGetXml('getPlaylist', params))
}
//
@ -224,27 +217,23 @@ export class SubsonicApiClient {
// Media annotation
//
async scrobble(params: ScrobbleParams): Promise<SubsonicResponse<undefined>> {
const xml = await this.apiGetXml('scrobble', params)
return new SubsonicResponse<undefined>(xml, undefined)
async scrobble(params: ScrobbleParams): Promise<NullResponse> {
return new NullResponse(await this.apiGetXml('scrobble', params))
}
async star(params: StarParams): Promise<SubsonicResponse<undefined>> {
const xml = await this.apiGetXml('star', params)
return new SubsonicResponse<undefined>(xml, undefined)
async star(params: StarParams): Promise<NullResponse> {
return new NullResponse(await this.apiGetXml('star', params))
}
async unstar(params: StarParams): Promise<SubsonicResponse<undefined>> {
const xml = await this.apiGetXml('unstar', params)
return new SubsonicResponse<undefined>(xml, undefined)
async unstar(params: StarParams): Promise<NullResponse> {
return new NullResponse(await this.apiGetXml('unstar', params))
}
//
// Searching
//
async search3(params: Search3Params): Promise<SubsonicResponse<Search3Response>> {
const xml = await this.apiGetXml('search3', params)
return new SubsonicResponse<Search3Response>(xml, new Search3Response(xml))
async search3(params: Search3Params): Promise<Search3Response> {
return new Search3Response(await this.apiGetXml('search3', params))
}
}

4
app/subsonic/params.ts
View File

@ -27,6 +27,10 @@ export type GetArtistParams = {
id: string
}
export type GetSongParams = {
id: string
}
export type GetTopSongsParams = {
artist: string
count?: number

196
app/subsonic/responses.ts
View File

@ -12,119 +12,160 @@ import {
export type ResponseStatus = 'ok' | 'failed'
export class SubsonicResponse<T> {
export class SubsonicResponse {
status: ResponseStatus
version: string
data: T
constructor(xml: Document, data: T) {
this.data = data
constructor(xml: Document) {
this.status = xml.documentElement.getAttribute('status') as ResponseStatus
this.version = xml.documentElement.getAttribute('version') as string
}
}
export class NullResponse extends SubsonicResponse {
data = null
}
//
// Browsing
//
export class GetArtistsResponse {
export class GetArtistsResponse extends SubsonicResponse {
data: {
ignoredArticles: string
artists: ArtistID3Element[] = []
artists: ArtistID3Element[]
}
constructor(xml: Document) {
this.ignoredArticles = xml.getElementsByTagName('artists')[0].getAttribute('ignoredArticles') as string
super(xml)
const artistElements = xml.getElementsByTagName('artist')
for (let i = 0; i < artistElements.length; i++) {
this.artists.push(new ArtistID3Element(artistElements[i]))
this.data = {
ignoredArticles: xml.getElementsByTagName('artists')[0].getAttribute('ignoredArticles') || '',
artists: Array.from(xml.getElementsByTagName('artist')).map(i => new ArtistID3Element(i)),
}
}
}
export class GetArtistResponse {
export class GetArtistResponse extends SubsonicResponse {
data: {
artist: ArtistID3Element
albums: AlbumID3Element[] = []
albums: AlbumID3Element[]
}
constructor(xml: Document) {
this.artist = new ArtistID3Element(xml.getElementsByTagName('artist')[0])
super(xml)
const albumElements = xml.getElementsByTagName('album')
for (let i = 0; i < albumElements.length; i++) {
this.albums.push(new AlbumID3Element(albumElements[i]))
this.data = {
artist: new ArtistID3Element(xml.getElementsByTagName('artist')[0]),
albums: Array.from(xml.getElementsByTagName('album')).map(i => new AlbumID3Element(i)),
}
}
}
export class GetIndexesResponse {
export class GetIndexesResponse extends SubsonicResponse {
data: {
ignoredArticles: string
lastModified: number
artists: ArtistElement[] = []
artists: ArtistElement[]
}
constructor(xml: Document) {
super(xml)
const indexesElement = xml.getElementsByTagName('indexes')[0]
this.ignoredArticles = indexesElement.getAttribute('ignoredArticles') as string
this.lastModified = parseInt(indexesElement.getAttribute('lastModified') as string, 10)
const artistElements = xml.getElementsByTagName('artist')
for (let i = 0; i < artistElements.length; i++) {
this.artists.push(new ArtistElement(artistElements[i]))
this.data = {
ignoredArticles: indexesElement.getAttribute('ignoredArticles') || '',
lastModified: parseInt(indexesElement.getAttribute('lastModified') || '0', 10),
artists: Array.from(xml.getElementsByTagName('artist')).map(i => new ArtistElement(i)),
}
}
}
export class GetArtistInfoResponse {
export class GetArtistInfoResponse extends SubsonicResponse {
data: {
artistInfo: ArtistInfoElement
}
constructor(xml: Document) {
this.artistInfo = new ArtistInfoElement(xml.getElementsByTagName('artistInfo')[0])
super(xml)
this.data = {
artistInfo: new ArtistInfoElement(xml.getElementsByTagName('artistInfo')[0]),
}
}
}
export class GetArtistInfo2Response {
export class GetArtistInfo2Response extends SubsonicResponse {
data: {
artistInfo: ArtistInfo2Element
}
constructor(xml: Document) {
this.artistInfo = new ArtistInfo2Element(xml.getElementsByTagName('artistInfo2')[0])
super(xml)
this.data = {
artistInfo: new ArtistInfo2Element(xml.getElementsByTagName('artistInfo2')[0]),
}
}
}
export class GetMusicDirectoryResponse {
export class GetMusicDirectoryResponse extends SubsonicResponse {
data: {
directory: DirectoryElement
children: ChildElement[] = []
children: ChildElement[]
}
constructor(xml: Document) {
this.directory = new DirectoryElement(xml.getElementsByTagName('directory')[0])
super(xml)
const childElements = xml.getElementsByTagName('child')
for (let i = 0; i < childElements.length; i++) {
this.children.push(new ChildElement(childElements[i]))
this.data = {
directory: new DirectoryElement(xml.getElementsByTagName('directory')[0]),
children: Array.from(xml.getElementsByTagName('child')).map(i => new ChildElement(i)),
}
}
}
export class GetAlbumResponse {
export class GetAlbumResponse extends SubsonicResponse {
data: {
album: AlbumID3Element
songs: ChildElement[] = []
songs: ChildElement[]
}
constructor(xml: Document) {
this.album = new AlbumID3Element(xml.getElementsByTagName('album')[0])
super(xml)
const childElements = xml.getElementsByTagName('song')
for (let i = 0; i < childElements.length; i++) {
this.songs.push(new ChildElement(childElements[i]))
this.data = {
album: new AlbumID3Element(xml.getElementsByTagName('album')[0]),
songs: Array.from(xml.getElementsByTagName('song')).map(i => new ChildElement(i)),
}
}
}
export class GetTopSongsResponse {
songs: ChildElement[] = []
export class GetTopSongsResponse extends SubsonicResponse {
data: {
songs: ChildElement[]
}
constructor(xml: Document) {
const childElements = xml.getElementsByTagName('song')
for (let i = 0; i < childElements.length; i++) {
this.songs.push(new ChildElement(childElements[i]))
super(xml)
this.data = {
songs: Array.from(xml.getElementsByTagName('song')).map(i => new ChildElement(i)),
}
}
}
export class GetSongResponse extends SubsonicResponse {
data: {
song: ChildElement
}
constructor(xml: Document) {
super(xml)
this.data = {
song: new ChildElement(xml.getElementsByTagName('song')[0]),
}
}
}
@ -133,13 +174,16 @@ export class GetTopSongsResponse {
// Album/song lists
//
class BaseGetAlbumListResponse<T> {
albums: T[] = []
class BaseGetAlbumListResponse<T> extends SubsonicResponse {
data: {
albums: T[]
}
constructor(xml: Document, albumType: new (e: Element) => T) {
const albumElements = xml.getElementsByTagName('album')
for (let i = 0; i < albumElements.length; i++) {
this.albums.push(new albumType(albumElements[i]))
constructor(xml: Document, AlbumType: new (e: Element) => T) {
super(xml)
this.data = {
albums: Array.from(xml.getElementsByTagName('album')).map(i => new AlbumType(i)),
}
}
}
@ -160,22 +204,31 @@ export class GetAlbumList2Response extends BaseGetAlbumListResponse<AlbumID3Elem
// Playlists
//
export class GetPlaylistsResponse {
playlists: PlaylistElement[] = []
export class GetPlaylistsResponse extends SubsonicResponse {
data: {
playlists: PlaylistElement[]
}
constructor(xml: Document) {
const playlistElements = xml.getElementsByTagName('playlist')
for (let i = 0; i < playlistElements.length; i++) {
this.playlists.push(new PlaylistElement(playlistElements[i]))
super(xml)
this.data = {
playlists: Array.from(xml.getElementsByTagName('playlist')).map(i => new PlaylistElement(i)),
}
}
}
export class GetPlaylistResponse {
export class GetPlaylistResponse extends SubsonicResponse {
data: {
playlist: PlaylistWithSongsElement
}
constructor(xml: Document) {
this.playlist = new PlaylistWithSongsElement(xml.getElementsByTagName('playlist')[0])
super(xml)
this.data = {
playlist: new PlaylistWithSongsElement(xml.getElementsByTagName('playlist')[0]),
}
}
}
@ -183,25 +236,20 @@ export class GetPlaylistResponse {
// Searching
//
export class Search3Response {
artists: ArtistID3Element[] = []
albums: AlbumID3Element[] = []
songs: ChildElement[] = []
export class Search3Response extends SubsonicResponse {
data: {
artists: ArtistID3Element[]
albums: AlbumID3Element[]
songs: ChildElement[]
}
constructor(xml: Document) {
const artistElements = xml.getElementsByTagName('artist')
for (let i = 0; i < artistElements.length; i++) {
this.artists.push(new ArtistID3Element(artistElements[i]))
}
super(xml)
const albumElements = xml.getElementsByTagName('album')
for (let i = 0; i < albumElements.length; i++) {
this.albums.push(new AlbumID3Element(albumElements[i]))
}
const songElements = xml.getElementsByTagName('song')
for (let i = 0; i < songElements.length; i++) {
this.songs.push(new ChildElement(songElements[i]))
this.data = {
artists: Array.from(xml.getElementsByTagName('artist')).map(i => new ArtistID3Element(i)),
albums: Array.from(xml.getElementsByTagName('album')).map(i => new AlbumID3Element(i)),
songs: Array.from(xml.getElementsByTagName('song')).map(i => new ChildElement(i)),
}
}
}

21
app/util/state.ts Normal file
View File

@ -0,0 +1,21 @@
import { ById } from '@app/models/state'
import merge from 'lodash.merge'
export function reduceById<T extends { id: string }>(collection: T[]): ById<T> {
return collection.reduce((acc, value) => {
acc[value.id] = value
return acc
}, {} as ById<T>)
}
export function mergeById<T extends { [id: string]: unknown }>(object: T, source: T): void {
merge(object, source)
}
export function mapById<T>(object: ById<T>, ids: string[]): T[] {
return ids.map(id => object[id]).filter(a => a !== undefined)
}
export function mapId(entities: { id: string }[]): string[] {
return entities.map(e => e.id)
}

7
index.js
View File

@ -5,7 +5,12 @@ import { enableScreens } from 'react-native-screens'
enableScreens()
import { LogBox } from 'react-native'
LogBox.ignoreLogs(["The action 'POP_TO_TOP'"])
LogBox.ignoreLogs([
"The action 'POP_TO_TOP'",
'`new NativeEventEmitter()` was called with a non-null argument without the required `addListener` method.',
'`new NativeEventEmitter()` was called with a non-null argument without the required `removeListeners` method.',
"[react-native-gesture-handler] Seems like you're using an old API with gesture components, check out new Gestures system!",
])
import { AppRegistry } from 'react-native'
import App from '@app/App'

11
package.json
View File

@ -29,13 +29,16 @@
"@react-navigation/native": "^5.9.4",
"@types/react": "^17",
"@xmldom/xmldom": "^0.7.0",
"fast-deep-equal": "^3.1.3",
"immer": "^9.0.6",
"lodash.debounce": "^4.0.8",
"lodash.merge": "^4.6.2",
"lodash.pick": "^4.4.0",
"md5": "^2.3.0",
"react": "17.0.2",
"react-native": "0.67.1",
"react-native-fs": "^2.18.0",
"react-native-gesture-handler": "^1.10.3",
"react-native-gesture-handler": "^2.3.2",
"react-native-get-random-values": "^1.7.0",
"react-native-image-colors": "^1.3.0",
"react-native-linear-gradient": "^2.5.6",
@ -48,7 +51,7 @@
"react-native-vector-icons": "^8.1.0",
"react-native-webview": "^11.13.0",
"uuid": "^8.3.2",
"zustand": "^3.5.7"
"zustand": "^3.7.1"
},
"devDependencies": {
"@babel/core": "^7.12.9",
@ -56,6 +59,8 @@
"@react-native-community/eslint-config": "^2.0.0",
"@types/jest": "^26.0.23",
"@types/lodash.debounce": "^4.0.6",
"@types/lodash.merge": "^4.6.6",
"@types/lodash.pick": "^4.4.6",
"@types/md5": "^2.3.0",
"@types/react-native-vector-icons": "^6.4.7",
"@types/react-test-renderer": "^16.9.2",
@ -66,7 +71,7 @@
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.64.0",
"react-test-renderer": "17.0.1",
"typescript": "^3.8.3",
"typescript": "^4.6.2",
"uri-scheme": "^1.0.91"
},
"resolutions": {

2
tsconfig.json
View File

@ -59,5 +59,5 @@
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
"resolveJsonModule": true
},
"exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js", "submodules"]
"exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js", "submodules", "ndk"]
}

93
yarn.lock
View File

@ -1492,6 +1492,20 @@
dependencies:
"@types/lodash" "*"
"@types/lodash.merge@^4.6.6":
version "4.6.6"
resolved "https://registry.yarnpkg.com/@types/lodash.merge/-/lodash.merge-4.6.6.tgz#b84b403c1d31bc42d51772d1cd5557fa008cd3d6"
integrity sha512-IB90krzMf7YpfgP3u/EvZEdXVvm4e3gJbUvh5ieuI+o+XqiNEt6fCzqNRaiLlPVScLI59RxIGZMQ3+Ko/DJ8vQ==
dependencies:
"@types/lodash" "*"
"@types/lodash.pick@^4.4.6":
version "4.4.6"
resolved "https://registry.yarnpkg.com/@types/lodash.pick/-/lodash.pick-4.4.6.tgz#ae4e8f109e982786313bb6aac4b1a73aefa6e9be"
integrity sha512-u8bzA16qQ+8dY280z3aK7PoWb3fzX5ATJ0rJB6F+uqchOX2VYF02Aqa+8aYiHiHgPzQiITqCgeimlyKFy4OA6g==
dependencies:
"@types/lodash" "*"
"@types/lodash@*", "@types/lodash@^4.14.53":
version "4.14.178"
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.178.tgz#341f6d2247db528d4a13ddbb374bcdc80406f4f8"
@ -1877,7 +1891,7 @@ array.prototype.flatmap@^1.2.5:
define-properties "^1.1.3"
es-abstract "^1.19.0"
asap@~2.0.3, asap@~2.0.6:
asap@~2.0.6:
version "2.0.6"
resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
@ -2543,13 +2557,6 @@ cosmiconfig@^5.0.5, cosmiconfig@^5.1.0:
js-yaml "^3.13.1"
parse-json "^4.0.0"
cross-fetch@^3.0.4:
version "3.1.4"
resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.4.tgz#9723f3a3a247bf8b89039f3a380a9244e8fa2f39"
integrity sha512-1eAtFWdIubi6T4XPy6ei9iUFoKpUkIF971QLN8lIvvvwueI65+Nw5haMNKUwfJxabqlIIDODJKGrQ66gxC0PbQ==
dependencies:
node-fetch "2.6.1"
cross-spawn@^6.0.0:
version "6.0.5"
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
@ -3210,24 +3217,6 @@ fb-watchman@^2.0.0:
dependencies:
bser "2.1.1"
fbjs-css-vars@^1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz#216551136ae02fe255932c3ec8775f18e2c078b8"
integrity sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==
fbjs@^3.0.0:
version "3.0.2"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-3.0.2.tgz#dfae08a85c66a58372993ce2caf30863f569ff94"
integrity sha512-qv+boqYndjElAJHNN3NoM8XuwQZ1j2m3kEvTgdle8IDjr6oUbkEpvABWtj/rQl3vq4ew7dnElBxL4YJAwTVqQQ==
dependencies:
cross-fetch "^3.0.4"
fbjs-css-vars "^1.0.0"
loose-envify "^1.0.0"
object-assign "^4.1.0"
promise "^7.1.1"
setimmediate "^1.0.5"
ua-parser-js "^0.7.30"
file-entry-cache@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
@ -4783,7 +4772,7 @@ lodash.truncate@^4.4.2:
resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=
lodash@^4.17.10, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.7.0:
lodash@^4.17.10, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@ -5351,11 +5340,6 @@ node-dir@^0.1.17:
dependencies:
minimatch "^3.0.2"
node-fetch@2.6.1:
version "2.6.1"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
node-fetch@^2.2.0, node-fetch@^2.6.0:
version "2.6.7"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
@ -5454,7 +5438,7 @@ ob1@0.66.2:
resolved "https://registry.yarnpkg.com/ob1/-/ob1-0.66.2.tgz#8caf548202cf2688944bae47db405a08bca17a61"
integrity sha512-RFewnL/RjE0qQBOuM+2bbY96zmJPIge/aDtsiDbLSb+MOiK8CReAhBHDgL+zrA3F1hQk00lMWpUwYcep750plA==
object-assign@^4.1.0, object-assign@^4.1.1:
object-assign@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
@ -5880,13 +5864,6 @@ progress@^2.0.0:
resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
promise@^7.1.1:
version "7.3.1"
resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
dependencies:
asap "~2.0.3"
promise@^8.0.3:
version "8.1.0"
resolved "https://registry.yarnpkg.com/promise/-/promise-8.1.0.tgz#697c25c3dfe7435dd79fcd58c38a135888eaf05e"
@ -5994,15 +5971,15 @@ react-native-fs@^2.18.0:
base-64 "^0.1.0"
utf8 "^3.0.0"
react-native-gesture-handler@^1.10.3:
version "1.10.3"
resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.10.3.tgz#942bbf2963bbf49fa79593600ee9d7b5dab3cfc0"
integrity sha512-cBGMi1IEsIVMgoox4RvMx7V2r6bNKw0uR1Mu1o7NbuHS6BRSVLq0dP34l2ecnPlC+jpWd3le6Yg1nrdCjby2Mw==
react-native-gesture-handler@^2.3.2:
version "2.3.2"
resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.3.2.tgz#65ce3b145bd96242c2200abbb9730c94bc73386c"
integrity sha512-ibcYWHMiDbioUcaAMuw3/Taz3mYn0fJz0q2KnGX1hWpLNz/x/E5/BzKB+T3ycwAm1dQEgPgHWpaZ8eqO/EVFlw==
dependencies:
"@egjs/hammerjs" "^2.0.17"
fbjs "^3.0.0"
hoist-non-react-statics "^3.3.0"
invariant "^2.2.4"
lodash "^4.17.21"
prop-types "^15.7.2"
react-native-get-random-values@^1.7.0:
@ -6520,11 +6497,6 @@ set-value@^2.0.0, set-value@^2.0.1:
is-plain-object "^2.0.3"
split-string "^3.0.1"
setimmediate@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
setprototypeof@1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
@ -7130,15 +7102,10 @@ typedarray-to-buffer@^3.1.5:
dependencies:
is-typedarray "^1.0.0"
typescript@^3.8.3:
version "3.9.10"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.10.tgz#70f3910ac7a51ed6bef79da7800690b19bf778b8"
integrity sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==
ua-parser-js@^0.7.30:
version "0.7.31"
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.31.tgz#649a656b191dffab4f21d5e053e27ca17cbff5c6"
integrity sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==
typescript@^4.6.2:
version "4.6.2"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.2.tgz#fe12d2727b708f4eef40f51598b3398baa9611d4"
integrity sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==
uglify-es@^3.1.9:
version "3.3.9"
@ -7615,7 +7582,7 @@ yargs@^16.1.1:
y18n "^5.0.5"
yargs-parser "^20.2.2"
zustand@^3.5.7:
version "3.6.9"
resolved "https://registry.yarnpkg.com/zustand/-/zustand-3.6.9.tgz#f61a756ddea9f95c7ee7cfd3af2f88c10078afbc"
integrity sha512-OvDNu/jEWpRnEC7k8xh8GKjqYog7td6FZrLMuHs/IeI8WhrCwV+FngVuwMIFhp5kysZXr6emaeReMqjLGaldAQ==
zustand@^3.7.1:
version "3.7.1"
resolved "https://registry.yarnpkg.com/zustand/-/zustand-3.7.1.tgz#7388f0a7175a6c2fd9a2880b383a4bf6cdf6b7c6"
integrity sha512-wHBCZlKj+bg03/hP+Tzv24YhnqqP8MCeN9ECPDXoF01062SIbnfl3j9O0znkDw1lNTY0a8WN3F///a0UhhaEqg==