Giter Club home page Giter Club logo

descent's Introduction

Descent

Deploy to GCP App Engine

Elegant now playing display for Last.fm showing song metadata and local weather.

Overview

Fetches now playing song information from Last.fm and displays album artwork along with local weather, time, and user info. Automatically hides the cursor after a few seconds of inactivity if the window is in focus.

Able to control colored Philips Hue lights based on prominent album art colors.

Usage

Ensure you have recent versions of Node.js and npm installed.

Run npm i -g yarn to install yarn. Next, run yarn global add gulp-cli and yarn to install Descent's dependencies. Finally, run gulp build to build Descent's static files, and yarn start to start Descent's server.

Descent's server listens on port 3000 by default, but this can be changed by setting the DESCENT_PORT environment variable. It's recommended to use a proxy, such as NGINX, in front of Descent's server.

Navigate to / to use Descent.

API Requirements

Weather

Weather is powered by the Dark Sky API, or the OpenWeatherMap API. To use either, you will need to provide an API key. For Dark Sky, set your key as the DARK_SKY_KEY environment variable. For OpenWeatherMap, set your key as the OPENWEATHERMAP_KEY environment variable.

Dark Sky will take precedence, and OpenWeatherMap will be used if no Dark Sky API key is provided, or if a Dark Sky API request fails. Dark Sky provides more detailed weather summaries, but the officialy-hosted Descent uses OpenWeatherMap to avoid fees.

For users to enable weather display, they must allow the Descent website to access their location. This feature relies on HTML5 geolocation, so it may only work in some modern browsers.

Spotify Images

Album cover and artist images and provided by the Spotify Web API. You will need to provide API authorization through a client ID and client secret assigned by Spotify. Set your client ID as the SPOTIFY_CLIENT environment variable, and your client secret as the SPOTIFY_SECRET environment variable.

Philips Hue Lights

Hue lights are controlled by the Philips Hue API. You must register an application to provide a few required values. Set your app ID as the HUE_ID environment variable, your client ID as the HUE_CLIENT environment variable, and your client secret as the HUE_SECRET environment variable.

Last.fm Rate Limiting

To avoid Last.fm rate limiting, you can adjust the API polling interval. Set the LASTFM_POLL_INTERVAL environment variable to an integer in milliseconds. The default is 10000 (10 seconds), but a more reasonable value could be 5000 (5 seconds). If API calls in the browser start failing, and playing data isn't loading, increase the interval.

User Preferences

Descent Configuration

To configure the background, weather, and time displays, visit /app/config. Dark Sky can automatically determine weather units, but OpenWeatherMap cannot, so Descent defaults to imperial units unless otherwise specified.

Descent Configuration Import

You can import settings through a POST request to /app/config/set. Each post parameter correponds to a cookie. Valid parameters and values are as follows:

Scrobble mode scrobbleMode: lastScrobbled, currentlyPlaying

Background type
background: artist, album, transparent, none

Background blurring
blur: true, false

Default background image
defaultBackground: any valid image URL

Weather location latitude
latitude: any valid latitude coordinate

Weather location longitude
longitude: any valid longitude coordinate

Weather units
units: imperial, metric

Date/time 24-hour display
24hr: true, false

Date/time weekday display
weekday: true, false

Date/time seconds display
seconds: true, false

User to redirect to
lastUser: any valid Last.fm username

Weather display enabled
weatherOn: true, false

Date/time display enabled
datetimeOn: true, false

Extended information display enabled
extendedOn: true, false

Phillips Hue Configuration

To enable Phillips Hue control, visit /app/hue and follow the setup instructions. Light colors will be set according to the three most prominent album art colors. If more than three lights are selected, the colors will be reused.

descent's People

Contributors

dependabot[bot] avatar jasonpuglisi avatar mdrxy avatar sprkweb avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

descent's Issues

Hue control not working

A while back, Hue updated their API and it doesn't seem to provide authentication tokens through this unofficial method anymore. Since their remote API isn't public (and probably won't be for a very very long time given their track record), we'll have to change to the local network API.

Album Artwork Content Doesn't load after spotify Adverts - Safari

while the text updates the pictures goes blank.
both the small and large dont load.

but only what seems to be an adverts, if a song is played and the next comes on the picture load fine, but if theres an advert inbetween they dont

when you refresh the page the pictures update.

A question - how to align to center

Hello, I have rather a question than issue.

Thanks for really great and neat product. I use it for long time.

On widescreen monitor, there is too much free space on right side, I would prefer to have image and title centered. Could you please advise me how to modify css file?

Thank you very much, Jan

Slideshow

I presuppose, this isn't the time for new ideas on Last.FM, especially in a situation of a seemingly stagnating development process where the whole world is waiting for tags, groups, bbc, about me, playlists and so on. But for later here my idea:
You be aware of the "Play Now" tool by Wagnaria. Ok, so far, so unspectacular. Now imagine, this old Last.FM tool was reinstalled and linked with the recent track list for full screen. And now we go one step further and imagine, instead of a static picture of the currently played track, we see a slideshow of the uploaded artists pictures on fullscreen you just listen to, stopable with f11 or whatever.

Zoom and shading of the background image

Hi Jason, I really like the unblurred artist image as background and think it still looks good. Would it be possible to choose our own zoom percentage and also the shading? I guess you zoom it to more than 200%, and most of time less might be still looking good as well showing more of the original artist image.

I use your tool on a 22" widescreen LCD monitor by Oracle/Sun with screen resolution set to 1680x1050 and 125% scaling which are the recommended Windows 10 settings. I hardly see any ugly pixeling in the background pictures, so making them brighter might work for me, too.

Last.fm rate limiting blocking requests

Just now I was getting some requests blocked by Last.fm. I'm going to increase the polling interval, but I'm not sure if that'll solve the problem long-term. Since everyone using this application is using the same API key, more concurrent users will likely mean more rate limiting issues.

Add cookie import page

User should be able to send a post request that would import a cookie for them then redirect to their user page. This would allow having custom settings on a brand new session without any user interaction (such as in cases where user action is impossible).

Add Option to enable "Idle Screensaver"

Assuming the concept here is for this to be displayed permanently on a wall mounted screen;
When no music is playing or scrobbling isn't working we currently get a black screen with the "There's nothing in the air" message.

Perhaps instead, the app could show facts from the specified user's Last.fm 'profile' page such as:
Top tracks
Hours of music listened to
Top albums
Top Artists etc...

With the background and album section cycling through related artwork?

Make mobile friendly

Especially with the new landing page, the app is not very mobile friendly. Though it's not really meant to be used on mobile, I won't stop people from doing so, so it should at least be usable.

Artist image not showing on some artists?

Hi, not sure why this might be but the artist image doesn't appear in the background for some artists, e.g. The Primitives and Taleen Kali, despite them having artist images uploaded. Is there a reason for this or is this a bug?

A question: Cover art for www.streamingsoundtracks.com

Hello!

Do you think you may like to create similar page to display art of streaming soundtrack at streamingsoundtracks.som? In the source code of main page, the ID code (asin) of current album is contained in link like "http://www.streamingsoundtracks.com/modules.php?name=Album&asin=B01EMCBULY" and then the image can be linked by the album ID as "http://www.streamingsoundtracks.com/images/cover/500/B01EMCBULY.jpg". The code changes every few minutes as soundtracks change.

I can display the cover art, but it is not that neat like your descent.

Thanks, Jan

Default picture while playing songs without album/artist image

sorry for my bad english
now while playing song which doesnt have artist and album images i just see previous artist image or gray screen
maybe could be better if currently playing song doesnt have picture which need be used for backgroud (album or artist, which user choose in settings) instead of gray screen (or previos artist image) there will be default picture like when user dont listen any music?

also i try to use this site for my desktop wallpapers trough wallpaper engine (just set url to page)
image

it looks cool but when currently playing song doesnt have images it looks empty >w>
image
sadly song name on right bottom not visible behind the windows menu (i know i can hide windows menu but i like to see it)

Add number of scrobbles

As a enhancement I would recommend this for any future improvements you might want to do.

The app's cool though, so thank you. ๐Ÿ˜„

Automatically changing the artist image?

Hi Jason, I noticed that the chosen artist image is the top voted image, but is it possible to change the artist image when the artist comes up again in a listening session or even while the track is still playing, like a slideshow? And being able to choose between blurred zoomed background image and original sized image in the settings would be nice as well, maybe also an option for album cover size.

By the way, I mentioned your latest update in related Get Satisfaction, Reddit and Spotify threads.

Select Hue group

It would be nice to be able to select a hue group.
Possibly the easiest solution would be to map the number keys, but some people have more than 10 groups.

Add additional options for date and time

A new section should be added to /now/app/config above Weather Units called Time and Date Options. This section should contain three boxes which can each be selected or not selected: 24-hour time, Show weekday, and Show seconds. By default, these should all be unselected, so the date and time display should look like this:

February 24, 2018
2:14 PM

Without 24-hour time selected, AM or PM is displayed, and there is no leading zero for single-digit hours. With all of these options selected, the date and time display should look like this:

Saturday, February 24, 2018
14:14:32

With 24-hour time selected, single-digit hours should be padded with a zero. Single-digit seconds should be padded with a zero in any case.

Switch from npm to yarn

This only affects dependency management. Yarn is backwards compatible with npm, but is preferred for this project.

Refactor Hue code

This is the only JavaScript I didn't refactor. I don't have my Hue setup with me right now, and I have no way of testing, so I'd rather leave the code alone.

Don't continuously update Hue while music isn't playing

With every Last.fm poll while music isn't playing, the application currently updates the colors of all Hue lights (to white). This results in a large amount of API calls.

The application should only update the lights once when it first sees music isn't playing, and leave them alone until music is playing again.

Ability to disable background

It would be noce to be possible to disable the background art, I plan to use this maybe for streaming and using this with a stream overlay would be really nice, maybe add some motion.
I will try to work on the background toggle or figure out how to get rid of it in OBS and make a PR.

Add time/date

Probably do this in the top left, maybe only with extended info enabled

Customization options and Spotify playing data

Thanks for the new version, looks very good on my Sony Bravia TV set (40" screen with 1280x768 resolution) as second monitor using it in full screen mode with 125% zoom in MS Edge. I like the switch to Spotify, as it uses different images than Last.fm which are interesting to watch in my opinion. Hopefully you can use their API for free in the future as well.

Two little changes would be nice to have: an option for the date to day/month/year sorting and a variable setting for the background shading if possible. For example I might prefer even 0% of shading on the new screen now or maybe only 20% with no blur.

I am noticing that releases of classical music might be incorrect due to the album that gets actually played by Spotify instead of what Last.fm assumes might be correct and/or the "main" album for that track. So would it be possible to get the Now Playing info directly from the Spotify API now that you take the pictures from there anyhow?

Add alternate weather API

The version I host of this is hitting its Dark Sky API usage limits almost every day, and I'm not really inclined to pay for more calls since I'm not making money off of this. I'll most likely switch this to the OpenWeatherMap API but leave the option to provide a Dark Sky key as a prioritized option.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.