minht11 / local-music-pwa Goto Github PK

hi, first of all I want to say big thanks to you for making such simple cool music player, its awesome.
I always wanted to make my music player pwa so I got some questions to you

isn't it possible for pwa's to save imported tracks somehow so I don't have to import them every time I open the player?
the only way to bypass importing all music by hand is to choose a fixed folder and import all tracks automatically on startup? it wont be comfortable because it takes time for importing bunch of music.

how do you read music tags? probably with music-metadata package yup? that package says its metadata parser for node.js, how is there node.js involved in pwa? I thought node server was just for dev purposes, does any server run when I launch snaeplayer?

can you edit id3 tags of music? I think would need some other package for that

Hi,

Can you provide a ZIP with all included to i add to my marketplace?
https://wappfy.com/marketplace/

Thanks.

IndexedDB can serialize and store file handles from the FileSystemAccess API. This would allow the app to prompt the user to approve access to a folder that was previously selected, instead of having to re-add the folder using the file picker.

https://web.dev/file-system-access/#storing-file-handles-or-directory-handles-in-indexeddb

I have a default dark theme set on my windows machine. Despite, I would like to choose a light theme for sneaplayer sometimes. This seems not to be possible.

I suggest, you allow to override the system-set theme.

npm run build results in:

> [email protected] build C:\Users\Borewit\code\github\local-music-pwa
> rollup -c


src/main/app.ts, src/worklets/x-icon-worklet.ts → dist/...
rpt2: typescript version: 3.6.2
rpt2: tslib version: 1.9.3
rpt2: rollup version: 1.20.3
rpt2: rollup-plugin-typescript2 version: 0.20.1
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\app.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\worklets\x-icon-worklet.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\shared\x-icon-paths.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\app-shell.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\x-toast.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\store.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\info-view.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\x-menu.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\store\toasts\actions.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\store\menu\actions.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\library-view\library-view.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\player-panel\player-panel.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\shared-styles.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\store\index.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\utils\animation-curves.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\utils\utils.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\lib\supported.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\store\app\actions.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\store\player\actions.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\store\player\reducer.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\store\library\actions.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\grid-item.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\x-icon-button.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\x-dialog.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\x-select.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\store\library\reducer.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\track-list-item.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\library-view\library-view-styles.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\x-slider.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\player-panel\player-panel-styles.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\virtual-list.ts'
[!] (plugin rpt2) Error: src/main/components/virtual-list.ts:13:53 - error TS2306: File 'C:/Users/Borewit/code/github/local-music-pwa/node_modules/@types/resize-observer-bro
wser/index.d.ts' is not a module.

13 import { ResizeObserver, ResizeObserverEntry } from 'resize-observer-browser'
                                                       ~~~~~~~~~~~~~~~~~~~~~~~~~

src\main\components\virtual-list.ts
Error: src/main/components/virtual-list.ts:13:53 - error TS2306: File 'C:/Users/Borewit/code/github/local-music-pwa/node_modules/@types/resize-observer-browser/index.d.ts' i
s not a module.

13 import { ResizeObserver, ResizeObserverEntry } from 'resize-observer-browser'
                                                       ~~~~~~~~~~~~~~~~~~~~~~~~~

    at error (C:\Users\Borewit\code\github\local-music-pwa\node_modules\rollup\dist\rollup.js:9419:30)
    at throwPluginError (C:\Users\Borewit\code\github\local-music-pwa\node_modules\rollup\dist\rollup.js:15699:12)
    at Object.error (C:\Users\Borewit\code\github\local-music-pwa\node_modules\rollup\dist\rollup.js:15754:24)
    at Object.error (C:\Users\Borewit\code\github\local-music-pwa\node_modules\rollup\dist\rollup.js:16146:38)
    at RollupContext.error (C:\Users\Borewit\code\github\local-music-pwa\node_modules\rollup-plugin-typescript2\src\rollupcontext.ts:37:18)
    at lodash_2 (C:\Users\Borewit\code\github\local-music-pwa\node_modules\rollup-plugin-typescript2\src\print-diagnostics.ts:37:10)
    at arrayEach (C:\Users\Borewit\code\github\local-music-pwa\node_modules\rollup-plugin-typescript2\node_modules\lodash\lodash.js:516:11)
    at forEach (C:\Users\Borewit\code\github\local-music-pwa\node_modules\rollup-plugin-typescript2\node_modules\lodash\lodash.js:9344:14)
    at _.each (C:\Users\Borewit\code\github\local-music-pwa\node_modules\rollup-plugin-typescript2\src\print-diagnostics.ts:9:2)
    at Object.transform (C:\Users\Borewit\code\github\local-music-pwa\node_modules\rollup-plugin-typescript2\src\index.ts:212:5)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `rollup -c`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Borewit\AppData\Roaming\npm-cache\_logs\2019-09-04T06_04_40_351Z-debug.log

npm start will result in an error: http-server not found.

Currently, when adding new tracks to the library, each tracks file is compared to each of the already existing tracks files. isSameEntry is used for this and is the only by the browser provided method I know to do this. Sadly, this is really slow. When I compare ~3500 files to the same ~3500 files, it takes around 13 minutes.
On top of that, the added files get first parsed and only after that get compared to the existing tracks. I would say that, at the time of importing (selecting a directory) the files should be checked, so that after that only the new files get parsed.

For improving the main problem, I have an idea, but I don't know if it will work yet. I'm open to other ideas.
My plan would be, to save the path of each file, relative to the selected directory, and map that to their corresponding FileSystemHandle (or a custom object containing that somewhere). Then all the path mappings should be saved in the indexed db. Also, the directly imported directories need to be saved in the db and should have some kind of relation to the file path mappings.
After that, when importing the same folder again, we could check if that newly imported folder exists in our database and could the compare the newly generated file path mappings to the one belonging to the existing directory in the db.

When selecting a directory that is a parent of a directory in the db, we could check the difference in file path mappings from the point we get to the directory that already is in the db. This would mean that we needed to check every sub-directory when importing against our saved import directories. This should still be way more performant than the current implementation, but is not ideal.

I also don't have a good idea how to handle an import of a sub-directory of an import directory that is already in the db. We could probably store all scanned directories in the db, and compare every directory to every directory, but I think performance would get with a relatively big amount of directories pretty unperformant too.

The first step would be to implement just the path mapping from the imported folder and use my hopefully performant concept when the exact same directory is used again, and fall back to the current method if not.

I would be interested in implementing, or helping with the implementation of, this. I will try it nonetheless and will probably share a CodePen or something here, if my plan works out.

I hope everything I wrote here makes sense.

When trying to create new playlists, you have to add each song one at a time, which can be tiring for adding 100+ songs in a playlist

Is it possible to add a equalizer to this? Like something to adjust the bass and the treble.

I’m very curious about this as I’d like to play music from my Files (iOS) app.

I read the api that is utilized is revolving around Chromium based browsers. I’m experiencing in Safari on my iPhone the “import tracks” button to be unresponsive.

Am I understanding it right that this only works in Chrome/Edge?

(I have used snaeplayer.com/ for the above example)

I would like to add pictures to artists from things I have downloaded but I am unable to do this :(

Currently all tracks are saved as one giant object inside indexedDB every time one of the tracks changes, that makes easy to work with data inside the app, but performance and especially first load degrades quickly with large amount of tracks (1000+). Main cause of that is slow indexedDB.

Loading data in chunks could help with first load, but then how do you sort or search incomplete data?
Even then it's still loading all of the users data from disk to the memory, despite app only showing small parts of it at any given moment.

The optimal solution and most radical one requiring full rearchitecture of the app would be to use SQL. I haven't tested this library, but it says it's way faster than raw IndexedDB when working with large amount of data and doesn't keep all of it in memory. Unfortunately there two big problems with it: listening for data changes, right now if delete the track it's deleted everywhere automatically, that wouldn't be the case anymore and more significant issue that it's 1MB minified package, as of this moment the main app bundle size is about 107kb minified, that's 10x times increase in size. With GZIP, it's 400kb vs 30kb so 13x.

Though the bonus of adopting that library would be that we can use full SQL language features so no need for manually keeping relations between track -> artist and so on. Searching and filtering would be done on separate thread also. The data loading would be as if working with fetch rest api. Since list's are virtualized data could be loaded dynamically as user scrolls.

This isn't a critical issue for now, just an exploration of how to improve things down the line.

Thus far its only possible to play music continuously using Safari.

I added Snaeplayer to my homescreen. It works like an app, however when leaving the screen or putting the iPhone to sleep the music stops playing.

From what I understand this is a limitation for web apps in iOS, but I’m reading also contradicting messages saying it’s possible to play music in the background from a web app.

Would be great if this is possible (in the future) to add the functionality while using it as an app from the home screen.

I restarted my PC and then all the sudden my playlist got converted into an album. The playlist is still there it's just empty. All my songs are in a new album and in that album there album metadata is corrupted by saying they are in a "" album.

Allow click and dragging songs in the Now Playing queue and playlists to change the order.

Show user selected directories inside setting page. Add remove, rescan directory buttons, to each entry.

This can be done once, changes mentioned in are done #8

Amazing Music Player minh11

I love everything about it.

But would you mind answering some questions?

1. How do I add pictures to the artists?
2. How do I switch to the dark theme in the picture?
3. Are you still working on that player because some links don't function (for example, the view album button)?
4. What are your plans for Snae Player in the future? (Will you add more functions to your program?)

Thank you for that player; this is top-notch for people who like to cut songs and have a bigger Music Library.

I've been using this for a bit over a month and its great.

I'm kinda disappointed that there's only a dark/light theme though.

I'm happy to write some custom CSS stylesheets and contribute.

Would you be happy to accept some of these?

If so, where can I see the existing CSS code?

Is it possible to add playlist support for radio streaming servers to listen online?

for example

[playlist]
File1=https://radio.bbz.ru/listen/bbz/192.mp3
Title1=BBZ RADIO - 192kbps
Length1=-1

File2=https://radio.bbz.ru/hls/bbz/live.m3u8
Title2=BBZ RADIO - HLS
Length2=-1

NumberOfEntries=2
Version=2