mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Merge pull request #1173 from sarab97/es6-migration
Migrate deleteHelper, actionSheet, indicators and playMenu to ES6
This commit is contained in:
Anthony Lavado
GitHub
commit
f45a4d1a8c
6 changed files with 563 additions and 595 deletions
5
.gitignore
vendored
5
.gitignore
vendored
|
|
@ -8,4 +8,7 @@ node_modules
|
||||||
|
|
||||||
# ide
|
# ide
|
||||||
.idea
|
.idea
|
||||||
.vscode
|
.vscode
|
||||||
|
|
||||||
|
#log
|
||||||
|
yarn-error.log
|
||||||
|
|
|
||||||
|
|
@ -102,6 +102,10 @@
|
||||||
"src/scripts/filesystem.js",
|
"src/scripts/filesystem.js",
|
||||||
"src/scripts/imagehelper.js",
|
"src/scripts/imagehelper.js",
|
||||||
"src/scripts/inputManager.js",
|
"src/scripts/inputManager.js",
|
||||||
|
"src/components/deletehelper.js",
|
||||||
|
"src/components/actionsheet/actionsheet.js",
|
||||||
|
"src/components/playmenu.js",
|
||||||
|
"src/components/indicators/indicators.js",
|
||||||
"src/scripts/keyboardnavigation.js",
|
"src/scripts/keyboardnavigation.js",
|
||||||
"src/scripts/settings/appSettings.js",
|
"src/scripts/settings/appSettings.js",
|
||||||
"src/scripts/settings/userSettings.js",
|
"src/scripts/settings/userSettings.js",
|
||||||
|
|
|
||||||
|
|
@ -1,360 +1,343 @@
|
||||||
define(['dialogHelper', 'layoutManager', 'globalize', 'browser', 'dom', 'emby-button', 'css!./actionsheet', 'material-icons', 'scrollStyles', 'listViewStyle'], function (dialogHelper, layoutManager, globalize, browser, dom) {
|
import dialogHelper from 'dialogHelper';
|
||||||
'use strict';
|
import layoutManager from 'layoutManager';
|
||||||
|
import globalize from 'globalize';
|
||||||
|
import dom from 'dom';
|
||||||
|
import 'emby-button';
|
||||||
|
import 'css!./actionsheet';
|
||||||
|
import 'material-icons';
|
||||||
|
import 'scrollStyles';
|
||||||
|
import 'listViewStyle';
|
||||||
|
|
||||||
function getOffsets(elems) {
|
function getOffsets(elems) {
|
||||||
|
|
||||||
var doc = document;
|
let results = [];
|
||||||
var results = [];
|
|
||||||
|
|
||||||
if (!doc) {
|
|
||||||
return results;
|
|
||||||
}
|
|
||||||
|
|
||||||
var box;
|
|
||||||
var elem;
|
|
||||||
|
|
||||||
for (var i = 0, length = elems.length; i < length; i++) {
|
|
||||||
|
|
||||||
elem = elems[i];
|
|
||||||
// Support: BlackBerry 5, iOS 3 (original iPhone)
|
|
||||||
// If we don't have gBCR, just use 0,0 rather than error
|
|
||||||
if (elem.getBoundingClientRect) {
|
|
||||||
box = elem.getBoundingClientRect();
|
|
||||||
} else {
|
|
||||||
box = { top: 0, left: 0 };
|
|
||||||
}
|
|
||||||
|
|
||||||
results[i] = {
|
|
||||||
top: box.top,
|
|
||||||
left: box.left,
|
|
||||||
width: box.width,
|
|
||||||
height: box.height
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
|
if (!document) {
|
||||||
return results;
|
return results;
|
||||||
}
|
}
|
||||||
|
|
||||||
function getPosition(options, dlg) {
|
let box;
|
||||||
|
for (let elem of elems) {
|
||||||
var windowSize = dom.getWindowSize();
|
// Support: BlackBerry 5, iOS 3 (original iPhone)
|
||||||
var windowHeight = windowSize.innerHeight;
|
// If we don't have gBCR, just use 0,0 rather than error
|
||||||
var windowWidth = windowSize.innerWidth;
|
if (elem.getBoundingClientRect) {
|
||||||
|
box = elem.getBoundingClientRect();
|
||||||
var pos = getOffsets([options.positionTo])[0];
|
} else {
|
||||||
|
box = { top: 0, left: 0 };
|
||||||
if (options.positionY !== 'top') {
|
|
||||||
pos.top += (pos.height || 0) / 2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
pos.left += (pos.width || 0) / 2;
|
results.push({
|
||||||
|
top: box.top,
|
||||||
var height = dlg.offsetHeight || 300;
|
left: box.left,
|
||||||
var width = dlg.offsetWidth || 160;
|
width: box.width,
|
||||||
|
height: box.height
|
||||||
// Account for popup size
|
|
||||||
pos.top -= height / 2;
|
|
||||||
pos.left -= width / 2;
|
|
||||||
|
|
||||||
// Avoid showing too close to the bottom
|
|
||||||
var overflowX = pos.left + width - windowWidth;
|
|
||||||
var overflowY = pos.top + height - windowHeight;
|
|
||||||
|
|
||||||
if (overflowX > 0) {
|
|
||||||
pos.left -= (overflowX + 20);
|
|
||||||
}
|
|
||||||
if (overflowY > 0) {
|
|
||||||
pos.top -= (overflowY + 20);
|
|
||||||
}
|
|
||||||
|
|
||||||
pos.top += (options.offsetTop || 0);
|
|
||||||
pos.left += (options.offsetLeft || 0);
|
|
||||||
|
|
||||||
// Do some boundary checking
|
|
||||||
pos.top = Math.max(pos.top, 10);
|
|
||||||
pos.left = Math.max(pos.left, 10);
|
|
||||||
|
|
||||||
return pos;
|
|
||||||
}
|
|
||||||
|
|
||||||
function centerFocus(elem, horiz, on) {
|
|
||||||
require(['scrollHelper'], function (scrollHelper) {
|
|
||||||
var fn = on ? 'on' : 'off';
|
|
||||||
scrollHelper.centerFocus[fn](elem, horiz);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function show(options) {
|
return results;
|
||||||
|
}
|
||||||
|
|
||||||
// items
|
function getPosition(options, dlg) {
|
||||||
// positionTo
|
|
||||||
// showCancel
|
|
||||||
// title
|
|
||||||
var dialogOptions = {
|
|
||||||
removeOnClose: true,
|
|
||||||
enableHistory: options.enableHistory,
|
|
||||||
scrollY: false
|
|
||||||
};
|
|
||||||
|
|
||||||
var backButton = false;
|
const windowSize = dom.getWindowSize();
|
||||||
var isFullscreen;
|
const windowHeight = windowSize.innerHeight;
|
||||||
|
const windowWidth = windowSize.innerWidth;
|
||||||
|
|
||||||
if (layoutManager.tv) {
|
let pos = getOffsets([options.positionTo])[0];
|
||||||
dialogOptions.size = 'fullscreen';
|
|
||||||
isFullscreen = true;
|
|
||||||
backButton = true;
|
|
||||||
dialogOptions.autoFocus = true;
|
|
||||||
} else {
|
|
||||||
|
|
||||||
dialogOptions.modal = false;
|
if (options.positionY !== 'top') {
|
||||||
dialogOptions.entryAnimation = options.entryAnimation;
|
pos.top += (pos.height || 0) / 2;
|
||||||
dialogOptions.exitAnimation = options.exitAnimation;
|
}
|
||||||
dialogOptions.entryAnimationDuration = options.entryAnimationDuration || 140;
|
|
||||||
dialogOptions.exitAnimationDuration = options.exitAnimationDuration || 100;
|
pos.left += (pos.width || 0) / 2;
|
||||||
dialogOptions.autoFocus = false;
|
|
||||||
|
const height = dlg.offsetHeight || 300;
|
||||||
|
const width = dlg.offsetWidth || 160;
|
||||||
|
|
||||||
|
// Account for popup size
|
||||||
|
pos.top -= height / 2;
|
||||||
|
pos.left -= width / 2;
|
||||||
|
|
||||||
|
// Avoid showing too close to the bottom
|
||||||
|
const overflowX = pos.left + width - windowWidth;
|
||||||
|
const overflowY = pos.top + height - windowHeight;
|
||||||
|
|
||||||
|
if (overflowX > 0) {
|
||||||
|
pos.left -= (overflowX + 20);
|
||||||
|
}
|
||||||
|
if (overflowY > 0) {
|
||||||
|
pos.top -= (overflowY + 20);
|
||||||
|
}
|
||||||
|
|
||||||
|
pos.top += (options.offsetTop || 0);
|
||||||
|
pos.left += (options.offsetLeft || 0);
|
||||||
|
|
||||||
|
// Do some boundary checking
|
||||||
|
pos.top = Math.max(pos.top, 10);
|
||||||
|
pos.left = Math.max(pos.left, 10);
|
||||||
|
|
||||||
|
return pos;
|
||||||
|
}
|
||||||
|
|
||||||
|
function centerFocus(elem, horiz, on) {
|
||||||
|
require(['scrollHelper'], function (scrollHelper) {
|
||||||
|
const fn = on ? 'on' : 'off';
|
||||||
|
scrollHelper.centerFocus[fn](elem, horiz);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function show(options) {
|
||||||
|
|
||||||
|
// items
|
||||||
|
// positionTo
|
||||||
|
// showCancel
|
||||||
|
// title
|
||||||
|
let dialogOptions = {
|
||||||
|
removeOnClose: true,
|
||||||
|
enableHistory: options.enableHistory,
|
||||||
|
scrollY: false
|
||||||
|
};
|
||||||
|
|
||||||
|
let isFullscreen;
|
||||||
|
|
||||||
|
if (layoutManager.tv) {
|
||||||
|
dialogOptions.size = 'fullscreen';
|
||||||
|
isFullscreen = true;
|
||||||
|
dialogOptions.autoFocus = true;
|
||||||
|
} else {
|
||||||
|
|
||||||
|
dialogOptions.modal = false;
|
||||||
|
dialogOptions.entryAnimation = options.entryAnimation;
|
||||||
|
dialogOptions.exitAnimation = options.exitAnimation;
|
||||||
|
dialogOptions.entryAnimationDuration = options.entryAnimationDuration || 140;
|
||||||
|
dialogOptions.exitAnimationDuration = options.exitAnimationDuration || 100;
|
||||||
|
dialogOptions.autoFocus = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
let dlg = dialogHelper.createDialog(dialogOptions);
|
||||||
|
|
||||||
|
if (isFullscreen) {
|
||||||
|
dlg.classList.add('actionsheet-fullscreen');
|
||||||
|
} else {
|
||||||
|
dlg.classList.add('actionsheet-not-fullscreen');
|
||||||
|
}
|
||||||
|
|
||||||
|
dlg.classList.add('actionSheet');
|
||||||
|
|
||||||
|
if (options.dialogClass) {
|
||||||
|
dlg.classList.add(options.dialogClass);
|
||||||
|
}
|
||||||
|
|
||||||
|
let html = '';
|
||||||
|
|
||||||
|
const scrollClassName = layoutManager.tv ? 'scrollY smoothScrollY hiddenScrollY' : 'scrollY';
|
||||||
|
let style = '';
|
||||||
|
|
||||||
|
// Admittedly a hack but right now the scrollbar is being factored into the width which is causing truncation
|
||||||
|
if (options.items.length > 20) {
|
||||||
|
const minWidth = dom.getWindowSize().innerWidth >= 300 ? 240 : 200;
|
||||||
|
style += 'min-width:' + minWidth + 'px;';
|
||||||
|
}
|
||||||
|
|
||||||
|
let renderIcon = false;
|
||||||
|
let icons = [];
|
||||||
|
let itemIcon;
|
||||||
|
for (let item of options.items) {
|
||||||
|
|
||||||
|
itemIcon = item.icon || (item.selected ? 'check' : null);
|
||||||
|
|
||||||
|
if (itemIcon) {
|
||||||
|
renderIcon = true;
|
||||||
|
}
|
||||||
|
icons.push(itemIcon || '');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (layoutManager.tv) {
|
||||||
|
html += '<button is="paper-icon-button-light" class="btnCloseActionSheet hide-mouse-idle-tv" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
|
||||||
|
}
|
||||||
|
|
||||||
|
// If any items have an icon, give them all an icon just to make sure they're all lined up evenly
|
||||||
|
const center = options.title && (!renderIcon /*|| itemsWithIcons.length != options.items.length*/);
|
||||||
|
|
||||||
|
if (center || layoutManager.tv) {
|
||||||
|
html += '<div class="actionSheetContent actionSheetContent-centered">';
|
||||||
|
} else {
|
||||||
|
html += '<div class="actionSheetContent">';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.title) {
|
||||||
|
|
||||||
|
html += '<h1 class="actionSheetTitle">' + options.title + '</h1>';
|
||||||
|
}
|
||||||
|
if (options.text) {
|
||||||
|
html += '<p class="actionSheetText">' + options.text + '</p>';
|
||||||
|
}
|
||||||
|
|
||||||
|
let scrollerClassName = 'actionSheetScroller';
|
||||||
|
if (layoutManager.tv) {
|
||||||
|
scrollerClassName += ' actionSheetScroller-tv focuscontainer-x focuscontainer-y';
|
||||||
|
}
|
||||||
|
html += '<div class="' + scrollerClassName + ' ' + scrollClassName + '" style="' + style + '">';
|
||||||
|
|
||||||
|
let menuItemClass = 'listItem listItem-button actionSheetMenuItem';
|
||||||
|
|
||||||
|
if (options.border || options.shaded) {
|
||||||
|
menuItemClass += ' listItem-border';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.menuItemClass) {
|
||||||
|
menuItemClass += ' ' + options.menuItemClass;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (layoutManager.tv) {
|
||||||
|
menuItemClass += ' listItem-focusscale';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (layoutManager.mobile) {
|
||||||
|
menuItemClass += ' actionsheet-xlargeFont';
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let [i, item] of options.items.entries()) {
|
||||||
|
|
||||||
|
if (item.divider) {
|
||||||
|
|
||||||
|
html += '<div class="actionsheetDivider"></div>';
|
||||||
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
var dlg = dialogHelper.createDialog(dialogOptions);
|
const autoFocus = item.selected && layoutManager.tv ? ' autoFocus' : '';
|
||||||
|
|
||||||
if (isFullscreen) {
|
// Check for null in case int 0 was passed in
|
||||||
dlg.classList.add('actionsheet-fullscreen');
|
const optionId = item.id == null || item.id === '' ? item.value : item.id;
|
||||||
} else {
|
html += '<button' + autoFocus + ' is="emby-button" type="button" class="' + menuItemClass + '" data-id="' + optionId + '">';
|
||||||
dlg.classList.add('actionsheet-not-fullscreen');
|
|
||||||
|
itemIcon = icons[i];
|
||||||
|
|
||||||
|
if (itemIcon) {
|
||||||
|
html += '<span class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons ' + itemIcon + '"></span>';
|
||||||
|
} else if (renderIcon && !center) {
|
||||||
|
html += '<span class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons check" style="visibility:hidden;"></span>';
|
||||||
}
|
}
|
||||||
|
|
||||||
dlg.classList.add('actionSheet');
|
html += '<div class="listItemBody actionsheetListItemBody">';
|
||||||
|
|
||||||
if (options.dialogClass) {
|
html += '<div class="listItemBodyText actionSheetItemText">';
|
||||||
dlg.classList.add(options.dialogClass);
|
html += (item.name || item.textContent || item.innerText);
|
||||||
}
|
|
||||||
|
|
||||||
var html = '';
|
|
||||||
|
|
||||||
var scrollClassName = layoutManager.tv ? 'scrollY smoothScrollY hiddenScrollY' : 'scrollY';
|
|
||||||
var style = '';
|
|
||||||
|
|
||||||
// Admittedly a hack but right now the scrollbar is being factored into the width which is causing truncation
|
|
||||||
if (options.items.length > 20) {
|
|
||||||
var minWidth = dom.getWindowSize().innerWidth >= 300 ? 240 : 200;
|
|
||||||
style += 'min-width:' + minWidth + 'px;';
|
|
||||||
}
|
|
||||||
|
|
||||||
var i;
|
|
||||||
var length;
|
|
||||||
var option;
|
|
||||||
var renderIcon = false;
|
|
||||||
var icons = [];
|
|
||||||
var itemIcon;
|
|
||||||
for (i = 0, length = options.items.length; i < length; i++) {
|
|
||||||
|
|
||||||
option = options.items[i];
|
|
||||||
|
|
||||||
itemIcon = option.icon || (option.selected ? 'check' : null);
|
|
||||||
|
|
||||||
if (itemIcon) {
|
|
||||||
renderIcon = true;
|
|
||||||
}
|
|
||||||
icons.push(itemIcon || '');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (layoutManager.tv) {
|
|
||||||
html += '<button is="paper-icon-button-light" class="btnCloseActionSheet hide-mouse-idle-tv" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
|
|
||||||
}
|
|
||||||
|
|
||||||
// If any items have an icon, give them all an icon just to make sure they're all lined up evenly
|
|
||||||
var center = options.title && (!renderIcon /*|| itemsWithIcons.length != options.items.length*/);
|
|
||||||
|
|
||||||
if (center || layoutManager.tv) {
|
|
||||||
html += '<div class="actionSheetContent actionSheetContent-centered">';
|
|
||||||
} else {
|
|
||||||
html += '<div class="actionSheetContent">';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (options.title) {
|
|
||||||
|
|
||||||
html += '<h1 class="actionSheetTitle">';
|
|
||||||
html += options.title;
|
|
||||||
html += '</h1>';
|
|
||||||
}
|
|
||||||
if (options.text) {
|
|
||||||
html += '<p class="actionSheetText">';
|
|
||||||
html += options.text;
|
|
||||||
html += '</p>';
|
|
||||||
}
|
|
||||||
|
|
||||||
var scrollerClassName = 'actionSheetScroller';
|
|
||||||
if (layoutManager.tv) {
|
|
||||||
scrollerClassName += ' actionSheetScroller-tv focuscontainer-x focuscontainer-y';
|
|
||||||
}
|
|
||||||
html += '<div class="' + scrollerClassName + ' ' + scrollClassName + '" style="' + style + '">';
|
|
||||||
|
|
||||||
var menuItemClass = 'listItem listItem-button actionSheetMenuItem';
|
|
||||||
|
|
||||||
if (options.border || options.shaded) {
|
|
||||||
menuItemClass += ' listItem-border';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (options.menuItemClass) {
|
|
||||||
menuItemClass += ' ' + options.menuItemClass;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (layoutManager.tv) {
|
|
||||||
menuItemClass += ' listItem-focusscale';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (layoutManager.mobile) {
|
|
||||||
menuItemClass += ' actionsheet-xlargeFont';
|
|
||||||
}
|
|
||||||
|
|
||||||
for (i = 0, length = options.items.length; i < length; i++) {
|
|
||||||
|
|
||||||
option = options.items[i];
|
|
||||||
|
|
||||||
if (option.divider) {
|
|
||||||
|
|
||||||
html += '<div class="actionsheetDivider"></div>';
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
var autoFocus = option.selected && layoutManager.tv ? ' autoFocus' : '';
|
|
||||||
|
|
||||||
// Check for null in case int 0 was passed in
|
|
||||||
var optionId = option.id == null || option.id === '' ? option.value : option.id;
|
|
||||||
html += '<button' + autoFocus + ' is="emby-button" type="button" class="' + menuItemClass + '" data-id="' + optionId + '">';
|
|
||||||
|
|
||||||
itemIcon = icons[i];
|
|
||||||
|
|
||||||
if (itemIcon) {
|
|
||||||
|
|
||||||
html += '<span class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons ' + itemIcon + '"></span>';
|
|
||||||
} else if (renderIcon && !center) {
|
|
||||||
html += '<span class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons check" style="visibility:hidden;"></span>';
|
|
||||||
}
|
|
||||||
|
|
||||||
html += '<div class="listItemBody actionsheetListItemBody">';
|
|
||||||
|
|
||||||
html += '<div class="listItemBodyText actionSheetItemText">';
|
|
||||||
html += (option.name || option.textContent || option.innerText);
|
|
||||||
html += '</div>';
|
|
||||||
|
|
||||||
if (option.secondaryText) {
|
|
||||||
html += '<div class="listItemBodyText secondary">';
|
|
||||||
html += option.secondaryText;
|
|
||||||
html += '</div>';
|
|
||||||
}
|
|
||||||
|
|
||||||
html += '</div>';
|
|
||||||
|
|
||||||
if (option.asideText) {
|
|
||||||
html += '<div class="listItemAside actionSheetItemAsideText">';
|
|
||||||
html += option.asideText;
|
|
||||||
html += '</div>';
|
|
||||||
}
|
|
||||||
|
|
||||||
html += '</button>';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (options.showCancel) {
|
|
||||||
html += '<div class="buttons">';
|
|
||||||
html += '<button is="emby-button" type="button" class="btnCloseActionSheet">' + globalize.translate('ButtonCancel') + '</button>';
|
|
||||||
html += '</div>';
|
|
||||||
}
|
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
dlg.innerHTML = html;
|
if (item.secondaryText) {
|
||||||
|
html += '<div class="listItemBodyText secondary">' + item.secondaryText + '</div>';
|
||||||
if (layoutManager.tv) {
|
|
||||||
centerFocus(dlg.querySelector('.actionSheetScroller'), false, true);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
var btnCloseActionSheet = dlg.querySelector('.btnCloseActionSheet');
|
html += '</div>';
|
||||||
if (btnCloseActionSheet) {
|
|
||||||
dlg.querySelector('.btnCloseActionSheet').addEventListener('click', function () {
|
if (item.asideText) {
|
||||||
dialogHelper.close(dlg);
|
html += '<div class="listItemAside actionSheetItemAsideText">' + item.asideText + '</div>';
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Seeing an issue in some non-chrome browsers where this is requiring a double click
|
html += '</button>';
|
||||||
//var eventName = browser.firefox ? 'mousedown' : 'click';
|
}
|
||||||
var selectedId;
|
|
||||||
|
|
||||||
var timeout;
|
if (options.showCancel) {
|
||||||
if (options.timeout) {
|
html += '<div class="buttons">';
|
||||||
timeout = setTimeout(function () {
|
html += '<button is="emby-button" type="button" class="btnCloseActionSheet">' + globalize.translate('ButtonCancel') + '</button>';
|
||||||
dialogHelper.close(dlg);
|
html += '</div>';
|
||||||
}, options.timeout);
|
}
|
||||||
}
|
html += '</div>';
|
||||||
|
|
||||||
return new Promise(function (resolve, reject) {
|
dlg.innerHTML = html;
|
||||||
|
|
||||||
var isResolved;
|
if (layoutManager.tv) {
|
||||||
|
centerFocus(dlg.querySelector('.actionSheetScroller'), false, true);
|
||||||
|
}
|
||||||
|
|
||||||
dlg.addEventListener('click', function (e) {
|
let btnCloseActionSheet = dlg.querySelector('.btnCloseActionSheet');
|
||||||
|
if (btnCloseActionSheet) {
|
||||||
|
btnCloseActionSheet.addEventListener('click', function () {
|
||||||
|
dialogHelper.close(dlg);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
var actionSheetMenuItem = dom.parentWithClass(e.target, 'actionSheetMenuItem');
|
// Seeing an issue in some non-chrome browsers where this is requiring a double click
|
||||||
|
//var eventName = browser.firefox ? 'mousedown' : 'click';
|
||||||
|
let selectedId;
|
||||||
|
|
||||||
if (actionSheetMenuItem) {
|
let timeout;
|
||||||
selectedId = actionSheetMenuItem.getAttribute('data-id');
|
if (options.timeout) {
|
||||||
|
timeout = setTimeout(function () {
|
||||||
|
dialogHelper.close(dlg);
|
||||||
|
}, options.timeout);
|
||||||
|
}
|
||||||
|
|
||||||
if (options.resolveOnClick) {
|
return new Promise(function (resolve, reject) {
|
||||||
|
|
||||||
if (options.resolveOnClick.indexOf) {
|
let isResolved;
|
||||||
|
|
||||||
if (options.resolveOnClick.indexOf(selectedId) !== -1) {
|
dlg.addEventListener('click', function (e) {
|
||||||
|
|
||||||
resolve(selectedId);
|
const actionSheetMenuItem = dom.parentWithClass(e.target, 'actionSheetMenuItem');
|
||||||
isResolved = true;
|
|
||||||
}
|
if (actionSheetMenuItem) {
|
||||||
|
selectedId = actionSheetMenuItem.getAttribute('data-id');
|
||||||
|
|
||||||
|
if (options.resolveOnClick) {
|
||||||
|
|
||||||
|
if (options.resolveOnClick.indexOf) {
|
||||||
|
|
||||||
|
if (options.resolveOnClick.indexOf(selectedId) !== -1) {
|
||||||
|
|
||||||
} else {
|
|
||||||
resolve(selectedId);
|
resolve(selectedId);
|
||||||
isResolved = true;
|
isResolved = true;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
dialogHelper.close(dlg);
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
dlg.addEventListener('close', function () {
|
|
||||||
|
|
||||||
if (layoutManager.tv) {
|
|
||||||
centerFocus(dlg.querySelector('.actionSheetScroller'), false, false);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (timeout) {
|
|
||||||
clearTimeout(timeout);
|
|
||||||
timeout = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!isResolved) {
|
|
||||||
if (selectedId != null) {
|
|
||||||
if (options.callback) {
|
|
||||||
options.callback(selectedId);
|
|
||||||
}
|
|
||||||
|
|
||||||
resolve(selectedId);
|
|
||||||
} else {
|
} else {
|
||||||
reject();
|
resolve(selectedId);
|
||||||
|
isResolved = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
dialogHelper.open(dlg);
|
dialogHelper.close(dlg);
|
||||||
|
}
|
||||||
|
|
||||||
var pos = options.positionTo && dialogOptions.size !== 'fullscreen' ? getPosition(options, dlg) : null;
|
});
|
||||||
|
|
||||||
if (pos) {
|
dlg.addEventListener('close', function () {
|
||||||
dlg.style.position = 'fixed';
|
|
||||||
dlg.style.margin = 0;
|
if (layoutManager.tv) {
|
||||||
dlg.style.left = pos.left + 'px';
|
centerFocus(dlg.querySelector('.actionSheetScroller'), false, false);
|
||||||
dlg.style.top = pos.top + 'px';
|
}
|
||||||
|
|
||||||
|
if (timeout) {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
timeout = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isResolved) {
|
||||||
|
if (selectedId != null) {
|
||||||
|
if (options.callback) {
|
||||||
|
options.callback(selectedId);
|
||||||
|
}
|
||||||
|
|
||||||
|
resolve(selectedId);
|
||||||
|
} else {
|
||||||
|
reject();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
dialogHelper.open(dlg);
|
||||||
show: show
|
|
||||||
};
|
const pos = options.positionTo && dialogOptions.size !== 'fullscreen' ? getPosition(options, dlg) : null;
|
||||||
});
|
|
||||||
|
if (pos) {
|
||||||
|
dlg.style.position = 'fixed';
|
||||||
|
dlg.style.margin = 0;
|
||||||
|
dlg.style.left = pos.left + 'px';
|
||||||
|
dlg.style.top = pos.top + 'px';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
show: show
|
||||||
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,57 +1,54 @@
|
||||||
define(['connectionManager', 'confirm', 'appRouter', 'globalize'], function (connectionManager, confirm, appRouter, globalize) {
|
import connectionManager from 'connectionManager';
|
||||||
'use strict';
|
import confirm from 'confirm';
|
||||||
|
import appRouter from 'appRouter';
|
||||||
|
import globalize from 'globalize';
|
||||||
|
|
||||||
function alertText(options) {
|
function alertText(options) {
|
||||||
|
|
||||||
return new Promise(function (resolve, reject) {
|
return new Promise(function (resolve, reject) {
|
||||||
|
|
||||||
require(['alert'], function (alert) {
|
require(['alert'], function (alert) {
|
||||||
alert(options).then(resolve, resolve);
|
alert(options).then(resolve, resolve);
|
||||||
});
|
|
||||||
});
|
});
|
||||||
}
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function deleteItem(options) {
|
export function deleteItem(options) {
|
||||||
|
|
||||||
var item = options.item;
|
const item = options.item;
|
||||||
var itemId = item.Id;
|
const parentId = item.SeasonId || item.SeriesId || item.ParentId;
|
||||||
var parentId = item.SeasonId || item.SeriesId || item.ParentId;
|
|
||||||
var serverId = item.ServerId;
|
|
||||||
|
|
||||||
var msg = globalize.translate('ConfirmDeleteItem');
|
let apiClient = connectionManager.getApiClient(item.ServerId);
|
||||||
var title = globalize.translate('HeaderDeleteItem');
|
|
||||||
var apiClient = connectionManager.getApiClient(item.ServerId);
|
|
||||||
|
|
||||||
return confirm({
|
return confirm({
|
||||||
|
|
||||||
title: title,
|
title: globalize.translate('HeaderDeleteItem'),
|
||||||
text: msg,
|
text: globalize.translate('ConfirmDeleteItem'),
|
||||||
confirmText: globalize.translate('Delete'),
|
confirmText: globalize.translate('Delete'),
|
||||||
primary: 'delete'
|
primary: 'delete'
|
||||||
|
|
||||||
}).then(function () {
|
}).then(function () {
|
||||||
|
|
||||||
return apiClient.deleteItem(itemId).then(function () {
|
return apiClient.deleteItem(item.Id).then(function () {
|
||||||
|
|
||||||
if (options.navigate) {
|
if (options.navigate) {
|
||||||
if (parentId) {
|
if (parentId) {
|
||||||
appRouter.showItem(parentId, serverId);
|
appRouter.showItem(parentId, item.ServerId);
|
||||||
} else {
|
} else {
|
||||||
appRouter.goHome();
|
appRouter.goHome();
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}, function (err) {
|
}
|
||||||
|
}, function (err) {
|
||||||
|
|
||||||
var result = function () {
|
let result = function () {
|
||||||
return Promise.reject(err);
|
return Promise.reject(err);
|
||||||
};
|
};
|
||||||
|
|
||||||
return alertText(globalize.translate('ErrorDeletingItem')).then(result, result);
|
return alertText(globalize.translate('ErrorDeletingItem')).then(result, result);
|
||||||
});
|
|
||||||
});
|
});
|
||||||
}
|
});
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
export default {
|
||||||
deleteItem: deleteItem
|
deleteItem: deleteItem
|
||||||
};
|
};
|
||||||
});
|
|
||||||
|
|
|
||||||
|
|
@ -1,198 +1,183 @@
|
||||||
define(['datetime', 'itemHelper', 'emby-progressbar', 'css!./indicators.css', 'material-icons'], function (datetime, itemHelper) {
|
import datetime from 'datetime';
|
||||||
'use strict';
|
import itemHelper from 'itemHelper';
|
||||||
|
import 'emby-progressbar';
|
||||||
|
import 'css!./indicators.css';
|
||||||
|
import 'material-icons';
|
||||||
|
|
||||||
function enableProgressIndicator(item) {
|
export function enableProgressIndicator(item) {
|
||||||
if (item.MediaType === 'Video') {
|
if (item.MediaType === 'Video' && item.Type !== 'TvChannel') {
|
||||||
if (item.Type !== 'TvChannel') {
|
return true;
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (item.Type === 'AudioBook' || item.Type === 'AudioPodcast') {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function getProgressHtml(pct, options) {
|
if (item.Type === 'AudioBook' || item.Type === 'AudioPodcast') {
|
||||||
var containerClass = 'itemProgressBar';
|
return true;
|
||||||
if (options) {
|
|
||||||
if (options.containerClass) {
|
|
||||||
containerClass += ' ' + options.containerClass;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return '<div class="' + containerClass + '"><div class="itemProgressBarForeground" style="width:' + pct + '%;"></div></div>';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function getAutoTimeProgressHtml(pct, options, isRecording, start, end) {
|
return false;
|
||||||
var containerClass = 'itemProgressBar';
|
}
|
||||||
if (options) {
|
|
||||||
if (options.containerClass) {
|
|
||||||
containerClass += ' ' + options.containerClass;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var foregroundClass = 'itemProgressBarForeground';
|
export function getProgressHtml(pct, options) {
|
||||||
if (isRecording) {
|
let containerClass = 'itemProgressBar';
|
||||||
foregroundClass += ' itemProgressBarForeground-recording';
|
if (options && options.containerClass) {
|
||||||
}
|
containerClass += ' ' + options.containerClass;
|
||||||
|
|
||||||
return '<div is="emby-progressbar" data-automode="time" data-starttime="' + start + '" data-endtime="' + end + '" class="' + containerClass + '"><div class="' + foregroundClass + '" style="width:' + pct + '%;"></div></div>';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function getProgressBarHtml(item, options) {
|
return '<div class="' + containerClass + '"><div class="itemProgressBarForeground" style="width:' + pct + '%;"></div></div>';
|
||||||
var pct;
|
}
|
||||||
if (enableProgressIndicator(item) && item.Type !== 'Recording') {
|
|
||||||
var userData = options ? (options.userData || item.UserData) : item.UserData;
|
function getAutoTimeProgressHtml(pct, options, isRecording, start, end) {
|
||||||
if (userData) {
|
let containerClass = 'itemProgressBar';
|
||||||
pct = userData.PlayedPercentage;
|
if (options && options.containerClass) {
|
||||||
if (pct && pct < 100) {
|
containerClass += ' ' + options.containerClass;
|
||||||
return getProgressHtml(pct, options);
|
}
|
||||||
}
|
|
||||||
|
let foregroundClass = 'itemProgressBarForeground';
|
||||||
|
if (isRecording) {
|
||||||
|
foregroundClass += ' itemProgressBarForeground-recording';
|
||||||
|
}
|
||||||
|
|
||||||
|
return '<div is="emby-progressbar" data-automode="time" data-starttime="' + start + '" data-endtime="' + end + '" class="' + containerClass + '"><div class="' + foregroundClass + '" style="width:' + pct + '%;"></div></div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getProgressBarHtml(item, options) {
|
||||||
|
let pct;
|
||||||
|
if (enableProgressIndicator(item) && item.Type !== 'Recording') {
|
||||||
|
const userData = options && options.userData ? options.userData : item.UserData;
|
||||||
|
|
||||||
|
if (userData) {
|
||||||
|
pct = userData.PlayedPercentage;
|
||||||
|
if (pct && pct < 100) {
|
||||||
|
return getProgressHtml(pct, options);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if ((item.Type === 'Program' || item.Type === 'Timer' || item.Type === 'Recording') && item.StartDate && item.EndDate) {
|
if ((item.Type === 'Program' || item.Type === 'Timer' || item.Type === 'Recording') && item.StartDate && item.EndDate) {
|
||||||
var startDate = 0;
|
let startDate = 0;
|
||||||
var endDate = 1;
|
let endDate = 1;
|
||||||
|
|
||||||
|
try {
|
||||||
|
startDate = datetime.parseISO8601Date(item.StartDate).getTime();
|
||||||
|
endDate = datetime.parseISO8601Date(item.EndDate).getTime();
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
}
|
||||||
|
|
||||||
|
const now = new Date().getTime();
|
||||||
|
const total = endDate - startDate;
|
||||||
|
pct = 100 * ((now - startDate) / total);
|
||||||
|
|
||||||
|
if (pct > 0 && pct < 100) {
|
||||||
|
const isRecording = item.Type === 'Timer' || item.Type === 'Recording' || item.TimerId;
|
||||||
|
return getAutoTimeProgressHtml(pct, options, isRecording, startDate, endDate);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
export function enablePlayedIndicator(item) {
|
||||||
|
return itemHelper.canMarkPlayed(item);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getPlayedIndicatorHtml(item) {
|
||||||
|
if (enablePlayedIndicator(item)) {
|
||||||
|
let userData = item.UserData || {};
|
||||||
|
if (userData.UnplayedItemCount) {
|
||||||
|
return '<div class="countIndicator indicator">' + userData.UnplayedItemCount + '</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (userData.PlayedPercentage && userData.PlayedPercentage >= 100 || (userData.Played)) {
|
||||||
|
return '<div class="playedIndicator indicator"><span class="material-icons indicatorIcon check"></span></div>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getChildCountIndicatorHtml(item, options) {
|
||||||
|
const minCount = options && options.minCount ? options.minCount : 0;
|
||||||
|
|
||||||
|
if (item.ChildCount && item.ChildCount > minCount) {
|
||||||
|
return '<div class="countIndicator indicator">' + item.ChildCount + '</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getTimerIndicator(item) {
|
||||||
|
let status;
|
||||||
|
|
||||||
|
if (item.Type === 'SeriesTimer') {
|
||||||
|
return '<span class="material-icons timerIndicator indicatorIcon fiber_smart_record"></span>';
|
||||||
|
} else if (item.TimerId || item.SeriesTimerId) {
|
||||||
|
status = item.Status || 'Cancelled';
|
||||||
|
} else if (item.Type === 'Timer') {
|
||||||
|
status = item.Status;
|
||||||
|
} else {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (item.SeriesTimerId) {
|
||||||
|
if (status !== 'Cancelled') {
|
||||||
|
return '<span class="material-icons timerIndicator indicatorIcon fiber_smart_record"></span>';
|
||||||
|
}
|
||||||
|
|
||||||
|
return '<span class="material-icons timerIndicator timerIndicator-inactive indicatorIcon fiber_smart_record"></span>';
|
||||||
|
}
|
||||||
|
|
||||||
|
return '<span class="material-icons timerIndicator indicatorIcon fiber_manual_record"></span>';
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getSyncIndicator(item) {
|
||||||
|
if (item.SyncPercent === 100) {
|
||||||
|
return '<div class="syncIndicator indicator fullSyncIndicator"><span class="material-icons indicatorIcon file_download"></span></div>';
|
||||||
|
} else if (item.SyncPercent != null) {
|
||||||
|
return '<div class="syncIndicator indicator emptySyncIndicator"><span class="material-icons indicatorIcon file_download"></span></div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getTypeIndicator(item) {
|
||||||
|
const iconT = {
|
||||||
|
'Video' : 'videocam',
|
||||||
|
'Folder' : 'folder',
|
||||||
|
'PhotoAlbum' : 'photo_album',
|
||||||
|
'Photo' : 'photo'
|
||||||
|
};
|
||||||
|
|
||||||
|
const icon = iconT[item.Type];
|
||||||
|
return icon ? '<div class="indicator videoIndicator"><span class="material-icons indicatorIcon '+ icon +'"></span></div>' : '';
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getMissingIndicator(item) {
|
||||||
|
if (item.Type === 'Episode' && item.LocationType === 'Virtual') {
|
||||||
|
if (item.PremiereDate) {
|
||||||
try {
|
try {
|
||||||
startDate = datetime.parseISO8601Date(item.StartDate).getTime();
|
const premiereDate = datetime.parseISO8601Date(item.PremiereDate).getTime();
|
||||||
endDate = datetime.parseISO8601Date(item.EndDate).getTime();
|
if (premiereDate > new Date().getTime()) {
|
||||||
|
return '<div class="unairedIndicator">Unaired</div>';
|
||||||
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
}
|
}
|
||||||
|
|
||||||
var now = new Date().getTime();
|
|
||||||
var total = endDate - startDate;
|
|
||||||
pct = 100 * ((now - startDate) / total);
|
|
||||||
|
|
||||||
if (pct > 0 && pct < 100) {
|
|
||||||
var isRecording = item.Type === 'Timer' || item.Type === 'Recording' || item.TimerId;
|
|
||||||
return getAutoTimeProgressHtml(pct, options, isRecording, startDate, endDate);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
return '<div class="missingIndicator">Missing</div>';
|
||||||
return '';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function enablePlayedIndicator(item) {
|
return '';
|
||||||
return itemHelper.canMarkPlayed(item);
|
}
|
||||||
}
|
|
||||||
|
|
||||||
function getPlayedIndicator(item) {
|
export default {
|
||||||
if (enablePlayedIndicator(item)) {
|
getProgressHtml: getProgressHtml,
|
||||||
var userData = item.UserData || {};
|
getProgressBarHtml: getProgressBarHtml,
|
||||||
if (userData.UnplayedItemCount) {
|
getPlayedIndicatorHtml: getPlayedIndicatorHtml,
|
||||||
return '<div class="countIndicator indicator">' + userData.UnplayedItemCount + '</div>';
|
getChildCountIndicatorHtml: getChildCountIndicatorHtml,
|
||||||
}
|
enableProgressIndicator: enableProgressIndicator,
|
||||||
|
getTimerIndicator: getTimerIndicator,
|
||||||
if (userData.PlayedPercentage && userData.PlayedPercentage >= 100 || (userData.Played)) {
|
enablePlayedIndicator: enablePlayedIndicator,
|
||||||
return '<div class="playedIndicator indicator"><span class="material-icons indicatorIcon check"></span></div>';
|
getSyncIndicator: getSyncIndicator,
|
||||||
}
|
getTypeIndicator: getTypeIndicator,
|
||||||
}
|
getMissingIndicator: getMissingIndicator
|
||||||
|
};
|
||||||
return '';
|
|
||||||
}
|
|
||||||
|
|
||||||
function getCountIndicatorHtml(count) {
|
|
||||||
return '<div class="countIndicator indicator">' + count + '</div>';
|
|
||||||
}
|
|
||||||
|
|
||||||
function getChildCountIndicatorHtml(item, options) {
|
|
||||||
var minCount = 0;
|
|
||||||
if (options) {
|
|
||||||
minCount = options.minCount || minCount;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (item.ChildCount && item.ChildCount > minCount) {
|
|
||||||
return getCountIndicatorHtml(item.ChildCount);
|
|
||||||
}
|
|
||||||
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
|
|
||||||
function getTimerIndicator(item) {
|
|
||||||
var status;
|
|
||||||
|
|
||||||
if (item.Type === 'SeriesTimer') {
|
|
||||||
return '<span class="material-icons timerIndicator indicatorIcon fiber_smart_record"></span>';
|
|
||||||
} else if (item.TimerId || item.SeriesTimerId) {
|
|
||||||
status = item.Status || 'Cancelled';
|
|
||||||
} else if (item.Type === 'Timer') {
|
|
||||||
status = item.Status;
|
|
||||||
} else {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (item.SeriesTimerId) {
|
|
||||||
if (status !== 'Cancelled') {
|
|
||||||
return '<span class="material-icons timerIndicator indicatorIcon fiber_smart_record"></span>';
|
|
||||||
}
|
|
||||||
|
|
||||||
return '<span class="material-icons timerIndicator timerIndicator-inactive indicatorIcon fiber_smart_record"></span>';
|
|
||||||
}
|
|
||||||
|
|
||||||
return '<span class="material-icons timerIndicator indicatorIcon fiber_manual_record"></span>';
|
|
||||||
}
|
|
||||||
|
|
||||||
function getSyncIndicator(item) {
|
|
||||||
if (item.SyncPercent === 100) {
|
|
||||||
return '<div class="syncIndicator indicator fullSyncIndicator"><span class="material-icons indicatorIcon file_download"></span></div>';
|
|
||||||
} else if (item.SyncPercent != null) {
|
|
||||||
return '<div class="syncIndicator indicator emptySyncIndicator"><span class="material-icons indicatorIcon file_download"></span></div>';
|
|
||||||
}
|
|
||||||
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
|
|
||||||
function getTypeIndicator(item) {
|
|
||||||
if (item.Type === 'Video') {
|
|
||||||
return '<div class="indicator videoIndicator"><span class="material-icons indicatorIcon videocam"></span></div>';
|
|
||||||
}
|
|
||||||
if (item.Type === 'Folder') {
|
|
||||||
return '<div class="indicator videoIndicator"><span class="material-icons indicatorIcon folder"></span></div>';
|
|
||||||
}
|
|
||||||
if (item.Type === 'PhotoAlbum') {
|
|
||||||
return '<div class="indicator videoIndicator"><span class="material-icons indicatorIcon photo_album"></span></div>';
|
|
||||||
}
|
|
||||||
if (item.Type === 'Photo') {
|
|
||||||
return '<div class="indicator videoIndicator"><span class="material-icons indicatorIcon photo"></span></div>';
|
|
||||||
}
|
|
||||||
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
|
|
||||||
function getMissingIndicator(item) {
|
|
||||||
if (item.Type === 'Episode' && item.LocationType === 'Virtual') {
|
|
||||||
if (item.PremiereDate) {
|
|
||||||
try {
|
|
||||||
var premiereDate = datetime.parseISO8601Date(item.PremiereDate).getTime();
|
|
||||||
if (premiereDate > new Date().getTime()) {
|
|
||||||
return '<div class="unairedIndicator">Unaired</div>';
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return '<div class="missingIndicator">Missing</div>';
|
|
||||||
}
|
|
||||||
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
getProgressHtml: getProgressHtml,
|
|
||||||
getProgressBarHtml: getProgressBarHtml,
|
|
||||||
getPlayedIndicatorHtml: getPlayedIndicator,
|
|
||||||
getChildCountIndicatorHtml: getChildCountIndicatorHtml,
|
|
||||||
enableProgressIndicator: enableProgressIndicator,
|
|
||||||
getTimerIndicator: getTimerIndicator,
|
|
||||||
enablePlayedIndicator: enablePlayedIndicator,
|
|
||||||
getSyncIndicator: getSyncIndicator,
|
|
||||||
getTypeIndicator: getTypeIndicator,
|
|
||||||
getMissingIndicator: getMissingIndicator
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
|
||||||
|
|
@ -1,75 +1,71 @@
|
||||||
define(['actionsheet', 'datetime', 'playbackManager', 'globalize', 'appSettings'], function (actionsheet, datetime, playbackManager, globalize, appSettings) {
|
import actionsheet from 'actionsheet';
|
||||||
'use strict';
|
import datetime from 'datetime';
|
||||||
|
import playbackManager from 'playbackManager';
|
||||||
|
import globalize from 'globalize';
|
||||||
|
|
||||||
function show(options) {
|
export function show(options) {
|
||||||
|
|
||||||
var item = options.item;
|
var item = options.item;
|
||||||
|
|
||||||
var itemType = item.Type;
|
var resumePositionTicks = item.UserData ? item.UserData.PlaybackPositionTicks : null;
|
||||||
var isFolder = item.IsFolder;
|
|
||||||
var itemId = item.Id;
|
|
||||||
var channelId = item.ChannelId;
|
|
||||||
var serverId = item.ServerId;
|
|
||||||
var resumePositionTicks = item.UserData ? item.UserData.PlaybackPositionTicks : null;
|
|
||||||
|
|
||||||
var playableItemId = itemType === 'Program' ? channelId : itemId;
|
var playableItemId = item.Type === 'Program' ? item.ChannelId : item.Id;
|
||||||
|
|
||||||
if (!resumePositionTicks || isFolder) {
|
if (!resumePositionTicks || item.IsFolder) {
|
||||||
playbackManager.play({
|
playbackManager.play({
|
||||||
ids: [playableItemId],
|
ids: [playableItemId],
|
||||||
serverId: serverId
|
serverId: item.ServerId
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var menuItems = [];
|
|
||||||
|
|
||||||
menuItems.push({
|
|
||||||
name: globalize.translate('ResumeAt', datetime.getDisplayRunningTime(resumePositionTicks)),
|
|
||||||
id: 'resume'
|
|
||||||
});
|
|
||||||
|
|
||||||
menuItems.push({
|
|
||||||
name: globalize.translate('PlayFromBeginning'),
|
|
||||||
id: 'play'
|
|
||||||
});
|
|
||||||
|
|
||||||
actionsheet.show({
|
|
||||||
|
|
||||||
items: menuItems,
|
|
||||||
positionTo: options.positionTo
|
|
||||||
|
|
||||||
}).then(function (id) {
|
|
||||||
switch (id) {
|
|
||||||
|
|
||||||
case 'play':
|
|
||||||
playbackManager.play({
|
|
||||||
ids: [playableItemId],
|
|
||||||
serverId: serverId
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case 'resume':
|
|
||||||
playbackManager.play({
|
|
||||||
ids: [playableItemId],
|
|
||||||
startPositionTicks: resumePositionTicks,
|
|
||||||
serverId: serverId
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case 'queue':
|
|
||||||
playbackManager.queue({
|
|
||||||
items: [item]
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case 'shuffle':
|
|
||||||
playbackManager.shuffle(item);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
var menuItems = [];
|
||||||
show: show
|
|
||||||
};
|
menuItems.push({
|
||||||
});
|
name: globalize.translate('ResumeAt', datetime.getDisplayRunningTime(resumePositionTicks)),
|
||||||
|
id: 'resume'
|
||||||
|
});
|
||||||
|
|
||||||
|
menuItems.push({
|
||||||
|
name: globalize.translate('PlayFromBeginning'),
|
||||||
|
id: 'play'
|
||||||
|
});
|
||||||
|
|
||||||
|
actionsheet.show({
|
||||||
|
|
||||||
|
items: menuItems,
|
||||||
|
positionTo: options.positionTo
|
||||||
|
|
||||||
|
}).then(function (id) {
|
||||||
|
switch (id) {
|
||||||
|
|
||||||
|
case 'play':
|
||||||
|
playbackManager.play({
|
||||||
|
ids: [playableItemId],
|
||||||
|
serverId: item.ServerId
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'resume':
|
||||||
|
playbackManager.play({
|
||||||
|
ids: [playableItemId],
|
||||||
|
startPositionTicks: resumePositionTicks,
|
||||||
|
serverId: item.ServerId
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'queue':
|
||||||
|
playbackManager.queue({
|
||||||
|
items: [item]
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'shuffle':
|
||||||
|
playbackManager.shuffle(item);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
show: show
|
||||||
|
};
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue