youtube works, flickr caches, added colorbox

vurbanism/flyovers/models.py

@@ -2,6 +2,11 @@ from django.contrib.gis.db import models
 import oxlib
 import flickr
 import settings
+try:
+  import json
+except:
+  import simplejson as json
+from oxweb import youtube
 
 flickr.API_KEY = settings.FLICKR_API_KEY
 flickr.SECRET = settings.FLICKR_SECRET
@@ -36,6 +41,7 @@ class Image(models.Model):
   caption = models.CharField(max_length=255, blank=True, null=True)
   category = models.ForeignKey("ImageCategory")
   flyover = models.ForeignKey(Flyover)
+  flickrData = models.TextField(blank=True)
   
   def get_flickr_id(self):
     regex = r'http\:\/\/.*?\/\d{4}/(.*?)_.*'
@@ -45,9 +51,12 @@ class Image(models.Model):
     return self.url + " - " + self.caption + " - " + self.category.name
 
   def get_dict(self):
+    if self.flickrData != '':
+      return json.loads(self.flickrData)
+    else:
       flickrPhoto = flickr.Photo(id=self.get_flickr_id())
       sizes = flickrPhoto.getSizes()
-    return {
+      ret = {
       'url': self.url,
       'sizes': sizes,
       'caption': self.caption,
@@ -56,6 +65,10 @@ class Image(models.Model):
         'name': self.flyover.name
         }
       }
+      self.flickrData = json.dumps(ret)
+      self.save()
+      return ret
+      
 
 class ImageCategory(models.Model):
   name = models.CharField(max_length=255)
@@ -83,10 +96,34 @@ class Video(models.Model):
   caption = models.CharField(max_length=255, blank=True, null=True)
   category = models.ForeignKey("VideoCategory")
   flyover = models.ForeignKey(Flyover)
+  youtubeData = models.TextField(blank=True)
 
   def __unicode__(self):
     return self.url + " - " + self.caption + " - " + self.category.name
 
+  def get_youtube_id(self):
+    reg = r'http.*?v=(.*?)$'
+    return oxlib.findRe(self.url, reg)
+
+  def get_dict(self):
+    if self.youtubeData != '':
+      return json.loads(self.youtubeData)
+    else:
+      youtube_id = self.get_youtube_id()
+      info = youtube.getMovieInfo(youtube_id)
+      info['title'] = '' #Nasty, to avoid UnicodeDecodeError's when trying to do json.dumps on some video titles. FIXME.
+      ret = {
+      'info': info,
+      'flyover': {
+        'id': self.flyover.id,
+        'name': self.flyover.name
+        }
+      }
+      self.youtubeData = json.dumps(ret)
+      self.save()
+      return ret
+
+
 class VideoCategory(models.Model):
   name = models.CharField(max_length=255)
   description = models.TextField(blank=True, null=True)
@@ -94,6 +131,21 @@ class VideoCategory(models.Model):
   def __unicode__(self):
     return self.name
 
+  def get_dict(self):
+    videos = []
+    flyovers = []
+    for v in Video.objects.filter(category=self):
+      videos.append(v.get_dict())
+      flyovers.append(v.flyover.geojson_as_dict())
+    return {
+      'videos': videos,
+      'flyovers': {
+        'type': 'FeatureCollection',
+        'features': flyovers
+      }
+    }
+    
+
 class Audio(models.Model):
   fil = models.FileField(upload_to='audio/')
   caption = models.CharField(max_length=255, blank=True, null=True)
@@ -112,7 +164,7 @@ class AudioCategory(models.Model):
 
 class Text(models.Model):
 #  url = models.URLField("FlickR URL")
-  text = models.TextField(max_length=255)
+  text = models.TextField()
   category = models.ForeignKey("TextCategory")
   flyover = models.ForeignKey(Flyover)
 

vurbanism/static/js/vurbanism.js

@@ -141,13 +141,37 @@ $(function() {
     var id = $(this).attr("data-id");
     $('#media').html("Loading images for " + catName + " .. please wait..");
     $.getJSON("category", {'id': id, 'type': type}, function(json) {
+//      alert(type);
       var arr = [];
       var features = json.flyovers;
       var currFeatures = jsonLayer.features;
       jsonLayer.removeFeatures(currFeatures);
       jsonLayer.addFeatures(geojson_format.read(features));
+      alert(type);
+      switch(type.toLowerCase()) {
+        case "image":
           var html = tmpl("tmpl_images", {'images': json.images});      
           $('#media').html(html);
+          $('.imageWrapper a').colorbox();
+          break;
+        case "video":
+          var html = tmpl("tmpl_videos", {'videos': json.videos});
+          $('#media').html(html);
+          var i = 0;
+          $('.videoWrapper').each(function() {
+            var videoData = json.videos[i];
+            $(this).data("videoData", videoData);
+            i++;
+          });
+          $('.videoWrapper > a').click(function(e) {
+            e.preventDefault();
+            var data = $(this).closest(".videoWrapper").data("videoData");
+            var embedCode = data.info.embed;
+            $.colorbox({html: embedCode});
+          });
+        default:
+          $.noop();
+      }  
     });
   });
 });
@@ -164,7 +188,7 @@ function getFlyoverById(id) {
 
 $('.flyoverImage').live("mouseover", function() {
   var id = $(this).attr("data-id");
-  console.log(id);
+//  console.log(id);
   var flyover = getFlyoverById(id);
   mapControl.select(flyover);
   currentlySelectedFeature = flyover;

vurbanism/templates/flyovers.html

@@ -103,7 +103,9 @@ a img {
   box-shadow: 0px 0px 1.5em;
   }
   </style>
+  <link rel="stylesheet" type="text/css" href="/static/css/colorbox.css" />
   <script type="text/javascript" src="/static/js/jquery.js"></script>
+  <script type="text/javascript" src="/static/js/jquery.colorbox-min.js"></script>
   <script type="text/javascript" src="/static/js/openlayers/OpenLayers.js"></script>
   <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAsn1j-ZGGtRgZ9aMJPCZbRxTEwe8r4EmncxniwLCEI2F-aeUoNRTBAUi3uvVAsZpLkcO78Ryd18Hfaw'></script>
 
@@ -116,7 +118,7 @@ a img {
 <div class="imagesWrapper">
   <% for (var i=0; i<images.length;i++) { var img = images[i]; %>
     <div class="imageWrapper">
-      <a href="<%= img.sizes[3].source %>" target="_blank" class="flyoverImage" title="<%= img.caption %>" data-id="<%= img.flyover.id %>" rel="group_<%= img.id %>">
+      <a href="<%= img.sizes[3].source %>" class="flyoverImage" title="<%= img.caption %>" data-id="<%= img.flyover.id %>" rel="group_<%= img.id %>">
         <img src="<%= img.sizes[0].source %>" alt="<%= img.caption %>" />
       </a> 
     </div>
@@ -125,6 +127,20 @@ a img {
 </div>
   </script>
 
+  <script type="text/html" id="tmpl_videos">
+<div class="videosWrapper">
+  <% for (var i=0; i<videos.length;i++) { var vid = videos[i]; %>
+    <div class="videoWrapper">
+      <a href="#" class="flyoverImage" title="<%= vid.info.description %>" data-id="<%= vid.flyover.id %>" rel="group_<%= vid.id %>">
+        <img src="<%= vid.info.thumbnail %>" alt="<%= vid.info.description %>" />
+      </a> 
+    </div>
+  <% } %>
+
+</div>
+  </script>
+
+
   <div id="wrapper">
     <div id="categories">
       <table>