Updated photocast sample

Scarygami · Feb 4, 2014 · 78f6b4a · 78f6b4a
1 parent 501414c
commit 78f6b4a
Show file tree

Hide file tree

Showing 47 changed files with 5,935 additions and 1,144 deletions.
diff --git a/auth_sample/receiver/index.html → auth_sample (old sdk!)/receiver/index.html b/auth_sample/receiver/index.html → auth_sample (old sdk!)/receiver/index.html
diff --git a/auth_sample/receiver/receiver.css → auth_sample (old sdk!)/receiver/receiver.css b/auth_sample/receiver/receiver.css → auth_sample (old sdk!)/receiver/receiver.css
diff --git a/auth_sample/receiver/receiver.js → auth_sample (old sdk!)/receiver/receiver.js b/auth_sample/receiver/receiver.js → auth_sample (old sdk!)/receiver/receiver.js
diff --git a/auth_sample/sender/index.html → auth_sample (old sdk!)/sender/index.html b/auth_sample/sender/index.html → auth_sample (old sdk!)/sender/index.html
diff --git a/auth_sample/sender/sender.css → auth_sample (old sdk!)/sender/sender.css b/auth_sample/sender/sender.css → auth_sample (old sdk!)/sender/sender.css
diff --git a/auth_sample/sender/sender.js → auth_sample (old sdk!)/sender/sender.js b/auth_sample/sender/sender.js → auth_sample (old sdk!)/sender/sender.js
diff --git a/photocast/bootstrap.css b/photocast/bootstrap.css
diff --git a/photocast/card.css b/photocast/card.css
@@ -0,0 +1,241 @@
+.card {
+    padding-top: 5px;
+    margin: 10px 0 20px 0;
+    background-color: #ffffff;
+    border: 1px solid #d8d8d8;
+    border-top-width: 0;
+    border-bottom-width: 2px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.card .card-heading {
+    padding: 0 20px;
+    margin: 0;
+}
+
+.card .card-heading.simple {
+    font-size: 20px;
+    font-weight: 300;
+    color: #777;
+    border-bottom: 1px solid #e5e5e5;
+    text-align: left;
+}
+
+.card .card-heading.image img {
+    display: inline-block;
+    width: 46px;
+    height: 46px;
+    margin-right: 15px;
+    vertical-align: top;
+    border: 0;
+    -webkit-border-radius: 50%;
+    -moz-border-radius: 50%;
+    border-radius: 50%;
+}
+
+.card .card-heading.image .card-heading-header {
+    display: inline-block;
+    vertical-align: top;
+}
+
+.card .card-heading.image .card-heading-header h3 {
+    margin: 0;
+    font-size: 14px;
+    line-height: 16px;
+    color: #262626;
+}
+
+.card .card-heading.image .card-heading-header span {
+    font-size: 12px;
+    color: #999999;
+}
+
+.card .card-body {
+    padding: 0 20px;
+    margin: 10px 0;
+}
+
+.card .card-media {
+    padding: 0 20px;
+    margin: 0 -14px;
+}
+
+.card .card-media img {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.card .card-actions {
+    min-height: 30px;
+    padding: 0 20px 20px 20px;
+    margin: 20px 0 0 0;
+}
+
+.card .card-comments {
+    padding: 20px;
+    margin: 0;
+    background-color: #f8f8f8;
+}
+
+.card .card-comments .comments-collapse-toggle {
+    padding: 0;
+    margin: 0 20px 12px 20px;
+}
+
+.card .card-comments .comments-collapse-toggle a,
+.card .card-comments .comments-collapse-toggle span {
+    padding-right: 5px;
+    overflow: hidden;
+    font-size: 12px;
+    color: #999;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.card-comments .media-heading {
+    font-size: 13px;
+    font-weight: bold;
+}
+
+.card.people {
+    position: relative;
+    display: inline-block;
+    width: 170px;
+    height: 300px;
+    padding-top: 0;
+    margin-left: 20px;
+    overflow: hidden;
+    vertical-align: top;
+}
+
+.card.people:first-child {
+    margin-left: 0;
+}
+
+.card.people .card-top {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: inline-block;
+    width: 170px;
+    height: 150px;
+    background-color: #ffffff;
+}
+
+.card.people .card-top.green {
+    background-color: #53a93f;
+}
+
+.card.people .card-top.blue {
+    background-color: #427fed;
+}
+
+.card.people .card-info {
+    position: absolute;
+    top: 150px;
+    display: inline-block;
+    width: 100%;
+    height: 101px;
+    overflow: hidden;
+    background: #ffffff;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.card.people .card-info .title {
+    display: block;
+    margin: 8px 14px 0 14px;
+    overflow: hidden;
+    font-size: 16px;
+    font-weight: bold;
+    line-height: 18px;
+    color: #404040;
+}
+
+.card.people .card-info .desc {
+    display: block;
+    margin: 8px 14px 0 14px;
+    overflow: hidden;
+    font-size: 12px;
+    line-height: 16px;
+    color: #737373;
+    text-overflow: ellipsis;
+}
+
+.card.people .card-bottom {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    display: inline-block;
+    width: 100%;
+    padding: 10px 20px;
+    line-height: 29px;
+    text-align: center;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.card.hovercard {
+    position: relative;
+    width: 240px;
+    padding-top: 0;
+    overflow: hidden;
+    text-align: center;
+    background-color: #fff;
+}
+
+.card.hovercard img {
+    width: 240px;
+    height: 135px;
+}
+
+.card.hovercard .avatar {
+    position: relative;
+    top: -40px;
+    margin-bottom: -40px;
+}
+
+.card.hovercard .avatar img {
+    width: 80px;
+    height: 80px;
+    max-width: 80px;
+    max-height: 80px;
+    -webkit-border-radius: 50%;
+    -moz-border-radius: 50%;
+    border-radius: 50%;
+}
+
+.card.hovercard .info {
+    padding: 4px 8px 10px;
+}
+
+.card.hovercard .info .title {
+    margin-bottom: 4px;
+    font-size: 24px;
+    line-height: 1;
+    color: #262626;
+    vertical-align: middle;
+}
+
+.card.hovercard .info .desc {
+    overflow: hidden;
+    font-size: 12px;
+    line-height: 20px;
+    color: #737373;
+    text-overflow: ellipsis;
+}
+
+.card.hovercard .bottom {
+    padding: 0 20px;
+    margin-bottom: 17px;
+}
diff --git a/slideshow/sender/cast.png → photocast/cast.png b/slideshow/sender/cast.png → photocast/cast.png
diff --git a/slideshow/sender/casting.png → photocast/casting.png b/slideshow/sender/casting.png → photocast/casting.png
diff --git a/photocast/gplus.png b/photocast/gplus.png
diff --git a/photocast/index.html b/photocast/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>PhotoCast</title>
+<link rel="stylesheet" href="bootstrap.css">
+<link rel="stylesheet" href="card.css">
+<link rel="stylesheet" href="sender.css">
+<script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script>
+</head>
+<body>
+    <div class="header">
+      <h3>Photocast</h3>
+    </div>
+    <div class="container">
+      <div class="row" id="messageCard" style="display: none;">
+        <div class="col-md-12">
+          <div class="card">
+            <div class="card-body">
+              <div id="message"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row" id="signinButton" style="display: none;">
+        <div class="col-md-12">
+          <div class="card">
+            <div class="card-body">
+              <span
+                class="g-signin"
+                data-callback="signinCallback"
+                data-clientid="YOUR-CLIENT_ID"
+                data-cookiepolicy="single_host_origin"
+                data-scope="https://www.googleapis.com/auth/plus.login https://picasaweb.google.com/data/"
+                data-width="wide" data-height="tall">
+              </span>
+              <p class="disclaimer">
+                By signing in with Google+ you give us permission to fetch a list of albums you uploaded to Google+.<br>
+                This list will only be visible to you and we won't cache it on our server.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="app" style="display: none;">
+        <div class="row">
+          <div class="col-md-12">
+            <div class="card">
+              <div class="card-heading simple" id="albumheader">Pick one of your albums to cast...</div>
+              <div class="card-body">
+                <div id="albums">Fetching albums, please wait...</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-12">
+            <div class="card">
+              <div class="card-body">
+                <div id="signoutButton" class="signout"><span class="icon"></span><span class="label">Sign out &amp; disconnect</span></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="footer">
+      Developed by <a href="https://google.com/+Gerwin Sturm">Gerwin Sturm</a>, <a href="http://www.foldedsoft.at/">FoldedSoft e.U.</a>
+    </div>
+    <script src="sender.js"></script>
+</body>
+</html>
diff --git a/photocast/receiver/receiver.css b/photocast/receiver/receiver.css
@@ -0,0 +1,21 @@
+body {
+	overflow:hidden;
+}
+div {
+	height: 720px;
+	width: 1280px;
+	text-align:center;
+	border:0px solid silver;
+	display: table-cell;
+	vertical-align:middle;
+	color:#FFFFFF;
+	background-color:#000000;
+	font-weight:bold;
+	font-family:Verdana, Geneva, sans-serif;
+	font-size:40px;
+}
+
+img {
+  max-width: 100%;
+  max-height: 100%;
+}
diff --git a/photocast/receiver/receiver.html b/photocast/receiver/receiver.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="receiver.css">
+    <title>Photocast</title>
+    <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script>
+  </head>
+  <body>
+	<div id="message">Photocast waiting for input...</div>
+  <script type="text/javascript" src="receiver.js"></script>
+  </body>
+</html>