update to jstree 3.0.8

dashboard-ui/css/metadataeditor.css

@@ -124,6 +124,31 @@
     text-overflow: ellipsis;
 }
 
+.editorFieldset > div {
+    margin: 1.25em 0;
+}
+
+.jstree-anchor {
+    font-weight: normal !important;
+}
+
+.jstree-wholerow-hovered {
+    background: #38c !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+}
+
+.jstree-default .jstree-hovered {
+    background: none !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    color: #fff !important;
+}
+
+.jstree-default .jstree-wholerow-clicked {
+    background: #52B54B !important;
+}
+
 @media all and (min-width: 500px) {
 
     .availableImagesList {

dashboard-ui/edititemmetadata.html

@@ -8,8 +8,7 @@
         <div data-role="content editPageContent">
             <div class="editPageSidebar">
                 <div class="libraryTree">
-                    <ul>
-                    </ul>
+                    <ul></ul>
                 </div>
             </div>
             <div class="editPageInnerContent" style="display: none;">
@@ -209,15 +208,16 @@
                         <div data-role="collapsible" data-mini="true" data-collapsed="false" id="collapsibleDvdEpisodeInfo" style="display: none; margin-top: 1em;">
                             <h3>${HeaderAlternateEpisodeNumbers}</h3>
                             <div>
-                                <div data-role="fieldcontain">
+                                <br />
+                                <div>
                                     <label for="txtDvdSeasonNumber">${LabelDvdSeasonNumber}</label>
                                     <input type="number" id="txtDvdSeasonNumber" data-mini="true" pattern="[0-9]*" />
                                 </div>
-                                <div data-role="fieldcontain">
+                                <div>
                                     <label for="txtDvdEpisodeNumber">${LabelDvdEpisodeNumber}</label>
                                     <input type="number" id="txtDvdEpisodeNumber" data-mini="true" pattern="[0-9]*" />
                                 </div>
-                                <div data-role="fieldcontain">
+                                <div>
                                     <label for="txtAbsoluteEpisodeNumber">${LabelAbsoluteEpisodeNumber}</label>
                                     <input type="number" id="txtAbsoluteEpisodeNumber" data-mini="true" pattern="[0-9]*" />
                                 </div>
@@ -226,48 +226,56 @@
                         <div data-role="collapsible" data-mini="true" data-collapsed="false" id="collapsibleSpecialEpisodeInfo" style="display: none; margin-top: 1em;">
                             <h3>${HeaderSpecialEpisodeInfo}</h3>
                             <div>
-                                <div data-role="fieldcontain">
+                                <br />
+                                <div>
                                     <label for="txtAirsBeforeSeason">${LabelAirsBeforeSeason}</label>
                                     <input type="number" id="txtAirsBeforeSeason" data-mini="true" pattern="[0-9]*" />
                                 </div>
-                                <div data-role="fieldcontain">
+                                <div>
                                     <label for="txtAirsAfterSeason">${LabelAirsAfterSeason}</label>
                                     <input type="number" id="txtAirsAfterSeason" data-mini="true" pattern="[0-9]*" />
                                 </div>
-                                <div data-role="fieldcontain">
+                                <div>
                                     <label for="txtAirsBeforeEpisode">${LabelAirsBeforeEpisode}</label>
                                     <input type="number" id="txtAirsBeforeEpisode" data-mini="true" pattern="[0-9]*" />
                                 </div>
                             </div>
                         </div>
-                        <div data-role="collapsible" data-mini="true" data-collapsed="false" style="margin-top: 1em;">
-                            <h3>${HeaderExternalIds}</h3>
-                            <div class="externalIds">
+                        <div class="detailSection">
+                            <div class="detailSectionHeader">
+                                ${HeaderExternalIds}
+                            </div>
+                            <div class="detailSectionContent" style="padding: 0 .5em;">
+                                <div class="externalIds editorFieldset">
+                                </div>
                             </div>
                         </div>
 
-                        <div data-role="collapsible" data-mini="true" id="collapsibleDisplaySettings" style="display: none; margin-top: 1em;">
-                            <h3>${HeaderDisplaySettings}</h3>
-                            <div>
-                                <div data-role="fieldcontain" id="fldSourceType" style="display: none;" class="fldDisplaySetting">
+                        <div class="detailSection" id="collapsibleDisplaySettings" style="display:none;">
+                            <div class="detailSectionHeader">
+                                ${HeaderDisplaySettings}
+                            </div>
+                            <div class="detailSectionContent" style="padding: 0 .5em;">
+                                <br />
+                                <div id="fldSourceType" style="display: none;" class="fldDisplaySetting">
                                     <label for="txtDisplayMediaType">${LabelTreatImageAs}</label>
                                     <input type="text" id="txtDisplayMediaType" data-mini="true" />
                                 </div>
-                                <div data-role="fieldcontain" id="fldDisplaySpecialsInline" class="fldDisplaySetting">
+                                <div id="fldDisplaySpecialsInline" class="fldDisplaySetting">
                                     <label for="chkDisplaySpecialsInline">${LabelDisplaySpecialsWithinSeasons}</label>
                                     <input data-mini="true" type="checkbox" id="chkDisplaySpecialsInline" />
                                 </div>
-                                <div data-role="fieldcontain" id="fldDisplayOrder" class="fldDisplaySetting">
+                                <div id="fldDisplayOrder" class="fldDisplaySetting">
                                     <label for="selectDisplayOrder" id="labelDisplayOrder">${LabelDisplayOrder}</label>
-                                    <select id="selectDisplayOrder" data-mini="true">
-                                    </select>
+                                    <select id="selectDisplayOrder" data-mini="true"></select>
                                 </div>
                             </div>
                         </div>
+
                         <div data-role="collapsible" data-mini="true" id="countriesCollapsible" style="display: none; margin-top: 1em;">
                             <h3>${HeaderCountries}</h3>
                             <div data-role="editableListviewContainer">
-                                <div data-role="fieldcontain">
+                                <div>
                                     <div style="display: inline-block; width: 80%;">
                                         <input type="text" data-mini="true" />
                                     </div>
@@ -279,7 +287,7 @@
                         <div data-role="collapsible" data-mini="true" id="genresCollapsible" style="display: none; margin-top: 1em;">
                             <h3>${HeaderGenres}</h3>
                             <div data-role="editableListviewContainer">
-                                <div data-role="fieldcontain">
+                                <div>
                                     <div style="display: inline-block; width: 80%;">
                                         <input type="text" data-mini="true" />
                                     </div>
@@ -300,7 +308,7 @@
                         <div data-mini="true" data-role="collapsible" id="keywordsCollapsible" style="display: none; margin-top: 1em;">
                             <h3>${HeaderPlotKeywords}</h3>
                             <div data-role="editableListviewContainer">
-                                <div data-role="fieldcontain">
+                                <div>
                                     <div style="display: inline-block; width: 80%;">
                                         <input type="text" data-mini="true" />
                                     </div>
@@ -312,7 +320,7 @@
                         <div data-role="collapsible" data-mini="true" id="studiosCollapsible" style="display: none; margin-top: 1em;">
                             <h3>${HeaderStudios}</h3>
                             <div data-role="editableListviewContainer">
-                                <div data-role="fieldcontain">
+                                <div>
                                     <div style="display: inline-block; width: 80%;">
                                         <input type="text" data-mini="true" />
                                     </div>
@@ -324,7 +332,7 @@
                         <div data-mini="true" data-role="collapsible" id="tagsCollapsible" style="display: none; margin-top: 1em;">
                             <h3>${HeaderTags}</h3>
                             <div data-role="editableListviewContainer">
-                                <div data-role="fieldcontain">
+                                <div>
                                     <div style="display: inline-block; width: 80%;">
                                         <input type="text" data-mini="true" />
                                     </div>
@@ -336,13 +344,14 @@
                         <div data-role="collapsible" data-mini="true" id="metadataSettingsCollapsible" style="display: none; margin-top: 1em;">
                             <h3>${HeaderMetadataSettings}</h3>
                             <div>
-                                <div data-role="fieldcontain">
+                                <br />
+                                <div>
                                     <label for="selectLanguage">${LabelMetadataDownloadLanguage}</label>
                                     <select id="selectLanguage" data-mini="true"></select>
                                 </div>
                                 <div class="fieldDescription editorfieldDescription">${MessageLeaveEmptyToInherit}</div>
                                 <br />
-                                <div data-role="fieldcontain">
+                                <div>
                                     <label for="selectCountry">${LabelCountry}</label>
                                     <select id="selectCountry" data-mini="true"></select>
                                 </div>
@@ -353,11 +362,13 @@
                                     <label for="chkLockData">${LabelLockItemToPreventChanges}</label>
                                     <input data-mini="true" type="checkbox" id="chkLockData" onchange="EditItemMetadataPage.setProviderSettingsContainerVisibility(this)" />
                                 </p>
+                                <br />
                                 <div id="providerSettingsContainer" style="display: none">
                                 </div>
+                                <br />
                             </div>
                         </div>
-                        <br/>
+                        <br />
                         <button class="btnSave" type="submit" data-theme="a" data-icon="check">
                             ${ButtonSave}
                         </button>

dashboard-ui/scripts/editcollectionitems.js

@@ -239,7 +239,6 @@
             if (data.id != currentItem.Id) {
 
                 MetadataEditor.currentItemId = data.id;
-                MetadataEditor.currentItemName = data.itemName;
                 MetadataEditor.currentItemType = data.itemType;
                 //Dashboard.navigate('edititemmetadata.html?id=' + data.id);
 

dashboard-ui/scripts/edititemimages.js

@@ -524,7 +524,6 @@
             if (data.id != currentItem.Id) {
 
                 MetadataEditor.currentItemId = data.id;
-                MetadataEditor.currentItemName = data.itemName;
                 MetadataEditor.currentItemType = data.itemType;
                 //Dashboard.navigate('edititemmetadata.html?id=' + data.id);
 

dashboard-ui/scripts/edititemmetadata.js

@@ -136,11 +136,11 @@
             var buttonId = "btnOpen1" + idInfo.Key;
             var formatString = idInfo.UrlFormatString || '';
 
-            html += '<div data-role="fieldcontain">';
+            html += '<div>';
             var idLabel = Globalize.translate('LabelDynamicExternalId').replace('{0}', idInfo.Name);
             html += '<label for="' + id + '">' + idLabel + '</label>';
 
-            html += '<div style="display: inline-block; width: 250px;">';
+            html += '<div style="display: inline-block; width: 80%;">';
 
             var value = providerIds[idInfo.Key] || '';
 
@@ -392,7 +392,7 @@
             $('#fldDisplayOrder', page).show();
 
             $('#labelDisplayOrder', page).html(Globalize.translate('LabelTitleDisplayOrder'));
-            $('#selectDisplayOrder', page).html('<option value="SortName">'+Globalize.translate('OptionSortName')+'</option><option value="PremiereDate">'+Globalize.translate('OptionReleaseDate')+'</option>').selectmenu('refresh');
+            $('#selectDisplayOrder', page).html('<option value="SortName">' + Globalize.translate('OptionSortName') + '</option><option value="PremiereDate">' + Globalize.translate('OptionReleaseDate') + '</option>').selectmenu('refresh');
         } else {
             $('#selectDisplayOrder', page).html('').selectmenu('refresh');
             $('#fldDisplayOrder', page).hide();
@@ -839,9 +839,9 @@
                 Keywords: editableListViewValues($("#listKeywords", form)),
                 Studios: editableListViewValues($("#listStudios", form)).map(function (element) { return { Name: element }; }),
 
-                PremiereDate: $('#txtPremiereDate', form).val() || null,
-                DateCreated: $('#txtDateAdded', form).val() || null,
-                EndDate: $('#txtEndDate', form).val() || null,
+                PremiereDate: EditItemMetadataPage.getDateFromForm(form, '#txtPremiereDate', 'PremiereDate'),
+                DateCreated: EditItemMetadataPage.getDateFromForm(form, '#txtDateAdded', 'DateCreated'),
+                EndDate: EditItemMetadataPage.getDateFromForm(form, '#txtEndDate', 'EndDate'),
                 ProductionYear: $('#txtProductionYear', form).val(),
                 AspectRatio: $('#txtOriginalAspectRatio', form).val(),
                 Video3DFormat: $('#select3dFormat', form).val(),
@@ -898,6 +898,32 @@
             return false;
         };
 
+        self.getDateFromForm = function (form, element, property) {
+
+            var val = $(element, form).val();
+
+            if (!val) {
+                return null;
+            }
+
+            if (currentItem[property]) {
+
+                var date = parseISO8601Date(currentItem[property], { toLocal: true });
+
+                var parts = date.toISOString().split('T');
+
+                // If the date is the same, preserve the time
+                if (parts[0].indexOf(val) == 0) {
+
+                    var iso = parts[1];
+
+                    val += 'T' + iso;
+                }
+            }
+
+            return val;
+        };
+
         self.addElementToEditableListview = function (source, sortCallback) {
             var input = $(source).parent().find('input[type="text"], select');
             var text = input.val();
@@ -1245,7 +1271,6 @@
             if (data.id != currentItem.Id) {
 
                 MetadataEditor.currentItemId = data.id;
-                MetadataEditor.currentItemName = data.itemName;
                 MetadataEditor.currentItemType = data.itemType;
                 //Dashboard.navigate('edititemmetadata.html?id=' + data.id);
 

dashboard-ui/scripts/edititemsubtitles.js

@@ -304,7 +304,6 @@
             if (data.id != currentItem.Id) {
 
                 MetadataEditor.currentItemId = data.id;
-                MetadataEditor.currentItemName = data.itemName;
                 MetadataEditor.currentItemType = data.itemType;
                 //Dashboard.navigate('edititemmetadata.html?id=' + data.id);
 

dashboard-ui/scripts/editorsidebar.js

@@ -1,14 +1,38 @@
 (function ($, document, window) {
 
-    function getNode(item, folderState) {
-
-        var state = item.IsFolder ? folderState : '';
+    function getNode(item, folderState, selected) {
 
         var htmlName = getNodeInnerHtml(item);
 
-        var rel = item.IsFolder ? 'folder' : 'default';
+        var node = {
+            id: item.Id,
+            text: htmlName,
 
-        return { attr: { id: item.Id, rel: rel, itemtype: item.Type }, data: htmlName, state: state };
+            state: {
+                opened: item.IsFolder && folderState == 'open',
+                selected: selected
+            },
+
+            li_attr: {}
+        };
+
+        if (item.IsFolder) {
+            node.children = [
+                    {
+                        text: 'Loading...',
+                        icon: false
+                    }];
+            node.icon = false;
+        }
+        else {
+            node.icon = false;
+        }
+
+        if (node.state.opened) {
+            node.li_attr.loadedFromServer = true;
+        }
+
+        return node;
     }
 
     function getNodeInnerHtml(item) {
@@ -74,7 +98,7 @@
         return htmlName;
     }
 
-    function loadChildrenOfRootNode(page, callback, openItems, selectedId) {
+    function loadChildrenOfRootNode(page, scope, callback) {
 
         var promise2 = ApiClient.getLiveTvChannels({ limit: 0 });
 
@@ -84,22 +108,51 @@
 
             var nodes = [];
 
-            nodes.push({ attr: { id: 'MediaFolders', rel: 'folder', itemtype: 'mediafolders' }, data: Globalize.translate('HeaderMediaFolders'), state: 'open' });
+            nodes.push({
+
+                id: 'MediaFolders',
+                text: Globalize.translate('HeaderMediaFolders'),
+                state: {
+                    opened: true
+                },
+                li_attr: {
+                    itemtype: 'mediafolders',
+                    loadedFromServer: true
+                },
+                children: [
+                    {
+                        text: 'Loading...',
+                        icon: false
+                    }],
+                icon: false
+            });
 
             if (result.TotalRecordCount) {
-                nodes.push({ attr: { id: 'livetv', rel: 'folder', itemtype: 'livetv' }, data: Globalize.translate('HeaderLiveTV'), state: 'closed' });
+
+                nodes.push({
+
+                    id: 'livetv',
+                    text: Globalize.translate('HeaderLiveTV'),
+                    state: {
+                        opened: false
+                    },
+                    li_attr: {
+                        itemtype: 'livetv'
+                    },
+                    children: [
+                    {
+                        text: 'Loading...',
+                        icon: false
+                    }],
+                    icon: false
+                });
             }
 
-            callback(nodes);
+            callback.call(scope, nodes);
 
-            if (selectedId && nodes.filter(function (f) {
-
-                return f.attr.id == selectedId;
-
-            }).length) {
-
-                selectNode(page, selectedId);
-            }
+            setTimeout(function () {
+                $.jstree.reference(".libraryTree", page).load_node('MediaFolders');
+            }, 300);
         });
     }
 
@@ -111,7 +164,7 @@
 
                 var state = openItems.indexOf(i.Id) == -1 ? 'closed' : 'open';
 
-                return getNode(i, state);
+                return getNode(i, state, false);
 
             });
 
@@ -121,45 +174,60 @@
 
     }
 
-    function loadMediaFolders(service, openItems, callback) {
+    function loadMediaFolders(page, openItems, callback) {
 
         ApiClient.getJSON(ApiClient.getUrl("Library/MediaFolders")).done(function (result) {
 
-            var nodes = result.Items.map(function (i) {
+            var nodes = result.Items.map(function (n) {
 
-                var state = openItems.indexOf(i.Id) == -1 ? 'closed' : 'open';
+                var state = openItems.indexOf(n.Id) == -1 ? 'closed' : 'open';
 
-                return getNode(i, state);
+                return getNode(n, state, false);
 
             });
 
             callback(nodes);
 
+            for (var i = 0, length = nodes.length; i < length; i++) {
+                if (nodes[i].state.opened) {
+
+                    var nodeId = nodes[i].id;
+                    setTimeout(function () {
+                        $.jstree.reference(".libraryTree", page).load_node(nodeId);
+                    }, 300);
+                }
+
+                if (nodes[i].state.selected) {
+                    var scrollNodeId = nodes[i].id;
+                    setTimeout(function () {
+                        scrollToNode(page, scrollNodeId);
+                    }, 300);
+                }
+            }
+
         });
 
     }
 
-    function loadNode(page, node, openItems, selectedId, currentUser, callback) {
+    function loadNode(page, scope, node, openItems, selectedId, currentUser, callback) {
 
-        if (node == '-1') {
+        var id = node.id;
 
-            loadChildrenOfRootNode(page, callback, openItems, selectedId);
+        if (id == '#') {
+
+            loadChildrenOfRootNode(page, scope, callback);
             return;
         }
 
-        var id = node.attr("id");
-
-        var itemtype = node.attr("itemtype");
-
-        if (itemtype == 'livetv') {
+        if (id == 'livetv') {
 
             loadLiveTvChannels(id, openItems, callback);
             return;
         }
 
-        if (itemtype == 'mediafolders') {
+        if (id == 'MediaFolders') {
 
-            loadMediaFolders(id, openItems, callback);
+            loadMediaFolders(page, openItems, callback);
             return;
         }
 
@@ -168,41 +236,49 @@
             Fields: 'Settings'
         };
 
+        var itemtype = node.li_attr.itemtype;
+
         if (itemtype != "Season" && itemtype != "Series") {
             query.SortBy = "SortName";
         }
 
         ApiClient.getItems(Dashboard.getCurrentUserId(), query).done(function (result) {
 
-            var nodes = result.Items.map(function (i) {
+            var nodes = result.Items.map(function (n) {
 
-                var state = openItems.indexOf(i.Id) == -1 ? 'closed' : 'open';
+                var state = openItems.indexOf(n.Id) == -1 ? 'closed' : 'open';
 
-                return getNode(i, state);
+                return getNode(n, state, n.Id == selectedId);
 
             });
 
-            callback(nodes);
+            callback.call(scope, nodes);
 
-            if (selectedId && result.Items.filter(function (f) {
+            for (var i = 0, length = nodes.length; i < length; i++) {
+                if (nodes[i].state.opened) {
 
-                return f.Id == selectedId;
+                    var nodeId = nodes[i].id;
+                    setTimeout(function () {
+                        $.jstree.reference(".libraryTree", page).load_node(nodeId);
+                    }, 300);
+                }
 
-            }).length) {
-
-                selectNode(page, selectedId);
+                if (nodes[i].state.selected) {
+                    var scrollNodeId = nodes[i].id;
+                    setTimeout(function () {
+                        scrollToNode(page, scrollNodeId);
+                    }, 300);
+                }
             }
 
         });
 
     }
 
-    function selectNode(page, id) {
+    function scrollToNode(page, id) {
 
         var elem = $('#' + id, page)[0];
 
-        $.jstree._reference(".libraryTree", page).select_node(elem);
-
         if (elem) {
             elem.scrollIntoView();
         }
@@ -214,39 +290,47 @@
 
         $('.libraryTree', page).jstree({
 
-            "plugins": ["themes", "ui", "json_data"],
+            "plugins": ["wholerow"],
 
+            core: {
+
+                check_callback: true,
                 data: function (node, callback) {
-                loadNode(page, node, openItems, selectedId, currentUser, callback);
+
+                    loadNode(page, this, node, openItems, selectedId, currentUser, callback);
                 },
 
-            json_data: {
-
-                data: function (node, callback) {
-                    loadNode(page, node, openItems, selectedId, currentUser, callback);
-                }
-
-            },
-
-            core: { initially_open: [], load_open: true, html_titles: true },
-            ui: { initially_select: [] },
-
                 themes: {
-                theme: 'mb3',
-                url: 'thirdparty/jstree1.0/themes/mb3/style.css?v=' + Dashboard.initialServerVersion
+                    variant: 'large'
+                }
             }
 
         }).off('select_node.jstree').on('select_node.jstree', function (event, data) {
 
+            var node = data.node;
+
             var eventData = {
-                id: data.rslt.obj.attr("id"),
-                itemType: data.rslt.obj.attr("itemtype")
+                id: node.id,
+                itemType: node.li_attr.itemtype
             };
 
             if (eventData.itemType != 'livetv' && eventData.itemType != 'mediafolders') {
                 $(this).trigger('itemclicked', [eventData]);
             }
 
+        }).off('open_node.jstree').on('open_node.jstree', function (event, data) {
+
+            var node = data.node;
+
+            if (!node.li_attr.loadedFromServer) {
+
+                node.li_attr.loadedFromServer = true;
+
+                setTimeout(function () {
+                    $.jstree.reference(".libraryTree", page).load_node(node.id);
+                }, 500);
+            }
+
         });
     }
 

dashboard-ui/scripts/extensions.js

@@ -36,6 +36,31 @@ $.fn.buttonEnabled = function (enabled) {
     return enabled ? this.attr('disabled', '').removeAttr('disabled') : this.attr('disabled', 'disabled');
 };
 
+$.fn.dateTimeVal = function (val) {
+
+    if (val != null) {
+
+        var now = val;
+
+        var year = now.getFullYear();
+        var month = now.getMonth().toString().length === 1 ? '0' + (now.getMonth() + 1).toString() : now.getMonth() + 1;
+        var date = now.getDate().toString().length === 1 ? '0' + (now.getDate()).toString() : now.getDate();
+        var hours = now.getHours().toString().length === 1 ? '0' + now.getHours().toString() : now.getHours();
+        var minutes = now.getMinutes().toString().length === 1 ? '0' + now.getMinutes().toString() : now.getMinutes();
+        var seconds = now.getSeconds().toString().length === 1 ? '0' + now.getSeconds().toString() : now.getSeconds();
+
+        var formattedDateTime = year + '-' + month + '-' + date + 'T' + hours + ':' + minutes + ':' + seconds;
+
+        //if (onlyBlank === true && $(this).val()) {
+        //    return this;
+        //}
+
+        return this.val(formattedDateTime);
+    }
+
+    return this.val();
+};
+
 if (!Array.prototype.filter) {
     Array.prototype.filter = function (fun /*, thisp*/) {
         "use strict";

dashboard-ui/scripts/librarymenu.js

@@ -22,7 +22,7 @@
 
             html += '<button id="btnCast" class="btnCast btnDefaultCast headerButton headerButtonRight" type="button" data-role="none"><div class="headerSelectedPlayer"></div><div class="btnCastImage"></div></button>';
 
-            html += '<button onclick="Search.showSearchPanel($.mobile.activePage);" type="button" data-role="none" class="headerButton headerButtonRight headerSearchButton"><div class="fa fa-search" style="font-size:20px;"></div></button>';
+            html += '<button onclick="Search.showSearchPanel($.mobile.activePage);" type="button" data-role="none" class="headerButton headerButtonRight headerSearchButton"><div class="fa fa-search" style="font-size:21px;"></div></button>';
         } else {
             html += '<button id="btnCast" class="btnCast btnDefaultCast headerButton headerButtonRight" type="button" data-role="none" style="visibility:hidden;"><div class="headerSelectedPlayer"></div><div class="btnCastImage"></div></button>';
 
@@ -32,7 +32,7 @@
 
         if (user.imageUrl) {
 
-            var userButtonHeight = 23;
+            var userButtonHeight = 24;
 
             var url = user.imageUrl;