cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 19:08:18 -07:00
Code Issues Packages Projects Releases Wiki 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
Show Stats 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;
}
.mediaButton {
.mediaButton, .nowPlayingBarUserDataButtons .btnUserItemRating {
vertical-align: middle;
font-size: 30px;
color: #e8e8e8 !important;
color: #e8e8e8;
margin: 0 10px;
min-width: 30px;
text-align: center;
@ -197,3 +197,15 @@ input[type="range"]::-ms-fill-upper {
padding: 1em;
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;
cursor: pointer;
vertical-align: middle;
color: #cc3333 !important;
color: #aaa;
font-size: 17px;
width: auto !important;
display: inline-block !important;
@ -784,8 +784,8 @@ progress {
border: 0;
}
.btnUserItemRatingOff {
color: #aaa !important;
.btnUserItemRatingOn {
color: #cc3333 !important;
}
.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 (userData.Played) {
html += LibraryBrowser.getUserDataButtonHtml('markPlayed', itemId, 'btnUserItemRating btnUserItemRating', 'fa-check', tooltipPlayed);
html += LibraryBrowser.getUserDataButtonHtml('markPlayed', itemId, 'btnUserItemRating btnUserItemRatingOn', 'fa-check', tooltipPlayed);
} 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');
if (typeof userData.Likes == "undefined") {
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 += 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', 'fa-thumbs-up', tooltipLike);
}
else {
else if (userData.Likes) {
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');
if (userData.IsFavorite) {
html += LibraryBrowser.getUserDataButtonHtml('markFavorite', itemId, 'btnUserItemRating', 'fa-heart', tooltipFavorite);
html += LibraryBrowser.getUserDataButtonHtml('markFavorite', itemId, 'btnUserItemRating btnUserItemRatingOn', 'fa-heart', tooltipFavorite);
} else {
html += LibraryBrowser.getUserDataButtonHtml('markFavorite', itemId, 'btnUserItemRating btnUserItemRatingOff', 'fa-heart', tooltipFavorite);
html += LibraryBrowser.getUserDataButtonHtml('markFavorite', itemId, 'btnUserItemRating', 'fa-heart', tooltipFavorite);
}
return html;
@ -2329,14 +2329,14 @@
var $link = $(link);
var markAsPlayed = $link.hasClass('btnUserItemRatingOff');
var markAsPlayed = !$link.hasClass('btnUserItemRatingOn');
if (markAsPlayed) {
ApiClient.markPlayed(Dashboard.getCurrentUserId(), id);
$link.removeClass('btnUserItemRatingOff');
$link.addClass('btnUserItemRatingOn');
} else {
ApiClient.markUnplayed(Dashboard.getCurrentUserId(), id);
$link.addClass('btnUserItemRatingOff');
$link.removeClass('btnUserItemRatingOn');
}
},
@ -2346,14 +2346,14 @@
var $link = $(link);
var markAsFavorite = $link.hasClass('btnUserItemRatingOff');
var markAsFavorite = !$link.hasClass('btnUserItemRatingOn');
ApiClient.updateFavoriteStatus(Dashboard.getCurrentUserId(), id, markAsFavorite);
if (markAsFavorite) {
$link.removeClass('btnUserItemRatingOff');
$link.addClass('btnUserItemRatingOn');
} else {
$link.addClass('btnUserItemRatingOff');
$link.removeClass('btnUserItemRatingOn');
}
},
@ -2363,20 +2363,20 @@
var $link = $(link);
if ($link.hasClass('btnUserItemRatingOff')) {
if (!$link.hasClass('btnUserItemRatingOn')) {
ApiClient.updateUserItemRating(Dashboard.getCurrentUserId(), id, true);
$link.removeClass('btnUserItemRatingOff');
$link.addClass('btnUserItemRatingOn');
} else {
ApiClient.clearUserItemRating(Dashboard.getCurrentUserId(), id);
$link.addClass('btnUserItemRatingOff');
$link.removeClass('btnUserItemRatingOn');
}
$link.prev().addClass('btnUserItemRatingOff');
$link.prev().removeClass('btnUserItemRatingOn');
},
markDislike: function (link) {
@ -2385,20 +2385,20 @@
var $link = $(link);
if ($link.hasClass('btnUserItemRatingOff')) {
if (!$link.hasClass('btnUserItemRatingOn')) {
ApiClient.updateUserItemRating(Dashboard.getCurrentUserId(), id, false);
$link.removeClass('btnUserItemRatingOff');
$link.addClass('btnUserItemRatingOn');
} else {
ApiClient.clearUserItemRating(Dashboard.getCurrentUserId(), id);
$link.addClass('btnUserItemRatingOff');
$link.removeClass('btnUserItemRatingOn');
}
$link.next().addClass('btnUserItemRatingOff');
$link.next().removeClass('btnUserItemRatingOn');
},
getDetailImageHtml: function (item, href, preferThumb) {

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

@ -5,6 +5,7 @@
var currentTimeElement;
var nowPlayingImageElement;
var nowPlayingTextElement;
var nowPlayingUserData;
var unmuteButton;
var muteButton;
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 += '</div>';
html += '<div class="nowPlayingBarUserDataButtons">';
html += '</div>';
html += '</div>';
return html;
@ -62,6 +66,7 @@
currentTimeElement = $('.currentTime', elem);
nowPlayingImageElement = $('.nowPlayingImage', elem);
nowPlayingTextElement = $('.nowPlayingText', elem);
nowPlayingUserData = $('.nowPlayingBarUserDataButtons', elem);
$(elem).on('swipeup', function () {
Dashboard.navigate('nowplaying.html');
@ -374,6 +379,12 @@
currentImgUrl = 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) {
@ -398,7 +409,9 @@
// Use a timeout to prevent the bar from hiding and showing quickly
// 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) {