Merge branch 'master' of github.com:/joshfire/factory-template-sleek

Conflicts: app/app.phone.optimized.js app/app.tv.optimized.js
joshfire · Apr 2, 2012 · daf0136 · daf0136
2 parents 07674ba + 6a50436
commit daf0136
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 38 deletions.
diff --git a/app/app.phone.js b/app/app.phone.js
@@ -5,7 +5,7 @@ define([
   'ui/imagegallery',
   'joshlib!ui/item',
   'joshlib!ui/imageloader',
-  'joshlib!ui/video',
+  'joshlib!ui/factorymedia',
   'joshlib!router',
   'joshlib!ui/cardpanel',
   'joshlib!ui/slidepanel',
@@ -16,10 +16,9 @@ define([
   'joshlib!collection',
   'joshlib!utils/dollar',
   'joshlib!vendor/backbone'],
-function(Spot, FactoryCollection, List, ImageGallery, Item, ImageLoader, Video, Router, CardPanel, SlidePanel, Text, Map, Toolbar, onReady, Collection,$,_) {
+function(Spot, FactoryCollection, List, ImageGallery, Item, ImageLoader, FactoryMedia, Router, CardPanel, SlidePanel, Text, Map, Toolbar, onReady, Collection,$,_) {
 
   onReady(function() {
-
     Spot.initialize();
 
     //
@@ -130,13 +129,14 @@ function(Spot, FactoryCollection, List, ImageGallery, Item, ImageLoader, Video,
       collection: Spot.collections.videos
     });
 
-    videosViews.detail = new Video({
+    videosViews.detail = new FactoryMedia({
       el: '#video-detail',
       templateEl: '#template-video',
       scroller: true,
-      getVideoUrl: function() {
-        var id = this.model.get('url').replace('http://www.youtube.com/watch?v=', '');
-        return 'http://www.youtube-nocookie.com/embed/' + id + '?rel=0';
+      mediaOptions: {
+        strategy: 'html5',
+        width: '100%',
+        height: 300
       }
     });
 
@@ -257,11 +257,13 @@ function(Spot, FactoryCollection, List, ImageGallery, Item, ImageLoader, Video,
         if(Spot.collections[plural].length === 0) {
           Spot.collections[plural].fetch({success: function() {
             var model = Spot.collections[plural].at(parseInt(offset));
-            sectionCards.children.detail.setModel(model, true);
+            sectionCards.children.detail.setModel(model);
+            sectionCards.children.detail.render();
           }});
         } else {
           var model = Spot.collections[plural].at(parseInt(offset));
-          sectionCards.children.detail.setModel(model, true);
+          sectionCards.children.detail.setModel(model);
+          sectionCards.children.detail.render();
          }
       }
     };
@@ -330,4 +332,4 @@ function(Spot, FactoryCollection, List, ImageGallery, Item, ImageLoader, Video,
 
     setTimeout(function() {toolbar.render(); router.historyStart();}, 10);
   });
-});
+});
diff --git a/app/app.phone.optimized.js b/app/app.phone.optimized.js
diff --git a/app/app.tv.js b/app/app.tv.js
@@ -2,23 +2,23 @@
 define([
   'spot.tv',
   'joshlib!factorycollection',
-  'joshlib!adapters/googletv/ui/verticallist',
+  'joshlib!ui/verticallist',
   'joshlib!ui/item',
   'joshlib!ui/imageloader',
-  'joshlib!ui/video',
+  'joshlib!ui/factorymedia',
   'joshlib!router',
-  'joshlib!adapters/googletv/ui/cardpanel',
-  'joshlib!adapters/googletv/ui/slidepanel',
-  'joshlib!adapters/googletv/ui/grid',
+  'joshlib!ui/cardpanel',
+  'joshlib!ui/slidepanel',
+  'joshlib!ui/grid',
   'ui/text',
   'joshlib!ui/map',
-  'joshlib!adapters/googletv/ui/toolbar',
-  'joshlib!adapters/googletv/ui/horizontallayout',
+  'joshlib!ui/toolbar',
+  'joshlib!ui/horizontallayout',
   'joshlib!utils/onready',
   'joshlib!collection',
   'joshlib!utils/dollar',
   'joshlib!vendor/backbone'],
-function(Spot, FactoryCollection, List, Item, ImageLoader, Video, Router, CardPanel, SlidePanel, Grid, Text, Map, Toolbar, HorizontalLayout, onReady, Collection,$,_) {
+function(Spot, FactoryCollection, List, Item, ImageLoader, FactoryMedia, Router, CardPanel, SlidePanel, Grid, Text, Map, Toolbar, HorizontalLayout, onReady, Collection,$,_) {
 
   onReady(function() {
 
@@ -283,9 +283,9 @@ function(Spot, FactoryCollection, List, Item, ImageLoader, Video, Router, CardPa
 
     // Video overlay
 
-    var VideoOverlay = Video.extend({
+    var VideoOverlay = FactoryMedia.extend({
       initialize: function(options) {
-        Video.prototype.initialize.call(this, options);
+        FactoryMedia.prototype.initialize.call(this, options);
 
         this.navUp = this.navDown = this.navLeft = this.navRight = this.navAction = this.exit;
       },
@@ -300,9 +300,11 @@ function(Spot, FactoryCollection, List, Item, ImageLoader, Video, Router, CardPa
     var videoDetail = new VideoOverlay({
       el: '#videos-detail',
       templateEl: '#template-video',
-      getVideoUrl: function() {
-        var id = this.model.get('url').replace('http://www.youtube.com/watch?v=', '');
-        return 'http://www.youtube-nocookie.com/embed/' + id + '?rel=0&autoplay=1';
+      mediaOptions: {
+        width: '100%',
+        height: '100%',
+        autoPlay: true,
+        html5: true
       }
     });
 
@@ -440,4 +442,4 @@ function(Spot, FactoryCollection, List, Item, ImageLoader, Video, Router, CardPa
     router.historyStart();
     horizontalLayout.activate(0);
   });
-});
+});
diff --git a/app/app.tv.optimized.js b/app/app.tv.optimized.js
diff --git a/app/index.phone.html b/app/index.phone.html
@@ -29,7 +29,7 @@
     <script type="text/javascript" src="vendor/moment.js"></script>
     <script type="text/javascript" src="prettystatus.js"></script>
     <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
-    <script data-joshfire-bootstrap src="http://factory-joshfire.herokuapp.com/bootstrap/4f20482584806b01000001c5/4f269bc0d77bc90100003fb3/phone/"></script>
+    <script data-joshfire-bootstrap src="http://127.0.0.1:40021/bootstrap/4f20482584806b01000001c5/4f269bc0d77bc90100003fb3/phone/"></script>
   </head>
 
   <body class="device-phone" ontouchmove="event.preventDefault()">
@@ -239,7 +239,7 @@ <h4><%= item.name %></h4>
 
     <script type="text/template" id="template-video">
       <div>
-        <iframe src="<%= videoUrl %>" width="100%" height="300" frameborder="0" allowfullscreen>Loading...</iframe>
+        <%= media %>
         <div class="body">
           <% if (item.uploadDate || item.datePublished || item.dateCreated) { %>
           <h3><%= moment(toDate(item.uploadDate || item.datePublished || item.dateCreated)).format('LLLL') %></h3>

diff --git a/app/index.phone.optimized.html b/app/index.phone.optimized.html
@@ -29,7 +29,7 @@
     <script type="text/javascript" src="vendor/moment.js"></script>
     <script type="text/javascript" src="prettystatus.js"></script>
     <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
-    <script data-joshfire-bootstrap src="http://factory-joshfire.herokuapp.com/bootstrap/4f20482584806b01000001c5/4f269bc0d77bc90100003fb3/phone/"></script>
+    <script data-joshfire-bootstrap src="http://127.0.0.1:40021/bootstrap/4f20482584806b01000001c5/4f269bc0d77bc90100003fb3/phone/"></script>
   </head>
 
   <body class="device-phone" ontouchmove="event.preventDefault()">
@@ -133,7 +133,7 @@ <h1><span id="title">&nbsp;</span></h1>
     </script>
 
     <script type="text/template" id="template-unknown-item">
-      <li class="unknown-item"><div>Unknown item type: <%= item.itemType %></div></li>
+      <li class="unknown-item"><div>Unknown item type: <%= item['@type'] || item.itemType %></div></li>
     </script>
 
     <script type="text/template" id="template-image-item">
@@ -239,7 +239,7 @@ <h4><%= item.name %></h4>
 
     <script type="text/template" id="template-video">
       <div>
-        <iframe src="<%= videoUrl %>" width="100%" height="300" frameborder="0" allowfullscreen>Loading...</iframe>
+        <%= media %>
         <div class="body">
           <% if (item.uploadDate || item.datePublished || item.dateCreated) { %>
           <h3><%= moment(toDate(item.uploadDate || item.datePublished || item.dateCreated)).format('LLLL') %></h3>

diff --git a/app/index.tv.html b/app/index.tv.html
@@ -14,7 +14,7 @@
     <script type="text/javascript" src="vendor/moment.js"></script>
     <script type="text/javascript" src="prettystatus.js"></script>
     <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
-    <script data-joshfire-bootstrap src="http://factory-joshfire.herokuapp.com/bootstrap/4f20482584806b01000001c5/4f269bc0d77bc90100003fb3/phone/"></script>
+    <script data-joshfire-bootstrap src="http://127.0.0.1:40021/bootstrap/4f20482584806b01000001c5/4f269bc0d77bc90100003fb3/phone/"></script>
 
     <style type="text/css" media="screen">
       body, html {
@@ -229,7 +229,7 @@ <h3><%= item.name %></h3>
     </script>
 
     <script type="text/template" id="template-video">
-      <iframe src="<%= videoUrl %>" width="100%" height="100%" frameborder="0" allowfullscreen>Loading...</iframe>
+      <%= media %>
     </script>
 
     <script type="text/template" id="template-status">
@@ -300,7 +300,6 @@ <h4><%= moment(toDate(item.datePublished)).format('LLLL') %></h4>
       <p class="map-overlay"><%= address %></p>
     </script>
 
-    <script>Joshfire.debug=true;</script>
     <script data-main="app.tv" src="joshfire-framework/lib/adapters/googletv/bootstrap.js"></script>
   </body>
 </html>
diff --git a/app/index.tv.optimized.html b/app/index.tv.optimized.html
@@ -14,7 +14,7 @@
     <script type="text/javascript" src="vendor/moment.js"></script>
     <script type="text/javascript" src="prettystatus.js"></script>
     <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
-    <script data-joshfire-bootstrap src="http://factory-joshfire.herokuapp.com/bootstrap/4f20482584806b01000001c5/4f269bc0d77bc90100003fb3/phone/"></script>
+    <script data-joshfire-bootstrap src="http://127.0.0.1:40021/bootstrap/4f20482584806b01000001c5/4f269bc0d77bc90100003fb3/phone/"></script>
 
     <style type="text/css" media="screen">
       body, html {
@@ -131,7 +131,7 @@
     </script>
 
     <script type="text/template" id="template-unknown-item">
-      <li class="unknown-item"><div>Unknown item type: <%= item.itemType %></div></li>
+      <li class="unknown-item"><div>Unknown item type: <%= item['@type'] || item.itemType %></div></li>
     </script>
 
     <script type="text/template" id="template-image-item">
@@ -229,7 +229,7 @@ <h3><%= item.name %></h3>
     </script>
 
     <script type="text/template" id="template-video">
-      <iframe src="<%= videoUrl %>" width="100%" height="100%" frameborder="0" allowfullscreen>Loading...</iframe>
+      <%= media %>
     </script>
 
     <script type="text/template" id="template-status">
@@ -300,7 +300,6 @@ <h4><%= moment(toDate(item.datePublished)).format('LLLL') %></h4>
       <p class="map-overlay"><%= address %></p>
     </script>
 
-    <script>Joshfire.debug=true;</script>
     <script src="app.tv.optimized.js"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sleek",
   "fullName": "Sleek",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Generic-purpose nicely polished template that supports photos, videos, events, RSS feeds, status updates, contact info, and a map. The views are adapted automatically based on the datasources that you set in the configuration settings. Just make sure that you use the most appropriate datasouce type for the underlying template inputs!\n\nThe template is available in 5 different colors: blue, spicy, gray, earth and vegetal.",
   "keywords": [
     "generic",
@@ -81,7 +81,7 @@
 	"screenshots": [
           "marketing/tv-screenshot1.jpg",
           "marketing/tv-screenshot2.jpg",
-          "marketing/tv-screenshot3.jpg" 
+          "marketing/tv-screenshot3.jpg"
         ]
       }
     ],