use SocketHttpListener project

dashboard-ui/css/librarybrowser.css

@@ -213,7 +213,7 @@
     height: 17px;
     display: inline-block;
     background-size: cover;
-    vertical-align: top;
+    vertical-align: middle;
     position: relative;
     top: -1px;
 }
@@ -231,6 +231,7 @@
     margin-left: 1px;
     position: relative;
     top: -1px;
+    vertical-align: middle;
 }
 
 .rottentomatoesicon {
@@ -240,7 +241,7 @@
     background-size: cover;
     background-position: left center;
     background-repeat: no-repeat;
-    vertical-align: top;
+    vertical-align: middle;
     position: relative;
     top: -1px;
 }
@@ -264,8 +265,6 @@
     font-size: 12px;
     text-align: center;
     padding: 2px 4px;
-    position: relative;
-    top: -1px;
     border-radius: 2px;
 }
 
@@ -306,6 +305,7 @@
     margin-left: 1px;
     position: relative;
     top: -1px;
+    vertical-align: middle;
 }
 
 .criticRatingSummary {

dashboard-ui/css/site.css

@@ -767,6 +767,33 @@ progress {
 
 /* Detail Page*/
 
+.btnUserItemRating {
+    margin-right: .85em;
+    cursor: pointer;
+    vertical-align: middle;
+    color: #cc3333 !important;
+    font-size: 17px;
+    width: auto !important;
+    display: inline-block !important;
+    background: none !important;
+}
+
+    .btnUserItemRating div {
+        border: 0;
+    }
+
+    .btnUserItemRatingOff {
+        color: #aaa !important;
+    }
+
+    .btnUserItemRating:last-child {
+        margin-right: 0;
+    }
+
+    .btnUserItemRating:hover {
+        opacity: .5;
+    }
+
 .imgUserItemRating {
     height: 16px;
     width: 16px;

dashboard-ui/dlnaprofile.html

@@ -198,21 +198,11 @@
                                         <input type="number" id="txtMaxAllowedBitrate" pattern="[0-9]*" min="1" />
                                         <div class="fieldDescription">${LabelMaxStreamingBitrateHelp}</div>
                                     </li>
-                                    <li>
-                                        <label for="txtMaxStaticBitrate">${LabelMaxStaticBitrate}</label>
-                                        <input type="number" id="txtMaxStaticBitrate" pattern="[0-9]*" min="1" />
-                                        <div class="fieldDescription">${LabelMaxStaticBitrateHelp}</div>
-                                    </li>
                                     <li>
                                         <label for="txtMusicStreamingTranscodingBitrate">${LabelMusicStreamingTranscodingBitrate}</label>
                                         <input type="number" id="txtMusicStreamingTranscodingBitrate" pattern="[0-9]*" min="1" />
                                         <div class="fieldDescription">${LabelMusicStreamingTranscodingBitrateHelp}</div>
                                     </li>
-                                    <li>
-                                        <label for="txtMusicStaticBitrate">${LabelMusicStaticBitrate}</label>
-                                        <input type="number" id="txtMusicStaticBitrate" pattern="[0-9]*" min="1" />
-                                        <div class="fieldDescription">${LabelMusicStaticBitrateHelp}</div>
-                                    </li>
                                     <li>
                                         <label for="chkIgnoreTranscodeByteRangeRequests">${OptionIgnoreTranscodeByteRangeRequests}</label>
                                         <input type="checkbox" id="chkIgnoreTranscodeByteRangeRequests" data-mini="true" />
@@ -427,14 +417,6 @@
                             </select>
                         </div>
 
-                        <div style="margin: 1em 0;">
-                            <label for="selectTranscodingContext">${LabelContext}</label>
-                            <select id="selectTranscodingContext" data-mini="true">
-                                <option value="Streaming">${OptionContextStreaming}</option>
-                                <option value="Static">${OptionContextStatic}</option>
-                            </select>
-                        </div>
-
                         <div id="fldTranscodingProtocol" style="margin: 1em 0;">
                             <label for="selectTranscodingProtocol">${LabelProtocol}</label>
                             <select id="selectTranscodingProtocol" data-mini="true">

dashboard-ui/scripts/dlnaprofile.js

@@ -80,10 +80,8 @@
 
         $('#chkIgnoreTranscodeByteRangeRequests', page).checked(profile.IgnoreTranscodeByteRangeRequests).checkboxradio('refresh');
         $('#txtMaxAllowedBitrate', page).val(profile.MaxStreamingBitrate || '');
-        $('#txtMaxStaticBitrate', page).val(profile.MaxStaticBitrate || '');
 
         $('#txtMusicStreamingTranscodingBitrate', page).val(profile.MusicStreamingTranscodingBitrate || '');
-        $('#txtMusicStaticBitrate', page).val(profile.MusicSyncBitrate || '');
 
         $('#chkRequiresPlainFolders', page).checked(profile.RequiresPlainFolders).checkboxradio('refresh');
         $('#chkRequiresPlainVideoItems', page).checked(profile.RequiresPlainVideoItems).checkboxradio('refresh');
@@ -498,7 +496,6 @@
         $('#txtTranscodingAudioCodec', popup).val(transcodingProfile.AudioCodec || '');
         $('#txtTranscodingVideoCodec', popup).val(transcodingProfile.VideoCodec || '');
         $('#selectTranscodingProtocol', popup).val(transcodingProfile.Protocol || 'Http').selectmenu('refresh');
-        $('#selectTranscodingContext', popup).val(transcodingProfile.Context || 'Streaming').selectmenu('refresh');
 
         $('#chkEnableMpegtsM2TsMode', popup).checked(transcodingProfile.EnableMpegtsM2TsMode || false).checkboxradio('refresh');
         $('#chkEstimateContentLength', popup).checked(transcodingProfile.EstimateContentLength || false).checkboxradio('refresh');
@@ -524,7 +521,7 @@
         currentSubProfile.AudioCodec = $('#txtTranscodingAudioCodec', page).val();
         currentSubProfile.VideoCodec = $('#txtTranscodingVideoCodec', page).val();
         currentSubProfile.Protocol = $('#selectTranscodingProtocol', page).val();
-        currentSubProfile.Context = $('#selectTranscodingContext', page).val();
+        currentSubProfile.Context = 'Streaming';
 
         currentSubProfile.EnableMpegtsM2TsMode = $('#chkEnableMpegtsM2TsMode', page).checked();
         currentSubProfile.EstimateContentLength = $('#chkEstimateContentLength', page).checked();
@@ -932,10 +929,8 @@
 
         profile.IgnoreTranscodeByteRangeRequests = $('#chkIgnoreTranscodeByteRangeRequests', page).checked();
         profile.MaxStreamingBitrate = $('#txtMaxAllowedBitrate', page).val();
-        profile.MaxStaticBitrate = $('#txtMaxStaticBitrate', page).val();
 
         profile.MusicStreamingTranscodingBitrate = $('#txtMusicStreamingTranscodingBitrate', page).val();
-        profile.MusicSyncBitrate = $('#txtMusicStaticBitrate', page).val();
 
         profile.ProtocolInfo = $('#txtProtocolInfo', page).val();
         profile.XDlnaCap = $('#txtXDlnaCap', page).val();

dashboard-ui/scripts/librarybrowser.js

@@ -1976,6 +1976,14 @@
             return null;
         },
 
+        getUserDataButtonHtml: function (method, itemId, btnCssClass, icon, tooltip) {
+
+            btnCssClass += " imageButton";
+
+            return '<button data-itemid="' + itemId + '" class="' + btnCssClass + '" type="button" onclick="LibraryBrowser.' + method + '(this);return false;" title="' + tooltip + '"><div class="fa ' + icon + '"></div></button>';
+
+        },
+
         getUserDataIconsHtml: function (item) {
 
             var html = '';
@@ -1987,11 +1995,11 @@
 
             var tooltipPlayed = Globalize.translate('TooltipPlayed');
 
-            if ((item.MediaType || item.IsFolder) && item.Type != "TvChannel" && item.Type != "MusicArtist") {
+            if ((item.MediaType || item.IsFolder) && type != "TvChannel" && type != "MusicArtist") {
                 if (userData.Played) {
-                    html += '<img data-type="' + type + '" data-itemid="' + itemId + '" class="imgUserItemRating imgPlayed" src="css/images/userdata/checkedon.png" alt="' + tooltipPlayed + '" title="' + tooltipPlayed + '" onclick="LibraryBrowser.markPlayed(this);return false;" />';
+                    html += LibraryBrowser.getUserDataButtonHtml('markPlayed', itemId, 'btnUserItemRating btnUserItemRating', 'fa-check', tooltipPlayed);
                 } else {
-                    html += '<img data-type="' + type + '" data-itemid="' + itemId + '" class="imgUserItemRating imgPlayedOff" src="css/images/userdata/checkedoff.png" alt="' + tooltipPlayed + '" title="' + tooltipPlayed + '" onclick="LibraryBrowser.markPlayed(this);return false;" />';
+                    html += LibraryBrowser.getUserDataButtonHtml('markPlayed', itemId, 'btnUserItemRating btnUserItemRatingOff', 'fa-check', tooltipPlayed);
                 }
             }
 
@@ -1999,24 +2007,24 @@
             var tooltipDislike = Globalize.translate('TooltipDislike');
 
             if (typeof userData.Likes == "undefined") {
-                html += '<img onclick="LibraryBrowser.markDislike(this);return false;" data-itemid="' + itemId + '" class="imgUserItemRating imgDislikeOff" src="css/images/userdata/thumbs_down_off.png" alt="' + tooltipDislike + '" title="' + tooltipDislike + '" />';
-                html += '<img onclick="LibraryBrowser.markLike(this);return false;" data-itemid="' + itemId + '" class="imgUserItemRating imgLikeOff" src="css/images/userdata/thumbs_up_off.png" alt="' + tooltipLike + '" title="' + tooltipLike + '" />';
+                html += LibraryBrowser.getUserDataButtonHtml('markDislike', itemId, 'btnUserItemRating btnUserItemRatingOff', 'fa-thumbs-down', tooltipDislike);
+                html += LibraryBrowser.getUserDataButtonHtml('markLike', itemId, 'btnUserItemRating btnUserItemRatingOff', 'fa-thumbs-up', tooltipLike);
             }
             else if (userData.Likes) {
-                html += '<img onclick="LibraryBrowser.markDislike(this);return false;" data-itemid="' + itemId + '" class="imgUserItemRating imgDislikeOff" src="css/images/userdata/thumbs_down_off.png" alt="Dislike" title="Dislike" />';
-                html += '<img onclick="LibraryBrowser.markLike(this);return false;" data-itemid="' + itemId + '" class="imgUserItemRating imgLike" src="css/images/userdata/thumbs_up_on.png" alt="' + tooltipLike + '" title="' + tooltipLike + '" />';
+                html += LibraryBrowser.getUserDataButtonHtml('markDislike', itemId, 'btnUserItemRating btnUserItemRatingOff', 'fa-thumbs-down', tooltipDislike);
+                html += LibraryBrowser.getUserDataButtonHtml('markLike', itemId, 'btnUserItemRating', 'fa-thumbs-up', tooltipLike);
             }
             else {
-                html += '<img onclick="LibraryBrowser.markDislike(this);return false;" data-itemid="' + itemId + '" class="imgUserItemRating imgDislike" src="css/images/userdata/thumbs_down_on.png" alt="Dislike" title="Dislike" />';
-                html += '<img onclick="LibraryBrowser.markLike(this);return false;" data-itemid="' + itemId + '" class="imgUserItemRating imgLikeOff" src="css/images/userdata/thumbs_up_off.png" alt="' + tooltipLike + '" title="' + tooltipLike + '" />';
+                html += LibraryBrowser.getUserDataButtonHtml('markDislike', itemId, 'btnUserItemRating', 'fa-thumbs-down', tooltipDislike);
+                html += LibraryBrowser.getUserDataButtonHtml('markLike', itemId, 'btnUserItemRating btnUserItemRatingOff', 'fa-thumbs-up', tooltipLike);
             }
 
             var tooltipFavorite = Globalize.translate('TooltipFavorite');
             if (userData.IsFavorite) {
 
-                html += '<img onclick="LibraryBrowser.markFavorite(this);return false;" data-itemid="' + itemId + '" class="imgUserItemRating imgFavorite" src="css/images/userdata/heart_on.png" alt="' + tooltipFavorite + '" title="' + tooltipFavorite + '" />';
+                html += LibraryBrowser.getUserDataButtonHtml('markFavorite', itemId, 'btnUserItemRating', 'fa-heart', tooltipFavorite);
             } else {
-                html += '<img onclick="LibraryBrowser.markFavorite(this);return false;" data-itemid="' + itemId + '" class="imgUserItemRating imgFavoriteOff" src="css/images/userdata/heart_off.png" alt="' + tooltipFavorite + '" title="' + tooltipFavorite + '" />';
+                html += LibraryBrowser.getUserDataButtonHtml('markFavorite', itemId, 'btnUserItemRating btnUserItemRatingOff', 'fa-heart', tooltipFavorite);
             }
 
             return html;
@@ -2028,20 +2036,14 @@
 
             var $link = $(link);
 
-            var markAsPlayed = $link.hasClass('imgPlayedOff');
+            var markAsPlayed = $link.hasClass('btnUserItemRatingOff');
 
             if (markAsPlayed) {
                 ApiClient.markPlayed(Dashboard.getCurrentUserId(), id);
+                $link.removeClass('btnUserItemRatingOff');
             } else {
                 ApiClient.markUnplayed(Dashboard.getCurrentUserId(), id);
-            }
-
-            if (markAsPlayed) {
-                link.src = "css/images/userdata/checkedon.png";
-                $link.addClass('imgPlayed').removeClass('imgPlayedOff');
-            } else {
-                link.src = "css/images/userdata/checkedoff.png";
-                $link.addClass('imgPlayedOff').removeClass('imgPlayed');
+                $link.addClass('btnUserItemRatingOff');
             }
         },
 
@@ -2051,16 +2053,14 @@
 
             var $link = $(link);
 
-            var markAsFavorite = $link.hasClass('imgFavoriteOff');
+            var markAsFavorite = $link.hasClass('btnUserItemRatingOff');
 
             ApiClient.updateFavoriteStatus(Dashboard.getCurrentUserId(), id, markAsFavorite);
 
             if (markAsFavorite) {
-                link.src = "css/images/userdata/heart_on.png";
-                $link.addClass('imgFavorite').removeClass('imgFavoriteOff');
+                $link.removeClass('btnUserItemRatingOff');
             } else {
-                link.src = "css/images/userdata/heart_off.png";
-                $link.addClass('imgFavoriteOff').removeClass('imgFavorite');
+                $link.addClass('btnUserItemRatingOff');
             }
         },
 
@@ -2070,24 +2070,20 @@
 
             var $link = $(link);
 
-            if ($link.hasClass('imgLikeOff')) {
+            if ($link.hasClass('btnUserItemRatingOff')) {
 
                 ApiClient.updateUserItemRating(Dashboard.getCurrentUserId(), id, true);
 
-                link.src = "css/images/userdata/thumbs_up_on.png";
-                $link.addClass('imgLike').removeClass('imgLikeOff');
+                $link.removeClass('btnUserItemRatingOff');
 
             } else {
 
                 ApiClient.clearUserItemRating(Dashboard.getCurrentUserId(), id);
 
-                link.src = "css/images/userdata/thumbs_up_off.png";
-                $link.addClass('imgLikeOff').removeClass('imgLike');
+                $link.addClass('btnUserItemRatingOff');
             }
 
-            $link.prev().removeClass('imgDislike').addClass('imgDislikeOff').each(function () {
-                this.src = "css/images/userdata/thumbs_down_off.png";
-            });
+            $link.prev().addClass('btnUserItemRatingOff');
         },
 
         markDislike: function (link) {
@@ -2096,24 +2092,20 @@
 
             var $link = $(link);
 
-            if ($link.hasClass('imgDislikeOff')) {
+            if ($link.hasClass('btnUserItemRatingOff')) {
 
                 ApiClient.updateUserItemRating(Dashboard.getCurrentUserId(), id, false);
 
-                link.src = "css/images/userdata/thumbs_down_on.png";
-                $link.addClass('imgDislike').removeClass('imgDislikeOff');
+                $link.removeClass('btnUserItemRatingOff');
 
             } else {
 
                 ApiClient.clearUserItemRating(Dashboard.getCurrentUserId(), id);
 
-                link.src = "css/images/userdata/thumbs_down_off.png";
-                $link.addClass('imgDislikeOff').removeClass('imgDislike');
+                $link.addClass('btnUserItemRatingOff');
             }
 
-            $link.next().removeClass('imgLike').addClass('imgLikeOff').each(function () {
-                this.src = "css/images/userdata/thumbs_up_off.png";
-            });
+            $link.next().addClass('btnUserItemRatingOff');
         },
 
         getDetailImageHtml: function (item, href, preferThumb) {

dashboard-ui/scripts/librarylist.js

@@ -86,23 +86,23 @@
         }
 
         if (!isMiniItem) {
-            html += '<div style="margin:1.25em 0;">';
+            html += '<div style="margin:1em 0 .75em;">';
 
             if (isPortrait) {
                 html += '<div class="itemCommunityRating">';
                 html += LibraryBrowser.getRatingHtml(item, false);
                 html += '</div>';
 
-                html += '<div class="userDataIcons" style="margin:1.25em 0;">';
+                html += '<div class="userDataIcons" style="margin:.5em 0 0em;">';
                 html += LibraryBrowser.getUserDataIconsHtml(item);
                 html += '</div>';
             } else {
 
-                html += '<span class="itemCommunityRating">';
+                html += '<span class="itemCommunityRating" style="vertical-align:middle;">';
                 html += LibraryBrowser.getRatingHtml(item, false);
                 html += '</span>';
 
-                html += '<span class="userDataIcons">';
+                html += '<span class="userDataIcons" style="vertical-align:middle;">';
                 html += LibraryBrowser.getUserDataIconsHtml(item);
                 html += '</span>';
             }
@@ -989,10 +989,14 @@
 
         $('.' + cssClass).each(function () {
 
-            this.setAttribute('data-positionticks', (userData.PlaybackPositionTicks || 0));
+            var mediaType = this.getAttribute('data-mediatype');
 
-            if ($(this).hasClass('card')) {
-                renderUserDataChanges(this, userData);
+            if (mediaType == 'Video') {
+                this.setAttribute('data-positionticks', (userData.PlaybackPositionTicks || 0));
+
+                if ($(this).hasClass('card')) {
+                    renderUserDataChanges(this, userData);
+                }
             }
         });
     }

dashboard-ui/scripts/nowplayingbar.js

@@ -203,17 +203,6 @@
         }
 
         var playState = state.PlayState || {};
-        
-        if (playState.IsMuted) {
-
-            hideButton(muteButton);
-            showButton(unmuteButton);
-
-        } else {
-
-            showButton(muteButton);
-            hideButton(unmuteButton);
-        }
 
         if (playState.IsPaused) {
 
@@ -226,11 +215,7 @@
             hideButton(unpauseButton);
         }
 
-        if (!isVolumeSliderActive) {
-            volumeSlider.val(playState.VolumeLevel || 0);
-        }
-
-        volumeSlider.slider('refresh');
+        updatePlayerVolumeState(state);
 
         var nowPlayingItem = state.NowPlayingItem || {};
         if (!isPositionSliderActive) {
@@ -269,6 +254,32 @@
         updateNowPlayingInfo(state);
     }
 
+    function updatePlayerVolumeState(state) {
+
+        if (!muteButton) {
+            getNowPlayingBar();
+        }
+
+        var playState = state.PlayState || {};
+
+        if (playState.IsMuted) {
+
+            hideButton(muteButton);
+            showButton(unmuteButton);
+
+        } else {
+
+            showButton(muteButton);
+            hideButton(unmuteButton);
+        }
+
+        if (!isVolumeSliderActive) {
+            volumeSlider.val(playState.VolumeLevel || 0);
+        }
+
+        volumeSlider.slider('refresh');
+    }
+
     var currentImgUrl;
     function updateNowPlayingInfo(state) {
 
@@ -390,6 +401,20 @@
         }
     }
 
+    function onVolumeChanged(e) {
+
+        var player = this;
+
+        player.getPlayerState().done(function(state) {
+            
+            if (player.isDefaultPlayer && state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') {
+                return;
+            }
+
+            updatePlayerVolumeState(state);
+        });
+    }
+
     function bindToPlayer(player) {
 
         releaseCurrentPlayer();
@@ -407,7 +432,7 @@
 
         $(player).on('playbackstart.nowplayingbar', onPlaybackStart)
             .on('playbackstop.nowplayingbar', onPlaybackStopped)
-            .on('volumechange.nowplayingbar', onStateChanged)
+            .on('volumechange.nowplayingbar', onVolumeChanged)
             .on('playstatechange.nowplayingbar', onStateChanged)
             .on('positionchange.nowplayingbar', onStateChanged);
     }