class Renderer {
constructor() {}
renderThumbnail(post) {
let status = post.status.string ? post.status.string : "Завершен";
if(post.inSchedule) {
if(post.inSchedule.isToday) {
status = `<span class="mdi mdi-flag-checkered"></span> Сегодня`;
} else {
status = `<span class="mdi mdi-flag-checkered"></span> ${(post.inSchedule.string.charAt(0).toUpperCase() + post.inSchedule.string.slice(1))}`;
}
}
const watched = (post.localPlayerData && post.localPlayerData.currentEpisode == post.player.episodes.last)
? `<div class="thumb-label watched">Просмотрено</div>`
: ""
return `
<div class="component thumbnail">
<img src="http://anilibria.tv${post.posters.medium.url}" class="thumbnail-img">
<img
src="data:image/jpeg;base64,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"
class="poster-placeholder"
>
<div class="hover-effect">
<span class="mdi mdi-arrow-right"></span>
</div>
${watched}
<div class="thumb-label status">${status}</div>
<div class="thumb-label series">Серий ${post.player.episodes.last}</div>
</div>
`;
}
renderItemCard(post) {
let genres = post.genres.join(", ");
const thumb = this.renderThumbnail(post);
let html = `<a href="#page:single;id${post.id}" class="no-decoration item-link">
<div class="component card item-card" data-id="${post.id}">
${thumb}
<div class="info">
<div class="title">${post.names.ru} (<span class="year">${post.season.year}</span>)</div>
<div class="meta">
<div class="genres">${genres}</div>
<div class="type">${post.type.full_string}</div>
</div>
</div>
</div>
</a>`;
return {
string: html,
node: app().postRender.itemCard(html)
};
}
renderTorrents(post) {
let html = `<div class="component torrents">`;
for(let i=0; i<post.torrents.list.length; i++) {
const torrent = post.torrents.list[i];
let size = torrent.total_size / 1024 / 1024;
size = (size > 1024)
? (size / 1024).toString().split(".")[0] + "." + (size / 1024).toString().split(".")[1].substr(0,2) + " ГБ"
: size.toString().split(".")[0] + "." + size.toString().split(".")[1].substr(0,2) + " МБ";
html += `
<div class="torrent" data-torrent-id="${torrent.torrent_id}">
<div class="series">Серии ${torrent.episodes.string}</div>
<div class="quality">${torrent.quality.string}</div>
<div class="seed-leech">
<span class="seed">
<span class="mdi mdi-arrow-up"></span>
${torrent.seeders}
</span>
<span class="leech">
<span class="mdi mdi-arrow-down"></span>
${torrent.leechers}
</span>
</div>
<div class="download">
<a href="http://anilibria.tv${torrent.url}" class="std-btn btn-success" target="_blank">
<span class="mdi mdi-download"></span>
<span class="btn-label">Скачать</span>
<span class="btn-tsize">${size}</span>
</a>
</div>
</div>
`;
}
html += "</div>";
return html;
}
renderFavoriteBtn(post) {
const html = `<button class="std-btn btn-warning fav-btn dnone" data-id="${post.id}">
<span class="state unset-from">
<span class="mdi mdi-star"></span>
В избранном
</span>
<span class="state set-to">
<span class="mdi mdi-star-outline"></span>
Добавить в избранное
</span>
</button>`;
return {
html: html,
node: app().postRender.favoriteBtn(html, post.id)
};
}
renderTabs(props) {
let nav = `<div class="tabs-nav">`;
let content = `<div class="tabs-content">`;
for(let tabName in props.tabs) {
const active = (props.active == tabName) ? "active" : "";
nav += `<div class="tab ${active}" data-tab="${tabName}">${props.tabs[tabName].btn}</div>`;
content += `<div class="tab-content ${tabName} ${active}" data-tab="${tabName}">${props.tabs[tabName].content}</div>`;
}
nav += `</div>`;
content += `</div>`;
let html = `<div class="component tabs ${props.name}" id="${props.name}">
${nav}
${content}
</div>`;
return html;
}
renderSingle(post) {
let genres = this.renderGenresList(post.genres).html;
const thumb = this.renderThumbnail(post);
const voices = post.team.voice.join(", ");
const schedule = post.inSchedule
? `<div class=""><span class="mdi mdi-flag-checkered"></span> Новая серия: ${(post.inSchedule.isToday ? "сегодня" : post.inSchedule.string)}</div>`
: "";
let html = `<div class="component single-item">
<div class="std-row">
${thumb}
<div class="item-info">
<h2 class="title"><strong>${post.names.ru}</strong> / ${post.names.en}</h2>
<div class="time-period">${post.season.string || ""} ${post.season.year}</div>
<div class="genres">${genres}</div>
<div class="type">${post.type.full_string}</div>
${schedule}
<div class="team">
<div class="voice">
<strong>Голоса:</strong>
${voices}
</div>
</div>
<div class="description">${post.description}</div>
<div class="control-panel">
<div class="fav-btn-wrap"></div>
</div>
</div>
</div>
<div class="video-container"></div>
</div>`;
return {
string: html,
node: app().postRender.single(html, post)
};
}
renderPreloadSpinner() {
return `<div class="loadingio-spinner-dual-ball-9pyhqeozhs"><div class="ldio-jyt13pqa73">
<div></div><div></div><div></div>
</div></div>`;
}
renderGenreBtn(genre) {
let html = `<a
href="#page:genres;sg:${genre}"
class="std-btn genre-btn"
data-genre-name="${genre}"
>
${genre}
</a>`;
return {
html: html,
node: app().postRender.genreBtn(html)
};
}
renderGenresList(genres) {
let container = document.createElement("DIV");
container.classList.add("genres-wrap");
let html = `<div class="genres-wrap">`;
for(let i=0; i<genres.length; i++) {
const btn = this.renderGenreBtn(genres[i]);
container.appendChild(btn.node);
html += btn.html;
}
html += "</div>";
return {
html: html,
node: container
};
}
}
