2018-05-06 21:32:18 +02:00
|
|
|
// računa vrednosti za transform-scale (x, y)
|
|
|
|
// transform: scale(x,y) se uporablja za raztegovanje videa, ne pa za približevanje
|
|
|
|
// calculates values for transform scale(x, y)
|
|
|
|
// transform: scale(x,y) is used for stretching, not zooming.
|
|
|
|
|
|
|
|
|
|
|
|
class Stretcher {
|
2018-05-07 21:58:11 +02:00
|
|
|
// internal variables
|
2018-05-06 21:32:18 +02:00
|
|
|
|
|
|
|
|
2018-05-07 21:58:11 +02:00
|
|
|
// functions
|
2018-05-18 23:26:20 +02:00
|
|
|
constructor(videoData) {
|
|
|
|
this.conf = videoData;
|
2018-05-30 23:20:23 +02:00
|
|
|
this.mode = ExtensionConf.stretch.initialMode;
|
2018-05-07 21:58:11 +02:00
|
|
|
}
|
|
|
|
|
2018-05-24 22:49:32 +02:00
|
|
|
applyConditionalStretch(stretchFactors, actualAr){
|
2018-05-24 23:50:46 +02:00
|
|
|
var playerAr = this.conf.player.dimensions.width / this.conf.player.dimensions.height;
|
|
|
|
var videoAr = this.conf.video.videoWidth / this.conf.video.videoHeight;
|
2018-05-07 21:58:11 +02:00
|
|
|
|
2018-05-24 23:50:46 +02:00
|
|
|
if (! actualAr){
|
|
|
|
actualAr = playerAr;
|
|
|
|
}
|
2018-05-07 21:58:11 +02:00
|
|
|
|
2018-05-24 23:50:46 +02:00
|
|
|
var newWidth = this.conf.video.offsetWidth * stretchFactors.xFactor;
|
|
|
|
var newHeight = this.conf.video.offsetHeight * stretchFactors.yFactor;
|
2018-05-07 21:58:11 +02:00
|
|
|
|
2018-05-24 23:50:46 +02:00
|
|
|
var actualWidth, actualHeight;
|
2018-05-07 21:58:11 +02:00
|
|
|
|
2018-05-24 23:50:46 +02:00
|
|
|
// determine the dimensions of the video (sans black bars) after scaling
|
|
|
|
if(actualAr < videoAr){
|
|
|
|
actualHeight = newHeight;
|
|
|
|
actualWidth = newHeight * actualAr;
|
|
|
|
} else {
|
|
|
|
actualHeight = newWidth / actualAr;
|
|
|
|
actualWidth = newWidth;
|
2018-05-07 21:58:11 +02:00
|
|
|
}
|
|
|
|
|
2018-05-24 23:50:46 +02:00
|
|
|
var minW = this.conf.player.dimensions.width * (1 - ExtensionConf.stretch.conditionalDifferencePercent);
|
|
|
|
var maxW = this.conf.player.dimensions.width * (1 + ExtensionConf.stretch.conditionalDifferencePercent);
|
|
|
|
|
2018-05-27 21:41:08 +02:00
|
|
|
var minH = this.conf.player.dimensions.height * (1 - ExtensionConf.stretch.conditionalDifferencePercent);
|
|
|
|
var maxH = this.conf.player.dimensions.height * (1 + ExtensionConf.stretch.conditionalDifferencePercent);
|
2018-05-24 23:50:46 +02:00
|
|
|
|
|
|
|
if (actualWidth >= minW && actualWidth <= maxW) {
|
|
|
|
stretchFactors.xFactor *= this.conf.player.dimensions.width / actualWidth;
|
|
|
|
}
|
|
|
|
if (actualHeight >= minH && actualHeight <= maxH) {
|
|
|
|
stretchFactors.yFactor *= this.conf.player.dimensions.height / actualHeight;
|
2018-05-06 21:32:18 +02:00
|
|
|
}
|
2018-05-07 21:58:11 +02:00
|
|
|
}
|
|
|
|
|
2018-06-15 00:33:10 +02:00
|
|
|
calculateBasicStretch() {
|
2018-07-10 20:36:12 +02:00
|
|
|
// video.videoWidth in video.videoHeight predstavljata velikost datoteke.
|
|
|
|
// velikost video datoteke je lahko drugačna kot velikost <video> elementa.
|
|
|
|
// Zaradi tega lahko pride do te situacije:
|
|
|
|
// * Ločljivost videa je 850x480 (videoWidth & videoHeight)
|
|
|
|
// * Velikost <video> značke je 1920x720.
|
|
|
|
// Znotraj te video značke bo video prikazan v 1280x720 pravokotniku. Raztegovanje
|
|
|
|
// torej hočemo računati z uporabo vrednosti 1280 in 720. Teh vrednosti pa ne
|
|
|
|
// poznamo. Torej jih moramo računati.
|
|
|
|
//
|
|
|
|
//
|
|
|
|
// video.videoWidht and video.videoHeight describe the size of the video file.
|
|
|
|
// Size of the video file can be different than the size of the <video> tag.
|
|
|
|
// This can leave us with the following situation:
|
|
|
|
// * Video resolution is 850x480-ish (as reported by videoWidth and videoHeight)
|
|
|
|
// * Size of the <video> tag is 1920x720
|
|
|
|
// The video will be displayed in a 1280x720 rectangle inside that <video> tag.
|
|
|
|
// This means we want to calculate stretching using those values, but we don't know
|
|
|
|
// them. This means we have to calculate them.
|
|
|
|
|
|
|
|
const videoAr = this.conf.video.videoWidth / this.conf.video.videoHeight;
|
|
|
|
if (this.conf.player.dimensions.width > this.conf.player.dimensions.height * videoAr) {
|
|
|
|
return {
|
|
|
|
xFactor: this.conf.player.dimensions.width / (this.conf.player.dimensions.height * videoAr),
|
|
|
|
yFactor: 1
|
|
|
|
};
|
|
|
|
}
|
2018-06-15 00:33:10 +02:00
|
|
|
|
|
|
|
return {
|
2018-07-10 20:36:12 +02:00
|
|
|
xFactor: 1,
|
|
|
|
yFactor: this.conf.player.dimensions.height / (this.conf.player.dimensions.width / videoAr)
|
2018-06-15 00:33:10 +02:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2018-05-24 22:49:32 +02:00
|
|
|
calculateStretch(actualAr) {
|
|
|
|
var playerAr = this.conf.player.dimensions.width / this.conf.player.dimensions.height;
|
|
|
|
var videoAr = this.conf.video.videoWidth / this.conf.video.videoHeight;
|
2018-05-07 21:58:11 +02:00
|
|
|
|
2018-05-24 22:49:32 +02:00
|
|
|
if (! actualAr){
|
|
|
|
actualAr = playerAr;
|
2018-05-07 21:58:11 +02:00
|
|
|
}
|
|
|
|
|
2018-05-24 22:49:32 +02:00
|
|
|
var stretchFactors = {
|
|
|
|
xFactor: 1,
|
|
|
|
yFactor: 1
|
|
|
|
};
|
|
|
|
|
2018-05-29 00:36:14 +02:00
|
|
|
if(playerAr >= videoAr){
|
2018-05-28 23:56:44 +02:00
|
|
|
// player adds PILLARBOX
|
|
|
|
|
|
|
|
if(actualAr >= playerAr){
|
2018-05-29 00:36:14 +02:00
|
|
|
// VERIFIED WORKS
|
|
|
|
|
|
|
|
// actual > player > video — video is letterboxed
|
|
|
|
// solution: horizontal stretch according to difference between video and player AR
|
|
|
|
// vertical stretch according to difference between actual AR and player AR
|
|
|
|
stretchFactors.xFactor = playerAr / videoAr;
|
|
|
|
stretchFactors.yFactor = actualAr / videoAr;
|
2018-05-28 23:56:44 +02:00
|
|
|
|
2018-05-27 21:41:08 +02:00
|
|
|
if(Debug.debug){
|
|
|
|
console.log("[Stretcher.js::calculateStretch] stretching strategy 1")
|
|
|
|
}
|
2018-05-28 23:56:44 +02:00
|
|
|
} else if ( actualAr >= videoAr) {
|
2018-05-29 00:36:14 +02:00
|
|
|
// VERIFIED WORKS
|
|
|
|
|
|
|
|
// player > actual > video — video is still letterboxed
|
2018-05-28 23:56:44 +02:00
|
|
|
// we need vertical stretch to remove black bars in video
|
|
|
|
// we need horizontal stretch to make video fit width
|
2018-05-29 00:36:14 +02:00
|
|
|
stretchFactors.xFactor = playerAr / videoAr;
|
|
|
|
stretchFactors.yFactor = actualAr / videoAr;
|
2018-05-28 23:56:44 +02:00
|
|
|
|
2018-05-27 21:41:08 +02:00
|
|
|
if(Debug.debug){
|
|
|
|
console.log("[Stretcher.js::calculateStretch] stretching strategy 2")
|
|
|
|
}
|
2018-05-28 23:56:44 +02:00
|
|
|
} else {
|
2018-05-29 00:36:14 +02:00
|
|
|
// NEEDS CHECKING
|
2018-05-28 23:56:44 +02:00
|
|
|
// player > video > actual — double pillarbox
|
2018-06-27 23:55:37 +02:00
|
|
|
stretchFactors.xFactor = actualAr / playerAr;
|
2018-05-28 23:56:44 +02:00
|
|
|
stretchFactors.yFactor = 1;
|
|
|
|
|
|
|
|
if(Debug.debug){
|
|
|
|
console.log("[Stretcher.js::calculateStretch] stretching strategy 3")
|
|
|
|
}
|
2018-05-24 22:49:32 +02:00
|
|
|
}
|
|
|
|
} else {
|
2018-05-28 23:56:44 +02:00
|
|
|
// player adds LETTERBOX
|
|
|
|
|
|
|
|
if (actualAr < playerAr) {
|
2018-05-29 00:36:14 +02:00
|
|
|
// NEEDS CHECKING
|
|
|
|
|
2018-05-28 23:56:44 +02:00
|
|
|
// video > player > actual
|
2018-05-29 00:36:14 +02:00
|
|
|
// video is PILLARBOXED
|
2018-05-28 23:56:44 +02:00
|
|
|
stretchFactors.xFactor = actualAr / playerAr;
|
|
|
|
stretchFactors.yFactor = videoAr / playerAr;
|
|
|
|
|
2018-05-27 21:41:08 +02:00
|
|
|
if(Debug.debug){
|
2018-05-28 23:56:44 +02:00
|
|
|
console.log("[Stretcher.js::calculateStretch] stretching strategy 4")
|
|
|
|
}
|
|
|
|
} else if ( actualAr < videoAr ) {
|
2018-05-29 00:36:14 +02:00
|
|
|
// NEEDS CHECKING
|
|
|
|
|
2018-05-28 23:56:44 +02:00
|
|
|
// video > actual > player
|
|
|
|
// video is letterboxed by player
|
|
|
|
// actual is pillarboxed by video
|
|
|
|
stretchFactors.xFactor = actualAr / playerAr;
|
|
|
|
stretchFActors.yFactor = actualAr / playerAr;
|
|
|
|
|
|
|
|
if(Debug.debug){
|
|
|
|
console.log("[Stretcher.js::calculateStretch] stretching strategy 5")
|
2018-05-27 21:41:08 +02:00
|
|
|
}
|
2018-05-24 22:49:32 +02:00
|
|
|
} else {
|
2018-05-29 00:36:14 +02:00
|
|
|
// VERIFIED CORRECT
|
|
|
|
|
2018-05-28 23:56:44 +02:00
|
|
|
// actual > video > player
|
|
|
|
// actual fits width. Letterboxed by both.
|
|
|
|
stretchFactors.xFactor = 1;
|
|
|
|
stretchFactors.yFactor = actualAr / playerAr;
|
|
|
|
|
2018-05-27 21:41:08 +02:00
|
|
|
if(Debug.debug){
|
2018-05-28 23:56:44 +02:00
|
|
|
console.log("[Stretcher.js::calculateStretch] stretching strategy 6")
|
2018-05-27 21:41:08 +02:00
|
|
|
}
|
2018-05-24 22:49:32 +02:00
|
|
|
}
|
|
|
|
}
|
2018-05-28 23:56:44 +02:00
|
|
|
|
2018-05-24 22:49:32 +02:00
|
|
|
return stretchFactors;
|
2018-05-07 21:58:11 +02:00
|
|
|
}
|
2018-05-06 21:32:18 +02:00
|
|
|
}
|