Stretch mode buttons work

This commit is contained in:
Tamius Han 2018-05-27 21:41:08 +02:00
parent 293b784704
commit 0871ad6d97
6 changed files with 45 additions and 16 deletions

View File

@ -28,7 +28,7 @@ class CommsClient {
this.hasSettings = true;
ExtensionConf = message.conf;
} else if (message.cmd === "set-stretch") {
this.pageInfo.setStretchMode(StretchMode[message.mode]);
} else if (message.cmd === "autoar-enable") {
if (message.enabled !== false) {
this.pageInfo.initArDetection();
@ -215,6 +215,9 @@ class CommsServer {
if (message.cmd === 'get-config') {
port.postMessage({cmd: "set-config", conf: ExtensionConf})
}
if (message.cmd === 'set-stretch') {
this.sendToActive(message);
}
if (message.cmd === 'set-ar') {
this.sendToActive(message);
}

View File

@ -206,8 +206,10 @@ class PageInfo {
}
setStretchMode(sm){
// TODO: find a way to only change aspect ratio for one video
for(var vd of this.videos){
vd.setStretchMode(ar)
vd.setStretchMode(sm)
}
}

View File

@ -8,7 +8,6 @@ var StretchMode = {
CONDITIONAL: 3
}
class Resizer {
constructor(videoData){
@ -108,6 +107,7 @@ class Resizer {
setStretchMode(stretchMode){
this.stretch.mode = stretchMode;
this.restore();
}
setPan(relativeMousePosX, relativeMousePosY){

View File

@ -38,8 +38,8 @@ class Stretcher {
var minW = this.conf.player.dimensions.width * (1 - ExtensionConf.stretch.conditionalDifferencePercent);
var maxW = this.conf.player.dimensions.width * (1 + ExtensionConf.stretch.conditionalDifferencePercent);
var minX = this.conf.player.dimensions.height * (1 - ExtensionConf.stretch.conditionalDifferencePercent);
var maxX = this.conf.player.dimensions.height * (1 + ExtensionConf.stretch.conditionalDifferencePercent);
var minH = this.conf.player.dimensions.height * (1 - ExtensionConf.stretch.conditionalDifferencePercent);
var maxH = this.conf.player.dimensions.height * (1 + ExtensionConf.stretch.conditionalDifferencePercent);
if (actualWidth >= minW && actualWidth <= maxW) {
stretchFactors.xFactor *= this.conf.player.dimensions.width / actualWidth;
@ -50,9 +50,6 @@ class Stretcher {
}
calculateStretch(actualAr) {
// naj ponovim: samo razširjamo, nikoli krčimo
// let me reiterate: only stretch, no shrink
var playerAr = this.conf.player.dimensions.width / this.conf.player.dimensions.height;
var videoAr = this.conf.video.videoWidth / this.conf.video.videoHeight;
@ -67,17 +64,29 @@ class Stretcher {
if (actualAr > videoAr) {
if(videoAr > playerAr) {
stretchFactors.xFactor = playerAr / videoAr;
if(Debug.debug){
console.log("[Stretcher.js::calculateStretch] stretching strategy 1")
}
stretchFactors.xFactor = playerAr / videoAr; // is this 1 then?
stretchFactors.yFactor = actualAr / videoAr;
} else {
stretchFactors.xFactor = 1;
if(Debug.debug){
console.log("[Stretcher.js::calculateStretch] stretching strategy 2")
}
stretchFactors.xFactor = playerAr / videoAr;
stretchFactors.yFactor = actualAr / videoAr;
}
} else {
if (videoAr > playerAr) {
if(Debug.debug){
console.log("[Stretcher.js::calculateStretch] stretching strategy 3")
}
stretchFactors.xFactor = videoAr / actualAr;
stretchFactors.yFactor = playerAr / actualAr;
} else {
if(Debug.debug){
console.log("[Stretcher.js::calculateStretch] stretching strategy 4")
}
stretchFactors.xFactor = playerAr / actualAr;
stretchFactors.yFactor = 1;
}

View File

@ -274,7 +274,7 @@ document.addEventListener("click", (e) => {
if(e.target.classList.contains("_changeAr")){
if(e.target.classList.contains("_ar_auto")){
command.cmd = "autoar-enable";
command.enable = true;
command.enabled = true;
return command;
}
if(e.target.classList.contains("_ar_reset")){
@ -313,7 +313,22 @@ document.addEventListener("click", (e) => {
return command;
}
}
if(e.target.classList.contains("_stretch")){
if(e.target.classList.contains("_ar_stretch_none")) {
command.cmd = "set-stretch";
command.mode = "NO_STRETCH";
} else if(e.target.classList.contains("_ar_stretch_basic")) {
command.cmd = "set-stretch";
command.mode = "BASIC";
} else if(e.target.classList.contains("_ar_stretch_hybrid")) {
command.cmd = "set-stretch";
command.mode = "HYBRID";
} else if(e.target.classList.contains("_ar_stretch_conditional")) {
command.cmd = "set-stretch";
command.mode = "CONDITIONAL";
}
return command;
}
if(e.target.classList.contains("_autoAr")){
// var command = {};
// if(e.target.classList.contains("_autoar_temp-disable")){

View File

@ -250,10 +250,10 @@
</div>
<span class="label">Stretching mode<br><small>Stretching is independent of crop mode. Crop gets applied before stretching.</small></span>
<div class="button-row">
<a class="button _changeAr _ar_stretch_none w24">Never<br/><span id="_b_changeAr_reset_key" class="smallcaps small darker"></span></a>
<a class="button _changeAr _ar_stretch_basic w24">Basic<br/><span id="_b_changeAr_reset_key" class="smallcaps small darker"></span></a>
<a class="button _changeAr _ar_stretch_hybrid w24">Hybrid<br/><span id="_b_changeAr_sw_key" class="smallcaps small darker"></span></a>
<a class="button _changeAr _ar_stretch_conditional w24">Conditional<br/><span id="_b_changeAr_sh_key" class="smallcaps small darker"></span></a>
<a class="button _stretch _ar_stretch_none w24">Never<br/><span id="_b_changeAr_reset_key" class="smallcaps small darker"></span></a>
<a class="button _stretch _ar_stretch_basic w24">Basic<br/><span id="_b_changeAr_reset_key" class="smallcaps small darker"></span></a>
<a class="button _stretch _ar_stretch_hybrid w24">Hybrid<br/><span id="_b_changeAr_sw_key" class="smallcaps small darker"></span></a>
<a class="button _stretch _ar_stretch_conditional w24">Thin borders<br/><span id="_b_changeAr_sh_key" class="smallcaps small darker"></span></a>
</div>
</div>
<!--<div class="row">