mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

add user data buttons to now playing bar

Browse source
This commit is contained in:
Luke Pulverenti 2015-06-13 11:52:46 -04:00
parent 1299364d00
commit 1a0ca75287
4 changed files with 56 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

16
dashboard-ui/css/mediaplayer.css
View file

@ -9,10 +9,10 @@
vertical-align: top; vertical-align: top;
} }
.mediaButton { .mediaButton, .nowPlayingBarUserDataButtons .btnUserItemRating {
vertical-align: middle; vertical-align: middle;
font-size: 30px; font-size: 30px;
color: #e8e8e8 !important; color: #e8e8e8;
margin: 0 10px; margin: 0 10px;
min-width: 30px; min-width: 30px;
text-align: center; text-align: center;
@ -197,3 +197,15 @@ input[type="range"]::-ms-fill-upper {
padding: 1em; padding: 1em;
background: #222; background: #222;
} }
.nowPlayingBarUserDataButtons {
display: inline-block;
margin-left: 2em;
}
@media all and (max-width: 1200px) {
.nowPlayingBarUserDataButtons {
display: none;
}
}

6
dashboard-ui/css/site.css
View file

@ -771,7 +771,7 @@ progress {
margin-right: .85em; margin-right: .85em;
cursor: pointer; cursor: pointer;
vertical-align: middle; vertical-align: middle;
color: #cc3333 !important; color: #aaa;
font-size: 17px; font-size: 17px;
width: auto !important; width: auto !important;
display: inline-block !important; display: inline-block !important;
@ -784,8 +784,8 @@ progress {
border: 0; border: 0;
} }
.btnUserItemRatingOff { .btnUserItemRatingOn {
color: #aaa !important; color: #cc3333 !important;
} }
.btnUserItemRating:last-child { .btnUserItemRating:last-child {

50
dashboard-ui/scripts/librarybrowser.js
View file

@ -2290,9 +2290,9 @@
if ((item.MediaType || item.IsFolder) && type != "TvChannel" && type != "MusicArtist" && item.MediaType != "Audio") { if ((item.MediaType || item.IsFolder) && type != "TvChannel" && type != "MusicArtist" && item.MediaType != "Audio") {
if (userData.Played) { if (userData.Played) {
html += LibraryBrowser.getUserDataButtonHtml('markPlayed', itemId, 'btnUserItemRating btnUserItemRating', 'fa-check', tooltipPlayed); html += LibraryBrowser.getUserDataButtonHtml('markPlayed', itemId, 'btnUserItemRating btnUserItemRatingOn', 'fa-check', tooltipPlayed);
} else { } else {
html += LibraryBrowser.getUserDataButtonHtml('markPlayed', itemId, 'btnUserItemRating btnUserItemRatingOff', 'fa-check', tooltipPlayed); html += LibraryBrowser.getUserDataButtonHtml('markPlayed', itemId, 'btnUserItemRating', 'fa-check', tooltipPlayed);
} }
} }
@ -2300,24 +2300,24 @@
var tooltipDislike = Globalize.translate('TooltipDislike'); var tooltipDislike = Globalize.translate('TooltipDislike');
if (typeof userData.Likes == "undefined") { if (typeof userData.Likes == "undefined") {
html += LibraryBrowser.getUserDataButtonHtml('markDislike', itemId, 'btnUserItemRating btnUserItemRatingOff', 'fa-thumbs-down', tooltipDislike); html += LibraryBrowser.getUserDataButtonHtml('markDislike', itemId, 'btnUserItemRating', 'fa-thumbs-down', tooltipDislike);
html += LibraryBrowser.getUserDataButtonHtml('markLike', itemId, 'btnUserItemRating btnUserItemRatingOff', 'fa-thumbs-up', tooltipLike);
}
else if (userData.Likes) {
html += LibraryBrowser.getUserDataButtonHtml('markDislike', itemId, 'btnUserItemRating btnUserItemRatingOff', 'fa-thumbs-down', tooltipDislike);
html += LibraryBrowser.getUserDataButtonHtml('markLike', itemId, 'btnUserItemRating', 'fa-thumbs-up', tooltipLike); html += LibraryBrowser.getUserDataButtonHtml('markLike', itemId, 'btnUserItemRating', 'fa-thumbs-up', tooltipLike);
} }
else { else if (userData.Likes) {
html += LibraryBrowser.getUserDataButtonHtml('markDislike', itemId, 'btnUserItemRating', 'fa-thumbs-down', tooltipDislike); html += LibraryBrowser.getUserDataButtonHtml('markDislike', itemId, 'btnUserItemRating', 'fa-thumbs-down', tooltipDislike);
html += LibraryBrowser.getUserDataButtonHtml('markLike', itemId, 'btnUserItemRating btnUserItemRatingOff', 'fa-thumbs-up', tooltipLike); html += LibraryBrowser.getUserDataButtonHtml('markLike', itemId, 'btnUserItemRating btnUserItemRatingOn', 'fa-thumbs-up', tooltipLike);
}
else {
html += LibraryBrowser.getUserDataButtonHtml('markDislike', itemId, 'btnUserItemRating btnUserItemRatingOn', 'fa-thumbs-down', tooltipDislike);
html += LibraryBrowser.getUserDataButtonHtml('markLike', itemId, 'btnUserItemRating', 'fa-thumbs-up', tooltipLike);
} }
var tooltipFavorite = Globalize.translate('TooltipFavorite'); var tooltipFavorite = Globalize.translate('TooltipFavorite');
if (userData.IsFavorite) { if (userData.IsFavorite) {
html += LibraryBrowser.getUserDataButtonHtml('markFavorite', itemId, 'btnUserItemRating', 'fa-heart', tooltipFavorite); html += LibraryBrowser.getUserDataButtonHtml('markFavorite', itemId, 'btnUserItemRating btnUserItemRatingOn', 'fa-heart', tooltipFavorite);
} else { } else {
html += LibraryBrowser.getUserDataButtonHtml('markFavorite', itemId, 'btnUserItemRating btnUserItemRatingOff', 'fa-heart', tooltipFavorite); html += LibraryBrowser.getUserDataButtonHtml('markFavorite', itemId, 'btnUserItemRating', 'fa-heart', tooltipFavorite);
} }
return html; return html;
@ -2329,14 +2329,14 @@
var $link = $(link); var $link = $(link);
var markAsPlayed = $link.hasClass('btnUserItemRatingOff'); var markAsPlayed = !$link.hasClass('btnUserItemRatingOn');
if (markAsPlayed) { if (markAsPlayed) {
ApiClient.markPlayed(Dashboard.getCurrentUserId(), id); ApiClient.markPlayed(Dashboard.getCurrentUserId(), id);
$link.removeClass('btnUserItemRatingOff'); $link.addClass('btnUserItemRatingOn');
} else { } else {
ApiClient.markUnplayed(Dashboard.getCurrentUserId(), id); ApiClient.markUnplayed(Dashboard.getCurrentUserId(), id);
$link.addClass('btnUserItemRatingOff'); $link.removeClass('btnUserItemRatingOn');
} }
}, },
@ -2346,14 +2346,14 @@
var $link = $(link); var $link = $(link);
var markAsFavorite = $link.hasClass('btnUserItemRatingOff'); var markAsFavorite = !$link.hasClass('btnUserItemRatingOn');
ApiClient.updateFavoriteStatus(Dashboard.getCurrentUserId(), id, markAsFavorite); ApiClient.updateFavoriteStatus(Dashboard.getCurrentUserId(), id, markAsFavorite);
if (markAsFavorite) { if (markAsFavorite) {
$link.removeClass('btnUserItemRatingOff'); $link.addClass('btnUserItemRatingOn');
} else { } else {
$link.addClass('btnUserItemRatingOff'); $link.removeClass('btnUserItemRatingOn');
} }
}, },
@ -2363,20 +2363,20 @@
var $link = $(link); var $link = $(link);
if ($link.hasClass('btnUserItemRatingOff')) { if (!$link.hasClass('btnUserItemRatingOn')) {
ApiClient.updateUserItemRating(Dashboard.getCurrentUserId(), id, true); ApiClient.updateUserItemRating(Dashboard.getCurrentUserId(), id, true);
$link.removeClass('btnUserItemRatingOff'); $link.addClass('btnUserItemRatingOn');
} else { } else {
ApiClient.clearUserItemRating(Dashboard.getCurrentUserId(), id); ApiClient.clearUserItemRating(Dashboard.getCurrentUserId(), id);
$link.addClass('btnUserItemRatingOff'); $link.removeClass('btnUserItemRatingOn');
} }
$link.prev().addClass('btnUserItemRatingOff'); $link.prev().removeClass('btnUserItemRatingOn');
}, },
markDislike: function (link) { markDislike: function (link) {
@ -2385,20 +2385,20 @@
var $link = $(link); var $link = $(link);
if ($link.hasClass('btnUserItemRatingOff')) { if (!$link.hasClass('btnUserItemRatingOn')) {
ApiClient.updateUserItemRating(Dashboard.getCurrentUserId(), id, false); ApiClient.updateUserItemRating(Dashboard.getCurrentUserId(), id, false);
$link.removeClass('btnUserItemRatingOff'); $link.addClass('btnUserItemRatingOn');
} else { } else {
ApiClient.clearUserItemRating(Dashboard.getCurrentUserId(), id); ApiClient.clearUserItemRating(Dashboard.getCurrentUserId(), id);
$link.addClass('btnUserItemRatingOff'); $link.removeClass('btnUserItemRatingOn');
} }
$link.next().addClass('btnUserItemRatingOff'); $link.next().removeClass('btnUserItemRatingOn');
}, },
getDetailImageHtml: function (item, href, preferThumb) { getDetailImageHtml: function (item, href, preferThumb) {

15
dashboard-ui/scripts/nowplayingbar.js
View file

@ -5,6 +5,7 @@
var currentTimeElement; var currentTimeElement;
var nowPlayingImageElement; var nowPlayingImageElement;
var nowPlayingTextElement; var nowPlayingTextElement;
var nowPlayingUserData;
var unmuteButton; var unmuteButton;
var muteButton; var muteButton;
var volumeSlider; var volumeSlider;
@ -52,6 +53,9 @@
html += '<input type="range" class="mediaSlider volumeSlider slider" step=".05" min="0" max="100" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />'; html += '<input type="range" class="mediaSlider volumeSlider slider" step=".05" min="0" max="100" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
html += '</div>'; html += '</div>';
html += '<div class="nowPlayingBarUserDataButtons">';
html += '</div>';
html += '</div>'; html += '</div>';
return html; return html;
@ -62,6 +66,7 @@
currentTimeElement = $('.currentTime', elem); currentTimeElement = $('.currentTime', elem);
nowPlayingImageElement = $('.nowPlayingImage', elem); nowPlayingImageElement = $('.nowPlayingImage', elem);
nowPlayingTextElement = $('.nowPlayingText', elem); nowPlayingTextElement = $('.nowPlayingText', elem);
nowPlayingUserData = $('.nowPlayingBarUserDataButtons', elem);
$(elem).on('swipeup', function () { $(elem).on('swipeup', function () {
Dashboard.navigate('nowplaying.html'); Dashboard.navigate('nowplaying.html');
@ -374,6 +379,12 @@
currentImgUrl = url; currentImgUrl = url;
nowPlayingImageElement.html('<img src="' + url + '" />'); nowPlayingImageElement.html('<img src="' + url + '" />');
if (nowPlayingItem.Id) {
ApiClient.getItem(Dashboard.getCurrentUserId(), nowPlayingItem.Id).done(function (item) {
nowPlayingUserData.html(LibraryBrowser.getUserDataIconsHtml(item));
});
}
} }
function onPlaybackStart(e, state) { function onPlaybackStart(e, state) {
@ -398,7 +409,9 @@
// Use a timeout to prevent the bar from hiding and showing quickly // Use a timeout to prevent the bar from hiding and showing quickly
// in the event of a stop->play command // in the event of a stop->play command
getNowPlayingBar().hide();
// Don't call getNowPlayingBar here because we don't want to end up creating it just to hide it
$('.nowPlayingBar').hide();
} }
function onPlaybackStopped(e, state) { function onPlaybackStopped(e, state) {