icidasset / diffuse

A music player that connects to your cloud/distributed storage.

 ▐█████████▓▓▄ ▀█████⌐ ╟████████▌ ▓█████████ ▐███▌  ████▓  ▄▓████▓▄ ╘███████████
╓▄▄▄▄███▀▀▀███▓ ╓▄███⌐ ╟████▀▀▀▀▀,▄▄███▀▀▀▀▀ ▐███▌  ██▄▄▄╙▀▀██▀▀▀▀▀▀ ,▄███▓▀▀▀▀▀
'`^█████µ j████  ████⌐┌█████▓▓▓▓b ▐████▓▓▓▓▌ ▐███▌  ████▀ Æ███████▓▄  ▓████████▌
 ╘██████⌐ ▄████  ████▓ ,▐███▀▀▀▀─ ▐████▀▀▀▀b █████ ,████⌐ ▄▄▄▄▀▀████▓ ╟███▌▀▀▀▀`
   ▓██████████"  ██▓▄▄▀████▌      ▐███▌     ▄▄▄████████▀  ▀█████████\ ╟█████████

diffuse's Issues

LocalStorage quota for anonymous mode

Is being exceeded way too quick and everything breaks when it does.

Solutions:

• Use index_db or whatever that thing is called
• Disable album_art in anonymous mode (not cool)

Add export/import of user data

Since authentication is fairly unstable at the moment 🤦‍♂️

Typing in search feels slow

Shuffle queue doesn't work like it's supposed to

Only the first item changes.

Get a decent logo

No ideas yet ¯_(ツ)_/¯

Is being worked on.

When removing a track from the queue, ignore it for the next shuffle?

Or in other words.

When you remove an item from the autogenerated queuing list,
should we ignore it so it doesn't show up again?

(until there are no more tracks available that is)

When reordering items in the queue ...

should we always mark them as a "manual entry"?

Optimizations

• Preload all font files (to avoid flashing text on the playlist screen) and background images
• https://medium.freecodecamp.org/using-svg-as-placeholders-more-image-loading-techniques-bed1b810ab2c?gi=4057bbf9b8c5

Ideas

• Keep the tracks table always in the DOM and render the other pages on top of it? So that we can keep the loaded tracks and scroll position?

Get rid of remoteStorage warning

WARNING: please call remoteStorage.access.claim('/isotach/', 'r') (read only) or remoteStorage.access.claim('/isotach/', 'rw') (read/write) first

Add better mobile support

Todo:

• Fix favicons, remove transparent border (empty space)
• Indexeddb doesn't seem to work on mobile
• Safari version added to homescreen crashes

The name

Will be Isotach for the next few months, after that I'll think again about renaming it.

Suggestions:

• Tapes (based on my original idea Audiotapes)
• Soundstack

Improve indexedDB usage

At the moment we're using indexedDB, which works ok-ish, but every time we want to change something in the data structure the user loses his data and has the re-authenticate. This is because for indexedDB you have to define a database schema and for every change to this schema you have to write migrations to get from state A to B.

Currently, we don't write these migrations and that's why the user loses all of his/her data. Which obviously is a bummer, so we need to find a way to get around this.

Ideas

Store all of the user data as a JSON blob in the database

This sounds like a good idea, but seems like a non-trivial thing to do with indexedDB.

Add file upload

Loads of work to do for this one:

• Implement uploaders for each service
• Handle form uploading
• Handle file dropzones

IndexedDB resets (anonymous mode) out of nowhere

Which isn't supposed to happen.
I could be imagining things though 🤔
Everything seems to work fine for a day and then the next day the data is gone 🤦‍♂️

Add some free music on first login (ie. account creation)

Thanks for the great suggestion @expede!

http://freemusicarchive.org/
https://archive.org/details/audio

I also have some free music in my collection, but I'm not sure if I can use that. I mean, do I need some actual proof that these are "free"? ¯_(ツ)_/¯

Fix search

When you type in the search-text field, it stores the user's settings and that blocks the app if you have a lot of tracks.

Use web workers for storing data

Otherwise the browser hangs 🤦‍♂️

• Local
• RemoteStorage
• Blockstack

Related issues:

• stacks-archive/blockstack-storage-js#12

Bind ESC button to go back to the tracks view

Refactor authentication to not use native modules

Protip: Use a single port with an "object"

Audio visualisations

Idea:
Add peak meters, the left channel on the left and vice versa.
Add setting to disable.
Peak meters are hidden when the window is too small.

One possible look is the one from v1:
https://github.com/icidasset/ongaku-ryoho-v1/blob/master/app/assets/javascripts/application/views/visualizations_view.js.coffee

Much like ...

but then without colors (work with transparency), smaller bars (1 or 2 px) and vertical.

Other possible look is just a thin vertical line, left and right from the track list.
Similar to the style of the progress bar, but thinner.

Other idea:
Minimalist equivalent of loudspeakers animation.
https://img.buzzfeed.com/buzzfeed-static/static/2014-12/12/19/enhanced/webdr09/anigif_enhanced-27488-1418430525-2.gif?downsize=800:*&output-format=auto&output-quality=auto
http://www.netanimations.net/deep-blue-bass-speaker-thumping-pounding-vibrating.gif
https://img.buzzfeed.com/buzzfeed-static/static/2014-12/12/19/enhanced/webdr09/anigif_enhanced-27563-1418430720-3.gif?downsize=800:*&output-format=auto&output-quality=auto

https://www.youtube.com/watch?v=KAemN7spRfw

Show message when Blockstack opens in a new tab

... instead of just a loading indicator, which would be confusing in the case the new tab doesn't open.

mp3 files with a side data stream can't be added

While trying to figure out why some of my audio tracks weren't being imported into the OR track list, I noticed that the mp3 files that weren't be imported were the ones with an embedded side data stream (like album art). These mp3s play fine in the browser if accessed directly, but they seem to be getting filtered out while processing the sources.

I can provide an example if needed, but I hesitate to put a hash pointing to a copyrighted song in this GitHub issue.

Here's an example of a file that cannot be added (as seen by ffprobe):

Input #0, mp3, from '04 Blankets of Night.mp3':
  ...
  Duration: 00:07:59.74, start: 0.025056, bitrate: 259 kb/s
    Stream #0:0: Audio: mp3, 44100 Hz, stereo, s16p, 255 kb/s
    Metadata:
      encoder         : LAME3.97 
    Side data:
      replaygain: track gain - -6.900000, track peak - unknown, album gain - unknown, album peak - unknown, 
    Stream #0:1: Video: mjpeg, yuvj420p(pc, bt470bg/unknown/unknown), 600x600 [SAR 1:1 DAR 1:1], 90k tbr, 90k tbn, 90k tbc
    Metadata:
      comment         : Cover (front)

Here's an example of a file that can be added:

Input #0, mp3, from '01 Before the Storm.mp3':
  ...
  Duration: 00:01:09.09, start: 0.025057, bitrate: 320 kb/s
    Stream #0:0: Audio: mp3, 44100 Hz, stereo, s16p, 320 kb/s
    Metadata:
      encoder         : LAME3.93 

Storage errors should be notifications

To be done after #18

Show the authentication-method used in settings

Or somewhere else.

Tries to play missing favourites (when in fav-only mode)

Rewrite the JS bits in another (more stable) language

We currently can't do the following in Elm:

• Web Audio API
• Web workers
• LocalStorage
• ElasticSearch-like search
• Get info from music file via HTTP (jsmediatags)

So maybe we can:

1. Start writing "custom" Elm native code
2. Use another language that compiles to JS (eg. purescript)

Add drag n' drop to reorder queue items.

Resources:

• http://package.elm-lang.org/packages/ir4y/elm-dnd/latest

Electron integration

Basic electron version has been added + support for local files.

Still needs:

• Support for media keys

Add notifications

Using https://developer.mozilla.org/en/docs/Web/API/notification
or http://package.elm-lang.org/packages/pablen/toasty

Add a better processing indicator

Possibly something that's visible on all pages, or, a big block below the sources "info" in color. Either way, it should also be able to show you the progress.

Move away from native modules & elm-github-install

Try using just ports instead.

https://www.paramander.com/blog/using-ports-to-deal-with-files-in-elm-0-17

Add mobile touch events

For:

• The track's context menu
• The equalizer

Implement playlists.

Cannot process any music on iOS

Tested on the Chrome iOS client with a Amazon S3 source.

// XHR Generic error
// https://github.com/aadsm/jsmediatags/blob/master/src/XhrFileReader.js#L221
XHR.status = 0
XHR.readyState = 4

Most likely a CORS issue.

Which services should we integrate with?

💁 Suggestions are welcome!

Music storage

• Amazon S3
• Azure Blob Storage
• Azure File Storage
• Blockstack Gaia
• BTFS
• Dropbox
• Google Drive
• IPFS
• Local file system
• WebDAV

Maybe someday (if possible):

• Dat Protocol
• LBRY (not sure if possible)
• SeaFile
• Sia storage
• Soundcloud (not sure how this would work)
• Storj
• Torrents (streaming is difficult + CORS issues)
• Youtube (not sure how this would work)
• Wasabi

Cannot implement:

• One Drive
  Too much of a hassle, requires use of an iframe and doesn't allow CORS with the code flow (refresh-token flow). Using an iframe is currently impossible and would mean rewriting a large part of the app.

Authentication / Information storage

• Blockstack
• IndexedDB
• IPFS (v2)
• RemoteStorage
• Solid (postponed, not enough tooling yet)
• Textile (v2)

Volume control

I think a volume control would be handy.

I'm not sure if this is already planned, or if maybe there's an ideological opposition to volume controls (like Bandcamp's answer to "where's the volume control?").

Browser feature detection

In case the browser doesn't have a required feature.

Process sources on start up?

Yes or no? 🤔

Add audio normalizer

Loudness normalization (volume level) that is.

https://en.wikipedia.org/wiki/Audio_normalization#Loudness_normalization

More resources:

• https://community.spotify.com/t5/Live-Ideas/Desktop-Other-Improve-Spotify-s-volume-normalisation/idi-p/1128406
• https://en.wikipedia.org/wiki/LKFS
• https://webaudiotech.com/2016/01/21/should-your-web-audio-app-have-a-limiter/
• https://developers.google.com/web/updates/2017/12/audio-worklet
• https://developer.mozilla.org/en-US/docs/Web/API/DynamicsCompressorNode
• https://tonejs.github.io/docs/r11/Compressor
• https://github.com/pictomelody/FinalDemo/blob/91726e588858cfab70cbe3bac33a434dc51bbf23/pictoMelodyWebApp/static/js/tone/0.8.0/package/Tone/component/Compressor.js

On client side you could use webaudio dynamicsCompressorNode https://developer.mozilla.org/en-US/docs/Web/API/DynamicsCompressorNode. You could use this node to dynamically reduce the volume of the louder participant. And then you could add in a gain node to increase the total volume back up to a desired level (thus making the quiet speaker louder).

— https://groups.google.com/forum/#!topic/discuss-webrtc/apDrhJqjpj4

Currently playing track isn't always indicated

The now-playing state tends to dissapear when the tracks collection changes after a track's been inserted (ie. it's already playing). For example, start playing a track and then change the sorting method.

Handle more audio events

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

Sometimes the audio stops playing with no error message in the console and the whole app becomes unusable. No clue why though. Maybe handle the stalled event?

Disable serviceWorker in development

Or using a query param?

Importing does not actually store the data

... unless you do something after the import which triggers a data store.

RemoteStorage integration - please ping me

In working on a fork of RS.js to use SAFE Network (see maidsafe.net) as a backend and to test /demo that in gathering together as many RS compatible apps as I can. So would like to include o-r.

Please let me know (here) when you have a version working with RS. Thanks. Mark

Integrate "remoteStorage"

https://remotestorage.io/
https://github.com/remotestorage/remotestorage.js/
https://5apps.com/storage

Related to #12

Optimize fonts

• Create custom icon font for the two icons (favourite/heart icons) we use from the Material Icons set, as opposed to loading the entire thing. Note that this font is only used for those two icons, in the other places we use SVG because the browser renders fonts way faster.
• Place the Montserrat font in the project and don't load it from the Google CDN, so that it's available for offline use. Note: There may also be some other fonts (about page and stuff).

Improve source-processing performance

When the user has a large collection (ie. like my 10000 tracks collection) and the sources are processing, the app doesn't perform that well. After the processing is completed it works fine though.

Possible solutions:

• Move more stuff to web workers?
• Use an XML decoder with better performance?
• ...

Version that responds to Mac media keys

Will probably need electron or something for this.

Blockstack issue tracker

There are a few issues with the Blockstack integration:

• stacks-network/stacks-core#499
• hirosystems/stacks.js#236
• hirosystems/stacks.js#264 & hirosystems/stacks.js#531
• stacks-archive/blockstack-browser#631

And I'm also waiting on some updates in order to integrate Gaia (Blockstack's storage system) as a Source:

• stacks-network/stacks-core#500

Add more playlists features

• Add ability to reorder tracks in playlists with drag n' drop
• Add ability to select multiple tracks and add them to a playlist in one go (use Shift + click to select multiple)