mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-18 03:18:19 -07:00
add images to recording dialog
This commit is contained in:
parent
45f9244349
commit
315868b6d6
@ -6,9 +6,23 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.recordingDialog-imageContainer {
|
||||
flex-shrink: 0;
|
||||
padding: 1em 1em 1em 0;
|
||||
max-width: 30%;
|
||||
}
|
||||
|
||||
.recordingDialog-img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.recordingDialog-itemName {
|
||||
margin-top: .5em;
|
||||
}
|
||||
|
||||
@media all and (max-height: 1400px) {
|
||||
|
||||
.layout-tv .recordingDialog .itemOverview {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -126,7 +126,7 @@
|
||||
}
|
||||
|
||||
function showSeriesDays(context) {
|
||||
|
||||
|
||||
if (context.querySelector('#chkAnyTime').checked) {
|
||||
slideUpToHide(context.querySelector('.seriesDays'));
|
||||
} else {
|
||||
@ -276,9 +276,49 @@
|
||||
}
|
||||
}
|
||||
|
||||
function getImageUrl(item, apiClient, imageHeight) {
|
||||
|
||||
var imageTags = item.ImageTags || {};
|
||||
|
||||
if (item.PrimaryImageTag) {
|
||||
imageTags.Primary = item.PrimaryImageTag;
|
||||
}
|
||||
|
||||
if (imageTags.Primary) {
|
||||
|
||||
return apiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Primary",
|
||||
maxHeight: imageHeight,
|
||||
tag: item.ImageTags.Primary
|
||||
});
|
||||
}
|
||||
else if (imageTags.Thumb) {
|
||||
|
||||
return apiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Thumb",
|
||||
maxHeight: imageHeight,
|
||||
tag: item.ImageTags.Thumb
|
||||
});
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function renderRecording(context, defaultTimer, program, apiClient) {
|
||||
|
||||
context.querySelector('.itemName').innerHTML = program.Name;
|
||||
var imgUrl = getImageUrl(program, apiClient, 200);
|
||||
var imageContainer = context.querySelector('.recordingDialog-imageContainer');
|
||||
|
||||
if (imgUrl) {
|
||||
imageContainer.innerHTML = '<img src="' + imgUrl + '" class="recordingDialog-img" />';
|
||||
imageContainer.classList.remove('hide');
|
||||
} else {
|
||||
imageContainer.innerHTML = '';
|
||||
imageContainer.classList.add('hide');
|
||||
}
|
||||
|
||||
context.querySelector('.recordingDialog-itemName').innerHTML = program.Name;
|
||||
context.querySelector('.itemGenres').innerHTML = (program.Genres || []).join(' / ');
|
||||
|
||||
context.querySelector('.itemMiscInfoPrimary').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(program);
|
||||
context.querySelector('.itemMiscInfoSecondary').innerHTML = mediaInfo.getSecondaryMediaInfoHtml(program);
|
||||
|
@ -7,9 +7,17 @@
|
||||
<div class="formDialogContent smoothScrollY">
|
||||
<form class="dialogContentInner dialog-content-centered">
|
||||
|
||||
<h1 class="itemName dialogContentTitle"></h1>
|
||||
<p class="itemMiscInfoPrimary" style="display: flex; align-items: center; flex-wrap: wrap;"></p>
|
||||
<p class="itemMiscInfoSecondary" style="display: flex; align-items: center; flex-wrap: wrap;"></p>
|
||||
<div style="display: flex;">
|
||||
<div class="recordingDialog-imageContainer">
|
||||
|
||||
</div>
|
||||
<div style="flex-grow:1;">
|
||||
<h1 class="recordingDialog-itemName dialogContentTitle"></h1>
|
||||
<p class="itemMiscInfoPrimary" style="display: flex; align-items: center; flex-wrap: wrap;"></p>
|
||||
<p class="itemMiscInfoSecondary" style="display: flex; align-items: center; flex-wrap: wrap;"></p>
|
||||
<p class="itemGenres"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="eligibleForSeriesFields" class="hide">
|
||||
<br />
|
||||
@ -100,7 +108,7 @@
|
||||
<div class="formDialogFooter">
|
||||
<div class="supporterContainer hide formDialogFooterItem">
|
||||
<div class="supporterContainerText"></div>
|
||||
<br/>
|
||||
<br />
|
||||
<button is="emby-button" type="button" class="btnSupporter hide raised button-submit block">
|
||||
<span>${HeaderBecomeProjectSupporter}</span>
|
||||
</button>
|
||||
|
@ -30,19 +30,56 @@
|
||||
});
|
||||
}
|
||||
|
||||
function renderTimer(context, item) {
|
||||
function getImageUrl(item, apiClient, imageHeight) {
|
||||
|
||||
var programInfo = item.ProgramInfo || {};
|
||||
var imageTags = item.ImageTags || {};
|
||||
|
||||
context.querySelector('.itemName').innerHTML = item.Name;
|
||||
if (item.PrimaryImageTag) {
|
||||
imageTags.Primary = item.PrimaryImageTag;
|
||||
}
|
||||
|
||||
context.querySelector('.itemGenres').innerHTML = (programInfo.Genres || []).join(' / ');
|
||||
context.querySelector('.itemOverview').innerHTML = programInfo.Overview || '';
|
||||
if (imageTags.Primary) {
|
||||
|
||||
//var timerPageImageContainer = context.querySelector('.timerPageImageContainer');
|
||||
return apiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Primary",
|
||||
maxHeight: imageHeight,
|
||||
tag: item.ImageTags.Primary
|
||||
});
|
||||
}
|
||||
else if (imageTags.Thumb) {
|
||||
|
||||
context.querySelector('.itemMiscInfoPrimary').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(programInfo);
|
||||
context.querySelector('.itemMiscInfoSecondary').innerHTML = mediaInfo.getSecondaryMediaInfoHtml(programInfo);
|
||||
return apiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Thumb",
|
||||
maxHeight: imageHeight,
|
||||
tag: item.ImageTags.Thumb
|
||||
});
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function renderTimer(context, item, apiClient) {
|
||||
|
||||
var program = item.ProgramInfo || {};
|
||||
|
||||
var imgUrl = getImageUrl(program, apiClient, 200);
|
||||
var imageContainer = context.querySelector('.recordingDialog-imageContainer');
|
||||
|
||||
if (imgUrl) {
|
||||
imageContainer.innerHTML = '<img src="' + imgUrl + '" class="recordingDialog-img" />';
|
||||
imageContainer.classList.remove('hide');
|
||||
} else {
|
||||
imageContainer.innerHTML = '';
|
||||
imageContainer.classList.add('hide');
|
||||
}
|
||||
|
||||
context.querySelector('.recordingDialog-itemName').innerHTML = item.Name;
|
||||
|
||||
context.querySelector('.itemGenres').innerHTML = (program.Genres || []).join(' / ');
|
||||
context.querySelector('.itemOverview').innerHTML = program.Overview || '';
|
||||
|
||||
context.querySelector('.itemMiscInfoPrimary').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(program);
|
||||
context.querySelector('.itemMiscInfoSecondary').innerHTML = mediaInfo.getSecondaryMediaInfoHtml(program);
|
||||
|
||||
context.querySelector('#txtPrePaddingMinutes').value = item.PrePaddingSeconds / 60;
|
||||
context.querySelector('#txtPostPaddingMinutes').value = item.PostPaddingSeconds / 60;
|
||||
@ -119,7 +156,7 @@
|
||||
var apiClient = connectionManager.getApiClient(currentServerId);
|
||||
apiClient.getLiveTvTimer(id).then(function (result) {
|
||||
|
||||
renderTimer(context, result);
|
||||
renderTimer(context, result, apiClient);
|
||||
loading.hide();
|
||||
});
|
||||
}
|
||||
|
@ -7,10 +7,19 @@
|
||||
|
||||
<div class="formDialogContent smoothScrollY">
|
||||
<div class="dialogContentInner dialog-content-centered">
|
||||
<h1 class="itemName dialogContentTitle"></h1>
|
||||
<p class="itemMiscInfoPrimary" style="display: flex; align-items: center; flex-wrap: wrap;"></p>
|
||||
<p class="itemMiscInfoSecondary" style="display: flex; align-items: center; flex-wrap: wrap;"></p>
|
||||
<p class="itemGenres"></p>
|
||||
|
||||
<div style="display: flex;">
|
||||
<div class="recordingDialog-imageContainer">
|
||||
|
||||
</div>
|
||||
<div style="flex-grow:1;">
|
||||
<h1 class="recordingDialog-itemName dialogContentTitle"></h1>
|
||||
<p class="itemMiscInfoPrimary" style="display: flex; align-items: center; flex-wrap: wrap;"></p>
|
||||
<p class="itemMiscInfoSecondary" style="display: flex; align-items: center; flex-wrap: wrap;"></p>
|
||||
<p class="itemGenres"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="itemOverview"></p>
|
||||
|
||||
<p style="margin-top: 2em;" class="timerStatus hide">
|
||||
|
Loading…
Reference in New Issue
Block a user