allow editing of channel images in the web client

ApiClient.js

@@ -389,6 +389,21 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout, wi
             });
         };
 
+        self.getLiveTvChannel = function (id) {
+
+            if (!id) {
+                throw new Error("null id");
+            }
+
+            var url = self.getUrl("/LiveTv/Channels/" + id);
+
+            return self.ajax({
+                type: "GET",
+                url: url,
+                dataType: "json"
+            });
+        };
+
         self.getLiveTvChannels = function (options) {
 
             var url = self.getUrl("/LiveTv/Channels", options || {});
@@ -1236,7 +1251,11 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout, wi
 
             if (itemType == "Artist") {
                 url = self.getUrl("Artists/" + self.encodeName(itemName) + "/Images");
-            } else if (itemType == "Genre") {
+            }
+            else if (itemType == "Channel") {
+                url = self.getUrl("LiveTv/Channels/" + itemId + "/Images");
+            }
+            else if (itemType == "Genre") {
                 url = self.getUrl("Genres/" + self.encodeName(itemName) + "/Images");
             } else if (itemType == "GameGenre") {
                 url = self.getUrl("GameGenres/" + self.encodeName(itemName) + "/Images");
@@ -1292,7 +1311,11 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout, wi
 
             if (itemType == "Artist") {
                 url = self.getUrl("Artists/" + self.encodeName(itemName) + "/Images/" + imageType + "/" + imageIndex + "/Index", options);
-            } else if (itemType == "Genre") {
+            }
+            else if (itemType == "Channel") {
+                url = self.getUrl("LiveTv/Channels/" + itemId + "/Images/" + imageType + "/" + imageIndex + "/Index", options);
+            }
+            else if (itemType == "Genre") {
                 url = self.getUrl("Genres/" + self.encodeName(itemName) + "/Images/" + imageType + "/" + imageIndex + "/Index", options);
             } else if (itemType == "GameGenre") {
                 url = self.getUrl("GameGenres/" + self.encodeName(itemName) + "/Images/" + imageType + "/" + imageIndex + "/Index", options);
@@ -1322,7 +1345,11 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout, wi
 
             if (itemType == "Artist") {
                 url = self.getUrl("Artists/" + self.encodeName(itemName) + "/Images");
-            } else if (itemType == "Genre") {
+            }
+            else if (itemType == "Channel") {
+                url = self.getUrl("LiveTv/Channels/" + itemId + "/Images");
+            }
+            else if (itemType == "Genre") {
                 url = self.getUrl("Genres/" + self.encodeName(itemName) + "/Images");
             } else if (itemType == "GameGenre") {
                 url = self.getUrl("GameGenres/" + self.encodeName(itemName) + "/Images");
@@ -1455,7 +1482,11 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout, wi
 
             if (itemType == "Artist") {
                 url = self.getUrl("Artists/" + self.encodeName(itemName) + "/Images");
-            } else if (itemType == "Genre") {
+            }
+            else if (itemType == "Channel") {
+                url = self.getUrl("LiveTv/Channels/" + itemId + "/Images");
+            }
+            else if (itemType == "Genre") {
                 url = self.getUrl("Genres/" + self.encodeName(itemName) + "/Images");
             } else if (itemType == "GameGenre") {
                 url = self.getUrl("GameGenres/" + self.encodeName(itemName) + "/Images");
@@ -2318,6 +2349,22 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout, wi
             });
         };
 
+        self.updateLiveTvChannel = function (item) {
+
+            if (!item) {
+                throw new Error("null item");
+            }
+
+            var url = self.getUrl("LiveTv/Channels/" + item.Id);
+
+            return self.ajax({
+                type: "POST",
+                url: url,
+                data: JSON.stringify(item),
+                contentType: "application/json"
+            });
+        };
+
         self.updateArtist = function (item) {
 
             if (!item) {

dashboard-ui/edititemmetadata.html

@@ -30,9 +30,9 @@
                                 <div class="circle1"></div>
                                 <div style="margin-top: -15px;"></div>
                             </div>
-
+                            <div class="fldRefresh" style="display: none; vertical-align: bottom;">
                                 <button id="btnRefresh" type="button" data-icon="refresh" data-mini="true" data-theme="b" data-inline="true">Refresh</button>
-
+                            </div>
                             <div id="fldRecursive" style="display: none; vertical-align: bottom;">
                                 <label for="chkRecursive">Refresh child items</label>
                                 <input type="checkbox" id="chkRecursive" name="chkRecursive" data-mini="true" checked="checked" data-inline="true" />
@@ -42,7 +42,7 @@
                                     <button id="btnDelete" type="button" data-icon="delete" data-mini="true" data-theme="a" data-inline="true">Delete</button>
                                 </div>
                             </div>
-                            <div style="margin: .5em 0 1em;">
+                            <div class="fldRefresh" style="display: none; margin: .5em 0 1em;">
                                 <div class="fieldDescription">A refresh will cause internet metadata to be re-downloaded (if enabled, and dependent on metadata settings).</div>
                             </div>
                         </div>
@@ -56,15 +56,15 @@
                                 <label for="txtName">Name:</label>
                                 <input type="text" id="txtName" name="txtName" required="required" data-mini="true" />
                             </div>
-                            <div data-role="fieldcontain">
+                            <div data-role="fieldcontain" id="fldSortName" style="display: none;">
                                 <label for="txtSortName">Sort name:</label>
                                 <input type="text" id="txtSortName" name="txtSortName" data-mini="true" />
                             </div>
-                            <div data-role="fieldcontain">
+                            <div data-role="fieldcontain" id="fldSourceType" style="display: none;">
                                 <label for="txtDisplayMediaType">Source type:</label>
                                 <input type="text" id="txtDisplayMediaType" name="txtDisplayMediaType" data-mini="true" />
                             </div>
-                            <div data-role="fieldcontain">
+                            <div data-role="fieldcontain" id="fldDateAdded" style="display: none;">
                                 <label for="txtDateAdded">Date added:</label>
                                 <input type="date" id="txtDateAdded" name="txtDateAdded" data-mini="true" />
                             </div>
@@ -116,11 +116,11 @@
                                 <label for="txtOverview">Overview:</label>
                                 <textarea name="txtOverview" id="txtOverview" data-mini="true" data-role="fieldcontain"></textarea>
                             </div>
-                            <div data-role="fieldcontain">
+                            <div data-role="fieldcontain" id="fldPremiereDate" style="display: none;">
                                 <label id="lblPremiereDate" for="txtPremiereDate">Release date:</label>
                                 <input type="date" id="txtPremiereDate" name="txtPremiereDate" data-mini="true" />
                             </div>
-                            <div data-role="fieldcontain">
+                            <div data-role="fieldcontain" id="fldYear" style="display: none;">
                                 <label id="lblYear" for="txtProductionYear">Year:</label>
                                 <input type="number" id="txtProductionYear" name="txtProductionYear" data-mini="true" />
                             </div>
@@ -300,7 +300,7 @@
                                 <ul data-role="listview" data-inset="true" data-split-icon="delete" id="listStudios"></ul>
                             </div>
                         </div>
-                        <div data-role="collapsible">
+                        <div data-role="collapsible" id="tagsCollapsible" style="display: none;">
                             <h3>Tags</h3>
                             <div data-role="editableListviewContainer">
                                 <div data-role="fieldcontain">
@@ -310,7 +310,7 @@
                                 <ul data-role="listview" data-inset="true" data-split-icon="delete" id="listTags"></ul>
                             </div>
                         </div>
-                        <div data-role="collapsible">
+                        <div data-role="collapsible" id="metadataSettingsCollapsible" style="display: none;">
                             <h3>Metadata Settings</h3>
                             <div>
                                 <p>

dashboard-ui/livetvchannel.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Media Browser</title>
+</head>
+<body>
+    <div id="liveTvChannelPage" data-role="page" class="page libraryPage" data-theme="a" data-view="livetv">
+        <div class="libraryViewNav">
+            <a href="livetvguide.html">Guide</a>
+            <a href="livetvchannels.html" class="ui-btn-active">Channels</a>
+            <a href="livetvrecordings.html">Recordings</a>
+        </div>
+        <div id="itemBackdrop" class="itemBackdrop noBackdrop">
+            <div class="itemBackdropContent">
+                <table class="detailPageContent primaryDetailPageContent">
+                    <tr>
+                        <td style="vertical-align: top; padding: 10px 1em 10px 0;">
+                            <div id="itemImage" class="itemImageContainer"></div>
+                        </td>
+                        <td style="vertical-align: top; padding: 0;">
+                            <p><span class="itemName"></span><span class="itemMiscInfo" style="display: inline;"></span></p>
+                            <p>
+                                <span class="userDataIcons" style="margin-left: 2em;"></span>
+                            </p>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+        <div class="ui-body-a" style="text-align: center; padding: .25em 0 .5em;">
+            <span id="playButtonContainer" style="display: none;">
+                <button id="btnPlay" type="button" data-icon="play" data-inline="true" data-mini="true">Play</button>
+            </span>
+            <span>
+                <button id="btnRemote" type="button" data-icon="hand-up" data-inline="true" data-mini="true">Remote</button>
+            </span>
+            <span id="editButtonContainer" style="display: none;">
+                <button id="btnEdit" type="button" data-icon="pencil" data-inline="true" data-mini="true">Edit</button>
+            </span>
+        </div>
+        <div data-role="content">
+            <div class="detailPageContent">
+            </div>
+        </div>
+    </div>
+</body>
+</html>

dashboard-ui/scripts/edititemimages.js

@@ -300,7 +300,7 @@
 
             updateTabs(page, item);
 
-            if (item.Type == "Person" || item.Type == "Studio" || item.Type == "MusicGenre" || item.Type == "Genre" || item.Type == "MusicArtist" || item.Type == "GameGenre") {
+            if (item.Type == "Person" || item.Type == "Studio" || item.Type == "MusicGenre" || item.Type == "Genre" || item.Type == "MusicArtist" || item.Type == "GameGenre" || item.Type == "Channel") {
                 $('#btnEditPeople', page).hide();
             } else {
                 $('#btnEditPeople', page).show();

dashboard-ui/scripts/edititemmetadata.js

@@ -6,6 +6,10 @@
 
         var name = item.Name;
 
+        // Channel number
+        if (item.Number) {
+            name = item.Number + " - " + name;
+        }
         if (item.IndexNumber != null && item.Type != "Season") {
             name = item.IndexNumber + " - " + name;
         }
@@ -33,7 +37,7 @@
         }
 
         if (!item.BackdropImageTags || !item.BackdropImageTags.length) {
-            if (item.Type !== "Episode" && item.Type !== "Season" && item.MediaType !== "Audio") {
+            if (item.Type !== "Episode" && item.Type !== "Season" && item.MediaType !== "Audio" && item.Type !== "Channel") {
                 htmlName += '<img src="css/images/editor/missingbackdrop.png" title="Missing backdrop image." />';
             }
         }
@@ -63,21 +67,118 @@
         return { attr: { id: item.Id, rel: rel, itemtype: item.Type }, data: htmlName, state: state };
     }
 
+    function getLiveTvServiceNode(item, folderState) {
+
+        var state = folderState;
+
+        var name = item.Name;
+
+        var cssClass = "editorNode";
+
+        var htmlName = "<div class='" + cssClass + "'>";
+
+        htmlName += name;
+
+        htmlName += "</div>";
+
+        var rel = item.IsFolder ? 'folder' : 'default';
+
+        return { attr: { id: item.Name, rel: rel, itemtype: 'livetvservice' }, data: htmlName, state: state };
+    }
+
+    function loadChildrenOfRootNode(callback) {
+
+
+        var promise1 = ApiClient.getRootFolder(Dashboard.getCurrentUserId());
+
+        var promise2 = ApiClient.getLiveTvServices();
+
+        $.when(promise1, promise2).done(function (response1, response2) {
+
+            var rootFolder = response1[0];
+            var liveTvServices = response2[0];
+
+            var nodes = [];
+
+            nodes.push(getNode(rootFolder, 'open'));
+
+            if (liveTvServices.length) {
+                nodes.push({ attr: { id: 'livetv', rel: 'folder', itemtype: 'livetv' }, data: 'Live TV', state: 'open' });
+            }
+
+            callback(nodes);
+
+        });
+    }
+
+    function loadLiveTvServices(openItems, callback) {
+
+        ApiClient.getLiveTvServices().done(function (services) {
+
+            var nodes = services.map(function (i) {
+
+                var state = openItems.indexOf(i.Id) == -1 ? 'closed' : 'open';
+
+                return getLiveTvServiceNode(i, state);
+
+            });
+
+            callback(nodes);
+
+        });
+
+    }
+
+    function loadLiveTvChannels(service, openItems, callback) {
+
+        ApiClient.getLiveTvChannels({ ServiceName: service }).done(function (services) {
+
+            var nodes = services.map(function (i) {
+
+                var state = openItems.indexOf(i.Id) == -1 ? 'closed' : 'open';
+
+                return getNode(i, state);
+
+            });
+
+            callback(nodes);
+
+        });
+
+    }
+
     function loadNode(page, node, openItems, selectedId, currentUser, callback) {
 
         if (node == '-1') {
 
-            ApiClient.getRootFolder(Dashboard.getCurrentUserId()).done(function (folder) {
+            callback({ attr: { id: 'root', rel: 'folder', itemtype: 'root' }, data: 'Root', state: 'open' });
+            return;
+        }
 
-                callback(getNode(folder, 'open'));
+        var id = node.attr("id");
 
-            });
+        if (id == 'root') {
 
+            loadChildrenOfRootNode(callback);
+            return;
+        }
+
+        if (id == 'livetv') {
+
+            loadLiveTvServices(openItems, callback);
+            return;
+        }
+
+        var itemtype = node.attr("itemtype");
+
+        if (itemtype == 'livetvservice') {
+
+            loadLiveTvChannels(id, openItems, callback);
             return;
         }
 
         var query = {
-            ParentId: node.attr("id"),
+            ParentId: id,
             SortBy: 'SortName',
             Fields: 'MetadataSettings'
         };
@@ -260,6 +361,14 @@
                 return;
             }
 
+            name = getParameterByName('channelid', url);
+
+            if (name) {
+                self.currentItemType = "Channel";
+                self.currentItemId = name;
+                return;
+            }
+
             var id = getParameterByName('id', url);
 
             if (id) {
@@ -274,6 +383,10 @@
             var currentItemName = self.currentItemName;
             var currentItemId = self.currentItemId;
 
+            if (currentItemType == "Channel") {
+                return ApiClient.getLiveTvChannel(currentItemId);
+            }
+
             if (currentItemType == "Person") {
                 return ApiClient.getPerson(currentItemName, Dashboard.getCurrentUserId());
             }
@@ -387,7 +500,7 @@
             setFieldVisibilities(page, item);
             fillItemInfo(page, item);
 
-            if (item.Type == "Person" || item.Type == "Studio" || item.Type == "MusicGenre" || item.Type == "Genre" || item.Type == "MusicArtist") {
+            if (item.Type == "Person" || item.Type == "Studio" || item.Type == "MusicGenre" || item.Type == "Genre" || item.Type == "MusicArtist" || item.Type == "GameGenre" || item.Type == "Channel") {
                 $('#btnEditPeople', page).hide();
             } else {
                 $('#btnEditPeople', page).show();
@@ -497,7 +610,7 @@
             $('#fldAirTime', page).hide();
         }
 
-        if (item.MediaType == "Video") {
+        if (item.MediaType == "Video" && item.Type != "Channel") {
             $('#fld3dFormat', page).show();
         } else {
             $('#fld3dFormat', page).hide();
@@ -535,20 +648,45 @@
             $('#fldMusicBrainzReleaseGroupId', page).hide();
         }
 
-        if (item.Type == "Person" || item.Type == "Genre" || item.Type == "Studio" || item.Type == "GameGenre" || item.Type == "MusicGenre") {
+        if (item.Type == "Person" || item.Type == "Genre" || item.Type == "Studio" || item.Type == "GameGenre" || item.Type == "MusicGenre" || item.Type == "Channel") {
             $('#fldCommunityRating', page).hide();
             $('#fldCommunityVoteCount', page).hide();
-            $('#fldOfficialRating', page).hide();
-            $('#fldCustomRating', page).hide();
             $('#genresCollapsible', page).hide();
             $('#studiosCollapsible', page).hide();
+
+            if (item.Type == "Channel") {
+                $('#fldOfficialRating', page).show();
+            } else {
+                $('#fldOfficialRating', page).hide();
+            }
+            $('#fldCustomRating', page).hide();
         } else {
             $('#fldCommunityRating', page).show();
             $('#fldCommunityVoteCount', page).show();
-            $('#fldOfficialRating', page).show();
-            $('#fldCustomRating', page).show();
             $('#genresCollapsible', page).show();
             $('#studiosCollapsible', page).show();
+            $('#fldOfficialRating', page).show();
+            $('#fldCustomRating', page).show();
+        }
+
+        if (item.Type == "Channel") {
+            $('#tagsCollapsible', page).hide();
+            $('#metadataSettingsCollapsible', page).hide();
+            $('#fldPremiereDate', page).hide();
+            $('#fldSortName', page).hide();
+            $('#fldDateAdded', page).hide();
+            $('#fldSourceType', page).hide();
+            $('#fldYear', page).hide();
+            $('.fldRefresh', page).hide();
+        } else {
+            $('#tagsCollapsible', page).show();
+            $('#metadataSettingsCollapsible', page).show();
+            $('#fldPremiereDate', page).show();
+            $('#fldSortName', page).show();
+            $('#fldDateAdded', page).show();
+            $('#fldSourceType', page).show();
+            $('#fldYear', page).show();
+            $('.fldRefresh', page).show();
         }
 
         if (item.Type == "Person") {
@@ -563,7 +701,7 @@
             $('#fldPlaceOfBirth', page).hide();
         }
 
-        if (item.MediaType == "Video") {
+        if (item.MediaType == "Video" && item.Type != "Channel") {
             $('#fldOriginalAspectRatio', page).show();
         } else {
             $('#fldOriginalAspectRatio', page).hide();
@@ -638,7 +776,9 @@
 
         populateListView($('#listAirDays', page), item.AirDays);
         populateListView($('#listGenres', page), item.Genres);
-        populateListView($('#listStudios', page), item.Studios.map(function (element) { return element.Name || ''; }));
+
+        populateListView($('#listStudios', page), (item.Studios || []).map(function (element) { return element.Name || ''; }));
+
         populateListView($('#listTags', page), item.Tags);
         var enableInternetProviders = (item.EnableInternetProviders || false);
         $("#enableInternetProviders", page).attr('checked', enableInternetProviders).checkboxradio('refresh');
@@ -1013,6 +1153,9 @@
             else if (currentItem.Type == "Studio") {
                 updatePromise = ApiClient.updateStudio(item);
             }
+            else if (currentItem.Type == "Channel") {
+                updatePromise = ApiClient.updateLiveTvChannel(item);
+            }
             else {
                 updatePromise = ApiClient.updateItem(item);
             }

dashboard-ui/scripts/librarybrowser.js

@@ -557,6 +557,9 @@
             // Handle search hints
             var id = item.Id || item.ItemId;
 
+            if (item.Type == "Channel") {
+                return "livetvchannel.html?id=" + id;
+            }
             if (item.Type == "Series") {
                 return "itemdetails.html?id=" + id;
             }
@@ -1702,13 +1705,24 @@
 
             var imageTags = item.ImageTags || {};
             
+            if (item.PrimaryImageTag) {
+                imageTags.Primary = item.PrimaryImageTag;
+            }
+
             var html = '';
 
             var url;
 
             if (imageTags.Primary) {
 
-                if (item.Type == "Person") {
+                if (item.Type == "Channel") {
+                    url = ApiClient.getUrl("LiveTV/Channels/" + item.Id + "/Images/Primary", {
+                        maxheight: 480,
+                        tag: imageTags.Primary,
+                        type: "Primary"
+                    });
+                }
+                else if (item.Type == "Person") {
                     url = ApiClient.getPersonImageUrl(item.Name, {
                         maxheight: 480,
                         tag: imageTags.Primary,

dashboard-ui/scripts/livetvchannel.js

@@ -0,0 +1,80 @@
+(function ($, document, apiClient) {
+
+    var currentItem
+
+    function reload(page) {
+
+        Dashboard.showLoadingMsg();
+
+        ApiClient.getLiveTvChannel(getParameterByName('id')).done(function (item) {
+
+            currentItem = item;
+
+            var name = item.Name;
+
+            $('#itemImage', page).html(LibraryBrowser.getDetailImageHtml(item));
+
+            Dashboard.setPageTitle(name);
+
+            $('.itemName', page).html(name);
+
+            if (ApiClient.isWebSocketOpen()) {
+
+                var vals = [item.Type, item.Id, item.Name];
+
+                vals.push('livetv');
+
+                ApiClient.sendWebSocketMessage("Context", vals.join('|'));
+            }
+
+            if (MediaPlayer.canPlay(item)) {
+                $('#playButtonContainer', page).show();
+            } else {
+                $('#playButtonContainer', page).hide();
+            }
+
+            Dashboard.getCurrentUser().done(function (user) {
+
+                if (user.Configuration.IsAdministrator && item.LocationType !== "Offline") {
+                    $('#editButtonContainer', page).show();
+                } else {
+                    $('#editButtonContainer', page).hide();
+                }
+
+            });
+
+            Dashboard.hideLoadingMsg();
+        });
+    }
+
+    $(document).on('pageinit', "#liveTvChannelPage", function () {
+
+        var page = this;
+
+        $('#btnPlay', page).on('click', function () {
+            var userdata = currentItem.UserData || {};
+            LibraryBrowser.showPlayMenu(this, currentItem.Name, currentItem.Type, currentItem.MediaType, userdata.PlaybackPositionTicks);
+        });
+
+        $('#btnRemote', page).on('click', function () {
+
+            RemoteControl.showMenuForItem({ item: currentItem, context: 'livetv' });
+        });
+
+        $('#btnEdit', page).on('click', function () {
+
+            Dashboard.navigate("edititemmetadata.html?channelid=" + currentItem.Id);
+        });
+
+    }).on('pageshow', "#liveTvChannelPage", function () {
+
+        var page = this;
+
+        reload(page);
+
+    }).on('pagehide', "#liveTvChannelPage", function () {
+
+        currentItem = null;
+    });
+
+})(jQuery, document, ApiClient);

dashboard-ui/scripts/livetvchannels.js

@@ -4,7 +4,7 @@
 
         var html = '';
 
-        html += '<a class="squareTileItem tileItem" href="#">';
+        html += '<a class="squareTileItem tileItem" href="livetvchannel.html?id=' + channel.Id + '">';
 
         var imgUrl;
         var isDefault;

packages.config

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