display critic reviews on detail page

ApiClient.js

@@ -838,6 +838,32 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout) {
             });
         };
 
+        self.getCriticReviews = function (itemId, options) {
+
+            if (!itemId) {
+                throw new Error("null itemId");
+            }
+
+            var url = self.getUrl("Items/" + itemId + "/CriticReviews", options);
+
+            return self.ajax({
+                type: "GET",
+                url: url,
+                dataType: "json"
+            });
+        };
+
+        self.getSessions = function (options) {
+
+            var url = self.getUrl("Sessions", options);
+
+            return self.ajax({
+                type: "GET",
+                url: url,
+                dataType: "json"
+            });
+        };
+
         /**
          * Uploads a user image
          * @param {String} userId

dashboard-ui/css/librarybrowser.css

@@ -150,6 +150,42 @@
     margin: 0 5px 5px 0;
 }
 
+.criticReview {
+    font-size: 14px;
+    margin: 1.5em 0;
+    background: #222;
+    padding: .8em .8em .8em 55px;
+    border-radius: 5px;
+    position: relative;
+}
+
+    .criticReview:first-child {
+        margin-top: .5em;
+    }
+
+    .criticReview img {
+        width: 30px;
+    }
+
+.reviewerName {
+    color: #ccc;
+    font-size: 13px;
+    margin-top: .5em;
+}
+
+.reviewLink {
+    margin-top: .5em;
+}
+
+.reviewDate {
+    margin-left: 1em;
+}
+
+.reviewScore {
+    position: absolute;
+    left: .8em;
+}
+
 
 @media all and (min-width: 750px) {
 

dashboard-ui/css/site.css

@@ -34,6 +34,14 @@ body {
     overflow-y: scroll!important;
 }
 
+.textlink {
+    text-decoration: none;
+}
+
+    .textlink:hover {
+        text-decoration: underline;
+    }
+
 h1 {
     font-family: 'Segoe UI Light', 'Open Sans', Arial, Helvetica, sans-serif;
     font-weight: 200;
@@ -640,7 +648,8 @@ progress {
     /* Firefox */
     progress::-moz-progress-bar {
         border-radius: 5px;
-        background-image: -moz-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% );s
+        background-image: -moz-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% );
+        s;
     }
 
     /* Chrome */

dashboard-ui/itemdetails.html

@@ -101,6 +101,9 @@
                                 <span id="playButtonContainer" style="display: none;">
                                     <button id="btnPlay" type="button" data-icon="play" data-inline="true" data-mini="true" data-theme="a">Play</button>
                                 </span>
+                                <span>
+                                    <button id="btnRemote" type="button" data-icon="hand-up" data-inline="true" data-mini="true" data-theme="a">Remote</button>
+                                </span>
                                 <span id="editButtonContainer" style="display: none;">
                                     <button id="btnEdit" type="button" data-icon="pencil" data-inline="true" data-mini="true" data-theme="a">Edit</button>
                                 </span>
@@ -177,6 +180,12 @@
                         <div id="castContent"></div>
                     </div>
                 </div>
+                <div>
+                    <div data-role="collapsible" id="criticReviewsCollapsible" style="display: none;" data-mini="true" data-collapsed="false" data-corners="false">
+                        <h3>Critic Reviews</h3>
+                        <div id="criticReviewsContent"></div>
+                    </div>
+                </div>
                 <div>
                     <div data-role="collapsible" id="scenesCollapsible" style="display: none;" data-mini="true" data-collapsed="false" data-corners="false">
                         <h3>Scenes</h3>

dashboard-ui/scripts/Itemdetailpage.js

@@ -164,7 +164,7 @@
             $('#scenesCollapsible', page).hide();
         } else {
             $('#scenesCollapsible', page).show();
-            renderScenes(page, item);
+            renderScenes(page, item, 6);
         }
         if (!item.LocalTrailerCount || item.LocalTrailerCount == 0) {
             $('#trailersCollapsible', page).hide();
@@ -176,13 +176,13 @@
             $('#specialsCollapsible', page).hide();
         } else {
             $('#specialsCollapsible', page).show();
-            renderSpecials(page, item);
+            renderSpecials(page, item, 6);
         }
         if (!item.People || !item.People.length) {
             $('#castCollapsible', page).hide();
         } else {
             $('#castCollapsible', page).show();
-            renderCast(page, item, context);
+            renderCast(page, item, context, 10);
         }
 
         $('#themeSongsCollapsible', page).hide();
@@ -195,6 +195,8 @@
         ApiClient.getThemeVideos(Dashboard.getCurrentUserId(), item.Id).done(function (result) {
             renderThemeVideos(page, item, result);
         });
+
+        renderCriticReviews(page, item, 1);
     }
 
     function renderDetails(page, item, context) {
@@ -316,6 +318,97 @@
         $('#itemRatings', page).html(LibraryBrowser.getUserDataIconsHtml(item));
     }
 
+    function renderCriticReviews(page, item, limit) {
+
+        var options = {};
+
+        if (limit) {
+            options.limit = limit;
+        }
+
+        ApiClient.getCriticReviews(item.Id, options).done(function (result) {
+
+            if (result.TotalRecordCount) {
+                $('#criticReviewsCollapsible', page).show();
+                renderCriticReviewsContent(page, result, limit);
+            } else {
+                $('#criticReviewsCollapsible', page).hide();
+            }
+        });
+    }
+
+    function renderCriticReviewsContent(page, result, limit) {
+
+        var html = '';
+
+        var reviews = result.ItemReviews;
+
+        for (var i = 0, length = reviews.length; i < length; i++) {
+
+            var review = reviews[i];
+
+            html += '<div class="criticReview">';
+
+            html += '<div class="reviewScore">';
+
+
+            if (review.Score != null) {
+                html += review.Score;
+            }
+            else if (review.Likes != null) {
+
+                if (review.Likes) {
+                    html += '<img src="css/images/fresh.png" />';
+                } else {
+                    html += '<img src="css/images/rotten.png" />';
+                }
+            }
+            
+            html += '</div>';
+
+            html += '<div class="reviewCaption">' + review.Caption + '</div>';
+
+            var vals = [];
+
+            if (review.ReviewerName) {
+                vals.push(review.ReviewerName);
+            }
+            if (review.Publisher) {
+                vals.push(review.Publisher);
+            }
+
+            html += '<div class="reviewerName">' + vals.join(', ') + '.';
+
+            if (review.Date) {
+
+                try {
+
+                    var date = parseISO8601Date(review.Date, true).toLocaleDateString();
+
+                    html += '<span class="reviewDate">' + date + '</span>';
+                }
+                catch (error) {
+
+                }
+
+            }
+
+            html += '</div>';
+
+            if (review.Url) {
+                html += '<div class="reviewLink"><a class="textlink" href="' + review.Url + '" target="_blank">Full review</a></div>';
+            }
+
+            html += '</div>';
+        }
+
+        if (limit && result.TotalRecordCount > limit) {
+            html += '<p style="margin: .5em 0 0;padding-left: .5em;"><button class="moreCriticReviews" data-inline="true" data-mini="true">More ...</button></p>';
+        }
+
+        $('#criticReviewsContent', page).html(html).trigger('create');
+    }
+
     function renderThemeSongs(page, item, result) {
 
         if (result.Items.length) {
@@ -336,13 +429,17 @@
         }
     }
 
-    function renderScenes(page, item) {
+    function renderScenes(page, item, limit) {
         var html = '';
 
-        var chapters = item.Chapters || {};
+        var chapters = item.Chapters || [];
 
         for (var i = 0, length = chapters.length; i < length; i++) {
 
+            if (limit && i >= limit) {
+                break;
+            }
+
             var chapter = chapters[i];
             var chapterName = chapter.Name || "Chapter " + i;
 
@@ -374,7 +471,11 @@
             html += '</a>';
         }
 
-        $('#scenesContent', page).html(html);
+        if (limit && chapters.length > limit) {
+            html += '<p style="margin: .5em 0 0;padding-left: .5em;"><button class="moreScenes" data-inline="true" data-mini="true">More ...</button></p>';
+        }
+
+        $('#scenesContent', page).html(html).trigger('create');
     }
 
     function renderGallery(page, item) {
@@ -479,15 +580,21 @@
         $('#mediaInfoContent', page).html(html).trigger('create');
     }
 
-    function getVideosHtml(items) {
+    function getVideosHtml(items, limit, moreButtonClass) {
 
         var html = '';
 
         for (var i = 0, length = items.length; i < length; i++) {
 
+            if (limit && i >= limit) {
+                break;
+            }
+
             var item = items[i];
 
-            html += '<a class="posterItem smallBackdropPosterItem" href="#" onclick="MediaPlayer.playById(\'' + item.Id + '\');">';
+            var cssClass = "posterItem smallBackdropPosterItem";
+
+            html += '<a class="' + cssClass + '" href="#" onclick="MediaPlayer.playById(\'' + item.Id + '\');">';
 
             var imageTags = item.ImageTags || {};
 
@@ -522,14 +629,18 @@
 
         }
 
+        if (limit && items.length > limit) {
+            html += '<p style="margin: .5em 0 0;padding-left: .5em;"><button class="' + moreButtonClass + '" data-inline="true" data-mini="true">More ...</button></p>';
+        }
+
         return html;
     }
 
-    function renderSpecials(page, item) {
+    function renderSpecials(page, item, limit) {
 
         ApiClient.getSpecialFeatures(Dashboard.getCurrentUserId(), item.Id).done(function (specials) {
 
-            $('#specialsContent', page).html(getVideosHtml(specials));
+            $('#specialsContent', page).html(getVideosHtml(specials, limit, "moreSpecials")).trigger('create');
 
         });
     }
@@ -543,19 +654,59 @@
         });
     }
 
-    function renderCast(page, item, context) {
+    function renderCast(page, item, context, limit) {
+
         var html = '';
 
         var casts = item.People || [];
 
         for (var i = 0, length = casts.length; i < length; i++) {
 
-            var cast = casts[i];
+            if (limit && i >= limit) {
-
+                break;
-            html += LibraryBrowser.createCastImage(cast, context);
             }
 
-        $('#castContent', page).html(html);
+            var cast = casts[i];
+
+            html += '<a class="tileItem smallPosterTileItem" href="itembynamedetails.html?context=' + context + '&person=' + ApiClient.encodeName(cast.Name) + '">';
+
+            var imgUrl;
+
+            if (cast.PrimaryImageTag) {
+
+                imgUrl = ApiClient.getPersonImageUrl(cast.Name, {
+                    width: 130,
+                    tag: cast.PrimaryImageTag,
+                    type: "primary"
+                });
+
+            } else {
+
+                imgUrl = "css/images/items/list/person.png";
+            }
+
+            html += '<div class="tileImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
+
+
+
+            html += '<div class="tileContent">';
+
+            html += '<p>' + cast.Name + '</p>';
+
+            var role = cast.Role ? "as " + cast.Role : cast.Type;
+
+            html += '<p>' + (role || "") + '</p>';
+
+            html += '</div>';
+
+            html += '</a>';
+        }
+
+        if (limit && casts.length > limit) {
+            html += '<p style="margin: .5em 0 0;padding-left: .5em;"><button class="morePeople" data-inline="true" data-mini="true">More ...</button></p>';
+        }
+
+        $('#castContent', page).html(html).trigger('create');
     }
 
     function play(startPosition) {
@@ -581,11 +732,33 @@
 
         var page = this;
 
+        $(page).on("click.moreScenes", ".moreScenes", function () {
+
+            renderScenes(page, currentItem);
+
+        }).on("click.morePeople", ".morePeople", function () {
+
+            renderCast(page, currentItem, getContext(currentItem));
+
+        }).on("click.moreSpecials", ".moreSpecials", function () {
+
+            renderSpecials(page, currentItem);
+
+        }).on("click.moreCriticReviews", ".moreCriticReviews", function () {
+
+            renderCriticReviews(page, currentItem);
+
+        });
+
         reload(page);
 
     }).on('pagehide', "#itemDetailPage", function () {
 
         currentItem = null;
+
+        var page = this;
+
+        $(page).off("click.moreScenes").off("click.morePeople").off("click.moreSpecials").off("click.moreCriticReviews");
     });
 
     function itemDetailPage() {

dashboard-ui/scripts/addpluginpage.js

@@ -166,7 +166,7 @@
             $('#pViewWebsite', page).hide();
         }
 
-        if (pkg.previewImage) {
+        if (pkg.previewImage || pkg.thumbImage) {
 
             var color = pkg.tileColor || "#2572EB";
             var img = pkg.previewImage ? pkg.previewImage : pkg.thumbImage;

dashboard-ui/scripts/librarybrowser.js

@@ -700,51 +700,51 @@
             var links = [];
 
             if (item.HomePageUrl) {
-                links.push('<a class="ui-link" href="' + item.HomePageUrl + '" target="_blank">Website</a>');
+                links.push('<a class="textlink" href="' + item.HomePageUrl + '" target="_blank">Website</a>');
             }
 
             var providerIds = item.ProviderIds || {};
 
             if (providerIds.Imdb) {
                 if (item.Type == "Movie" || item.Type == "Episode" || item.Type == "Trailer")
-                    links.push('<a class="ui-link" href="http://www.imdb.com/title/' + providerIds.Imdb + '" target="_blank">IMDb</a>');
+                    links.push('<a class="textlink" href="http://www.imdb.com/title/' + providerIds.Imdb + '" target="_blank">IMDb</a>');
                 else if (item.Type == "Person")
-                    links.push('<a class="ui-link" href="http://www.imdb.com/name/' + providerIds.Imdb + '" target="_blank">IMDb</a>');
+                    links.push('<a class="textlink" href="http://www.imdb.com/name/' + providerIds.Imdb + '" target="_blank">IMDb</a>');
             }
             if (providerIds.Tmdb) {
                 if (item.Type == "Movie" || item.Type == "Trailer")
-                    links.push('<a class="ui-link" href="http://www.themoviedb.org/movie/' + providerIds.Tmdb + '" target="_blank">TMDB</a>');
+                    links.push('<a class="textlink" href="http://www.themoviedb.org/movie/' + providerIds.Tmdb + '" target="_blank">TMDB</a>');
                 else if (item.Type == "BoxSet")
-                    links.push('<a class="ui-link" href="http://www.themoviedb.org/collection/' + providerIds.Tmdb + '" target="_blank">TMDB</a>');
+                    links.push('<a class="textlink" href="http://www.themoviedb.org/collection/' + providerIds.Tmdb + '" target="_blank">TMDB</a>');
                 else if (item.Type == "Person")
-                    links.push('<a class="ui-link" href="http://www.themoviedb.org/person/' + providerIds.Tmdb + '" target="_blank">TMDB</a>');
+                    links.push('<a class="textlink" href="http://www.themoviedb.org/person/' + providerIds.Tmdb + '" target="_blank">TMDB</a>');
             }
             if (providerIds.Tvdb)
-                links.push('<a class="ui-link" href="http://thetvdb.com/index.php?tab=series&id=' + providerIds.Tvdb + '" target="_blank">TVDB</a>');
+                links.push('<a class="textlink" href="http://thetvdb.com/index.php?tab=series&id=' + providerIds.Tvdb + '" target="_blank">TVDB</a>');
             if (providerIds.Tvcom) {
                 if (item.Type == "Episode")
-                    links.push('<a class="ui-link" href="http://www.tv.com/shows/' + providerIds.Tvcom + '" target="_blank">TV.com</a>');
+                    links.push('<a class="textlink" href="http://www.tv.com/shows/' + providerIds.Tvcom + '" target="_blank">TV.com</a>');
                 else if (item.Type == "Person")
-                    links.push('<a class="ui-link" href="http://www.tv.com/people/' + providerIds.Tvcom + '" target="_blank">TV.com</a>');
+                    links.push('<a class="textlink" href="http://www.tv.com/people/' + providerIds.Tvcom + '" target="_blank">TV.com</a>');
             }
             if (providerIds.Musicbrainz) {
 
                 if (item.Type == "MusicArtist" || item.Type == "Artist") {
-                    links.push('<a class="ui-link" href="http://musicbrainz.org/artist/' + providerIds.Musicbrainz + '" target="_blank">MusicBrainz</a>');
+                    links.push('<a class="textlink" href="http://musicbrainz.org/artist/' + providerIds.Musicbrainz + '" target="_blank">MusicBrainz</a>');
                 } else {
-                    links.push('<a class="ui-link" href="http://musicbrainz.org/release/' + providerIds.Musicbrainz + '" target="_blank">MusicBrainz</a>');
+                    links.push('<a class="textlink" href="http://musicbrainz.org/release/' + providerIds.Musicbrainz + '" target="_blank">MusicBrainz</a>');
                 }
 
             }
             if (providerIds.Gamesdb)
-                links.push('<a class="ui-link" href="http://www.games-db.com/Game/' + providerIds.Gamesdb + '" target="_blank">GamesDB</a>');
+                links.push('<a class="textlink" href="http://www.games-db.com/Game/' + providerIds.Gamesdb + '" target="_blank">GamesDB</a>');
 
 
             if (links.length) {
 
                 var html = 'Links:&nbsp;&nbsp;' + links.join('&nbsp;&nbsp;/&nbsp;&nbsp;');
 
-                $(linksElem).html(html);
+                $(linksElem).html(html).trigger('create');
 
             } else {
                 $(linksElem).hide();
@@ -1272,7 +1272,7 @@
                     try {
                         var date = parseISO8601Date(item.PremiereDate, { toLocal: true });
 
-                        text = (date.getMonth() + 1) + "/" + (date.getDate()) + "/" + date.getFullYear();
+                        text = date.toLocaleDateString();
                         miscInfo.push(text);
                     }
                     catch (e) {
@@ -1379,7 +1379,7 @@
                         html += '&nbsp;&nbsp;/&nbsp;&nbsp;';
                     }
 
-                    html += '<a href="itembynamedetails.html?context=' + context + '&studio=' + ApiClient.encodeName(item.Studios[i].Name) + '">' + item.Studios[i].Name + '</a>';
+                    html += '<a class="textlink" href="itembynamedetails.html?context=' + context + '&studio=' + ApiClient.encodeName(item.Studios[i].Name) + '">' + item.Studios[i].Name + '</a>';
                 }
 
                 elem.show().html(html).trigger('create');
@@ -1401,7 +1401,7 @@
                         html += '&nbsp;&nbsp;/&nbsp;&nbsp;';
                     }
 
-                    html += '<a href="itembynamedetails.html?context=' + context + '&genre=' + ApiClient.encodeName(item.Genres[i]) + '">' + item.Genres[i] + '</a>';
+                    html += '<a class="textlink" href="itembynamedetails.html?context=' + context + '&genre=' + ApiClient.encodeName(item.Genres[i]) + '">' + item.Genres[i] + '</a>';
                 }
 
                 elem.show().html(html).trigger('create');
@@ -1583,46 +1583,6 @@
             }) + '" />';
             html += '</div>';
 
-            return html;
-        },
-
-        createCastImage: function (cast, context) {
-
-            var html = '';
-
-            html += '<a class="tileItem smallPosterTileItem" href="itembynamedetails.html?context=' + context + '&person=' + ApiClient.encodeName(cast.Name) + '">';
-
-            var imgUrl;
-
-            if (cast.PrimaryImageTag) {
-
-                imgUrl = ApiClient.getPersonImageUrl(cast.Name, {
-                    width: 130,
-                    tag: cast.PrimaryImageTag,
-                    type: "primary"
-                });
-
-            } else {
-
-                imgUrl = "css/images/items/list/person.png";
-            }
-
-            html += '<div class="tileImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
-
-
-
-            html += '<div class="tileContent">';
-
-            html += '<p>' + cast.Name + '</p>';
-
-            var role = cast.Role ? "as " + cast.Role : cast.Type;
-
-            html += '<p>' + (role || "") + '</p>';
-
-            html += '</div>';
-
-            html += '</a>';
-
             return html;
         }
 

packages.config

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <packages>
-  <package id="MediaBrowser.ApiClient.Javascript" version="3.0.104" targetFramework="net45" />
+  <package id="MediaBrowser.ApiClient.Javascript" version="3.0.105" targetFramework="net45" />
   <package id="ServiceStack.Common" version="3.9.44" targetFramework="net45" />
   <package id="ServiceStack.Text" version="3.9.44" targetFramework="net45" />
 </packages>