From 69a1c97630276ee4b6dd28bb75f06c3a725ed7b9 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Fri, 28 Mar 2014 14:17:18 -0400
Subject: [PATCH] add more content to dlna profile editing page

---
 dashboard-ui/dlnaprofile.html       | 108 ++++++++-
 dashboard-ui/scripts/dlnaprofile.js | 355 +++++++++++++++++++++++++++-
 2 files changed, 449 insertions(+), 14 deletions(-)

diff --git a/dashboard-ui/dlnaprofile.html b/dashboard-ui/dlnaprofile.html
index 6d25b5dc2f..36c8877700 100644
--- a/dashboard-ui/dlnaprofile.html
+++ b/dashboard-ui/dlnaprofile.html
@@ -14,24 +14,35 @@
                     <a href="dlnaprofiles.html" data-role="button" class="ui-btn-active">Profiles</a>
                 </div>
 
-                <form class="dlnaProfileForm">
-
-                    <ul data-role="listview" class="ulForm">
-                        <li>
-                            <label for="txtName">Name</label>
-                            <input type="text" id="txtName" data-mini="true" required="required" />
-                        </li>
-                    </ul>
+                <form class="dlnaProfileForm" style="max-width: 650px;">
 
+                    <p>Profile Information</p>
                     <div data-role="controlgroup" data-type="horizontal" data-mini="true">
                         <input type="radio" name="radioProfileTab" class="radioProfileTab" id="radioInfo" value="tabInfo">
                         <label for="radioInfo">Info</label>
                         <input type="radio" name="radioProfileTab" class="radioProfileTab" id="radioIdentification" value="tabIdentification">
                         <label for="radioIdentification">Identification</label>
+                        <input type="radio" name="radioProfileTab" class="radioProfileTab" id="radioDirectPlay" value="tabDirectPlayProfiles">
+                        <label for="radioDirectPlay">Direct Play</label>
+                        <input type="radio" name="radioProfileTab" class="radioProfileTab" id="radioTranscoding" value="tabTranscodingProfiles">
+                        <label for="radioTranscoding">Transcoding</label>
+                        <input type="radio" name="radioProfileTab" class="radioProfileTab" id="radioContainers" value="tabContainerProfiles">
+                        <label for="radioContainers">Containers</label>
+                        <input type="radio" name="radioProfileTab" class="radioProfileTab" id="radioCodecs" value="tabCodecProfiles">
+                        <label for="radioCodecs">Codecs</label>
+                        <input type="radio" name="radioProfileTab" class="radioProfileTab" id="radioMediaProfiles" value="tabMediaProfiles">
+                        <label for="radioMediaProfiles">Responses</label>
                     </div>
                     <br />
                     <div class="profileTab tabInfo">
 
+                        <ul data-role="listview" class="ulForm">
+                            <li>
+                                <label for="txtName">Name</label>
+                                <input type="text" id="txtName" data-mini="true" required="required" />
+                            </li>
+                        </ul>
+
                         <fieldset data-role="controlgroup">
                             <legend>Supported Media Types:</legend>
                             <input type="checkbox" data-mini="true" id="chkAudio" data-value="Audio" class="chkMediaType" />
@@ -43,10 +54,91 @@
                             <input type="checkbox" data-mini="true" id="chkVideo" data-value="Video" class="chkMediaType" />
                             <label for="chkVideo">Video</label>
                         </fieldset>
+
+                        <br />
+                        <ul data-role="listview" class="ulForm">
+                            <li>
+                                <label for="chkEnableAlbumArtInDidl">Embed album art in Didl</label>
+                                <input type="checkbox" id="chkEnableAlbumArtInDidl" data-mini="true" />
+                                <div class="fieldDescription">Some devices prefer this method for obtaining album art. Other devices may fail to play with this option enabled.</div>
+                            </li>
+                        </ul>
+
                     </div>
                     <div class="profileTab tabIdentification">
+
+                        <p>Devices have two forms of identification, device properties and HTTP request headers. At least one form should be supplied.</p>
+                        <br />
+                        <ul data-role="listview" class="ulForm">
+                            <li>
+                                <label for="txtIdFriendlyName">Friendly name</label>
+                                <input type="text" id="txtIdFriendlyName" data-mini="true" />
+                                <div class="fieldDescription">A case-insensitive substring or regex expression.</div>
+                            </li>
+                            <li>
+                                <label for="txtIdManufacturer">Manufacturer</label>
+                                <input type="text" id="txtIdManufacturer" data-mini="true" />
+                                <div class="fieldDescription">A case-insensitive substring or regex expression.</div>
+                            </li>
+                            <li>
+                                <label for="txtIdManufacturerUrl">Manufacturer url</label>
+                                <input type="text" id="txtIdManufacturerUrl" data-mini="true" />
+                                <div class="fieldDescription">A case-insensitive substring or regex expression.</div>
+                            </li>
+                            <li>
+                                <label for="txtIdModelName">Model name</label>
+                                <input type="text" id="txtIdModelName" data-mini="true" />
+                                <div class="fieldDescription">A case-insensitive substring or regex expression.</div>
+                            </li>
+                            <li>
+                                <label for="txtIdModelNumber">Model number</label>
+                                <input type="text" id="txtIdModelNumber" data-mini="true" />
+                                <div class="fieldDescription">A case-insensitive substring or regex expression.</div>
+                            </li>
+                            <li>
+                                <label for="txtIdModelDesription">Model description</label>
+                                <input type="text" id="txtIdModelDesription" data-mini="true" />
+                                <div class="fieldDescription">A case-insensitive substring or regex expression.</div>
+                            </li>
+                            <li>
+                                <label for="txtIdModelUrl">Model url</label>
+                                <input type="text" id="txtIdModelUrl" data-mini="true" />
+                                <div class="fieldDescription">A case-insensitive substring or regex expression.</div>
+                            </li>
+                            <li>
+                                <label for="txtIdSerialNumber">Serial number</label>
+                                <input type="text" id="txtIdSerialNumber" data-mini="true" />
+                                <div class="fieldDescription">A case-insensitive substring or regex expression.</div>
+                            </li>
+                            <li>
+                                <label for="txtIdDeviceDescription">Device description</label>
+                                <input type="text" id="txtIdDeviceDescription" data-mini="true" />
+                                <div class="fieldDescription">A case-insensitive substring or regex expression.</div>
+                            </li>
+                        </ul>
+
                     </div>
 
+                    <div class="profileTab tabDirectPlayProfiles">
+                        <p>Add direct play profiles to indicate what formats the device can handle natively.</p>
+                        <div class="directPlayProfiles"></div>
+                    </div>
+                    <div class="profileTab tabTranscodingProfiles">
+                        <p>Add transcoding profiles to indicate what formats should be used when transcoding is required.</p>
+                        <div class="transcodingProfiles"></div>
+                    </div>
+                    <div class="profileTab tabContainerProfiles">
+                        <p>Container profiles indicate the limitations of a device when playing specific formats. If a limitation applies then the media will be transcoded, even if the device supports the container natively.</p>
+                        <div class="containerProfiles"></div>
+                    </div>
+                    <div class="profileTab tabCodecProfiles">
+                        <p>Codec profiles indicate the limitations of a device when playing specific codecs. If a limitation applies then the media will be transcoded, even if the device supports the codec natively.</p>
+                        <div class="codecProfiles"></div>
+                    </div>
+                    <div class="profileTab tabMediaProfiles">
+                        <p>Response profiles provide a way to customize responses sent to the device when playing certain kinds of media.</p>
+                        <div class="mediaProfiles"></div>
+                    </div>
                     <br />
                     <ul data-role="listview" class="ulForm">
                         <li>
diff --git a/dashboard-ui/scripts/dlnaprofile.js b/dashboard-ui/scripts/dlnaprofile.js
index 7cf7191bbc..70841a56a0 100644
--- a/dashboard-ui/scripts/dlnaprofile.js
+++ b/dashboard-ui/scripts/dlnaprofile.js
@@ -1,11 +1,15 @@
 (function ($, document, window) {
 
+    var currentProfile;
+
     function loadProfile(page) {
 
         Dashboard.showLoadingMsg();
 
         getProfile().done(function (result) {
 
+            currentProfile = result;
+
             renderProfile(page, result);
 
             Dashboard.hideLoadingMsg();
@@ -33,8 +37,335 @@
 
         $('.chkMediaType', page).each(function () {
             this.checked = (profile.SupportedMediaTypes || '').split(',').indexOf(this.getAttribute('data-value')) != -1;
-            
+
         }).checkboxradio('refresh');
+
+        $('#chkEnableAlbumArtInDidl', page).checked(profile.EnableAlbumArtInDidl).checkboxradio('refresh');
+
+        var idInfo = profile.Identification || {};
+
+        $('#txtIdFriendlyName', page).val(idInfo.FriendlyName || '');
+        $('#txtIdModelName', page).val(idInfo.ModelName || '');
+        $('#txtIdModelNumber', page).val(idInfo.ModelNumber || '');
+        $('#txtIdModelDescription', page).val(idInfo.ModelDescription || '');
+        $('#txtIdModelUrl', page).val(idInfo.ModelUrl || '');
+        $('#txtIdManufacturer', page).val(idInfo.Manufacturer || '');
+        $('#txtIdManufacturerUrl', page).val(idInfo.ManufacturerUrl || '');
+        $('#txtIdSerialNumber', page).val(idInfo.SerialNumber || '');
+        $('#txtIdDeviceDescription', page).val(idInfo.DeviceDescription || '');
+
+        profile.DirectPlayProfiles = (profile.DirectPlayProfiles || []);
+        profile.TranscodingProfiles = (profile.TranscodingProfiles || []);
+        profile.ContainerProfiles = (profile.ContainerProfiles || []);
+        profile.CodecProfiles = (profile.CodecProfiles || []);
+        profile.MediaProfiles = (profile.MediaProfiles || []);
+
+        renderDirectPlayProfiles(page, profile.DirectPlayProfiles);
+        renderTranscodingProfiles(page, profile.TranscodingProfiles);
+        renderContainerProfiles(page, profile.ContainerProfiles);
+        renderCodecProfiles(page, profile.CodecProfiles);
+        renderMediaProfiles(page, profile.MediaProfiles);
+    }
+
+    function renderDirectPlayProfiles(page, profiles) {
+
+        var html = '';
+
+        html += '<ul data-role="listview" data-inset="true" data-split-icon="delete">';
+
+        var currentType;
+
+        for (var i = 0, length = profiles.length; i < length; i++) {
+
+            var profile = profiles[i];
+
+            if (profile.Type !== currentType) {
+
+                html += '<li data-role="list-divider">' + profile.Type + '</li>';
+                currentType = profile.Type;
+            }
+
+            html += '<li>';
+            html += '<a href="#">';
+
+            html += '<p>Container: ' + (profile.Container || 'All') + '</p>';
+
+            if (profile.Type == 'Video') {
+                html += '<p>Video Codec: ' + (profile.VideoCodec || 'All') + '</p>';
+                html += '<p>Audio Codec: ' + (profile.AudioCodec || 'All') + '</p>';
+            }
+
+            else if (profile.Type == 'Audio') {
+                html += '<p>Codec: ' + (profile.AudioCodec || 'All') + '</p>';
+            }
+
+            html += '</a>';
+
+            html += '<a href="#" data-icon="delete" class="btnDeleteProfile" data-profileIndex="' + i + '">Delete</a>';
+
+            html += '</li>';
+        }
+
+        html += '</ul>';
+
+        var elem = $('.directPlayProfiles', page).html(html).trigger('create');
+
+        $('.btnDeleteProfile', elem).on('click', function () {
+
+            var index = this.getAttribute('data-profileIndex');
+            deleteDirectPlayProfile(page, index);
+        });
+    }
+
+    function deleteDirectPlayProfile(page, index) {
+
+        currentProfile.DirectPlayProfiles.splice(index, 1);
+
+        renderDirectPlayProfiles(page, currentProfile.DirectPlayProfiles);
+
+    }
+
+    function renderTranscodingProfiles(page, profiles) {
+
+        var html = '';
+
+        html += '<ul data-role="listview" data-inset="true" data-split-icon="delete">';
+
+        var currentType;
+
+        for (var i = 0, length = profiles.length; i < length; i++) {
+
+            var profile = profiles[i];
+
+            if (profile.Type !== currentType) {
+
+                html += '<li data-role="list-divider">' + profile.Type + '</li>';
+                currentType = profile.Type;
+            }
+
+            html += '<li>';
+            html += '<a href="#">';
+
+            html += '<p>Container: ' + (profile.Container || 'All') + '</p>';
+
+            if (profile.Type == 'Video') {
+                html += '<p>Video Codec: ' + (profile.VideoCodec || 'All') + '</p>';
+                html += '<p>Audio Codec: ' + (profile.AudioCodec || 'All') + '</p>';
+            }
+
+            else if (profile.Type == 'Audio') {
+                html += '<p>Codec: ' + (profile.AudioCodec || 'All') + '</p>';
+            }
+
+            html += '</a>';
+
+            html += '<a href="#" data-icon="delete" class="btnDeleteProfile" data-profileIndex="' + i + '">Delete</a>';
+
+            html += '</li>';
+        }
+
+        html += '</ul>';
+
+        var elem = $('.transcodingProfiles', page).html(html).trigger('create');
+
+        $('.btnDeleteProfile', elem).on('click', function () {
+
+            var index = this.getAttribute('data-profileIndex');
+            deleteTranscodingProfile(page, index);
+        });
+    }
+
+    function deleteTranscodingProfile(page, index) {
+
+        currentProfile.TranscodingProfiles.splice(index, 1);
+
+        renderTranscodingProfiles(page, currentProfile.TranscodingProfiles);
+
+    }
+
+    function renderContainerProfiles(page, profiles) {
+
+        var html = '';
+
+        html += '<ul data-role="listview" data-inset="true" data-split-icon="delete">';
+
+        var currentType;
+
+        for (var i = 0, length = profiles.length; i < length; i++) {
+
+            var profile = profiles[i];
+
+            if (profile.Type !== currentType) {
+
+                html += '<li data-role="list-divider">' + profile.Type + '</li>';
+                currentType = profile.Type;
+            }
+
+            html += '<li>';
+            html += '<a href="#">';
+
+            html += '<p>Container: ' + (profile.Container || 'All') + '</p>';
+
+            if (profile.Conditions && profile.Conditions.length) {
+
+                html += '<p>Conditions: ';
+                html += profile.Conditions.map(function (c) {
+                    return c.Property;
+                }).join(', ');
+                html += '</p>';
+            }
+
+            html += '</a>';
+
+            html += '<a href="#" data-icon="delete" class="btnDeleteProfile" data-profileIndex="' + i + '">Delete</a>';
+
+            html += '</li>';
+        }
+
+        html += '</ul>';
+
+        var elem = $('.containerProfiles', page).html(html).trigger('create');
+
+        $('.btnDeleteProfile', elem).on('click', function () {
+
+            var index = this.getAttribute('data-profileIndex');
+            deleteContainerProfile(page, index);
+        });
+    }
+
+    function deleteContainerProfile(page, index) {
+
+        currentProfile.ContainerProfiles.splice(index, 1);
+
+        renderContainerProfiles(page, currentProfile.ContainerProfiles);
+
+    }
+
+    function renderCodecProfiles(page, profiles) {
+
+        var html = '';
+
+        html += '<ul data-role="listview" data-inset="true" data-split-icon="delete">';
+
+        var currentType;
+
+        for (var i = 0, length = profiles.length; i < length; i++) {
+
+            var profile = profiles[i];
+
+            var type = profile.Type.replace("VideoAudio", "Video Audio");
+
+            if (type !== currentType) {
+
+                html += '<li data-role="list-divider">' + type + '</li>';
+                currentType = type;
+            }
+
+            html += '<li>';
+            html += '<a href="#">';
+
+            html += '<p>Codec: ' + (profile.Codec || 'All') + '</p>';
+
+            if (profile.Conditions && profile.Conditions.length) {
+
+                html += '<p>Conditions: ';
+                html += profile.Conditions.map(function (c) {
+                    return c.Property;
+                }).join(', ');
+                html += '</p>';
+            }
+
+            html += '</a>';
+
+            html += '<a href="#" data-icon="delete" class="btnDeleteProfile" data-profileIndex="' + i + '">Delete</a>';
+
+            html += '</li>';
+        }
+
+        html += '</ul>';
+
+        var elem = $('.codecProfiles', page).html(html).trigger('create');
+
+        $('.btnDeleteProfile', elem).on('click', function () {
+
+            var index = this.getAttribute('data-profileIndex');
+            deleteCodecProfile(page, index);
+        });
+    }
+
+    function deleteCodecProfile(page, index) {
+
+        currentProfile.CodecProfiles.splice(index, 1);
+
+        renderCodecProfiles(page, currentProfile.CodecProfiles);
+
+    }
+
+    function renderMediaProfiles(page, profiles) {
+
+        var html = '';
+
+        html += '<ul data-role="listview" data-inset="true" data-split-icon="delete">';
+
+        var currentType;
+
+        for (var i = 0, length = profiles.length; i < length; i++) {
+
+            var profile = profiles[i];
+
+            if (profile.Type !== currentType) {
+
+                html += '<li data-role="list-divider">' + profile.Type + '</li>';
+                currentType = profile.Type;
+            }
+
+            html += '<li>';
+            html += '<a href="#">';
+
+            html += '<p>Container: ' + (profile.Container || 'All') + '</p>';
+
+            if (profile.Type == 'Video') {
+                html += '<p>Video Codec: ' + (profile.VideoCodec || 'All') + '</p>';
+                html += '<p>Audio Codec: ' + (profile.AudioCodec || 'All') + '</p>';
+            }
+
+            else if (profile.Type == 'Audio') {
+                html += '<p>Codec: ' + (profile.AudioCodec || 'All') + '</p>';
+            }
+
+            if (profile.Conditions && profile.Conditions.length) {
+
+                html += '<p>Conditions: ';
+                html += profile.Conditions.map(function (c) {
+                    return c.Property;
+                }).join(', ');
+                html += '</p>';
+            }
+
+            html += '</a>';
+
+            html += '<a href="#" data-icon="delete" class="btnDeleteProfile" data-profileIndex="' + i + '">Delete</a>';
+
+            html += '</li>';
+        }
+
+        html += '</ul>';
+
+        var elem = $('.mediaProfiles', page).html(html).trigger('create');
+
+        $('.btnDeleteProfile', elem).on('click', function () {
+
+            var index = this.getAttribute('data-profileIndex');
+            deleteMediaProfile(page, index);
+        });
+    }
+
+    function deleteMediaProfile(page, index) {
+
+        currentProfile.MediaProfiles.splice(index, 1);
+
+        renderMediaProfiles(page, currentProfile.MediaProfiles);
+
     }
 
     function saveProfile(page, profile) {
@@ -54,7 +385,6 @@
             }).done(function () {
 
                 Dashboard.alert('Settings saved.');
-
             });
 
         } else {
@@ -79,7 +409,23 @@
     function updateProfile(page, profile) {
 
         profile.Name = $('#txtName', page).val();
+        profile.EnableAlbumArtInDidl = $('#chkEnableAlbumArtInDidl', page).checked();
 
+        profile.SupportedMediaTypes = $('.chkMediaType:checked', page).get().map(function (c) {
+            return c.getAttribute('data-value');
+        }).join(',');
+
+        profile.Identification = profile.Identification || {};
+
+        profile.Identification.FriendlyName = $('#txtIdFriendlyName', page).val();
+        profile.Identification.ModelName = $('#txtIdModelName', page).val();
+        profile.Identification.ModelNumber = $('#txtIdModelNumber', page).val();
+        profile.Identification.ModelDescription = $('#txtIdModelDescription', page).val();
+        profile.Identification.ModelUrl = $('#txtIdModelUrl', page).val();
+        profile.Identification.Manufacturer = $('#txtIdManufacturer', page).val();
+        profile.Identification.ManufacturerUrl = $('#txtIdManufacturerUrl', page).val();
+        profile.Identification.SerialNumber = $('#txtIdSerialNumber', page).val();
+        profile.Identification.DeviceDescription = $('#txtIdDeviceDescription', page).val();
     }
 
     $(document).on('pageinit', "#dlnaProfilePage", function () {
@@ -117,10 +463,7 @@
             var form = this;
             var page = $(form).parents('.page');
 
-            getProfile().done(function (profile) {
-
-                saveProfile(page, profile);
-            });
+            saveProfile(page, currentProfile);
 
             return false;
         }