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

React Query refactor (#91)

Browse Source 
* initial react-query experiments

* use queries for item screens

send the data we do have over routing to prepopulate (album/playlist)
use number for starred because sending Date freaks out react-navigation

* add in equiv. song cover art fix

* reorg, switch artistview over

start mapping song cover art when any are available

* refactor useStar to queries

fix caching for starred items and album cover art

* add hook to reset queries on server change

* refactor search to use query

* fix song cover art setting

* use query for artistInfo

* remove last bits of library state

* cleanup

* use query key factory

already fixed one wrong key...

* require coverart size

* let's try no promise queues on these for now

* image cache uses query

* perf fix for playlist parsing

also use placeholder data so we don't have to deal with staleness

* drill that disabled

also list controls doesn't need its own songs hook/copy

* switch to react-native-blob-util for downloads

slightly slower but allows us to use DownloadManager, which backgrounds downloads so they are no longer corrupted when the app suspends

* add a fake "top songs" based on artist search

then sorted by play count/ratings
artistview should load now even if topSongs fails

* try not to swap between topSongs/search on refetch

set queueContext by song list so the index isn't off if the list changes

* add content type validation for file fetching

also try to speed up existing file return by limiting fs ops

* if the HEAD fails, don't queue the download

* clean up params

* reimpl clear image cache

* precompute contextId

prevents wrong "is playing" when any mismatch between queue and list

* clear images from all servers

use external files dir instead of cache

* fix pressable disabled flicker

don't retry topsongs on failure
try to optimize setqueue and fixcoverart a bit

* wait for queries during clear

* break out fetchExistingFile from fetchFile

allows to tell if file is coming from disk or not
only show placeholder/loading spinner if actually fetching image

* forgot these wouldn't do anything with objects

* remove query cache when switching servers

* add content-disposition extension gathering

add support for progress hook (needs native support still)

* added custom RNBU pkg with progress changes

* fully unmount tabs when server changes

prevents unwanted requests, gives fresh start on switch
fix fixCoverArt not re-rendering in certain cases on search

* use serverId from fetch deps

* fix lint

* update licenses

* just use the whole lodash package

* make using cache buster optional
This commit is contained in:
austinried 2022-04-11 09:40:51 +09:00 committed by GitHub
parent cbd88d0f13
commit 8196704ccd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
48 changed files with 2206 additions and 1801 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1469,6 +1469,32 @@ THE SOFTWARE.
-----
The following software may be included in this product: broadcast-channel. A copy of the source code may be downloaded from git+https://github.com/pubkey/broadcast-channel.git. This software contains the following license and notice below:
MIT License
Copyright (c) 2018 Daniel Meyer
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: browserslist. A copy of the source code may be downloaded from https://github.com/browserslist/browserslist.git. This software contains the following license and notice below:
The MIT License (MIT)
@ -2546,6 +2572,33 @@ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-----
The following software may be included in this product: content-disposition, depd, vary. A copy of the source code may be downloaded from https://github.com/jshttp/content-disposition.git (content-disposition), https://github.com/dougwilson/nodejs-depd.git (depd), https://github.com/jshttp/vary.git (vary). This software contains the following license and notice below:
(The MIT License)
Copyright (c) 2014-2017 Douglas Christopher Wilson
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: convert-source-map. A copy of the source code may be downloaded from git://github.com/thlorenz/convert-source-map.git. This software contains the following license and notice below:
Copyright 2013 Thorsten Lorenz.
@ -2927,33 +2980,6 @@ THE SOFTWARE.
-----
The following software may be included in this product: depd, vary. A copy of the source code may be downloaded from https://github.com/dougwilson/nodejs-depd.git (depd), https://github.com/jshttp/vary.git (vary). This software contains the following license and notice below:
(The MIT License)
Copyright (c) 2014-2017 Douglas Christopher Wilson
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: destroy, ee-first, mime-db. A copy of the source code may be downloaded from https://github.com/stream-utils/destroy.git (destroy), https://github.com/jonathanong/ee-first.git (ee-first), https://github.com/jshttp/mime-db.git (mime-db). This software contains the following license and notice below:
The MIT License (MIT)
@ -2980,6 +3006,32 @@ THE SOFTWARE.
-----
The following software may be included in this product: detect-node. A copy of the source code may be downloaded from https://github.com/iliakan/detect-node. This software contains the following license and notice below:
MIT License
Copyright (c) 2017 Ilya Kantor
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: electron-to-chromium. A copy of the source code may be downloaded from https://github.com/kilian/electron-to-chromium/. This software contains the following license and notice below:
Copyright 2018 Kilian Valkhof
@ -4180,6 +4232,31 @@ SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-----
The following software may be included in this product: js-sha3. A copy of the source code may be downloaded from https://github.com/emn178/js-sha3.git. This software contains the following license and notice below:
Copyright 2015-2018 Chen, Yi-Cyuan
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: js-tokens. A copy of the source code may be downloaded from https://github.com/lydell/js-tokens.git. This software contains the following license and notice below:
The MIT License (MIT)
@ -4393,7 +4470,7 @@ OR OTHER DEALINGS IN THE SOFTWARE.
-----
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:
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:
Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
@ -4740,6 +4817,31 @@ THE SOFTWARE.
-----
The following software may be included in this product: match-sorter. A copy of the source code may be downloaded from https://github.com/kentcdodds/match-sorter. This software contains the following license and notice below:
The MIT License (MIT)
Copyright (c) 2020 Kent C. Dodds
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: md5. A copy of the source code may be downloaded from git://github.com/pvorb/node-md5.git. This software contains the following license and notice below:
Copyright © 2011-2012, Paul Vorbach.
@ -4850,6 +4952,34 @@ THE SOFTWARE.
-----
The following software may be included in this product: mime-db. A copy of the source code may be downloaded from https://github.com/jshttp/mime-db.git. This software contains the following license and notice below:
(The MIT License)
Copyright (c) 2014 Jonathan Ong <me@jongleberry.com>
Copyright (c) 2015-2022 Douglas Christopher Wilson <doug@somethingdoug.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: mkdirp. A copy of the source code may be downloaded from https://github.com/substack/node-mkdirp.git. This software contains the following license and notice below:
Copyright 2010 James Halliday (mail@substack.net)
@ -5381,6 +5511,32 @@ SOFTWARE.
-----
The following software may be included in this product: oblivious-set. A copy of the source code may be downloaded from https://github.com/pubkey/oblivious-set. This software contains the following license and notice below:
MIT License
Copyright (c) 2020 Daniel Meyer
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: on-finished. A copy of the source code may be downloaded from https://github.com/jshttp/on-finished.git. This software contains the following license and notice below:
(The MIT License)
@ -5515,6 +5671,29 @@ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-----
The following software may be included in this product: path, util. A copy of the source code may be downloaded from git://github.com/jinder/path.git (path), git://github.com/defunctzombie/node-util (util). This software contains the following license and notice below:
Copyright Joyent, Inc. and other Node contributors. All rights reserved.
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: path-parse. A copy of the source code may be downloaded from https://github.com/jbgutierrez/path-parse.git. This software contains the following license and notice below:
The MIT License (MIT)
@ -5905,6 +6084,32 @@ SOFTWARE.
-----
The following software may be included in this product: react-native-blob-util. A copy of the source code may be downloaded from https://github.com/RonRadtke/react-native-blob-util. This software contains the following license and notice below:
MIT License
Copyright (c) 2017 xeiyan@gmail.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: react-native-fs. A copy of the source code may be downloaded from git@github.com:itinance/react-native-fs.git. This software contains the following license and notice below:
The MIT License (MIT)
@ -5957,32 +6162,6 @@ SOFTWARE.
-----
The following software may be included in this product: react-native-get-random-values. A copy of the source code may be downloaded from https://github.com/LinusU/react-native-get-random-values.git. This software contains the following license and notice below:
MIT License
Copyright (c) 2018, 2020 Linus Unnebäck
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-image-colors. A copy of the source code may be downloaded from https://github.com/osamaqarem/react-native-image-colors. This software contains the following license and notice below:
MIT License
@ -6391,6 +6570,32 @@ Apache License
-----
The following software may be included in this product: react-native-uuid. A copy of the source code may be downloaded from git+https://github.com/eugenehp/react-native-uuid.git. This software contains the following license and notice below:
MIT License
Copyright (c) 2016-2021 Eugene Hauptmann
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-vector-icons. A copy of the source code may be downloaded from git://github.com/oblador/react-native-vector-icons.git. This software contains the following license and notice below:
The MIT License (MIT)
@ -6417,6 +6622,32 @@ SOFTWARE.
-----
The following software may be included in this product: react-query. A copy of the source code may be downloaded from https://github.com/tannerlinsley/react-query.git. This software contains the following license and notice below:
MIT License
Copyright (c) 2019 Tanner Linsley
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: readable-stream. A copy of the source code may be downloaded from git://github.com/nodejs/readable-stream. This software contains the following license and notice below:
Node.js is licensed for use as follows:
@ -6572,6 +6803,32 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-----
The following software may be included in this product: remove-accents. A copy of the source code may be downloaded from https://github.com/tyxla/remove-accents. This software contains the following license and notice below:
The MIT License (MIT)
Copyright (c) 2015 Marin Atanasov
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: remove-trailing-separator. A copy of the source code may be downloaded from git+https://github.com/darsain/remove-trailing-separator.git. This software contains the following license and notice below:
Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
@ -7623,6 +7880,212 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-----
The following software may be included in this product: unload. A copy of the source code may be downloaded from git+https://github.com/pubkey/unload.git. This software contains the following license and notice below:
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) 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
(d) 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.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright 2015-2016 Netflix, Inc., Microsoft Corp. and contributors
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-----
The following software may be included in this product: unpipe. A copy of the source code may be downloaded from https://github.com/stream-utils/unpipe.git. This software contains the following license and notice below:
(The MIT License)
@ -7782,20 +8245,6 @@ SOFTWARE.
-----
The following software may be included in this product: uuid. A copy of the source code may be downloaded from https://github.com/uuidjs/uuid.git. This software contains the following license and notice below:
The MIT License (MIT)
Copyright (c) 2010-2020 Robert Kieffer and other contributors
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: vlq. A copy of the source code may be downloaded from https://github.com/Rich-Harris/vlq. This software contains the following license and notice below:
Copyright (c) 2017 [these people](https://github.com/Rich-Harris/vlq/graphs/contributors)

6
android/licenses.yml
View File

@ -593,6 +593,12 @@
license: The Apache Software License, Version 2.0
licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
url: https://github.com/raphw/byte-buddy
- artifact: org.apache.commons:commons-lang3:+
name: commons-lang3
copyrightHolder: Original Author
license: The Apache Software License, Version 2.0
licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
url: http://commons.apache.org/lang/
- artifact: org.checkerframework:checker-compat-qual:+
name: checker-compat-qual
copyrightHolder: Original Author

35
app/App.tsx
View File

@ -6,6 +6,8 @@ import { StatusBar, View, StyleSheet } from 'react-native'
import ProgressHook from './components/ProgressHook'
import { useStore } from './state/store'
import { MenuProvider } from 'react-native-popup-menu'
import { QueryClientProvider } from 'react-query'
import queryClient from './queryClient'
const Debug = () => {
const currentTrackTitle = useStore(store => store.currentTrack?.title)
@ -13,18 +15,27 @@ const Debug = () => {
return <></>
}
const App = () => (
<MenuProvider backHandler={true}>
<View style={styles.appContainer}>
<StatusBar animated={true} backgroundColor={'rgba(0, 0, 0, 0.3)'} barStyle={'light-content'} translucent={true} />
<SplashPage>
<ProgressHook />
<Debug />
<RootNavigator />
</SplashPage>
</View>
</MenuProvider>
)
const App = () => {
return (
<QueryClientProvider client={queryClient}>
<MenuProvider backHandler={true}>
<View style={styles.appContainer}>
<StatusBar
animated={true}
backgroundColor={'rgba(0, 0, 0, 0.3)'}
barStyle={'light-content'}
translucent={true}
/>
<SplashPage>
<ProgressHook />
<Debug />
<RootNavigator />
</SplashPage>
</View>
</MenuProvider>
</QueryClientProvider>
)
}
const styles = StyleSheet.create({
appContainer: {

34
app/components/ContextMenu.tsx
View File

@ -1,5 +1,5 @@
import PressableOpacity from '@app/components/PressableOpacity'
import { useStar } from '@app/hooks/library'
import { useStar } from '@app/hooks/query'
import { StarrableItemType, Song, Artist, Album } from '@app/models/library'
import colors from '@app/styles/colors'
import font from '@app/styles/font'
@ -22,6 +22,7 @@ type ContextMenuProps = {
triggerTouchableStyle?: StyleProp<ViewStyle>
onPress?: () => any
triggerOnLongPress?: boolean
disabled?: boolean
}
type InternalContextMenuProps = ContextMenuProps & {
@ -39,6 +40,7 @@ const ContextMenu: React.FC<InternalContextMenuProps> = ({
menuOptions,
children,
triggerOnLongPress,
disabled,
}) => {
menuStyle = menuStyle || { flex: 1 }
triggerWrapperStyle = triggerWrapperStyle || { flex: 1 }
@ -47,11 +49,12 @@ const ContextMenu: React.FC<InternalContextMenuProps> = ({
return (
<Menu renderer={SlideInMenu} style={menuStyle}>
<MenuTrigger
disabled={disabled}
triggerOnLongPress={triggerOnLongPress === undefined ? true : triggerOnLongPress}
customStyles={{
triggerOuterWrapper: triggerOuterWrapperStyle,
triggerWrapper: triggerWrapperStyle,
triggerTouchable: { style: triggerTouchableStyle },
triggerTouchable: { style: triggerTouchableStyle, disabled },
TriggerTouchableComponent: PressableOpacity,
}}
onAlternativeAction={onPress}>
@ -117,9 +120,24 @@ const MenuHeader = React.memo<{
}>(({ coverArt, artistId, title, subtitle }) => (
<View style={styles.menuHeader}>
{artistId ? (
<CoverArt type="artist" artistId={artistId} style={styles.coverArt} resizeMode={'cover'} round={true} />
<CoverArt
type="artist"
artistId={artistId}
style={styles.coverArt}
resizeMode="cover"
round={true}
size="thumbnail"
fadeDuration={0}
/>
) : (
<CoverArt type="cover" coverArt={coverArt} style={styles.coverArt} resizeMode={'cover'} />
<CoverArt
type="cover"
coverArt={coverArt}
style={styles.coverArt}
resizeMode="cover"
size="thumbnail"
fadeDuration={0}
/>
)}
<View style={styles.menuHeaderText}>
<Text numberOfLines={1} style={styles.menuTitle}>
@ -141,13 +159,13 @@ const OptionStar = React.memo<{
type: StarrableItemType
additionalText?: string
}>(({ id, type, additionalText: text }) => {
const { starred, toggleStar } = useStar(id, type)
const { query, toggle } = useStar(id, type)
return (
<ContextMenuIconTextOption
IconComponentRaw={<Star starred={starred} size={26} />}
text={(starred ? 'Unstar' : 'Star') + (text ? ` ${text}` : '')}
onSelect={toggleStar}
IconComponentRaw={<Star starred={!!query.data} size={26} />}
text={(query.data ? 'Unstar' : 'Star') + (text ? ` ${text}` : '')}
onSelect={() => toggle.mutate()}
/>
)
})

56
app/components/CoverArt.tsx
View File

@ -1,5 +1,5 @@
import { useArtistArtFile, useCoverArtFile } from '@app/hooks/cache'
import { CacheFile, CacheImageSize, CacheRequest } from '@app/models/cache'
import { useQueryArtistArtPath, useQueryCoverArtPath } from '@app/hooks/query'
import { CacheImageSize } from '@app/models/cache'
import colors from '@app/styles/colors'
import React, { useState } from 'react'
import {
@ -18,7 +18,8 @@ type BaseProps = {
imageStyle?: ImageStyle
resizeMode?: ImageResizeMode
round?: boolean
size?: CacheImageSize
size: CacheImageSize
fadeDuration?: number
}
type ArtistCoverArtProps = BaseProps & {
@ -31,47 +32,54 @@ type CoverArtProps = BaseProps & {
coverArt?: string
}
const ImageSource = React.memo<{ cache?: { file?: CacheFile; request?: CacheRequest } } & BaseProps>(
({ cache, style, imageStyle, resizeMode }) => {
type ImageSourceProps = BaseProps & {
data?: string
isFetching: boolean
isExistingFetching: boolean
}
const ImageSource = React.memo<ImageSourceProps>(
({ style, imageStyle, resizeMode, data, isFetching, isExistingFetching, fadeDuration }) => {
const [error, setError] = useState(false)
let source: ImageSourcePropType
if (!error && cache?.file && !cache?.request?.promise) {
source = { uri: `file://${cache.file.path}`, cache: 'reload' }
if (!error && data) {
source = { uri: `file://${data}` }
} else {
source = require('@res/fallback.png')
}
return (
<>
<Image
source={source}
fadeDuration={150}
resizeMode={resizeMode || 'contain'}
style={[{ height: style?.height, width: style?.width }, imageStyle]}
onError={() => setError(true)}
/>
<ActivityIndicator
animating={!!cache?.request?.promise}
size="large"
color={colors.accent}
style={styles.indicator}
/>
{isExistingFetching ? (
<View style={{ height: style?.height, width: style?.width }} />
) : (
<Image
source={source}
fadeDuration={fadeDuration === undefined ? 250 : fadeDuration}
resizeMode={resizeMode || 'contain'}
style={[{ height: style?.height, width: style?.width }, imageStyle]}
onError={() => setError(true)}
/>
)}
{isFetching && (
<ActivityIndicator animating={true} size="large" color={colors.accent} style={styles.indicator} />
)}
</>
)
},
)
const ArtistImage = React.memo<ArtistCoverArtProps>(props => {
const cache = useArtistArtFile(props.artistId, props.size)
const { data, isFetching, isExistingFetching } = useQueryArtistArtPath(props.artistId, props.size)
return <ImageSource cache={cache} {...props} imageStyle={{ ...styles.artistImage, ...props.imageStyle }} />
return <ImageSource data={data} isFetching={isFetching} isExistingFetching={isExistingFetching} {...props} />
})
const CoverArtImage = React.memo<CoverArtProps>(props => {
const cache = useCoverArtFile(props.coverArt, props.size)
const { data, isFetching, isExistingFetching } = useQueryCoverArtPath(props.coverArt, props.size)
return <ImageSource cache={cache} {...props} />
return <ImageSource data={data} isFetching={isFetching} isExistingFetching={isExistingFetching} {...props} />
})
const CoverArt = React.memo<CoverArtProps | ArtistCoverArtProps>(props => {

33
app/components/ListItem.tsx
View File

@ -54,7 +54,8 @@ const ListItem: React.FC<{
listStyle?: 'big' | 'small'
subtitle?: string
style?: StyleProp<ViewStyle>
}> = ({ item, contextId, queueId, onPress, showArt, showStar, subtitle, listStyle, style }) => {
disabled?: boolean
}> = ({ item, contextId, queueId, onPress, showArt, showStar, subtitle, listStyle, style, disabled }) => {
const navigation = useNavigation()
showStar = showStar === undefined ? true : showStar
@ -65,13 +66,13 @@ const ListItem: React.FC<{
if (!onPress) {
switch (item.itemType) {
case 'album':
onPress = () => navigation.navigate('album', { id: item.id, title: item.name })
onPress = () => navigation.navigate('album', { id: item.id, title: item.name, album: item })
break
case 'artist':
onPress = () => navigation.navigate('artist', { id: item.id, title: item.name })
break
case 'playlist':
onPress = () => navigation.navigate('playlist', { id: item.id, title: item.name })
onPress = () => navigation.navigate('playlist', { id: item.id, title: item.name, playlist: item })
break
}
}
@ -90,35 +91,43 @@ const ListItem: React.FC<{
const itemPressable = useCallback(
({ children }) => (
<PressableOpacity onPress={onPress} style={styles.item}>
<PressableOpacity onPress={onPress} style={styles.item} disabled={disabled}>
{children}
</PressableOpacity>
),
[onPress],
[disabled, onPress],
)
const albumPressable = useCallback(
({ children }) => (
<AlbumContextPressable album={item as Album} onPress={onPress} triggerWrapperStyle={styles.item}>
<AlbumContextPressable
album={item as Album}
onPress={onPress}
triggerWrapperStyle={styles.item}
disabled={disabled}>
{children}
</AlbumContextPressable>
),
[item, onPress],
[disabled, item, onPress],
)
const songPressable = useCallback(
({ children }) => (
<SongContextPressable song={item as Song} onPress={onPress} triggerWrapperStyle={styles.item}>
<SongContextPressable song={item as Song} onPress={onPress} triggerWrapperStyle={styles.item} disabled={disabled}>
{children}
</SongContextPressable>
),
[item, onPress],
[disabled, item, onPress],
)
const artistPressable = useCallback(
({ children }) => (
<ArtistContextPressable artist={item as Artist} onPress={onPress} triggerWrapperStyle={styles.item}>
<ArtistContextPressable
artist={item as Artist}
onPress={onPress}
triggerWrapperStyle={styles.item}
disabled={disabled}>
{children}
</ArtistContextPressable>
),
[item, onPress],
[disabled, item, onPress],
)
let PressableComponent = itemPressable
@ -180,7 +189,7 @@ const ListItem: React.FC<{
</PressableComponent>
<View style={styles.controls}>
{showStar && item.itemType !== 'playlist' && (
<PressableStar id={item.id} type={item.itemType} size={26} style={styles.controlItem} />
<PressableStar id={item.id} type={item.itemType} size={26} style={styles.controlItem} disabled={disabled} />
)}
</View>
</View>

21
app/components/ListPlayerControls.tsx
View File

@ -1,7 +1,5 @@
import Button from '@app/components/Button'
import { Song } from '@app/models/library'
import { QueueContextType } from '@app/models/trackplayer'
import { useStore } from '@app/state/store'
import colors from '@app/styles/colors'
import React, { useState } from 'react'
import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
@ -11,13 +9,12 @@ import IconMat from 'react-native-vector-icons/MaterialIcons'
const ListPlayerControls = React.memo<{
songs: Song[]
typeName: string
queueName: string
queueContextType: QueueContextType
queueContextId: string
style?: StyleProp<ViewStyle>
}>(({ songs, typeName, queueName, queueContextType, queueContextId, style }) => {
play: () => void
shuffle: () => void
disabled?: boolean
}>(({ typeName, style, play, shuffle, disabled }) => {
const [downloaded, setDownloaded] = useState(false)
const setQueue = useStore(store => store.setQueue)
return (
<View style={[styles.controls, style]}>
@ -34,16 +31,10 @@ const ListPlayerControls = React.memo<{
</Button>
</View>
<View style={styles.controlsCenter}>
<Button
title={`Play ${typeName}`}
disabled={songs.length === 0}
onPress={() => setQueue(songs, queueName, queueContextType, queueContextId, undefined, false)}
/>
<Button title={`Play ${typeName}`} disabled={disabled} onPress={play} />
</View>
<View style={styles.controlsSide}>
<Button
disabled={songs.length === 0}
onPress={() => setQueue(songs, queueName, queueContextType, queueContextId, undefined, true)}>
<Button disabled={disabled} onPress={shuffle}>
<Icon name="shuffle" size={26} color="white" />
</Button>
</View>

2
app/components/NowPlayingBar.tsx
View File

@ -93,6 +93,8 @@ const NowPlayingBar = React.memo(() => {
type="cover"
style={{ height: styles.subContainer.height, width: styles.subContainer.height }}
coverArt={coverArt}
size="thumbnail"
fadeDuration={0}
/>
<View style={styles.detailsContainer}>
<Text numberOfLines={1} style={styles.detailsTitle}>

12
app/components/PressableOpacity.tsx
View File

@ -1,5 +1,5 @@
import React, { useCallback, useEffect, useState } from 'react'
import { GestureResponderEvent, LayoutRectangle, Pressable, PressableProps, ViewStyle, StyleSheet } from 'react-native'
import React, { useCallback, useState } from 'react'
import { GestureResponderEvent, LayoutRectangle, Pressable, PressableProps, StyleSheet } from 'react-native'
type PressableOpacityProps = PressableProps & {
ripple?: boolean
@ -9,13 +9,8 @@ type PressableOpacityProps = PressableProps & {
const PressableOpacity: React.FC<PressableOpacityProps> = props => {
const [opacity, setOpacity] = useState(1)
const [disabledStyle, setDisabledStyle] = useState<ViewStyle>({})
const [dimensions, setDimensions] = useState<LayoutRectangle | undefined>(undefined)
useEffect(() => {
props.disabled === true ? setDisabledStyle({ opacity: 0.3 }) : setDisabledStyle({})
}, [props.disabled])
props = {
...props,
unstable_pressDelay: props.unstable_pressDelay === undefined ? 60 : props.unstable_pressDelay,
@ -55,7 +50,8 @@ const PressableOpacity: React.FC<PressableOpacityProps> = props => {
return (
<Pressable
{...props}
style={[styles.pressable, props.style as any, { opacity }, disabledStyle]}
// eslint-disable-next-line react-native/no-inline-styles
style={[styles.pressable, props.style as any, { opacity }, props.disabled ? { opacity: 0.3 } : {}]}
android_ripple={
props.ripple
? {

11
app/components/Star.tsx
View File

@ -1,4 +1,4 @@
import { useStar } from '@app/hooks/library'
import { useStar } from '@app/hooks/query'
import colors from '@app/styles/colors'
import React from 'react'
import { PressableStateCallbackType, StyleProp, ViewStyle } from 'react-native'
@ -19,12 +19,13 @@ export const PressableStar = React.memo<{
type: 'album' | 'artist' | 'song'
size: number
style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>) | undefined
}>(({ id, type, size, style }) => {
const { starred, toggleStar } = useStar(id, type)
disabled?: boolean
}>(({ id, type, size, style, disabled }) => {
const { query, toggle } = useStar(id, type)
return (
<PressableOpacity onPress={toggleStar} style={style}>
<Star size={size} starred={starred} />
<PressableOpacity onPress={() => toggle.mutate()} style={style} disabled={disabled}>
<Star size={size} starred={!!query.data} />
</PressableOpacity>
)
})

81
app/hooks/cache.ts
View File

@ -1,81 +0,0 @@
import { CacheImageSize, CacheItemTypeKey } from '@app/models/cache'
import { Store, useStore, useStoreDeep } from '@app/state/store'
import { useCallback, useEffect } from 'react'
const useFileRequest = (key: CacheItemTypeKey, id: string) => {
const file = useStore(
useCallback(
(store: Store) => {
const activeServerId = store.settings.activeServerId
if (!activeServerId) {
return
}
return store.cacheFiles[activeServerId][key][id]
},
[key, id],
),
)
const request = useStore(
useCallback(
(store: Store) => {
const activeServerId = store.settings.activeServerId
if (!activeServerId) {
return
}
return store.cacheRequests[activeServerId][key][id]
},
[key, id],
),
)
return { file, request }
}
export const useCoverArtFile = (coverArt = '-1', size: CacheImageSize = 'thumbnail') => {
const type: CacheItemTypeKey = size === 'original' ? 'coverArt' : 'coverArtThumb'
const { file, request } = useFileRequest(type, coverArt)
const client = useStore(store => store.client)
const cacheItem = useStore(store => store.cacheItem)
useEffect(() => {
if (!file && client) {
cacheItem(type, coverArt, () =>
client.getCoverArtUri({
id: coverArt,
size: type === 'coverArtThumb' ? '256' : undefined,
}),
)
}
// intentionally leaving file out so it doesn't re-render if the request fails
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [cacheItem, client, coverArt, type])
return { file, request }
}
export const useArtistArtFile = (artistId: string, size: CacheImageSize = 'thumbnail') => {
const type: CacheItemTypeKey = size === 'original' ? 'artistArt' : 'artistArtThumb'
const fetchArtistInfo = useStore(store => store.fetchArtistInfo)
const artistInfo = useStoreDeep(store => store.library.artistInfo[artistId])
const { file, request } = useFileRequest(type, artistId)
const cacheItem = useStore(store => store.cacheItem)
useEffect(() => {
if (!artistInfo) {
fetchArtistInfo(artistId)
return
}
if (!file && artistInfo) {
cacheItem(type, artistId, async () => {
return type === 'artistArtThumb' ? artistInfo?.smallImageUrl : artistInfo?.largeImageUrl
})
}
// intentionally leaving file out so it doesn't re-render if the request fails
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [artistId, cacheItem, fetchArtistInfo, type, artistInfo])
return { file, request }
}

305
app/hooks/fetch.ts Normal file
View File

@ -0,0 +1,305 @@
import { CacheItemTypeKey } from '@app/models/cache'
import { Album, AlbumCoverArt, Playlist, Song } from '@app/models/library'
import { mapAlbum, mapArtist, mapArtistInfo, mapPlaylist, mapSong } from '@app/models/map'
import queryClient from '@app/queryClient'
import { useStore } from '@app/state/store'
import { GetAlbumList2TypeBase, Search3Params, StarParams } from '@app/subsonic/params'
import { cacheDir } from '@app/util/fs'
import { mapCollectionById } from '@app/util/state'
import userAgent from '@app/util/userAgent'
import cd from 'content-disposition'
import mime from 'mime-types'
import path from 'path'
import ReactNativeBlobUtil, { FetchBlobResponse } from 'react-native-blob-util'
import RNFS from 'react-native-fs'
import qk from './queryKeys'
export const useClient = () => {
const client = useStore(store => store.client)
return () => {
if (!client) {
throw new Error('no client!')
}
return client
}
}
function cacheStarredData<T extends { id: string; starred?: undefined | any }>(item: T) {
queryClient.setQueryData<boolean>(qk.starredItems(item.id), !!item.starred)
}
function cacheAlbumCoverArtData<T extends { id: string; coverArt?: string }>(item: T) {
queryClient.setQueryData<AlbumCoverArt>(qk.albumCoverArt(item.id), { albumId: item.id, coverArt: item.coverArt })
}
export const useFetchArtists = () => {
const client = useClient()
return async () => {
const res = await client().getArtists()
res.data.artists.forEach(cacheStarredData)
return mapCollectionById(res.data.artists, mapArtist)
}
}
export const useFetchArtist = () => {
const client = useClient()
return async (id: string) => {
const res = await client().getArtist({ id })
cacheStarredData(res.data.artist)
res.data.albums.forEach(cacheStarredData)
res.data.albums.forEach(cacheAlbumCoverArtData)
return {
artist: mapArtist(res.data.artist),
albums: res.data.albums.map(mapAlbum),
}
}
}
export const useFetchArtistInfo = () => {
const client = useClient()
return async (id: string) => {
const res = await client().getArtistInfo2({ id })
return mapArtistInfo(id, res.data.artistInfo)
}
}
export const useFetchArtistTopSongs = () => {
const client = useClient()
return async (artistName: string) => {
const res = await client().getTopSongs({ artist: artistName })
res.data.songs.forEach(cacheStarredData)
return res.data.songs.map(mapSong)
}
}
export const useFetchPlaylists = () => {
const client = useClient()
return async () => {
const res = await client().getPlaylists()
return mapCollectionById(res.data.playlists, mapPlaylist)
}
}
export const useFetchPlaylist = () => {
const client = useClient()
return async (id: string): Promise<{ playlist: Playlist; songs?: Song[] }> => {
const res = await client().getPlaylist({ id })
res.data.playlist.songs.forEach(cacheStarredData)
return {
playlist: mapPlaylist(res.data.playlist),
songs: res.data.playlist.songs.map(mapSong),
}
}
}
export const useFetchAlbum = () => {
const client = useClient()
return async (id: string): Promise<{ album: Album; songs?: Song[] }> => {
const res = await client().getAlbum({ id })
cacheStarredData(res.data.album)
res.data.songs.forEach(cacheStarredData)
cacheAlbumCoverArtData(res.data.album)
return {
album: mapAlbum(res.data.album),
songs: res.data.songs.map(mapSong),
}
}
}
export const useFetchAlbumList = () => {
const client = useClient()
return async (size: number, offset: number, type: GetAlbumList2TypeBase) => {
const res = await client().getAlbumList2({ size, offset, type })
res.data.albums.forEach(cacheStarredData)
res.data.albums.forEach(cacheAlbumCoverArtData)
return res.data.albums.map(mapAlbum)
}
}
export const useFetchSong = () => {
const client = useClient()
return async (id: string) => {
const res = await client().getSong({ id })
cacheStarredData(res.data.song)
return mapSong(res.data.song)
}
}
export const useFetchSearchResults = () => {
const client = useClient()
return async (params: Search3Params) => {
const res = await client().search3(params)
res.data.artists.forEach(cacheStarredData)
res.data.albums.forEach(cacheStarredData)
res.data.songs.forEach(cacheStarredData)
res.data.albums.forEach(cacheAlbumCoverArtData)
return {
artists: res.data.artists.map(mapArtist),
albums: res.data.albums.map(mapAlbum),
songs: res.data.songs.map(mapSong),
}
}
}
export const useFetchStar = () => {
const client = useClient()
return async (params: StarParams) => {
await client().star(params)
return
}
}
export const useFetchUnstar = () => {
const client = useClient()
return async (params: StarParams) => {
await client().unstar(params)
return
}
}
export type FetchExisingFileOptions = {
itemType: CacheItemTypeKey
itemId: string
}
export const useFetchExistingFile: () => (options: FetchExisingFileOptions) => Promise<string | undefined> = () => {
const serverId = useStore(store => store.settings.activeServerId)
return async ({ itemType, itemId }) => {
const fileDir = cacheDir(serverId, itemType, itemId)
try {
const dir = await RNFS.readDir(fileDir)
console.log('existing file:', dir[0].path)
return dir[0].path
} catch {}
}
}
function assertMimeType(expected?: string, actual?: string) {
expected = expected?.toLowerCase()
actual = actual?.toLowerCase()
if (!expected || expected === actual) {
return
}
if (!expected.includes(';')) {
actual = actual?.split(';')[0]
}
if (!expected.includes('/')) {
actual = actual?.split('/')[0]
}
if (expected !== actual) {
throw new Error(`Request does not satisfy expected content type. Expected: ${expected} Actual: ${actual}`)
}
}
export type FetchFileOptions = FetchExisingFileOptions & {
fromUrl: string
useCacheBuster?: boolean
expectedContentType?: string
progress?: (received: number, total: number) => void
}
export const useFetchFile: () => (options: FetchFileOptions) => Promise<string> = () => {
const serverId = useStore(store => store.settings.activeServerId)
return async ({ itemType, itemId, fromUrl, useCacheBuster, expectedContentType, progress }) => {
useCacheBuster = useCacheBuster === undefined ? true : useCacheBuster
const fileDir = cacheDir(serverId, itemType, itemId)
const filePathNoExt = path.join(fileDir, useCacheBuster ? useStore.getState().settings.cacheBuster : itemType)
try {
await RNFS.unlink(fileDir)
} catch {}
const headers = { 'User-Agent': userAgent }
// we send a HEAD first for two reasons:
// 1. to follow any redirects and get the actual URL (DownloadManager does not support redirects)
// 2. to obtain the mime-type up front so we can use it for the file extension/validation
const headRes = await fetch(fromUrl, { method: 'HEAD', headers })
if (headRes.status > 399) {
throw new Error(`HTTP status error ${headRes.status}. File: ${itemType} ID: ${itemId}`)
}
const contentType = headRes.headers.get('content-type') || undefined
assertMimeType(expectedContentType, contentType)
const contentDisposition = headRes.headers.get('content-disposition') || undefined
const filename = contentDisposition ? cd.parse(contentDisposition).parameters.filename : undefined
let extension: string | undefined
if (filename) {
extension = path.extname(filename) || undefined
if (extension) {
extension = extension.substring(1)
}
} else if (contentType) {
extension = mime.extension(contentType) || undefined
}
const config = ReactNativeBlobUtil.config({
addAndroidDownloads: {
useDownloadManager: true,
notification: false,
mime: contentType,
description: 'subtracks',
path: extension ? `${filePathNoExt}.${extension}` : filePathNoExt,
},
})
const fetchParams: Parameters<typeof config['fetch']> = ['GET', headRes.url, headers]
let res: FetchBlobResponse
if (progress) {
res = await config.fetch(...fetchParams).progress(progress)
} else {
res = await config.fetch(...fetchParams)
}
const downloadPath = res.path()
queryClient.setQueryData<string>(qk.existingFiles(itemType, itemId), downloadPath)
console.log('downloaded file:', downloadPath)
return downloadPath
}
}

63
app/hooks/library.ts
View File

@ -1,63 +0,0 @@
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 }
}

95
app/hooks/list.ts
View File

@ -1,95 +0,0 @@
import { useState, useCallback } from 'react'
import { useActiveServerRefresh } from './settings'
export const useFetchList = <T>(fetchList: () => Promise<T[]>) => {
const [list, setList] = useState<T[]>([])
const [refreshing, setRefreshing] = useState(false)
const refresh = useCallback(() => {
setRefreshing(true)
fetchList().then(items => {
setList(items)
setRefreshing(false)
})
}, [fetchList])
const reset = useCallback(() => {
setList([])
refresh()
}, [refresh])
useActiveServerRefresh(
useCallback(() => {
reset()
}, [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>(
fetchList: (size: number, offset: number) => Promise<T[]>,
pageSize: number,
) => {
const [list, setList] = useState<T[]>([])
const [refreshing, setRefreshing] = useState(false)
const [offset, setOffset] = useState(0)
const refresh = useCallback(() => {
setOffset(0)
setRefreshing(true)
fetchList(pageSize, 0).then(firstPage => {
setList(firstPage)
setRefreshing(false)
})
}, [fetchList, pageSize])
const reset = useCallback(() => {
setList([])
refresh()
}, [refresh])
useActiveServerRefresh(
useCallback(() => {
refresh()
}, [refresh]),
)
const fetchNextPage = useCallback(() => {
const newOffset = offset + pageSize
setRefreshing(true)
fetchList(pageSize, newOffset).then(nextPage => {
setRefreshing(false)
if (nextPage.length === 0) {
return
}
setList([...list, ...nextPage])
setOffset(newOffset)
})
}, [offset, pageSize, fetchList, list])
return { list, refreshing, refresh, reset, fetchNextPage }
}

397
app/hooks/query.ts Normal file
View File

@ -0,0 +1,397 @@
import { CacheImageSize, CacheItemTypeKey } from '@app/models/cache'
import { Album, AlbumCoverArt, Artist, Playlist, Song, StarrableItemType } from '@app/models/library'
import { CollectionById } from '@app/models/state'
import queryClient from '@app/queryClient'
import { useStore } from '@app/state/store'
import { GetAlbumList2TypeBase, Search3Params, StarParams } from '@app/subsonic/params'
import _ from 'lodash'
import {
InfiniteData,
useInfiniteQuery,
UseInfiniteQueryResult,
useMutation,
useQueries,
useQuery,
UseQueryResult,
} from 'react-query'
import {
useFetchAlbum,
useFetchAlbumList,
useFetchArtist,
useFetchArtistInfo,
useFetchArtists,
useFetchArtistTopSongs,
useFetchExistingFile,
useFetchFile,
useFetchPlaylist,
useFetchPlaylists,
useFetchSearchResults,
useFetchSong,
useFetchStar,
useFetchUnstar,
} from './fetch'
import qk from './queryKeys'
export const useQueryArtists = () => useQuery(qk.artists, useFetchArtists())
export const useQueryArtist = (id: string) => {
const fetchArtist = useFetchArtist()
return useQuery(qk.artist(id), () => fetchArtist(id), {
placeholderData: () => {
const artist = queryClient.getQueryData<CollectionById<Artist>>(qk.artists)?.byId[id]
if (artist) {
return { artist, albums: [] }
}
},
})
}
export const useQueryArtistInfo = (id: string) => {
const fetchArtistInfo = useFetchArtistInfo()
return useQuery(qk.artistInfo(id), () => fetchArtistInfo(id))
}
export const useQueryArtistTopSongs = (artistName?: string) => {
const fetchArtistTopSongs = useFetchArtistTopSongs()
const query = useQuery(qk.artistTopSongs(artistName || ''), () => fetchArtistTopSongs(artistName as string), {
enabled: !!artistName,
retry: false,
staleTime: Infinity,
cacheTime: Infinity,
notifyOnChangeProps: ['data', 'isError', 'isFetched', 'isSuccess', 'isFetching'],
})
const querySuccess = query.isFetched && query.isSuccess && query.data && query.data.length > 0
const fetchSearchResults = useFetchSearchResults()
const backupQuery = useQuery(
qk.search(artistName || '', 0, 0, 50),
() => fetchSearchResults({ query: artistName as string, songCount: 50 }),
{
enabled: !!artistName && !query.isFetching && !querySuccess,
select: data =>
// sortBy is a stable sort, so that this doesn't change order arbitrarily and re-render
_.sortBy(data.songs, [s => -(s.playCount || 0), s => -(s.averageRating || 0), s => -(s.userRating || 0)]),
staleTime: Infinity,
cacheTime: Infinity,
notifyOnChangeProps: ['data', 'isError'],
},
)
return useFixCoverArt(querySuccess ? query : backupQuery)
}
export const useQueryPlaylists = () => useQuery(qk.playlists, useFetchPlaylists())
export const useQueryPlaylist = (id: string, placeholderPlaylist?: Playlist) => {
const fetchPlaylist = useFetchPlaylist()
const query = useQuery(qk.playlist(id), () => fetchPlaylist(id), {
placeholderData: () => {
if (placeholderPlaylist) {
return { playlist: placeholderPlaylist }
}
const playlist = queryClient.getQueryData<CollectionById<Playlist>>(qk.playlists)?.byId[id]
if (playlist) {
return { playlist, songs: [] }
}
},
})
return useFixCoverArt(query)
}
export const useQueryAlbum = (id: string, placeholderAlbum?: Album) => {
const fetchAlbum = useFetchAlbum()
const query = useQuery(qk.album(id), () => fetchAlbum(id), {
placeholderData: (): { album: Album; songs?: Song[] } | undefined =>
placeholderAlbum ? { album: placeholderAlbum } : undefined,
})
return useFixCoverArt(query)
}
export const useQueryAlbumList = (type: GetAlbumList2TypeBase, size: number) => {
const fetchAlbumList = useFetchAlbumList()
return useInfiniteQuery(
qk.albumList(type, size),
async context => {
return await fetchAlbumList(size, context.pageParam || 0, type)
},
{
getNextPageParam: (lastPage, allPages) => {
if (lastPage.length === 0) {
return
}
return allPages.length * size
},
cacheTime: 0,
},
)
}
export const useQuerySearchResults = (params: Search3Params) => {
const fetchSearchResults = useFetchSearchResults()
const query = useInfiniteQuery(
qk.search(params.query, params.artistCount, params.albumCount, params.songCount),
async context => {
return await fetchSearchResults({
...params,
artistOffset: context.pageParam?.artistOffset || 0,
albumOffset: context.pageParam?.albumOffset || 0,
songOffset: context.pageParam?.songOffset || 0,
})
},
{
getNextPageParam: (lastPage, allPages) => {
if (lastPage.albums.length + lastPage.artists.length + lastPage.songs.length === 0) {
return
}
return {
artistOffset: allPages.reduce((acc, val) => (acc += val.artists.length), 0),
albumOffset: allPages.reduce((acc, val) => (acc += val.albums.length), 0),
songOffset: allPages.reduce((acc, val) => (acc += val.songs.length), 0),
}
},
cacheTime: 1000 * 60,
enabled: !!params.query && params.query.length > 1,
},
)
return useFixCoverArt(query)
}
export const useQueryHomeLists = (types: GetAlbumList2TypeBase[], size: number) => {
const fetchAlbumList = useFetchAlbumList()
const listQueries = useQueries(
types.map(type => {
return {
queryKey: qk.albumList(type, size),
queryFn: async () => {
const albums = await fetchAlbumList(size, 0, type as GetAlbumList2TypeBase)
return { type, albums }
},
}
}),
)
return listQueries
}
export const useStar = (id: string, type: StarrableItemType) => {
const fetchStar = useFetchStar()
const fetchUnstar = useFetchUnstar()
const fetchSong = useFetchSong()
const fetchAlbum = useFetchAlbum()
const fetchArtist = useFetchArtist()
const query = useQuery(
qk.starredItems(id),
async () => {
switch (type) {
case 'album':
console.log('fetch album starred', id)
return !!(await fetchAlbum(id)).album.starred
case 'artist':
console.log('fetch artist starred', id)
return !!(await fetchArtist(id)).artist.starred
default:
console.log('fetch song starred', id)
return !!(await fetchSong(id)).starred
}
},
{
cacheTime: Infinity,
staleTime: Infinity,
},
)
const toggle = useMutation(
() => {
const params: StarParams = {
id: type === 'song' ? id : undefined,
albumId: type === 'album' ? id : undefined,
artistId: type === 'artist' ? id : undefined,
}
return !query.data ? fetchStar(params) : fetchUnstar(params)
},
{
onMutate: () => {
queryClient.setQueryData<boolean>(qk.starredItems(id), !query.data)
},
onSuccess: () => {
if (type === 'album') {
queryClient.invalidateQueries(qk.albumList('starred'))
}
},
},
)
return { query, toggle }
}
export const useQueryExistingFile = (itemType: CacheItemTypeKey, itemId: string) => {
const fetchExistingFile = useFetchExistingFile()
return useQuery(qk.existingFiles(itemType, itemId), () => fetchExistingFile({ itemType, itemId }), {
staleTime: Infinity,
cacheTime: Infinity,
notifyOnChangeProps: ['data', 'isFetched'],
})
}
export const useQueryCoverArtPath = (coverArt = '-1', size: CacheImageSize = 'thumbnail') => {
const fetchFile = useFetchFile()
const client = useStore(store => store.client)
const itemType: CacheItemTypeKey = size === 'original' ? 'coverArt' : 'coverArtThumb'
const existing = useQueryExistingFile(itemType, coverArt)
const query = useQuery(
qk.coverArt(coverArt, size),
async () => {
if (!client) {
return
}
const fromUrl = client.getCoverArtUri({ id: coverArt, size: itemType === 'coverArtThumb' ? '256' : undefined })
return await fetchFile({ itemType, itemId: coverArt, fromUrl, expectedContentType: 'image' })
},
{
enabled: existing.isFetched && !existing.data && !!client,
staleTime: Infinity,
cacheTime: Infinity,
},
)
return { ...query, data: existing.data || query.data, isExistingFetching: existing.isFetching }
}
export const useQueryArtistArtPath = (artistId: string, size: CacheImageSize = 'thumbnail') => {
const fetchFile = useFetchFile()
const client = useStore(store => store.client)
const { data: artistInfo } = useQueryArtistInfo(artistId)
const itemType: CacheItemTypeKey = size === 'original' ? 'artistArt' : 'artistArtThumb'
const existing = useQueryExistingFile(itemType, artistId)
const query = useQuery(
qk.artistArt(artistId, size),
async () => {
if (!client || !artistInfo?.smallImageUrl || !artistInfo?.largeImageUrl) {
return
}
const fromUrl = itemType === 'artistArtThumb' ? artistInfo.smallImageUrl : artistInfo.largeImageUrl
return await fetchFile({ itemType, itemId: artistId, fromUrl, expectedContentType: 'image' })
},
{
enabled:
existing.isFetched &&
!existing.data &&
!!client &&
(!!artistInfo?.smallImageUrl || !!artistInfo?.largeImageUrl),
staleTime: Infinity,
cacheTime: Infinity,
},
)
return { ...query, data: existing.data || query.data, isExistingFetching: existing.isFetching }
}
type WithSongs = Song[] | { songs?: Song[] }
type InfiniteWithSongs = { songs: Song[] }
type AnyDataWithSongs = WithSongs | InfiniteData<InfiniteWithSongs>
type AnyQueryWithSongs = UseQueryResult<WithSongs> | UseInfiniteQueryResult<{ songs: Song[] }>
function getSongs<T extends AnyDataWithSongs>(data: T | undefined): Song[] {
if (!data) {
return []
}
if (Array.isArray(data)) {
return data
}
if ('pages' in data) {
return data.pages.flatMap(p => p.songs)
}
return data.songs || []
}
function setSongCoverArt<T extends AnyQueryWithSongs>(query: T, coverArts: UseQueryResult<AlbumCoverArt>[]): T {
if (!query.data) {
return query
}
const mapSongCoverArt = (song: Song) => ({
...song,
coverArt: coverArts.find(c => c.data?.albumId === song.albumId)?.data?.coverArt,
})
if (Array.isArray(query.data)) {
return {
...query,
data: query.data.map(mapSongCoverArt),
}
}
if ('pages' in query.data) {
return {
...query,
data: {
pages: query.data.pages.map(p => ({
...p,
songs: p.songs.map(mapSongCoverArt),
})),
},
}
}
if (query.data.songs) {
return {
...query,
data: {
...query.data,
songs: query.data.songs.map(mapSongCoverArt),
},
}
}
return query
}
// 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
const useFixCoverArt = <T extends AnyQueryWithSongs>(query: T) => {
const fetchAlbum = useFetchAlbum()
const songs = getSongs(query.data)
const albumIds = _.uniq((songs || []).map(s => s.albumId).filter((id): id is string => id !== undefined))
const coverArts = useQueries(
albumIds.map(id => ({
queryKey: qk.albumCoverArt(id),
queryFn: async (): Promise<AlbumCoverArt> => {
const res = await fetchAlbum(id)
return { albumId: res.album.id, coverArt: res.album.coverArt }
},
staleTime: Infinity,
cacheTime: Infinity,
notifyOnChangeProps: ['data', 'isFetched'] as any,
})),
)
if (coverArts.every(c => c.isFetched)) {
return setSongCoverArt(query, coverArts)
}
return query
}

52
app/hooks/queryKeys.ts Normal file
View File

@ -0,0 +1,52 @@
import { CacheImageSize, CacheItemTypeKey } from '@app/models/cache'
import { GetAlbumList2TypeBase } from '@app/subsonic/params'
const qk = {
starredItems: (id: string) => ['starredItems', id],
albumCoverArt: (id: string) => ['albumCoverArt', id],
artists: 'artists',
artist: (id: string) => ['artist', id],
artistInfo: (id: string) => ['artistInfo', id],
artistTopSongs: (artistName: string) => ['artistTopSongs', artistName],
playlists: 'playlists',
playlist: (id: string) => ['playlist', id],
album: (id: string) => ['album', id],
albumList: (type: GetAlbumList2TypeBase, size?: number) => {
const key: (string | number)[] = ['albumList', type]
size !== undefined && key.push(size)
return key
},
search: (query: string, artistCount?: number, albumCount?: number, songCount?: number) => [
'search',
query,
artistCount,
albumCount,
songCount,
],
coverArt: (coverArt?: string, size?: CacheImageSize) => {
const key: string[] = ['coverArt']
coverArt !== undefined && key.push(coverArt)
size !== undefined && key.push(size)
return key
},
artistArt: (artistId?: string, size?: CacheImageSize) => {
const key: string[] = ['artistArt']
artistId !== undefined && key.push(artistId)
size !== undefined && key.push(size)
return key
},
existingFiles: (type?: CacheItemTypeKey, itemId?: string) => {
const key: string[] = ['existingFiles']
type !== undefined && key.push(type)
itemId !== undefined && key.push(itemId)
return key
},
}
export default qk

60
app/hooks/settings.ts
View File

@ -1,6 +1,10 @@
import { useReset } from '@app/hooks/trackplayer'
import { useStore } from '@app/state/store'
import { useEffect } from 'react'
import { CacheItemTypeKey } from '@app/models/cache'
import queryClient from '@app/queryClient'
import { useStore, useStoreDeep } from '@app/state/store'
import { cacheDir } from '@app/util/fs'
import RNFS from 'react-native-fs'
import qk from './queryKeys'
export const useSwitchActiveServer = () => {
const activeServerId = useStore(store => store.settings.activeServerId)
@ -12,21 +16,53 @@ export const useSwitchActiveServer = () => {
return
}
await queryClient.cancelQueries(undefined, { active: true })
await resetPlayer()
queryClient.removeQueries()
setActiveServer(id)
}
}
export const useActiveServerRefresh = (refresh: () => void) => {
const activeServerId = useStore(store => store.settings.activeServerId)
useEffect(() => {
if (activeServerId) {
refresh()
}
}, [activeServerId, refresh])
}
export const useFirstRun = () => {
return useStore(store => Object.keys(store.settings.servers).length === 0)
}
export const useResetImageCache = () => {
const serverIds = useStoreDeep(store => Object.keys(store.settings.servers))
const changeCacheBuster = useStore(store => store.changeCacheBuster)
return async () => {
// disable/invalidate queries
await Promise.all([
queryClient.cancelQueries(qk.artistArt(), { active: true }),
queryClient.cancelQueries(qk.coverArt(), { active: true }),
queryClient.cancelQueries(qk.existingFiles(), { active: true }),
queryClient.invalidateQueries(qk.artistArt(), { refetchActive: false }),
queryClient.invalidateQueries(qk.coverArt(), { refetchActive: false }),
queryClient.invalidateQueries(qk.existingFiles(), { refetchActive: false }),
])
// delete all images
const itemTypes: CacheItemTypeKey[] = ['artistArt', 'artistArtThumb', 'coverArt', 'coverArtThumb']
await Promise.all(
serverIds.flatMap(id =>
itemTypes.map(async type => {
const dir = cacheDir(id, type)
try {
await RNFS.unlink(dir)
} catch {}
}),
),
)
// change cacheBuster
changeCacheBuster()
// enable queries
await Promise.all([
queryClient.refetchQueries(qk.existingFiles(), { active: true }),
queryClient.refetchQueries(qk.artistArt(), { active: true }),
queryClient.refetchQueries(qk.coverArt(), { active: true }),
])
}
}

95
app/hooks/trackplayer.ts
View File

@ -1,6 +1,14 @@
import { Song } from '@app/models/library'
import { QueueContextType, TrackExt } from '@app/models/trackplayer'
import queryClient from '@app/queryClient'
import { useStore, useStoreDeep } from '@app/state/store'
import { getQueue, trackPlayerCommands } from '@app/state/trackplayer'
import { getQueue, SetQueueOptions, trackPlayerCommands } from '@app/state/trackplayer'
import userAgent from '@app/util/userAgent'
import _ from 'lodash'
import TrackPlayer from 'react-native-track-player'
import { useQueries } from 'react-query'
import { useFetchExistingFile, useFetchFile } from './fetch'
import qk from './queryKeys'
export const usePlay = () => {
return () => trackPlayerCommands.enqueue(() => TrackPlayer.play())
@ -83,3 +91,88 @@ export const useIsPlaying = (contextId: string | undefined, track: number) => {
return contextId === queueContextId && track === currentTrackIdx
}
export const useSetQueue = (type: QueueContextType, songs?: Song[]) => {
const _setQueue = useStore(store => store.setQueue)
const client = useStore(store => store.client)
const buildStreamUri = useStore(store => store.buildStreamUri)
const fetchFile = useFetchFile()
const fetchExistingFile = useFetchExistingFile()
const songCoverArt = _.uniq((songs || []).map(s => s.coverArt)).filter((c): c is string => c !== undefined)
const coverArtPaths = useQueries(
songCoverArt.map(coverArt => ({
queryKey: qk.coverArt(coverArt, 'thumbnail'),
queryFn: async () => {
if (!client) {
return
}
const itemType = 'coverArtThumb'
const existingCache = queryClient.getQueryData<string | undefined>(qk.existingFiles(itemType, coverArt))
if (existingCache) {
return existingCache
}
const existingDisk = await fetchExistingFile({ itemId: coverArt, itemType })
if (existingDisk) {
return existingDisk
}
const fromUrl = client.getCoverArtUri({ id: coverArt, size: '256' })
return await fetchFile({
itemType,
itemId: coverArt,
fromUrl,
expectedContentType: 'image',
})
},
enabled: !!client && !!songs,
staleTime: Infinity,
cacheTime: Infinity,
notifyOnChangeProps: ['data', 'isFetched'] as any,
})),
)
const songCoverArtToPath = _.zipObject(
songCoverArt,
coverArtPaths.map(c => c.data),
)
const mapSongToTrackExt = (s: Song): TrackExt => {
let artwork = require('@res/fallback.png')
if (s.coverArt) {
const filePath = songCoverArtToPath[s.coverArt]
if (filePath) {
artwork = `file://${filePath}`
}
}
return {
id: s.id,
title: s.title,
artist: s.artist || 'Unknown Artist',
album: s.album || 'Unknown Album',
url: buildStreamUri(s.id),
userAgent,
artwork,
coverArt: s.coverArt,
duration: s.duration,
artistId: s.artistId,
albumId: s.albumId,
track: s.track,
discNumber: s.discNumber,
}
}
const contextId = `${type}-${songs?.map(s => s.id).join('-')}`
const setQueue = async (options: SetQueueOptions) => {
const queue = (songs || []).map(mapSongToTrackExt)
return await _setQueue({ queue, type, contextId, ...options })
}
return { setQueue, contextId, isReady: coverArtPaths.every(c => c.isFetched) }
}

1
app/models/cache.ts
View File

@ -5,7 +5,6 @@ export enum CacheItemType {
coverArtThumb = 'coverArtThumb',
artistArt = 'artistArt',
artistArtThumb = 'artistArtThumb',
song = 'song',
}
export type CacheItemTypeKey = keyof typeof CacheItemType

20
app/models/library.ts
View File

@ -2,7 +2,7 @@ export interface Artist {
itemType: 'artist'
id: string
name: string
starred?: Date
starred?: number
coverArt?: string
}
@ -18,7 +18,7 @@ export interface Album {
name: string
artist?: string
artistId?: string
starred?: Date
starred?: number
coverArt?: string
year?: number
}
@ -42,16 +42,24 @@ export interface Song {
track?: number
discNumber?: number
duration?: number
starred?: Date
starred?: number
coverArt?: string
playCount?: number
userRating?: number
averageRating?: number
}
export interface SearchResults {
artists: string[]
albums: string[]
songs: string[]
artists: Artist[]
albums: Album[]
songs: Song[]
}
export type StarrableItemType = 'album' | 'song' | 'artist'
export type ListableItem = Album | Song | Artist | Playlist
export interface AlbumCoverArt {
albumId: string
coverArt?: string
}

85
app/models/map.ts Normal file
View File

@ -0,0 +1,85 @@
import {
AlbumID3Element,
ArtistID3Element,
ArtistInfo2Element,
ChildElement,
PlaylistElement,
} from '@app/subsonic/elements'
import { Album, Artist, ArtistInfo, Playlist, Song } from './library'
import { TrackExt } from './trackplayer'
export function mapArtist(artist: ArtistID3Element): Artist {
return {
itemType: 'artist',
id: artist.id,
name: artist.name,
starred: artist.starred?.getTime(),
coverArt: artist.coverArt,
}
}
export function mapArtistInfo(id: string, info: ArtistInfo2Element): ArtistInfo {
return {
id,
smallImageUrl: info.smallImageUrl,
largeImageUrl: info.largeImageUrl,
}
}
export function mapAlbum(album: AlbumID3Element): Album {
return {
itemType: 'album',
id: album.id,
name: album.name,
artist: album.artist,
artistId: album.artistId,
starred: album.starred?.getTime(),
coverArt: album.coverArt,
year: album.year,
}
}
export function mapPlaylist(playlist: PlaylistElement): Playlist {
return {
itemType: 'playlist',
id: playlist.id,
name: playlist.name,
comment: playlist.comment,
coverArt: playlist.coverArt,
}
}
export 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?.getTime(),
playCount: song.playCount,
averageRating: song.averageRating,
userRating: song.userRating,
}
}
export function mapTrackExtToSong(track: TrackExt): Song {
return {
itemType: 'song',
id: track.id,
title: track.title as string,
artist: track.artist,
album: track.album,
coverArt: track.coverArt,
duration: track.duration,
artistId: track.artistId,
albumId: track.albumId,
track: track.track,
discNumber: track.discNumber,
}
}

5
app/models/state.ts
View File

@ -12,3 +12,8 @@ export interface OrderedById<T> {
export interface PaginatedList {
[offset: number]: string[]
}
export interface CollectionById<T extends { id: string }> {
byId: ById<T>
allIds: string[]
}

35
app/navigation/BottomTabNavigator.tsx
View File

@ -1,4 +1,5 @@
import { useFirstRun } from '@app/hooks/settings'
import { Album, Playlist } from '@app/models/library'
import BottomTabBar from '@app/navigation/BottomTabBar'
import LibraryTopTabNavigator from '@app/navigation/LibraryTopTabNavigator'
import ArtistView from '@app/screens/ArtistView'
@ -9,6 +10,7 @@ import ServerView from '@app/screens/ServerView'
import SettingsView from '@app/screens/Settings'
import SongListView from '@app/screens/SongListView'
import WebViewScreen from '@app/screens/WebViewScreen'
import { useStore } from '@app/state/store'
import colors from '@app/styles/colors'
import font from '@app/styles/font'
import { BottomTabNavigationProp, createBottomTabNavigator } from '@react-navigation/bottom-tabs'
@ -19,9 +21,9 @@ import { createNativeStackNavigator, NativeStackNavigationProp } from 'react-nat
type TabStackParamList = {
main: undefined
album: { id: string; title: string }
album: { id: string; title: string; album?: Album }
artist: { id: string; title: string }
playlist: { id: string; title: string }
playlist: { id: string; title: string; playlist?: Playlist }
results: { query: string; type: 'album' | 'song' | 'artist' }
}
@ -32,9 +34,7 @@ type AlbumScreenProps = {
navigation: AlbumScreenNavigationProp
}
const AlbumScreen: React.FC<AlbumScreenProps> = ({ route }) => (
<SongListView id={route.params.id} title={route.params.title} type="album" />
)
const AlbumScreen: React.FC<AlbumScreenProps> = ({ route }) => <SongListView {...route.params} type="album" />
type ArtistScreenNavigationProp = NativeStackNavigationProp<TabStackParamList, 'artist'>
type ArtistScreenRouteProp = RouteProp<TabStackParamList, 'artist'>
@ -43,9 +43,7 @@ type ArtistScreenProps = {
navigation: ArtistScreenNavigationProp
}
const ArtistScreen: React.FC<ArtistScreenProps> = ({ route }) => (
<ArtistView id={route.params.id} title={route.params.title} />
)
const ArtistScreen: React.FC<ArtistScreenProps> = ({ route }) => <ArtistView {...route.params} />
type PlaylistScreenNavigationProp = NativeStackNavigationProp<TabStackParamList, 'playlist'>
type PlaylistScreenRouteProp = RouteProp<TabStackParamList, 'playlist'>
@ -54,9 +52,7 @@ type PlaylistScreenProps = {
navigation: PlaylistScreenNavigationProp
}
const PlaylistScreen: React.FC<PlaylistScreenProps> = ({ route }) => (
<SongListView id={route.params.id} title={route.params.title} type="playlist" />
)
const PlaylistScreen: React.FC<PlaylistScreenProps> = ({ route }) => <SongListView {...route.params} type="playlist" />
type ResultsScreenNavigationProp = NativeStackNavigationProp<TabStackParamList, 'results'>
type ResultsScreenRouteProp = RouteProp<TabStackParamList, 'results'>
@ -65,9 +61,7 @@ type ResultsScreenProps = {
navigation: ResultsScreenNavigationProp
}
const ResultsScreen: React.FC<ResultsScreenProps> = ({ route }) => (
<SearchResultsView query={route.params.query} type={route.params.type} />
)
const ResultsScreen: React.FC<ResultsScreenProps> = ({ route }) => <SearchResultsView {...route.params} />
const styles = StyleSheet.create({
stackheaderStyle: {
@ -177,12 +171,19 @@ const Tab = createBottomTabNavigator()
const BottomTabNavigator = () => {
const firstRun = useFirstRun()
const resetServer = useStore(store => store.resetServer)
return (
<Tab.Navigator tabBar={BottomTabBar} initialRouteName={firstRun ? 'settings' : 'home'}>
<Tab.Screen name="home" component={HomeTab} options={{ tabBarLabel: 'Home' }} />
<Tab.Screen name="library" component={LibraryTab} options={{ tabBarLabel: 'Library' }} />
<Tab.Screen name="search" component={SearchTab} options={{ tabBarLabel: 'Search' }} />
{resetServer ? (
<></>
) : (
<>
<Tab.Screen name="home" component={HomeTab} options={{ tabBarLabel: 'Home' }} />
<Tab.Screen name="library" component={LibraryTab} options={{ tabBarLabel: 'Library' }} />
<Tab.Screen name="search" component={SearchTab} options={{ tabBarLabel: 'Search' }} />
</>
)}
<Tab.Screen name="settings" component={SettingsTab} options={{ tabBarLabel: 'Settings' }} />
</Tab.Navigator>
)

5
app/queryClient.ts Normal file
View File

@ -0,0 +1,5 @@
import { QueryClient } from 'react-query'
const client = new QueryClient()
export default client

65
app/screens/ArtistView.tsx
View File

@ -5,15 +5,16 @@ import GradientScrollView from '@app/components/GradientScrollView'
import Header from '@app/components/Header'
import HeaderBar from '@app/components/HeaderBar'
import ListItem from '@app/components/ListItem'
import { useQueryArtist, useQueryArtistTopSongs } from '@app/hooks/query'
import { useSetQueue } from '@app/hooks/trackplayer'
import { Album, Song } from '@app/models/library'
import { useStore, useStoreDeep } from '@app/state/store'
import colors from '@app/styles/colors'
import dimensions from '@app/styles/dimensions'
import font from '@app/styles/font'
import { mapById } from '@app/util/state'
import { useLayout } from '@react-native-community/hooks'
import { useNavigation } from '@react-navigation/native'
import React, { useCallback, useEffect } from 'react'
import equal from 'fast-deep-equal/es6/react'
import React from 'react'
import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
import { useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
@ -31,22 +32,21 @@ const AlbumItem = React.memo<{
return (
<AlbumContextPressable
album={album}
onPress={() => navigation.navigate('album', { id: album.id, title: album.name })}
onPress={() => navigation.navigate('album', { id: album.id, title: album.name, album })}
menuStyle={[styles.albumItem, { width }]}
triggerOuterWrapperStyle={{ width }}>
<CoverArt type="cover" coverArt={album.coverArt} style={{ height, width }} resizeMode={'cover'} />
<CoverArt type="cover" coverArt={album.coverArt} style={{ height, width }} resizeMode="cover" size="thumbnail" />
<Text style={styles.albumTitle}>{album.name}</Text>
<Text style={styles.albumYear}> {album.year ? album.year : ''}</Text>
</AlbumContextPressable>
)
})
}, equal)
const TopSongs = React.memo<{
songs: Song[]
name: string
artistId: string
}>(({ songs, name, artistId }) => {
const setQueue = useStore(store => store.setQueue)
}>(({ songs, name }) => {
const { setQueue, isReady, contextId } = useSetQueue('artist', songs)
return (
<>
@ -55,16 +55,17 @@ const TopSongs = React.memo<{
<ListItem
key={i}
item={s}
contextId={artistId}
contextId={contextId}
queueId={i}
showArt={true}
subtitle={s.album}
onPress={() => setQueue(songs, name, 'artist', artistId, i)}
onPress={() => setQueue({ title: name, playTrack: i })}
disabled={!isReady}
/>
))}
</>
)
})
}, equal)
const ArtistAlbums = React.memo<{
albums: Album[]
@ -87,7 +88,7 @@ const ArtistAlbums = React.memo<{
</View>
</>
)
})
}, equal)
const ArtistViewFallback = React.memo(() => (
<GradientBackground style={styles.fallback}>
@ -96,18 +97,8 @@ const ArtistViewFallback = React.memo(() => (
))
const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) => {
const artist = useStoreDeep(useCallback(store => store.library.artists[id], [id]))
const topSongIds = useStoreDeep(useCallback(store => store.library.artistNameTopSongs[artist?.name], [artist?.name]))
const topSongs = useStoreDeep(
useCallback(store => (topSongIds ? mapById(store.library.songs, topSongIds) : undefined), [topSongIds]),
)
const albumIds = useStoreDeep(useCallback(store => store.library.artistAlbums[id], [id]))
const albums = useStoreDeep(
useCallback(store => (albumIds ? mapById(store.library.albums, albumIds) : undefined), [albumIds]),
)
const fetchArtist = useStore(store => store.fetchArtist)
const fetchTopSongs = useStore(store => store.fetchArtistTopSongs)
const { data: artistData } = useQueryArtist(id)
const { data: topSongs, isError } = useQueryArtistTopSongs(artistData?.artist?.name)
const coverLayout = useLayout()
const headerOpacity = useSharedValue(0)
@ -124,22 +115,12 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) =>
}
})
useEffect(() => {
if (!artist || !albumIds) {
fetchArtist(id)
}
}, [artist, albumIds, fetchArtist, id])
useEffect(() => {
if (artist && !topSongIds) {
fetchTopSongs(artist.name)
}
}, [artist, fetchTopSongs, topSongIds])
if (!artist) {
if (!artistData) {
return <ArtistViewFallback />
}
const { artist, albums } = artistData
return (
<View style={styles.container}>
<HeaderBar title={title} headerStyle={[styles.header, animatedOpacity]} />
@ -149,15 +130,15 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) =>
style={styles.scroll}
contentContainerStyle={styles.scrollContent}
onScroll={onScroll}>
<CoverArt type="artist" size="original" artistId={artist.id} style={styles.artistCover} resizeMode={'cover'} />
<CoverArt type="artist" size="original" artistId={artist.id} style={styles.artistCover} resizeMode="cover" />
<View style={styles.titleContainer}>
<Text style={styles.title}>{artist.name}</Text>
</View>
<View style={styles.contentContainer}>
{topSongs && albums ? (
topSongs.length > 0 ? (
{(topSongs || isError) && artist ? (
topSongs && topSongs.length > 0 ? (
<>
<TopSongs songs={topSongs} name={artist.name} artistId={artist.id} />
<TopSongs songs={topSongs} name={artist.name} />
<ArtistAlbums albums={albums} />
</>
) : (

94
app/screens/Home.tsx
View File

@ -3,18 +3,17 @@ import CoverArt from '@app/components/CoverArt'
import GradientScrollView from '@app/components/GradientScrollView'
import Header from '@app/components/Header'
import NothingHere from '@app/components/NothingHere'
import { useActiveServerRefresh } from '@app/hooks/settings'
import { useStore, useStoreDeep } from '@app/state/store'
import { useQueryHomeLists } from '@app/hooks/query'
import { Album } from '@app/models/library'
import { useStoreDeep } from '@app/state/store'
import colors from '@app/styles/colors'
import font from '@app/styles/font'
import { GetAlbumList2TypeBase, GetAlbumListType } from '@app/subsonic/params'
import { useNavigation } from '@react-navigation/native'
import equal from 'fast-deep-equal/es6/react'
import produce from 'immer'
import React, { useCallback, useState } from 'react'
import React from 'react'
import { RefreshControl, ScrollView, StyleSheet, Text, View } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import create, { StateSelector } from 'zustand'
const titles: { [key in GetAlbumListType]?: string } = {
recent: 'Recently Played',
@ -24,25 +23,21 @@ const titles: { [key in GetAlbumListType]?: string } = {
}
const AlbumItem = React.memo<{
id: string
}>(({ id }) => {
album: Album
}>(({ album }) => {
const navigation = useNavigation()
const album = useStoreDeep(useCallback(store => store.library.albums[id], [id]))
if (!album) {
return <></>
}
return (
<AlbumContextPressable
album={album}
triggerWrapperStyle={styles.item}
onPress={() => navigation.navigate('album', { id: album.id, title: album.name })}>
onPress={() => navigation.navigate('album', { id: album.id, title: album.name, album })}>
<CoverArt
type="cover"
coverArt={album.coverArt}
style={{ height: styles.item.width, width: styles.item.width }}
resizeMode={'cover'}
resizeMode="cover"
size="thumbnail"
/>
<Text style={styles.title} numberOfLines={1}>
{album.name}
@ -52,13 +47,12 @@ const AlbumItem = React.memo<{
</Text>
</AlbumContextPressable>
)
})
}, equal)
const Category = React.memo<{
type: string
}>(({ type }) => {
const list = useHomeStoreDeep(useCallback(store => store.lists[type] || [], [type]))
albums: Album[]
}>(({ type, albums }) => {
const Albums = () => (
<ScrollView
horizontal={true}
@ -66,8 +60,8 @@ const Category = React.memo<{
overScrollMode={'never'}
style={styles.artScroll}
contentContainerStyle={styles.artScrollContent}>
{list.map(id => (
<AlbumItem key={id} id={id} />
{albums.map(a => (
<AlbumItem key={a.id} album={a} />
))}
</ScrollView>
)
@ -81,75 +75,33 @@ const Category = React.memo<{
return (
<View style={styles.category}>
<Header style={styles.header}>{titles[type as GetAlbumListType] || ''}</Header>
{list.length > 0 ? <Albums /> : <Nothing />}
{albums.length > 0 ? <Albums /> : <Nothing />}
</View>
)
})
interface HomeState {
lists: { [type: string]: string[] }
setList: (type: string, list: string[]) => void
}
const useHomeStore = create<HomeState>(set => ({
lists: {},
setList: (type, list) => {
set(
produce<HomeState>(state => {
state.lists[type] = list
}),
)
},
}))
function useHomeStoreDeep<U>(stateSelector: StateSelector<HomeState, U>) {
return useHomeStore(stateSelector, equal)
}
}, equal)
const Home = () => {
const [refreshing, setRefreshing] = useState(false)
const types = useStoreDeep(store => store.settings.screens.home.listTypes)
const fetchAlbumList = useStore(store => store.fetchAlbumList)
const setList = useHomeStore(store => store.setList)
const listQueries = useQueryHomeLists(types as GetAlbumList2TypeBase[], 20)
const paddingTop = useSafeAreaInsets().top
const refresh = useCallback(async () => {
setRefreshing(true)
await Promise.all(
types.map(async type => {
const ids = await fetchAlbumList({ type: type as GetAlbumList2TypeBase, size: 20, offset: 0 })
setList(type, ids)
}),
)
setRefreshing(false)
}, [fetchAlbumList, setList, types])
useActiveServerRefresh(
useCallback(() => {
types.forEach(type => setList(type, []))
refresh()
}, [refresh, setList, types]),
)
return (
<GradientScrollView
style={styles.scroll}
contentContainerStyle={{ paddingTop }}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={refresh}
refreshing={listQueries.some(q => q.isLoading)}
onRefresh={() => listQueries.forEach(q => q.refetch())}
colors={[colors.accent, colors.accentLow]}
progressViewOffset={paddingTop}
/>
}>
<View style={styles.content}>
{types.map(type => (
<Category key={type} type={type} />
))}
{types.map(type => {
const query = listQueries.find(list => list.data?.type === type)
return <Category key={type} type={type} albums={query?.data?.albums || []} />
})}
</View>
</GradientScrollView>
)

76
app/screens/LibraryAlbums.tsx
View File

@ -2,21 +2,22 @@ import { AlbumContextPressable } from '@app/components/ContextMenu'
import CoverArt from '@app/components/CoverArt'
import FilterButton, { OptionData } from '@app/components/FilterButton'
import GradientFlatList from '@app/components/GradientFlatList'
import { useFetchPaginatedList } from '@app/hooks/list'
import { useQueryAlbumList } from '@app/hooks/query'
import { Album } from '@app/models/library'
import { useStore, useStoreDeep } from '@app/state/store'
import colors from '@app/styles/colors'
import font from '@app/styles/font'
import { GetAlbumList2Params, GetAlbumList2Type } from '@app/subsonic/params'
import { GetAlbumList2Type, GetAlbumList2TypeBase } from '@app/subsonic/params'
import { useNavigation } from '@react-navigation/native'
import React, { useCallback } from 'react'
import equal from 'fast-deep-equal/es6/react'
import React from 'react'
import { StyleSheet, Text, useWindowDimensions, View } from 'react-native'
const AlbumItem = React.memo<{
id: string
album: Album
size: number
height: number
}>(({ id, size, height }) => {
const album = useStoreDeep(useCallback(store => store.library.albums[id], [id]))
}>(({ album, size, height }) => {
const navigation = useNavigation()
if (!album) {
@ -28,8 +29,14 @@ const AlbumItem = React.memo<{
album={album}
menuStyle={[styles.itemMenu, { width: size }]}
triggerWrapperStyle={[styles.itemWrapper, { height }]}
onPress={() => navigation.navigate('album', { id: album.id, title: album.name })}>
<CoverArt type="cover" coverArt={album.coverArt} style={{ height: size, width: size }} resizeMode={'cover'} />
onPress={() => navigation.navigate('album', { id: album.id, title: album.name, album })}>
<CoverArt
type="cover"
coverArt={album.coverArt}
style={{ height: size, width: size }}
resizeMode="cover"
size="thumbnail"
/>
<View style={styles.itemDetails}>
<Text style={styles.title} numberOfLines={1}>
{album.name}
@ -40,11 +47,11 @@ const AlbumItem = React.memo<{
</View>
</AlbumContextPressable>
)
})
}, equal)
const AlbumListRenderItem: React.FC<{
item: { id: string; size: number; height: number }
}> = ({ item }) => <AlbumItem id={item.id} size={item.size} height={item.height} />
item: { album: Album; size: number; height: number }
}> = ({ item }) => <AlbumItem album={item.album} size={item.size} height={item.height} />
const filterOptions: OptionData[] = [
{ text: 'By Name', value: 'alphabeticalByName' },
@ -62,42 +69,7 @@ const AlbumsList = () => {
const filter = useStoreDeep(store => store.settings.screens.library.albumsFilter)
const setFilter = useStore(store => store.setLibraryAlbumFilter)
const fetchAlbumList = useStore(store => store.fetchAlbumList)
const fetchPage = useCallback(
(size: number, offset: number) => {
let params: GetAlbumList2Params
switch (filter.type) {
case 'byYear':
params = {
size,
offset,
type: filter.type,
fromYear: filter.fromYear,
toYear: filter.toYear,
}
break
case 'byGenre':
params = {
size,
offset,
type: filter.type,
genre: filter.genre,
}
break
default:
params = {
size,
offset,
type: filter.type,
}
break
}
return fetchAlbumList(params)
},
[fetchAlbumList, filter.fromYear, filter.genre, filter.toYear, filter.type],
)
const { list, refreshing, refresh, fetchNextPage } = useFetchPaginatedList(fetchPage, 300)
const { isLoading, data, fetchNextPage, refetch } = useQueryAlbumList(filter.type as GetAlbumList2TypeBase, 300)
const layout = useWindowDimensions()
@ -107,15 +79,15 @@ const AlbumsList = () => {
return (
<View style={styles.container}>
<GradientFlatList
data={list.map(id => ({ id, size, height }))}
data={data ? data.pages.flatMap(albums => albums.map(album => ({ album, size, height }))) : []}
renderItem={AlbumListRenderItem}
keyExtractor={item => item.id}
keyExtractor={item => item.album.id}
numColumns={3}
removeClippedSubviews={true}
refreshing={refreshing}
onRefresh={refresh}
refreshing={isLoading}
onRefresh={refetch}
overScrollMode="never"
onEndReached={fetchNextPage}
onEndReached={() => fetchNextPage()}
onEndReachedThreshold={6}
windowSize={5}
/>

24
app/screens/LibraryArtists.tsx
View File

@ -1,7 +1,7 @@
import FilterButton, { OptionData } from '@app/components/FilterButton'
import GradientFlatList from '@app/components/GradientFlatList'
import ListItem from '@app/components/ListItem'
import { useFetchList2 } from '@app/hooks/list'
import { useQueryArtists } from '@app/hooks/query'
import { Artist } from '@app/models/library'
import { ArtistFilterType } from '@app/models/settings'
import { useStore, useStoreDeep } from '@app/state/store'
@ -19,17 +19,19 @@ const filterOptions: OptionData[] = [
]
const ArtistsList = () => {
const fetchArtists = useStore(store => store.fetchArtists)
const { refreshing, refresh } = useFetchList2(fetchArtists)
const artists = useStoreDeep(store => store.library.artists)
const artistOrder = useStoreDeep(store => store.library.artistOrder)
const filter = useStoreDeep(store => store.settings.screens.library.artistsFilter)
const setFilter = useStore(store => store.setLibraryArtistFiler)
const { isLoading, data, refetch } = useQueryArtists()
const [sortedList, setSortedList] = useState<Artist[]>([])
useEffect(() => {
const list = Object.values(artists)
if (!data) {
setSortedList([])
return
}
const list = Object.values(data.byId)
switch (filter.type) {
case 'random':
setSortedList([...list].sort(() => Math.random() - 0.5))
@ -38,13 +40,13 @@ const ArtistsList = () => {
setSortedList([...list].filter(a => a.starred))
break
case 'alphabeticalByName':
setSortedList(artistOrder.map(id => artists[id]))
setSortedList(data.allIds.map(id => data.byId[id]))
break
default:
setSortedList([...list])
break
}
}, [filter.type, artists, artistOrder])
}, [filter.type, data])
return (
<View style={styles.container}>
@ -52,8 +54,8 @@ const ArtistsList = () => {
data={sortedList}
renderItem={ArtistRenderItem}
keyExtractor={item => item.id}
onRefresh={refresh}
refreshing={refreshing}
onRefresh={refetch}
refreshing={isLoading}
overScrollMode="never"
windowSize={3}
contentMarginTop={6}

14
app/screens/LibraryPlaylists.tsx
View File

@ -1,8 +1,8 @@
import GradientFlatList from '@app/components/GradientFlatList'
import ListItem from '@app/components/ListItem'
import { useFetchList2 } from '@app/hooks/list'
import { useQueryPlaylists } from '@app/hooks/query'
import { Playlist } from '@app/models/library'
import { useStore, useStoreDeep } from '@app/state/store'
import { mapById } from '@app/util/state'
import React from 'react'
import { StyleSheet } from 'react-native'
@ -11,17 +11,15 @@ const PlaylistRenderItem: React.FC<{ item: Playlist }> = ({ item }) => (
)
const PlaylistsList = () => {
const fetchPlaylists = useStore(store => store.fetchPlaylists)
const { refreshing, refresh } = useFetchList2(fetchPlaylists)
const playlists = useStoreDeep(store => store.library.playlists)
const { isLoading, data, refetch } = useQueryPlaylists()
return (
<GradientFlatList
data={Object.values(playlists)}
data={data ? mapById(data?.byId, data?.allIds) : []}
renderItem={PlaylistRenderItem}
keyExtractor={item => item.id}
onRefresh={refresh}
refreshing={refreshing}
onRefresh={refetch}
refreshing={isLoading}
overScrollMode="never"
windowSize={5}
contentMarginTop={6}

4
app/screens/NowPlayingQueue.tsx
View File

@ -3,7 +3,8 @@ import ListItem from '@app/components/ListItem'
import NowPlayingBar from '@app/components/NowPlayingBar'
import { useSkipTo } from '@app/hooks/trackplayer'
import { Song } from '@app/models/library'
import { useStore, useStoreDeep } from '@app/state/store'
import { mapTrackExtToSong } from '@app/models/map'
import { useStoreDeep } from '@app/state/store'
import React from 'react'
import { StyleSheet, View } from 'react-native'
@ -26,7 +27,6 @@ const SongRenderItem: React.FC<{
const NowPlayingQueue = React.memo<{}>(() => {
const queue = useStoreDeep(store => store.queue)
const mapTrackExtToSong = useStore(store => store.mapTrackExtToSong)
const skipTo = useSkipTo()
return (

2
app/screens/NowPlayingView.tsx
View File

@ -4,6 +4,7 @@ import ImageGradientBackground from '@app/components/ImageGradientBackground'
import PressableOpacity from '@app/components/PressableOpacity'
import { PressableStar } from '@app/components/Star'
import { useNext, usePause, usePlay, usePrevious, useSeekTo } from '@app/hooks/trackplayer'
import { mapTrackExtToSong } from '@app/models/map'
import { QueueContextType, TrackExt } from '@app/models/trackplayer'
import { useStore, useStoreDeep } from '@app/state/store'
import colors from '@app/styles/colors'
@ -40,7 +41,6 @@ const NowPlayingHeader = React.memo<{
}>(({ track }) => {
const queueName = useStore(store => store.queueName)
const queueContextType = useStore(store => store.queueContextType)
const mapTrackExtToSong = useStore(store => store.mapTrackExtToSong)
if (!track) {
return <></>

101
app/screens/Search.tsx
View File

@ -4,14 +4,14 @@ import Header from '@app/components/Header'
import ListItem from '@app/components/ListItem'
import NothingHere from '@app/components/NothingHere'
import TextInput from '@app/components/TextInput'
import { useActiveServerRefresh } from '@app/hooks/settings'
import { useQuerySearchResults } from '@app/hooks/query'
import { useSetQueue } from '@app/hooks/trackplayer'
import { Album, Artist, SearchResults, Song } from '@app/models/library'
import { useStore, useStoreDeep } from '@app/state/store'
import colors from '@app/styles/colors'
import font from '@app/styles/font'
import { mapById } from '@app/util/state'
import { useFocusEffect, useNavigation } from '@react-navigation/native'
import debounce from 'lodash.debounce'
import equal from 'fast-deep-equal/es6/react'
import _ from 'lodash'
import React, { useCallback, useMemo, useRef, useState } from 'react'
import {
ActivityIndicator,
@ -24,44 +24,27 @@ import {
import { useSafeAreaInsets } from 'react-native-safe-area-context'
const SongItem = React.memo<{ item: Song }>(({ item }) => {
const setQueue = useStore(store => store.setQueue)
const { setQueue, isReady, contextId } = useSetQueue('song', [item])
return (
<ListItem
item={item}
contextId={item.id}
contextId={contextId}
queueId={0}
showArt={true}
showStar={false}
onPress={() => setQueue([item], item.title, 'song', item.id, 0)}
onPress={() => setQueue({ title: item.title, playTrack: 0 })}
disabled={!isReady}
/>
)
})
}, equal)
const ResultsCategory = React.memo<{
name: string
query: string
ids: string[]
items: (Artist | Album | Song)[]
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],
),
)
}>(({ name, query, type, items }) => {
const navigation = useNavigation()
if (items.length === 0) {
@ -88,7 +71,7 @@ const ResultsCategory = React.memo<{
)}
</>
)
})
}, equal)
const Results = React.memo<{
results: SearchResults
@ -96,17 +79,17 @@ const Results = React.memo<{
}>(({ results, query }) => {
return (
<>
<ResultsCategory name="Artists" query={query} type={'artist'} ids={results.artists} />
<ResultsCategory name="Albums" query={query} type={'album'} ids={results.albums} />
<ResultsCategory name="Songs" query={query} type={'song'} ids={results.songs} />
<ResultsCategory name="Artists" query={query} type={'artist'} items={results.artists} />
<ResultsCategory name="Albums" query={query} type={'album'} items={results.albums} />
<ResultsCategory name="Songs" query={query} type={'song'} items={results.songs} />
</>
)
})
}, equal)
const Search = () => {
const fetchSearchResults = useStore(store => store.fetchSearchResults)
const [results, setResults] = useState<SearchResults>({ artists: [], albums: [], songs: [] })
const [refreshing, setRefreshing] = useState(false)
const [query, setQuery] = useState('')
const { data, isLoading } = useQuerySearchResults({ query, albumCount: 5, artistCount: 5, songCount: 5 })
const [text, setText] = useState('')
const searchBarRef = useRef<ReactTextInput>(null)
const scrollRef = useRef<ScrollView>(null)
@ -116,42 +99,39 @@ const Search = () => {
useCallback(() => {
const task = InteractionManager.runAfterInteractions(() => {
setTimeout(() => {
if (text) {
return
}
setText('')
setResults({ artists: [], albums: [], songs: [] })
setQuery('')
searchBarRef.current?.focus()
scrollRef.current?.scrollTo({ y: 0, animated: true })
}, 50)
})
return () => task.cancel()
}, [searchBarRef, scrollRef]),
}, [text]),
)
useActiveServerRefresh(
useCallback(() => {
setText('')
setResults({ artists: [], albums: [], songs: [] })
}, []),
)
const debouncedonUpdateSearch = useMemo(
const debouncedSetQuery = useMemo(
() =>
debounce(async (query: string) => {
setRefreshing(true)
setResults(await fetchSearchResults({ query, albumCount: 5, artistCount: 5, songCount: 5 }))
setRefreshing(false)
_.debounce((value: string) => {
setQuery(value)
}, 400),
[fetchSearchResults],
[],
)
const onChangeText = useCallback(
(value: string) => {
setText(value)
debouncedonUpdateSearch(value)
debouncedSetQuery(value)
},
[setText, debouncedonUpdateSearch],
[setText, debouncedSetQuery],
)
const resultsCount = results.albums.length + results.artists.length + results.songs.length
const resultsCount =
(data ? data.pages.reduce((acc, val) => (acc += val.artists.length), 0) : 0) +
(data ? data.pages.reduce((acc, val) => (acc += val.albums.length), 0) : 0) +
(data ? data.pages.reduce((acc, val) => (acc += val.songs.length), 0) : 0)
return (
<GradientScrollView ref={scrollRef} style={styles.scroll} contentContainerStyle={{ paddingTop }}>
@ -164,14 +144,13 @@ const Search = () => {
value={text}
onChangeText={onChangeText}
/>
<ActivityIndicator
animating={refreshing}
size="small"
color={colors.text.secondary}
style={styles.activity}
/>
<ActivityIndicator animating={isLoading} size="small" color={colors.text.secondary} style={styles.activity} />
</View>
{resultsCount > 0 ? <Results results={results} query={text} /> : <NothingHere style={styles.noResults} />}
{data !== undefined && resultsCount > 0 ? (
<Results results={data.pages[0]} query={text} />
) : (
<NothingHere style={styles.noResults} />
)}
</View>
</GradientScrollView>
)

116
app/screens/SearchResultsView.tsx
View File

@ -1,24 +1,34 @@
import GradientFlatList from '@app/components/GradientFlatList'
import ListItem from '@app/components/ListItem'
import { useFetchPaginatedList } from '@app/hooks/list'
import { useQuerySearchResults } from '@app/hooks/query'
import { useSetQueue } from '@app/hooks/trackplayer'
import { Album, Artist, Song } from '@app/models/library'
import { useStore, useStoreDeep } from '@app/state/store'
import { Search3Params } from '@app/subsonic/params'
import { mapById } from '@app/util/state'
import { useNavigation } from '@react-navigation/native'
import React, { useCallback, useEffect } from 'react'
import React, { useEffect } from 'react'
import { StyleSheet } from 'react-native'
type SearchListItemType = Album | Song | Artist
const ResultsListItem: React.FC<{ item: SearchListItemType }> = ({ item }) => {
const setQueue = useStore(store => store.setQueue)
const SongResultsListItem: React.FC<{ item: Song }> = ({ item }) => {
const { setQueue, isReady, contextId } = useSetQueue('song', [item])
let onPress
if (item.itemType === 'song') {
onPress = () => setQueue([item], item.title, 'song', item.id, 0)
}
return (
<ListItem
item={item}
contextId={contextId}
queueId={0}
showArt={true}
showStar={false}
listStyle="small"
onPress={() => setQueue({ title: item.title, playTrack: 0 })}
style={styles.listItem}
disabled={!isReady}
/>
)
}
const OtherResultsListItem: React.FC<{ item: SearchListItemType }> = ({ item }) => {
return (
<ListItem
item={item}
@ -27,12 +37,19 @@ const ResultsListItem: React.FC<{ item: SearchListItemType }> = ({ item }) => {
showArt={true}
showStar={false}
listStyle="small"
onPress={onPress}
style={styles.listItem}
/>
)
}
const ResultsListItem: React.FC<{ item: SearchListItemType }> = ({ item }) => {
if (item.itemType === 'song') {
return <SongResultsListItem item={item} />
} else {
return <OtherResultsListItem item={item} />
}
}
const SearchResultsRenderItem: React.FC<{ item: SearchListItemType }> = ({ item }) => <ResultsListItem item={item} />
const SearchResultsView: React.FC<{
@ -40,61 +57,28 @@ const SearchResultsView: React.FC<{
type: 'album' | 'artist' | 'song'
}> = ({ query, type }) => {
const navigation = useNavigation()
const fetchSearchResults = useStore(store => store.fetchSearchResults)
const { list, refreshing, refresh, fetchNextPage } = useFetchPaginatedList(
useCallback(
async (size, offset) => {
const params: Search3Params = { query }
if (type === 'album') {
params.albumCount = size
params.albumOffset = offset
} else if (type === 'artist') {
params.artistCount = size
params.artistOffset = offset
} else if (type === 'song') {
params.songCount = size
params.songOffset = offset
} else {
params.albumCount = 5
params.artistCount = 5
params.songCount = 5
}
const results = await fetchSearchResults(params)
const size = 100
const params: Search3Params = { query }
switch (type) {
case 'album':
return results.albums
case 'artist':
return results.artists
case 'song':
return results.songs
default:
return []
}
},
[fetchSearchResults, query, type],
),
100,
)
if (type === 'album') {
params.albumCount = size
} else if (type === 'artist') {
params.artistCount = size
} else {
params.songCount = size
}
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],
),
)
const { data, isLoading, refetch, fetchNextPage } = useQuerySearchResults(params)
const items: (Artist | Album | Song)[] = []
if (type === 'album') {
data && items.push(...data.pages.flatMap(p => p.albums))
} else if (type === 'artist') {
data && items.push(...data.pages.flatMap(p => p.artists))
} else {
data && items.push(...data.pages.flatMap(p => p.songs))
}
useEffect(() => {
navigation.setOptions({
@ -108,10 +92,10 @@ const SearchResultsView: React.FC<{
data={items}
renderItem={SearchResultsRenderItem}
keyExtractor={(item, i) => i.toString()}
onRefresh={refresh}
refreshing={refreshing}
onRefresh={refetch}
refreshing={isLoading}
overScrollMode="never"
onEndReached={fetchNextPage}
onEndReached={() => fetchNextPage}
removeClippedSubviews={true}
onEndReachedThreshold={2}
contentMarginTop={6}

41
app/screens/ServerView.tsx
View File

@ -35,8 +35,6 @@ const ServerView: React.FC<{
)
const [testing, setTesting] = useState(false)
const [removing, setRemoving] = useState(false)
const [saving, setSaving] = useState(false)
const validate = useCallback(() => {
return !!address && !!username && !!password
@ -57,7 +55,7 @@ const ServerView: React.FC<{
const createServer = useCallback<() => Server>(() => {
if (usePlainPassword) {
return {
id: server?.id || (uuid.v4() as string),
id: server?.id || '',
usePlainPassword,
plainPassword: password,
address,
@ -77,7 +75,7 @@ const ServerView: React.FC<{
}
return {
id: server?.id || (uuid.v4() as string),
id: server?.id || '',
address,
username,
usePlainPassword,
@ -91,22 +89,15 @@ const ServerView: React.FC<{
return
}
setSaving(true)
const update = createServer()
const waitForSave = async () => {
try {
if (id) {
updateServer(update)
} else {
await addServer(update)
}
exit()
} catch (err) {
setSaving(false)
}
if (id) {
updateServer(update)
} else {
addServer(update)
}
waitForSave()
exit()
}, [addServer, createServer, exit, id, updateServer, validate])
const remove = useCallback(() => {
@ -114,16 +105,8 @@ const ServerView: React.FC<{
return
}
setRemoving(true)
const waitForRemove = async () => {
try {
await removeServer(id as string)
exit()
} catch (err) {
setRemoving(false)
}
}
waitForRemove()
removeServer(id as string)
exit()
}, [canRemove, exit, id, removeServer])
const togglePlainPassword = useCallback(
@ -162,8 +145,8 @@ const ServerView: React.FC<{
}, [createServer, pingServer])
const disableControls = useCallback(() => {
return !validate() || testing || removing || saving
}, [validate, testing, removing, saving])
return !validate() || testing
}, [validate, testing])
const formatAddress = useCallback(() => {
let addressFormatted = address.trim()

21
app/screens/Settings.tsx
View File

@ -5,7 +5,7 @@ import PressableOpacity from '@app/components/PressableOpacity'
import SettingsItem from '@app/components/SettingsItem'
import SettingsSwitch from '@app/components/SettingsSwitch'
import TextInput from '@app/components/TextInput'
import { useSwitchActiveServer } from '@app/hooks/settings'
import { useSwitchActiveServer, useResetImageCache } from '@app/hooks/settings'
import { Server } from '@app/models/settings'
import { useStore, useStoreDeep } from '@app/state/store'
import colors from '@app/styles/colors'
@ -207,25 +207,16 @@ const SettingsContent = React.memo(() => {
const maxBuffer = useStore(store => store.settings.maxBuffer)
const setMaxBuffer = useStore(store => store.setMaxBuffer)
const clearImageCache = useStore(store => store.clearImageCache)
const [clearing, setClearing] = useState(false)
const resetImageCache = useResetImageCache()
const navigation = useNavigation()
const clear = useCallback(() => {
const clear = useCallback(async () => {
setClearing(true)
const waitForClear = async () => {
try {
await clearImageCache()
} catch (err) {
console.log(err)
} finally {
setClearing(false)
}
}
waitForClear()
}, [clearImageCache])
await resetImageCache()
setClearing(false)
}, [resetImageCache])
const setMinBufferText = useCallback((text: string) => setMinBuffer(parseFloat(text)), [setMinBuffer])
const setMaxBufferText = useCallback((text: string) => setMaxBuffer(parseFloat(text)), [setMaxBuffer])

131
app/screens/SongListView.tsx
View File

@ -5,12 +5,13 @@ import ImageGradientFlatList from '@app/components/ImageGradientFlatList'
import ListItem from '@app/components/ListItem'
import ListPlayerControls from '@app/components/ListPlayerControls'
import NothingHere from '@app/components/NothingHere'
import { useCoverArtFile } from '@app/hooks/cache'
import { Song, Album, Playlist } from '@app/models/library'
import { useStore, useStoreDeep } from '@app/state/store'
import { useQueryAlbum, useQueryCoverArtPath, useQueryPlaylist } from '@app/hooks/query'
import { useSetQueue } from '@app/hooks/trackplayer'
import { Album, Playlist, Song } from '@app/models/library'
import colors from '@app/styles/colors'
import font from '@app/styles/font'
import React, { useCallback, useEffect, useState } from 'react'
import equal from 'fast-deep-equal/es6/react'
import React, { useState } from 'react'
import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
type SongListType = 'album' | 'playlist'
@ -29,6 +30,7 @@ const SongRenderItem: React.FC<{
subtitle?: string
onPress?: () => void
showArt?: boolean
disabled?: boolean
}
}> = ({ item }) => (
<ListItem
@ -39,6 +41,7 @@ const SongRenderItem: React.FC<{
onPress={item.onPress}
showArt={item.showArt}
style={styles.listItem}
disabled={item.disabled}
/>
)
@ -49,13 +52,8 @@ const SongListDetails = React.memo<{
songs?: Song[]
subtitle?: string
}>(({ title, songList, songs, subtitle, type }) => {
const coverArtFile = useCoverArtFile(songList?.coverArt, 'thumbnail')
const { data: coverArtPath } = useQueryCoverArtPath(songList?.coverArt, 'thumbnail')
const [headerColor, setHeaderColor] = useState<string | undefined>(undefined)
const setQueue = useStore(store => store.setQueue)
if (!songList) {
return <SongListDetailsFallback />
}
const _songs = [...(songs || [])]
let typeName = ''
@ -75,6 +73,16 @@ const SongListDetails = React.memo<{
typeName = 'Playlist'
}
const { setQueue, isReady, contextId } = useSetQueue(type, _songs)
if (!songList) {
return <SongListDetailsFallback />
}
const disabled = !isReady || _songs.length === 0
const play = (track?: number, shuffle?: boolean) => () =>
setQueue({ title: songList.name, playTrack: track, shuffle })
return (
<View style={styles.container}>
<HeaderBar
@ -85,16 +93,17 @@ const SongListDetails = React.memo<{
<ImageGradientFlatList
data={_songs.map((s, i) => ({
song: s,
contextId: songList.id,
contextId,
queueId: i,
subtitle: s.artist,
onPress: () => setQueue(_songs, songList.name, type, songList.id, i),
onPress: play(i),
showArt: songList.itemType === 'playlist',
disabled: disabled,
}))}
renderItem={SongRenderItem}
keyExtractor={(item, i) => i.toString()}
backgroundProps={{
imagePath: coverArtFile?.file?.path,
imagePath: coverArtPath,
style: styles.container,
onGetColor: setHeaderColor,
}}
@ -117,86 +126,66 @@ const SongListDetails = React.memo<{
style={styles.controls}
songs={_songs}
typeName={typeName}
queueName={songList.name}
queueContextId={songList.id}
queueContextType={type}
play={play(undefined, false)}
shuffle={play(undefined, true)}
disabled={disabled}
/>
</View>
}
/>
</View>
)
})
}, equal)
const PlaylistView = React.memo<{
id: string
title: string
}>(({ id, title }) => {
const playlist = useStoreDeep(useCallback(store => store.library.playlists[id], [id]))
const songs = useStoreDeep(
useCallback(
store => {
const ids = store.library.playlistSongs[id]
return ids ? ids.map(i => store.library.songs[i]) : undefined
},
[id],
),
)
const fetchPlaylist = useStore(store => store.fetchPlaylist)
useEffect(() => {
if (!playlist || !songs) {
fetchPlaylist(id)
}
}, [playlist, fetchPlaylist, id, songs])
return (
<SongListDetails title={title} songList={playlist} songs={songs} subtitle={playlist?.comment} type="playlist" />
)
})
const AlbumView = React.memo<{
id: string
title: string
}>(({ id, title }) => {
const album = 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])
playlist?: Playlist
}>(({ id, title, playlist }) => {
const query = useQueryPlaylist(id, playlist)
return (
<SongListDetails
title={title}
songList={album}
songs={songs}
subtitle={(album?.artist || '') + (album?.year ? ' • ' + album?.year : '')}
songList={query.data?.playlist}
songs={query.data?.songs}
subtitle={query.data?.playlist?.comment}
type="playlist"
/>
)
}, equal)
const AlbumView = React.memo<{
id: string
title: string
album?: Album
}>(({ id, title, album }) => {
const query = useQueryAlbum(id, album)
return (
<SongListDetails
title={title}
songList={query.data?.album}
songs={query.data?.songs}
subtitle={(query.data?.album?.artist || '') + (query.data?.album?.year ? ' • ' + query.data?.album?.year : '')}
type="album"
/>
)
})
}, equal)
const SongListView = React.memo<{
id: string
title: string
type: SongListType
}>(({ id, title, type }) => {
return type === 'album' ? <AlbumView id={id} title={title} /> : <PlaylistView id={id} title={title} />
})
album?: Album
playlist?: Playlist
}>(({ id, title, type, album, playlist }) => {
return type === 'album' ? (
<AlbumView id={id} title={title} album={album} />
) : (
<PlaylistView id={id} title={title} playlist={playlist} />
)
}, equal)
const styles = StyleSheet.create({
container: {

259
app/state/cache.ts
View File

@ -1,259 +0,0 @@
import { CacheFile, CacheImageSize, CacheItemType, CacheItemTypeKey, CacheRequest } from '@app/models/cache'
import { mkdir, rmdir } from '@app/util/fs'
import PromiseQueue from '@app/util/PromiseQueue'
import RNFS from 'react-native-fs'
import { GetStore, SetStore } from './store'
const queues: Record<CacheItemTypeKey, PromiseQueue> = {
coverArt: new PromiseQueue(5),
coverArtThumb: new PromiseQueue(50),
artistArt: new PromiseQueue(5),
artistArtThumb: new PromiseQueue(50),
song: new PromiseQueue(1),
}
export type CacheDownload = CacheFile & CacheRequest
export type CacheDirsByServer = Record<string, Record<CacheItemTypeKey, string>>
export type CacheFilesByServer = Record<string, Record<CacheItemTypeKey, Record<string, CacheFile>>>
export type CacheRequestsByServer = Record<string, Record<CacheItemTypeKey, Record<string, CacheRequest>>>
export type CacheSlice = {
cacheItem: (
key: CacheItemTypeKey,
itemId: string,
url: string | (() => string | Promise<string | undefined>),
) => Promise<void>
// cache: DownloadedItemsByServer
cacheDirs: CacheDirsByServer
cacheFiles: CacheFilesByServer
cacheRequests: CacheRequestsByServer
fetchCoverArtFilePath: (coverArt: string, size?: CacheImageSize) => Promise<string | undefined>
createCache: (serverId: string) => Promise<void>
prepareCache: (serverId: string) => void
pendingRemoval: Record<string, boolean>
removeCache: (serverId: string) => Promise<void>
clearImageCache: () => Promise<void>
}
export const createCacheSlice = (set: SetStore, get: GetStore): CacheSlice => ({
// cache: {},
cacheDirs: {},
cacheFiles: {},
cacheRequests: {},
cacheItem: async (key, itemId, url) => {
const client = get().client
if (!client) {
return
}
const activeServerId = get().settings.activeServerId
if (!activeServerId) {
return
}
if (get().pendingRemoval[activeServerId]) {
return
}
const inProgress = get().cacheRequests[activeServerId][key][itemId]
if (inProgress && inProgress.promise !== undefined) {
return await inProgress.promise
}
const existing = get().cacheFiles[activeServerId][key][itemId]
if (existing) {
return
}
const path = `${get().cacheDirs[activeServerId][key]}/${itemId}`
const promise = queues[key].enqueue(async () => {
const urlResult = typeof url === 'string' ? url : url()
const fromUrl = typeof urlResult === 'string' ? urlResult : await urlResult
try {
if (!fromUrl) {
throw new Error('cannot resolve url for cache request')
}
await RNFS.downloadFile({
fromUrl,
toFile: path,
// progressInterval: 100,
// progress: res => {
// set(
// produce<CacheSlice>(state => {
// state.cacheRequests[activeServerId][key][itemId].progress = Math.max(
// 1,
// res.bytesWritten / (res.contentLength || 1),
// )
// }),
// )
// },
}).promise
set(state => {
state.cacheRequests[activeServerId][key][itemId].progress = 1
delete state.cacheRequests[activeServerId][key][itemId].promise
})
} catch {
set(state => {
delete state.cacheFiles[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,
}
})
return await promise
},
fetchCoverArtFilePath: async (coverArt, size = 'thumbnail') => {
const client = get().client
if (!client) {
return
}
const activeServerId = get().settings.activeServerId
if (!activeServerId) {
return
}
const key: CacheItemTypeKey = size === 'thumbnail' ? 'coverArtThumb' : 'coverArt'
const existing = get().cacheFiles[activeServerId][key][coverArt]
const inProgress = get().cacheRequests[activeServerId][key][coverArt]
if (existing && inProgress) {
if (inProgress.promise) {
await inProgress.promise
}
return `file://${existing.path}`
}
await get().cacheItem(key, coverArt, () =>
client.getCoverArtUri({
id: coverArt,
size: size === 'thumbnail' ? '256' : undefined,
}),
)
return `file://${get().cacheFiles[activeServerId][key][coverArt].path}`
},
createCache: async serverId => {
for (const type in CacheItemType) {
await mkdir(`${RNFS.DocumentDirectoryPath}/servers/${serverId}/${type}`)
}
set(state => {
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: {},
coverArt: {},
coverArtThumb: {},
artistArt: {},
artistArtThumb: {},
}
}
})
},
pendingRemoval: {},
removeCache: async serverId => {
set(state => {
state.pendingRemoval[serverId] = true
})
const cacheRequests = get().cacheRequests[serverId]
const pendingRequests: Promise<void>[] = []
for (const type in CacheItemType) {
const requests = Object.values(cacheRequests[type as CacheItemTypeKey])
.filter(r => r.promise !== undefined)
.map(r => r.promise) as Promise<void>[]
pendingRequests.push(...requests)
}
await Promise.all(pendingRequests)
await rmdir(`${RNFS.DocumentDirectoryPath}/servers/${serverId}`)
set(state => {
delete state.pendingRemoval[serverId]
if (state.cacheDirs[serverId]) {
delete state.cacheDirs[serverId]
}
if (state.cacheFiles[serverId]) {
delete state.cacheFiles[serverId]
}
if (state.cacheRequests[serverId]) {
delete state.cacheRequests[serverId]
}
})
},
clearImageCache: async () => {
const cacheRequests = get().cacheRequests
for (const serverId in cacheRequests) {
const coverArtRequests = cacheRequests[serverId].coverArt
const artstArtRequests = cacheRequests[serverId].artistArt
const requests = [...Object.values(coverArtRequests), ...Object.values(artstArtRequests)]
const pendingRequests = [
...(requests.filter(r => r.promise !== undefined).map(r => r.promise) as Promise<void>[]),
]
await Promise.all(pendingRequests)
await rmdir(get().cacheDirs[serverId].coverArt)
await mkdir(get().cacheDirs[serverId].coverArt)
await rmdir(get().cacheDirs[serverId].artistArt)
await mkdir(get().cacheDirs[serverId].artistArt)
set(state => {
state.cacheFiles[serverId].coverArt = {}
state.cacheFiles[serverId].coverArtThumb = {}
state.cacheFiles[serverId].artistArt = {}
state.cacheFiles[serverId].artistArtThumb = {}
})
}
},
})

521
app/state/library.ts
View File

@ -1,521 +0,0 @@
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,
}
}

39
app/state/migrations.ts
View File

@ -1,15 +1,20 @@
import { Server } from '@app/models/settings'
import { ById } from '@app/models/state'
import { newCacheBuster } from './settings'
import RNFS from 'react-native-fs'
const migrations: Array<(state: any) => any> = [
state => {
const migrations: Array<(state: any) => Promise<any>> = [
// 1
async state => {
for (let server of state.settings.servers) {
server.usePlainPassword = false
}
return state
},
state => {
// 2
async state => {
state.settings.servers = state.settings.servers.reduce((acc: ById<Server>, server: Server) => {
acc[server.id] = server
return acc
@ -31,6 +36,34 @@ const migrations: Array<(state: any) => any> = [
return state
},
// 3
async state => {
state.settings.cacheBuster = newCacheBuster()
state.settings.servers = Object.values(state.settings.servers as Record<string, Server>).reduce(
(acc, server, i) => {
const newId = i.toString()
if (server.id === state.settings.activeServerId) {
state.settings.activeServerId = newId
}
server.id = newId
acc[newId] = server
return acc
},
{} as Record<string, Server>,
)
try {
await RNFS.unlink(`${RNFS.DocumentDirectoryPath}/servers`)
} catch (err) {
console.error(err)
}
return state
},
]
export default migrations

41
app/state/settings.ts
View File

@ -2,6 +2,7 @@ import { AlbumFilterSettings, ArtistFilterSettings, Server } from '@app/models/s
import { ById } from '@app/models/state'
import { GetStore, SetStore } from '@app/state/store'
import { SubsonicApiClient } from '@app/subsonic/api'
import uuid from 'react-native-uuid'
export type SettingsSlice = {
settings: {
@ -21,13 +22,17 @@ export type SettingsSlice = {
maxBitrateMobile: number
minBuffer: number
maxBuffer: number
cacheBuster: string
}
client?: SubsonicApiClient
resetServer: boolean
changeCacheBuster: () => void
setActiveServer: (id: string | undefined, force?: boolean) => Promise<void>
addServer: (server: Server) => Promise<void>
removeServer: (id: string) => Promise<void>
addServer: (server: Server) => void
removeServer: (id: string) => void
updateServer: (server: Server) => void
setScrobble: (scrobble: boolean) => void
@ -42,6 +47,10 @@ export type SettingsSlice = {
setLibraryArtistFiler: (filter: ArtistFilterSettings) => void
}
export function newCacheBuster(): string {
return (uuid.v4() as string).split('-')[0]
}
export const createSettingsSlice = (set: SetStore, get: GetStore): SettingsSlice => ({
settings: {
servers: {},
@ -66,6 +75,15 @@ export const createSettingsSlice = (set: SetStore, get: GetStore): SettingsSlice
maxBitrateMobile: 192,
minBuffer: 6,
maxBuffer: 60,
cacheBuster: newCacheBuster(),
},
resetServer: false,
changeCacheBuster: () => {
set(store => {
store.settings.cacheBuster = newCacheBuster()
})
},
setActiveServer: async (id, force) => {
@ -84,17 +102,24 @@ export const createSettingsSlice = (set: SetStore, get: GetStore): SettingsSlice
return
}
get().prepareCache(newActiveServer.id)
set(state => {
state.resetServer = true
})
set(state => {
state.settings.activeServerId = newActiveServer.id
state.client = new SubsonicApiClient(newActiveServer)
get().resetLibrary(state)
})
set(state => {
state.resetServer = false
})
},
addServer: async server => {
await get().createCache(server.id)
addServer: server => {
const serverIds = Object.keys(get().settings.servers)
server.id =
serverIds.length === 0 ? '0' : (serverIds.map(i => parseInt(i, 10)).sort((a, b) => b - a)[0] + 1).toString()
set(state => {
state.settings.servers[server.id] = server
@ -105,9 +130,7 @@ export const createSettingsSlice = (set: SetStore, get: GetStore): SettingsSlice
}
},
removeServer: async id => {
await get().removeCache(id)
removeServer: id => {
set(state => {
delete state.settings.servers[id]
})

17
app/state/store.ts
View File

@ -3,21 +3,15 @@ import AsyncStorage from '@react-native-async-storage/async-storage'
import equal from 'fast-deep-equal'
import create, { GetState, Mutate, SetState, State, StateCreator, StateSelector, StoreApi } from 'zustand'
import { persist, subscribeWithSelector } from 'zustand/middleware'
import { CacheSlice, createCacheSlice } from './cache'
import { createLibrarySlice, LibrarySlice } from './library'
import migrations from './migrations'
import { createTrackPlayerSlice, TrackPlayerSlice } from './trackplayer'
import { createTrackPlayerMapSlice, TrackPlayerMapSlice } from './trackplayermap'
import produce, { Draft } from 'immer'
import { WritableDraft } from 'immer/dist/internal'
const DB_VERSION = migrations.length
export type Store = SettingsSlice &
LibrarySlice &
TrackPlayerSlice &
TrackPlayerMapSlice &
CacheSlice & {
TrackPlayerSlice & {
hydrated: boolean
setHydrated: (hydrated: boolean) => void
}
@ -63,10 +57,7 @@ export const useStore = create<
persist(
immer((set, get) => ({
...createSettingsSlice(set, get),
...createLibrarySlice(set, get),
...createTrackPlayerSlice(set, get),
...createTrackPlayerMapSlice(set, get),
...createCacheSlice(set, get),
hydrated: false,
setHydrated: hydrated =>
@ -78,20 +69,20 @@ export const useStore = create<
name: '@appStore',
version: DB_VERSION,
getStorage: () => AsyncStorage,
partialize: state => ({ settings: state.settings, cacheFiles: state.cacheFiles }),
partialize: state => ({ settings: state.settings }),
onRehydrateStorage: _preState => {
return async (postState, _error) => {
await postState?.setActiveServer(postState.settings.activeServerId, true)
postState?.setHydrated(true)
}
},
migrate: (persistedState, version) => {
migrate: async (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)
persistedState = await migrations[i](persistedState)
}
return persistedState

32
app/state/trackplayer.ts
View File

@ -1,11 +1,22 @@
import { NoClientError } from '@app/models/error'
import { Song } from '@app/models/library'
import { Progress, QueueContextType, TrackExt } from '@app/models/trackplayer'
import PromiseQueue from '@app/util/PromiseQueue'
import produce from 'immer'
import TrackPlayer, { PlayerOptions, RepeatMode, State } from 'react-native-track-player'
import { GetStore, SetStore } from './store'
export type SetQueueOptions = {
title: string
playTrack?: number
shuffle?: boolean
}
export type SetQueueOptionsInternal = SetQueueOptions & {
queue: TrackExt[]
contextId: string
type: QueueContextType
}
export type TrackPlayerSlice = {
queueName?: string
setQueueName: (name?: string) => void
@ -33,14 +44,7 @@ export type TrackPlayerSlice = {
setCurrentTrackIdx: (idx?: number) => void
queue: TrackExt[]
setQueue: (
songs: Song[],
name: string,
contextType: QueueContextType,
contextId: string,
playTrack?: number,
shuffle?: boolean,
) => Promise<void>
setQueue: (options: SetQueueOptionsInternal) => Promise<void>
progress: Progress
setProgress: (progress: Progress) => void
@ -175,19 +179,17 @@ export const createTrackPlayerSlice = (set: SetStore, get: GetStore): TrackPlaye
}),
queue: [],
setQueue: async (songs, name, contextType, contextId, playTrack, shuffle) => {
setQueue: async ({ queue, title, type, contextId, playTrack, shuffle }) => {
return trackPlayerCommands.enqueue(async () => {
const shuffled = shuffle !== undefined ? shuffle : !!get().shuffleOrder
await TrackPlayer.setupPlayer(get().getPlayerOptions())
await TrackPlayer.reset()
if (songs.length === 0) {
if (queue.length === 0) {
return
}
let queue = await get().mapSongstoTrackExts(songs)
if (shuffled) {
const { tracks, shuffleOrder } = shuffleTracks(queue, playTrack)
set(state => {
@ -206,8 +208,8 @@ export const createTrackPlayerSlice = (set: SetStore, get: GetStore): TrackPlaye
try {
set(state => {
state.queue = queue
state.queueName = name
state.queueContextType = contextType
state.queueName = title
state.queueContextType = type
state.queueContextId = contextId
})
get().setCurrentTrackIdx(playTrack)

59
app/state/trackplayermap.ts
View File

@ -1,59 +0,0 @@
import { Song } from '@app/models/library'
import { TrackExt } from '@app/models/trackplayer'
import userAgent from '@app/util/userAgent'
import { GetStore, SetStore } from '@app/state/store'
export type TrackPlayerMapSlice = {
mapSongtoTrackExt: (song: Song) => Promise<TrackExt>
mapSongstoTrackExts: (songs: Song[]) => Promise<TrackExt[]>
mapTrackExtToSong: (song: TrackExt) => Song
}
export const createTrackPlayerMapSlice = (set: SetStore, get: GetStore): TrackPlayerMapSlice => ({
mapSongtoTrackExt: async song => {
let artwork = require('@res/fallback.png')
if (song.coverArt) {
const filePath = await get().fetchCoverArtFilePath(song.coverArt)
if (filePath) {
artwork = filePath
}
}
return {
id: song.id,
title: song.title,
artist: song.artist || 'Unknown Artist',
album: song.album || 'Unknown Album',
url: get().buildStreamUri(song.id),
userAgent,
artwork,
coverArt: song.coverArt,
duration: song.duration,
artistId: song.artistId,
albumId: song.albumId,
track: song.track,
discNumber: song.discNumber,
}
},
mapSongstoTrackExts: async songs => {
return await Promise.all(songs.map(get().mapSongtoTrackExt))
},
mapTrackExtToSong: track => {
return {
itemType: 'song',
id: track.id,
title: track.title as string,
artist: track.artist,
album: track.album,
streamUri: track.url as string,
coverArt: track.coverArt,
duration: track.duration,
artistId: track.artistId,
albumId: track.albumId,
track: track.track,
discNumber: track.discNumber,
}
},
})

13
app/subsonic/elements.ts
View File

@ -101,10 +101,7 @@ export class BaseArtistInfoElement<T> {
this.largeImageUrl = e.getElementsByTagName('largeImageUrl')[0].textContent as string
}
const similarArtistElements = e.getElementsByTagName('similarArtist')
for (let i = 0; i < similarArtistElements.length; i++) {
this.similarArtists.push(new artistType(similarArtistElements[i]))
}
this.similarArtists = Array.from(e.getElementsByTagName('similarArtist')).map(i => new artistType(i))
}
}
@ -250,9 +247,7 @@ export class PlaylistElement {
coverArt?: string
constructor(e: Element) {
for (let i = 0; i < e.getElementsByTagName('allowedUser').length; i++) {
this.allowedUser.push(e.getElementsByTagName('allowedUser')[i].textContent as string)
}
this.allowedUser = Array.from(e.getElementsByTagName('allowedUser')).map(i => i.textContent as string)
this.id = requiredString(e, 'id')
this.name = requiredString(e, 'name')
@ -273,8 +268,6 @@ export class PlaylistWithSongsElement extends PlaylistElement {
constructor(e: Element) {
super(e)
for (let i = 0; i < e.getElementsByTagName('entry').length; i++) {
this.songs.push(new ChildElement(e.getElementsByTagName('entry')[i]))
}
this.songs = Array.from(e.getElementsByTagName('entry')).map(i => new ChildElement(i))
}
}

26
app/util/fs.ts
View File

@ -1,19 +1,15 @@
import RNFS from 'react-native-fs'
import path from 'path'
import { CacheItemTypeKey } from '@app/models/cache'
export async function mkdir(path: string): Promise<void> {
const exists = await RNFS.exists(path)
if (exists) {
const isDir = (await RNFS.stat(path)).isDirectory()
if (!isDir) {
throw new Error(`path exists and is not a directory: ${path}`)
} else {
return
}
}
const serversCacheDir = path.join(RNFS.ExternalDirectoryPath, 's')
return await RNFS.mkdir(path)
}
export async function rmdir(path: string): Promise<void> {
return RNFS.unlink(path)
export function cacheDir(serverId?: string, itemType?: CacheItemTypeKey, itemId?: string): string {
const segments: string[] = []
serverId && segments.push(serverId)
serverId && itemType && segments.push(itemType)
serverId && itemType && itemId && segments.push(itemId)
return path.join(serversCacheDir, ...segments)
}

17
app/util/state.ts
View File

@ -1,5 +1,5 @@
import { ById } from '@app/models/state'
import merge from 'lodash.merge'
import { ById, CollectionById } from '@app/models/state'
import _ from 'lodash'
export function reduceById<T extends { id: string }>(collection: T[]): ById<T> {
return collection.reduce((acc, value) => {
@ -9,7 +9,7 @@ export function reduceById<T extends { id: string }>(collection: T[]): ById<T> {
}
export function mergeById<T extends { [id: string]: unknown }>(object: T, source: T): void {
merge(object, source)
_.merge(object, source)
}
export function mapById<T>(object: ById<T>, ids: string[]): T[] {
@ -19,3 +19,14 @@ export function mapById<T>(object: ById<T>, ids: string[]): T[] {
export function mapId(entities: { id: string }[]): string[] {
return entities.map(e => e.id)
}
export function mapCollectionById<T, U extends { id: string }>(
collection: T[],
map: (item: T) => U,
): CollectionById<U> {
const mapped = collection.map(map)
return {
byId: reduceById(mapped),
allIds: mapId(mapped),
}
}

15
package.json
View File

@ -29,14 +29,16 @@
"@react-navigation/native": "^5.9.4",
"@types/react": "^17",
"@xmldom/xmldom": "^0.7.0",
"content-disposition": "^0.5.4",
"fast-deep-equal": "^3.1.3",
"immer": "^9.0.6",
"lodash.debounce": "^4.0.8",
"lodash.merge": "^4.6.2",
"lodash.pick": "^4.4.0",
"lodash": "^4.17.21",
"md5": "^2.3.0",
"mime-types": "^2.1.35",
"path": "^0.12.7",
"react": "17.0.2",
"react-native": "0.67.1",
"react-native-blob-util": "https://github.com/austinried/react-native-blob-util.git#android-downloadmanager-progress",
"react-native-fs": "^2.18.0",
"react-native-gesture-handler": "^2.3.2",
"react-native-image-colors": "^1.3.0",
@ -50,17 +52,18 @@
"react-native-uuid": "^2.0.1",
"react-native-vector-icons": "^8.1.0",
"react-native-webview": "^11.13.0",
"react-query": "^3.34.19",
"zustand": "^3.7.1"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/runtime": "^7.12.5",
"@react-native-community/eslint-config": "^2.0.0",
"@types/content-disposition": "^0.5.4",
"@types/jest": "^26.0.23",
"@types/lodash.debounce": "^4.0.6",
"@types/lodash.merge": "^4.6.6",
"@types/lodash.pick": "^4.4.6",
"@types/lodash": "^4.14.181",
"@types/md5": "^2.3.0",
"@types/mime-types": "^2.1.1",
"@types/react-native-vector-icons": "^6.4.7",
"@types/react-test-renderer": "^16.9.2",
"babel-jest": "^26.6.3",

185
yarn.lock
View File

@ -719,6 +719,13 @@
dependencies:
regenerator-runtime "^0.13.4"
"@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2":
version "7.17.8"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.8.tgz#3e56e4aff81befa55ac3ac6a0967349fd1c5bca2"
integrity sha512-dQpEpK0O9o6lj6oPu0gRDbbnk+4LeHlNcBpspf6Olzt3GIX4P1lWF1gS+pHLDFlaJvbR6q7jCfQ08zA4QJBnmA==
dependencies:
regenerator-runtime "^0.13.4"
"@babel/template@^7.0.0", "@babel/template@^7.16.7", "@babel/template@^7.3.3":
version "7.16.7"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
@ -1431,6 +1438,11 @@
dependencies:
"@babel/types" "^7.3.0"
"@types/content-disposition@^0.5.4":
version "0.5.4"
resolved "https://registry.yarnpkg.com/@types/content-disposition/-/content-disposition-0.5.4.tgz#de48cf01c79c9f1560bcfd8ae43217ab028657f8"
integrity sha512-0mPF08jn9zYI0n0Q/Pnz7C4kThdSt+6LD4amsrYDDpgBfrVWa3TcCOxKX1zkGgYniGagRv8heN2cbh+CAn+uuQ==
"@types/eslint-visitor-keys@^1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
@ -1485,28 +1497,12 @@
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
"@types/lodash.debounce@^4.0.6":
version "4.0.6"
resolved "https://registry.yarnpkg.com/@types/lodash.debounce/-/lodash.debounce-4.0.6.tgz#c5a2326cd3efc46566c47e4c0aa248dc0ee57d60"
integrity sha512-4WTmnnhCfDvvuLMaF3KV4Qfki93KebocUF45msxhYyjMttZDQYzHkO639ohhk8+oco2cluAFL3t5+Jn4mleylQ==
dependencies:
"@types/lodash" "*"
"@types/lodash@^4.14.181":
version "4.14.181"
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.181.tgz#d1d3740c379fda17ab175165ba04e2d03389385d"
integrity sha512-n3tyKthHJbkiWhDZs3DkhkCzt2MexYHXlX0td5iMplyfwketaOeKboEVBqzceH7juqvEg3q5oUoBFxSLu7zFag==
"@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@^4.14.53":
version "4.14.178"
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.178.tgz#341f6d2247db528d4a13ddbb374bcdc80406f4f8"
integrity sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw==
@ -1518,6 +1514,11 @@
dependencies:
"@types/node" "*"
"@types/mime-types@^2.1.1":
version "2.1.1"
resolved "https://registry.yarnpkg.com/@types/mime-types/-/mime-types-2.1.1.tgz#d9ba43490fa3a3df958759adf69396c3532cf2c1"
integrity sha512-vXOTGVSLR2jMw440moWTC7H19iUyLtP3Z1YTj7cSsubOICinjMxFeb/V57v9QdyyPGbbWolUFSSmSiRSn94tFw==
"@types/node@*":
version "17.0.10"
resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.10.tgz#616f16e9d3a2a3d618136b1be244315d95bd7cab"
@ -2098,7 +2099,7 @@ balanced-match@^1.0.0:
resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
base-64@^0.1.0:
base-64@0.1.0, base-64@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/base-64/-/base-64-0.1.0.tgz#780a99c84e7d600260361511c4877613bf24f6bb"
integrity sha1-eAqZyE59YAJgNhURxId2E78k9rs=
@ -2121,7 +2122,7 @@ base@^0.11.1:
mixin-deep "^1.2.0"
pascalcase "^0.1.1"
big-integer@1.6.x:
big-integer@1.6.x, big-integer@^1.6.16:
version "1.6.51"
resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.51.tgz#0df92a5d9880560d3ff2d5fd20245c889d130686"
integrity sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==
@ -2176,6 +2177,20 @@ braces@^3.0.1:
dependencies:
fill-range "^7.0.1"
broadcast-channel@^3.4.1:
version "3.7.0"
resolved "https://registry.yarnpkg.com/broadcast-channel/-/broadcast-channel-3.7.0.tgz#2dfa5c7b4289547ac3f6705f9c00af8723889937"
integrity sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==
dependencies:
"@babel/runtime" "^7.7.2"
detect-node "^2.1.0"
js-sha3 "0.8.0"
microseconds "0.2.0"
nano-time "1.0.0"
oblivious-set "1.0.0"
rimraf "3.0.2"
unload "2.2.0"
browser-process-hrtime@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
@ -2517,6 +2532,13 @@ connect@^3.6.5:
parseurl "~1.3.3"
utils-merge "1.0.1"
content-disposition@^0.5.4:
version "0.5.4"
resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
integrity sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==
dependencies:
safe-buffer "5.2.1"
convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
version "1.8.0"
resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
@ -2718,6 +2740,11 @@ detect-newline@^3.0.0:
resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
detect-node@^2.0.4, detect-node@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==
diff-sequences@^26.6.2:
version "26.6.2"
resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.6.2.tgz#48ba99157de1923412eed41db6b6d4aa9ca7c0b1"
@ -3704,6 +3731,11 @@ inherits@2, inherits@2.0.4, inherits@~2.0.3:
resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
inherits@2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
internal-slot@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c"
@ -4456,6 +4488,11 @@ jpeg-js@0.4.2:
resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.2.tgz#8b345b1ae4abde64c2da2fe67ea216a114ac279d"
integrity sha512-+az2gi/hvex7eLTMTlbRLOhH6P6WFdk2ITI8HJsaH2VqYO0I594zXSYEP+tf4FW+8Cy68ScDXoAsQdyQanv3sw==
js-sha3@0.8.0:
version "0.8.0"
resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840"
integrity sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==
"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@ -4831,6 +4868,14 @@ map-visit@^1.0.0:
dependencies:
object-visit "^1.0.0"
match-sorter@^6.0.2:
version "6.3.1"
resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-6.3.1.tgz#98cc37fda756093424ddf3cbc62bfe9c75b92bda"
integrity sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==
dependencies:
"@babel/runtime" "^7.12.5"
remove-accents "0.4.2"
md5@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/md5/-/md5-2.3.0.tgz#c3da9a6aae3a30b46b7b0c349b87b110dc3bda4f"
@ -5190,11 +5235,21 @@ micromatch@^4.0.2:
braces "^3.0.1"
picomatch "^2.2.3"
microseconds@0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/microseconds/-/microseconds-0.2.0.tgz#233b25f50c62a65d861f978a4a4f8ec18797dc39"
integrity sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA==
mime-db@1.51.0, "mime-db@>= 1.43.0 < 2":
version "1.51.0"
resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.51.0.tgz#d9ff62451859b18342d960850dc3cfb77e63fb0c"
integrity sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==
mime-db@1.52.0:
version "1.52.0"
resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
mime-types@^2.1.12, mime-types@^2.1.27, mime-types@~2.1.24:
version "2.1.34"
resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.34.tgz#5a712f9ec1503511a945803640fafe09d3793c24"
@ -5202,6 +5257,13 @@ mime-types@^2.1.12, mime-types@^2.1.27, mime-types@~2.1.24:
dependencies:
mime-db "1.51.0"
mime-types@^2.1.35:
version "2.1.35"
resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
dependencies:
mime-db "1.52.0"
mime@1.6.0, mime@^1.3.4:
version "1.6.0"
resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
@ -5276,6 +5338,13 @@ ms@2.1.3:
resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
nano-time@1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/nano-time/-/nano-time-1.0.0.tgz#b0554f69ad89e22d0907f7a12b0993a5d96137ef"
integrity sha1-sFVPaa2J4i0JB/ehKwmTpdlhN+8=
dependencies:
big-integer "^1.6.16"
nanoid@^3.1.15:
version "3.2.0"
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c"
@ -5511,6 +5580,11 @@ object.values@^1.1.5:
define-properties "^1.1.3"
es-abstract "^1.19.1"
oblivious-set@1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/oblivious-set/-/oblivious-set-1.0.0.tgz#c8316f2c2fb6ff7b11b6158db3234c49f733c566"
integrity sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==
omggif@^1.0.10, omggif@^1.0.9:
version "1.0.10"
resolved "https://registry.yarnpkg.com/omggif/-/omggif-1.0.10.tgz#ddaaf90d4a42f532e9e7cb3a95ecdd47f17c7b19"
@ -5736,6 +5810,14 @@ path-parse@^1.0.6, path-parse@^1.0.7:
resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
path@^0.12.7:
version "0.12.7"
resolved "https://registry.yarnpkg.com/path/-/path-0.12.7.tgz#d4dc2a506c4ce2197eb481ebfcd5b36c0140b10f"
integrity sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8=
dependencies:
process "^0.11.1"
util "^0.10.3"
phin@^2.9.1:
version "2.9.3"
resolved "https://registry.yarnpkg.com/phin/-/phin-2.9.3.tgz#f9b6ac10a035636fb65dfc576aaaa17b8743125c"
@ -5844,7 +5926,7 @@ process-nextick-args@~2.0.0:
resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
process@^0.11.10:
process@^0.11.1, process@^0.11.10:
version "0.11.10"
resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
@ -5944,6 +6026,13 @@ react-is@^16.13.0, react-is@^16.13.1, react-is@^16.7.0:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
"react-native-blob-util@https://github.com/austinried/react-native-blob-util.git#android-downloadmanager-progress":
version "0.15.0"
resolved "https://github.com/austinried/react-native-blob-util.git#aa7a1a2b9653272914d0c8ce8ee2f38428ae3948"
dependencies:
base-64 "0.1.0"
glob "^7.1.6"
react-native-codegen@^0.0.8:
version "0.0.8"
resolved "https://registry.yarnpkg.com/react-native-codegen/-/react-native-codegen-0.0.8.tgz#b7796a54074139d956fff2862cf1285db43c891b"
@ -6092,6 +6181,15 @@ react-native@0.67.1:
whatwg-fetch "^3.0.0"
ws "^6.1.4"
react-query@^3.34.19:
version "3.34.19"
resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.34.19.tgz#0ff049b6e0d2ed148e9abfdd346625d0e88dc229"
integrity sha512-JO0Ymi58WKmvnhgg6bGIrYIeKb64KsKaPWo8JcGnmK2jJxAs2XmMBzlP75ZepSU7CHzcsWtIIyhMrLbX3pb/3w==
dependencies:
"@babel/runtime" "^7.5.5"
broadcast-channel "^3.4.1"
match-sorter "^6.0.2"
react-refresh@^0.4.0:
version "0.4.3"
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.4.3.tgz#966f1750c191672e76e16c2efa569150cc73ab53"
@ -6239,6 +6337,11 @@ regjsparser@^0.7.0:
dependencies:
jsesc "~0.5.0"
remove-accents@0.4.2:
version "0.4.2"
resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
integrity sha1-CkPTqq4egNuRngeuJUsoXZ4ce7U=
remove-trailing-separator@^1.0.1:
version "1.1.0"
resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
@ -6331,6 +6434,13 @@ ret@~0.1.10:
resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
rimraf@3.0.2, rimraf@^3.0.0, rimraf@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
dependencies:
glob "^7.1.3"
rimraf@^2.5.4:
version "2.7.1"
resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
@ -6338,13 +6448,6 @@ rimraf@^2.5.4:
dependencies:
glob "^7.1.3"
rimraf@^3.0.0, rimraf@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
dependencies:
glob "^7.1.3"
rimraf@~2.2.6:
version "2.2.8"
resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.2.8.tgz#e439be2aaee327321952730f99a8929e4fc50582"
@ -6367,6 +6470,11 @@ safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
safe-buffer@5.2.1:
version "5.2.1"
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
safe-regex@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
@ -7156,6 +7264,14 @@ universalify@^0.1.0, universalify@^0.1.2:
resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
unload@2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/unload/-/unload-2.2.0.tgz#ccc88fdcad345faa06a92039ec0f80b488880ef7"
integrity sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==
dependencies:
"@babel/runtime" "^7.6.2"
detect-node "^2.0.4"
unpipe@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
@ -7223,6 +7339,13 @@ util-deprecate@~1.0.1:
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
util@^0.10.3:
version "0.10.4"
resolved "https://registry.yarnpkg.com/util/-/util-0.10.4.tgz#3aa0125bfe668a4672de58857d3ace27ecb76901"
integrity sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==
dependencies:
inherits "2.0.3"
utils-merge@1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"