Build the initial sender view.

Forms the basis of the sender application by showing the available albums. This makes use of the Flickr JS wrapper, and adds a second wrapper on top of this to handle the awkward design. I'll tidy this up before the talk if I get time, but the current focus is just making something work as quickly as possible.
danielgroves · May 3, 2016 · 187e4e1 · 187e4e1
1 parent dce2c45
commit 187e4e1
Show file tree

Hide file tree

Showing 5 changed files with 136 additions and 0 deletions.
diff --git a/.gitmodules b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "flickrapi"]
+	path = flickrapi
+	url = [email protected]:Pomax/node-flickrapi.git
diff --git a/flickrapi b/flickrapi
diff --git a/index.html b/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <title>Flickr Chromecast</title>
+
+    <link rel="stylesheet" href="style.css" />
+    <script type="text/javascript" src="js/MagicFlickrWrapper.js"></script>
+    <script type="text/javascript" src="flickrapi/browser/flickrapi.dev.js"></script>
+  </head>
+
+  <body>
+    <div id="flickr-container"></div>
+
+    <script type="text/javascript">
+      var flickrMagic = null;
+
+      var flickr = new Flickr({
+        api_key: '24ce45e1a83edb73b6656c50bd891985'
+      });
+
+      flickr.people.findByEmail({
+        find_email: '[email protected]'
+      }, function(error, result) {
+        if(error) { throw new Error(error); }
+
+        var userId = result.user.id;
+        flickrMagic = new MagicFlickrWrapper(userId);
+        flickrMagic.getPhotosets();
+      });
+    </script>
+  </body>
+</html>
diff --git a/js/MagicFlickrWrapper.js b/js/MagicFlickrWrapper.js
@@ -0,0 +1,63 @@
+function MagicFlickrWrapper(userId) {
+  this.userId = userId;
+  this.images = new Array();
+}
+
+MagicFlickrWrapper.prototype.getPhotosets = function() {
+  var that = this;
+  flickr.photosets.getList({
+    user_id: this.userId
+  }, function(error, result) {
+    for(var i in result.photosets.photoset) {
+      var photoset = result.photosets.photoset[i];
+      that.images.push(new PhotosetHandler(that.userId, photoset));
+    }
+  });
+}
+
+function PhotosetHandler(userId, photoset) {
+  this.userId = userId;
+  this.photoset = photoset;
+  this.background = null;
+
+  this.getPhotos(photoset.id)
+}
+
+PhotosetHandler.prototype.getPhotos = function(photosetId) {
+  var that = this;
+
+  flickr.photosets.getPhotos({
+    photoset_id: photosetId,
+    user_id: that.userId
+  }, function(error, result) {
+    that.getPhotoSizes(result.photoset.photo[0].id);
+  });
+}
+
+PhotosetHandler.prototype.getPhotoSizes = function(photoId) {
+  var that = this;
+
+  flickr.photos.getSizes({
+    photo_id: photoId
+  }, function(error, result) {
+    that.background = result.sizes.size[9].source;
+    that.injectHtml();
+  });
+}
+
+PhotosetHandler.prototype.injectHtml = function() {
+  var article = document.createElement('article');
+  article.setAttribute('data-flickr-id', this.photoset.id);
+  article.style.backgroundImage = "url(" + this.background + ")";
+
+  var heading = document.createElement('h1');
+  heading.innerHTML = this.photoset.title._content;
+
+  var description = document.createElement('p');
+  description.innerHTML = this.photoset.description._content;
+
+  article.appendChild(heading);
+  article.appendChild(description);
+
+  document.getElementById('flickr-container').appendChild(article);
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,36 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: 'Georgia', serif;
+}
+
+article {
+  height: 38rem;
+  width: 50%;
+  float: left;
+  background-size: cover;
+}
+
+article h1,
+article p {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  text-shadow: 0 0 5px black;
+}
+
+article h1 {
+  font-weight: normal;
+  font-size: 2.5rem;
+
+  margin-top: 15rem;
+}
+
+article p {
+  padding-top: 5em;
+  font-size: 1.4rem;
+  font-style: italic;
+}