add style and script to play videos in a shadowbox
anytime that a link appears in the page with class "video-shadowbox-button"
the link must also have the youtube video set in the href with the ?v parameter
Change-Id: I4af84f003075b8d2c43acd3295ce3955b141cc97
diff --git a/tools/droiddoc/templates-sdk/assets/css/default.css b/tools/droiddoc/templates-sdk/assets/css/default.css
index 8cfb45d..23a800f 100644
--- a/tools/droiddoc/templates-sdk/assets/css/default.css
+++ b/tools/droiddoc/templates-sdk/assets/css/default.css
@@ -6955,30 +6955,67 @@
}
#video-frame {
- width:940px;
- height:526.4px;
- margin:80px auto 0;
+ width:948px;
+ height:529px;
+ margin:32px auto 0;
display:none;
}
.video-close {
-cursor: pointer;
-position: relative;
-left: 940px;
-top: 0;
-pointer-events: all;
+ cursor: pointer;
+ position: relative;
+ left: 948px;
+ top: -8px;
+ pointer-events: all;
}
#icon-video-close {
-background-image: url("../images/close.png");
-background-position: 0 0;
-height: 36px;
-width: 36px;
-display:block;
+ background-image: url("../images/close-white.png");
+ background-image: -webkit-image-set(url(../images/close-white.png) 1x, url(../images/close-white_2x.png) 2x);
+ background-repeat: no-repeat;
+ background-position: 0 0;
+ background-size: 36px 36px;
+ height: 36px;
+ width: 36px;
+ display:block;
}
+#icon-video-close:hover {
+ background-image: url("../images/close-grey.png");
+ background-image: -webkit-image-set(url(../images/close-grey.png) 1x, url(../images/close-grey_2x.png) 2x);
+}
+/* Preload the hover images */
+a.video-shadowbox-button.white:after {
+ display:none;
+ content:url("../images/close-grey.png") url("../images/close-grey_2x.png");
+}
+a.video-shadowbox-button.white {
+ background-image: url("../images/play-circle-white.png");
+ background-image: -webkit-image-set(url(../images/play-circle-white.png) 1x, url(../images/play-circle-white_2x.png) 2x);
+ background-size: 36px 36px;
+ background-repeat: no-repeat;
+ background-position: right;
+ padding: 16px 42px 16px 8px;
+ font-size: 18px;
+ font-weight: 500;
+ line-height: 24px;
+ color: #fff;
+ text-decoration:none;
+}
+
+a.video-shadowbox-button.white:hover {
+ color:#bababa !important;
+ background-image: url("../images/play-circle-grey.png");
+ background-image: -webkit-image-set(url(../images/play-circle-grey.png) 1x, url(../images/play-circle-grey_2x.png) 2x);
+}
+
+/* Preload the hover images */
+a.video-shadowbox-button.white:after {
+ display:none;
+ content:url("../images/play-circle-grey.png") url("../images/play-circle-grey_2x.png");
+}
/******************
Styles for d.a.c/index:
diff --git a/tools/droiddoc/templates-sdk/assets/images/close-grey.png b/tools/droiddoc/templates-sdk/assets/images/close-grey.png
new file mode 100644
index 0000000..1b0d7f1
--- /dev/null
+++ b/tools/droiddoc/templates-sdk/assets/images/close-grey.png
Binary files differ
diff --git a/tools/droiddoc/templates-sdk/assets/images/close-grey_2x.png b/tools/droiddoc/templates-sdk/assets/images/close-grey_2x.png
new file mode 100644
index 0000000..1355507
--- /dev/null
+++ b/tools/droiddoc/templates-sdk/assets/images/close-grey_2x.png
Binary files differ
diff --git a/tools/droiddoc/templates-sdk/assets/images/close-white.png b/tools/droiddoc/templates-sdk/assets/images/close-white.png
new file mode 100644
index 0000000..ef02018
--- /dev/null
+++ b/tools/droiddoc/templates-sdk/assets/images/close-white.png
Binary files differ
diff --git a/tools/droiddoc/templates-sdk/assets/images/close-white_2x.png b/tools/droiddoc/templates-sdk/assets/images/close-white_2x.png
new file mode 100644
index 0000000..9b9c41d
--- /dev/null
+++ b/tools/droiddoc/templates-sdk/assets/images/close-white_2x.png
Binary files differ
diff --git a/tools/droiddoc/templates-sdk/assets/images/play-circle-grey.png b/tools/droiddoc/templates-sdk/assets/images/play-circle-grey.png
new file mode 100644
index 0000000..5e7e7ba
--- /dev/null
+++ b/tools/droiddoc/templates-sdk/assets/images/play-circle-grey.png
Binary files differ
diff --git a/tools/droiddoc/templates-sdk/assets/images/play-circle-grey_2x.png b/tools/droiddoc/templates-sdk/assets/images/play-circle-grey_2x.png
new file mode 100644
index 0000000..3e01635
--- /dev/null
+++ b/tools/droiddoc/templates-sdk/assets/images/play-circle-grey_2x.png
Binary files differ
diff --git a/tools/droiddoc/templates-sdk/assets/images/play-circle-white.png b/tools/droiddoc/templates-sdk/assets/images/play-circle-white.png
new file mode 100644
index 0000000..017d846
--- /dev/null
+++ b/tools/droiddoc/templates-sdk/assets/images/play-circle-white.png
Binary files differ
diff --git a/tools/droiddoc/templates-sdk/assets/images/play-circle-white_2x.png b/tools/droiddoc/templates-sdk/assets/images/play-circle-white_2x.png
new file mode 100644
index 0000000..e48c1fd
--- /dev/null
+++ b/tools/droiddoc/templates-sdk/assets/images/play-circle-white_2x.png
Binary files differ
diff --git a/tools/droiddoc/templates-sdk/assets/js/docs.js b/tools/droiddoc/templates-sdk/assets/js/docs.js
index a3c24f4..701870a 100644
--- a/tools/droiddoc/templates-sdk/assets/js/docs.js
+++ b/tools/droiddoc/templates-sdk/assets/js/docs.js
@@ -20,7 +20,7 @@
/****** ON LOAD SET UP STUFF *********/
$(document).ready(function() {
-
+
// show lang dialog if the URL includes /intl/
//if (location.pathname.substring(0,6) == "/intl/") {
// var lang = location.pathname.split('/')[2];
@@ -558,10 +558,74 @@
cookiePath = "distribute_";
}
+
+ /* setup shadowbox for any videos that want it */
+ var $videoLinks = $("a.video-shadowbox-button");
+ if ($videoLinks.length) {
+ // if there's at least one, add the shadowbox HTML to the body
+ $('body').prepend(
+'<div id="video-container">'+
+ '<div id="video-frame">'+
+ '<div class="video-close">'+
+ '<span id="icon-video-close" onclick="closeVideo()"> </span>'+
+ '</div>'+
+ '<div id="youTubePlayer"></div>'+
+ '</div>'+
+'</div>');
+
+ // loads the IFrame Player API code asynchronously.
+ $.getScript("https://www.youtube.com/iframe_api");
+
+ $videoLinks.each(function() {
+ var videoId = $(this).attr('href').split('?v=')[1];
+ $(this).click(function(event) {
+ event.preventDefault();
+ startYouTubePlayer(videoId);
+ });
+ });
+
+ }
+
});
// END of the onload event
+var youTubePlayer;
+function onYouTubeIframeAPIReady() {
+}
+
+function startYouTubePlayer(videoId) {
+ if (youTubePlayer == null) {
+ youTubePlayer = new YT.Player('youTubePlayer', {
+ height: '529',
+ width: '940',
+ videoId: videoId,
+ events: {
+ 'onReady': onPlayerReady
+ }
+ });
+ } else {
+ youTubePlayer.playVideo();
+ }
+ $("#video-container").fadeIn(200, function(){$("#video-frame").show()});
+}
+
+function onPlayerReady(event) {
+ event.target.playVideo();
+}
+
+function closeVideo() {
+ try {
+ youTubePlayer.stopVideo();
+ $("#video-container").fadeOut(200);
+ } catch(e) {
+ console.log('Video not available');
+ $("#video-container").fadeOut(200);
+ }
+}
+
+
+
function initExpandableNavItems(rootTag) {
$(rootTag + ' li.nav-section .nav-section-header').click(function() {
var section = $(this).closest('li.nav-section');
