mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update now playing page
This commit is contained in:
Luke Pulverenti
parent
878eac1535
commit
19f8c11c38
100 changed files with 45182 additions and 417 deletions
|
|
@ -10036,87 +10036,129 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
});
|
||||
|
||||
</script>
|
||||
<script>
|
||||
|
||||
/**
|
||||
* `Polymer.PaperInkyFocusBehavior` implements a ripple when the element has keyboard focus.
|
||||
*
|
||||
* @polymerBehavior Polymer.PaperInkyFocusBehavior
|
||||
*/
|
||||
Polymer.PaperInkyFocusBehaviorImpl = {
|
||||
|
||||
observers: [
|
||||
'_focusedChanged(receivedFocusFromKeyboard)'
|
||||
],
|
||||
|
||||
_focusedChanged: function(receivedFocusFromKeyboard) {
|
||||
if (!this.$.ink) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$.ink.holdDown = receivedFocusFromKeyboard;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/** @polymerBehavior Polymer.PaperInkyFocusBehavior */
|
||||
Polymer.PaperInkyFocusBehavior = [
|
||||
Polymer.IronButtonState,
|
||||
Polymer.IronControlState,
|
||||
Polymer.PaperInkyFocusBehaviorImpl
|
||||
];
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'iron-media-query',
|
||||
is: 'slide-from-left-animation',
|
||||
|
||||
properties: {
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationBehavior
|
||||
],
|
||||
|
||||
/**
|
||||
* The Boolean return value of the media query.
|
||||
*/
|
||||
queryMatches: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
readOnly: true,
|
||||
notify: true
|
||||
},
|
||||
configure: function(config) {
|
||||
var node = config.node;
|
||||
|
||||
/**
|
||||
* The CSS media query to evaluate.
|
||||
*/
|
||||
query: {
|
||||
type: String,
|
||||
observer: 'queryChanged'
|
||||
if (config.transformOrigin) {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
|
||||
} else {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
|
||||
}
|
||||
|
||||
},
|
||||
this._effect = new KeyframeEffect(node, [
|
||||
{'transform': 'translateX(-100%)'},
|
||||
{'transform': 'none'}
|
||||
], this.timingFromConfig(config));
|
||||
|
||||
created: function() {
|
||||
this._mqHandler = this.queryHandler.bind(this);
|
||||
},
|
||||
return this._effect;
|
||||
}
|
||||
|
||||
queryChanged: function(query) {
|
||||
if (this._mq) {
|
||||
this._mq.removeListener(this._mqHandler);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'slide-from-right-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationBehavior
|
||||
],
|
||||
|
||||
configure: function(config) {
|
||||
var node = config.node;
|
||||
|
||||
if (config.transformOrigin) {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
|
||||
} else {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
|
||||
}
|
||||
if (query[0] !== '(') {
|
||||
query = '(' + query + ')';
|
||||
}
|
||||
this._mq = window.matchMedia(query);
|
||||
this._mq.addListener(this._mqHandler);
|
||||
this.queryHandler(this._mq);
|
||||
},
|
||||
|
||||
queryHandler: function(mq) {
|
||||
this._setQueryMatches(mq.matches);
|
||||
this._effect = new KeyframeEffect(node, [
|
||||
{'transform': 'translateX(100%)'},
|
||||
{'transform': 'none'}
|
||||
], this.timingFromConfig(config));
|
||||
|
||||
return this._effect;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'slide-left-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationBehavior
|
||||
],
|
||||
|
||||
configure: function(config) {
|
||||
var node = config.node;
|
||||
|
||||
if (config.transformOrigin) {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
|
||||
} else {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
|
||||
}
|
||||
|
||||
this._effect = new KeyframeEffect(node, [
|
||||
{'transform': 'none'},
|
||||
{'transform': 'translateX(-100%)'}
|
||||
], this.timingFromConfig(config));
|
||||
|
||||
return this._effect;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'slide-right-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationBehavior
|
||||
],
|
||||
|
||||
configure: function(config) {
|
||||
var node = config.node;
|
||||
|
||||
if (config.transformOrigin) {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
|
||||
} else {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
|
||||
}
|
||||
|
||||
this._effect = new KeyframeEffect(node, [
|
||||
{'transform': 'none'},
|
||||
{'transform': 'translateX(100%)'}
|
||||
], this.timingFromConfig(config));
|
||||
|
||||
return this._effect;
|
||||
}
|
||||
|
||||
});
|
||||
|
|
@ -10520,6 +10562,94 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
};
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
/**
|
||||
* `Polymer.PaperInkyFocusBehavior` implements a ripple when the element has keyboard focus.
|
||||
*
|
||||
* @polymerBehavior Polymer.PaperInkyFocusBehavior
|
||||
*/
|
||||
Polymer.PaperInkyFocusBehaviorImpl = {
|
||||
|
||||
observers: [
|
||||
'_focusedChanged(receivedFocusFromKeyboard)'
|
||||
],
|
||||
|
||||
_focusedChanged: function(receivedFocusFromKeyboard) {
|
||||
if (!this.$.ink) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$.ink.holdDown = receivedFocusFromKeyboard;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/** @polymerBehavior Polymer.PaperInkyFocusBehavior */
|
||||
Polymer.PaperInkyFocusBehavior = [
|
||||
Polymer.IronButtonState,
|
||||
Polymer.IronControlState,
|
||||
Polymer.PaperInkyFocusBehaviorImpl
|
||||
];
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'iron-media-query',
|
||||
|
||||
properties: {
|
||||
|
||||
/**
|
||||
* The Boolean return value of the media query.
|
||||
*/
|
||||
queryMatches: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
readOnly: true,
|
||||
notify: true
|
||||
},
|
||||
|
||||
/**
|
||||
* The CSS media query to evaluate.
|
||||
*/
|
||||
query: {
|
||||
type: String,
|
||||
observer: 'queryChanged'
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
created: function() {
|
||||
this._mqHandler = this.queryHandler.bind(this);
|
||||
},
|
||||
|
||||
queryChanged: function(query) {
|
||||
if (this._mq) {
|
||||
this._mq.removeListener(this._mqHandler);
|
||||
}
|
||||
if (query[0] !== '(') {
|
||||
query = '(' + query + ')';
|
||||
}
|
||||
this._mq = window.matchMedia(query);
|
||||
this._mq.addListener(this._mqHandler);
|
||||
this.queryHandler(this._mq);
|
||||
},
|
||||
|
||||
queryHandler: function(mq) {
|
||||
this._setQueryMatches(mq.matches);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
<script>
|
||||
/** @polymerBehavior Polymer.IronMultiSelectableBehavior */
|
||||
Polymer.IronMultiSelectableBehaviorImpl = {
|
||||
|
|
@ -11122,6 +11252,8 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
</head><body><div hidden="" by-vulcanize=""><dom-module id="paper-material" assetpath="bower_components/paper-material/">
|
||||
<style>
|
||||
:host {
|
||||
|
|
@ -13209,6 +13341,201 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
})();
|
||||
|
||||
</script>
|
||||
<dom-module id="neon-animated-pages" assetpath="bower_components/neon-animation/">
|
||||
|
||||
<style>
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
:host > ::content > * {
|
||||
@apply(--layout-fit);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:host > ::content > :not(.iron-selected):not(.neon-animating) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:host > ::content > .neon-animating {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<content id="content"></content>
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'neon-animated-pages',
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronResizableBehavior,
|
||||
Polymer.IronSelectableBehavior,
|
||||
Polymer.NeonAnimationRunnerBehavior
|
||||
],
|
||||
|
||||
properties: {
|
||||
|
||||
activateEvent: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
|
||||
// if true, the initial page selection will also be animated according to its animation config.
|
||||
animateInitialSelection: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_selectedChanged(selected)'
|
||||
],
|
||||
|
||||
listeners: {
|
||||
'neon-animation-finish': '_onNeonAnimationFinish'
|
||||
},
|
||||
|
||||
_selectedChanged: function(selected) {
|
||||
|
||||
var selectedPage = this.selectedItem;
|
||||
var oldPage = this._prevSelected || false;
|
||||
this._prevSelected = selectedPage;
|
||||
|
||||
// on initial load and if animateInitialSelection is negated, simply display selectedPage.
|
||||
if (!oldPage && !this.animateInitialSelection) {
|
||||
this._completeSelectedChanged();
|
||||
return;
|
||||
}
|
||||
|
||||
// insert safari fix.
|
||||
this.animationConfig = [{
|
||||
name: 'opaque-animation',
|
||||
node: selectedPage
|
||||
}];
|
||||
|
||||
// configure selectedPage animations.
|
||||
if (this.entryAnimation) {
|
||||
this.animationConfig.push({
|
||||
name: this.entryAnimation,
|
||||
node: selectedPage
|
||||
});
|
||||
} else {
|
||||
if (selectedPage.getAnimationConfig) {
|
||||
this.animationConfig.push({
|
||||
animatable: selectedPage,
|
||||
type: 'entry'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// configure oldPage animations iff exists.
|
||||
if (oldPage) {
|
||||
|
||||
// cancel the currently running animation if one is ongoing.
|
||||
if (oldPage.classList.contains('neon-animating')) {
|
||||
this._squelchNextFinishEvent = true;
|
||||
this.cancelAnimation();
|
||||
this._completeSelectedChanged();
|
||||
}
|
||||
|
||||
// configure the animation.
|
||||
if (this.exitAnimation) {
|
||||
this.animationConfig.push({
|
||||
name: this.exitAnimation,
|
||||
node: oldPage
|
||||
});
|
||||
} else {
|
||||
if (oldPage.getAnimationConfig) {
|
||||
this.animationConfig.push({
|
||||
animatable: oldPage,
|
||||
type: 'exit'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// display the oldPage during the transition.
|
||||
oldPage.classList.add('neon-animating');
|
||||
}
|
||||
|
||||
// display the selectedPage during the transition.
|
||||
selectedPage.classList.add('neon-animating');
|
||||
|
||||
// actually run the animations.
|
||||
if (this.animationConfig.length > 1) {
|
||||
|
||||
// on first load, ensure we run animations only after element is attached.
|
||||
if (!this.isAttached) {
|
||||
this.async(function () {
|
||||
this.playAnimation(undefined, {
|
||||
fromPage: null,
|
||||
toPage: selectedPage
|
||||
});
|
||||
});
|
||||
|
||||
} else {
|
||||
this.playAnimation(undefined, {
|
||||
fromPage: oldPage,
|
||||
toPage: selectedPage
|
||||
});
|
||||
}
|
||||
|
||||
} else {
|
||||
this._completeSelectedChanged(oldPage, selectedPage);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {Object=} oldPage
|
||||
* @param {Object=} selectedPage
|
||||
*/
|
||||
_completeSelectedChanged: function(oldPage, selectedPage) {
|
||||
if (selectedPage) {
|
||||
selectedPage.classList.remove('neon-animating');
|
||||
}
|
||||
if (oldPage) {
|
||||
oldPage.classList.remove('neon-animating');
|
||||
}
|
||||
if (!selectedPage || !oldPage) {
|
||||
var nodes = Polymer.dom(this.$.content).getDistributedNodes();
|
||||
for (var node, index = 0; node = nodes[index]; index++) {
|
||||
node.classList && node.classList.remove('neon-animating');
|
||||
}
|
||||
}
|
||||
this.async(this._notifyPageResize);
|
||||
},
|
||||
|
||||
_onNeonAnimationFinish: function(event) {
|
||||
if (this._squelchNextFinishEvent) {
|
||||
this._squelchNextFinishEvent = false;
|
||||
return;
|
||||
}
|
||||
this._completeSelectedChanged(event.detail.fromPage, event.detail.toPage);
|
||||
},
|
||||
|
||||
_notifyPageResize: function() {
|
||||
var selectedPage = this.selectedItem;
|
||||
this.resizerShouldNotify = function(element) {
|
||||
return element == selectedPage;
|
||||
}
|
||||
this.notifyResize();
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
})();
|
||||
</script>
|
||||
<dom-module id="paper-icon-button" assetpath="bower_components/paper-icon-button/">
|
||||
<style>
|
||||
|
|
@ -14461,6 +14788,61 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
|||
|
||||
});
|
||||
|
||||
</script>
|
||||
<dom-module id="iron-pages" assetpath="bower_components/iron-pages/">
|
||||
|
||||
<style>
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
:host > ::content > :not(.iron-selected) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<template>
|
||||
|
||||
<content></content>
|
||||
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'iron-pages',
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronResizableBehavior,
|
||||
Polymer.IronSelectableBehavior
|
||||
],
|
||||
|
||||
properties: {
|
||||
|
||||
// as the selected page is the only one visible, activateEvent
|
||||
// is both non-sensical and problematic; e.g. in cases where a user
|
||||
// handler attempts to change the page and the activateEvent
|
||||
// handler immediately changes it back
|
||||
activateEvent: {
|
||||
value: null
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_selectedPageChanged(selected)'
|
||||
],
|
||||
|
||||
_selectedPageChanged: function(selected, old) {
|
||||
this.async(this.notifyResize);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
<iron-iconset-svg name="icons" size="24">
|
||||
<svg>
|
||||
|
|
@ -14521,11 +14903,16 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
|||
<g id="stop"><path d="M6 6h12v12H6z"></path></g>
|
||||
<g id="skip-next"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"></path></g>
|
||||
<g id="skip-previous"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"></path></g>
|
||||
<g id="volume-down"><path d="M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"></path></g>
|
||||
<g id="volume-off"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"></path></g>
|
||||
<g id="volume-up"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"></path></g>
|
||||
<g id="thumb-down"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v1.91l.01.01L1 14c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"></path></g>
|
||||
<g id="thumb-up"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"></path></g>
|
||||
<g id="favorite"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path></g>
|
||||
<g id="fullscreen"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"></path></g>
|
||||
<g id="audiotrack"><path d="M12 3v9.28c-.47-.17-.97-.28-1.5-.28C8.01 12 6 14.01 6 16.5S8.01 21 10.5 21c2.31 0 4.2-1.75 4.45-4H15V6h4V3h-7z"></path></g>
|
||||
<g id="subtitles"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM4 12h4v2H4v-2zm10 6H4v-2h10v2zm6 0h-4v-2h4v2zm0-4H10v-2h10v2z"></path></g>
|
||||
<g id="movie"><path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z"></path></g>
|
||||
</defs>
|
||||
</svg>
|
||||
</iron-iconset-svg>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue