Merge branch 'master' into feature/player-ui

This commit is contained in:
Tamius Han 2021-01-20 22:58:40 +01:00
commit f8c774700e
19 changed files with 185 additions and 104 deletions

View File

@ -16,16 +16,23 @@
## v4.x (current major)
### v4.5.2
* Fixed the issue where videos would sometimes get misaligned while using hybrid stretch, except for real this time. ([#125](https://github.com/tamius-han/ultrawidify/issues/125))
* Improved DRM detection (the 'autodetection cannot work on this site' popup should now no longer show up on the sites where autodetection _can_ work)
### v4.5.1
* Fixed the misalignment issue on netflix ... hopefully.
* 'Site settings' tab should now work in Chrome as well ([#126](https://github.com/tamius-han/ultrawidify/issues/126))
* Popup interface now refreshes properly ([#127](https://github.com/tamius-han/ultrawidify/issues/127))
* Videos should now be scaled correctly when the display is narrower than video's native aspect ratio ([#118](https://github.com/tamius-han/ultrawidify/issues/118))
* Edge users using CWS version of the extension get a very aggressive warning when trying to use the extension with Edge
* Fullscreen videos on streamable are aligned correctly ([#116](https://github.com/tamius-han/ultrawidify/issues/118)).
* **[4.5.1.1]** Streamable fix broke old.reddit + RES on embeds from v.redd.it and streamable.com. We're now using an alternative implementation. ([#128](https://github.com/tamius-han/ultrawidify/issues/128))
* **[4.5.1.2]** Fixed the issue where videos would sometimes get misaligned while using hybrid stretch. ([#125](https://github.com/tamius-han/ultrawidify/issues/125))
* **[4.5.1.3]** Added fix for disney plus
* **[4.5.1.3]** Microsoft Edge has fixed the bugs that prevented the extension from working properly. Popup should no longer be shown.
### v4.5.0 (Current)

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "ultrawidify",
"version": "4.5.1",
"version": "4.5.2",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

View File

@ -1,11 +1,11 @@
{
"name": "ultrawidify",
"version": "4.5.1",
"version": "4.5.2",
"description": "Aspect ratio fixer for youtube and other sites, with automatic aspect ratio detection. Supports ultrawide and other ratios.",
"author": "Tamius Han <tamius.han@gmail.com>",
"scripts": {
"build": "npm run pre-build; cross-env NODE_ENV=production BROWSER=firefox CHANNEL=stable webpack --hide-modules",
"build-all": "mkdir -p ./build/old; npm run pre-build; rm ./dist-zip/uw-amo-source.zip; mv -f ./dist-zip/*.zip ./build/old; npm run build; node scripts/build-zip.js ff; npm run build-chrome; node scripts/build-zip.js chrome; ./scripts/prepare-amo-source.sh",
"build-all": "mkdir -p ./build/old; npm run pre-build; rm ./dist-zip/uw-amo-source.zip; mv -f ./dist-zip/*.zip ./build/old; npm run build; node scripts/build-zip.js ff; npm run build-chrome; node scripts/build-zip.js chrome; npm run build-edge; node scripts/build-zip.js edge; ./scripts/prepare-amo-source.sh",
"build-chrome": "cross-env NODE_ENV=production BROWSER=chrome CHANNEL=stable webpack --hide-modules",
"build-chrome:dev": "cross-env NODE_ENV=development BROWSER=chrome webpack --hide-modules",
"build-edge": "cross-env NODE_ENV=production BROWSER=edge CHANNEL=stable webpack --hide-modules",

View File

@ -6,6 +6,19 @@ var AspectRatio = Object.freeze({
FitHeight: 3, // legacy/dynamic: fit to height
Fixed: 4, // pre-determined aspect ratio
Manual: 5, // ratio achieved by zooming in/zooming out
toString: (ar) => {
switch (ar) {
case -1: return 'Initial';
case 0: return 'Reset';
case 1: return 'Automatic';
case 2: return 'FitWidth';
case 3: return 'FitHeight';
case 4: return 'Fixed';
case 5: return 'Manual';
default: return '<not an valid enum value>'
}
}
});
export default AspectRatio;

View File

@ -61,6 +61,9 @@ export default {
console.log("store:", this.$store, this);
},
methods: {
getUrl(url) {
return BrowserDetect.getURL(url);
},
}
}
</script>

View File

@ -4,16 +4,28 @@ if (process.env.CHANNEL !== 'stable') {
console.info('Loaded BrowserDetect');
}
function detectEdgeUA() {
return /Edg\/(\.?[0-9]*)*$/.test(window.navigator.userAgent);
}
function getBrowserObj() {
return process.env.BROWSER === 'firefox' ? browser : chrome;
}
function getURL(url) {
return process.env.BROWSER === 'firefox' ? browser.runtime.getURL(url) : chrome.runtime.getURL(url);
}
const BrowserDetect = {
firefox: process.env.BROWSER === 'firefox',
anyChromium: process.env.BROWSER !== 'firefox',
chrome: process.env.BROWSER === 'chrome',
edge: process.env.BROWSER === 'edge',
processEnvBrowser: process.env.BROWSER,
processEnvChannel: process.env.CHANNEL,
isEdgeUA: () => /Edg\/(\.?[0-9]*)*$/.test(window.navigator.userAgent),
getBrowserObj: () => { return process.env.BROWSER === 'firefox' ? browser : chrome; },
getURL: (url) => { console.log('getting file:', url); console.log(process.env.BROWSER === 'firefox' ? browser.runtime.getURL(url) : chrome.runtime.getURL(url)); return process.env.BROWSER === 'firefox' ? browser.runtime.getURL(url) : chrome.runtime.getURL(url); },
isEdgeUA: detectEdgeUA(),
browserObj: getBrowserObj(),
getURL: (url) => getURL(url),
}
if (process.env.CHANNEL !== 'stable') {

View File

@ -436,6 +436,15 @@ const ExtensionConfPatch = [
userOptions.sites['streamable.com'].css = '.player {text-align: left}'
};
}
}, {
forVersion: '4.5.1.3',
updateFn: (userOptions, defaultOptions) => {
try {
userOptions.sites['wwww.disneyplus.com']['css'] = ".hudson-container {\n height: 100%;\n}";
} catch (e) {
// do nothing if disney+ is missing
}
}
}
];

View File

@ -1066,7 +1066,8 @@ var ExtensionConf = {
"useRelativeAncestor": false,
"playerNodeCss": ""
}
}
},
css: ".hudson-container { height: 100%; }",
},
"www.twitch.tv": {
mode: ExtensionMode.Enabled,
@ -1145,13 +1146,6 @@ var ExtensionConf = {
},
css: 'video {\n width: 100% !important;\n height: 100% !important;\n}',
},
"www.disneyplus.com": {
DOM: {
player: {
periodicallyRefreshPlayerElement: true,
}
}
},
"imgur.com": {
mode: -1,
autoar: -1,

View File

@ -474,19 +474,19 @@ class ArDetector {
// poglejmo, če se je razmerje stranic spremenilo
// check if aspect ratio is changed:
var lastAr = this.conf.resizer.getLastAr();
let lastAr = this.conf.resizer.getLastAr();
if (lastAr.type === AspectRatio.Automatic && lastAr.ratio !== null && lastAr.ratio !== undefined){
// spremembo lahko zavrnemo samo, če uporabljamo avtomatski način delovanja in če smo razmerje stranic
// že nastavili.
//
// we can only deny aspect ratio changes if we use automatic mode and if aspect ratio was set from here.
var arDiff = trueAr - lastAr.ar;
let arDiff = trueAr - lastAr.ar;
if (arDiff < 0)
arDiff = -arDiff;
var arDiff_percent = arDiff / trueAr;
const arDiff_percent = arDiff / trueAr;
// ali je sprememba v mejah dovoljenega? Če da -> fertik
// is ar variance within acceptable levels? If yes -> we done
@ -526,6 +526,13 @@ class ArDetector {
* completely opaque (i.e. have value of 255))
*/
hasDRM() {
// oh btw, there's one exception. There is this brief period between the point
// when metadata (video dimensions) have loaded and the moment the video starts
// playing where ctx.drawImage() will draw a transparent black square regardless
// of whether the video is actually DRM-protected or not.
if (! this.conf.hasVideoStartedPlaying()) {
return false;
}
return this.blackframeContext.getImageData(0,0,1,1).data[3] === 0;
}
@ -552,27 +559,25 @@ class ArDetector {
// special browsers require special tests
if (this.hasDRM()) {
this.fallbackMode = false;
throw 'Video is protected by DRM. Autodetection cannot run here.';
throw 'VIDEO_DRM_PROTECTED';
}
this.fallbackMode = false;
} catch (e) {
this.logger.log('error', 'arDetect', `%c[ArDetect::frameCheck] <@${this.arid}> %c[ArDetect::frameCheck] can't draw image on canvas. ${this.canDoFallbackMode ? 'Trying canvas.drawWindow instead' : 'Doing nothing as browser doesn\'t support fallback mode.'}`, "color:#000; backgroud:#f51;", e);
// nothing to see here, really, if fallback mode isn't supported by browser
if (!this.drmNotificationShown) {
this.drmNotificationShown = true;
// if we detect Edge, we'll throw the aggressive popup
this.conf.player.showEdgeNotification();
this.conf.player.showNotification('AARD_DRM');
this.conf.resizer.setAr({type: AspectRatio.Reset});
return;
}
// in case of DRM errors, we need to prevent the execution to reach the aspec
// ratio setting part of this function
if (e === 'Video is protected by DRM. Autodetection cannot run here.') {
// ratio setting part of this function. For the time being, we're only stopping
// in case we encounter DRM error in Chrome. Firefox has fallback mode and generates
// different error, so that goes.
if (e === 'VIDEO_DRM_PROTECTED') {
// nothing to see here, really, if fallback mode isn't supported by browser
if (!this.drmNotificationShown) {
this.drmNotificationShown = true;
this.conf.player.showNotification('AARD_DRM');
this.conf.resizer.setAr({type: AspectRatio.Reset});
}
return;
}

View File

@ -11,7 +11,7 @@ class CommsClient {
if (BrowserDetect.firefox) {
this.port = browser.runtime.connect({name: name});
} else if (BrowserDetect.chrome) {
} else if (BrowserDetect.anyChromium) {
this.port = chrome.runtime.connect({name: name});
}

View File

@ -489,9 +489,9 @@ class PlayerData {
* NOTE: this method needs to be deleted once Edge gets its shit together.
*/
showEdgeNotification() {
if (BrowserDetect.isEdgeUA() && !this.settings.active.mutedNotifications?.browserSpecific?.edge?.brokenDrm?.[window.hostname]) {
this.ui = new PlayerUi(this.element, this.settings);
}
// if (BrowserDetect.isEdgeUA && !this.settings.active.mutedNotifications?.browserSpecific?.edge?.brokenDrm?.[window.hostname]) {
// this.ui = new PlayerUi(this.element, this.settings);
// }
}
}

View File

@ -33,6 +33,9 @@ class VideoData {
async onVideoLoaded() {
if (!this.videoLoaded) {
if (!this.video.videoWidth || !this.video.videoHeight) {
return; // onVideoLoaded is a lie in this case
}
this.logger.log('info', 'init', '%c[VideoData::onVideoLoaded] ——————————— Initiating phase two of videoData setup ———————————', 'color: #0f9');
this.videoLoaded = true;
@ -48,10 +51,13 @@ class VideoData {
this.restoreCrop();
this.videoDimensionsLoaded = true;
}
}
videoUnloaded() {
this.videoLoaded = false;
}
async injectBaseCss() {
try {
await this.pageInfo.injectCss(`
@ -71,25 +77,43 @@ class VideoData {
this.video.classList.remove('uw-ultrawidify-base-wide-screen');
}
//#region <video> event handlers
onLoadedData() {
this.logger.log('info', 'init', '[VideoData::ctor->video.onloadeddata] Video fired event "loaded data!"');
this.onVideoLoaded();
}
onLoadedMetadata() {
this.logger.log('info', 'init', '[VideoData::ctor->video.onloadedmetadata] Video fired event "loaded metadata!"');
this.onVideoLoaded();
}
onTimeUpdate() {
this.onVideoLoaded();
}
//#endregion
//#region lifecycle-ish
/**
* Injects base CSS and sets up handlers for <video> tag events
*/
async setupStageOne() {
this.logger.log('info', 'init', '%c[VideoData::setupStageOne] ——————————— Starting setup stage one! ———————————', 'color: #0f9');
// ensure base css is loaded before doing anything
this.injectBaseCss();
// this is in case extension loads before the video
this.video.addEventListener('loadeddata', () => {
this.logger.log('info', 'init', '[VideoData::ctor->video.onloadeddata] Video fired event "loaded data!"');
this.onVideoLoaded();
});
this.video.addEventListener('loadeddata', this.onLoadedData.bind(this));
this.video.addEventListener('loadedmetadata', this.onLoadedMetadata.bind(this));
// this one is in case extension loads after the video is loaded
this.video.addEventListener('timeupdate', () => {
this.onVideoLoaded();
});
this.video.addEventListener('timeupdate', this.onTimeUpdate.bind(this));
this.logger.log('info', 'init', '%c[VideoData::setupStageOne] ——————————— Setup stage one complete! ———————————', 'color: #0f9');
}
/**
* Launches the extension for a given video (after the video element is defined well enough
* for our standards)
*/
async setupStageTwo() {
// POZOR: VRSTNI RED JE POMEMBEN (arDetect mora bit zadnji)
// NOTE: ORDERING OF OBJ INITIALIZATIONS IS IMPORTANT (arDetect needs to go last)
@ -158,6 +182,52 @@ class VideoData {
}
}
/**
* cleans up handlers and stuff when the show is over
*/
destroy() {
this.logger.log('info', ['debug', 'init'], `[VideoData::destroy] <vdid:${this.vdid}> received destroy command`);
if (this.video) {
this.video.classList.remove(this.userCssClassName);
this.video.classList.remove('uw-ultrawidify-base-wide-screen');
this.video.removeEventListener('onloadeddata', this.onLoadedData);
this.video.removeEventListener('onloadedmetadata', this.onLoadedMetadata);
this.video.removeEventListener('ontimeupdate', this.onTimeUpdate);
}
this.pause();
this.destroyed = true;
try {
this.arDetector.stop();
this.arDetector.destroy();
} catch (e) {}
this.arDetector = undefined;
try {
this.resizer.destroy();
} catch (e) {}
this.resizer = undefined;
try {
this.player.destroy();
} catch (e) {}
try {
this.observer.disconnect();
} catch (e) {}
this.player = undefined;
this.video = undefined;
}
//#endregion
//#region video status
isVideoPlaying() {
return this.video && !!(this.video.currentTime > 0 && !this.video.paused && !this.video.ended && this.video.readyState > 2);
}
hasVideoStartedPlaying() {
return this.video && this.video.currentTime > 0;
}
//#endregion
restoreCrop() {
this.logger.log('info', 'debug', '[VideoData::restoreCrop] Attempting to reset aspect ratio.')
@ -378,35 +448,6 @@ class VideoData {
}
}
destroy() {
this.logger.log('info', ['debug', 'init'], `[VideoData::destroy] <vdid:${this.vdid}> received destroy command`);
if (this.video) {
this.video.classList.remove(this.userCssClassName);
this.video.classList.remove('uw-ultrawidify-base-wide-screen');
}
this.pause();
this.destroyed = true;
try {
this.arDetector.stop();
this.arDetector.destroy();
} catch (e) {}
this.arDetector = undefined;
try {
this.resizer.destroy();
} catch (e) {}
this.resizer = undefined;
try {
this.player.destroy();
} catch (e) {}
try {
this.observer.disconnect();
} catch (e) {}
this.player = undefined;
this.video = undefined;
}
pause(){
this.paused = true;
if(this.arDetector){

View File

@ -146,7 +146,8 @@ class Resizer {
}
if (!this.video.videoWidth || !this.video.videoHeight) {
this.logger.log('warning', 'debug', '[Resizer::setAr] <rid:'+this.resizerId+'> Video has no width or no height. This is not allowed. Aspect ratio will not be set.');
this.logger.log('warning', 'debug', '[Resizer::setAr] <rid:'+this.resizerId+'> Video has no width or no height. This is not allowed. Aspect ratio will not be set, and videoData will be uninitialized.');
this.conf.videoUnloaded();
}
this.logger.log('info', 'debug', '[Resizer::setAr] <rid:'+this.resizerId+'> trying to set ar. New ar:', ar)

View File

@ -69,7 +69,7 @@ class UWServer {
if(BrowserDetect.firefox) {
browser.tabs.onActivated.addListener((m) => {this.onTabSwitched(m)});
} else if (BrowserDetect.chrome) {
} else if (BrowserDetect.anyChromium) {
chrome.tabs.onActivated.addListener((m) => {this.onTabSwitched(m)});
}
}
@ -84,7 +84,7 @@ class UWServer {
try {
if (BrowserDetect.firefox || BrowserDetect.edge) {
browser.tabs.insertCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
} else if (BrowserDetect.chrome) {
} else if (BrowserDetect.anyChromium) {
chrome.tabs.insertCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
}
} catch (e) {
@ -95,7 +95,7 @@ class UWServer {
try {
if (BrowserDetect.firefox || BrowserDetect.edge) {
browser.tabs.removeCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
} else if (BrowserDetect.chrome) {
} else if (BrowserDetect.anyChromium) {
// this doesn't work currently, but hopefully chrome will get this feature in the future
chrome.tabs.removeCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
}
@ -141,7 +141,7 @@ class UWServer {
let tab;
if (BrowserDetect.firefox) {
tab = await browser.tabs.get(this.currentTabId);
} else if (BrowserDetect.chrome) {
} else if (BrowserDetect.anyChromium) {
tab = await this._promisifyTabsGet(chrome, this.currentTabId);
}
@ -223,7 +223,7 @@ class UWServer {
file: '/ext/uw-ui.js',
allFrames: true,
});
} else if (BrowserDetect.chrome) {
} else if (BrowserDetect.anyChromium) {
await new Promise( resolve =>
chrome.tabs.executeScript({
file: '/ext/uw-ui.js',
@ -269,7 +269,7 @@ class UWServer {
async getCurrentTab() {
if (BrowserDetect.firefox) {
return (await browser.tabs.query({active: true, currentWindow: true}))[0];
} else if (BrowserDetect.chrome) {
} else if (BrowserDetect.anyChromium) {
return new Promise((resolve, reject) => chrome.tabs.query({active: true, currentWindow: true}, (x) => resolve(x[0])));
}
}

View File

@ -2,7 +2,7 @@
"manifest_version": 2,
"name": "Ultrawidify",
"description": "Removes black bars on ultrawide videos and offers advanced options to fix aspect ratio.",
"version": "4.5.1.2",
"version": "4.5.2",
"applications": {
"gecko": {
"id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}"

View File

@ -216,7 +216,7 @@ export default {
// reminder webextension-polyfill doesn't seem to work in vue!
await browser.permissions.request({permissions: ['downloads']});
browser.downloads.download({saveAs: true, filename: 'ultrawidify-settings.json', url: fileUrl});
} else if (BrowserDetect.chrome) {
} else if (BrowserDetect.anyChromium) {
const ths = this;
chrome.permissions.request(

View File

@ -20,6 +20,17 @@
Build channel: {{BrowserDetect.processEnvChannel}}
</div>
</div>
<div v-if="BrowserDetect.isEdgeUA" style="margin: 2px 12px; border: 1px solid #fa6; color: #fa6" class="flex flex-row flex-center">
<div class="flex-nogrow flex-nosrhink flex flex-center" style="font-size: 2em">
<Icon icon="exclamation-triangle"></Icon>
</div>
<div class="flex-grow padding-right: 1em; line-height: 1">
<small>
<b>NOTE:</b> please ensure your Windows and Edge have the latest updates in order for this extension to work on DRM-protected sites.
If your Windows and Edge are not up to date, videos on sites like Netflix, Hulu, and Disney+ may not be aligned and cropped correctly.
</small>
</div>
</div>
<div
v-if="narrowPopup"
class="w100 show-more flex flex-row flex-center flex-cross-center menu-button"
@ -261,7 +272,7 @@ export default {
cmd: 'unmark-player',
forwardToAll: true,
});
if (BrowserDetect.chrome) {
if (BrowserDetect.anyChromium) {
chrome.extension.getBackgroundPage().sendUnmarkPlayer({
cmd: 'unmark-player',
forwardToAll: true,

View File

@ -2,28 +2,13 @@
<div>
<h2>What's new</h2>
<p>Full changelog for older versions <a href="https://github.com/tamius-han/ultrawidify/blob/master/CHANGELOG.md">is available here</a>.</p>
<p class="label">4.5.1</p>
<p class="label">4.5.2</p>
<ul>
<li>Fixed the misalignment issue on netflix ... hopefully.</li>
<li>
'Site settings' tab should now work in Chrome as well (<a href="https://github.com/tamius-han/ultrawidify/issues/126">#126</a>)
Fixed the issue where videos would sometimes get misaligned while using hybrid stretch, except for real this time. (<a href="https://github.com/tamius-han/ultrawidify/issues/125">#125</a>)
</li>
<li>
Popup interface now refreshes properly (<a href="https://github.com/tamius-han/ultrawidify/issues/127">#127</a>)
</li>
<li>
Videos should now be scaled correctly when the display is narrower than video's native aspect ratio (<a href="https://github.com/tamius-han/ultrawidify/issues/118">#118</a>)
</li>
<li>
Fullscreen videos on streamable are aligned correctly (<a href="https://github.com/tamius-han/ultrawidify/issues/118">#116</a>). Note that while this fix hasn't broken any sites I have access to and know of,
there is a small possibility that this bugfix may break something somewhere. If this happens on a site you use, please notify me via github, email or PM me on reddit.
</li>
<li>
Edge users using CWS version of the extension get a very aggressive warning when trying to use the extension with Edge
</li>
<li>
<b>[4.5.1.1]</b> Streamable fix broke old.reddit + RES on embeds from v.redd.it and streamable.com. We're now using an alternative implementation. (<a href="https://github.com/tamius-han/ultrawidify/issues/128">#128</a>)
<b>[4.5.1.2]</b> Fixed the issue where videos would sometimes get misaligned while using hybrid stretch. (<a href="https://github.com/tamius-han/ultrawidify/issues/125">#125</a>)
Improved DRM detection (the 'autodetection cannot work on this site' popup should now no longer show up on the sites where autodetection <i>can</i> work)
</li>
</ul>
</div>

View File

@ -121,7 +121,7 @@ const config = {
.substr(2) // YYYY -> YY
.replace('-', '') // YY-MM-DD -> YYMM-DD
.replace('-', '.') // YYMM-DD -> YYMM.DD
}.${process.env.BUILD_NUMBER}`;
}.${process.env.BUILD_NUMBER ?? 0}`;
jsonContent.browser_action.default_title = "Ultrawidify Nightly";
// because we don't want web-ext to submit this as proper release
@ -137,7 +137,7 @@ const config = {
.substr(2) // YYYY -> YY
.replace('-', '') // YY-MM-DD -> YYMM-DD
.replace('-', '.') // YYMM-DD -> YYMM.DD
}.${process.env.BUILD_NUMBER}`;
}.${process.env.BUILD_NUMBER ?? 0}`;
jsonContent.browser_action.default_title = "Ultrawidify Testing";
// because we don't want web-ext to submit this as proper release