Makussu/subtracks
1
0
Fork 0
mirror of https://github.com/austinried/subtracks.git synced 2025-12-27 09:09:29 +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 --> <!-- https://opensource.org/licenses/Apache-2.0 -->
<h1 class="title">annotation</h1> <h1 class="title">annotation</h1>
<p class="notice">Copyright &copy; Original Author. All rights reserved.</p> <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> <input type="checkbox"><label></label>
<div class="license"> <div class="license">
<h2> <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> <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> </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"> <div class="library">
<!-- https://opensource.org/licenses/Apache-2.0 --> <!-- https://opensource.org/licenses/Apache-2.0 -->
<h1 class="title">core</h1> <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 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 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) 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 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) 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/> 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) 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 Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal 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: 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 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: 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 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: 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: 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 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 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) 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 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) 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/> 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) 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 Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal 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: 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 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: 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 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: 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: UglifyJS is released under the BSD license:

8
android/licenses.yml
View File

@ -15,7 +15,7 @@
copyrightHolder: Original Author copyrightHolder: Original Author
license: The Apache Software License, Version 2.0 license: The Apache Software License, Version 2.0
licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt 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:+ - artifact: androidx.appcompat:appcompat-resources:+
name: appcompat-resources name: appcompat-resources
copyrightHolder: Original Author copyrightHolder: Original Author
@ -70,6 +70,12 @@
license: The Apache Software License, Version 2.0 license: The Apache Software License, Version 2.0
licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
url: https://developer.android.com/jetpack/androidx 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:+ - artifact: androidx.core:core:+
name: core name: core
copyrightHolder: Original Author 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 { StatusBar, View, StyleSheet } from 'react-native'
import ProgressHook from './components/ProgressHook' import ProgressHook from './components/ProgressHook'
import { useStore } from './state/store' import { useStore } from './state/store'
import { selectTrackPlayer } from './state/trackplayer'
import { MenuProvider } from 'react-native-popup-menu' import { MenuProvider } from 'react-native-popup-menu'
const Debug = () => { const Debug = () => {
const currentTrack = useStore(selectTrackPlayer.currentTrack) const currentTrackTitle = useStore(store => store.currentTrack?.title)
console.log(currentTrack?.title) console.log('currentTrackTitle', currentTrackTitle)
return <></> return <></>
} }

2
app/components/BackgroundHeaderFlatList.tsx
View File

@ -37,7 +37,7 @@ function BackgroundHeaderFlatList<ItemT>(props: BackgroundHeaderFlatListProp<Ite
</props.BackgroundComponent> </props.BackgroundComponent>
} }
ListHeaderComponentStyle={[headerStyle]} 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 PressableOpacity from '@app/components/PressableOpacity'
import { useStarred } from '@app/hooks/music' import { useStar } from '@app/hooks/library'
import { AlbumListItem, Artist, Song, StarrableItemType } from '@app/models/music' import { StarrableItemType, Song, Artist, Album } from '@app/models/library'
import { selectMusic } from '@app/state/music'
import { useStore } from '@app/state/store'
import colors from '@app/styles/colors' import colors from '@app/styles/colors'
import font from '@app/styles/font' import font from '@app/styles/font'
import { NavigationProp, useNavigation } from '@react-navigation/native' 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 { Menu, MenuOption, MenuOptions, MenuTrigger, renderers } from 'react-native-popup-menu'
import IconFA from 'react-native-vector-icons/FontAwesome' import IconFA from 'react-native-vector-icons/FontAwesome'
import IconFA5 from 'react-native-vector-icons/FontAwesome5' import IconFA5 from 'react-native-vector-icons/FontAwesome5'
// import IconMat from 'react-native-vector-icons/MaterialIcons'
import CoverArt from './CoverArt' import CoverArt from './CoverArt'
import Star from './Star' import { Star } from './Star'
const { SlideInMenu } = renderers const { SlideInMenu } = renderers
@ -144,14 +141,13 @@ const OptionStar = React.memo<{
type: StarrableItemType type: StarrableItemType
additionalText?: string additionalText?: string
}>(({ id, type, additionalText: text }) => { }>(({ id, type, additionalText: text }) => {
const starred = useStarred(id, type) const { starred, toggleStar } = useStar(id, type)
const setStarred = useStore(selectMusic.starItem)
return ( return (
<ContextMenuIconTextOption <ContextMenuIconTextOption
IconComponentRaw={<Star starred={starred} size={26} />} IconComponentRaw={<Star starred={starred} size={26} />}
text={(starred ? 'Unstar' : 'Star') + (text ? ` ${text}` : '')} 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 & { export type AlbumContextPressableProps = ContextMenuProps & {
album: AlbumListItem album: Album
} }
export const AlbumContextPressable: React.FC<AlbumContextPressableProps> = props => { 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 PressableOpacity from './PressableOpacity'
import IconMat from 'react-native-vector-icons/MaterialIcons' import IconMat from 'react-native-vector-icons/MaterialIcons'
import { ReactComponentLike } from 'prop-types' import { ReactComponentLike } from 'prop-types'
import { AlbumListItem, Song } from '@app/models/music'
import { AlbumContextPressable, NowPlayingContextPressable } from './ContextMenu' 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 More = React.memo<{ contextItem?: HeaderContextItem }>(({ contextItem }) => {
const moreIcon = <IconMat name="more-vert" color="white" size={25} /> 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 { useIsPlaying } from '@app/hooks/trackplayer'
import { AlbumListItem, Artist, ListableItem, Song } from '@app/models/music' import { Album, Artist, ListableItem, Song } from '@app/models/library'
import { selectMusic } from '@app/state/music'
import { useStore } from '@app/state/store'
import colors from '@app/styles/colors' import colors from '@app/styles/colors'
import font from '@app/styles/font' import font from '@app/styles/font'
import { useNavigation } from '@react-navigation/native' 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 { AlbumContextPressable, ArtistContextPressable, SongContextPressable } from './ContextMenu'
import CoverArt from './CoverArt' import CoverArt from './CoverArt'
import PressableOpacity from './PressableOpacity' import PressableOpacity from './PressableOpacity'
import Star from './Star' import { PressableStar } from './Star'
import equal from 'fast-deep-equal/es6/react'
const TitleTextSong = React.memo<{ const TitleTextSong = React.memo<{
contextId?: string contextId?: string
@ -58,7 +56,6 @@ const ListItem: React.FC<{
style?: StyleProp<ViewStyle> style?: StyleProp<ViewStyle>
}> = ({ item, contextId, queueId, onPress, showArt, showStar, subtitle, listStyle, style }) => { }> = ({ item, contextId, queueId, onPress, showArt, showStar, subtitle, listStyle, style }) => {
const navigation = useNavigation() const navigation = useNavigation()
const starred = useStarred(item.id, item.itemType)
showStar = showStar === undefined ? true : showStar showStar = showStar === undefined ? true : showStar
listStyle = listStyle || 'small' listStyle = listStyle || 'small'
@ -101,7 +98,7 @@ const ListItem: React.FC<{
) )
const albumPressable = useCallback( const albumPressable = useCallback(
({ children }) => ( ({ children }) => (
<AlbumContextPressable album={item as AlbumListItem} onPress={onPress} triggerWrapperStyle={styles.item}> <AlbumContextPressable album={item as Album} onPress={onPress} triggerWrapperStyle={styles.item}>
{children} {children}
</AlbumContextPressable> </AlbumContextPressable>
), ),
@ -133,13 +130,6 @@ const ListItem: React.FC<{
PressableComponent = artistPressable 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 = <></> let title = <></>
if (item.itemType === 'song' && queueId !== undefined) { if (item.itemType === 'song' && queueId !== undefined) {
title = <TitleTextSong contextId={contextId} queueId={queueId} title={item.title} /> title = <TitleTextSong contextId={contextId} queueId={queueId} title={item.title} />
@ -151,9 +141,20 @@ const ListItem: React.FC<{
const resizeMode = 'cover' const resizeMode = 'cover'
let coverArt = <></> let coverArt = <></>
if (item.itemType === 'artist') { 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 { } 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 ( return (
@ -178,10 +179,8 @@ const ListItem: React.FC<{
</View> </View>
</PressableComponent> </PressableComponent>
<View style={styles.controls}> <View style={styles.controls}>
{showStar && ( {showStar && item.itemType !== 'playlist' && (
<PressableOpacity onPress={toggleStarred} style={styles.controlItem}> <PressableStar id={item.id} type={item.itemType} size={26} style={styles.controlItem} />
<Star size={26} starred={starred} />
</PressableOpacity>
)} )}
</View> </View>
</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 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 { useStore } from '@app/state/store'
import { QueueContextType, selectTrackPlayer } from '@app/state/trackplayer'
import colors from '@app/styles/colors' import colors from '@app/styles/colors'
import React, { useState } from 'react' import React, { useState } from 'react'
import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native' import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
@ -17,7 +17,7 @@ const ListPlayerControls = React.memo<{
style?: StyleProp<ViewStyle> style?: StyleProp<ViewStyle>
}>(({ songs, typeName, queueName, queueContextType, queueContextId, style }) => { }>(({ songs, typeName, queueName, queueContextType, queueContextId, style }) => {
const [downloaded, setDownloaded] = useState(false) const [downloaded, setDownloaded] = useState(false)
const setQueue = useStore(selectTrackPlayer.setQueue) const setQueue = useStore(store => store.setQueue)
return ( return (
<View style={[styles.controls, style]}> <View style={[styles.controls, style]}>
@ -36,11 +36,14 @@ const ListPlayerControls = React.memo<{
<View style={styles.controlsCenter}> <View style={styles.controlsCenter}>
<Button <Button
title={`Play ${typeName}`} title={`Play ${typeName}`}
disabled={songs.length === 0}
onPress={() => setQueue(songs, queueName, queueContextType, queueContextId, undefined, false)} onPress={() => setQueue(songs, queueName, queueContextType, queueContextId, undefined, false)}
/> />
</View> </View>
<View style={styles.controlsSide}> <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" /> <Icon name="shuffle" size={26} color="white" />
</Button> </Button>
</View> </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 PressableOpacity from '@app/components/PressableOpacity'
import { usePause, usePlay } from '@app/hooks/trackplayer' import { usePause, usePlay } from '@app/hooks/trackplayer'
import { useStore } from '@app/state/store' import { useStore } from '@app/state/store'
import { selectTrackPlayer } from '@app/state/trackplayer'
import colors from '@app/styles/colors' import colors from '@app/styles/colors'
import font from '@app/styles/font' import font from '@app/styles/font'
import { useNavigation } from '@react-navigation/native' 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' import IconFA5 from 'react-native-vector-icons/FontAwesome5'
const ProgressBar = React.memo(() => { 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 let progress = 0
if (duration > 0) { if (duration > 0) {
@ -41,7 +41,7 @@ const progressStyles = StyleSheet.create({
}) })
const Controls = React.memo(() => { const Controls = React.memo(() => {
const state = useStore(selectTrackPlayer.playerState) const state = useStore(store => store.playerState)
const play = usePlay() const play = usePlay()
const pause = usePause() const pause = usePause()
@ -78,9 +78,12 @@ const Controls = React.memo(() => {
const NowPlayingBar = React.memo(() => { const NowPlayingBar = React.memo(() => {
const navigation = useNavigation() 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 ( return (
<Pressable onPress={() => navigation.navigate('now-playing')} style={[styles.container, displayStyle]}> <Pressable onPress={() => navigation.navigate('now-playing')} style={[styles.container, displayStyle]}>
@ -89,14 +92,14 @@ const NowPlayingBar = React.memo(() => {
<CoverArt <CoverArt
type="cover" type="cover"
style={{ height: styles.subContainer.height, width: styles.subContainer.height }} style={{ height: styles.subContainer.height, width: styles.subContainer.height }}
coverArt={track?.coverArt} coverArt={coverArt}
/> />
<View style={styles.detailsContainer}> <View style={styles.detailsContainer}>
<Text numberOfLines={1} style={styles.detailsTitle}> <Text numberOfLines={1} style={styles.detailsTitle}>
{track?.title} {title}
</Text> </Text>
<Text numberOfLines={1} style={styles.detailsAlbum}> <Text numberOfLines={1} style={styles.detailsAlbum}>
{track?.artist} {artist}
</Text> </Text>
</View> </View>
<Controls /> <Controls />

5
app/components/ProgressHook.tsx
View File

@ -1,11 +1,10 @@
import { useStore } from '@app/state/store' import { useStore } from '@app/state/store'
import { selectTrackPlayer } from '@app/state/trackplayer'
import React, { useEffect } from 'react' import React, { useEffect } from 'react'
import { State, useProgress } from 'react-native-track-player' import { State, useProgress } from 'react-native-track-player'
const ProgressHook = () => { const ProgressHook = () => {
const playerState = useStore(selectTrackPlayer.playerState) const playerState = useStore(store => store.playerState)
const setProgress = useStore(selectTrackPlayer.setProgress) const setProgress = useStore(store => store.setProgress)
const progress = useProgress(250) const progress = useProgress(250)
useEffect(() => { 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 colors from '@app/styles/colors'
import React from 'react' import React from 'react'
import { PressableStateCallbackType, StyleProp, ViewStyle } from 'react-native'
import IconFA from 'react-native-vector-icons/FontAwesome' import IconFA from 'react-native-vector-icons/FontAwesome'
import PressableOpacity from './PressableOpacity'
const Star = React.memo<{ export const Star = React.memo<{
starred: boolean starred: boolean
size: number size: number
}>(({ starred, size }) => { }>(({ 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>
)
})

37
app/hooks/cache.ts
View File

@ -1,16 +1,12 @@
import { CacheImageSize, CacheItemTypeKey } from '@app/models/cache' import { CacheImageSize, CacheItemTypeKey } from '@app/models/cache'
import { ArtistInfo } from '@app/models/music' import { Store, useStore, useStoreDeep } from '@app/state/store'
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 { useCallback, useEffect } from 'react' import { useCallback, useEffect } from 'react'
const useFileRequest = (key: CacheItemTypeKey, id: string) => { const useFileRequest = (key: CacheItemTypeKey, id: string) => {
const file = useStore( const file = useStore(
useCallback( useCallback(
(store: Store) => { (store: Store) => {
const activeServerId = store.settings.activeServer const activeServerId = store.settings.activeServerId
if (!activeServerId) { if (!activeServerId) {
return return
} }
@ -23,7 +19,7 @@ const useFileRequest = (key: CacheItemTypeKey, id: string) => {
const request = useStore( const request = useStore(
useCallback( useCallback(
(store: Store) => { (store: Store) => {
const activeServerId = store.settings.activeServer const activeServerId = store.settings.activeServerId
if (!activeServerId) { if (!activeServerId) {
return return
} }
@ -40,8 +36,8 @@ const useFileRequest = (key: CacheItemTypeKey, id: string) => {
export const useCoverArtFile = (coverArt = '-1', size: CacheImageSize = 'thumbnail') => { export const useCoverArtFile = (coverArt = '-1', size: CacheImageSize = 'thumbnail') => {
const type: CacheItemTypeKey = size === 'original' ? 'coverArt' : 'coverArtThumb' const type: CacheItemTypeKey = size === 'original' ? 'coverArt' : 'coverArtThumb'
const { file, request } = useFileRequest(type, coverArt) const { file, request } = useFileRequest(type, coverArt)
const client = useStore(selectSettings.client) const client = useStore(store => store.client)
const cacheItem = useStore(selectCache.cacheItem) const cacheItem = useStore(store => store.cacheItem)
useEffect(() => { useEffect(() => {
if (!file && client) { if (!file && client) {
@ -61,28 +57,25 @@ export const useCoverArtFile = (coverArt = '-1', size: CacheImageSize = 'thumbna
export const useArtistArtFile = (artistId: string, size: CacheImageSize = 'thumbnail') => { export const useArtistArtFile = (artistId: string, size: CacheImageSize = 'thumbnail') => {
const type: CacheItemTypeKey = size === 'original' ? 'artistArt' : 'artistArtThumb' 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 { file, request } = useFileRequest(type, artistId)
const cacheItem = useStore(selectCache.cacheItem) const cacheItem = useStore(store => store.cacheItem)
useEffect(() => { useEffect(() => {
if (!file) { if (!artistInfo) {
fetchArtistInfo(artistId)
return
}
if (!file && artistInfo) {
cacheItem(type, artistId, async () => { cacheItem(type, artistId, async () => {
let artistInfo: ArtistInfo | undefined
const cachedArtistInfo = useStore.getState().artistInfo[artistId]
if (cachedArtistInfo) {
artistInfo = cachedArtistInfo
} else {
artistInfo = await fetchArtistInfo(artistId)
}
return type === 'artistArtThumb' ? artistInfo?.smallImageUrl : artistInfo?.largeImageUrl return type === 'artistArtThumb' ? artistInfo?.smallImageUrl : artistInfo?.largeImageUrl
}) })
} }
// intentionally leaving file out so it doesn't re-render if the request fails // intentionally leaving file out so it doesn't re-render if the request fails
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [artistId, cacheItem, fetchArtistInfo, type]) }, [artistId, cacheItem, fetchArtistInfo, type, artistInfo])
return { file, request } 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 { useState, useCallback } from 'react'
import { useActiveServerRefresh } from './server' import { useActiveServerRefresh } from './settings'
export const useFetchList = <T>(fetchList: () => Promise<T[]>) => { export const useFetchList = <T>(fetchList: () => Promise<T[]>) => {
const [list, setList] = useState<T[]>([]) const [list, setList] = useState<T[]>([])
@ -28,8 +28,26 @@ export const useFetchList = <T>(fetchList: () => Promise<T[]>) => {
return { list, refreshing, refresh, reset } 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>( export const useFetchPaginatedList = <T>(
fetchList: (size?: number, offset?: number) => Promise<T[]>, fetchList: (size: number, offset: number) => Promise<T[]>,
pageSize: number, pageSize: number,
) => { ) => {
const [list, setList] = useState<T[]>([]) const [list, setList] = useState<T[]>([])
@ -53,8 +71,8 @@ export const useFetchPaginatedList = <T>(
useActiveServerRefresh( useActiveServerRefresh(
useCallback(() => { useCallback(() => {
reset() refresh()
}, [reset]), }, [refresh]),
) )
const fetchNextPage = useCallback(() => { 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 { useReset } from '@app/hooks/trackplayer'
import { selectSettings } from '@app/state/settings'
import { useStore } from '@app/state/store' import { useStore } from '@app/state/store'
import { useEffect } from 'react' import { useEffect } from 'react'
export const useSwitchActiveServer = () => { export const useSwitchActiveServer = () => {
const activeServer = useStore(selectSettings.activeServer) const activeServerId = useStore(store => store.settings.activeServerId)
const setActiveServer = useStore(selectSettings.setActiveServer) const setActiveServer = useStore(store => store.setActiveServer)
const resetPlayer = useReset() const resetPlayer = useReset()
return async (id: string) => { return async (id: string) => {
if (id === activeServer?.id) { if (id === activeServerId) {
return return
} }
@ -19,11 +18,15 @@ export const useSwitchActiveServer = () => {
} }
export const useActiveServerRefresh = (refresh: () => void) => { export const useActiveServerRefresh = (refresh: () => void) => {
const activeServer = useStore(selectSettings.activeServer) const activeServerId = useStore(store => store.settings.activeServerId)
useEffect(() => { useEffect(() => {
if (activeServer) { if (activeServerId) {
refresh() 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 { useStore, useStoreDeep } from '@app/state/store'
import { getQueue, selectTrackPlayer, trackPlayerCommands } from '@app/state/trackplayer' import { getQueue, trackPlayerCommands } from '@app/state/trackplayer'
import TrackPlayer from 'react-native-track-player' import TrackPlayer from 'react-native-track-player'
export const usePlay = () => { export const usePlay = () => {
@ -57,7 +57,7 @@ export const useSeekTo = () => {
} }
export const useReset = (enqueue = true) => { export const useReset = (enqueue = true) => {
const resetStore = useStore(selectTrackPlayer.resetTrackPlayerState) const resetStore = useStore(store => store.resetTrackPlayerState)
const reset = async () => { const reset = async () => {
await TrackPlayer.reset() await TrackPlayer.reset()
@ -68,9 +68,9 @@ export const useReset = (enqueue = true) => {
} }
export const useIsPlaying = (contextId: string | undefined, track: number) => { export const useIsPlaying = (contextId: string | undefined, track: number) => {
const queueContextId = useStore(selectTrackPlayer.queueContextId) const queueContextId = useStore(store => store.queueContextId)
const currentTrackIdx = useStore(selectTrackPlayer.currentTrackIdx) const currentTrackIdx = useStore(store => store.currentTrackIdx)
const shuffleOrder = useStore(selectTrackPlayer.shuffleOrder) const shuffleOrder = useStoreDeep(store => store.shuffleOrder)
if (contextId === undefined) { if (contextId === undefined) {
return track === currentTrackIdx 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 { export enum CacheItemType {
coverArt = 'coverArt', coverArt = 'coverArt',
@ -27,7 +27,7 @@ export type DownloadedAlbum = Album & {
songs: string[] songs: string[]
} }
export type DownloadedPlaylist = PlaylistListItem & { export type DownloadedPlaylist = Playlist & {
songs: string[] songs: string[]
} }

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

@ -6,14 +6,13 @@ export interface Artist {
coverArt?: string coverArt?: string
} }
export interface ArtistInfo extends Artist { export interface ArtistInfo {
albums: Album[] id: string
smallImageUrl?: string smallImageUrl?: string
largeImageUrl?: string largeImageUrl?: string
topSongs: Song[]
} }
export interface AlbumListItem { export interface Album {
itemType: 'album' itemType: 'album'
id: string id: string
name: string name: string
@ -21,24 +20,10 @@ export interface AlbumListItem {
artistId?: string artistId?: string
starred?: Date starred?: Date
coverArt?: string coverArt?: string
}
export interface Album extends AlbumListItem {
coverArt?: string
year?: number year?: number
} }
export interface AlbumWithSongs extends Album { export interface Playlist {
songs: Song[]
}
export interface SearchResults {
artists: Artist[]
albums: AlbumListItem[]
songs: Song[]
}
export interface PlaylistListItem {
itemType: 'playlist' itemType: 'playlist'
id: string id: string
name: string name: string
@ -46,10 +31,6 @@ export interface PlaylistListItem {
coverArt?: string coverArt?: string
} }
export interface PlaylistWithSongs extends PlaylistListItem {
songs: Song[]
}
export interface Song { export interface Song {
itemType: 'song' itemType: 'song'
id: string id: string
@ -62,13 +43,15 @@ export interface Song {
discNumber?: number discNumber?: number
duration?: number duration?: number
starred?: Date starred?: Date
streamUri: string
coverArt?: 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 { export interface ArtistFilterSettings {
type: ArtistFilterType 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 NowPlayingBar from '@app/components/NowPlayingBar'
import PressableOpacity from '@app/components/PressableOpacity' import PressableOpacity from '@app/components/PressableOpacity'
import { selectSettings } from '@app/state/settings' import { useFirstRun } from '@app/hooks/settings'
import { useStore } from '@app/state/store'
import colors from '@app/styles/colors' import colors from '@app/styles/colors'
import dimensions from '@app/styles/dimensions' import dimensions from '@app/styles/dimensions'
import font from '@app/styles/font' 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 { BottomTabNavigationEventMap } from '@react-navigation/bottom-tabs/lib/typescript/src/types'
import { NavigationHelpers, ParamListBase } from '@react-navigation/native' import { NavigationHelpers, ParamListBase } from '@react-navigation/native'
import React from 'react' 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<{ const BottomTabButton = React.memo<{
routeKey: string routeKey: string
@ -20,7 +19,7 @@ const BottomTabButton = React.memo<{
icon: OutlineFillIcon icon: OutlineFillIcon
navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap> navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap>
}>(({ routeKey, label, name, isFocused, icon, navigation }) => { }>(({ routeKey, label, name, isFocused, icon, navigation }) => {
const firstRun = useStore(selectSettings.firstRun) const firstRun = useFirstRun()
const disabled = firstRun && name !== 'settings' 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 BottomTabBar from '@app/navigation/BottomTabBar'
import LibraryTopTabNavigator from '@app/navigation/LibraryTopTabNavigator' import LibraryTopTabNavigator from '@app/navigation/LibraryTopTabNavigator'
import ArtistView from '@app/screens/ArtistView' import ArtistView from '@app/screens/ArtistView'
@ -8,8 +9,6 @@ import ServerView from '@app/screens/ServerView'
import SettingsView from '@app/screens/Settings' import SettingsView from '@app/screens/Settings'
import SongListView from '@app/screens/SongListView' import SongListView from '@app/screens/SongListView'
import WebViewScreen from '@app/screens/WebViewScreen' 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 colors from '@app/styles/colors'
import font from '@app/styles/font' import font from '@app/styles/font'
import { BottomTabNavigationProp, createBottomTabNavigator } from '@react-navigation/bottom-tabs' import { BottomTabNavigationProp, createBottomTabNavigator } from '@react-navigation/bottom-tabs'
@ -177,7 +176,7 @@ const SettingsTab = () => {
const Tab = createBottomTabNavigator() const Tab = createBottomTabNavigator()
const BottomTabNavigator = () => { const BottomTabNavigator = () => {
const firstRun = useStore(selectSettings.firstRun) const firstRun = useFirstRun()
return ( return (
<Tab.Navigator tabBar={BottomTabBar} initialRouteName={firstRun ? 'settings' : 'home'}> <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 TrackPlayer, { Event, State } from 'react-native-track-player'
import { useStore } from './state/store' import { useStore } from './state/store'
import { unstable_batchedUpdates } from 'react-native' import { unstable_batchedUpdates } from 'react-native'
@ -44,13 +44,12 @@ let serviceCreated = false
const createService = async () => { const createService = async () => {
useStore.subscribe( useStore.subscribe(
(currentTrack?: TrackExt) => { state => state.currentTrack?.id,
if (currentTrack) { (currentTrackId?: string) => {
useStore.getState().scrobbleTrack(currentTrack.id) if (currentTrackId) {
useStore.getState().scrobbleTrack(currentTrackId)
} }
}, },
state => state.currentTrack,
(prev, next) => prev?.id === next?.id,
) )
NetInfo.fetch().then(state => { 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 Header from '@app/components/Header'
import HeaderBar from '@app/components/HeaderBar' import HeaderBar from '@app/components/HeaderBar'
import ListItem from '@app/components/ListItem' import ListItem from '@app/components/ListItem'
import { useArtistInfo } from '@app/hooks/music' import { Album, Song } from '@app/models/library'
import { Album, Song } from '@app/models/music' import { useStore, useStoreDeep } from '@app/state/store'
import { useStore } from '@app/state/store'
import { selectTrackPlayer } from '@app/state/trackplayer'
import colors from '@app/styles/colors' import colors from '@app/styles/colors'
import dimensions from '@app/styles/dimensions' import dimensions from '@app/styles/dimensions'
import font from '@app/styles/font' import font from '@app/styles/font'
import { mapById } from '@app/util/state'
import { useLayout } from '@react-native-community/hooks' import { useLayout } from '@react-native-community/hooks'
import { useNavigation } from '@react-navigation/native' 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 { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
import { useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated' import { useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
@ -47,12 +46,12 @@ const TopSongs = React.memo<{
name: string name: string
artistId: string artistId: string
}>(({ songs, name, artistId }) => { }>(({ songs, name, artistId }) => {
const setQueue = useStore(selectTrackPlayer.setQueue) const setQueue = useStore(store => store.setQueue)
return ( return (
<> <>
<Header>Top Songs</Header> <Header>Top Songs</Header>
{songs.map((s, i) => ( {songs.slice(0, 5).map((s, i) => (
<ListItem <ListItem
key={i} key={i}
item={s} 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(() => ( const ArtistViewFallback = React.memo(() => (
<GradientBackground style={styles.fallback}> <GradientBackground style={styles.fallback}>
<ActivityIndicator size="large" color={colors.accent} /> <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 ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) => {
const artist = useArtistInfo(id) const artist = useStoreDeep(useCallback(store => store.library.artists[id], [id]))
const albumsLayout = useLayout() 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 coverLayout = useLayout()
const headerOpacity = useSharedValue(0) 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) { if (!artist) {
return <ArtistViewFallback /> return <ArtistViewFallback />
} }
const _albums = [...artist.albums]
.sort((a, b) => a.name.localeCompare(b.name))
.sort((a, b) => (b.year || 0) - (a.year || 0))
return ( return (
<View style={styles.container}> <View style={styles.container}>
<HeaderBar title={title} headerStyle={[styles.header, animatedOpacity]} /> <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> <Text style={styles.title}>{artist.name}</Text>
</View> </View>
<View style={styles.contentContainer}> <View style={styles.contentContainer}>
{artist.topSongs.length > 0 ? ( {topSongs && albums ? (
<TopSongs songs={artist.topSongs} name={artist.name} artistId={artist.id} /> 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> </View>
</GradientScrollView> </GradientScrollView>
</View> </View>
@ -200,6 +240,9 @@ const styles = StyleSheet.create({
fontFamily: font.regular, fontFamily: font.regular,
textAlign: 'center', textAlign: 'center',
}, },
loading: {
marginTop: 30,
},
}) })
export default ArtistView 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 GradientScrollView from '@app/components/GradientScrollView'
import Header from '@app/components/Header' import Header from '@app/components/Header'
import NothingHere from '@app/components/NothingHere' import NothingHere from '@app/components/NothingHere'
import { useActiveServerRefresh } from '@app/hooks/server' import { useActiveServerRefresh } from '@app/hooks/settings'
import { AlbumListItem } from '@app/models/music' import { useStore, useStoreDeep } from '@app/state/store'
import { selectMusic } from '@app/state/music'
import { selectSettings } from '@app/state/settings'
import { useStore } from '@app/state/store'
import colors from '@app/styles/colors' import colors from '@app/styles/colors'
import font from '@app/styles/font' 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 { 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 { RefreshControl, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native'
import create, { StateSelector } from 'zustand'
const titles: { [key in GetAlbumListType]?: string } = { const titles: { [key in GetAlbumListType]?: string } = {
recent: 'Recently Played', recent: 'Recently Played',
@ -23,9 +23,14 @@ const titles: { [key in GetAlbumListType]?: string } = {
} }
const AlbumItem = React.memo<{ const AlbumItem = React.memo<{
album: AlbumListItem id: string
}>(({ album }) => { }>(({ id }) => {
const navigation = useNavigation() const navigation = useNavigation()
const album = useStoreDeep(useCallback(store => store.library.albums[id], [id]))
if (!album) {
return <></>
}
return ( return (
<AlbumContextPressable <AlbumContextPressable
@ -49,9 +54,10 @@ const AlbumItem = React.memo<{
}) })
const Category = React.memo<{ const Category = React.memo<{
name?: string type: string
data: AlbumListItem[] }>(({ type }) => {
}>(({ name, data }) => { const list = useHomeStoreDeep(useCallback(store => store.lists[type] || [], [type]))
const Albums = () => ( const Albums = () => (
<ScrollView <ScrollView
horizontal={true} horizontal={true}
@ -59,8 +65,8 @@ const Category = React.memo<{
overScrollMode={'never'} overScrollMode={'never'}
style={styles.artScroll} style={styles.artScroll}
contentContainerStyle={styles.artScrollContent}> contentContainerStyle={styles.artScrollContent}>
{data.map(album => ( {list.map(id => (
<AlbumItem key={album.id} album={album} /> <AlbumItem key={id} id={id} />
))} ))}
</ScrollView> </ScrollView>
) )
@ -73,24 +79,57 @@ const Category = React.memo<{
return ( return (
<View style={styles.category}> <View style={styles.category}>
<Header style={styles.header}>{name}</Header> <Header style={styles.header}>{titles[type as GetAlbumListType] || ''}</Header>
{data.length > 0 ? <Albums /> : <Nothing />} {list.length > 0 ? <Albums /> : <Nothing />}
</View> </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 Home = () => {
const types = useStore(selectSettings.homeLists) const [refreshing, setRefreshing] = useState(false)
const lists = useStore(selectMusic.homeLists) const types = useStoreDeep(store => store.settings.screens.home.listTypes)
const updating = useStore(selectMusic.homeListsUpdating) const fetchAlbumList = useStore(store => store.fetchAlbumList)
const update = useStore(selectMusic.fetchHomeLists) const setList = useHomeStore(store => store.setList)
const clear = useStore(selectMusic.clearHomeLists)
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( useActiveServerRefresh(
useCallback(() => { useCallback(() => {
clear() types.forEach(type => setList(type, []))
update() refresh()
}, [clear, update]), }, [refresh, setList, types]),
) )
return ( return (
@ -99,15 +138,15 @@ const Home = () => {
contentContainerStyle={styles.scrollContentContainer} contentContainerStyle={styles.scrollContentContainer}
refreshControl={ refreshControl={
<RefreshControl <RefreshControl
refreshing={updating} refreshing={refreshing}
onRefresh={update} onRefresh={refresh}
colors={[colors.accent, colors.accentLow]} colors={[colors.accent, colors.accentLow]}
progressViewOffset={StatusBar.currentHeight} progressViewOffset={StatusBar.currentHeight}
/> />
}> }>
<View style={styles.content}> <View style={styles.content}>
{types.map(type => ( {types.map(type => (
<Category key={type} name={titles[type as GetAlbumListType]} data={type in lists ? lists[type] : []} /> <Category key={type} type={type} />
))} ))}
</View> </View>
</GradientScrollView> </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 FilterButton, { OptionData } from '@app/components/FilterButton'
import GradientFlatList from '@app/components/GradientFlatList' import GradientFlatList from '@app/components/GradientFlatList'
import { useFetchPaginatedList } from '@app/hooks/list' import { useFetchPaginatedList } from '@app/hooks/list'
import { Album, AlbumListItem } from '@app/models/music' import { useStore, useStoreDeep } from '@app/state/store'
import { selectMusic } from '@app/state/music'
import { selectSettings } from '@app/state/settings'
import { useStore } from '@app/state/store'
import colors from '@app/styles/colors' import colors from '@app/styles/colors'
import font from '@app/styles/font' 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 { useNavigation } from '@react-navigation/native'
import React, { useEffect } from 'react' import React, { useCallback } from 'react'
import { StyleSheet, Text, useWindowDimensions, View } from 'react-native' import { StyleSheet, Text, useWindowDimensions, View } from 'react-native'
const AlbumItem = React.memo<{ const AlbumItem = React.memo<{
album: AlbumListItem id: string
size: number size: number
height: number height: number
}>(({ album, size, height }) => { }>(({ id, size, height }) => {
const album = useStoreDeep(useCallback(store => store.library.albums[id], [id]))
const navigation = useNavigation() const navigation = useNavigation()
if (!album) {
return <></>
}
return ( return (
<AlbumContextPressable <AlbumContextPressable
album={album} album={album}
@ -41,8 +43,8 @@ const AlbumItem = React.memo<{
}) })
const AlbumListRenderItem: React.FC<{ const AlbumListRenderItem: React.FC<{
item: { album: Album; size: number; height: number } item: { id: string; size: number; height: number }
}> = ({ item }) => <AlbumItem album={item.album} size={item.size} height={item.height} /> }> = ({ item }) => <AlbumItem id={item.id} size={item.size} height={item.height} />
const filterOptions: OptionData[] = [ const filterOptions: OptionData[] = [
{ text: 'By Name', value: 'alphabeticalByName' }, { text: 'By Name', value: 'alphabeticalByName' },
@ -57,24 +59,57 @@ const filterOptions: OptionData[] = [
] ]
const AlbumsList = () => { const AlbumsList = () => {
const fetchAlbums = useStore(selectMusic.fetchAlbums) const filter = useStoreDeep(store => store.settings.screens.library.albumsFilter)
const { list, refreshing, refresh, reset, fetchNextPage } = useFetchPaginatedList(fetchAlbums, 300) const setFilter = useStore(store => store.setLibraryAlbumFilter)
const filter = useStore(selectSettings.libraryAlbumFilter)
const setFilter = useStore(selectSettings.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 layout = useWindowDimensions()
const size = layout.width / 3 - styles.itemWrapper.marginHorizontal * 2 const size = layout.width / 3 - styles.itemWrapper.marginHorizontal * 2
const height = size + 36 const height = size + 36
useEffect(() => reset(), [reset, filter])
return ( return (
<View style={styles.container}> <View style={styles.container}>
<GradientFlatList <GradientFlatList
data={list.map(album => ({ album, size, height }))} data={list.map(id => ({ id, size, height }))}
renderItem={AlbumListRenderItem} renderItem={AlbumListRenderItem}
keyExtractor={item => item.album.id} keyExtractor={item => item.id}
numColumns={3} numColumns={3}
removeClippedSubviews={true} removeClippedSubviews={true}
refreshing={refreshing} refreshing={refreshing}

25
app/screens/LibraryArtists.tsx
View File

@ -1,12 +1,10 @@
import FilterButton, { OptionData } from '@app/components/FilterButton' import FilterButton, { OptionData } from '@app/components/FilterButton'
import GradientFlatList from '@app/components/GradientFlatList' import GradientFlatList from '@app/components/GradientFlatList'
import ListItem from '@app/components/ListItem' import ListItem from '@app/components/ListItem'
import { useFetchList } from '@app/hooks/list' import { useFetchList2 } from '@app/hooks/list'
import { Artist } from '@app/models/music' import { Artist } from '@app/models/library'
import { ArtistFilterType } from '@app/models/settings' import { ArtistFilterType } from '@app/models/settings'
import { selectMusic } from '@app/state/music' import { useStore, useStoreDeep } from '@app/state/store'
import { selectSettings } from '@app/state/settings'
import { useStore } from '@app/state/store'
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { StyleSheet, View } from 'react-native' import { StyleSheet, View } from 'react-native'
@ -21,13 +19,17 @@ const filterOptions: OptionData[] = [
] ]
const ArtistsList = () => { const ArtistsList = () => {
const fetchArtists = useStore(selectMusic.fetchArtists) const fetchArtists = useStore(store => store.fetchArtists)
const { list, refreshing, refresh } = useFetchList(fetchArtists) const { refreshing, refresh } = useFetchList2(fetchArtists)
const filter = useStore(selectSettings.libraryArtistFilter) const artists = useStoreDeep(store => store.library.artists)
const setFilter = useStore(selectSettings.setLibraryArtistFiler) 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[]>([]) const [sortedList, setSortedList] = useState<Artist[]>([])
useEffect(() => { useEffect(() => {
const list = Object.values(artists)
switch (filter.type) { switch (filter.type) {
case 'random': case 'random':
setSortedList([...list].sort(() => Math.random() - 0.5)) setSortedList([...list].sort(() => Math.random() - 0.5))
@ -35,11 +37,14 @@ const ArtistsList = () => {
case 'starred': case 'starred':
setSortedList([...list].filter(a => a.starred)) setSortedList([...list].filter(a => a.starred))
break break
case 'alphabeticalByName':
setSortedList(artistOrder.map(id => artists[id]))
break
default: default:
setSortedList([...list]) setSortedList([...list])
break break
} }
}, [list, filter]) }, [filter.type, artists, artistOrder])
return ( return (
<View style={styles.container}> <View style={styles.container}>

16
app/screens/LibraryPlaylists.tsx
View File

@ -1,23 +1,23 @@
import GradientFlatList from '@app/components/GradientFlatList' import GradientFlatList from '@app/components/GradientFlatList'
import ListItem from '@app/components/ListItem' import ListItem from '@app/components/ListItem'
import { useFetchList } from '@app/hooks/list' import { useFetchList2 } from '@app/hooks/list'
import { PlaylistListItem } from '@app/models/music' import { Playlist } from '@app/models/library'
import { selectMusic } from '@app/state/music' import { useStore, useStoreDeep } from '@app/state/store'
import { useStore } from '@app/state/store'
import React from 'react' import React from 'react'
import { StyleSheet } from 'react-native' 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} /> <ListItem item={item} showArt={true} showStar={false} listStyle="big" style={styles.listItem} />
) )
const PlaylistsList = () => { const PlaylistsList = () => {
const fetchPlaylists = useStore(selectMusic.fetchPlaylists) const fetchPlaylists = useStore(store => store.fetchPlaylists)
const { list, refreshing, refresh } = useFetchList(fetchPlaylists) const { refreshing, refresh } = useFetchList2(fetchPlaylists)
const playlists = useStoreDeep(store => store.library.playlists)
return ( return (
<GradientFlatList <GradientFlatList
data={list} data={Object.values(playlists)}
renderItem={PlaylistRenderItem} renderItem={PlaylistRenderItem}
keyExtractor={item => item.id} keyExtractor={item => item.id}
onRefresh={refresh} 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 ListItem from '@app/components/ListItem'
import NowPlayingBar from '@app/components/NowPlayingBar' import NowPlayingBar from '@app/components/NowPlayingBar'
import { useSkipTo } from '@app/hooks/trackplayer' import { useSkipTo } from '@app/hooks/trackplayer'
import { Song } from '@app/models/music' import { Song } from '@app/models/library'
import { useStore } from '@app/state/store' import { useStore, useStoreDeep } from '@app/state/store'
import { selectTrackPlayer } from '@app/state/trackplayer'
import { selectTrackPlayerMap } from '@app/state/trackplayermap'
import React from 'react' import React from 'react'
import { StyleSheet, View } from 'react-native' import { StyleSheet, View } from 'react-native'
@ -27,8 +25,8 @@ const SongRenderItem: React.FC<{
) )
const NowPlayingQueue = React.memo<{}>(() => { const NowPlayingQueue = React.memo<{}>(() => {
const queue = useStore(selectTrackPlayer.queue) const queue = useStoreDeep(store => store.queue)
const mapTrackExtToSong = useStore(selectTrackPlayerMap.mapTrackExtToSong) const mapTrackExtToSong = useStore(store => store.mapTrackExtToSong)
const skipTo = useSkipTo() const skipTo = useSkipTo()
return ( 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 HeaderBar from '@app/components/HeaderBar'
import ImageGradientBackground from '@app/components/ImageGradientBackground' import ImageGradientBackground from '@app/components/ImageGradientBackground'
import PressableOpacity from '@app/components/PressableOpacity' import PressableOpacity from '@app/components/PressableOpacity'
import Star from '@app/components/Star' import { PressableStar } from '@app/components/Star'
import { useStarred } from '@app/hooks/music'
import { useNext, usePause, usePlay, usePrevious, useSeekTo } from '@app/hooks/trackplayer' import { useNext, usePause, usePlay, usePrevious, useSeekTo } from '@app/hooks/trackplayer'
import { selectMusic } from '@app/state/music' import { QueueContextType, TrackExt } from '@app/models/trackplayer'
import { useStore } from '@app/state/store' import { useStore, useStoreDeep } from '@app/state/store'
import { QueueContextType, selectTrackPlayer, TrackExt } from '@app/state/trackplayer'
import { selectTrackPlayerMap } from '@app/state/trackplayermap'
import colors from '@app/styles/colors' import colors from '@app/styles/colors'
import font from '@app/styles/font' import font from '@app/styles/font'
import formatDuration from '@app/util/formatDuration' import formatDuration from '@app/util/formatDuration'
@ -41,9 +38,9 @@ function getContextName(type?: QueueContextType) {
const NowPlayingHeader = React.memo<{ const NowPlayingHeader = React.memo<{
track?: TrackExt track?: TrackExt
}>(({ track }) => { }>(({ track }) => {
const queueName = useStore(selectTrackPlayer.queueName) const queueName = useStore(store => store.queueName)
const queueContextType = useStore(selectTrackPlayer.queueContextType) const queueContextType = useStore(store => store.queueContextType)
const mapTrackExtToSong = useStore(selectTrackPlayerMap.mapTrackExtToSong) const mapTrackExtToSong = useStore(store => store.mapTrackExtToSong)
if (!track) { if (!track) {
return <></> return <></>
@ -94,11 +91,11 @@ const headerStyles = StyleSheet.create({
}) })
const SongCoverArt = () => { const SongCoverArt = () => {
const track = useStore(selectTrackPlayer.currentTrack) const coverArt = useStore(store => store.currentTrack?.coverArt)
return ( return (
<View style={coverArtStyles.container}> <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> </View>
) )
} }
@ -117,26 +114,22 @@ const coverArtStyles = StyleSheet.create({
}) })
const SongInfo = () => { const SongInfo = () => {
const track = useStore(selectTrackPlayer.currentTrack) const id = useStore(store => store.currentTrack?.id)
const id = track?.id || '-1' const artist = useStore(store => store.currentTrack?.artist)
const type = 'song' const title = useStore(store => store.currentTrack?.title)
const starred = useStarred(id, type)
const setStarred = useStore(selectMusic.starItem)
return ( return (
<View style={infoStyles.container}> <View style={infoStyles.container}>
<View style={infoStyles.details}> <View style={infoStyles.details}>
<Text numberOfLines={1} style={infoStyles.title}> <Text numberOfLines={1} style={infoStyles.title}>
{track?.title} {title}
</Text> </Text>
<Text numberOfLines={1} style={infoStyles.artist}> <Text numberOfLines={1} style={infoStyles.artist}>
{track?.artist} {artist}
</Text> </Text>
</View> </View>
<View style={infoStyles.controls}> <View style={infoStyles.controls}>
<PressableOpacity onPress={() => setStarred(id, type, starred)}> <PressableStar id={id || '-1'} type={'song'} size={32} />
<Star size={32} starred={starred} />
</PressableOpacity>
</View> </View>
</View> </View>
) )
@ -170,7 +163,8 @@ const infoStyles = StyleSheet.create({
}) })
const SeekBar = () => { 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 seekTo = useSeekTo()
const [value, setValue] = useState(0) const [value, setValue] = useState(0)
const [sliding, setSliding] = useState(false) const [sliding, setSliding] = useState(false)
@ -262,15 +256,15 @@ const seekStyles = StyleSheet.create({
}) })
const PlayerControls = () => { const PlayerControls = () => {
const state = useStore(selectTrackPlayer.playerState) const state = useStore(store => store.playerState)
const play = usePlay() const play = usePlay()
const pause = usePause() const pause = usePause()
const next = useNext() const next = useNext()
const previous = usePrevious() const previous = usePrevious()
const shuffled = useStore(selectTrackPlayer.shuffled) const shuffled = useStore(store => !!store.shuffleOrder)
const toggleShuffle = useStore(selectTrackPlayer.toggleShuffle) const toggleShuffle = useStore(store => store.toggleShuffle)
const repeatMode = useStore(selectTrackPlayer.repeatMode) const repeatMode = useStore(store => store.repeatMode)
const toggleRepeat = useStore(selectTrackPlayer.toggleRepeatMode) const toggleRepeat = useStore(store => store.toggleRepeatMode)
const navigation = useNavigation() const navigation = useNavigation()
let playPauseIcon: string let playPauseIcon: string
@ -392,7 +386,7 @@ type RootStackParamList = {
type NowPlayingProps = NativeStackScreenProps<RootStackParamList, 'main'> type NowPlayingProps = NativeStackScreenProps<RootStackParamList, 'main'>
const NowPlayingView: React.FC<NowPlayingProps> = ({ navigation }) => { const NowPlayingView: React.FC<NowPlayingProps> = ({ navigation }) => {
const track = useStore(selectTrackPlayer.currentTrack) const track = useStoreDeep(store => store.currentTrack)
useEffect(() => { useEffect(() => {
if (!track) { if (!track) {
@ -404,7 +398,7 @@ const NowPlayingView: React.FC<NowPlayingProps> = ({ navigation }) => {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<ImageGradientBackground imagePath={imagePath} /> <ImageGradientBackground imagePath={imagePath} height={'100%'} />
<NowPlayingHeader track={track} /> <NowPlayingHeader track={track} />
<View style={styles.content}> <View style={styles.content}>
<SongCoverArt /> <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 ListItem from '@app/components/ListItem'
import NothingHere from '@app/components/NothingHere' import NothingHere from '@app/components/NothingHere'
import TextInput from '@app/components/TextInput' import TextInput from '@app/components/TextInput'
import { useActiveServerRefresh } from '@app/hooks/server' import { useActiveServerRefresh } from '@app/hooks/settings'
import { ListableItem, SearchResults, Song } from '@app/models/music' import { Song, Album, Artist, SearchResults } from '@app/models/library'
import { selectMusic } from '@app/state/music' import { useStore, useStoreDeep } from '@app/state/store'
import { useStore } from '@app/state/store'
import { selectTrackPlayer } from '@app/state/trackplayer'
import colors from '@app/styles/colors' import colors from '@app/styles/colors'
import font from '@app/styles/font' import font from '@app/styles/font'
import { mapById } from '@app/util/state'
import { useFocusEffect, useNavigation } from '@react-navigation/native' import { useFocusEffect, useNavigation } from '@react-navigation/native'
import debounce from 'lodash.debounce' import debounce from 'lodash.debounce'
import React, { useCallback, useMemo, useRef, useState } from 'react' import React, { useCallback, useMemo, useRef, useState } from 'react'
@ -25,7 +24,7 @@ import {
} from 'react-native' } from 'react-native'
const SongItem = React.memo<{ item: Song }>(({ item }) => { const SongItem = React.memo<{ item: Song }>(({ item }) => {
const setQueue = useStore(selectTrackPlayer.setQueue) const setQueue = useStore(store => store.setQueue)
return ( return (
<ListItem <ListItem
@ -42,8 +41,27 @@ const SongItem = React.memo<{ item: Song }>(({ item }) => {
const ResultsCategory = React.memo<{ const ResultsCategory = React.memo<{
name: string name: string
query: string query: string
items: ListableItem[] ids: string[]
}>(({ name, query, items }) => { 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() const navigation = useNavigation()
if (items.length === 0) { if (items.length === 0) {
@ -54,8 +72,8 @@ const ResultsCategory = React.memo<{
<> <>
<Header>{name}</Header> <Header>{name}</Header>
{items.map(a => {items.map(a =>
a.itemType === 'song' ? ( type === 'song' ? (
<SongItem key={a.id} item={a} /> <SongItem key={a.id} item={a as Song} />
) : ( ) : (
<ListItem key={a.id} item={a} showArt={true} showStar={false} /> <ListItem key={a.id} item={a} showArt={true} showStar={false} />
), ),
@ -78,15 +96,15 @@ const Results = React.memo<{
}>(({ results, query }) => { }>(({ results, query }) => {
return ( return (
<> <>
<ResultsCategory name="Artists" query={query} items={results.artists} /> <ResultsCategory name="Artists" query={query} type={'artist'} ids={results.artists} />
<ResultsCategory name="Albums" query={query} items={results.albums} /> <ResultsCategory name="Albums" query={query} type={'album'} ids={results.albums} />
<ResultsCategory name="Songs" query={query} items={results.songs} /> <ResultsCategory name="Songs" query={query} type={'song'} ids={results.songs} />
</> </>
) )
}) })
const Search = () => { const Search = () => {
const fetchSearchResults = useStore(selectMusic.fetchSearchResults) const fetchSearchResults = useStore(store => store.fetchSearchResults)
const [results, setResults] = useState<SearchResults>({ artists: [], albums: [], songs: [] }) const [results, setResults] = useState<SearchResults>({ artists: [], albums: [], songs: [] })
const [refreshing, setRefreshing] = useState(false) const [refreshing, setRefreshing] = useState(false)
const [text, setText] = useState('') const [text, setText] = useState('')
@ -118,7 +136,7 @@ const Search = () => {
() => () =>
debounce(async (query: string) => { debounce(async (query: string) => {
setRefreshing(true) setRefreshing(true)
setResults(await fetchSearchResults(query)) setResults(await fetchSearchResults({ query, albumCount: 5, artistCount: 5, songCount: 5 }))
setRefreshing(false) setRefreshing(false)
}, 400), }, 400),
[fetchSearchResults], [fetchSearchResults],

79
app/screens/SearchResultsView.tsx
View File

@ -1,18 +1,18 @@
import GradientFlatList from '@app/components/GradientFlatList' import GradientFlatList from '@app/components/GradientFlatList'
import ListItem from '@app/components/ListItem' import ListItem from '@app/components/ListItem'
import { useFetchPaginatedList } from '@app/hooks/list' import { useFetchPaginatedList } from '@app/hooks/list'
import { AlbumListItem, Artist, Song } from '@app/models/music' import { Album, Artist, Song } from '@app/models/library'
import { selectMusic } from '@app/state/music' import { useStore, useStoreDeep } from '@app/state/store'
import { useStore } from '@app/state/store' import { Search3Params } from '@app/subsonic/params'
import { selectTrackPlayer } from '@app/state/trackplayer' import { mapById } from '@app/util/state'
import { useNavigation } from '@react-navigation/native' import { useNavigation } from '@react-navigation/native'
import React, { useCallback, useEffect } from 'react' import React, { useCallback, useEffect } from 'react'
import { StyleSheet } from 'react-native' import { StyleSheet } from 'react-native'
type SearchListItemType = AlbumListItem | Song | Artist type SearchListItemType = Album | Song | Artist
const ResultsListItem: React.FC<{ item: SearchListItemType }> = ({ item }) => { const ResultsListItem: React.FC<{ item: SearchListItemType }> = ({ item }) => {
const setQueue = useStore(selectTrackPlayer.setQueue) const setQueue = useStore(store => store.setQueue)
let onPress let onPress
if (item.itemType === 'song') { if (item.itemType === 'song') {
@ -40,27 +40,62 @@ const SearchResultsView: React.FC<{
type: 'album' | 'artist' | 'song' type: 'album' | 'artist' | 'song'
}> = ({ query, type }) => { }> = ({ query, type }) => {
const navigation = useNavigation() const navigation = useNavigation()
const fetchSearchResults = useStore(selectMusic.fetchSearchResults) const fetchSearchResults = useStore(store => store.fetchSearchResults)
const { list, refreshing, refresh, fetchNextPage } = useFetchPaginatedList<SearchListItemType>( const { list, refreshing, refresh, fetchNextPage } = useFetchPaginatedList(
useCallback( useCallback(
(size, offset) => async (size, offset) => {
fetchSearchResults(query, type, size, offset).then(results => { const params: Search3Params = { query }
switch (type) { if (type === 'album') {
case 'album': params.albumCount = size
return results.albums params.albumOffset = offset
case 'artist': } else if (type === 'artist') {
return results.artists params.artistCount = size
case 'song': params.artistOffset = offset
return results.songs } else if (type === 'song') {
default: params.songCount = size
return [] params.songOffset = offset
} } else {
}), params.albumCount = 5
params.artistCount = 5
params.songCount = 5
}
const results = await fetchSearchResults(params)
switch (type) {
case 'album':
return results.albums
case 'artist':
return results.artists
case 'song':
return results.songs
default:
return []
}
},
[fetchSearchResults, query, type], [fetchSearchResults, query, type],
), ),
100, 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(() => { useEffect(() => {
navigation.setOptions({ navigation.setOptions({
title: `Search: "${query}"`, title: `Search: "${query}"`,
@ -70,7 +105,7 @@ const SearchResultsView: React.FC<{
return ( return (
<GradientFlatList <GradientFlatList
data={list} data={items}
renderItem={SearchResultsRenderItem} renderItem={SearchResultsRenderItem}
keyExtractor={(item, i) => i.toString()} keyExtractor={(item, i) => i.toString()}
onRefresh={refresh} onRefresh={refresh}

21
app/screens/ServerView.tsx
View File

@ -1,8 +1,7 @@
import Button from '@app/components/Button' import Button from '@app/components/Button'
import GradientScrollView from '@app/components/GradientScrollView' import GradientScrollView from '@app/components/GradientScrollView'
import { Server } from '@app/models/settings' import { Server } from '@app/models/settings'
import { selectSettings } from '@app/state/settings' import { useStore, useStoreDeep } from '@app/state/store'
import { useStore } from '@app/state/store'
import colors from '@app/styles/colors' import colors from '@app/styles/colors'
import font from '@app/styles/font' import font from '@app/styles/font'
import toast from '@app/util/toast' import toast from '@app/util/toast'
@ -19,13 +18,13 @@ const ServerView: React.FC<{
id?: string id?: string
}> = ({ id }) => { }> = ({ id }) => {
const navigation = useNavigation() const navigation = useNavigation()
const activeServer = useStore(selectSettings.activeServer) const activeServerId = useStore(store => store.settings.activeServerId)
const servers = useStore(selectSettings.servers) const servers = useStoreDeep(store => store.settings.servers)
const addServer = useStore(selectSettings.addServer) const addServer = useStore(store => store.addServer)
const updateServer = useStore(selectSettings.updateServer) const updateServer = useStore(store => store.updateServer)
const removeServer = useStore(selectSettings.removeServer) const removeServer = useStore(store => store.removeServer)
const server = id ? servers.find(s => s.id === id) : undefined const server = id ? servers[id] : undefined
const pingServer = useStore(selectSettings.pingServer) const pingServer = useStore(store => store.pingServer)
const [address, setAddress] = useState(server?.address || '') const [address, setAddress] = useState(server?.address || '')
const [username, setUsername] = useState(server?.username || '') const [username, setUsername] = useState(server?.username || '')
@ -44,8 +43,8 @@ const ServerView: React.FC<{
}, [address, username, password]) }, [address, username, password])
const canRemove = useCallback(() => { const canRemove = useCallback(() => {
return id && servers.length > 1 && activeServer?.id !== id return id && Object.keys(servers).length > 1 && activeServerId !== id
}, [id, servers, activeServer]) }, [id, servers, activeServerId])
const exit = useCallback(() => { const exit = useCallback(() => {
if (navigation.canGoBack()) { 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 SettingsItem from '@app/components/SettingsItem'
import SettingsSwitch from '@app/components/SettingsSwitch' import SettingsSwitch from '@app/components/SettingsSwitch'
import TextInput from '@app/components/TextInput' 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 { Server } from '@app/models/settings'
import { selectCache } from '@app/state/cache' import { useStore, useStoreDeep } from '@app/state/store'
import { selectSettings } from '@app/state/settings'
import { useStore } from '@app/state/store'
import colors from '@app/styles/colors' import colors from '@app/styles/colors'
import font from '@app/styles/font' import font from '@app/styles/font'
import { useNavigation } from '@react-navigation/core' import { useNavigation } from '@react-navigation/core'
@ -22,7 +20,7 @@ import { version } from '../../package.json'
const ServerItem = React.memo<{ const ServerItem = React.memo<{
server: Server server: Server
}>(({ server }) => { }>(({ server }) => {
const activeServer = useStore(selectSettings.activeServer) const activeServerId = useStore(store => store.settings.activeServerId)
const switchActiveServer = useSwitchActiveServer() const switchActiveServer = useSwitchActiveServer()
const navigation = useNavigation() const navigation = useNavigation()
@ -36,7 +34,7 @@ const ServerItem = React.memo<{
subtitle={server.username} subtitle={server.username}
onPress={() => navigation.navigate('server', { id: server.id })}> onPress={() => navigation.navigate('server', { id: server.id })}>
<PressableOpacity style={styles.serverActive} onPress={setActive}> <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-marked-circle" size={30} color={colors.accent} />
) : ( ) : (
<Icon name="checkbox-blank-circle-outline" size={30} color={colors.text.secondary} /> <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 SettingsContent = React.memo(() => {
const servers = useStore(selectSettings.servers) const servers = useStoreDeep(store => store.settings.servers)
const scrobble = useStore(selectSettings.scrobble) const scrobble = useStore(store => store.settings.scrobble)
const setScrobble = useStore(selectSettings.setScrobble) const setScrobble = useStore(store => store.setScrobble)
// doesn't seem to ever be a case where we want this off const maxBitrateWifi = useStore(store => store.settings.maxBitrateWifi)
// will remove later if there isn't a use case for disabling const setMaxBitrateWifi = useStore(store => store.setMaxBitrateWifi)
// const estimateContentLength = useStore(selectSettings.estimateContentLength)
// const setEstimateContentLength = useStore(selectSettings.setEstimateContentLength)
const maxBitrateWifi = useStore(selectSettings.maxBitrateWifi) const maxBitrateMobile = useStore(store => store.settings.maxBitrateMobile)
const setMaxBitrateWifi = useStore(selectSettings.setMaxBitrateWifi) const setMaxBitrateMobile = useStore(store => store.setMaxBitrateMobile)
const maxBitrateMobile = useStore(selectSettings.maxBitrateMobile) const minBuffer = useStore(store => store.settings.minBuffer)
const setMaxBitrateMobile = useStore(selectSettings.setMaxBitrateMobile) 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 clearImageCache = useStore(store => store.clearImageCache)
const setMinBuffer = useStore(selectSettings.setMinBuffer)
const maxBuffer = useStore(selectSettings.maxBuffer)
const setMaxBuffer = useStore(selectSettings.setMaxBuffer)
const clearImageCache = useStore(selectCache.clearImageCache)
const [clearing, setClearing] = useState(false) const [clearing, setClearing] = useState(false)
const navigation = useNavigation() const navigation = useNavigation()
@ -239,7 +232,7 @@ const SettingsContent = React.memo(() => {
return ( return (
<View style={styles.content}> <View style={styles.content}>
<Header>Servers</Header> <Header>Servers</Header>
{servers.map(s => ( {Object.values(servers).map(s => (
<ServerItem key={s.id} server={s} /> <ServerItem key={s.id} server={s} />
))} ))}
<Button <Button
@ -251,12 +244,6 @@ const SettingsContent = React.memo(() => {
<Header style={styles.header}>Network</Header> <Header style={styles.header}>Network</Header>
<BitrateModal title="Maximum bitrate (Wi-Fi)" bitrate={maxBitrateWifi} setBitrate={setMaxBitrateWifi} /> <BitrateModal title="Maximum bitrate (Wi-Fi)" bitrate={maxBitrateWifi} setBitrate={setMaxBitrateWifi} />
<BitrateModal title="Maximum bitrate (mobile)" bitrate={maxBitrateMobile} setBitrate={setMaxBitrateMobile} /> <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 <SettingsTextModal
title="Minimum buffer time" title="Minimum buffer time"
value={minBuffer.toString()} value={minBuffer.toString()}

94
app/screens/SongListView.tsx
View File

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

2
app/screens/SplashPage.tsx
View File

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

178
app/state/cache.ts
View File

@ -1,10 +1,8 @@
import { CacheFile, CacheImageSize, CacheItemType, CacheItemTypeKey, CacheRequest } from '@app/models/cache' import { CacheFile, CacheImageSize, CacheItemType, CacheItemTypeKey, CacheRequest } from '@app/models/cache'
import { mkdir, rmdir } from '@app/util/fs' import { mkdir, rmdir } from '@app/util/fs'
import PromiseQueue from '@app/util/PromiseQueue' import PromiseQueue from '@app/util/PromiseQueue'
import produce from 'immer'
import RNFS from 'react-native-fs' import RNFS from 'react-native-fs'
import { GetState, SetState } from 'zustand' import { GetStore, SetStore } from './store'
import { Store } from './store'
const queues: Record<CacheItemTypeKey, PromiseQueue> = { const queues: Record<CacheItemTypeKey, PromiseQueue> = {
coverArt: new PromiseQueue(5), 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 CacheFilesByServer = Record<string, Record<CacheItemTypeKey, Record<string, CacheFile>>>
export type CacheRequestsByServer = Record<string, Record<CacheItemTypeKey, Record<string, CacheRequest>>> 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 = { export type CacheSlice = {
cacheItem: ( cacheItem: (
key: CacheItemTypeKey, key: CacheItemTypeKey,
@ -51,13 +39,7 @@ export type CacheSlice = {
clearImageCache: () => Promise<void> clearImageCache: () => Promise<void>
} }
export const selectCache = { export const createCacheSlice = (set: SetStore, get: GetStore): CacheSlice => ({
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 => ({
// cache: {}, // cache: {},
cacheDirs: {}, cacheDirs: {},
cacheFiles: {}, cacheFiles: {},
@ -69,7 +51,7 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
return return
} }
const activeServerId = get().settings.activeServer const activeServerId = get().settings.activeServerId
if (!activeServerId) { if (!activeServerId) {
return return
} }
@ -115,34 +97,28 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
// }, // },
}).promise }).promise
set( set(state => {
produce<CacheSlice>(state => { state.cacheRequests[activeServerId][key][itemId].progress = 1
state.cacheRequests[activeServerId][key][itemId].progress = 1 delete state.cacheRequests[activeServerId][key][itemId].promise
delete state.cacheRequests[activeServerId][key][itemId].promise })
}),
)
} catch { } catch {
set( set(state => {
produce<CacheSlice>(state => { delete state.cacheFiles[activeServerId][key][itemId]
delete state.cacheFiles[activeServerId][key][itemId] delete state.cacheRequests[activeServerId][key][itemId]
delete state.cacheRequests[activeServerId][key][itemId] })
}), }
) })
set(state => {
state.cacheFiles[activeServerId][key][itemId] = {
path,
date: Date.now(),
permanent: false,
}
state.cacheRequests[activeServerId][key][itemId] = {
progress: 0,
promise,
} }
}) })
set(
produce<Store>(state => {
state.cacheFiles[activeServerId][key][itemId] = {
path,
date: Date.now(),
permanent: false,
}
state.cacheRequests[activeServerId][key][itemId] = {
progress: 0,
promise,
}
}),
)
return await promise return await promise
}, },
@ -152,7 +128,7 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
return return
} }
const activeServerId = get().settings.activeServer const activeServerId = get().settings.activeServerId
if (!activeServerId) { if (!activeServerId) {
return return
} }
@ -183,54 +159,48 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
await mkdir(`${RNFS.DocumentDirectoryPath}/servers/${serverId}/${type}`) await mkdir(`${RNFS.DocumentDirectoryPath}/servers/${serverId}/${type}`)
} }
set( set(state => {
produce<CacheSlice>(state => { state.cacheFiles[serverId] = {
state.cacheFiles[serverId] = { song: {},
coverArt: {},
coverArtThumb: {},
artistArt: {},
artistArtThumb: {},
}
})
get().prepareCache(serverId)
},
prepareCache: serverId => {
set(state => {
if (!state.cacheDirs[serverId]) {
state.cacheDirs[serverId] = {
song: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/song`,
coverArt: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/coverArt`,
coverArtThumb: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/coverArtThumb`,
artistArt: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/artistArt`,
artistArtThumb: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/artistArtThumb`,
}
}
if (!state.cacheRequests[serverId]) {
state.cacheRequests[serverId] = {
song: {}, song: {},
coverArt: {}, coverArt: {},
coverArtThumb: {}, coverArtThumb: {},
artistArt: {}, artistArt: {},
artistArtThumb: {}, artistArtThumb: {},
} }
}), }
) })
get().prepareCache(serverId)
},
prepareCache: serverId => {
set(
produce<CacheSlice>(state => {
if (!state.cacheDirs[serverId]) {
state.cacheDirs[serverId] = {
song: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/song`,
coverArt: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/coverArt`,
coverArtThumb: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/coverArtThumb`,
artistArt: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/artistArt`,
artistArtThumb: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/artistArtThumb`,
}
}
if (!state.cacheRequests[serverId]) {
state.cacheRequests[serverId] = {
song: {},
coverArt: {},
coverArtThumb: {},
artistArt: {},
artistArtThumb: {},
}
}
}),
)
}, },
pendingRemoval: {}, pendingRemoval: {},
removeCache: async serverId => { removeCache: async serverId => {
set( set(state => {
produce<CacheSlice>(state => { state.pendingRemoval[serverId] = true
state.pendingRemoval[serverId] = true })
}),
)
const cacheRequests = get().cacheRequests[serverId] const cacheRequests = get().cacheRequests[serverId]
const pendingRequests: Promise<void>[] = [] const pendingRequests: Promise<void>[] = []
@ -245,21 +215,19 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
await Promise.all(pendingRequests) await Promise.all(pendingRequests)
await rmdir(`${RNFS.DocumentDirectoryPath}/servers/${serverId}`) await rmdir(`${RNFS.DocumentDirectoryPath}/servers/${serverId}`)
set( set(state => {
produce<CacheSlice>(state => { delete state.pendingRemoval[serverId]
delete state.pendingRemoval[serverId]
if (state.cacheDirs[serverId]) { if (state.cacheDirs[serverId]) {
delete state.cacheDirs[serverId] delete state.cacheDirs[serverId]
} }
if (state.cacheFiles[serverId]) { if (state.cacheFiles[serverId]) {
delete state.cacheFiles[serverId] delete state.cacheFiles[serverId]
} }
if (state.cacheRequests[serverId]) { if (state.cacheRequests[serverId]) {
delete state.cacheRequests[serverId] delete state.cacheRequests[serverId]
} }
}), })
)
}, },
clearImageCache: async () => { clearImageCache: async () => {
@ -280,14 +248,12 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
await rmdir(get().cacheDirs[serverId].artistArt) await rmdir(get().cacheDirs[serverId].artistArt)
await mkdir(get().cacheDirs[serverId].artistArt) await mkdir(get().cacheDirs[serverId].artistArt)
set( set(state => {
produce<CacheSlice>(state => { state.cacheFiles[serverId].coverArt = {}
state.cacheFiles[serverId].coverArt = {} state.cacheFiles[serverId].coverArtThumb = {}
state.cacheFiles[serverId].coverArtThumb = {} state.cacheFiles[serverId].artistArt = {}
state.cacheFiles[serverId].artistArt = {} state.cacheFiles[serverId].artistArtThumb = {}
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> = [ const migrations: Array<(state: any) => any> = [
state => { state => {
for (let server of state.settings.servers) { for (let server of state.settings.servers) {
server.usePlainPassword = false 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 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,
}
},
})

204
app/state/settings.ts
View File

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

137
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 { createSettingsSlice, SettingsSlice } from '@app/state/settings'
import AsyncStorage from '@react-native-async-storage/async-storage' import AsyncStorage from '@react-native-async-storage/async-storage'
import create from 'zustand' import equal from 'fast-deep-equal'
import { persist, StateStorage } from 'zustand/middleware' import create, { GetState, Mutate, SetState, State, StateCreator, StateSelector, StoreApi } from 'zustand'
import { persist, subscribeWithSelector } from 'zustand/middleware'
import { CacheSlice, createCacheSlice } from './cache' import { CacheSlice, createCacheSlice } from './cache'
import { createLibrarySlice, LibrarySlice } from './library'
import migrations from './migrations' import migrations from './migrations'
import { createMusicMapSlice, MusicMapSlice } from './musicmap'
import { createTrackPlayerSlice, TrackPlayerSlice } from './trackplayer' import { createTrackPlayerSlice, TrackPlayerSlice } from './trackplayer'
import { createTrackPlayerMapSlice, TrackPlayerMapSlice } from './trackplayermap' import { createTrackPlayerMapSlice, TrackPlayerMapSlice } from './trackplayermap'
import produce, { Draft } from 'immer'
import { WritableDraft } from 'immer/dist/internal'
const DB_VERSION = migrations.length const DB_VERSION = migrations.length
export type Store = SettingsSlice & export type Store = SettingsSlice &
MusicSlice & LibrarySlice &
MusicMapSlice &
TrackPlayerSlice & TrackPlayerSlice &
TrackPlayerMapSlice & TrackPlayerMapSlice &
CacheSlice & { CacheSlice & {
@ -21,59 +22,83 @@ export type Store = SettingsSlice &
setHydrated: (hydrated: boolean) => void setHydrated: (hydrated: boolean) => void
} }
const storage: StateStorage = { // taken from zustand test examples:
getItem: async name => { // https://github.com/pmndrs/zustand/blob/v3.7.1/tests/middlewareTypes.test.tsx#L20
try { const immer =
return await AsyncStorage.getItem(name) <
} catch (err) { T extends State,
console.error(`getItem error (key: ${name})`, err) CustomSetState extends SetState<T>,
return null CustomGetState extends GetState<T>,
} CustomStoreApi extends StoreApi<T>,
}, >(
setItem: async (name, item) => { config: StateCreator<
try { T,
await AsyncStorage.setItem(name, item) (partial: ((draft: Draft<T>) => void) | T, replace?: boolean) => void,
} catch (err) { CustomGetState,
console.error(`setItem error (key: ${name})`, err) CustomStoreApi
} >,
}, ): StateCreator<T, CustomSetState, CustomGetState, CustomStoreApi> =>
} (set, get, api) =>
config(
export const useStore = create<Store>( (partial, replace) => {
persist( const nextState = typeof partial === 'function' ? produce(partial as (state: Draft<T>) => T) : (partial as T)
(set, get) => ({ return set(nextState, replace)
...createSettingsSlice(set, get),
...createMusicSlice(set, get),
...createMusicMapSlice(set, get),
...createTrackPlayerSlice(set, get),
...createTrackPlayerMapSlice(set, get),
...createCacheSlice(set, get),
hydrated: false,
setHydrated: hydrated => set({ hydrated }),
}),
{
name: '@appStore',
version: DB_VERSION,
getStorage: () => storage,
whitelist: ['settings', 'cacheFiles'],
onRehydrateStorage: _preState => {
return async (postState, _error) => {
await postState?.setActiveServer(postState.settings.activeServer, true)
postState?.setHydrated(true)
}
}, },
migrate: (persistedState, version) => { get,
if (version > DB_VERSION) { api,
throw new Error('cannot migrate db on a downgrade, delete all data first') )
}
for (let i = version; i < DB_VERSION; i++) { export type SetStore = (partial: Store | ((draft: WritableDraft<Store>) => void), replace?: boolean | undefined) => void
persistedState = migrations[i](persistedState) export type GetStore = GetState<Store>
}
return persistedState // 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(
immer((set, get) => ({
...createSettingsSlice(set, get),
...createLibrarySlice(set, get),
...createTrackPlayerSlice(set, get),
...createTrackPlayerMapSlice(set, get),
...createCacheSlice(set, get),
hydrated: false,
setHydrated: hydrated =>
set(state => {
state.hydrated = hydrated
}),
})),
{
name: '@appStore',
version: DB_VERSION,
getStorage: () => AsyncStorage,
partialize: state => ({ settings: state.settings, cacheFiles: state.cacheFiles }),
onRehydrateStorage: _preState => {
return async (postState, _error) => {
await postState?.setActiveServer(postState.settings.activeServerId, true)
postState?.setHydrated(true)
}
},
migrate: (persistedState, version) => {
if (version > DB_VERSION) {
throw new Error('cannot migrate db on a downgrade, delete all data first')
}
for (let i = version; i < DB_VERSION; i++) {
persistedState = migrations[i](persistedState)
}
return persistedState
},
}, },
}, ),
), ),
) )
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 { 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 PromiseQueue from '@app/util/PromiseQueue'
import produce from 'immer' import produce from 'immer'
import TrackPlayer, { PlayerOptions, RepeatMode, State, Track } from 'react-native-track-player' import TrackPlayer, { PlayerOptions, RepeatMode, State } from 'react-native-track-player'
import { GetState, SetState } from 'zustand' import { GetStore, SetStore } from './store'
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'
export type TrackPlayerSlice = { export type TrackPlayerSlice = {
queueName?: string queueName?: string
@ -74,55 +57,26 @@ export type TrackPlayerSlice = {
getPlayerOptions: () => PlayerOptions 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 trackPlayerCommands = new PromiseQueue(1)
export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store>): TrackPlayerSlice => ({ export const createTrackPlayerSlice = (set: SetStore, get: GetStore): TrackPlayerSlice => ({
queueName: undefined, queueName: undefined,
setQueueName: name => set({ queueName: name }), setQueueName: name =>
set(state => {
state.queueName = name
}),
queueContextType: undefined, queueContextType: undefined,
setQueueContextType: queueContextType => set({ queueContextType }), setQueueContextType: queueContextType =>
set(state => {
state.queueContextType = queueContextType
}),
queueContextId: undefined, queueContextId: undefined,
setQueueContextId: queueContextId => set({ queueContextId }), setQueueContextId: queueContextId =>
set(state => {
state.queueContextId = queueContextId
}),
shuffleOrder: undefined, shuffleOrder: undefined,
toggleShuffle: async () => { toggleShuffle: async () => {
@ -140,7 +94,9 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
} }
await TrackPlayer.add(tracks) await TrackPlayer.add(tracks)
set({ shuffleOrder }) set(state => {
state.shuffleOrder = shuffleOrder
})
} else { } else {
const tracks = unshuffleTracks(queue, queueShuffleOrder) const tracks = unshuffleTracks(queue, queueShuffleOrder)
@ -155,11 +111,18 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
await TrackPlayer.add(tracks) await TrackPlayer.add(tracks)
} }
set({ shuffleOrder: undefined }) set(state => {
state.shuffleOrder = undefined
})
} }
set({ queue: await getQueue() }) const newQueue = await getQueue()
get().setCurrentTrackIdx(await getCurrentTrack()) 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) await TrackPlayer.setRepeatMode(nextMode)
set({ repeatMode: nextMode }) set(state => {
state.repeatMode = nextMode
})
}) })
}, },
playerState: State.None, playerState: State.None,
setPlayerState: playerState => set({ playerState }), setPlayerState: playerState =>
set(state => {
state.playerState = playerState
}),
currentTrack: undefined, currentTrack: undefined,
currentTrackIdx: undefined, currentTrackIdx: undefined,
@ -201,7 +169,10 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
}, },
duckPaused: false, duckPaused: false,
setDuckPaused: duckPaused => set({ duckPaused }), setDuckPaused: duckPaused =>
set(state => {
state.duckPaused = duckPaused
}),
queue: [], queue: [],
setQueue: async (songs, name, contextType, contextId, playTrack, shuffle) => { 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) let queue = await get().mapSongstoTrackExts(songs)
try {
for (const t of queue) {
t.url = get().buildStreamUri(t.id)
}
} catch {
return
}
if (shuffled) { if (shuffled) {
const { tracks, shuffleOrder } = shuffleTracks(queue, playTrack) const { tracks, shuffleOrder } = shuffleTracks(queue, playTrack)
set({ shuffleOrder }) set(state => {
state.shuffleOrder = shuffleOrder
})
queue = tracks queue = tracks
playTrack = 0 playTrack = 0
} else { } else {
set({ shuffleOrder: undefined }) set(state => {
state.shuffleOrder = undefined
})
} }
playTrack = playTrack || 0 playTrack = playTrack || 0
try { try {
set({ set(state => {
queue, state.queue = queue
queueName: name, state.queueName = name
queueContextType: contextType, state.queueContextType = contextType
queueContextId: contextId, state.queueContextId = contextId
}) })
get().setCurrentTrackIdx(playTrack) get().setCurrentTrackIdx(playTrack)
@ -264,7 +231,10 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
}, },
progress: { position: 0, duration: 0, buffered: 0 }, progress: { position: 0, duration: 0, buffered: 0 },
setProgress: progress => set({ progress }), setProgress: progress =>
set(state => {
state.progress = progress
}),
scrobbleTrack: async id => { scrobbleTrack: async id => {
const client = get().client const client = get().client
@ -286,7 +256,9 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
if (netState === get().netState) { if (netState === get().netState) {
return return
} }
set({ netState }) set(state => {
state.netState = netState
})
get().rebuildQueue() get().rebuildQueue()
}, },
@ -298,7 +270,7 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
} }
const currentTrack = await getCurrentTrack() const currentTrack = await getCurrentTrack()
const state = await getPlayerState() const playerState = await getPlayerState()
const position = (await TrackPlayer.getPosition()) || 0 const position = (await TrackPlayer.getPosition()) || 0
const queueName = get().queueName const queueName = get().queueName
@ -316,11 +288,11 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
return return
} }
set({ set(state => {
queue, state.queue = queue
queueName, state.queueName = queueName
queueContextId, state.queueContextType = queueContextType
queueContextType, state.queueContextId = queueContextId
}) })
get().setCurrentTrackIdx(currentTrack) get().setCurrentTrackIdx(currentTrack)
@ -332,7 +304,7 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
await TrackPlayer.seekTo(position) await TrackPlayer.seekTo(position)
if (state === State.Playing || forcePlay) { if (playerState === State.Playing || forcePlay) {
await TrackPlayer.play() await TrackPlayer.play()
} }
}) })
@ -346,23 +318,23 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
return client.streamUri({ return client.streamUri({
id, id,
estimateContentLength: get().settings.estimateContentLength, estimateContentLength: true,
maxBitRate: get().netState === 'mobile' ? get().settings.maxBitrateMobile : get().settings.maxBitrateWifi, maxBitRate: get().netState === 'mobile' ? get().settings.maxBitrateMobile : get().settings.maxBitrateWifi,
}) })
}, },
resetTrackPlayerState: () => { resetTrackPlayerState: () => {
set({ set(state => {
queueName: undefined, state.queueName = undefined
queueContextType: undefined, state.queueContextType = undefined
queueContextId: undefined, state.queueContextId = undefined
shuffleOrder: undefined, state.shuffleOrder = undefined
repeatMode: RepeatMode.Off, state.repeatMode = RepeatMode.Off
playerState: State.None, state.playerState = State.None
currentTrack: undefined, state.currentTrack = undefined
currentTrackIdx: undefined, state.currentTrackIdx = undefined
queue: [], state.queue = []
progress: { position: 0, duration: 0, buffered: 0 }, 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 userAgent from '@app/util/userAgent'
import { GetState, SetState } from 'zustand' import { GetStore, SetStore } from '@app/state/store'
import { Store } from './store'
import { TrackExt } from './trackplayer'
export type TrackPlayerMapSlice = { export type TrackPlayerMapSlice = {
mapSongtoTrackExt: (song: Song) => Promise<TrackExt> mapSongtoTrackExt: (song: Song) => Promise<TrackExt>
@ -10,11 +9,7 @@ export type TrackPlayerMapSlice = {
mapTrackExtToSong: (song: TrackExt) => Song mapTrackExtToSong: (song: TrackExt) => Song
} }
export const selectTrackPlayerMap = { export const createTrackPlayerMapSlice = (set: SetStore, get: GetStore): TrackPlayerMapSlice => ({
mapTrackExtToSong: (store: TrackPlayerMapSlice) => store.mapTrackExtToSong,
}
export const createTrackPlayerMapSlice = (set: SetState<Store>, get: GetState<Store>): TrackPlayerMapSlice => ({
mapSongtoTrackExt: async song => { mapSongtoTrackExt: async song => {
let artwork = require('@res/fallback.png') let artwork = require('@res/fallback.png')
if (song.coverArt) { if (song.coverArt) {
@ -29,7 +24,7 @@ export const createTrackPlayerMapSlice = (set: SetState<Store>, get: GetState<St
title: song.title, title: song.title,
artist: song.artist || 'Unknown Artist', artist: song.artist || 'Unknown Artist',
album: song.album || 'Unknown Album', album: song.album || 'Unknown Album',
url: song.streamUri, url: get().buildStreamUri(song.id),
userAgent, userAgent,
artwork, artwork,
coverArt: song.coverArt, coverArt: song.coverArt,

93
app/subsonic/api.ts
View File

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

4
app/subsonic/params.ts
View File

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

232
app/subsonic/responses.ts
View File

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

11
package.json
View File

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

2
tsconfig.json
View File

@ -59,5 +59,5 @@
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
"resolveJsonModule": true "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: dependencies:
"@types/lodash" "*" "@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": "@types/lodash@*", "@types/lodash@^4.14.53":
version "4.14.178" version "4.14.178"
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.178.tgz#341f6d2247db528d4a13ddbb374bcdc80406f4f8" 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" define-properties "^1.1.3"
es-abstract "^1.19.0" es-abstract "^1.19.0"
asap@~2.0.3, asap@~2.0.6: asap@~2.0.6:
version "2.0.6" version "2.0.6"
resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46" resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY= integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
@ -2543,13 +2557,6 @@ cosmiconfig@^5.0.5, cosmiconfig@^5.1.0:
js-yaml "^3.13.1" js-yaml "^3.13.1"
parse-json "^4.0.0" 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: cross-spawn@^6.0.0:
version "6.0.5" version "6.0.5"
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
@ -3210,24 +3217,6 @@ fb-watchman@^2.0.0:
dependencies: dependencies:
bser "2.1.1" 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: file-entry-cache@^6.0.1:
version "6.0.1" version "6.0.1"
resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027" 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" resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM= 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" version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@ -5351,11 +5340,6 @@ node-dir@^0.1.17:
dependencies: dependencies:
minimatch "^3.0.2" 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: node-fetch@^2.2.0, node-fetch@^2.6.0:
version "2.6.7" version "2.6.7"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad" 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" resolved "https://registry.yarnpkg.com/ob1/-/ob1-0.66.2.tgz#8caf548202cf2688944bae47db405a08bca17a61"
integrity sha512-RFewnL/RjE0qQBOuM+2bbY96zmJPIge/aDtsiDbLSb+MOiK8CReAhBHDgL+zrA3F1hQk00lMWpUwYcep750plA== 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" version "4.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM= integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
@ -5880,13 +5864,6 @@ progress@^2.0.0:
resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8" resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA== 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: promise@^8.0.3:
version "8.1.0" version "8.1.0"
resolved "https://registry.yarnpkg.com/promise/-/promise-8.1.0.tgz#697c25c3dfe7435dd79fcd58c38a135888eaf05e" 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" base-64 "^0.1.0"
utf8 "^3.0.0" utf8 "^3.0.0"
react-native-gesture-handler@^1.10.3: react-native-gesture-handler@^2.3.2:
version "1.10.3" version "2.3.2"
resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.10.3.tgz#942bbf2963bbf49fa79593600ee9d7b5dab3cfc0" resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.3.2.tgz#65ce3b145bd96242c2200abbb9730c94bc73386c"
integrity sha512-cBGMi1IEsIVMgoox4RvMx7V2r6bNKw0uR1Mu1o7NbuHS6BRSVLq0dP34l2ecnPlC+jpWd3le6Yg1nrdCjby2Mw== integrity sha512-ibcYWHMiDbioUcaAMuw3/Taz3mYn0fJz0q2KnGX1hWpLNz/x/E5/BzKB+T3ycwAm1dQEgPgHWpaZ8eqO/EVFlw==
dependencies: dependencies:
"@egjs/hammerjs" "^2.0.17" "@egjs/hammerjs" "^2.0.17"
fbjs "^3.0.0"
hoist-non-react-statics "^3.3.0" hoist-non-react-statics "^3.3.0"
invariant "^2.2.4" invariant "^2.2.4"
lodash "^4.17.21"
prop-types "^15.7.2" prop-types "^15.7.2"
react-native-get-random-values@^1.7.0: 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" is-plain-object "^2.0.3"
split-string "^3.0.1" 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: setprototypeof@1.2.0:
version "1.2.0" version "1.2.0"
resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424" resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
@ -7130,15 +7102,10 @@ typedarray-to-buffer@^3.1.5:
dependencies: dependencies:
is-typedarray "^1.0.0" is-typedarray "^1.0.0"
typescript@^3.8.3: typescript@^4.6.2:
version "3.9.10" version "4.6.2"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.10.tgz#70f3910ac7a51ed6bef79da7800690b19bf778b8" resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.2.tgz#fe12d2727b708f4eef40f51598b3398baa9611d4"
integrity sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q== integrity sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==
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==
uglify-es@^3.1.9: uglify-es@^3.1.9:
version "3.3.9" version "3.3.9"
@ -7615,7 +7582,7 @@ yargs@^16.1.1:
y18n "^5.0.5" y18n "^5.0.5"
yargs-parser "^20.2.2" yargs-parser "^20.2.2"
zustand@^3.5.7: zustand@^3.7.1:
version "3.6.9" version "3.7.1"
resolved "https://registry.yarnpkg.com/zustand/-/zustand-3.6.9.tgz#f61a756ddea9f95c7ee7cfd3af2f88c10078afbc" resolved "https://registry.yarnpkg.com/zustand/-/zustand-3.7.1.tgz#7388f0a7175a6c2fd9a2880b383a4bf6cdf6b7c6"
integrity sha512-OvDNu/jEWpRnEC7k8xh8GKjqYog7td6FZrLMuHs/IeI8WhrCwV+FngVuwMIFhp5kysZXr6emaeReMqjLGaldAQ== integrity sha512-wHBCZlKj+bg03/hP+Tzv24YhnqqP8MCeN9ECPDXoF01062SIbnfl3j9O0znkDw1lNTY0a8WN3F///a0UhhaEqg==