Google Cast Receiver Bootstrap Plugin

This plugin is a simple jQuery plugin that binds to an existing Bootstrap button dropdown and populates it with all available Google Cast receivers.

Usage

• Download the file here: jquery.castReceiverList.js

Basic Initialization

Assuming HTML of

<div class="btn-group" id="cast-list">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="selectedReceiver">Choose a receiver...</span> <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu"></ul>
</div>

your initialization will look like:

var YOUR_APP_ID = "your_cast_app_id_from_google";
var cast_api = new cast.Api();

$("#cast-list").castReceiverList({
    api : cast_api,
    appId : YOUR_APP_ID,
    onSelect : function(receiver) {}
});

The jQuery selector must be to the .btn-group for the button dropdown.

Options

During initialization, the following options are available:

Property	Required?	Type	Description
api	Yes	cast.Api	Reference to your cast.Api object
appId	Yes	string	Value of your Cast App ID
onSelect	No	function	Callback function that will receive as its sole argument the cast.Receiver that was selected

If you have an element with class selectedReceiver in the dropdown button, that value will automatically be replaced with the selected receivers name.

Example Usage

var APP_ID = "some-app-id";
var selectedReceiver = null;
$(".receiverSelectedOptions").hide();

initializeApi = function() {
  var cast_api = new cast.Api();
  $("#cast-list").castReceiverList({
    api: cast_api,
    appId : APP_ID,
    onSelect : function(receiver) {
      selectedReceiver = receiver;
      $(".receiverSelectedOptions").show();
    }
  });
};