add images to recording dialog

This commit is contained in:
Luke Pulverenti 2016-09-13 15:35:03 -04:00
parent 45f9244349
commit 315868b6d6
5 changed files with 128 additions and 20 deletions

View File

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

View File

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

View File

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

View File

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

View File

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