mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
add hover menus to recordings
This commit is contained in:
parent
a0a589b876
commit
4c4c131147
17 changed files with 53 additions and 46 deletions
|
@ -381,7 +381,7 @@ a.itemTag:hover {
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center 15%;
|
background-position: center 15%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
height: 540px;
|
height: 560px;
|
||||||
border-bottom: 1px solid #111;
|
border-bottom: 1px solid #111;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
@ -483,6 +483,10 @@ a.itemTag:hover {
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.desktopOverview {
|
||||||
|
min-width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
.mobileOverview {
|
.mobileOverview {
|
||||||
display: none;
|
display: none;
|
||||||
padding: 0 1em;
|
padding: 0 1em;
|
||||||
|
|
|
@ -383,7 +383,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div data-mini="true" data-role="collapsible" id="keywordsCollapsible" style="display: none;">
|
<div data-mini="true" data-role="collapsible" id="keywordsCollapsible" style="display: none;">
|
||||||
<h3>Keywords</h3>
|
<h3>Plot Keywords</h3>
|
||||||
<div data-role="editableListviewContainer">
|
<div data-role="editableListviewContainer">
|
||||||
<div data-role="fieldcontain">
|
<div data-role="fieldcontain">
|
||||||
<div style="display: inline-block; width: 80%;">
|
<div style="display: inline-block; width: 80%;">
|
||||||
|
|
|
@ -146,7 +146,7 @@
|
||||||
<button id="btnPlay" type="button" data-icon="play" data-inline="true" data-mini="true">Play</button>
|
<button id="btnPlay" type="button" data-icon="play" data-inline="true" data-mini="true">Play</button>
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
<button id="btnRemote" type="button" data-icon="wireless" data-inline="true" data-mini="true">Play On</button>
|
<button id="btnRemote" type="button" data-icon="wireless" data-inline="true" data-mini="true">Remote</button>
|
||||||
</span>
|
</span>
|
||||||
<span id="editButtonContainer" style="display: none;">
|
<span id="editButtonContainer" style="display: none;">
|
||||||
<a id="btnEdit" data-role="button" data-icon="edit" data-inline="true" data-mini="true" href="#">Edit</a>
|
<a id="btnEdit" data-role="button" data-icon="edit" data-inline="true" data-mini="true" href="#">Edit</a>
|
||||||
|
|
|
@ -148,7 +148,7 @@
|
||||||
<a id="btnPlayExternal" data-role="button" data-icon="play" data-inline="true" data-mini="true" href="#" target="_blank">Play</a>
|
<a id="btnPlayExternal" data-role="button" data-icon="play" data-inline="true" data-mini="true" href="#" target="_blank">Play</a>
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
<button id="btnRemote" type="button" data-icon="wireless" data-inline="true" data-mini="true">Play On</button>
|
<button id="btnRemote" type="button" data-icon="wireless" data-inline="true" data-mini="true">Remote</button>
|
||||||
</span>
|
</span>
|
||||||
<span id="editButtonContainer" style="display: none;">
|
<span id="editButtonContainer" style="display: none;">
|
||||||
<a id="btnEdit" data-role="button" data-icon="edit" data-inline="true" data-mini="true" href="#">Edit</a>
|
<a id="btnEdit" data-role="button" data-icon="edit" data-inline="true" data-mini="true" href="#">Edit</a>
|
||||||
|
|
|
@ -31,7 +31,7 @@
|
||||||
<button id="btnPlay" type="button" data-icon="play" data-inline="true" data-mini="true">Play</button>
|
<button id="btnPlay" type="button" data-icon="play" data-inline="true" data-mini="true">Play</button>
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
<button id="btnRemote" type="button" data-icon="wireless" data-inline="true" data-mini="true">Play On</button>
|
<button id="btnRemote" type="button" data-icon="wireless" data-inline="true" data-mini="true">Remote</button>
|
||||||
</span>
|
</span>
|
||||||
<span id="editButtonContainer" style="display: none;">
|
<span id="editButtonContainer" style="display: none;">
|
||||||
<button id="btnEdit" type="button" data-icon="edit" data-inline="true" data-mini="true">Edit</button>
|
<button id="btnEdit" type="button" data-icon="edit" data-inline="true" data-mini="true">Edit</button>
|
||||||
|
|
|
@ -48,7 +48,7 @@
|
||||||
<button id="btnRecord" type="button" data-icon="video" data-inline="true" data-mini="true">Record</button>
|
<button id="btnRecord" type="button" data-icon="video" data-inline="true" data-mini="true">Record</button>
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
<button id="btnRemote" type="button" data-icon="wireless" data-inline="true" data-mini="true">Play On</button>
|
<button id="btnRemote" type="button" data-icon="wireless" data-inline="true" data-mini="true">Remote</button>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div data-role="content">
|
<div data-role="content">
|
||||||
|
|
|
@ -42,7 +42,7 @@
|
||||||
<button id="btnPlay" type="button" data-icon="play" data-inline="true" data-mini="true">Play</button>
|
<button id="btnPlay" type="button" data-icon="play" data-inline="true" data-mini="true">Play</button>
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
<button id="btnRemote" type="button" data-icon="wireless" data-inline="true" data-mini="true">Play On</button>
|
<button id="btnRemote" type="button" data-icon="wireless" data-inline="true" data-mini="true">Remote</button>
|
||||||
</span>
|
</span>
|
||||||
<span id="deleteButtonContainer" style="display: none;">
|
<span id="deleteButtonContainer" style="display: none;">
|
||||||
<button id="btnDelete" type="button" data-icon="delete" data-inline="true" data-mini="true">Delete</button>
|
<button id="btnDelete" type="button" data-icon="delete" data-inline="true" data-mini="true">Delete</button>
|
||||||
|
|
|
@ -196,7 +196,7 @@
|
||||||
html += getViewHtml(views[i]);
|
html += getViewHtml(views[i]);
|
||||||
}
|
}
|
||||||
|
|
||||||
var elem = $('#views', page).html(html);
|
var elem = $('#views', page).html(html).trigger('create');
|
||||||
|
|
||||||
if (counts.MovieCount || counts.TrailerCount) {
|
if (counts.MovieCount || counts.TrailerCount) {
|
||||||
renderMovieViewImages(elem, userId);
|
renderMovieViewImages(elem, userId);
|
||||||
|
|
|
@ -2556,13 +2556,13 @@
|
||||||
buttonCount++;
|
buttonCount++;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (currentUser.Configuration.IsAdministrator) {
|
if (currentUser.Configuration.IsAdministrator && item.Type != "Recording") {
|
||||||
html += '<button type="button" data-mini="true" data-inline="true" data-icon="edit" data-iconpos="notext" title="Edit" onclick="Dashboard.navigate(\'edititemmetadata.html?id=' + item.Id + '\');return false;" style="' + buttonMargin + '">Edit</button>';
|
html += '<button type="button" data-mini="true" data-inline="true" data-icon="edit" data-iconpos="notext" title="Edit" onclick="Dashboard.navigate(\'edititemmetadata.html?id=' + item.Id + '\');return false;" style="' + buttonMargin + '">Edit</button>';
|
||||||
buttonCount++;
|
buttonCount++;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!isPortrait || buttonCount < 3) {
|
if (!isPortrait || buttonCount < 3) {
|
||||||
html += '<button type="button" data-mini="true" data-inline="true" data-icon="wireless" data-iconpos="notext" title="Play On" class="btnRemoteControl" data-itemid="' + item.Id + '" style="' + buttonMargin + '">Play On</button>';
|
html += '<button type="button" data-mini="true" data-inline="true" data-icon="wireless" data-iconpos="notext" title="Remote" class="btnRemoteControl" data-itemid="' + item.Id + '" style="' + buttonMargin + '">Remote</button>';
|
||||||
}
|
}
|
||||||
|
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
|
|
||||||
html += '<a class="desktopHomeLink" href="index.html"><img src="css/images/mblogoicon.png" /></a>';
|
html += '<a class="desktopHomeLink" href="index.html"><img src="css/images/mblogoicon.png" /></a>';
|
||||||
|
|
||||||
html += '<button class="viewMenuRemoteControlButton" onclick="RemoteControl.showMenu();" type="button" data-icon="remote" data-inline="true" data-iconpos="notext" title="Remote Control">Remote Control</button>';
|
html += '<button class="viewMenuRemoteControlButton" onclick="RemoteControl.showMenu();" type="button" data-icon="wireless" data-inline="true" data-iconpos="notext" title="Remote Control">Remote Control</button>';
|
||||||
|
|
||||||
if (user.Configuration.IsAdministrator) {
|
if (user.Configuration.IsAdministrator) {
|
||||||
html += '<a class="editorMenuLink" href="edititemmetadata.html" data-role="button" data-icon="edit" data-inline="true" data-iconpos="notext" title="Metadata Manager">Metadata Manager</a>';
|
html += '<a class="editorMenuLink" href="edititemmetadata.html" data-role="button" data-icon="edit" data-inline="true" data-iconpos="notext" title="Metadata Manager">Metadata Manager</a>';
|
||||||
|
|
|
@ -498,13 +498,6 @@
|
||||||
html += (item.OverviewHtml || item.Overview || '');
|
html += (item.OverviewHtml || item.Overview || '');
|
||||||
html += '</p>';
|
html += '</p>';
|
||||||
|
|
||||||
//html += '<p>';
|
|
||||||
|
|
||||||
//html += '<button type="button" data-mini="true" data-inline="true" data-icon="play" data-iconpos="notext">Play</button>';
|
|
||||||
//html += '<button type="button" data-mini="true" data-inline="true" data-icon="remote" data-iconpos="notext">Play</button>';
|
|
||||||
|
|
||||||
//html += '</p>';
|
|
||||||
|
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
return html;
|
return html;
|
||||||
|
|
|
@ -35,7 +35,7 @@
|
||||||
|
|
||||||
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
|
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
|
||||||
|
|
||||||
$('#items', page).html(html).trigger('create');
|
$('#items', page).html(html).trigger('create').createPosterItemHoverMenu();
|
||||||
|
|
||||||
$('.selectPage', page).on('change', function () {
|
$('.selectPage', page).on('change', function () {
|
||||||
query.StartIndex = (parseInt(this.value) - 1) * query.Limit;
|
query.StartIndex = (parseInt(this.value) - 1) * query.Limit;
|
||||||
|
|
|
@ -58,7 +58,7 @@
|
||||||
overlayText: true,
|
overlayText: true,
|
||||||
coverImage: true
|
coverImage: true
|
||||||
|
|
||||||
}));
|
})).createPosterItemHoverMenu();
|
||||||
}
|
}
|
||||||
|
|
||||||
function reload(page) {
|
function reload(page) {
|
||||||
|
|
|
@ -127,7 +127,7 @@
|
||||||
overlayText: true,
|
overlayText: true,
|
||||||
coverImage: true
|
coverImage: true
|
||||||
|
|
||||||
}));
|
})).createPosterItemHoverMenu();
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderSchedule(page, result) {
|
function renderSchedule(page, result) {
|
||||||
|
|
|
@ -23,7 +23,7 @@
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
$('.activeProgramItems', page).html(html);
|
$('.activeProgramItems', page).html(html).createPosterItemHoverMenu();
|
||||||
});
|
});
|
||||||
|
|
||||||
apiClient.getLiveTvRecommendedPrograms({
|
apiClient.getLiveTvRecommendedPrograms({
|
||||||
|
@ -46,7 +46,7 @@
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
$('.upcomingProgramItems', page).html(html);
|
$('.upcomingProgramItems', page).html(html).createPosterItemHoverMenu();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -69,7 +69,7 @@
|
||||||
html += '<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right" data-theme="b">Close</a>';
|
html += '<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right" data-theme="b">Close</a>';
|
||||||
|
|
||||||
html += '<div class="ui-bar-b" style="text-align:center;">';
|
html += '<div class="ui-bar-b" style="text-align:center;">';
|
||||||
html += '<div style="margin:.5em 0;">Play On</div>';
|
html += '<div style="margin:.5em 0;">Remote Control</div>';
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
html += '<div style="padding: 1em;">';
|
html += '<div style="padding: 1em;">';
|
||||||
|
@ -90,7 +90,7 @@
|
||||||
|
|
||||||
html += '<span id="queueButtonContainer" style="display:none;"><button onclick="$(\'#fldPlayCommand\').val(\'PlayLast\');" type="submit" data-icon="plus" data-mini="true" data-inline="true">Queue</button></span>';
|
html += '<span id="queueButtonContainer" style="display:none;"><button onclick="$(\'#fldPlayCommand\').val(\'PlayLast\');" type="submit" data-icon="plus" data-mini="true" data-inline="true">Queue</button></span>';
|
||||||
|
|
||||||
html += '<span id="browseButtonContainer" style="display:none;"><button onclick="$(\'#fldPlayCommand\').val(\'Browse\');" type="submit" data-icon="eye" data-mini="true" data-inline="true">View on Screen</button></span>';
|
html += '<span id="browseButtonContainer" style="display:none;"><button onclick="$(\'#fldPlayCommand\').val(\'Browse\');" type="submit" data-icon="eye" data-mini="true" data-inline="true">View</button></span>';
|
||||||
|
|
||||||
html += '</p>';
|
html += '</p>';
|
||||||
|
|
||||||
|
@ -454,31 +454,44 @@
|
||||||
var html = '';
|
var html = '';
|
||||||
|
|
||||||
html += '<div style="margin-top:0;">';
|
html += '<div style="margin-top:0;">';
|
||||||
html += '<label for="selectCommand">Play:</label>';
|
|
||||||
html += '<select id="selectCommand" data-mini="true">';
|
html += '<select id="selectCommand" data-mini="true">';
|
||||||
|
|
||||||
var mediaLabel = item.Type;
|
// Default for virtual & IBN types
|
||||||
|
var playLabel = 'View';
|
||||||
html += '<option value="Play" selected>' + mediaLabel + '</label>';
|
|
||||||
|
if (item.LocationType != "Virtual") {
|
||||||
|
|
||||||
|
if (item.IsFolder) {
|
||||||
|
playLabel = "Play All";
|
||||||
|
}
|
||||||
|
else if (item.MediaType == "Video") {
|
||||||
|
playLabel = "Play from beginning";
|
||||||
|
}
|
||||||
|
else if (item.MediaType) {
|
||||||
|
playLabel = "Play";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html += '<option value="Play" selected>' + playLabel + '</label>';
|
||||||
|
|
||||||
if (item.Chapters && item.Chapters.length) {
|
if (item.Chapters && item.Chapters.length) {
|
||||||
html += '<option value="PlayFromChapter">Scene</label>';
|
html += '<option value="PlayFromChapter">Play from scene</label>';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (item.LocalTrailerCount) {
|
if (item.LocalTrailerCount) {
|
||||||
html += '<option value="Trailer">Trailer</label>';
|
html += '<option value="Trailer">Play trailer</label>';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (item.SpecialFeatureCount) {
|
if (item.SpecialFeatureCount) {
|
||||||
html += '<option value="SpecialFeature">Special feature</label>';
|
html += '<option value="SpecialFeature">Play special feature</label>';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (options.themeSongs) {
|
if (options.themeSongs) {
|
||||||
html += '<option value="ThemeSong">Theme song</label>';
|
html += '<option value="ThemeSong">Play theme song</label>';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (options.themeVideos) {
|
if (options.themeVideos) {
|
||||||
html += '<option value="ThemeVideo">Theme video</label>';
|
html += '<option value="ThemeVideo">Play theme video</label>';
|
||||||
}
|
}
|
||||||
|
|
||||||
html += '</select>';
|
html += '</select>';
|
||||||
|
@ -642,7 +655,7 @@
|
||||||
html += '<div class="sessionsPopupContent">';
|
html += '<div class="sessionsPopupContent">';
|
||||||
|
|
||||||
// Add controls here
|
// Add controls here
|
||||||
html += '<div><label for="selectSession">Select session to control</label>';
|
html += '<div>';
|
||||||
html += '<select id="selectSession" name="selectSession" data-mini="true"></select></div>';
|
html += '<select id="selectSession" name="selectSession" data-mini="true"></select></div>';
|
||||||
|
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
@ -659,24 +672,24 @@
|
||||||
|
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
|
html += '<div class="commandsCollapsible" data-role="collapsible" data-collapsed="true" data-mini="true" style="margin-top: 1em;display:none;">';
|
||||||
|
html += '<h4>Send Command</h4>';
|
||||||
|
html += '<div>';
|
||||||
|
|
||||||
html += '<p class="sessionButtons" style="text-align:center;">';
|
html += '<p class="sessionButtons" style="text-align:center;">';
|
||||||
|
|
||||||
html += '<button class="btnGoHome" type="button" data-icon="home" data-mini="true" data-inline="true">Home</button>';
|
html += '<button class="btnGoHome" type="button" data-icon="home" data-mini="true" data-inline="true">Go Home</button>';
|
||||||
html += '<button class="btnGoToSettings" type="button" data-icon="gear" data-mini="true" data-inline="true">Settings</button>';
|
html += '<button class="btnGoToSettings" type="button" data-icon="gear" data-mini="true" data-inline="true">View Settings</button>';
|
||||||
|
|
||||||
html += '</p>';
|
html += '</p>';
|
||||||
|
|
||||||
html += '<div class="commandsCollapsible" data-role="collapsible" data-collapsed="true" data-mini="true" style="margin-top: 1em;display:none;">';
|
|
||||||
html += '<h4>Send Message</h4>';
|
|
||||||
html += '<div>';
|
|
||||||
|
|
||||||
html += '<p style="text-align:center;">';
|
html += '<p style="text-align:center;">';
|
||||||
|
|
||||||
html += '<div><label for="txtMessage">Message text</label></div>';
|
html += '<div><label for="txtMessage">Message text</label></div>';
|
||||||
|
|
||||||
html += '<input id="txtMessage" name="txtMessage" type="text" />';
|
html += '<input id="txtMessage" name="txtMessage" type="text" />';
|
||||||
|
|
||||||
html += '<button type="button" data-icon="mail" class="btnSendMessage" data-mini="true">Send</button>';
|
html += '<button type="button" data-icon="mail" class="btnSendMessage" data-mini="true">Send Message</button>';
|
||||||
|
|
||||||
html += '</p>';
|
html += '</p>';
|
||||||
|
|
||||||
|
@ -877,13 +890,11 @@
|
||||||
$('.nothingPlaying', popup).hide();
|
$('.nothingPlaying', popup).hide();
|
||||||
$('.nowPlaying', popup).hide();
|
$('.nowPlaying', popup).hide();
|
||||||
$('.commandsCollapsible', popup).hide();
|
$('.commandsCollapsible', popup).hide();
|
||||||
$('.sessionButtons', popup).hide();
|
|
||||||
|
|
||||||
}
|
}
|
||||||
else if (session.NowPlayingItem) {
|
else if (session.NowPlayingItem) {
|
||||||
|
|
||||||
$('.commandsCollapsible', popup).show();
|
$('.commandsCollapsible', popup).show();
|
||||||
$('.sessionButtons', popup).show();
|
|
||||||
$('.nothingPlaying', popup).hide();
|
$('.nothingPlaying', popup).hide();
|
||||||
|
|
||||||
var elem = $('.nowPlaying', popup).show();
|
var elem = $('.nowPlaying', popup).show();
|
||||||
|
@ -892,7 +903,6 @@
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
$('.sessionButtons', popup).show();
|
|
||||||
$('.commandsCollapsible', popup).show();
|
$('.commandsCollapsible', popup).show();
|
||||||
$('.nothingPlaying', popup).show();
|
$('.nothingPlaying', popup).show();
|
||||||
$('.nowPlaying', popup).hide();
|
$('.nowPlaying', popup).hide();
|
||||||
|
|
|
@ -1360,7 +1360,7 @@ $(function () {
|
||||||
footerHtml += '<button onclick="MediaPlayer.showChannelsFlyout();" id="channelsButton" class="mediaButton channelsButton" title="TV Channels" type="button" data-icon="tv" data-iconpos="notext" data-inline="true">TV Channels</button>';
|
footerHtml += '<button onclick="MediaPlayer.showChannelsFlyout();" id="channelsButton" class="mediaButton channelsButton" title="TV Channels" type="button" data-icon="tv" data-iconpos="notext" data-inline="true">TV Channels</button>';
|
||||||
footerHtml += '<div class="mediaFlyoutContainer"><div id="channelsFlyout" style="display:none;" class="mediaPlayerFlyout channelsFlyout"></div></div>';
|
footerHtml += '<div class="mediaFlyoutContainer"><div id="channelsFlyout" style="display:none;" class="mediaPlayerFlyout channelsFlyout"></div></div>';
|
||||||
|
|
||||||
footerHtml += '<button onclick="MediaPlayer.showSendMediaMenu();" id="sendMediaButton" class="mediaButton sendMediaButton" title="Play On" type="button" data-icon="wireless" data-iconpos="notext" data-inline="true">Play On</button>';
|
footerHtml += '<button onclick="MediaPlayer.showSendMediaMenu();" id="sendMediaButton" class="mediaButton sendMediaButton" title="Remote" type="button" data-icon="wireless" data-iconpos="notext" data-inline="true">Remote</button>';
|
||||||
|
|
||||||
footerHtml += '</div>';
|
footerHtml += '</div>';
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue