diff --git a/.babelrc b/.babelrc index 1cccc7f..eb5b0c1 100644 --- a/.babelrc +++ b/.babelrc @@ -1,6 +1,6 @@ { "plugins": [ - "@babel/plugin-proposal-optional-chaining" + "@babel/plugin-proposal-class-properties" ], "presets": [ ["@babel/preset-env", { @@ -8,7 +8,7 @@ "targets": { "esmodules": true, }, - }] + }], ] } // { diff --git a/.gitignore b/.gitignore index 6578331..7a50513 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,7 @@ build/ *.pem *.kate-swp + +src/res/img/git-ignore/ + +test/debug-configs/ diff --git a/CHANGELOG.md b/CHANGELOG.md index 4626a93..538b8e4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,19 +1,32 @@ # Changelog -## v4.x + ### Plans for the future -* WebGL -* Native builds for Chromium Edge and Opera +* Native builds for Chromium Edge * Settings page looks ugly af right now. Maybe fix it some time later * other bug fixes -QoL improvements for me: +## v5.0 (planned major) -* logging: allow to enable logging at will and export said logs to a file + * WebGL autodetection + * in-player GUI + * Fix UI logger -### v4.5.0 +## v4.x (current major) + +### 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)). + + +### v4.5.0 (Current) * Under the hood: migrated from vue2 to vue3, because optional chaining in templates is too OP. * (On options page, section 'Action & shortcuts') Manual aspect ratio now supports entering custom ratios using '21/9' and '2.39:1' formats (as opposed to single number, e.g. '2.39') — [#121](https://github.com/tamius-han/ultrawidify/issues/121). @@ -22,7 +35,7 @@ QoL improvements for me: * The extension will now show a notification when autodetection can't run due to DRM * Videos on facebook and reddit no longer get shifted up and to the left for me (cropping most of the video off-screen), but I haven't been deliberately trying to fix that issue. If you experience that issue, please consider contacting me (via github or email) with a link to a problematic video. -### v4.4.10 (Current) +### v4.4.10 * Video alignment should now work on Twitch — [#109](https://github.com/tamius-han/ultrawidify/issues/109) * Videos should now align properly on Hulu while cropped — [#111](https://github.com/tamius-han/ultrawidify/issues/111) & via email diff --git a/README.md b/README.md index 2d3efae..a8d70fa 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,9 @@ ## Super TL;DR: I'm just looking for the install links, thanks -[Firefox](https://addons.mozilla.org/en/firefox/addon/ultrawidify/), [Chrome](https://chrome.google.com/webstore/detail/ultrawidify/dndehlekllfkaijdlokmmicgnlanfjbi), [Edge](https://microsoftedge.microsoft.com/addons/detail/lmpgpgechmkkkehkihpiddbcbgibokbi) (Chromium-based only) +[Firefox](https://addons.mozilla.org/en/firefox/addon/ultrawidify/), [Chrome](https://chrome.google.com/webstore/detail/ultrawidify/dndehlekllfkaijdlokmmicgnlanfjbi). + +**Microsoft Edge is not supported at this time, as Edge features some bugs that make it impossible for extension to work.** [Read more](https://github.com/tamius-han/ultrawidify/issues/117#issuecomment-747109695). There's also [nightly "builds"](https://stuff.lionsarch.tamius.net/ultrawidify/nightly/). @@ -235,7 +237,6 @@ However, I do plan on implementing this feature. Hopefully by the end of the yea - ## Plans for the future 1. Handle porting of extension settings between versions. @@ -254,7 +255,8 @@ However, I do plan on implementing this feature. Hopefully by the end of the yea [Latest stable for Chrome — download from Chrome store](https://chrome.google.com/webstore/detail/ultrawidify/dndehlekllfkaijdlokmmicgnlanfjbi) -[Latest stable for Edge — Download from Microsoft store](https://microsoftedge.microsoft.com/addons/detail/lmpgpgechmkkkehkihpiddbcbgibokbi) +Edge version is currently not available, as Edge has some bugs that prevent this extension from working correctly. [Read more](https://github.com/tamius-han/ultrawidify/issues/117#issuecomment-747109695) + ### Installing the current, github version @@ -268,7 +270,7 @@ Requirements: npm, node. 1. Clone this repo 2. run `npm install` -3. If using **Firefox,** run: `npm run watch:dev`. If using **Chrome,** run: `npm run watch-chrome:dev`. If using Edge, run: `npm run watch-edge:dev`. +3. If using **Firefox,** run: `npm run watch:dev`. If using **Chrome,** run: `npm run watch-chrome:dev`. TODO: see if #3 already loads the extension in FF diff --git a/package-lock.json b/package-lock.json index 28c0672..3da715c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -421,12 +421,111 @@ } }, "@babel/plugin-proposal-class-properties": { - "version": "7.10.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.10.4.tgz", - "integrity": "sha512-vhwkEROxzcHGNu2mzUC0OFFNXdZ4M23ib8aRRcJSsW8BZK9pQMD7QB7csl97NBbgGZO7ZyHUyKDnxzOaP4IrCg==", + "version": "7.12.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.12.1.tgz", + "integrity": "sha512-cKp3dlQsFsEs5CWKnN7BnSHOd0EOW8EKpEjkoz1pO2E5KzIDNV9Ros1b0CnmbVgAGXJubOYVBOGCT1OmJwOI7w==", "requires": { - "@babel/helper-create-class-features-plugin": "^7.10.4", + "@babel/helper-create-class-features-plugin": "^7.12.1", "@babel/helper-plugin-utils": "^7.10.4" + }, + "dependencies": { + "@babel/generator": { + "version": "7.12.11", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.12.11.tgz", + "integrity": "sha512-Ggg6WPOJtSi8yYQvLVjG8F/TlpWDlKx0OpS4Kt+xMQPs5OaGYWy+v1A+1TvxI6sAMGZpKWWoAQ1DaeQbImlItA==", + "requires": { + "@babel/types": "^7.12.11", + "jsesc": "^2.5.1", + "source-map": "^0.5.0" + } + }, + "@babel/helper-create-class-features-plugin": { + "version": "7.12.1", + "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.12.1.tgz", + "integrity": "sha512-hkL++rWeta/OVOBTRJc9a5Azh5mt5WgZUGAKMD8JM141YsE08K//bp1unBBieO6rUKkIPyUE0USQ30jAy3Sk1w==", + "requires": { + "@babel/helper-function-name": "^7.10.4", + "@babel/helper-member-expression-to-functions": "^7.12.1", + "@babel/helper-optimise-call-expression": "^7.10.4", + "@babel/helper-replace-supers": "^7.12.1", + "@babel/helper-split-export-declaration": "^7.10.4" + } + }, + "@babel/helper-member-expression-to-functions": { + "version": "7.12.7", + "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.12.7.tgz", + "integrity": "sha512-DCsuPyeWxeHgh1Dus7APn7iza42i/qXqiFPWyBDdOFtvS581JQePsc1F/nD+fHrcswhLlRc2UpYS1NwERxZhHw==", + "requires": { + "@babel/types": "^7.12.7" + } + }, + "@babel/helper-replace-supers": { + "version": "7.12.11", + "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.12.11.tgz", + "integrity": "sha512-q+w1cqmhL7R0FNzth/PLLp2N+scXEK/L2AHbXUyydxp828F4FEa5WcVoqui9vFRiHDQErj9Zof8azP32uGVTRA==", + "requires": { + "@babel/helper-member-expression-to-functions": "^7.12.7", + "@babel/helper-optimise-call-expression": "^7.12.10", + "@babel/traverse": "^7.12.10", + "@babel/types": "^7.12.11" + }, + "dependencies": { + "@babel/helper-optimise-call-expression": { + "version": "7.12.10", + "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.10.tgz", + "integrity": "sha512-4tpbU0SrSTjjt65UMWSrUOPZTsgvPgGG4S8QSTNHacKzpS51IVWGDj0yCwyeZND/i+LSN2g/O63jEXEWm49sYQ==", + "requires": { + "@babel/types": "^7.12.10" + } + } + } + }, + "@babel/helper-validator-identifier": { + "version": "7.12.11", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz", + "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==" + }, + "@babel/parser": { + "version": "7.12.11", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.11.tgz", + "integrity": "sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg==" + }, + "@babel/traverse": { + "version": "7.12.10", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.10.tgz", + "integrity": "sha512-6aEtf0IeRgbYWzta29lePeYSk+YAFIC3kyqESeft8o5CkFlYIMX+EQDDWEiAQ9LHOA3d0oHdgrSsID/CKqXJlg==", + "requires": { + "@babel/code-frame": "^7.10.4", + "@babel/generator": "^7.12.10", + "@babel/helper-function-name": "^7.10.4", + "@babel/helper-split-export-declaration": "^7.11.0", + "@babel/parser": "^7.12.10", + "@babel/types": "^7.12.10", + "debug": "^4.1.0", + "globals": "^11.1.0", + "lodash": "^4.17.19" + }, + "dependencies": { + "@babel/helper-split-export-declaration": { + "version": "7.12.11", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.11.tgz", + "integrity": "sha512-LsIVN8j48gHgwzfocYUSkO/hjYAOJqlpJEc7tGXcIm4cubjVUf8LGW6eWRyxEu7gA25q02p0rQUWoCI33HNS5g==", + "requires": { + "@babel/types": "^7.12.11" + } + } + } + }, + "@babel/types": { + "version": "7.12.11", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.11.tgz", + "integrity": "sha512-ukA9SQtKThINm++CX1CwmliMrE54J6nIYB5XTwL5f/CLFW9owfls+YSU8tVW15RQ2w+a3fSbPjC6HdQNtWZkiA==", + "requires": { + "@babel/helper-validator-identifier": "^7.12.11", + "lodash": "^4.17.19", + "to-fast-properties": "^2.0.0" + } + } } }, "@babel/plugin-proposal-dynamic-import": { @@ -9799,9 +9898,9 @@ } }, "lodash": { - "version": "4.17.19", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz", - "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==" + "version": "4.17.20", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz", + "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==" }, "lodash._reinterpolate": { "version": "3.0.0", diff --git a/package.json b/package.json index 41cd381..7da10e4 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "start": "npm run dev" }, "dependencies": { + "@babel/plugin-proposal-class-properties": "^7.12.1", "@types/core-js": "^2.5.3", "@types/es6-promise": "^3.3.0", "@vue/cli": "^4.5.9", diff --git a/src/common/js/ChromeShittinessMitigations.js b/src/common/js/ChromeShittinessMitigations.js new file mode 100644 index 0000000..a1d9ca9 --- /dev/null +++ b/src/common/js/ChromeShittinessMitigations.js @@ -0,0 +1,33 @@ +/** + * For some reason, Chrome really doesn't like when chrome.runtime + * methods are wrapped inside a ES6 proxy object. If 'port' is a + * ES6 Proxy of a Port object that `chrome.runtime.connect()` creates, + * then Chrome will do bullshits like `port.sendMessage` and + * `port.onMessage.addListener` crashing your Vue3 UI with bullshits + * excuses, e.g. + * + * | TypeError: Illegal invocation. Function must be called on + * | an object of type Port + * + * which is some grade A bullshit because Firefox can handle that just + * fine. + * + * There's two ways how I could handle this: + * * Find out how to get the original object from the proxy Vue3 + * creates, which would take time and ruin my xmass holiday, or + * * make a global object with a passive-aggressive name and ignore + * the very real possibility that there's prolly a reason Chrome + * does things in its own very special(tm) way, as if it had one + * extra chromosome over Firefox. + * + * Easy chhoice, really. + */ +export class ChromeShittinessMitigations { + static port = null; + + static setProperty(property, value) { + ChromeShittinessMitigations[property] = value; + } +} + +export default ChromeShittinessMitigations; \ No newline at end of file diff --git a/src/csui/PlayerUiComponent.vue b/src/csui/PlayerUiComponent.vue new file mode 100644 index 0000000..a88841d --- /dev/null +++ b/src/csui/PlayerUiComponent.vue @@ -0,0 +1,219 @@ + + + + + + \ No newline at end of file diff --git a/src/ext/conf/BrowserDetect.js b/src/ext/conf/BrowserDetect.js index 0c28caa..702ed1c 100644 --- a/src/ext/conf/BrowserDetect.js +++ b/src/ext/conf/BrowserDetect.js @@ -9,6 +9,7 @@ const BrowserDetect = { edge: process.env.BROWSER === 'edge', processEnvBrowser: process.env.BROWSER, processEnvChannel: process.env.CHANNEL, + isEdgeUA: () => /Edg\/(\.?[0-9]*)*$/.test(window.navigator.userAgent) } if (process.env.CHANNEL !== 'stable') { diff --git a/src/ext/conf/ExtConfPatches.js b/src/ext/conf/ExtConfPatches.js index 29c7228..f2dcef6 100644 --- a/src/ext/conf/ExtConfPatches.js +++ b/src/ext/conf/ExtConfPatches.js @@ -406,6 +406,18 @@ const ExtensionConfPatch = [ } } } + }, { + forVersion: '4.5.1', + updateFn: (userOptions, defaultOptions) => { + for (const site in userOptions.sites) { + try { + delete userOptions[sites].autoarPreventConditions + } catch (e) { + // doesn't matter if site doesn't have that option, + // everything is still fine + } + } + } } ]; diff --git a/src/ext/conf/ExtensionConf.js b/src/ext/conf/ExtensionConf.js index ee64f64..c208bb7 100644 --- a/src/ext/conf/ExtensionConf.js +++ b/src/ext/conf/ExtensionConf.js @@ -1032,26 +1032,13 @@ var ExtensionConf = { }, "www.netflix.com" : { mode: ExtensionMode.Enabled, - autoar: currentBrowser.firefox ? ExtensionMode.Enabled : ExtensionMode.Disabled, + autoar: ExtensionMode.Enabled, override: false, type: 'official', stretch: Stretch.Default, videoAlignment: VideoAlignment.Default, keyboardShortcutsEnabled: ExtensionMode.Default, arPersistence: true, // persist aspect ratio between different videos - autoarPreventConditions: { // prevents autoar on following conditions - videoStyleString: { // if video style string thing does anything of what follows - containsProperty: { // if video style string has any of these properties (listed as keys) - 'height': { // if 'height' property is present in style attribute, we prevent autoar from running - allowedValues: [ // unless attribute is equal to anything in here. Optional. - '100%' - ] - } - // 'width': true // this would prevent aard from running if