zachwinter / kaleidosync Goto Github PK

i got it running locally using yarn and the commit f9ae8e6d. by navigating the site i found out that he still has the beta version hosted.

When in browser and you enter full screen mode, the browser toolbar and open tabs are still visible. Is it possible to add an Expand button < > or [ ] to enter a full screen mode that will take up the entire screen with the visualizer?

V6 is not runnable locally, due to shaders being stored in database. Would be nice to at least publish couple of shaders, so play around

The title "Kaleidosync" disappers and the URL appears after logging in.

Kaleidosync doesn't show up on Spotify devices list after login. Tried on Chrome and Firefox, xubuntu 20.04 and Safari and Google, iOS 15.
Beta on herokuapp.com does work.

You can see this very easily using the kaleidoscope visualization and having the star radii being driven by the segments and setting the volume queue to use a smoothing of 120 or even higher. I noticed this because I was scaling the smoothing factor by the dancibility rating of the song from Spotify's track features endpoint so that less dancey songs had slower moving animations

The animation will lag behind the actual beat. This is happening because you are smoothing only from the past so essentially the animation will always be delayed by the smoothing factor.

To fix this I stored half the value of the currently active smoothing factor when the call is made to get the volume. Then this value is used as a lookAhead value so that the volumes you are getting are always the current and next volumes, but ahead by half the smoothing factor. This realigns the animation back in sync, but keeping the smoothing capability intact.

On Opera GX, the site seems to be running at 1-2fps, and it eats my entire CPU. Running on Chrome on the same device it seems to run just as intended.

This looks really good on my fire TV stick but when I open the settings for the kaleidosync I can tick and untick options but then I cannot click either the save or cancel button.

Great app, I love it.

I was wondering why your current track is only fetched at the end of your current track.
Is there a reason why it isn't fetched periodically more frequently to accommodate the fact that people might skip tracks?
I have seen similar behaviour in other visualizer so I don't think it's a matter of the Spotify API rate limit.

I would love to integrate this myself into your code, but I haven't had the chance to take a deep dive into it (yet).

If the app cant get a valid audio analysis from Spotify (504 error/network error) it throws an unhandled premise rejection which then causes the app to stop working. It no longer refreshes the player stats from Spotify nor reattempts to get the audio analysis.

This is fixed by refreshing but can become a nuisance if trying to use it on a projector/tv in an hands off environment.

I know you're auto-magically pulling the data via NEST's already doing the math, and I see where you are declaring the colorSchemes, but maybe allow for dynamic user input to pick a scheme (or picker of schemes). For example, I'm hooking this up to a Philips Hue Sync app and showing lights, so the darker more vibrant (i.e. less white) is better for what I want. Would be a cool feature.

Makes me almost want to run this myself to edit the schemes ;)

You missed in the npm run build script in the steps

Also detection if port 8001 is already in use would be really usefullndluf ( I have plenty dev server running)

If help is I welcome will gladly throew a few of my hours of experience (TS,node,express,angular,wepack) at this project

Anotación 2020-04-16 184403

The site is keeping the scrollbar constantly visible.
I've managed to temporarily turn it off by adding "overflow-y: hidden;" under the overflow-x in the div

Without knowing more the reasoning behind the requested permissions, I find too much is being requested for authorization.

Can you provide the reasoning and try to limit the scope?

First off, thank you for writing this so clean. It was a joy to poke around and explore how everything worked. It took some effort to swap out the proprietary components for the free ones, but in the end, I got it.¹

I managed to get it running locally, using my own Spotify API keys and so on (including swapping out FontAwesome for the free versions, so that it could compile). As I was tweaking the parameters around a bit, I discovered that when the music is less rhythmic (i.e. rubato), using the sections or segments beat intervals sometimes gave the visualization a bit more "life" (i.e. "awareness"). The beats and (to a lesser degree) tatums intervals don't quite fit when the song doesn't have a definite beat to begin with. Just a thought. Perhaps instead of toggling back and forth with b, it could cycle through them?

TL;DR:

-const beatInterval = setting('beatInterval', 'beats', types.enum(['beats', 'tatums']));
+const beatInterval = setting('beatInterval', 'beats', types.enum(['bars', 'beats', 'sections', 'segments', 'tatums']));

I don't love the new system to control Kaleidosync as a "device" through the Spotify "now playing" app, but if that's something you're set on, at least give me the option to control the volume in the browser so I don't have to mess with all my other PC settings when I want to use Kaleidosync.

I cannot get Kaleidosync to show up in the "Connect to Device" section.

I tried to use Kaleidosync on multiple Browsers (Firefox, Edge, Brave), all of them do not work :(
If i start the Spotify Webplayer on those Browsers, they immediately show up on the "Connect to device" section. I tried to "see" the Kaleidosync "Device" in the Desktop App (non-Windows Store Version), iOS App and on the Web Player.

Any Ideas? :'D

I love the idea of app but this latest version causes my system to lag like no other. As soon as I open a visualization my CPU utilization hits 90% making this app unusable for me.

Here is a screenshot of my system running Spotify and Chrome:

And another of my system running Spotify and Chrome but with Kaleidosync running:

The utilization dips immediately if I navigate to a different tab without Kaleidosync running or if I close it.

It would be great to have synced lyrics with these visuals like the old Winamp + Minilyrics days. Throwing out the idea here and I'm willing to work on it if you have some pointers to start with.

I click authorize on spotify and it takes me back to this url https://www.kaleidosync.com/api/auth/login and just says "Page not found"

Using windows 10 and firefox

Hi,

I'm trying to install versions prior to V6 (I'd like to self-host). I'm getting errors on "npm install".

Do you know of any reasons why I'm having issues installing previous versions?

Thank you!

Error: Failed to replace env in config: ${FONT_AWESOME}
    at /usr/local/lib/node_modules/npm/lib/config/core.js:415:13
    at String.replace (<anonymous>)
    at envReplace (/usr/local/lib/node_modules/npm/lib/config/core.js:411:12)
    at parseField (/usr/local/lib/node_modules/npm/lib/config/core.js:389:7)
    at /usr/local/lib/node_modules/npm/lib/config/core.js:330:24
    at Array.forEach (<anonymous>)
    at Conf.add (/usr/local/lib/node_modules/npm/lib/config/core.js:328:23)
    at ConfigChain.addString (/usr/local/lib/node_modules/npm/node_modules/config-chain/index.js:244:8)
    at Conf.<anonymous> (/usr/local/lib/node_modules/npm/lib/config/core.js:316:10)
    at /usr/local/lib/node_modules/npm/node_modules/graceful-fs/graceful-fs.js:115:16
/usr/local/lib/node_modules/npm/lib/npm.js:59
      throw new Error('npm.load() required')
      ^

Error: npm.load() required
    at Object.get (/usr/local/lib/node_modules/npm/lib/npm.js:59:13)
    at process.errorHandler (/usr/local/lib/node_modules/npm/lib/utils/error-handler.js:205:32)
    at process.emit (events.js:310:20)
    at process._fatalException (internal/process/execution.js:164:25)

Heya! I want to run it on my website! IT's hosted with apache.

Tried to move (to my hosting) and oppening it up on web browser but can't get it working :( How did you managed to get it up and running?

It would be awesome to have the lyrics pulled in from Genius when fullscreen through Kaleidosync to karaoke.

Steps to reproduce the issue:

1. Clone repo
2. Create '.env' while replacing client_id and redirect_uri
3. Run 'npm i'
4. Run 'npm run serve'
5. localhost page is blank except for "Illegal_redirect_uri"
6. go to login.js and manually change the client id and redirect uri
7. Login page shows up, then "Session expired, logging back in", then the page "http://localhost:8080/undefined/login?auth_id=undefined", which is blank.

Any help?

Hey,

I'd love if there was a way to display the currently playing song name, artist & cover art overlayed in the corner of the visualiser. It already exists but sadly it auto hides itself, maybe you could add an option to keep that info displayed permanently?

I'm happy to create a fork and see if I can get this made if you show me how to compile :)

An additional suggestion, piggybacking off of the mouse request, when moving the cursor over the visualizer is it possible to display the song and band name of the track currently playing? It could then go away after 5 seconds of the mouse/trackpad not being disturbed.

Kalydosync is not loading. When I press sign in to Spotify, it says it is loading, but then it loads forever. How can I fix this?

Seems like syncing anything to visuals is against Spotify's ToS?

Section III, bullet 6: https://developer.spotify.com/policy/#iii-some-prohibited-applications

Cool site though!

When I try to open the visualiser at kaleidosync.com, there's an application error.

Is this fixable? Would love to see and try out your project! :)

Recurring error :

text "Syncing..." appears, then after 2s the text vanish, the artwork of the playing song is not displayed and the animation stays frozen. After refreshing the page the problem is usually solved but it tends to happen a lot.

console log

"jQuery.Deferred exception: e.metadata is undefined a@moz-extension://a7a897c3-c193-994e-88c0-9dc1116fcae4/h1-main.js:1:144384
[153]/h/<@moz-extension://a7a897c3-c193-994e-88c0-9dc1116fcae4/h1-main.js:1:142139
l@moz-extension://a7a897c3-c193-994e-88c0-9dc1116fcae4/h1-vendor.js:48:25138
Deferred/then/i/</c<@moz-extension://a7a897c3-c193-994e-88c0-9dc1116fcae4/h1-vendor.js:48:25454
undefined"

-- EDIT : screenshot

It's a neat piece of kit, but it doesn't work with dual monitors opening two instances seems to not recognize that Spotify is already playing

Hey Zach, you made an awesome visualizer, thumbs up for that!
I reached out to you via mail, would love to get an answer to figure out potential options for commercial use of your shaders.
Best Marvin

Hide the mouse when isn't moving, so it doesn't disturb.

Could we add the feature to save settings to localstorage?

When I am playing Spotify if there is an ad I have to completely reload the page because it locks up. Not a huge issue just frustrating.

Hey,
I want to get this working locally.
You mentioned in the readme that I couldn't as you have some unpublished shader auth tools. Any chance you can guide me through that?

After the page is refreshed, the settings revert back to default. Would be nice to save this info in local storage or cookies or maybe allow some url arguments so you can go directly to the page with all your settings already set.

the controls don't appear to be stopping, pause, play, next, back.

Is this a limitation of the free account?

Nice work though

I'd like the currently-playing song to stay on the screen, and that is kinda implied by disabling the "auto-hide toolbar" option? But it still goes away.

Thought this would be a cool feature

One way to avoid polling the playback state is to create a Spotify web player in the browser window.
Anytime the playback state is adjusted by the user, the object updates immediately. I believe it doesn't even need to make an API call.
The catch is that users may need Spotify premium to use this functionality.

Let me know if this makes sense and if you'd like any help

Hey there,
nobody asked for it but I'd like to give my two cents to the change made in commit bdfb0ee:

First off, let me say that I love this application! Really great work and some nice visualizations.

I'm actually using kaleidosync as a background for my live streams while music is playing. Now, because it's embedded as a Browser source, there isn't a really convenient way to interact with the site on demand and it just doesn't look that clean if I am clicking around. Before this commit, I could skip a song and the visualizer would adapt to this change (also pause and resume some time later). Since I also work with the Spotify API for another piece of software, I know that there are some limitations in terms of rate limiting which is a problem when one instance of the application is used heavily (which I assume is the case for the main website).

As you're sharing the code for this beautiful piece of software on GitHub (thank you btw) and therefore enable us to install it on our own servers (which shouldn't have that amount of traffic), I think that it would be beneficial to have an option that reverts back to the original behavior.

I understand that it's not really a priority and I am probably part of only a handful of people which would benefit from this change, but maybe it is something you'll consider.

Keep up the great work

Hi.. firsty, i love this proyect!!!!

I would like using it as streaming background.

virtual cameras let me pass a URL as background...
but when passing [https://www.kaleidosync.com/visualizer] it's displayed the "welcome screen"

So it would be nice to pass some id via URL, to link to my profile (and hide instructions)

Greetings!