Add media metadata, provide default thumbnail

webui/static/js/xbmc.js

@@ -22,11 +22,21 @@ xbmc.factory('XbmcApi', function($resource) {
     );
 });
 
-xbmc.filter('thumb', function() {
+xbmc.directive('thumbnail', function() {
-        return function(html) {
+    return {
-            return html.replace(/<thumb.*>(.*)<\/thumb>/, "$1");
+        restrict: 'E',
+        template: '<img ng-src="{/url/}"></img>',
+        link: function(scope, element, attrs, ctrl) {
+            scope.url = '/static/img/movie-reel.jpg';
+            if (attrs['source']) {
+                url = $(scope.$eval(attrs['source'])).first().text();
+                if (url) {
+                    scope.url = url;
+                }
+            }
         }
-    });
+    }
+});
 
 xbmc.controller('MovieCtrl', function ($scope, XbmcApi) {
     $scope.movies = XbmcApi.get({

webui/templates/default.html

@@ -100,6 +100,11 @@
         <!-- AngularJs -->
         <script src="{{STATIC_URL}}lib/angular/js/angular.min.js"></script>
         <script src="{{STATIC_URL}}lib/angular/js/angular-resource.min.js"></script>
+        <script src="{{STATIC_URL}}lib/angular/js/angular-resource.min.js"></script>
+        <!-- AngularUI -->
+        <script src="{{STATIC_URL}}lib/angularui/js/ui-bootstrap-tpls-0.6.0.min.js"></script>
+        
+        <!-- Local -->
         <script src="{{STATIC_URL}}js/utility.js"></script>
         <script src="{{STATIC_URL}}js/xbmc.js"></script>
         

webui/templates/home.html

@@ -5,11 +5,13 @@
         <h2>Recently added episodes</h2>
         <div class="row episode" ng-repeat="episode in episodes.objects">
             <div class="span2">
-                <img src="{/episode.thumbnail_url|thumb/}" />
+                <thumbnail source=" episode.thumbnail_url"></thumbnail>
             </div>
             <div class="span10">
                 <h3>{/episode.tvshow.title/}</h3>
-                {/episode.season/}x{/episode.episode|pad:2:'0'/} - {/episode.title/}
+                <p>{/episode.season/}x{/episode.episode|pad:2:'0'/} - {/episode.title/}</p>
+                <p>{/episode.plot_summary/}</p>
+                <rating value="episode.rating" max="10" readonly>
             </div>
         </div>
         <button class="btn btn-small" ng-click="more()"><i class="icon icon-plus"></i> Fetch more</button>
@@ -18,10 +20,15 @@
         <h2>Recently added Movies</h2>
         <div class="row episode" ng-repeat="movie in movies.objects">
             <div class="span2">
-                <img src="{/movie.thumbnails|thumb/}" />
+                <thumbnail source="movie.thumbnails"></thumbnail>
             </div>
             <div class="span10">
-                <h3>{/movie.title/}</h3>
+                <h3>
+                    {/movie.title/}<br />
+                    <small>{/movie.tagline/}</small>
+                </h3>
+                <p>{/movie.plot_summary/}</p>
+                <rating value="movie.rating" max="10" readonly>
             </div>
         </div>
         <button class="btn btn-small" ng-click="more()"><i class="icon icon-plus"></i> Fetch more</button>