Youtube Dashing widget

README.md

Description

Dashing widget to play video from Youtube.

Installation

1. Install Youtube widget

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

Otherwise you can install this plugin typing:

dashing install GIST_ID

2. Download JQuery TubePlayer plugin and put jquery.tubeplayer.min.js in your /assets/javascripts directory. It gets included automatically.

3. Download SWFObject and put swfobject.js in your /assets/javascripts directory. It gets included automatically.

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

<div class="gridster">
    <ul>
      ...
    </ul>
    <span data-id="youtube" data-view="Youtube" data-title="youtube" style="padding: 0px"></span>
</div>

5. 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

6. If you are using Wavegirls widget, do not forget to add 'youtube' 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 youtube widget.

API

== /api/youtube/show?url={url} - show video or put it on the playlist if another video is already playing

• url - youtube video link

Example:

curl 'http://localhost:3030/api/youtube/show?url=http%3A//www.youtube.com/watch%3Fv%3D1iWiCen1qlE'

== /api/youtube/next - play next video

Example:

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

== /api/youtube/pause - pause play

Example:

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

== /api/youtube/play - resume play

Example:

curl 'http://localhost:3030/api/youtube/play'

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

Example:

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

== /api/youtube/mute - mute video

Example:

curl 'http://localhost:3030/api/youtube/mute'

== /api/youtube/unmute - unmute video

Example:

curl 'http://localhost:3030/api/youtube/unmute'

youtube.coffee

class Dashing.Youtube extends Dashing.Widget

  ready: ->
    @player = false
    @playerScreen = $(@node).find(".youtube-container")
    @video_queue = []

  onData: (data) ->
    command = data['command']
    if data.hasOwnProperty('url')
      video_id = @getVideoId(data['url'])
    if video_id
      @video_queue[@video_queue.length] = video_id
      if !@player
        @prepareScreen()
        @showNextVideo()
    else if @player && @validStraightCommand(command)
      @player.tubeplayer command
      @destroyPlayer() if command == 'stop'
    else if @player && command == 'next'
      @showNextVideo()

  validStraightCommand: (command) ->
    valid_commands = ['play', 'pause', 'stop', 'mute', 'unmute']
    return valid_commands.indexOf(command) != -1

  clearQueue: () ->
    @video_queue = []

  destroyPlayer: () ->
    @clearQueue()
    @player.tubeplayer 'destroy'
    @player = false
    @playerScreen.fadeOut()


  getVideoId: (url) ->
    return null  if url.indexOf("?") is -1
    query = decodeURI(url).split("?")[1]
    params = query.split("&")
    i = 0
    l = params.length
    while i < l
      return params[i].replace("v=", "")  if params[i].indexOf("v=") is 0
      i++
    null

  prepareScreen: =>
    @playerScreen.detach()
    $('body').append @playerScreen
    @playerScreen.css
      width: $(window).width()
      height: $(window).height()
    @playerScreen.fadeIn()

  hideScreen: =>
    @playerScreen.fadeOut()

  showNextVideo: =>
    if @video_queue.length > 0
      @video_id = @video_queue.shift()
      if !@player
        @player = $("#youtubeplayer").tubeplayer
          width: $(window).width()
          height: $(window).height()
          initialVideo: @video_id
          autoPlay: true
          theme: "dark"
          showControls: false
          onPlayerEnded: =>
            @showNextVideo()
          onErrorNotFound: =>
            @showNextVideo()
          onErrorNotEmbeddable: =>
            @showNextVideo()
          onErrorInvalidParameter: =>
            @showNextVideo()
      else
        @player.tubeplayer 'play', @video_id
    else
      @player.tubeplayer 'destroy'
      @player = false
      @playerScreen.fadeOut()

youtube.html

<div class="youtube-container">
  <div id="youtubeplayer">
  </div>
</div>

youtube.scss

// ----------------------------------------------------------------------------
// Widget-youtube styles
// ----------------------------------------------------------------------------
.youtube-container{
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 100;
  display: none;
}

Do you have an example .rb file of this??

I'm pretty new to ruby and dashing and would like to know how I can get a video on my dashboard.

Can you disable annotations from this?

FYI, I wanted to have the widget not just stop after the last video, so I made it store the entire playlist into another array and then if the video queue goes to zero it will randomly select a video from the previous playlist. To do this I replaced the last three lines with this

@rand = @full_queue[Math.floor(Math.random() * @full_queue.length)];
@player.tubeplayer 'play', @rand

I initialize @rand and @full_queue after L6 as:

@full_queue = []
@rand = ''

Then I add the video id to the @full_queue array with a line below L13 like this

@full_queue.push video_id

so how can you make youtube display in a block inside dashing instead of full screen?