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

Change volume slider depending on layout and add artists back

Browse source
This commit is contained in:
ferferga 2020-04-12 20:24:18 +02:00
parent 35a12f6022
commit dd3250a980
2 changed files with 16 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/components/remotecontrol/remotecontrol.js
View file

@ -122,13 +122,13 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
var artistName; var artistName;
if (item.ArtistItems != null) { if (item.ArtistItems != null) {
artistName = item.ArtistItems[0].Name; artistName = item.ArtistItems[0].Name;
// context.querySelector(".nowPlayingAlbum").innerHTML = '<a style="color:inherit;" class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.AlbumId + '&amp;serverId=' + (item.ServerId || serverId) + '">' + albumName + '</a>'; context.querySelector(".nowPlayingAlbum").innerHTML = '<a style="color:inherit;" class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.AlbumId + '&amp;serverId=' + (item.ServerId || serverId) + '">' + albumName + '</a>';
context.querySelector(".nowPlayingArtist").innerHTML = '<a style="color:inherit;" class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.ArtistItems[0].Id + '&amp;serverId=' + (item.ServerId || serverId) + '">' + artistName + '</a>'; context.querySelector(".nowPlayingArtist").innerHTML = '<a style="color:inherit;" class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.ArtistItems[0].Id + '&amp;serverId=' + (item.ServerId || serverId) + '">' + artistName + '</a>';
context.querySelector(".contextMenuAlbum").innerHTML = '<a style="color:inherit;" class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.AlbumId + '&amp;serverId=' + (item.ServerId || serverId) + '"><i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons">album</i> ' + globalize.translate("ViewAlbum") + '</a>'; context.querySelector(".contextMenuAlbum").innerHTML = '<a style="color:inherit;" class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.AlbumId + '&amp;serverId=' + (item.ServerId || serverId) + '"><i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons">album</i> ' + globalize.translate("ViewAlbum") + '</a>';
context.querySelector(".contextMenuArtist").innerHTML = '<a style="color:inherit;" class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.ArtistItems[0].Id + '&amp;serverId=' + (item.ServerId || serverId) + '"><i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons">person</i> ' + globalize.translate("ViewArtist") + '</a>'; context.querySelector(".contextMenuArtist").innerHTML = '<a style="color:inherit;" class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.ArtistItems[0].Id + '&amp;serverId=' + (item.ServerId || serverId) + '"><i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons">person</i> ' + globalize.translate("ViewArtist") + '</a>';
} else { } else {
artistName = item.Artists; artistName = item.Artists;
// context.querySelector(".nowPlayingAlbum").innerHTML = albumName; context.querySelector(".nowPlayingAlbum").innerHTML = albumName;
context.querySelector(".nowPlayingArtist").innerHTML = artistName; context.querySelector(".nowPlayingArtist").innerHTML = artistName;
} }
} }
@ -677,6 +677,17 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
} }
} }
var contextmenuHtml = '<button id="toggleContextMenu" is="paper-icon-button-light" class="btnToggleContextMenu" title=' + globalize.translate('ButtonToogleContextMenu') + '><i class="material-icons more_vert"></i></button>';
var volumecontrolHtml = '<div class="volumecontrol flex align-items-center flex-wrap-wrap justify-content-center">';
volumecontrolHtml += '<button is="paper-icon-button-light" class="buttonMute autoSize" title=' + globalize.translate('Mute') + '><i class="xlargePaperIconButton material-icons"></i></button>';
volumecontrolHtml += '<div class="sliderContainer nowPlayingVolumeSliderContainer"><input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="nowPlayingVolumeSlider"/></div>';
volumecontrolHtml += '</div>';
if (!layoutManager.mobile) {
context.querySelector(".nowPlayingSecondaryButtons").innerHTML += volumecontrolHtml;
context.querySelector(".playlistSectionButton").innerHTML += contextmenuHtml;
} else {
context.querySelector(".playlistSectionButton").innerHTML += volumecontrolHtml + contextmenuHtml;
}
context.querySelector(".nowPlayingVolumeSlider").addEventListener("change", setVolume); context.querySelector(".nowPlayingVolumeSlider").addEventListener("change", setVolume);
context.querySelector(".nowPlayingVolumeSlider").addEventListener("mousemove", setVolumeDelayed); context.querySelector(".nowPlayingVolumeSlider").addEventListener("mousemove", setVolumeDelayed);
context.querySelector(".nowPlayingVolumeSlider").addEventListener("touchmove", setVolumeDelayed); context.querySelector(".nowPlayingVolumeSlider").addEventListener("touchmove", setVolumeDelayed);
@ -698,9 +709,11 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
context.querySelector(".playlist").classList.remove("hide"); context.querySelector(".playlist").classList.remove("hide");
context.querySelector(".btnSavePlaylist").classList.remove("hide"); context.querySelector(".btnSavePlaylist").classList.remove("hide");
context.querySelector(".contextMenu").classList.add("hide"); context.querySelector(".contextMenu").classList.add("hide");
context.querySelector(".volumecontrol").classList.add("hide");
} else { } else {
context.querySelector(".playlist").classList.add("hide"); context.querySelector(".playlist").classList.add("hide");
context.querySelector(".btnSavePlaylist").classList.add("hide"); context.querySelector(".btnSavePlaylist").classList.add("hide");
context.querySelector(".volumecontrol").classList.remove("hide");
} }
}); });
context.querySelector(".btnToggleContextMenu").addEventListener("click", function () { context.querySelector(".btnToggleContextMenu").addEventListener("click", function () {

11
src/nowplaying.html
View file

@ -76,12 +76,6 @@
<i class="material-icons">repeat</i> <i class="material-icons">repeat</i>
</button> </button>
<button is="paper-icon-button-light" class="buttonMute autoSize" title="${Mute}">
<i class="xlargePaperIconButton material-icons"></i>
</button>
<div class="sliderContainer nowPlayingVolumeSliderContainer">
<input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="nowPlayingVolumeSlider" />
</div>
</div> </div>
</div> </div>
</div> </div>
@ -168,7 +162,7 @@
</div> </div>
</div> </div>
<div class="playlistSection hide"> <div class="playlistSection hide">
<div class="playlistSectionButton" style="display: flex; align-items: center;"> <div class="playlistSectionButton flex align-items-center justify-content-center">
<!--<h2 style="margin:0;">${TabPlaylist}</h2>--> <!--<h2 style="margin:0;">${TabPlaylist}</h2>-->
<button id="togglePlaylist" is="paper-icon-button-light" class="btnTogglePlaylist" title="${ButtonTooglePlaylist}"> <button id="togglePlaylist" is="paper-icon-button-light" class="btnTogglePlaylist" title="${ButtonTooglePlaylist}">
<i class="material-icons">queue_music</i> <i class="material-icons">queue_music</i>
@ -176,9 +170,6 @@
<button is="paper-icon-button-light" class="btnSavePlaylist" title="${ButtonSave}"> <button is="paper-icon-button-light" class="btnSavePlaylist" title="${ButtonSave}">
<i class="material-icons">save</i> <i class="material-icons">save</i>
</button> </button>
<button id="toggleContextMenu" is="paper-icon-button-light" class="btnToggleContextMenu" title="${ButtonToogleContextMenu}">
<i class="material-icons more_vert"></i>
</button>
</div> </div>
<div id="playlist" class="playlist itemsContainer vertical-list" is="emby-itemscontainer" data-dragreorder="true"></div> <div id="playlist" class="playlist itemsContainer vertical-list" is="emby-itemscontainer" data-dragreorder="true"></div>
<div id="contextMenu" class="contextMenu itemsContainer vertical-list" is="emby-itemscontainer"> <div id="contextMenu" class="contextMenu itemsContainer vertical-list" is="emby-itemscontainer">