mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

WIP

Browse source
This commit is contained in:
MrTimscampi 2020-08-16 20:24:45 +02:00 • committed by vitorsemeano
parent 96eccd2ecd
commit 7d9208e951
143 changed files with 1000 additions and 1008 deletions
Download patch file Download diff file Expand all files Collapse all files

109
src/elements/emby-button/emby-button.js
View file

@ -1,12 +1,65 @@
import { removeEventListener, addEventListener } from '../../scripts/dom';
import layoutManager from '../../components/layoutManager';
import shell from '../../scripts/shell';
import appRouter from '../../components/appRouter';
import appHost from '../../components/apphost';
import { appRouter } from '../../components/appRouter';
import { appHost } from '../../components/apphost';
import './emby-button.css';
const EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype);
const EmbyLinkButtonPrototype = Object.create(HTMLAnchorElement.prototype);
class EmbyButton extends HTMLButtonElement {
createdCallback() {
if (this.classList.contains('emby-button')) {
return;
}
this.classList.add('../../elements/emby-button/emby-button');
// TODO replace all instances of element-showfocus with this method
if (layoutManager.tv) {
// handles all special css for tv layout
// this method utilizes class chaining
this.classList.add('show-focus');
}
}
attachedCallback() {
if (this.tagName === 'A') {
removeEventListener(this, 'click', onAnchorClick, {});
addEventListener(this, 'click', onAnchorClick, {});
if (this.getAttribute('data-autohide') === 'true') {
if (appHost.supports('externallinks')) {
this.classList.remove('hide');
} else {
this.classList.add('hide');
}
}
}
}
detachedCallback() {
removeEventListener(this, 'click', onAnchorClick, {});
}
}
class EmbyLinkButton extends HTMLAnchorElement {
attachedCallback() {
if (this.tagName === 'A') {
removeEventListener(this, 'click', onAnchorClick, {});
addEventListener(this, 'click', onAnchorClick, {});
if (this.getAttribute('data-autohide') === 'true') {
if (appHost.supports('externallinks')) {
this.classList.remove('hide');
} else {
this.classList.add('hide');
}
}
}
}
detachedCallback() {
removeEventListener(this, 'click', onAnchorClick, {});
}
}
function onAnchorClick(e) {
const href = this.getAttribute('href') || '';
@ -24,50 +77,8 @@ function onAnchorClick(e) {
}
}
EmbyButtonPrototype.createdCallback = function () {
if (this.classList.contains('emby-button')) {
return;
}
customElements.define('emby-button', EmbyButton, { extends: 'button' });
this.classList.add('../../elements/emby-button/emby-button');
// TODO replace all instances of element-showfocus with this method
if (layoutManager.tv) {
// handles all special css for tv layout
// this method utilizes class chaining
this.classList.add('show-focus');
}
};
customElements.define('emby-linkbutton', EmbyLinkButton, { extends: 'a' });
EmbyButtonPrototype.attachedCallback = function () {
if (this.tagName === 'A') {
removeEventListener(this, 'click', onAnchorClick, {});
addEventListener(this, 'click', onAnchorClick, {});
if (this.getAttribute('data-autohide') === 'true') {
if (appHost.supports('externallinks')) {
this.classList.remove('hide');
} else {
this.classList.add('hide');
}
}
}
};
EmbyButtonPrototype.detachedCallback = function () {
removeEventListener(this, 'click', onAnchorClick, {});
};
EmbyLinkButtonPrototype.createdCallback = EmbyButtonPrototype.createdCallback;
EmbyLinkButtonPrototype.attachedCallback = EmbyButtonPrototype.attachedCallback;
document.registerElement('../../elements/emby-button/emby-button', {
prototype: EmbyButtonPrototype,
extends: 'button'
});
document.registerElement('emby-linkbutton', {
prototype: EmbyLinkButtonPrototype,
extends: 'a'
});
export default EmbyButtonPrototype;
export default EmbyButton;

2
src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js
View file

@ -1,7 +1,7 @@
import EmbyProgressRing from '../emby-progressring/emby-progressring';
import dom from '../../scripts/dom';
import serverNotifications from '../../scripts/serverNotifications';
import events from 'jellyfin-apiclient';
import { events } from 'jellyfin-apiclient';
import 'webcomponents.js';
/* eslint-disable indent */

7
src/elements/emby-itemscontainer/emby-itemscontainer.js
View file

@ -1,8 +1,7 @@
import itemShortcuts from '../../components/shortcuts';
import inputManager from '../../scripts/inputManager';
import connectionManager from 'jellyfin-apiclient';
import playbackManager from '../../components/playback/playbackmanager';
import { playbackManager } from '../../components/playback/playbackmanager';
import imageLoader from '../../components/images/imageLoader';
import layoutManager from '../../components/layoutManager';
import browser from '../../scripts/browser';
@ -10,7 +9,7 @@ import dom from '../../scripts/dom';
import loading from '../../components/loading/loading';
import focusManager from '../../components/focusManager';
import serverNotifications from '../../scripts/serverNotifications';
import events from 'jellyfin-apiclient';
import { ConnectionManager, events } from 'jellyfin-apiclient';
import 'webcomponents.js';
/* eslint-disable indent */
@ -104,7 +103,7 @@ import 'webcomponents.js';
}
const serverId = el.getAttribute('data-serverid');
const apiClient = window.connectionManager.getApiClient(serverId);
const apiClient = ConnectionManager.getApiClient(serverId);
loading.show();

5
src/elements/emby-playstatebutton/emby-playstatebutton.js
View file

@ -1,6 +1,5 @@
import connectionManager from 'jellyfin-apiclient';
import serverNotifications from '../../scripts/serverNotifications';
import events from 'jellyfin-apiclient';
import { ConnectionManager, events } from 'jellyfin-apiclient';
import globalize from '../../scripts/globalize';
import EmbyButtonPrototype from '../../elements/emby-button/emby-button';
@ -24,7 +23,7 @@ import EmbyButtonPrototype from '../../elements/emby-button/emby-button';
const button = this;
const id = button.getAttribute('data-id');
const serverId = button.getAttribute('data-serverid');
const apiClient = window.connectionManager.getApiClient(serverId);
const apiClient = ConnectionManager.getApiClient(serverId);
if (!button.classList.contains('playstatebutton-played')) {
apiClient.markPlayed(apiClient.getCurrentUserId(), id, new Date());

5
src/elements/emby-ratingbutton/emby-ratingbutton.js
View file

@ -1,6 +1,5 @@
import connectionManager from 'jellyfin-apiclient';
import serverNotifications from '../../scripts/serverNotifications';
import events from 'jellyfin-apiclient';
import { ConnectionManager, events } from 'jellyfin-apiclient';
import globalize from '../../scripts/globalize';
import EmbyButtonPrototype from '../emby-button/emby-button';
@ -28,7 +27,7 @@ import EmbyButtonPrototype from '../emby-button/emby-button';
const button = this;
const id = button.getAttribute('data-id');
const serverId = button.getAttribute('data-serverid');
const apiClient = window.connectionManager.getApiClient(serverId);
const apiClient = ConnectionManager.getApiClient(serverId);
let likes = this.getAttribute('data-likes');
const isFavorite = this.getAttribute('data-isfavorite') === 'true';

305
src/elements/emby-tabs/emby-tabs.js
View file

@ -7,8 +7,6 @@ import './emby-tabs.css';
import '../../assets/css/scrollstyles.css';
/* eslint-disable indent */
const EmbyTabs = Object.create(HTMLDivElement.prototype);
const buttonClass = 'emby-tab-button';
const activeButtonClass = buttonClass + '-active';
@ -145,182 +143,181 @@ import '../../assets/css/scrollstyles.css';
}
}
EmbyTabs.createdCallback = function () {
if (this.classList.contains('emby-tabs')) {
return;
class EmbyTabs extends HTMLDivElement {
createdCallback() {
if (this.classList.contains('emby-tabs')) {
return;
}
this.classList.add('emby-tabs');
this.classList.add('focusable');
dom.addEventListener(this, 'click', onClick, {
passive: true
});
dom.addEventListener(this, 'focusout', onFocusOut);
}
this.classList.add('emby-tabs');
this.classList.add('focusable');
dom.addEventListener(this, 'click', onClick, {
passive: true
});
focus() {
const selected = this.querySelector('.' + activeButtonClass);
dom.addEventListener(this, 'focusout', onFocusOut);
};
EmbyTabs.focus = function onFocusIn() {
const selectedTab = this.querySelector('.' + activeButtonClass);
const lastFocused = this.querySelector('.lastFocused');
if (lastFocused) {
focusManager.focus(lastFocused);
} else if (selectedTab) {
focusManager.focus(selectedTab);
} else {
focusManager.autoFocus(this);
}
};
EmbyTabs.refresh = function () {
if (this.scroller) {
this.scroller.reload();
}
};
EmbyTabs.attachedCallback = function () {
initScroller(this);
const current = this.querySelector('.' + activeButtonClass);
const currentIndex = current ? parseInt(current.getAttribute('data-index')) : parseInt(this.getAttribute('data-index') || '0');
if (currentIndex !== -1) {
this.selectedTabIndex = currentIndex;
const tabButtons = this.querySelectorAll('.' + buttonClass);
const newTabButton = tabButtons[currentIndex];
if (newTabButton) {
setActiveTabButton(newTabButton);
if (this.lastFocused) {
focusManager.focus(this.lastFocused);
} else if (this.selectedTab) {
focusManager.focus(this.selectedTab);
} else {
focusManager.autoFocus(this);
}
}
if (!this.readyFired) {
this.readyFired = true;
this.dispatchEvent(new CustomEvent('ready', {}));
}
};
EmbyTabs.detachedCallback = function () {
if (this.scroller) {
this.scroller.destroy();
this.scroller = null;
refresh() {
if (this.scroller) {
this.scroller.reload();
}
}
dom.removeEventListener(this, 'click', onClick, {
passive: true
});
};
attachedCallback() {
console.warn(this);
initScroller(this);
function getSelectedTabButton(elem) {
return elem.querySelector('.' + activeButtonClass);
}
const current = this.querySelector('.' + activeButtonClass);
const currentIndex = current ? parseInt(current.getAttribute('data-index')) : parseInt(this.getAttribute('data-index') || '0');
EmbyTabs.selectedIndex = function (selected, triggerEvent) {
const tabs = this;
if (currentIndex !== -1) {
this.selectedTabIndex = currentIndex;
if (selected == null) {
return tabs.selectedTabIndex || 0;
const tabButtons = this.querySelectorAll('.' + buttonClass);
const newTabButton = tabButtons[currentIndex];
if (newTabButton) {
setActiveTabButton(newTabButton);
}
}
if (!this.readyFired) {
this.readyFired = true;
this.dispatchEvent(new CustomEvent('ready', {}));
}
}
const current = tabs.selectedIndex();
detachedCallback() {
if (this.scroller) {
this.scroller.destroy();
this.scroller = null;
}
tabs.selectedTabIndex = selected;
dom.removeEventListener(this, 'click', onClick, {
passive: true
});
}
const tabButtons = tabs.querySelectorAll('.' + buttonClass);
getSelectedTabButton(elem) {
return elem.querySelector('.' + activeButtonClass);
}
if (current === selected || triggerEvent === false) {
triggerBeforeTabChange(tabs, selected, current);
selectedIndex(selected, triggerEvent) {
const tabs = this;
if (selected == null) {
return tabs.selectedTabIndex || 0;
}
const current = tabs.selectedIndex();
tabs.selectedTabIndex = selected;
const tabButtons = tabs.querySelectorAll('.' + buttonClass);
if (current === selected || triggerEvent === false) {
triggerBeforeTabChange(tabs, selected, current);
tabs.dispatchEvent(new CustomEvent('tabchange', {
detail: {
selectedTabIndex: selected
}
}));
const currentTabButton = tabButtons[current];
setActiveTabButton(tabButtons[selected]);
if (current !== selected && currentTabButton) {
currentTabButton.classList.remove(activeButtonClass);
}
} else {
onClick.call(tabs, {
target: tabButtons[selected]
});
}
}
getSibling(elem, method) {
let sibling = elem[method];
while (sibling) {
if (sibling.classList.contains(buttonClass)) {
if (!sibling.classList.contains('hide')) {
return sibling;
}
}
sibling = sibling[method];
}
return null;
}
selectNext() {
const current = this.getSelectedTabButton(this);
const sibling = this.getSibling(current, 'nextSibling');
if (sibling) {
onClick.call(this, {
target: sibling
});
}
}
selectPrevious() {
const current = this.getSelectedTabButton(this);
const sibling = this.getSibling(current, 'previousSibling');
if (sibling) {
onClick.call(this, {
target: sibling
});
}
}
triggerBeforeTabChange(selected) {
const tabs = this;
triggerBeforeTabChange(tabs, tabs.selectedIndex());
}
triggerTabChange(selected) {
const tabs = this;
tabs.dispatchEvent(new CustomEvent('tabchange', {
detail: {
selectedTabIndex: selected
selectedTabIndex: tabs.selectedIndex()
}
}));
const currentTabButton = tabButtons[current];
setActiveTabButton(tabButtons[selected]);
if (current !== selected && currentTabButton) {
currentTabButton.classList.remove(activeButtonClass);
}
} else {
onClick.call(tabs, {
target: tabButtons[selected]
});
}
};
function getSibling(elem, method) {
let sibling = elem[method];
while (sibling) {
if (sibling.classList.contains(buttonClass)) {
if (!sibling.classList.contains('hide')) {
return sibling;
}
}
sibling = sibling[method];
}
return null;
setTabEnabled(index, enabled) {
const btn = this.querySelector('.emby-tab-button[data-index="' + index + '"]');
if (enabled) {
btn.classList.remove('hide');
} else {
btn.classList.remove('add');
}
}
}
EmbyTabs.selectNext = function () {
const current = getSelectedTabButton(this);
const sibling = getSibling(current, 'nextSibling');
if (sibling) {
onClick.call(this, {
target: sibling
});
}
};
EmbyTabs.selectPrevious = function () {
const current = getSelectedTabButton(this);
const sibling = getSibling(current, 'previousSibling');
if (sibling) {
onClick.call(this, {
target: sibling
});
}
};
EmbyTabs.triggerBeforeTabChange = function (selected) {
const tabs = this;
triggerBeforeTabChange(tabs, tabs.selectedIndex());
};
EmbyTabs.triggerTabChange = function (selected) {
const tabs = this;
tabs.dispatchEvent(new CustomEvent('tabchange', {
detail: {
selectedTabIndex: tabs.selectedIndex()
}
}));
};
EmbyTabs.setTabEnabled = function (index, enabled) {
const btn = this.querySelector('.emby-tab-button[data-index="' + index + '"]');
if (enabled) {
btn.classList.remove('hide');
} else {
btn.classList.remove('add');
}
};
document.registerElement('emby-tabs', {
prototype: EmbyTabs,
extends: 'div'
});
customElements.define('emby-tabs', EmbyTabs, { extends: 'div' });
/* eslint-enable indent */