add channel downloading settings

dashboard-ui/channelsettings.html

@@ -13,16 +13,41 @@
 
                     <ul data-role="listview" class="ulForm">
                         <li>
-                            <label for="selectChannelResolution">${LabelChannelStreamOptionBestAvailable}</label>
+                            <label for="selectChannelResolution">${LabelChannelStreamQuality}</label>
                             <select id="selectChannelResolution">
-                                <option value="">${ChannelStreamOptionBestAvailable}</option>
+                                <option value="">${OptionBestAvailableStreamQuality}</option>
                                 <option value="1920">1080p</option>
                                 <option value="1280">720p</option>
                                 <option value="720">480p</option>
                             </select>
-                            <div class="fieldDescription">${LabelChannelStreamOptionBestAvailableHelp}</div>
+                            <div class="fieldDescription">${LabelChannelStreamQualityHelp}</div>
                         </li>
                     </ul>
+                    <div class="channelDownloading" style="display: none;">
+
+                        <div>
+                            <label>${LabelEnableChannelContentDownloadingFor}</label>
+                        </div>
+                        <div class="channelDownloadingList"></div>
+                        <div class="fieldDescription">${LabelEnableChannelContentDownloadingForHelp}</div>
+                        <br />
+                        <br />
+                        <ul data-role="listview" class="ulForm">
+                            <li>
+                                <label for="txtCachePath">${LabelChannelDownloadPath}</label>
+                                <div style="display: inline-block; width: 92%;">
+                                    <input type="text" id="txtCachePath" name="txtCachePath" data-mini="true" />
+                                </div>
+                                <button id="btnSelectCachePath" type="button" data-icon="search" data-iconpos="notext" data-inline="true">${ButtonSelectDirectory}</button>
+                                <div class="fieldDescription">${LabelChannelDownloadPathHelp}</div>
+                            </li>
+                            <li>
+                                <label for="txtDownloadAge">${LabelChannelDownloadAge}</label>
+                                <input type="number" id="txtDownloadAge" pattern="[0-9]*" min="1" data-mini="true" />
+                                <div class="fieldDescription">${LabelChannelDownloadAgeHelp}</div>
+                            </li>
+                        </ul>
+                    </div>
                     <ul data-role="listview" class="ulForm">
                         <li>
                             <button type="submit" data-theme="b" data-icon="check">

dashboard-ui/css/librarymenu.css

@@ -196,13 +196,13 @@
 
 .viewMenuTextLink {
     display: block;
-    padding: .6em .5em .6em 39px!important;
+    padding: .6em .5em .6em 38px!important;
     font-size: 15px;
     font-weight: 300!important;
     font-family: Roboto;
     background-repeat: no-repeat;
     background-size: 14px 14px;
-    background-position: 14px center;
+    background-position: 13px center;
 }
 
 .musicViewMenu {

dashboard-ui/scripts/channelsettings.js

@@ -1,22 +1,91 @@
 (function ($, document, window) {
 
-    function loadPage(page, config) {
+    function populateDownloadList(page, config, downloadableList) {
+
+        if (downloadableList.length) {
+            $('.channelDownloading', page).show();
+        } else {
+            $('.channelDownloading', page).hide();
+        }
+
+        var html = '';
+        
+        html += '<div data-role="controlgroup">';
+
+        for (var i = 0, length = downloadableList.length; i < length; i++) {
+
+            var channel = downloadableList[i];
+
+            var id = 'chkChannelDownload' + i;
+
+            var isChecked = config.ChannelOptions.DownloadingChannels.indexOf(channel.Id) != -1 ? ' checked="checked"' : '';
+
+            html += '<input class="chkChannelDownload" type="checkbox" name="' + id + '" id="' + id + '" data-channelid="' + channel.Id + '" data-mini="true"' + isChecked + '>';
+            html += '<label for="' + id + '">' + channel.Name + '</label>';
+        }
+
+        html += '</div>';
+
+        $('.channelDownloadingList', page).html(html).trigger('create');
+    }
+    
+    function loadPage(page, config, allChannelFeatures) {
+
+        var downloadableList = allChannelFeatures.filter(function (i) {
+            return i.CanDownloadAllMedia;
+        });
+
+        populateDownloadList(page, config, downloadableList);
 
         $('#selectChannelResolution', page).val(config.ChannelOptions.PreferredStreamingWidth || '')
             .selectmenu("refresh");
 
+        $('#txtDownloadAge', page).val(config.ChannelOptions.MaxDownloadAge || '');
+
+        $('#txtCachePath', page).val(config.ChannelOptions.DownloadPath || '');
+
         Dashboard.hideLoadingMsg();
     }
 
-    $(document).on('pageshow', "#channelSettingsPage", function () {
+    $(document).on('pageinit', "#channelSettingsPage", function () {
+
+        var page = this;
+
+        $('#btnSelectCachePath', page).on("click.selectDirectory", function () {
+
+            var picker = new DirectoryBrowser(page);
+
+            picker.show({
+
+                callback: function (path) {
+
+                    if (path) {
+                        $('#txtCachePath', page).val(path);
+                    }
+                    picker.close();
+                },
+
+                header: Globalize.translate('HeaderSelectChannelDownloadPath'),
+
+                instruction: Globalize.translate('HeaderSelectChannelDownloadPathHelp')
+            });
+        });
+
+    }).on('pageshow', "#channelSettingsPage", function () {
 
         Dashboard.showLoadingMsg();
 
         var page = this;
 
-        ApiClient.getServerConfiguration().done(function (config) {
+        var promise1 = ApiClient.getServerConfiguration();
+        var promise2 = $.getJSON(ApiClient.getUrl("Channels/Features"));
 
-            loadPage(page, config);
+        $.when(promise1, promise2).done(function (response1, response2) {
+
+            var config = response1[0];
+            var allFeatures = response2[0];
+
+            loadPage(page, config, allFeatures);
 
         });
 
@@ -32,6 +101,15 @@
 
             // This should be null if empty
             config.ChannelOptions.PreferredStreamingWidth = $('#selectChannelResolution', form).val() || null;
+            config.ChannelOptions.MaxDownloadAge = $('#txtDownloadAge', form).val() || null;
+
+            config.ChannelOptions.DownloadPath = $('#txtCachePath', form).val() || null;
+
+            config.ChannelOptions.DownloadingChannels = $('.chkChannelDownload:checked', form)
+                .get()
+                .map(function(i) {
+                    return i.getAttribute('data-channelid');
+                });
 
             ApiClient.updateServerConfiguration(config).done(Dashboard.processServerConfigurationUpdateResult);
         });

dashboard-ui/scripts/mediaplayer-video.js

@@ -688,7 +688,9 @@
                 options.push({ name: '720p - 4Mbps', maxWidth: 1280, bitrate: 4000000 });
                 options.push({ name: '720p - 3Mbps', maxWidth: 1280, bitrate: 3000000 });
                 options.push({ name: '720p - 2Mbps', maxWidth: 1280, bitrate: 2000000 });
-                options.push({ name: '720p - 1.5Mbps', maxWidth: 1280, bitrate: 1500000 });
+                
+                // The extra 1 is because they're keyed off the bitrate value
+                options.push({ name: '720p - 1Mbps', maxWidth: 1280, bitrate: 1000001 });
             }
 
             options.push({ name: '480p - 1.0Mbps', maxWidth: 720, bitrate: 1000000 });