mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-16 02:18:16 -07:00
Merge pull request #1780 from Camc314/migrate-to-ES6-70
Migration of tunerPicker and userdatabuttons to ES6 modules
This commit is contained in:
dkanada
GitHub
commit
74136e3615
@ -194,7 +194,9 @@
|
|||||||
"src/components/tvproviders/schedulesdirect.js",
|
"src/components/tvproviders/schedulesdirect.js",
|
||||||
"src/components/tvproviders/xmltv.js",
|
"src/components/tvproviders/xmltv.js",
|
||||||
"src/components/toast/toast.js",
|
"src/components/toast/toast.js",
|
||||||
|
"src/components/tunerPicker.js",
|
||||||
"src/components/upnextdialog/upnextdialog.js",
|
"src/components/upnextdialog/upnextdialog.js",
|
||||||
|
"src/components/userdatabuttons/userdatabuttons.js",
|
||||||
"src/components/viewContainer.js",
|
"src/components/viewContainer.js",
|
||||||
"src/components/viewSettings/viewSettings.js",
|
"src/components/viewSettings/viewSettings.js",
|
||||||
"src/components/castSenderApi.js",
|
"src/components/castSenderApi.js",
|
||||||
|
|||||||
@ -1,183 +1,185 @@
|
|||||||
define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize', 'loading', 'browser', 'focusManager', 'scrollHelper', 'material-icons', 'formDialogStyle', 'emby-button', 'emby-itemscontainer', 'cardStyle'], function (dialogHelper, dom, layoutManager, connectionManager, globalize, loading, browser, focusManager, scrollHelper) {
|
import dialogHelper from 'dialogHelper';
|
||||||
'use strict';
|
import dom from 'dom';
|
||||||
|
import layoutManager from 'layoutManager';
|
||||||
|
import connectionManager from 'connectionManager';
|
||||||
|
import globalize from 'globalize';
|
||||||
|
import loading from 'loading';
|
||||||
|
import browser from 'browser';
|
||||||
|
import focusManager from 'focusManager';
|
||||||
|
import scrollHelper from 'scrollHelper';
|
||||||
|
import 'material-icons';
|
||||||
|
import 'formDialogStyle';
|
||||||
|
import 'emby-button';
|
||||||
|
import 'emby-itemscontainer';
|
||||||
|
import 'cardStyle';
|
||||||
|
|
||||||
browser = browser.default || browser;
|
const enableFocusTransform = !browser.slow && !browser.edge;
|
||||||
loading = loading.default || loading;
|
|
||||||
layoutManager = layoutManager.default || layoutManager;
|
|
||||||
focusManager = focusManager.default || focusManager;
|
|
||||||
scrollHelper = scrollHelper.default || scrollHelper;
|
|
||||||
|
|
||||||
var enableFocusTransform = !browser.slow && !browser.edge;
|
function getEditorHtml() {
|
||||||
|
let html = '';
|
||||||
|
html += '<div class="formDialogContent scrollY">';
|
||||||
|
html += '<div class="dialogContentInner dialog-content-centered">';
|
||||||
|
html += '<div class="loadingContent hide">';
|
||||||
|
html += '<h1>' + globalize.translate('DetectingDevices') + '...</h1>';
|
||||||
|
html += '<p>' + globalize.translate('MessagePleaseWait') + '</p>';
|
||||||
|
html += '</div>';
|
||||||
|
html += '<h1 style="margin-bottom:.25em;" class="devicesHeader hide">' + globalize.translate('HeaderNewDevices') + '</h1>';
|
||||||
|
html += '<div is="emby-itemscontainer" class="results vertical-wrap">';
|
||||||
|
html += '</div>';
|
||||||
|
html += '</div>';
|
||||||
|
return html += '</div>';
|
||||||
|
}
|
||||||
|
|
||||||
function getEditorHtml() {
|
function getDeviceHtml(device) {
|
||||||
var html = '';
|
let html = '';
|
||||||
html += '<div class="formDialogContent scrollY">';
|
let cssClass = 'card scalableCard backdropCard backdropCard-scalable';
|
||||||
html += '<div class="dialogContentInner dialog-content-centered">';
|
const cardBoxCssClass = 'cardBox visualCardBox';
|
||||||
html += '<div class="loadingContent hide">';
|
const padderClass = 'cardPadder-backdrop';
|
||||||
html += '<h1>' + globalize.translate('DetectingDevices') + '...</h1>';
|
|
||||||
html += '<p>' + globalize.translate('MessagePleaseWait') + '</p>';
|
|
||||||
html += '</div>';
|
|
||||||
html += '<h1 style="margin-bottom:.25em;" class="devicesHeader hide">' + globalize.translate('HeaderNewDevices') + '</h1>';
|
|
||||||
html += '<div is="emby-itemscontainer" class="results vertical-wrap">';
|
|
||||||
html += '</div>';
|
|
||||||
html += '</div>';
|
|
||||||
return html += '</div>';
|
|
||||||
}
|
|
||||||
|
|
||||||
function getDeviceHtml(device) {
|
// TODO move card creation code to Card component
|
||||||
var padderClass;
|
|
||||||
var html = '';
|
|
||||||
var cssClass = 'card scalableCard';
|
|
||||||
var cardBoxCssClass = 'cardBox visualCardBox';
|
|
||||||
cssClass += ' backdropCard backdropCard-scalable';
|
|
||||||
padderClass = 'cardPadder-backdrop';
|
|
||||||
|
|
||||||
// TODO move card creation code to Card component
|
if (layoutManager.tv) {
|
||||||
|
cssClass += ' show-focus';
|
||||||
|
|
||||||
if (layoutManager.tv) {
|
if (enableFocusTransform) {
|
||||||
cssClass += ' show-focus';
|
cssClass += ' show-animation';
|
||||||
|
|
||||||
if (enableFocusTransform) {
|
|
||||||
cssClass += ' show-animation';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
html += '<button type="button" class="' + cssClass + '" data-id="' + device.DeviceId + '" style="min-width:33.3333%;">';
|
|
||||||
html += '<div class="' + cardBoxCssClass + '">';
|
|
||||||
html += '<div class="cardScalable visualCardBox-cardScalable">';
|
|
||||||
html += '<div class="' + padderClass + '"></div>';
|
|
||||||
html += '<div class="cardContent searchImage">';
|
|
||||||
html += '<div class="cardImageContainer coveredImage"><span class="cardImageIcon material-icons dvr"></span></div>';
|
|
||||||
html += '</div>';
|
|
||||||
html += '</div>';
|
|
||||||
html += '<div class="cardFooter visualCardBox-cardFooter">';
|
|
||||||
html += '<div class="cardText cardTextCentered">' + getTunerName(device.Type) + '</div>';
|
|
||||||
html += '<div class="cardText cardTextCentered cardText-secondary">' + device.FriendlyName + '</div>';
|
|
||||||
html += '<div class="cardText cardText-secondary cardTextCentered">';
|
|
||||||
html += device.Url || ' ';
|
|
||||||
html += '</div>';
|
|
||||||
html += '</div>';
|
|
||||||
html += '</div>';
|
|
||||||
return html += '</button>';
|
|
||||||
}
|
|
||||||
|
|
||||||
function getTunerName(providerId) {
|
|
||||||
switch (providerId = providerId.toLowerCase()) {
|
|
||||||
case 'm3u':
|
|
||||||
return 'M3U';
|
|
||||||
|
|
||||||
case 'hdhomerun':
|
|
||||||
return 'HDHomerun';
|
|
||||||
|
|
||||||
case 'hauppauge':
|
|
||||||
return 'Hauppauge';
|
|
||||||
|
|
||||||
case 'satip':
|
|
||||||
return 'DVB';
|
|
||||||
|
|
||||||
default:
|
|
||||||
return 'Unknown';
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderDevices(view, devices) {
|
html += '<button type="button" class="' + cssClass + '" data-id="' + device.DeviceId + '" style="min-width:33.3333%;">';
|
||||||
var i;
|
html += '<div class="' + cardBoxCssClass + '">';
|
||||||
var length;
|
html += '<div class="cardScalable visualCardBox-cardScalable">';
|
||||||
var html = '';
|
html += '<div class="' + padderClass + '"></div>';
|
||||||
|
html += '<div class="cardContent searchImage">';
|
||||||
|
html += '<div class="cardImageContainer coveredImage"><span class="cardImageIcon material-icons dvr"></span></div>';
|
||||||
|
html += '</div>';
|
||||||
|
html += '</div>';
|
||||||
|
html += '<div class="cardFooter visualCardBox-cardFooter">';
|
||||||
|
html += '<div class="cardText cardTextCentered">' + getTunerName(device.Type) + '</div>';
|
||||||
|
html += '<div class="cardText cardTextCentered cardText-secondary">' + device.FriendlyName + '</div>';
|
||||||
|
html += '<div class="cardText cardText-secondary cardTextCentered">';
|
||||||
|
html += device.Url || ' ';
|
||||||
|
html += '</div>';
|
||||||
|
html += '</div>';
|
||||||
|
html += '</div>';
|
||||||
|
return html += '</button>';
|
||||||
|
}
|
||||||
|
|
||||||
for (i = 0, length = devices.length; i < length; i++) {
|
function getTunerName(providerId) {
|
||||||
html += getDeviceHtml(devices[i]);
|
switch (providerId = providerId.toLowerCase()) {
|
||||||
}
|
case 'm3u':
|
||||||
|
return 'M3U';
|
||||||
|
|
||||||
if (devices.length) {
|
case 'hdhomerun':
|
||||||
view.querySelector('.devicesHeader').classList.remove('hide');
|
return 'HDHomerun';
|
||||||
} else {
|
|
||||||
html = '<p><br/>' + globalize.translate('NoNewDevicesFound') + '</p>';
|
|
||||||
view.querySelector('.devicesHeader').classList.add('hide');
|
|
||||||
}
|
|
||||||
|
|
||||||
var elem = view.querySelector('.results');
|
case 'hauppauge':
|
||||||
elem.innerHTML = html;
|
return 'Hauppauge';
|
||||||
|
|
||||||
if (layoutManager.tv) {
|
case 'satip':
|
||||||
focusManager.autoFocus(elem);
|
return 'DVB';
|
||||||
}
|
|
||||||
|
default:
|
||||||
|
return 'Unknown';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderDevices(view, devices) {
|
||||||
|
let html = '';
|
||||||
|
|
||||||
|
for (let i = 0, length = devices.length; i < length; i++) {
|
||||||
|
html += getDeviceHtml(devices[i]);
|
||||||
}
|
}
|
||||||
|
|
||||||
function discoverDevices(view, apiClient) {
|
if (devices.length) {
|
||||||
loading.show();
|
view.querySelector('.devicesHeader').classList.remove('hide');
|
||||||
view.querySelector('.loadingContent').classList.remove('hide');
|
} else {
|
||||||
return ApiClient.getJSON(ApiClient.getUrl('LiveTv/Tuners/Discvover', {
|
html = '<p><br/>' + globalize.translate('NoNewDevicesFound') + '</p>';
|
||||||
NewDevicesOnly: true
|
view.querySelector('.devicesHeader').classList.add('hide');
|
||||||
})).then(function (devices) {
|
|
||||||
currentDevices = devices;
|
|
||||||
renderDevices(view, devices);
|
|
||||||
view.querySelector('.loadingContent').classList.add('hide');
|
|
||||||
loading.hide();
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function tunerPicker() {
|
const elem = view.querySelector('.results');
|
||||||
this.show = function (options) {
|
elem.innerHTML = html;
|
||||||
var dialogOptions = {
|
|
||||||
removeOnClose: true,
|
|
||||||
scrollY: false
|
|
||||||
};
|
|
||||||
|
|
||||||
if (layoutManager.tv) {
|
if (layoutManager.tv) {
|
||||||
dialogOptions.size = 'fullscreen';
|
focusManager.autoFocus(elem);
|
||||||
} else {
|
}
|
||||||
dialogOptions.size = 'small';
|
}
|
||||||
}
|
|
||||||
|
|
||||||
var dlg = dialogHelper.createDialog(dialogOptions);
|
function discoverDevices(view, apiClient) {
|
||||||
dlg.classList.add('formDialog');
|
loading.show();
|
||||||
var html = '';
|
view.querySelector('.loadingContent').classList.remove('hide');
|
||||||
html += '<div class="formDialogHeader">';
|
return ApiClient.getJSON(ApiClient.getUrl('LiveTv/Tuners/Discvover', {
|
||||||
html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
|
NewDevicesOnly: true
|
||||||
html += '<h3 class="formDialogHeaderTitle">';
|
})).then(function (devices) {
|
||||||
html += globalize.translate('HeaderLiveTvTunerSetup');
|
currentDevices = devices;
|
||||||
html += '</h3>';
|
renderDevices(view, devices);
|
||||||
html += '</div>';
|
view.querySelector('.loadingContent').classList.add('hide');
|
||||||
html += getEditorHtml();
|
loading.hide();
|
||||||
dlg.innerHTML = html;
|
});
|
||||||
dlg.querySelector('.btnCancel').addEventListener('click', function () {
|
}
|
||||||
dialogHelper.close(dlg);
|
|
||||||
});
|
|
||||||
var deviceResult;
|
|
||||||
dlg.querySelector('.results').addEventListener('click', function (e) {
|
|
||||||
var tunerCard = dom.parentWithClass(e.target, 'card');
|
|
||||||
|
|
||||||
if (tunerCard) {
|
function tunerPicker() {
|
||||||
var deviceId = tunerCard.getAttribute('data-id');
|
this.show = function (options) {
|
||||||
deviceResult = currentDevices.filter(function (d) {
|
const dialogOptions = {
|
||||||
return d.DeviceId === deviceId;
|
removeOnClose: true,
|
||||||
})[0];
|
scrollY: false
|
||||||
dialogHelper.close(dlg);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (layoutManager.tv) {
|
|
||||||
scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
|
|
||||||
}
|
|
||||||
|
|
||||||
var apiClient = connectionManager.getApiClient(options.serverId);
|
|
||||||
discoverDevices(dlg, apiClient);
|
|
||||||
|
|
||||||
if (layoutManager.tv) {
|
|
||||||
scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
|
|
||||||
}
|
|
||||||
|
|
||||||
return dialogHelper.open(dlg).then(function () {
|
|
||||||
if (deviceResult) {
|
|
||||||
return Promise.resolve(deviceResult);
|
|
||||||
}
|
|
||||||
|
|
||||||
return Promise.reject();
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
}
|
|
||||||
|
|
||||||
var currentDevices = [];
|
if (layoutManager.tv) {
|
||||||
return tunerPicker;
|
dialogOptions.size = 'fullscreen';
|
||||||
});
|
} else {
|
||||||
|
dialogOptions.size = 'small';
|
||||||
|
}
|
||||||
|
|
||||||
|
const dlg = dialogHelper.createDialog(dialogOptions);
|
||||||
|
dlg.classList.add('formDialog');
|
||||||
|
let html = '';
|
||||||
|
html += '<div class="formDialogHeader">';
|
||||||
|
html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
|
||||||
|
html += '<h3 class="formDialogHeaderTitle">';
|
||||||
|
html += globalize.translate('HeaderLiveTvTunerSetup');
|
||||||
|
html += '</h3>';
|
||||||
|
html += '</div>';
|
||||||
|
html += getEditorHtml();
|
||||||
|
dlg.innerHTML = html;
|
||||||
|
dlg.querySelector('.btnCancel').addEventListener('click', function () {
|
||||||
|
dialogHelper.close(dlg);
|
||||||
|
});
|
||||||
|
let deviceResult;
|
||||||
|
dlg.querySelector('.results').addEventListener('click', function (e) {
|
||||||
|
const tunerCard = dom.parentWithClass(e.target, 'card');
|
||||||
|
|
||||||
|
if (tunerCard) {
|
||||||
|
const deviceId = tunerCard.getAttribute('data-id');
|
||||||
|
deviceResult = currentDevices.filter(function (d) {
|
||||||
|
return d.DeviceId === deviceId;
|
||||||
|
})[0];
|
||||||
|
dialogHelper.close(dlg);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (layoutManager.tv) {
|
||||||
|
scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
|
||||||
|
}
|
||||||
|
|
||||||
|
const apiClient = connectionManager.getApiClient(options.serverId);
|
||||||
|
discoverDevices(dlg, apiClient);
|
||||||
|
|
||||||
|
if (layoutManager.tv) {
|
||||||
|
scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
|
||||||
|
}
|
||||||
|
|
||||||
|
return dialogHelper.open(dlg).then(function () {
|
||||||
|
if (deviceResult) {
|
||||||
|
return Promise.resolve(deviceResult);
|
||||||
|
}
|
||||||
|
|
||||||
|
return Promise.reject();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
let currentDevices = [];
|
||||||
|
|
||||||
|
export default tunerPicker;
|
||||||
|
|||||||
@ -1,214 +1,219 @@
|
|||||||
define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-button-light', 'material-icons', 'emby-button', 'css!./userdatabuttons'], function (connectionManager, globalize, dom, itemHelper) {
|
import connectionManager from 'connectionManager';
|
||||||
'use strict';
|
import globalize from 'globalize';
|
||||||
|
import dom from 'dom';
|
||||||
|
import itemHelper from 'itemHelper';
|
||||||
|
import 'paper-icon-button-light';
|
||||||
|
import 'material-icons';
|
||||||
|
import 'emby-button';
|
||||||
|
import 'css!./userdatabuttons';
|
||||||
|
|
||||||
var userDataMethods = {
|
const userDataMethods = {
|
||||||
markPlayed: markPlayed,
|
markPlayed: markPlayed,
|
||||||
markDislike: markDislike,
|
markDislike: markDislike,
|
||||||
markLike: markLike,
|
markLike: markLike,
|
||||||
markFavorite: markFavorite
|
markFavorite: markFavorite
|
||||||
};
|
};
|
||||||
|
|
||||||
function getUserDataButtonHtml(method, itemId, serverId, buttonCssClass, iconCssClass, icon, tooltip, style) {
|
function getUserDataButtonHtml(method, itemId, serverId, buttonCssClass, iconCssClass, icon, tooltip, style) {
|
||||||
if (style === 'fab-mini') {
|
if (style === 'fab-mini') {
|
||||||
style = 'fab';
|
style = 'fab';
|
||||||
buttonCssClass = buttonCssClass ? (buttonCssClass + ' mini') : 'mini';
|
buttonCssClass = buttonCssClass ? (buttonCssClass + ' mini') : 'mini';
|
||||||
}
|
|
||||||
|
|
||||||
var is = style === 'fab' ? 'emby-button' : 'paper-icon-button-light';
|
|
||||||
var className = style === 'fab' ? 'autoSize fab' : 'autoSize';
|
|
||||||
|
|
||||||
if (buttonCssClass) {
|
|
||||||
className += ' ' + buttonCssClass;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (iconCssClass) {
|
|
||||||
iconCssClass += ' ';
|
|
||||||
} else {
|
|
||||||
iconCssClass = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
iconCssClass += 'material-icons';
|
|
||||||
|
|
||||||
return '<button title="' + tooltip + '" data-itemid="' + itemId + '" data-serverid="' + serverId + '" is="' + is + '" data-method="' + method + '" class="' + className + '"><span class="' + iconCssClass + ' ' + icon + '"></span></button>';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function onContainerClick(e) {
|
const is = style === 'fab' ? 'emby-button' : 'paper-icon-button-light';
|
||||||
var btnUserData = dom.parentWithClass(e.target, 'btnUserData');
|
let className = style === 'fab' ? 'autoSize fab' : 'autoSize';
|
||||||
|
|
||||||
if (!btnUserData) {
|
if (buttonCssClass) {
|
||||||
return;
|
className += ' ' + buttonCssClass;
|
||||||
}
|
|
||||||
|
|
||||||
var method = btnUserData.getAttribute('data-method');
|
|
||||||
userDataMethods[method](btnUserData);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function fill(options) {
|
if (iconCssClass) {
|
||||||
var html = getIconsHtml(options);
|
iconCssClass += ' ';
|
||||||
|
} else {
|
||||||
if (options.fillMode === 'insertAdjacent') {
|
iconCssClass = '';
|
||||||
options.element.insertAdjacentHTML(options.insertLocation || 'beforeend', html);
|
|
||||||
} else {
|
|
||||||
options.element.innerHTML = html;
|
|
||||||
}
|
|
||||||
|
|
||||||
dom.removeEventListener(options.element, 'click', onContainerClick, {
|
|
||||||
passive: true
|
|
||||||
});
|
|
||||||
|
|
||||||
dom.addEventListener(options.element, 'click', onContainerClick, {
|
|
||||||
passive: true
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function destroy(options) {
|
iconCssClass += 'material-icons';
|
||||||
options.element.innerHTML = '';
|
|
||||||
|
|
||||||
dom.removeEventListener(options.element, 'click', onContainerClick, {
|
return '<button title="' + tooltip + '" data-itemid="' + itemId + '" data-serverid="' + serverId + '" is="' + is + '" data-method="' + method + '" class="' + className + '"><span class="' + iconCssClass + ' ' + icon + '"></span></button>';
|
||||||
passive: true
|
}
|
||||||
});
|
|
||||||
|
function onContainerClick(e) {
|
||||||
|
const btnUserData = dom.parentWithClass(e.target, 'btnUserData');
|
||||||
|
|
||||||
|
if (!btnUserData) {
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
function getIconsHtml(options) {
|
const method = btnUserData.getAttribute('data-method');
|
||||||
var item = options.item;
|
userDataMethods[method](btnUserData);
|
||||||
var includePlayed = options.includePlayed;
|
}
|
||||||
var cssClass = options.cssClass;
|
|
||||||
var style = options.style;
|
|
||||||
|
|
||||||
var html = '';
|
function fill(options) {
|
||||||
|
const html = getIconsHtml(options);
|
||||||
|
|
||||||
var userData = item.UserData || {};
|
if (options.fillMode === 'insertAdjacent') {
|
||||||
|
options.element.insertAdjacentHTML(options.insertLocation || 'beforeend', html);
|
||||||
|
} else {
|
||||||
|
options.element.innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
var itemId = item.Id;
|
dom.removeEventListener(options.element, 'click', onContainerClick, {
|
||||||
|
passive: true
|
||||||
|
});
|
||||||
|
|
||||||
if (itemHelper.isLocalItem(item)) {
|
dom.addEventListener(options.element, 'click', onContainerClick, {
|
||||||
return html;
|
passive: true
|
||||||
}
|
});
|
||||||
|
}
|
||||||
|
|
||||||
var btnCssClass = 'btnUserData';
|
function destroy(options) {
|
||||||
|
options.element.innerHTML = '';
|
||||||
|
|
||||||
if (cssClass) {
|
dom.removeEventListener(options.element, 'click', onContainerClick, {
|
||||||
btnCssClass += ' ' + cssClass;
|
passive: true
|
||||||
}
|
});
|
||||||
|
}
|
||||||
|
|
||||||
var iconCssClass = options.iconCssClass;
|
function getIconsHtml(options) {
|
||||||
|
const item = options.item;
|
||||||
|
const includePlayed = options.includePlayed;
|
||||||
|
const cssClass = options.cssClass;
|
||||||
|
const style = options.style;
|
||||||
|
|
||||||
var serverId = item.ServerId;
|
let html = '';
|
||||||
|
|
||||||
if (includePlayed !== false) {
|
const userData = item.UserData || {};
|
||||||
var tooltipPlayed = globalize.translate('MarkPlayed');
|
|
||||||
|
|
||||||
if (itemHelper.canMarkPlayed(item)) {
|
const itemId = item.Id;
|
||||||
if (userData.Played) {
|
|
||||||
html += getUserDataButtonHtml('markPlayed', itemId, serverId, btnCssClass + ' btnUserDataOn', iconCssClass, 'check', tooltipPlayed, style);
|
|
||||||
} else {
|
|
||||||
html += getUserDataButtonHtml('markPlayed', itemId, serverId, btnCssClass, iconCssClass, 'check', tooltipPlayed, style);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var tooltipFavorite = globalize.translate('Favorite');
|
|
||||||
if (userData.IsFavorite) {
|
|
||||||
html += getUserDataButtonHtml('markFavorite', itemId, serverId, btnCssClass + ' btnUserData btnUserDataOn', iconCssClass, 'favorite', tooltipFavorite, style);
|
|
||||||
} else {
|
|
||||||
html += getUserDataButtonHtml('markFavorite', itemId, serverId, btnCssClass + ' btnUserData', iconCssClass, 'favorite', tooltipFavorite, style);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
if (itemHelper.isLocalItem(item)) {
|
||||||
return html;
|
return html;
|
||||||
}
|
}
|
||||||
|
|
||||||
function markFavorite(link) {
|
let btnCssClass = 'btnUserData';
|
||||||
var id = link.getAttribute('data-itemid');
|
|
||||||
var serverId = link.getAttribute('data-serverid');
|
|
||||||
|
|
||||||
var markAsFavorite = !link.classList.contains('btnUserDataOn');
|
if (cssClass) {
|
||||||
|
btnCssClass += ' ' + cssClass;
|
||||||
|
}
|
||||||
|
|
||||||
favorite(id, serverId, markAsFavorite);
|
const iconCssClass = options.iconCssClass;
|
||||||
|
|
||||||
if (markAsFavorite) {
|
const serverId = item.ServerId;
|
||||||
link.classList.add('btnUserDataOn');
|
|
||||||
} else {
|
if (includePlayed !== false) {
|
||||||
link.classList.remove('btnUserDataOn');
|
const tooltipPlayed = globalize.translate('MarkPlayed');
|
||||||
|
|
||||||
|
if (itemHelper.canMarkPlayed(item)) {
|
||||||
|
if (userData.Played) {
|
||||||
|
html += getUserDataButtonHtml('markPlayed', itemId, serverId, btnCssClass + ' btnUserDataOn', iconCssClass, 'check', tooltipPlayed, style);
|
||||||
|
} else {
|
||||||
|
html += getUserDataButtonHtml('markPlayed', itemId, serverId, btnCssClass, iconCssClass, 'check', tooltipPlayed, style);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function markLike(link) {
|
const tooltipFavorite = globalize.translate('Favorite');
|
||||||
var id = link.getAttribute('data-itemid');
|
if (userData.IsFavorite) {
|
||||||
var serverId = link.getAttribute('data-serverid');
|
html += getUserDataButtonHtml('markFavorite', itemId, serverId, btnCssClass + ' btnUserData btnUserDataOn', iconCssClass, 'favorite', tooltipFavorite, style);
|
||||||
|
} else {
|
||||||
if (!link.classList.contains('btnUserDataOn')) {
|
html += getUserDataButtonHtml('markFavorite', itemId, serverId, btnCssClass + ' btnUserData', iconCssClass, 'favorite', tooltipFavorite, style);
|
||||||
likes(id, serverId, true);
|
|
||||||
|
|
||||||
link.classList.add('btnUserDataOn');
|
|
||||||
} else {
|
|
||||||
clearLike(id, serverId);
|
|
||||||
|
|
||||||
link.classList.remove('btnUserDataOn');
|
|
||||||
}
|
|
||||||
|
|
||||||
link.parentNode.querySelector('.btnDislike').classList.remove('btnUserDataOn');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function markDislike(link) {
|
return html;
|
||||||
var id = link.getAttribute('data-itemid');
|
}
|
||||||
var serverId = link.getAttribute('data-serverid');
|
|
||||||
|
|
||||||
if (!link.classList.contains('btnUserDataOn')) {
|
function markFavorite(link) {
|
||||||
likes(id, serverId, false);
|
const id = link.getAttribute('data-itemid');
|
||||||
|
const serverId = link.getAttribute('data-serverid');
|
||||||
|
|
||||||
link.classList.add('btnUserDataOn');
|
const markAsFavorite = !link.classList.contains('btnUserDataOn');
|
||||||
} else {
|
|
||||||
clearLike(id, serverId);
|
|
||||||
|
|
||||||
link.classList.remove('btnUserDataOn');
|
favorite(id, serverId, markAsFavorite);
|
||||||
}
|
|
||||||
|
|
||||||
link.parentNode.querySelector('.btnLike').classList.remove('btnUserDataOn');
|
if (markAsFavorite) {
|
||||||
|
link.classList.add('btnUserDataOn');
|
||||||
|
} else {
|
||||||
|
link.classList.remove('btnUserDataOn');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function markLike(link) {
|
||||||
|
const id = link.getAttribute('data-itemid');
|
||||||
|
const serverId = link.getAttribute('data-serverid');
|
||||||
|
|
||||||
|
if (!link.classList.contains('btnUserDataOn')) {
|
||||||
|
likes(id, serverId, true);
|
||||||
|
|
||||||
|
link.classList.add('btnUserDataOn');
|
||||||
|
} else {
|
||||||
|
clearLike(id, serverId);
|
||||||
|
|
||||||
|
link.classList.remove('btnUserDataOn');
|
||||||
}
|
}
|
||||||
|
|
||||||
function markPlayed(link) {
|
link.parentNode.querySelector('.btnDislike').classList.remove('btnUserDataOn');
|
||||||
var id = link.getAttribute('data-itemid');
|
}
|
||||||
var serverId = link.getAttribute('data-serverid');
|
|
||||||
|
|
||||||
if (!link.classList.contains('btnUserDataOn')) {
|
function markDislike(link) {
|
||||||
played(id, serverId, true);
|
const id = link.getAttribute('data-itemid');
|
||||||
|
const serverId = link.getAttribute('data-serverid');
|
||||||
|
|
||||||
link.classList.add('btnUserDataOn');
|
if (!link.classList.contains('btnUserDataOn')) {
|
||||||
} else {
|
likes(id, serverId, false);
|
||||||
played(id, serverId, false);
|
|
||||||
|
|
||||||
link.classList.remove('btnUserDataOn');
|
link.classList.add('btnUserDataOn');
|
||||||
}
|
} else {
|
||||||
|
clearLike(id, serverId);
|
||||||
|
|
||||||
|
link.classList.remove('btnUserDataOn');
|
||||||
}
|
}
|
||||||
|
|
||||||
function likes(id, serverId, isLiked) {
|
link.parentNode.querySelector('.btnLike').classList.remove('btnUserDataOn');
|
||||||
var apiClient = connectionManager.getApiClient(serverId);
|
}
|
||||||
return apiClient.updateUserItemRating(apiClient.getCurrentUserId(), id, isLiked);
|
|
||||||
|
function markPlayed(link) {
|
||||||
|
const id = link.getAttribute('data-itemid');
|
||||||
|
const serverId = link.getAttribute('data-serverid');
|
||||||
|
|
||||||
|
if (!link.classList.contains('btnUserDataOn')) {
|
||||||
|
played(id, serverId, true);
|
||||||
|
|
||||||
|
link.classList.add('btnUserDataOn');
|
||||||
|
} else {
|
||||||
|
played(id, serverId, false);
|
||||||
|
|
||||||
|
link.classList.remove('btnUserDataOn');
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function played(id, serverId, isPlayed) {
|
function likes(id, serverId, isLiked) {
|
||||||
var apiClient = connectionManager.getApiClient(serverId);
|
const apiClient = connectionManager.getApiClient(serverId);
|
||||||
|
return apiClient.updateUserItemRating(apiClient.getCurrentUserId(), id, isLiked);
|
||||||
|
}
|
||||||
|
|
||||||
var method = isPlayed ? 'markPlayed' : 'markUnplayed';
|
function played(id, serverId, isPlayed) {
|
||||||
|
const apiClient = connectionManager.getApiClient(serverId);
|
||||||
|
|
||||||
return apiClient[method](apiClient.getCurrentUserId(), id, new Date());
|
const method = isPlayed ? 'markPlayed' : 'markUnplayed';
|
||||||
}
|
|
||||||
|
|
||||||
function favorite(id, serverId, isFavorite) {
|
return apiClient[method](apiClient.getCurrentUserId(), id, new Date());
|
||||||
var apiClient = connectionManager.getApiClient(serverId);
|
}
|
||||||
|
|
||||||
return apiClient.updateFavoriteStatus(apiClient.getCurrentUserId(), id, isFavorite);
|
function favorite(id, serverId, isFavorite) {
|
||||||
}
|
const apiClient = connectionManager.getApiClient(serverId);
|
||||||
|
|
||||||
function clearLike(id, serverId) {
|
return apiClient.updateFavoriteStatus(apiClient.getCurrentUserId(), id, isFavorite);
|
||||||
var apiClient = connectionManager.getApiClient(serverId);
|
}
|
||||||
|
|
||||||
return apiClient.clearUserItemRating(apiClient.getCurrentUserId(), id);
|
function clearLike(id, serverId) {
|
||||||
}
|
const apiClient = connectionManager.getApiClient(serverId);
|
||||||
|
|
||||||
return {
|
return apiClient.clearUserItemRating(apiClient.getCurrentUserId(), id);
|
||||||
fill: fill,
|
}
|
||||||
destroy: destroy,
|
|
||||||
getIconsHtml: getIconsHtml
|
export default {
|
||||||
};
|
fill: fill,
|
||||||
});
|
destroy: destroy,
|
||||||
|
getIconsHtml: getIconsHtml
|
||||||
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user