Update sizing information in settings tab.

Leonardo Galli 7 years ago
parent 2bb21fedab
commit 2d3a3a0677

@ -1,16 +1,16 @@
<fieldset>
<legend>Quality Definitions</legend>
<div class="col-md-11">
<div id="quality-definition-list">
<div class="quality-header x-header hidden-xs">
<div class="row">
<span class="col-md-2 col-sm-3">Quality</span>
<span class="col-md-2 col-sm-3">Title</span>
<span class="col-md-4 col-sm-6">Size Limit <i class="icon-sonarr-info" title="Limits are automatically adjusted for the series runtime and number of episodes in the file." /></span>
</div>
</div>
<div class="rows x-rows">
</div>
</div>
</div>
<legend>Quality Definitions</legend>
<div class="col-md-11">
<div id="quality-definition-list">
<div class="quality-header x-header hidden-xs">
<div class="row">
<span class="col-md-2 col-sm-3">Quality</span>
<span class="col-md-2 col-sm-3">Title</span>
<span class="col-md-4 col-sm-6">Size Limit <i class="icon-sonarr-warning" title="Limits are automatically adjusted for the movie runtime." /></span>
</div>
</div>
<div class="rows x-rows">
</div>
</div>
</div>
</fieldset>

@ -4,92 +4,92 @@ require('jquery-ui');
var FormatHelpers = require('../../../Shared/FormatHelpers');
var view = Marionette.ItemView.extend({
template : 'Settings/Quality/Definition/QualityDefinitionItemViewTemplate',
className : 'row',
slider : {
min : 0,
max : 200,
step : 0.1
},
ui : {
sizeSlider : '.x-slider',
thirtyMinuteMinSize : '.x-min-thirty',
sixtyMinuteMinSize : '.x-min-sixty',
thirtyMinuteMaxSize : '.x-max-thirty',
sixtyMinuteMaxSize : '.x-max-sixty'
},
events : {
'slide .x-slider' : '_updateSize'
},
initialize : function(options) {
this.profileCollection = options.profiles;
},
onRender : function() {
if (this.model.get('quality').id === 0) {
this.$el.addClass('row advanced-setting');
}
this.ui.sizeSlider.slider({
range : true,
min : this.slider.min,
max : this.slider.max,
step : this.slider.step,
values : [
this.model.get('minSize') || this.slider.min,
this.model.get('maxSize') || this.slider.max
]
});
this._changeSize();
},
_updateSize : function(event, ui) {
var minSize = ui.values[0];
var maxSize = ui.values[1];
if (maxSize === this.slider.max) {
maxSize = null;
}
this.model.set('minSize', minSize);
this.model.set('maxSize', maxSize);
this._changeSize();
},
_changeSize : function() {
var minSize = this.model.get('minSize') || this.slider.min;
var maxSize = this.model.get('maxSize') || null;
{
var minBytes = minSize * 1024 * 1024;
var minThirty = FormatHelpers.bytes(minBytes * 30, 2);
var minSixty = FormatHelpers.bytes(minBytes * 60, 2);
this.ui.thirtyMinuteMinSize.html(minThirty);
this.ui.sixtyMinuteMinSize.html(minSixty);
}
{
if (maxSize === 0 || maxSize === null) {
this.ui.thirtyMinuteMaxSize.html('Unlimited');
this.ui.sixtyMinuteMaxSize.html('Unlimited');
} else {
var maxBytes = maxSize * 1024 * 1024;
var maxThirty = FormatHelpers.bytes(maxBytes * 30, 2);
var maxSixty = FormatHelpers.bytes(maxBytes * 60, 2);
this.ui.thirtyMinuteMaxSize.html(maxThirty);
this.ui.sixtyMinuteMaxSize.html(maxSixty);
}
}
}
template : 'Settings/Quality/Definition/QualityDefinitionItemViewTemplate',
className : 'row',
slider : {
min : 0,
max : 200,
step : 0.1
},
ui : {
sizeSlider : '.x-slider',
thirtyMinuteMinSize : '.x-min-thirty',
sixtyMinuteMinSize : '.x-min-sixty',
thirtyMinuteMaxSize : '.x-max-thirty',
sixtyMinuteMaxSize : '.x-max-sixty'
},
events : {
'slide .x-slider' : '_updateSize'
},
initialize : function(options) {
this.profileCollection = options.profiles;
},
onRender : function() {
if (this.model.get('quality').id === 0) {
this.$el.addClass('row advanced-setting');
}
this.ui.sizeSlider.slider({
range : true,
min : this.slider.min,
max : this.slider.max,
step : this.slider.step,
values : [
this.model.get('minSize') || this.slider.min,
this.model.get('maxSize') || this.slider.max
]
});
this._changeSize();
},
_updateSize : function(event, ui) {
var minSize = ui.values[0];
var maxSize = ui.values[1];
if (maxSize === this.slider.max) {
maxSize = null;
}
this.model.set('minSize', minSize);
this.model.set('maxSize', maxSize);
this._changeSize();
},
_changeSize : function() {
var minSize = this.model.get('minSize') || this.slider.min;
var maxSize = this.model.get('maxSize') || null;
{
var minBytes = minSize * 1024 * 1024;
var minThirty = FormatHelpers.bytes(minBytes * 90, 2);
var minSixty = FormatHelpers.bytes(minBytes * 140, 2);
this.ui.thirtyMinuteMinSize.html(minThirty);
this.ui.sixtyMinuteMinSize.html(minSixty);
}
{
if (maxSize === 0 || maxSize === null) {
this.ui.thirtyMinuteMaxSize.html('Unlimited');
this.ui.sixtyMinuteMaxSize.html('Unlimited');
} else {
var maxBytes = maxSize * 1024 * 1024;
var maxThirty = FormatHelpers.bytes(maxBytes * 90, 2);
var maxSixty = FormatHelpers.bytes(maxBytes * 140, 2);
this.ui.thirtyMinuteMaxSize.html(maxThirty);
this.ui.sixtyMinuteMaxSize.html(maxSixty);
}
}
}
});
view = AsModelBoundView.call(view);
module.exports = view;
module.exports = view;

@ -1,31 +1,31 @@
<span class="col-md-2 col-sm-3">
{{quality.name}}
</span>
<span class="col-md-2 col-sm-3">
<input type="text" class="form-control" name="title">
</span>
<span class="col-md-4 col-sm-6">
<div class="x-slider"></div>
<div class="size-label-wrapper">
<div class="pull-left">
<span class="label label-warning x-min-thirty"
name="thirtyMinuteMinSize"
title="Minimum size for a 30 minute episode">
</span>
<span class="label label-info x-min-sixty"
name="sixtyMinuteMinSize"
title="Minimum size for a 60 minute episode">
</span>
</div>
<div class="pull-right">
<span class="label label-warning x-max-thirty"
name="thirtyMinuteMaxSize"
title="Maximum size for a 30 minute episode">
</span>
<span class="label label-info x-max-sixty"
name="sixtyMinuteMaxSize"
title="Maximum size for a 60 minute episode">
</span>
</div>
</div>
</span>
<span class="col-md-2 col-sm-3">
{{quality.name}}
</span>
<span class="col-md-2 col-sm-3">
<input type="text" class="form-control" name="title">
</span>
<span class="col-md-4 col-sm-6">
<div class="x-slider"></div>
<div class="size-label-wrapper">
<div class="pull-left">
<span class="label label-warning x-min-thirty"
name="thirtyMinuteMinSize"
title="Minimum size for a 90 minute episode">
</span>
<span class="label label-info x-min-sixty"
name="sixtyMinuteMinSize"
title="Minimum size for a 140 minute episode">
</span>
</div>
<div class="pull-right">
<span class="label label-warning x-max-thirty"
name="thirtyMinuteMaxSize"
title="Maximum size for a 90 minute movie">
</span>
<span class="label label-info x-max-sixty"
name="sixtyMinuteMaxSize"
title="Maximum size for a 140 minute movie">
</span>
</div>
</div>
</span>

Loading…
Cancel
Save