diff --git a/src/ext/lib/ar-detect/ArDetector.ts b/src/ext/lib/ar-detect/ArDetector.ts index bf6574b..cd40a41 100644 --- a/src/ext/lib/ar-detect/ArDetector.ts +++ b/src/ext/lib/ar-detect/ArDetector.ts @@ -390,6 +390,7 @@ class ArDetector { } private getVideoPlaybackState(): VideoPlaybackState { + try { if (this.video.ended) { return VideoPlaybackState.Ended; diff --git a/src/ext/lib/video-transform/Resizer.ts b/src/ext/lib/video-transform/Resizer.ts index ccd9f8f..01833bf 100644 --- a/src/ext/lib/video-transform/Resizer.ts +++ b/src/ext/lib/video-transform/Resizer.ts @@ -559,6 +559,36 @@ class Resizer { } } + computeCroppedAreas(stretchFactors) { + // PSA: offsetWidth and offsetHeight DO NOT INCLUDE + // ZOOM APPLIED THROUGH THE MAGIC OF CSS TRANSFORMS + const sourceWidth = this.conf.video.offsetWidth; + const sourceHeight = this.conf.video.offsetHeight; + + // this is the size of the video AFTER zooming was applied but does + // not account for cropping. It may be bigger than the player in + // both dimensions. It may be smaller than player in both dimensions + const postZoomWidth = sourceWidth * stretchFactors.xFactor; + const postZoomHeight = sourceHeight * stretchFactors.yFactor; + + // this is the size of the video after crop is applied + const displayedWidth = Math.min(this.conf.player.dimensions.width, postZoomWidth); + const displayedHeight = Math.min(this.conf.player.dimensions.height, postZoomHeight); + + // these two are cropped areas. Negative values mean additional + // letterboxing or pillarboxing. We assume center alignment for + // the time being - we will correct that later if need be + const croppedX = (postZoomWidth - displayedWidth) * 0.5; + const croppedY = (postZoomHeight - displayedHeight) * 0.5; + + return { + sourceVideoDimensions: {width: sourceWidth, height: sourceHeight}, + postZoomVideoDimensions: {width: postZoomWidth, height: postZoomHeight}, + displayedVideoDimensions: {width: displayedWidth, height: displayedHeight}, + crop: {left: croppedX, top: croppedY}, + }; + } + /** * Sometimes, sites (e.g. new reddit) will guarantee that video fits width of its container * and let the browser figure out the height through the magic of height:auto. This is bad, diff --git a/src/options/AutodetectionSettings.vue b/src/options/AutodetectionSettings.vue index 94915b7..3f878ec 100644 --- a/src/options/AutodetectionSettings.vue +++ b/src/options/AutodetectionSettings.vue @@ -28,7 +28,7 @@ How sensitive should aspect ratio detection be?
- Sensitive preset will allow the extension to correct aspect ratio even when letterbox isn't clearly defined. This + Sensitive preset will allow the extension to correct aspect ratio even when letterbox isn't clearly defined. This can result in aspect ratio detection correcting aspect ratio when it shouldn't. Accurate preset will take a more conservative approach to determining aspect ratio, correcting aspect ratio only when it's absolutely sure that the aspect ratio needs changing. This option results in fewer incorrect aspect ratio corrections, @@ -56,7 +56,7 @@
+

Autodetection settings in detail

- +
@@ -127,7 +127,7 @@
- +
Fallback mode
@@ -344,7 +344,7 @@ us from wasting precious time trying to detect aspect ratio on frames that are too dark for reliable aspect ratio detection.
Sample width, height: Sample size. Since we're checking every pixel in this sample, dimensions should be kept small.
Color variance treshold: In videos (such as movie trailers), any text that appears on the black background is usually of - a roughly the same color, while dark movie footage is not. This allows us to trigger autodetection on dark movie footage and + a roughly the same color, while dark movie footage is not. This allows us to trigger autodetection on dark movie footage and to not trigger autodetection when movie trailer flashes some text on black background. If color variance is greater than this value, blackframe detection will use 'lax' (lower) cummulative threshold to determine whether the frame is black or not. If color variance is less than this value, 'strict' (higher) cummulative threshold will be used to determine whether the frame is black or not instead.
@@ -419,7 +419,7 @@
Edge detection
Options in this section govern edge detection.
- Sample width — In a bid to detect "false" edges, we take two samples this many pixels wide near the point of our potential edge. One sample must be completely black, the other must contain a set + Sample width — In a bid to detect "false" edges, we take two samples this many pixels wide near the point of our potential edge. One sample must be completely black, the other must contain a set amount of non-black pixels.
Detection threshold — non-black sample mentioned above needs to contain at least this many non-black pixels.
Thickness quorum (per edge) — amount of samples that agree on the thincknes of the blackbar that we need in order to establish aspect ratio. Every edge needs to have at least this many. Values higher than {{~~(settings.active.arDetect.edgeDetection.singleSideConfirmationThreshold / 2)}} (quorum (total)/2) are pointless.
@@ -454,7 +454,7 @@ Thickness quorum (per edge):
-
@@ -464,7 +464,7 @@ Thicnkess quorum (total):
-
@@ -474,7 +474,7 @@ Logo threshold:
-
@@ -484,7 +484,7 @@ Ignore middle area:
-
@@ -494,7 +494,7 @@ Detect limit:
-
@@ -503,7 +503,7 @@
Guard line
- Quick test to determine whether aspect ratio hasn't changed. Test is performed by taking two samples on each edge of the image — + Quick test to determine whether aspect ratio hasn't changed. Test is performed by taking two samples on each edge of the image — one in the last row of the letterbox (blackbar), and one in the first row of the video (image).
Ignore edge margin: We don't take blackbar and image samples {width * this} many pixels from left and right edge.
Image threshold: If all pixels in blackbar are black and this fraction (0-1) of pixels in image are non-black, we presume that aspect ratio hasn't changed.
@@ -655,7 +655,7 @@ export default { // this.lastSettings = JSON.parse(JSON.stringify(this.settings.active)); const ths = this; this.$nextTick( () => { - ths.parsedSettings = JSON.stringify(ths.lastSettings, null, 2) + ths.parsedSettings = JSON.stringify(ths.lastSettings, null, 2) ths.lastSettings = JSON.parse(JSON.stringify(ths.settings.active)) }); }, diff --git a/src/options/GeneralSettings.vue b/src/options/GeneralSettings.vue index 2f4b9a2..3e15af9 100644 --- a/src/options/GeneralSettings.vue +++ b/src/options/GeneralSettings.vue @@ -210,7 +210,7 @@ export default { const blob = new Blob([JSON.stringify(this.settings.active)], {type: 'application/json'}); const fileUrl = URL.createObjectURL(blob); - + try { if (BrowserDetect.firefox) { // reminder — webextension-polyfill doesn't seem to work in vue! @@ -218,7 +218,7 @@ export default { browser.downloads.download({saveAs: true, filename: 'ultrawidify-settings.json', url: fileUrl}); } else if (BrowserDetect.anyChromium) { const ths = this; - + chrome.permissions.request( {permissions: ['downloads']}, (granted) => { @@ -227,7 +227,7 @@ export default { } else { ths.downloadPermissionError = true } - } + } ) } } catch (e) { @@ -240,7 +240,7 @@ export default { async importSettings($event) { let file, text, settingsObj; this.corruptedSettingsError = false; - + try { file = $event.target.files[0]; } catch (e) { @@ -258,7 +258,7 @@ export default { return; } - // validate settings + // validate settings for (const key in this.settings.default) { if (!settingsObj[key]) { console.error("corrupted settings!") diff --git a/src/options/SuperAdvancedSettings.vue b/src/options/SuperAdvancedSettings.vue index 111631f..0a05f2f 100644 --- a/src/options/SuperAdvancedSettings.vue +++ b/src/options/SuperAdvancedSettings.vue @@ -54,7 +54,7 @@ export default { }, computed: { // parsedSettings() { - // return + // return // } }, methods: { @@ -75,7 +75,7 @@ export default { // this.lastSettings = JSON.parse(JSON.stringify(this.settings.active)); const ths = this; this.$nextTick( () => { - ths.parsedSettings = JSON.stringify(ths.lastSettings, null, 2) + ths.parsedSettings = JSON.stringify(ths.lastSettings, null, 2) ths.lastSettings = JSON.parse(JSON.stringify(ths.settings.active)) }); }, diff --git a/src/options/common/ConfirmationPopup.vue b/src/options/common/ConfirmationPopup.vue index de41f18..fab13d7 100644 --- a/src/options/common/ConfirmationPopup.vue +++ b/src/options/common/ConfirmationPopup.vue @@ -21,7 +21,7 @@