Current playing song for widget for Dashing

readme.md

Current playing song widget for Dashing

Preview

Usage

1. Add trackprogress.js to your javascript directory
2. Add widget code to a dashboard
3. Copy the html, coffee and scss file to a "playingsong" directory
4. Update the songtitle

Widget code

<li data-row="1" data-col="1" data-sizex="4" data-sizey="1">
    <div data-id="songtitle" data-view="Songtitle"></div>
    <i class="icon-music icon-background"></i>
</li>

Usage in our flower bot

HTTParty.post(Flower::Config.dashboard_widgets_url + "songtitle", body: {
      auth_token: Flower::Config.dashboard_auth_token,
      name:       current_track.name,
      artist:     current_track.artist,
      start:      0,
      length:     current_track.pointer.duration.to_i,
      image:      "data:image/jpg;base64," + Base64.encode64(current_track.album.cover.load.data)
    }.to_json)

songtitle.coffee

class Dashing.Songtitle extends Dashing.Widget
  timer = null
  @accessor 'displayTime',  ->
    time = @get('length')
    startInTrack = @get('start')
    if time
      timeInMs = time * 1000
      TrackProgress.timer.init({
        "barSelector" : "#track-progress",
        "timeSelector" : "#displayTime",
        "length" : time,
        "start" : startInTrack
      });

  @accessor 'upcomingTrack',  ->
    upcoming_track_name = @get('upcoming_track_name')

    if upcoming_track_name
      $(".upcoming").show()
    else
      $(".upcoming").hide()

  ready: ->
    # This is fired when the widget is done being rendered

  onData: (data) ->
    # Handle incoming data
    # You can access the html node of this widget with `@node`
    # Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.

songtitle.html

<div id="wrapper">
    <img data-bind-src="image">
    <h2 data-bind="name | truncate 35"></h2>
    <h3 data-bind="artist"></h3>
    <div class="progress"><span data-bind="displayTime" id="displayTime"></span><div id="track-progress" class="bar timer">&#160;</div></div>
    <div class="upcoming">
        <span class="upcoming-label">Next:</span>
        <span class="upcoming-track" data-bind="upcoming_track_name"></span>
        <span class="upcoming-artist" data-bind="upcoming_track_artist"></span>
    </div>
</div>
<div id="cover">
    <img data-bind-src="image" class="filter">
</div>

songtitle.scss

.widget-songtitle {
	background-color:#222;
	overflow:hidden;
	padding:0 !important;
	#cover{
		position:absolute;
		top:0;
		left: 0;
		width: 100%;
		z-index: 1;
		max-height: 100%;
		overflow: hidden;
		img.filter{
			margin-top:-40%;
			-webkit-filter: blur(100px);
			width:1600px; /*data image is 300x300px as default*/
		}
	}
	#wrapper{
		height: 100%;
		z-index: 2;
		padding:30px;
		position: relative;
		background-color:rgba(0,0,0,0.5);
		img{
			border:2px solid rgba(255,255,255,.2);
			float:left;
			margin-top: 10px;
			height: 180px;
			width: 180px;
			margin-left: 10px;
		}
	}
	h2 {
		text-transform: none;
    	display: inline;
    	font-weight: 100;
    	font-size: 40px;
    }
    h3{
    	font-weight: 300;
    }
	.upcoming{
		span{
			font-size: 20px;
			display: inline-block;
			&.label{
				font-weight: bold;
			}
		}
	}
	.progress{
		margin:15px 30px;
		width: 500px;
		display: inline-block;
		line-height: 32px;
		text-align: right;
		background:rgba(255,255,255,.15);
		border:1px solid rgba(255,255,255,.1);
		border-radius:5px;
		overflow: hidden;
		.bar{
			border-radius:5px;
			width:0%;
			&.timer{
				background:rgba(0,0,0,0.3);
				max-width: 100%;
			}
		}
		span{
			float: right;
			bottom: 0;
			display: inline-block;
			margin-right: 10px;
		}
	}
}

trackprogress.js

/*global jQuery:true, TrackProgress:true, document:true, window:true */
var TrackProgress = {};

TrackProgress.timer = (function($){
    var _barElement = null,
        _trackLength = 0,
        _trackStart = 0,
        _interval = 500,
        _trackStartTime,
        _trackEndTime,
        _timer;

    var updateTimer = function(){
        var trackPosition = new Date();
        var playedTime = trackPosition - _trackStartTime;

        // Set the progress
        var playedTimeInPercent = (playedTime / _trackLength) * 100;
        playedTimeInPercent = playedTimeInPercent > 100 ? 100 : playedTimeInPercent;
        if (playedTimeInPercent <= 100 ){
            _barElement.css("width",playedTimeInPercent +"%");
            var timeLeft = _trackEndTime - trackPosition;
            timeLeft = timeLeft < 0 ? 0 : timeLeft;
            _timeElement.html(formatTime(timeLeft));
        }

        if(playedTimeInPercent >= 100){
            window.clearTimeout(_timer);
        }else{
            _timer = window.setTimeout(function(){
                updateTimer();
            },_interval);
        }
    };

    var formatTime = function(timeInMs){
        var time = timeInMs / 1000;
        var minutes = Math.floor(time / 60);
        time -= minutes * 60;
        var seconds = parseInt(time % 60, 10);
        if(seconds < 10){
            seconds = "0" + seconds;
        }
        return minutes +":"+ seconds;
    };

    return{
        init: function(settings){
            _trackLength = parseInt(settings.length) * 1000;
            _trackStart = parseInt(settings.start) * 1000;

            _barElement = $(settings.barSelector);
            _timeElement = $(settings.timeSelector);

            var current = new Date();
            _trackStartTime = new Date(current.getTime() - _trackStart);
            _trackEndTime = new Date(_trackStartTime.getTime() + _trackLength);

            updateTimer();
        }
    };
})(jQuery);