added live channel playback

dashboard-ui/css/icons.css

@@ -93,3 +93,10 @@
 .ui-nosvg .ui-icon-subtitles:after {
     background-image: url("images/icons/subtitles.png");
 }
+.ui-icon-tv:after {
+    background-image: url("images/icons/tv.png");
+}
+/* Fallback */
+.ui-nosvg .ui-icon-tv:after {
+    background-image: url("images/icons/tv.png");
+}

dashboard-ui/dashboard.html

@@ -24,7 +24,7 @@
                                 <p><strong>A new version of Media Browser Server is available!</strong></p>
                                 <p id="newVersionNumber"></p>
                                 <div id="btnUpdateApplicationContainer">
-                                    <button id="btnUpdateApplication" type="button" data-icon="arrow-d" data-theme="b">Update Now</button>
+                                    <button id="btnUpdateApplication" type="button" data-icon="arrow-d" data-theme="b" onclick="DashboardPage.updateApplication();">Update Now</button>
                                 </div>
                                 <div id="btnManualUpdateContainer">
                                     Please shutdown the server and <a href="http://www.mediabrowser3.com/download" target="_blank">update manually.</a>

dashboard-ui/scripts/librarybrowser.js

@@ -564,6 +564,9 @@
             if (item.Type == "Channel") {
                 return "livetvchannel.html?id=" + id;
             }
+            if (item.Type == "Program") {
+                return "livetvprogram.html?id=" + id;
+            }
             if (item.Type == "Series") {
                 return "itemdetails.html?id=" + id;
             }
@@ -599,10 +602,8 @@
             }
 
             if (item.Type == "MusicArtist") {
-                if (itemByNameContext == "music") {
                 return "itembynamedetails.html?musicartist=" + ApiClient.encodeName(item.Name) + "&context=" + (itemByNameContext || "music");
             }
-            }
 
             return item.IsFolder ? (id ? "itemlist.html?parentId=" + id : "#") : "itemdetails.html?id=" + id;
 

dashboard-ui/scripts/mediaplayer.js

@@ -24,6 +24,7 @@
 
         self.playlist = [];
         var currentPlaylistIndex = 0;
+        var channelsList;
 
         function requestFullScreen(element) {
             // Supports most browsers and their versions.
@@ -283,6 +284,16 @@
 
                 hideFlyout($('#qualityFlyout'));
             });
+
+            $('#channelsFlyout').on('click', '.mediaFlyoutOption', function () {
+
+                if (!$(this).hasClass('selectedMediaFlyoutOption')) {
+                    var channelId = this.getAttribute('data-channelid');
+                    self.playById(channelId, 'Channel');
+                }
+
+                hideFlyout($('#channelsFlyout'));
+            });
         });
 
         function endsWith(text, pattern) {
@@ -312,7 +323,7 @@
                     positionSlider.val(percent).slider('enable').slider('refresh');
                 }
             } else {
-                positionSlider.slider('disable');
+                positionSlider.slider('disable').slider('refresh');
             }
 
             currentTimeElement.html(timeText);
@@ -389,6 +400,7 @@
             $('#audioTracksButton', nowPlayingBar).hide();
             $('#subtitleButton', nowPlayingBar).hide();
             $('#chaptersButton', nowPlayingBar).hide();
+            $('#channelsButton', nowPlayingBar).hide();
 
             $('#mediaElement', nowPlayingBar).html(html);
             var audioElement = $("audio", nowPlayingBar);
@@ -583,6 +595,8 @@
                 $('#fullscreenButton', nowPlayingBar).show();
             }
 
+            var channelsButton = $('#channelsButton', nowPlayingBar).hide();
+
             var videoElement = $("video", nowPlayingBar);
 
             var initialVolume = localStorage.getItem("volume") || 0.5;
@@ -641,6 +655,22 @@
             currentItem = item;
             curentDurationTicks = item.RunTimeTicks;
 
+            if (!channelsList) {
+
+                ApiClient.getLiveTvChannels({
+
+                    userId: Dashboard.getCurrentUserId()
+
+                }).done(function (result) {
+
+                    channelsList = result.Items;
+
+                    if (result.Items.length) {
+                        channelsButton.show();
+                    }
+                });
+            }
+
             return videoElement[0];
         };
 
@@ -919,13 +949,24 @@
                     tag: item.ImageTags.Thumb
                 });
 
-            } else {
+            }
+            else if (item.Type == "Channel" || item.Type == "Recording") {
+                url = "css/images/items/detail/tv.png";
+            }
+            else if (item.MediaType == "Audio") {
+                url = "css/images/items/detail/audio.png";
+            }
+            else {
                 url = "css/images/items/detail/video.png";
             }
 
             var name = item.Name;
             var seriesName = '';
 
+            // Channel number
+            if (item.Number) {
+                name = item.Number + ' ' + name;
+            }
             if (item.IndexNumber != null) {
                 name = item.IndexNumber + " - " + name;
             }
@@ -935,10 +976,15 @@
             if (item.SeriesName || item.Album || item.ProductionYear) {
                 seriesName = item.SeriesName || item.Album || item.ProductionYear;
             }
+            if (item.CurrentProgram) {
+                seriesName = item.CurrentProgram.Name;
+            }
 
-            html += "<div><a href='itemdetails.html?id=" + item.Id + "'><img class='nowPlayingBarImage ' alt='' title='' src='" + url + "' style='height:36px;display:inline-block;' /></a></div>";
+            var href = LibraryBrowser.getHref(item.CurrentProgram || item);
 
-            if (item.SeriesName || item.Album) {
+            html += "<div><a href='" + href + "'><img class='nowPlayingBarImage ' alt='' title='' src='" + url + "' style='height:36px;display:inline-block;' /></a></div>";
+
+            if (item.SeriesName || item.Album || item.CurrentProgram) {
                 html += '<div class="nowPlayingText">' + seriesName + '<br/>' + name + '</div>';
             } else {
                 html += '<div class="nowPlayingText">' + name + '<br/>' + seriesName + '</div>';
@@ -1340,7 +1386,9 @@
         };
 
         function hideFlyout(flyout) {
+
             flyout.hide().empty();
+
             $(document.body).off("mousedown.hidesearchhints");
         }
 
@@ -1579,8 +1627,8 @@
 
             var html = '';
 
-            var videoStream = item.MediaStreams.filter(function (i) {
+            var videoStream = (item.MediaStreams || []).filter(function (stream) {
-                return i.Type == "Video";
+                return stream.Type == "Video";
             })[0];
 
             var currentVideoBitrate = getParameterByName('videoBitrate', currentMediaElement.currentSrc);
@@ -1641,6 +1689,58 @@
             return html;
         }
 
+        function getChannelsFlyoutHtml(channels) {
+
+            var html = '';
+
+            for (var i = 0, length = channels.length; i < length; i++) {
+
+                var channel = channels[i];
+
+                html += '<div data-channelid="' + channel.Id + '" class="mediaFlyoutOption">';
+
+                var imgUrl;
+
+                if (channel.ImageTags.Primary) {
+
+                    imgUrl = ApiClient.getUrl("LiveTV/Channels/" + channel.Id + "/Images/Primary", {
+                        maxwidth: 200,
+                        tag: channel.ImageTags.Primary,
+                        type: "Primary"
+                    });
+                }
+                else {
+                    imgUrl = "css/images/media/tvflyout.png";
+                }
+
+                html += '<img class="mediaFlyoutOptionImage" src="' + imgUrl + '" />';
+
+                html += '<div class="mediaFlyoutOptionContent">';
+
+                var name = channel.Number + ' ' + channel.Name;
+
+                html += '<div class="mediaFlyoutOptionName">' + name + '</div>';
+                html += '<div class="mediaFlyoutOptionSecondaryText">' + channel.CurrentProgram.Name + '</div>';
+
+                html += '</div>';
+
+                html += "</div>";
+            }
+
+            return html;
+        }
+
+        self.showChannelsFlyout = function () {
+
+            var flyout = $('#channelsFlyout');
+
+            var channels = channelsList || [];
+            
+            showFlyout(flyout, '#channelsButton');
+
+            flyout.html(getChannelsFlyoutHtml(channels)).scrollTop(0);
+        };
+
         self.showAudioTracksFlyout = function () {
 
             var flyout = $('#audioTracksFlyout');

dashboard-ui/scripts/site.js

@@ -1337,6 +1337,9 @@ $(function () {
     footerHtml += '<button onclick="MediaPlayer.showChaptersFlyout();" id="chaptersButton" class="mediaButton chaptersButton" title="Scenes" type="button" data-icon="video" data-iconpos="notext" data-inline="true">Scenes</button>';
     footerHtml += '<div class="mediaFlyoutContainer"><div id="chaptersFlyout" style="display:none;" class="mediaPlayerFlyout chaptersFlyout"></div></div>';
 
+    footerHtml += '<button onclick="MediaPlayer.showChannelsFlyout();" id="channelsButton" class="mediaButton channelsButton" title="Channels" type="button" data-icon="tv" data-iconpos="notext" data-inline="true">Channels</button>';
+    footerHtml += '<div class="mediaFlyoutContainer"><div id="channelsFlyout" style="display:none;" class="mediaPlayerFlyout channelsFlyout"></div></div>';
+
     footerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="fullscreenButton" class="mediaButton fullscreenButton" title="Fullscreen" type="button" data-icon="action" data-iconpos="notext" data-inline="true">Fullscreen</button>';
 
     footerHtml += '</div>';