1
0
Fork 0
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:
Luke Pulverenti 2014-01-16 22:13:12 -05:00
parent a0a589b876
commit 4c4c131147
17 changed files with 53 additions and 46 deletions

View file

@ -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;

View file

@ -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%;">

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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">

View file

@ -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>

View file

@ -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);

View file

@ -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>';

View file

@ -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>';

View file

@ -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;

View file

@ -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;

View file

@ -58,7 +58,7 @@
overlayText: true, overlayText: true,
coverImage: true coverImage: true
})); })).createPosterItemHoverMenu();
} }
function reload(page) { function reload(page) {

View file

@ -127,7 +127,7 @@
overlayText: true, overlayText: true,
coverImage: true coverImage: true
})); })).createPosterItemHoverMenu();
} }
function renderSchedule(page, result) { function renderSchedule(page, result) {

View file

@ -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();
}); });
} }

View file

@ -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();

View file

@ -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>';