Update sizing information in settings tab.

pull/352/head
Leonardo Galli 8 years ago
parent 2bb21fedab
commit 2d3a3a0677

@ -1,16 +1,16 @@
<fieldset> <fieldset>
<legend>Quality Definitions</legend> <legend>Quality Definitions</legend>
<div class="col-md-11"> <div class="col-md-11">
<div id="quality-definition-list"> <div id="quality-definition-list">
<div class="quality-header x-header hidden-xs"> <div class="quality-header x-header hidden-xs">
<div class="row"> <div class="row">
<span class="col-md-2 col-sm-3">Quality</span> <span class="col-md-2 col-sm-3">Quality</span>
<span class="col-md-2 col-sm-3">Title</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> <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> </div>
<div class="rows x-rows"> <div class="rows x-rows">
</div> </div>
</div> </div>
</div> </div>
</fieldset> </fieldset>

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

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

Loading…
Cancel
Save