diff --git a/dashboard-ui/css/chromecast.css b/dashboard-ui/css/chromecast.css new file mode 100644 index 0000000000..0abb57d684 --- /dev/null +++ b/dashboard-ui/css/chromecast.css @@ -0,0 +1,18 @@ +.btnCast { + width: 28px; + height: 28px; + padding: 0; + background-color: transparent; + border: 0; + background-size: 100%; + vertical-align: middle; + margin: 0 .6em; +} + +.btnDefaultCast { + background-image: url(images/chromecast/ic_notification_media_route.png); +} + +.btnActiveCast { + background-image: url(images/chromecast/ic_media_route_on_holo_dark.png); +} \ No newline at end of file diff --git a/dashboard-ui/css/images/chromecast/ic_media_route_disabled_holo_dark.png b/dashboard-ui/css/images/chromecast/ic_media_route_disabled_holo_dark.png new file mode 100644 index 0000000000..7b0c383a50 Binary files /dev/null and b/dashboard-ui/css/images/chromecast/ic_media_route_disabled_holo_dark.png differ diff --git a/dashboard-ui/css/images/chromecast/ic_media_route_disabled_holo_light.png b/dashboard-ui/css/images/chromecast/ic_media_route_disabled_holo_light.png new file mode 100644 index 0000000000..efb624e182 Binary files /dev/null and b/dashboard-ui/css/images/chromecast/ic_media_route_disabled_holo_light.png differ diff --git a/dashboard-ui/css/images/chromecast/ic_media_route_off_holo_dark.png b/dashboard-ui/css/images/chromecast/ic_media_route_off_holo_dark.png new file mode 100644 index 0000000000..5ee57e46a0 Binary files /dev/null and b/dashboard-ui/css/images/chromecast/ic_media_route_off_holo_dark.png differ diff --git a/dashboard-ui/css/images/chromecast/ic_media_route_off_holo_light.png b/dashboard-ui/css/images/chromecast/ic_media_route_off_holo_light.png new file mode 100644 index 0000000000..6bc2e4aa22 Binary files /dev/null and b/dashboard-ui/css/images/chromecast/ic_media_route_off_holo_light.png differ diff --git a/dashboard-ui/css/images/chromecast/ic_media_route_on_0_holo_dark.png b/dashboard-ui/css/images/chromecast/ic_media_route_on_0_holo_dark.png new file mode 100644 index 0000000000..c13af9c80a Binary files /dev/null and b/dashboard-ui/css/images/chromecast/ic_media_route_on_0_holo_dark.png differ diff --git a/dashboard-ui/css/images/chromecast/ic_media_route_on_0_holo_light.png b/dashboard-ui/css/images/chromecast/ic_media_route_on_0_holo_light.png new file mode 100644 index 0000000000..744fb42a66 Binary files /dev/null and b/dashboard-ui/css/images/chromecast/ic_media_route_on_0_holo_light.png differ diff --git a/dashboard-ui/css/images/chromecast/ic_media_route_on_1_holo_dark.png b/dashboard-ui/css/images/chromecast/ic_media_route_on_1_holo_dark.png new file mode 100644 index 0000000000..ca4d59c5b0 Binary files /dev/null and b/dashboard-ui/css/images/chromecast/ic_media_route_on_1_holo_dark.png differ diff --git a/dashboard-ui/css/images/chromecast/ic_media_route_on_1_holo_light.png b/dashboard-ui/css/images/chromecast/ic_media_route_on_1_holo_light.png new file mode 100644 index 0000000000..fde5688ad0 Binary files /dev/null and b/dashboard-ui/css/images/chromecast/ic_media_route_on_1_holo_light.png differ diff --git a/dashboard-ui/css/images/chromecast/ic_media_route_on_2_holo_dark.png b/dashboard-ui/css/images/chromecast/ic_media_route_on_2_holo_dark.png new file mode 100644 index 0000000000..b8715c39d3 Binary files /dev/null and b/dashboard-ui/css/images/chromecast/ic_media_route_on_2_holo_dark.png differ diff --git a/dashboard-ui/css/images/chromecast/ic_media_route_on_2_holo_light.png b/dashboard-ui/css/images/chromecast/ic_media_route_on_2_holo_light.png new file mode 100644 index 0000000000..668bb2510a Binary files /dev/null and b/dashboard-ui/css/images/chromecast/ic_media_route_on_2_holo_light.png differ diff --git a/dashboard-ui/css/images/chromecast/ic_media_route_on_holo_dark.png b/dashboard-ui/css/images/chromecast/ic_media_route_on_holo_dark.png new file mode 100644 index 0000000000..7f54a623dd Binary files /dev/null and b/dashboard-ui/css/images/chromecast/ic_media_route_on_holo_dark.png differ diff --git a/dashboard-ui/css/images/chromecast/ic_media_route_on_holo_light.png b/dashboard-ui/css/images/chromecast/ic_media_route_on_holo_light.png new file mode 100644 index 0000000000..2df924de1b Binary files /dev/null and b/dashboard-ui/css/images/chromecast/ic_media_route_on_holo_light.png differ diff --git a/dashboard-ui/css/images/chromecast/ic_notification_media_route.png b/dashboard-ui/css/images/chromecast/ic_notification_media_route.png new file mode 100644 index 0000000000..da1a627be5 Binary files /dev/null and b/dashboard-ui/css/images/chromecast/ic_notification_media_route.png differ diff --git a/dashboard-ui/scripts/chromecast.js b/dashboard-ui/scripts/chromecast.js index a9fe0991de..5b1c053609 100644 --- a/dashboard-ui/scripts/chromecast.js +++ b/dashboard-ui/scripts/chromecast.js @@ -82,7 +82,12 @@ */ CastPlayer.prototype.initializeCastPlayer = function () { + if (!chrome) { + return; + } + if (!chrome.cast || !chrome.cast.isAvailable) { + setTimeout(this.initializeCastPlayer.bind(this), 1000); return; } @@ -94,6 +99,8 @@ this.sessionListener.bind(this), this.receiverListener.bind(this)); + console.log('chrome.cast.initialize'); + chrome.cast.initialize(apiConfig, this.onInitSuccess.bind(this), this.onError.bind(this)); }; @@ -102,6 +109,7 @@ */ CastPlayer.prototype.onInitSuccess = function () { console.log("init success"); + $('.btnCast').show(); this.updateMediaControlUI(); }; @@ -110,6 +118,7 @@ */ CastPlayer.prototype.onError = function () { console.log("error"); + $('.btnCast').hide(); }; /** @@ -306,6 +315,36 @@ //this.updateDisplayMessage(); }; + /** + * Update media control UI components based on localPlayerState or castPlayerState + */ + CastPlayer.prototype.updateMediaControlUI = function() { + if (this.deviceState == DEVICE_STATE.ACTIVE) { + $('.btnCast').removeClass('btnDefaultCast').addClass('btnActiveCast'); + var playerState = this.castPlayerState; + } else { + $('.btnCast').removeClass('btnActiveCast').addClass('btnDefaultCast'); + var playerState = this.localPlayerState; + } + + switch (playerState) { + case PLAYER_STATE.LOADED: + case PLAYER_STATE.PLAYING: + //document.getElementById("play").style.display = 'none'; + //document.getElementById("pause").style.display = 'block'; + break; + case PLAYER_STATE.PAUSED: + case PLAYER_STATE.IDLE: + case PLAYER_STATE.LOADING: + case PLAYER_STATE.STOPPED: + //document.getElementById("play").style.display = 'block'; + //document.getElementById("pause").style.display = 'none'; + break; + default: + break; + } + }; + window.CastPlayer = CastPlayer; $(function() { diff --git a/dashboard-ui/scripts/librarymenu.js b/dashboard-ui/scripts/librarymenu.js index e2936cb895..806de6fd11 100644 --- a/dashboard-ui/scripts/librarymenu.js +++ b/dashboard-ui/scripts/librarymenu.js @@ -24,6 +24,8 @@ html += '
'; + html += ''; + html += ''; if (user.PrimaryImageTag) {