tamius-han/ultrawidify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix alignment/offset handling, make it as player-invariant as possible

Browse Source
This commit is contained in:
Tamius Han 2024-06-06 00:51:34 +02:00
parent ae6575043e
commit 0f3bcaa8e6
1 changed files with 22 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/ext/lib/video-transform/Resizer.ts
View File

@ -682,42 +682,39 @@ class Resizer {
stretchFactors.yFactor *= autoHeightCompensationFactor; stretchFactors.yFactor *= autoHeightCompensationFactor;
} }
const offsetWidth = this.videoData.video.offsetWidth; // NOTE: transform: scale() is self-centering by default.
const offsetHeight = this.videoData.video.offsetHeight; // we only need to compensate if alignment is set to anything other than center center
// compensation is equal to half the difference between (zoomed) video size and player size.
const wdiff = this.videoData.player.dimensions.width - realVideoWidth;
const hdiff = this.videoData.player.dimensions.height - realVideoHeight;
const wdiffAfterZoom = realVideoWidth * stretchFactors.xFactor - this.videoData.player.dimensions.width;
const hdiffAfterZoom = realVideoHeight * stretchFactors.yFactor - this.videoData.player.dimensions.height;
const translate = { const translate = {
x: wdiff * 0.5, x: 0,
y: hdiff * 0.5, y: 0,
}; };
// NOTE: manual panning is probably broken now.
// TODO: FIXME:
// (argument could be made that manual panning was also broken before)
const alignXOffset = (realVideoWidth * stretchFactors.xFactor - this.videoData.player.dimensions.width) * 0.5;
const alignYOffset = (realVideoHeight * stretchFactors.yFactor - this.videoData.player.dimensions.height) * 0.5;
if (this.pan.relativeOffsetX || this.pan.relativeOffsetY) { if (this.pan.relativeOffsetX || this.pan.relativeOffsetY) {
// don't offset when video is smaller than player // don't offset when video is smaller than player
if(wdiffAfterZoom >= 0 || hdiffAfterZoom >= 0) { if(alignXOffset >= 0 || alignYOffset >= 0) {
translate.x += wdiffAfterZoom * this.pan.relativeOffsetX * this.zoom.scale; translate.x += alignXOffset * this.pan.relativeOffsetX * this.zoom.scale;
translate.y += hdiffAfterZoom * this.pan.relativeOffsetY * this.zoom.scale; translate.y += alignYOffset * this.pan.relativeOffsetY * this.zoom.scale;
} }
} else { } else {
// correct horizontal alignment according to the settings // correct horizontal alignment according to the settings
if (this.videoAlignment.x == VideoAlignmentType.Left) { if (this.videoAlignment.x == VideoAlignmentType.Left) {
translate.x += wdiffAfterZoom * 0.5; translate.x += alignXOffset;
} else if (this.videoAlignment.x == VideoAlignmentType.Right) { } else if (this.videoAlignment.x == VideoAlignmentType.Right) {
translate.x -= wdiffAfterZoom * 0.5; translate.x -= alignXOffset
} }
// correct vertical alignment according to the settings // correct vertical alignment according to the settings
if (this.videoAlignment.y == VideoAlignmentType.Top) { if (this.videoAlignment.y == VideoAlignmentType.Top) {
translate.y += hdiffAfterZoom * 0.5; translate.y += alignYOffset;
} else if (this.videoAlignment.y == VideoAlignmentType.Bottom) { } else if (this.videoAlignment.y == VideoAlignmentType.Bottom) {
translate.y -= hdiffAfterZoom * 0.5; translate.y -= alignYOffset;
} }
} }
@ -730,11 +727,12 @@ class Resizer {
'\nplayer dimensions: ', {w: this.videoData.player.dimensions.width, h: this.videoData.player.dimensions.height}, '\nplayer dimensions: ', {w: this.videoData.player.dimensions.width, h: this.videoData.player.dimensions.height},
'\nvideo dimensions: ', {w: this.videoData.video.offsetWidth, h: this.videoData.video.offsetHeight}, '\nvideo dimensions: ', {w: this.videoData.video.offsetWidth, h: this.videoData.video.offsetHeight},
'\nreal video dimensions:', {w: realVideoWidth, h: realVideoHeight}, '\nreal video dimensions:', {w: realVideoWidth, h: realVideoHeight},
'\nalign. base offset: ', {alignXOffset, alignYOffset},
'\nauto compensation: ', 'x', autoHeightCompensationFactor, '\nauto compensation: ', 'x', autoHeightCompensationFactor,
'\nstretch factors: ', stretchFactors, '\nstretch factors: ', stretchFactors,
'\npan & zoom: ', this.pan, this.zoom.scale, '\npan & zoom: ', this.pan, this.zoom.scale,
'\nwdiff, hdiff: ', wdiff, 'x', hdiff, // '\nwdiff, hdiff: ', wdiff, 'x', hdiff,
'\nwdiff, hdiffAfterZoom:', wdiffAfterZoom, 'x', hdiffAfterZoom, // '\nwdiff, hdiffAfterZoom:', wdiffAfterZoom, 'x', hdiffAfterZoom,
'\n\n---- data out ----\n', '\n\n---- data out ----\n',
'translate:', translate 'translate:', translate
); );
@ -860,13 +858,13 @@ class Resizer {
// important — guarantees video will be properly aligned // important — guarantees video will be properly aligned
// Note that position:absolute cannot be put here, otherwise old.reddit /w RES breaks — videos embedded // Note that position:absolute cannot be put here, otherwise old.reddit /w RES breaks — videos embedded
// from certain hosts will get a height: 0px. This is bad. // from certain hosts will get a height: 0px. This is bad.
styleArray.push("top: 0px !important; left: 0px !important; bottom: 0px !important; right: 0px;"); // styleArray.push("top: 0px !important; left: 0px !important; bottom: 0px !important; right: 0px;");
// important — some websites (cough reddit redesign cough) may impose some dumb max-width and max-height // important — some websites (cough reddit redesign cough) may impose some dumb max-width and max-height
// restrictions. If site has dumb shit like 'max-width: 100%' and 'max-height: 100vh' in their CSS, that // restrictions. If site has dumb shit like 'max-width: 100%' and 'max-height: 100vh' in their CSS, that
// shit will prevent us from applying desired crop. This means we need to tell websites to fuck off with // shit will prevent us from applying desired crop. This means we need to tell websites to fuck off with
// that crap. We know better. // that crap. We know better.
styleArray.push("max-width: none !important; max-height: none !important;"); // styleArray.push("max-width: none !important; max-height: none !important;");
} }
const styleString = `${this.buildStyleString(styleArray)}${extraStyleString || ''}`; // string returned by buildStyleString() should end with ; anyway const styleString = `${this.buildStyleString(styleArray)}${extraStyleString || ''}`; // string returned by buildStyleString() should end with ; anyway