update to work with movie version 1

index.html

@@ -6,7 +6,6 @@
   <meta name="description" content="Now Showing Movie Information, Thailand">
   <meta name="keywords" content="Now showing, Movies, Theater, Thailand">
   <meta name="google-play-app" content="app-id=co.zzyzx.showtimes.android">
-  <link rel="stylesheet" href="css/bootstrap-theme.min.css">
   <link rel="stylesheet" href="css/bootstrap.min.css">
 
   <style>
@@ -16,7 +15,7 @@
     li.thumbnail {
       margin-left: 10px;
       margin-bottom: 10px;
-      min-width: 250px;
+      min-width: 275px;
       max-width: 330px;
       min-height: 150px;
     }
@@ -32,7 +31,7 @@
   <div class="row">
     <div class="col-xs-12 col-sm-6 col-md-6 col-md-offset-3"><h1 class="text-center">Movies <small><a href="//showtimes.everyday.in.th">#ShowtimesTH</a></small></h1></div>
   </div>
-  <div class="row-fluid">
+  <div class="row">
     {{outlet}}
   </div>
 
@@ -56,16 +55,24 @@
   <img src="http://placehold.it/300x169" alt="" data-echo="http://image.tmdb.org/t/p/w300{{unbound backdrop_path}}" width="300" height="169" class="img-rounded" {{action 'openInfoModal' this}}>
   {{else}}
     {{#if poster_path}}
-      <img src="http://placehold.it/92x138" alt=""width="92" height="138" align="left" class="img-rounded" {{action 'openInfoModal' this}} data-echo="http://image.tmdb.org/t/p/w92{{unbound poster_path}}">
+      <img src="http://placehold.it/92x138" alt=""width="92" height="138" align="left" class="img-rounded" {{action 'openInfoModal' this}} data-echo="http://image.tmdb.org/t/p/w92{{unbound poster_path}}" />
     {{else}}
-      <img src="http://placehold.it/92x138" alt=""width="92" height="138" align="left" class="img-rounded" {{action 'openInfoModal' this}}>
+      {{#if poster_url}}
+      <img src="http://placehold.it/158x240" alt=""width="158" height="240" align="left" class="img-rounded" {{action 'openInfoModal' this}} data-echo="{{unbound poster_url}}" />
+      {{else}}
+      <img src="http://placehold.it/92x138" alt=""width="92" height="138" align="left" class="img-rounded" {{action 'openInfoModal' this}} />
+      {{/if}}
     {{/if}}
   {{/if}}
   <div class="caption">
-    <h4 {{action 'openInfoModal' this}}>{{title}}</h4>
-    {{#if tagline}}<blockquote class="blockquote-reverse"><footer>{{tagline}}</footer></blockquote>{{/if}}
-    {{#if vote_average}}<p class="small">TMDb rating: {{vote_average}} ({{vote_count}} votes)</p>{{/if}}
-    <p>{{#if imdb_id}}<a href="http://www.imdb.com/title/{{unbound imdb_id}}/" class="btn btn-default btn-xs" role="button">IMDb</a> {{/if}}<a href="http://www.themoviedb.org/movie/{{unbound movie_id}}/" class="btn btn-default btn-xs">TMDb</a></p>
+    <h4 {{action 'openInfoModal' this}}>{{original_title}}</h4>
+    {{#if tagline}}
+      <blockquote class="blockquote-reverse"><footer>{{tagline}}</footer></blockquote>
+    {{/if}}
+    {{#each rating}}
+      <span class="small">{{provider}} rating: {{vote_average}} ({{vote_count}} votes)</span>
+    {{/each}}
+    <p>{{#if imdb_id}}<a href="http://www.imdb.com/title/{{unbound imdb_id}}/" class="btn btn-default btn-xs" role="button">IMDb</a> {{/if}}{{#if tmdb_id}}<a href="http://www.themoviedb.org/movie/{{unbound tmdb_id}}/" class="btn btn-default btn-xs">TMDb</a>{{/if}}</p>
   </div>
 </li>
 {{/each}} 
@@ -81,11 +88,20 @@
 </div>
 <div class="modal-body">
   <ul>
-    {{#if release_date}}<li><strong>Release Date</strong>: {{format-date release_date}}</li>{{/if}}
-    {{#if budget}}<li><strong>Budget</strong>: {{budget}}</li>{{/if}}
-    {{#if runtime}}<li><strong>Runtime</strong>: {{runtime}}</li>{{/if}}
+    <li><strong>Cast</strong>: 
+    {{#each cast}} 
+      {{this}},
+    {{/each}}
+    </li>
+    <li><strong>Director</strong>: {{director}}</li>
+
+    {{#if tmdb}}
+      {{#if tmdb.release_date}}<li><strong>Release Date</strong>: {{format-date tmdb.release_date}}</li>{{/if}}
+      {{#if tmdb.budget}}<li><strong>Budget</strong>: {{tmdb.budget}}</li>{{/if}}
+      {{#if tmdb.runtime}}<li><strong>Runtime</strong>: {{tmdb.runtime}}</li>{{/if}}
+    {{/if}}
   </ul>
-  {{#if overview}}<p>{{overview}}</p>{{/if}}
+  {{#if storyline}}<p>{{storyline}}</p>{{/if}}
   <small class="muted">{{_id}}</small>
 </div>
 
@@ -115,9 +131,9 @@
 <script src="/js/app.js"></script>
 <script>
 echo.init({
-    offset: 100,
-    throttle: 250,
-    unload: false,
+    offset: 200,
+    throttle: 350,
+    unload: true,
     callback: function (element, op) {
       $('#container').isotope();
     }