Reusable cast player control bar. Automatically hides and displays based on local/cast media content.
HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore updating cast controller bar for polymer 1.0 Sep 9, 2015
README.md
bower.json
cast-controller-bar.html
cast-controller-element.html
cast-queue-element.html
cast-queue.html
demo.html fixing updated slider issue Sep 9, 2015

README.md

Copyright 2014 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

cast-controller-bar

This element represents the cast controller bar that appears when a user navigates away from the currently casting video and the queue UI. By default it's pinned to the bottom of the page.

Here is the sample showcasing
cast-controller-bar. The repo for the sample source is here.

Overview

cast-controller-bar manages both the cast-controller-element and cast-queue. It observes the current state of the app and listens for iron events then shows, hides, minimizes or maximizes the appropriate element. cast-manager is required. This element stays pinned to the bottom of the window.

The queue element cast-queue peeks when the queue is modified. You can toggle the display mode with cast-manager's toggleQueueElement method. Mousing over the queue element will expand it allowing you to interact with the queue. The queue supports jumping to a specific item, deletion, drag and drop reordering, changing shuffle and changing repeat mode.

The cast-controller-element controls casting media when the in media controls are off screen.
cast-controller-bar tracks the position of the video element bottom and the scrolling element scrollTop then shows cast-controller-element when scrollTop > bottom. From the controller element, you can play, pause, seek, control volume, toggle the queue and disconnect cast.

Setup

Use Bower to include the cast-controller-bar in your web app. The following command will add cast-controller-bar and it's dependencies to your project.

bower install --save googlecast/cast-controller-bar-polymer

Integration

You'll need to first include Polymer.

Including the element

In your html include the element.

<link rel="import"
    href="bower_components/cast-controller-bar-polymer/cast-controller-bar.html">

Add the element to your as a child of cast-manager and bind to the cast-manager properties.
You'll need to pass in the id of the video element and the id of the scrolling element as video-element and scroll-element respectively.

<cast-controller-bar volume="[[volume]]"
         local-media="[[localMedia]]"
         cast-available="[[castAvailable]]"
         connection-status="[[connectionStatus]]"
         has-cast-media="[[hasCastMedia]]"
         cast-device-name="[[castDeviceName]]"
         current-time="[[currentTime]]"
         video-element="video"
         scroll-element="body"></cast-controller-bar>

Options

Themeing

You can quickly update the theme of your Cast Polymer elements by modifying the cast-theme element under bower_components in your project.

Position

The position can be modified by defining four CSS variables:

  • --position-bottom - distance from bottom of the screen
  • --position-left - distance from the left side of the screen
  • --margin-left - starting left margin default of 5%
  • --margin-right - starting right margin default of 5%

If you're defining style in the main document, you can use the custom-style element

Example:

<style>
  cast-controller-bar {
    --position-bottom: 0;
    --position-left: 0;
  }
</style>  

Maximized width

By default the maximized width is 90%. You can update the max-width property to change the maximized width.

<cast-controller-bar
  ...
  max-width=".7"
  ...></cast-controller-bar>

Disabling queue UI

If you do not want to enable the queue UI, you can set the queue-enabled property as false.

<cast-controller-bar
  ...
  queue-enabled="false"
  ...></cast-controller-bar>

Terms

Your use of this sample is subject to, and by using or downloading the sample files you agree to comply with, the Google APIs Terms of Service and the Google Cast SDK Additional Developer Terms of Service.