README.md

Music Player

Description

Dashing widget to play music. Awesome, right?!

A bit of a history. When we installed the Github's hubot, one of the things we were really miss was playing songs inside our room (not the whole office). The guys from Github have written play, but we just couldn't setup it (we didn't have Mac Mini at that moment - our CI monitors were backed by Ubuntu). So we started looking for another way out and decided to write Dashing widget and control it via hubot.

Installation

1. Install Player widget

The files player.coffee, player.html and player.scss go in the /widget/player directory.

Otherwise you can install this plugin typing:

dashing install GIST_ID

2. Download JPlayer and put jquery.jplayer.js in your /assets/javascripts directory. It gets included automatically.

3. Add the #player div after gridster div/ul element in your dashingboard.erb file:

<div class="gridster">
    <ul>
      ...
    </ul>
    <div data-id="player" data-view="Player" data-title="player" data-min="0" data-max="100"></div>
</div>

4. Dashing API

To be able to communicate with the widget we need an API (reasons explained below). Add this block to config.ru after configure section:

get '/api/:widget/:command' do
    widget = params[:widget]
    send_event(widget, params)

    200
end

5. If you are using Wavegirls widget, do not forget to add 'player' to excluded_dash_ids (see additional configuration section for details).

Usage

Note: if you are using Github's Hubot, take a look at this script. It provides hubot commands to control player widget.

API

== /api/player/play?url={url}&title={title} - play song or put it on the playlist if another song is already playing

• url - direct link to mp3
• title - song title

Example:

curl 'http://localhost:3030/api/player/play?url=http%3A//dl32.musload.com/loads/dlhash1/m05/h20/f630ba5ee4ff35cdc4416011291fcdad.mp3&title=Daughter%20-%20Get%20Lucky%20%28Daft%20Punk%20Cover%29'

== /api/player/next - play next song

Example:

curl 'http://localhost:3030/api/player/next'

== /api/player/pause - pause play

Example:

curl 'http://localhost:3030/api/player/pause'

== /api/player/resume - resume play

Example:

curl 'http://localhost:3030/api/player/resume'

== /api/player/stop - stop playing and clear playlist

Example:

curl 'http://localhost:3030/api/player/stop'

== /api/player/volume?value={value} - set player volume to value (0.0..1.0)

Example:

curl 'http://localhost:3030/api/player/volume?value=0.5'

player.coffee

class Dashing.Player extends Dashing.Widget

  ready: ->
    @current_volume = 1.0
    @urls = []
    @title = ""
    @player_container = $("#player-container").jPlayer({
      swfPath: ''
      supplied: 'mp3'
      cssSelectorAncestor: '#jp_container_1'
      cssSelector:
        seekBar: '.jp-seek-bar'
        playBar: '.jp-play-bar'
        currentTime: '.jp-current-time'
        duration: '.jp-duration'
      ended: =>
        @urls.shift()
        if @urls.length > 0
          track = @urls[0]
          @play(@urls[0].url)
        else
          @stop()
    })

  play: (file) ->
    $("#player-container").jPlayer('setMedia', {mp3: file}).jPlayer('play')
    @show_titles()

  stop: () ->
    $("#player-container").jPlayer('stop')
    $("#player-container").jPlayer('clearMedia')
    @urls = []
    @show_titles()

  show_titles: ->
    current = @urls[0]
    next = @urls[1] if @urls[1]

    if current
      $("#jp_container_1").find('.prev').html(current.title)
    else
      $("#jp_container_1").find('.prev').html("")

    if next
      $("#jp_container_1").find('.next').html(next.title)
    else
      $("#jp_container_1").find('.next').html("")

  setup_volume: (target) ->
    return false if Math.abs(@current_volume - target) < 0.09
    step = 0.05
    if (@current_volume - target) < 0
      @current_volume += step
    else
      @current_volume -= step

    $("#player-container").jPlayer('volume', @current_volume)
    setTimeout(
      => @setup_volume(target)
      100
    )

  volume: (value) ->
    return false if value < 0 && value > 1
    @setup_volume(value)

  pause = () ->
    $("#player-container").jPlayer('pause')

  resume = () ->
    $("#player-container").jPlayer('play')

  next: () ->
    @urls.shift()
    if @urls.length > 0
      @play(@urls[0].url)
    else
      @stop()

  onData: (data) ->
    command = @get('command')
    switch command
      when 'play'
        title = @get('title')
        file = @get('url')
        @urls.push({url: file, title: title})
        if @urls.length == 1
          @play(file)
        else
          @show_titles()
      when 'stop'
        @stop()
      when 'volume'
        value = @get('value')
        @volume(value)
      when 'pause'
        pause()
      when 'resume'
        resume()
      when 'next'
        @next()

player.html

<div id="player-container" class="cp-jplayer">
</div>
<div id="jp_container_1" class="jp-audio">
  <div class="jp-progress">
    <div class="jp-seek-bar">
      <div class="jp-play-bar"></div>
    </div>
  </div>
  <div class="jp-title">
    <span class="prev"></span>
    <span class="next"></span>
  </div>
</div>

player.scss

// ----------------------------------------------------------------------------
// Widget-player styles
// ----------------------------------------------------------------------------
.jp-progress {
  height: 10px;
  margin-bottom: 10px;
  .jp-seek-bar {
    background-color: #333;
    height: 100%;
  }
  .jp-play-bar {
    background-color: #ccc; 
    height: 100%;
  }
}
.jp-title {
  text-align: left;
  font-size: 36px;
  overflow: hidden;
  .prev {
    float: left;
  }
  .next {
    float: right;
  }
}