cast dialog element
HTML
Latest commit 00d03df Mar 11, 2016 @entertailion entertailion Update README.md
Permalink
Failed to load latest commit information.
.gitignore
LICENSE
README.md
bower.json
cast-dialog.html
demo.html

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-dialog

The cast-dialog element serves as a dialog to notify the user of two things.

  • The page is cast enabled
  • The upcoming video if it exists in queue

A demo of the cast dialog in use can be found here. Along with it's source here.

Overview

cast-dialog observes cast-manager's castAvailable property to determine if a receiver device is available. If one is it automatically displays the cast_enabled dialog.

To display the preload message, set countdownToNextMediaItem to not null and nextQueueMediaItem to a cast.Mediaitem.

The preload message hides when a mediaLoaded or hideDialog iron event is fired.

Setup

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

bower install --save googlecast/cast-dialog-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-dialog-polymer/cast-dialog.html">

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-top - distance from top of the screen
  • --position-right - distance from the right side of the screen

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

Example:

<style>
  cast-dialog {
    --position-top: 100px;
    --position-right: 5%;
  }
</style>  

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.