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
|
|
@ -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