mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
limit videos for keyframe extraction
This commit is contained in:
Luke Pulverenti
parent
1f556561c6
commit
e9daebe89d
50 changed files with 1801 additions and 211 deletions
|
|
@ -27,14 +27,14 @@
|
|||
"web-component-tester": "*",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"homepage": "https://github.com/PolymerElements/iron-behaviors",
|
||||
"homepage": "https://github.com/polymerelements/iron-behaviors",
|
||||
"_release": "1.0.8",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.8",
|
||||
"commit": "663ad706b43989f4961d945b8116cf4db346532f"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/iron-behaviors.git",
|
||||
"_source": "git://github.com/polymerelements/iron-behaviors.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/iron-behaviors"
|
||||
"_originalSource": "polymerelements/iron-behaviors"
|
||||
}
|
||||
|
|
@ -23,14 +23,14 @@
|
|||
"paper-styles": "polymerelements/paper-styles#^1.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"homepage": "https://github.com/PolymerElements/iron-flex-layout",
|
||||
"homepage": "https://github.com/polymerelements/iron-flex-layout",
|
||||
"_release": "1.0.3",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.3",
|
||||
"commit": "e6c2cfec18354973ac03e70dcd8afcc3c72d09b9"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/iron-flex-layout.git",
|
||||
"_source": "git://github.com/polymerelements/iron-flex-layout.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/iron-flex-layout"
|
||||
"_originalSource": "polymerelements/iron-flex-layout"
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-progress",
|
||||
"version": "1.0.2",
|
||||
"version": "1.0.3",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"description": "A material design progress bar",
|
||||
"authors": "The Polymer Authors",
|
||||
|
|
@ -29,11 +29,11 @@
|
|||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"homepage": "https://github.com/PolymerElements/paper-progress",
|
||||
"_release": "1.0.2",
|
||||
"_release": "1.0.3",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.2",
|
||||
"commit": "f4db2254c41f21d7df2bd8533d16f929507f823e"
|
||||
"tag": "v1.0.3",
|
||||
"commit": "a8ae3f94aa3727793d43396758a444a2e781e9a8"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/paper-progress.git",
|
||||
"_target": "^1.0.0",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-progress",
|
||||
"version": "1.0.2",
|
||||
"version": "1.0.3",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"description": "A material design progress bar",
|
||||
"authors": "The Polymer Authors",
|
||||
|
|
|
|||
|
|
@ -30,8 +30,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
paper-progress {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
paper-progress.blue {
|
||||
|
|
|
|||
|
|
@ -57,17 +57,17 @@ the value changed. You can also customize the transition:
|
|||
--paper-progress-transition-timing-function: ease;
|
||||
--paper-progress-transition-transition-delay: 0s;
|
||||
}
|
||||
|
||||
|
||||
The following mixins are available for styling:
|
||||
|
||||
|
||||
|
||||
Custom property | Description | Default
|
||||
----------------|-------------|----------
|
||||
`--paper-progress-container` | Mixin applied to container | `{}`
|
||||
|
||||
|
||||
|
||||
Custom property | Description | Default
|
||||
--------------------------------------------|----------------------------------------|----------
|
||||
--paper-progress-container-color | Mixin applied to container | --google-grey-300
|
||||
--paper-progress-transition-duration | Duration of the transition | 0.008s
|
||||
--paper-progress-transition-timing-function | The timing function for the transition | ease
|
||||
--paper-progress-transition-delay | delay for the transition | 0s
|
||||
--paper-progress-active-color | The color of the active bar | --google-green-500
|
||||
--paper-progress-secondary-color | The color of the secondary bar | --google-green-100
|
||||
|
||||
@group Paper Elements
|
||||
@element paper-progress
|
||||
|
|
@ -78,13 +78,24 @@ Custom property | Description | Default
|
|||
<dom-module id="paper-progress">
|
||||
<style>
|
||||
:host {
|
||||
display: inline-block;
|
||||
display: block;
|
||||
width: 200px;
|
||||
height: 4px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:host(.transiting) #activeProgress,
|
||||
:host(.transiting) #secondaryProgress {
|
||||
:host,
|
||||
#primaryProgress.indeterminate:after {
|
||||
background-color: var(--paper-progress-container-color, --google-grey-300);
|
||||
}
|
||||
|
||||
:host > *,
|
||||
#primaryProgress.indeterminate:after {
|
||||
@apply(--layout-fit);
|
||||
}
|
||||
|
||||
:host(.transiting) > * {
|
||||
-webkit-transition-property: -webkit-transform;
|
||||
transition-property: transform;
|
||||
|
||||
|
|
@ -101,18 +112,7 @@ Custom property | Description | Default
|
|||
transition-delay: var(--paper-progress-transition-delay, 0s);
|
||||
}
|
||||
|
||||
#progressContainer {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
@apply(--paper-progress-container);
|
||||
}
|
||||
|
||||
#progressContainer, #indeterminateSplitter {
|
||||
background-color: var(--paper-progress-container-color, --google-grey-300);
|
||||
}
|
||||
|
||||
#activeProgress,
|
||||
#primaryProgress,
|
||||
#secondaryProgress {
|
||||
-webkit-transform-origin: left center;
|
||||
transform-origin: left center;
|
||||
|
|
@ -120,29 +120,28 @@ Custom property | Description | Default
|
|||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
#activeProgress {
|
||||
#primaryProgress {
|
||||
background-color: var(--paper-progress-active-color, --google-green-500);
|
||||
}
|
||||
|
||||
#secondaryProgress {
|
||||
background-color: var(--paper-progress-secondary-color, --google-green-100);
|
||||
}
|
||||
|
||||
#indeterminateSplitter {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#activeProgress.indeterminate {
|
||||
#primaryProgress.indeterminate {
|
||||
-webkit-transform-origin: right center;
|
||||
transform-origin: right center;
|
||||
-webkit-animation: indeterminate-bar 2s linear infinite;
|
||||
animation: indeterminate-bar 2s linear infinite;
|
||||
}
|
||||
|
||||
#indeterminateSplitter.indeterminate {
|
||||
display: block;
|
||||
#primaryProgress.indeterminate:after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
|
||||
-webkit-animation: indeterminate-splitter 2s linear infinite;
|
||||
animation: indeterminate-splitter 2s linear infinite;
|
||||
}
|
||||
|
|
@ -212,11 +211,8 @@ Custom property | Description | Default
|
|||
}
|
||||
</style>
|
||||
<template>
|
||||
<div id="progressContainer" role="progressbar" aria-valuenow$="{{value}}" aria-valuemin$="{{min}}" aria-valuemax$="{{max}}">
|
||||
<div id="secondaryProgress" class="fit"></div>
|
||||
<div id="activeProgress" class="fit"></div>
|
||||
<div id="indeterminateSplitter" class="fit"></div>
|
||||
</div>
|
||||
<div id="secondaryProgress" hidden$="[[!_hasSecondaryProgress(secondaryRatio)]]"></div>
|
||||
<div id="primaryProgress"></div>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
|
|
@ -229,6 +225,10 @@ Custom property | Description | Default
|
|||
Polymer.IronRangeBehavior
|
||||
],
|
||||
|
||||
hostAttributes: {
|
||||
role: 'progressbar'
|
||||
},
|
||||
|
||||
properties: {
|
||||
|
||||
/**
|
||||
|
|
@ -236,8 +236,7 @@ Custom property | Description | Default
|
|||
*/
|
||||
secondaryProgress: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
notify: true
|
||||
value: 0
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -246,8 +245,7 @@ Custom property | Description | Default
|
|||
secondaryRatio: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
readOnly: true,
|
||||
observer: '_secondaryRatioChanged'
|
||||
readOnly: true
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -255,22 +253,19 @@ Custom property | Description | Default
|
|||
*/
|
||||
indeterminate: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
notify: true,
|
||||
observer: '_toggleIndeterminate'
|
||||
value: false
|
||||
}
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_ratioChanged(ratio)',
|
||||
'_secondaryProgressChanged(secondaryProgress, min, max)'
|
||||
'_progressChanged(secondaryProgress, value, min, max)',
|
||||
'_toggleIndeterminate(indeterminate)'
|
||||
],
|
||||
|
||||
_toggleIndeterminate: function() {
|
||||
_toggleIndeterminate: function(indeterminate) {
|
||||
// If we use attribute/class binding, the animation sometimes doesn't translate properly
|
||||
// on Safari 7.1. So instead, we toggle the class here in the update method.
|
||||
this.toggleClass('indeterminate', this.indeterminate, this.$.activeProgress);
|
||||
this.toggleClass('indeterminate', this.indeterminate, this.$.indeterminateSplitter);
|
||||
this.toggleClass('indeterminate', indeterminate, this.$.primaryProgress);
|
||||
},
|
||||
|
||||
_transformProgress: function(progress, ratio) {
|
||||
|
|
@ -278,17 +273,30 @@ Custom property | Description | Default
|
|||
progress.style.transform = progress.style.webkitTransform = transform;
|
||||
},
|
||||
|
||||
_ratioChanged: function(ratio) {
|
||||
this._transformProgress(this.$.activeProgress, ratio);
|
||||
_mainRatioChanged: function(ratio) {
|
||||
this._transformProgress(this.$.primaryProgress, ratio);
|
||||
},
|
||||
|
||||
_secondaryRatioChanged: function(secondaryRatio) {
|
||||
_progressChanged: function(secondaryProgress, value, min, max) {
|
||||
secondaryProgress = this._clampValue(secondaryProgress);
|
||||
value = this._clampValue(value);
|
||||
|
||||
var secondaryRatio = this._calcRatio(secondaryProgress) * 100;
|
||||
var mainRatio = this._calcRatio(value) * 100;
|
||||
|
||||
this._setSecondaryRatio(secondaryRatio);
|
||||
this._transformProgress(this.$.secondaryProgress, secondaryRatio);
|
||||
this._transformProgress(this.$.primaryProgress, mainRatio);
|
||||
|
||||
this.secondaryProgress = secondaryProgress;
|
||||
|
||||
this.setAttribute('aria-valuenow', value);
|
||||
this.setAttribute('aria-valuemin', min);
|
||||
this.setAttribute('aria-valuemax', max);
|
||||
},
|
||||
|
||||
_secondaryProgressChanged: function() {
|
||||
this.secondaryProgress = this._clampValue(this.secondaryProgress);
|
||||
this._setSecondaryRatio(this._calcRatio(this.secondaryProgress) * 100);
|
||||
_hasSecondaryProgress: function(secondaryRatio) {
|
||||
return secondaryRatio > 0
|
||||
}
|
||||
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue