diff --git a/CHANGELOG.md b/CHANGELOG.md index ac7fefb..6516863 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,19 @@ * Settings page looks ugly af right now. Maybe fix it some time later -### v4.2.1 (current) +### v4.2.3 / 4.2.3.1 + +* Fixed twitchy behaviour on Twitch, Facebook and Twatter. Here's a [blog post](https://stuff.tamius.net/sacred-texts/2019/08/24/ultrawidify-the-twitchy-twitch-problem/) that covers the issue in more detail. +* Cropping now uses user styles (as opposed to modifying element's style attribute) +* Fixed the issue where one-pixel letterbox would result in constant aspect ratio corrections. +* Started using mutation observers to watch for anything modifying the size of our video. +* **[4.2.3.1]** fixed some bugs in popup. + +### v4.2.2 +* Fixed alignment issues for reddit on videos from v.reddit +* Some people reported issues with inconsistent video alignment on youtube. While I've not been able to make that bug happen to me, (which means I haven't been able to fix it either), reports describe behaviour similar to what was going on with Iridium. Examining the Iridium issue revealed an issue that could be potentially blamed for this behaviour. That issue was fixed. Since I've never been able to make this problem happen to me, I'm not being able to verify whether that issue is gone. If you're still experiencing issues with inconsistent video alignment, please contact me via github, reddit or email. See 'Report a problem' tab for more details. + +### v4.2.1 * Fixed bug where custom CSS didn't get applied to pages ### v4.2.0 diff --git a/src/ext/lib/ActionHandler.js b/src/ext/lib/ActionHandler.js index 44cb9bd..02d3fca 100644 --- a/src/ext/lib/ActionHandler.js +++ b/src/ext/lib/ActionHandler.js @@ -120,6 +120,12 @@ class ActionHandler { } } + unregisterHandleMouse(videoData) { + var ths = this; + if (videoData.player && videoData.player.element) { + videoData.player.element.removeEventListener('mousemove', (event) => ths.handleMouseMove(event, videoData)); + } + } setKeyboardLocal(state) { if (state === ExtensionMode.Enabled) { diff --git a/src/ext/lib/Settings.js b/src/ext/lib/Settings.js index d1c724d..5f0e904 100644 --- a/src/ext/lib/Settings.js +++ b/src/ext/lib/Settings.js @@ -14,6 +14,7 @@ class Settings { constructor(activeSettings, updateCallback) { this.active = activeSettings ? activeSettings : undefined; this.default = ExtensionConf; + this.default['version'] = this.getExtensionVersion(); this.useSync = false; this.version = undefined; this.updateCallback = updateCallback; @@ -63,11 +64,26 @@ class Settings { } } + getExtensionVersion() { + if (currentBrowser.firefox) { + return browser.runtime.getManifest().version; + } else if (currentBrowser.chrome) { + return chrome.runtime.getManifest().version; + } else if (currentBrowser.edge) { + return browser.runtime.getManifest().version; + } + } + async init() { const settings = await this.get(); + const oldVersion = settings.version; + const currentVersion = this.getExtensionVersion(); if(Debug.debug) { - console.log("[Settings::init] Configuration fetched from storage:", settings); + console.log("[Settings::init] Configuration fetched from storage:", settings, + "\nlast saved with:", settings.version, + "\ncurrent version:", currentVersion + ); if (Debug.flushStoredSettings) { console.log("%c[Settings::init] Debug.flushStoredSettings is true. Using default settings", "background: #d00; color: #ffd"); @@ -96,18 +112,17 @@ class Settings { // if there's settings, set saved object as active settings this.active = settings; - // check if extension has been updated. If not, return settings as they were retreived - if (currentBrowser.firefox) { - this.version = browser.runtime.getManifest().version; - } else if (currentBrowser.chrome) { - this.version = chrome.runtime.getManifest().version; - } else if (currentBrowser.edge) { - this.version = browser.runtime.getManifest().version; + // from some point to 4.2.3.1, settings version wasn't saved. Fix that. + if (!settings.version) { + this.active.version = currentVersion; } - if(settings.version === this.version) { + // check if extension has been updated. If not, return settings as they were retreived + + + if(oldVersion === currentVersion) { if(Debug.debug) { - console.log("[Settings::init] extension was saved with current version of ultrawidify (", this.version, "). Returning object as-is."); + console.log("[Settings::init] extension was saved with current version of ultrawidify. Returning object as-is."); } return this.active; @@ -131,6 +146,8 @@ class Settings { // set 'whatsNewChecked' flag to false when updating this.active.whatsNewChecked = false; + // update settings version to current + this.active.version = currentVersion; this.set(this.active); return this.active; diff --git a/src/ext/lib/video-data/PageInfo.js b/src/ext/lib/video-data/PageInfo.js index fc2726c..5f20423 100644 --- a/src/ext/lib/video-data/PageInfo.js +++ b/src/ext/lib/video-data/PageInfo.js @@ -71,8 +71,12 @@ class PageInfo { clearTimeout(this.rescanTimer); } for (var video of this.videos) { - this.comms.unregisterVideo(video.id) - video.destroy(); + try { + this.comms.unregisterVideo(video.id) + video.destroy(); + } catch (e) { + console.log("unabel to destroy video!", e) + } } try { diff --git a/src/ext/lib/video-data/VideoData.js b/src/ext/lib/video-data/VideoData.js index adf3bfb..a45e240 100644 --- a/src/ext/lib/video-data/VideoData.js +++ b/src/ext/lib/video-data/VideoData.js @@ -52,12 +52,16 @@ class VideoData { } onVideoDimensionsChanged(mutationList, observer) { + if (!mutationList || this.video === undefined) { // something's wrong + if (observer && this.video) { + observer.disconnect(); + } + return; + } for (let mutation of mutationList) { if (mutation.type === 'attributes') { - console.log("video attributes were changed:", mutation) if (mutation.attributeName === 'class') { if (!this.video.classList.contains(this.userCssClassName)) { - console.log("class changed!") // force the page to include our class in classlist, if the classlist has been removed this.video.classList.add(this.userCssClassName); @@ -71,6 +75,13 @@ class VideoData { // if size of the video has changed, this may mean we need to recalculate/reapply // last calculated aspect ratio this.restoreAr(); + } else if (mutation.attribute = 'src' && mutation.attributeOldValue !== this.video.getAttribute('src')) { + // try fixing alignment issue on video change + try { + this.restoreAr(); + } catch (e) { + console.error("[VideoData::onVideoDimensionsChanged] There was an error when handling src change.", e); + } } } } @@ -78,7 +89,8 @@ class VideoData { firstTimeArdInit(){ if(this.destroyed) { - throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}}; + // throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}}; + return; } if(! this.arSetupComplete){ this.arDetector = new ArDetector(this); @@ -87,7 +99,8 @@ class VideoData { initArDetection() { if(this.destroyed) { - throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}}; + // throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}}; + return; } if(this.arDetector){ this.arDetector.init(); @@ -103,7 +116,8 @@ class VideoData { console.log("[VideoData::startArDetection] starting AR detection") } if(this.destroyed) { - throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}}; + // throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}}; + return; } if(!this.arDetector) { this.arDetector.init(); @@ -113,7 +127,8 @@ class VideoData { rebootArDetection() { if(this.destroyed) { - throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}}; + // throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}}; + return; } this.arDetector.init(); } @@ -131,20 +146,31 @@ class VideoData { this.pause(); this.destroyed = true; - if(this.arDetector){ - this.arDetector.stop(); - this.arDetector.destroy(); + if (this.arDetector){ + try { + this.arDetector.stop(); + this.arDetector.destroy(); + } catch (e) {} } - this.arDetector = null; - if(this.resizer){ - this.resizer.destroy(); + this.arDetector = undefined; + if (this.resizer){ + try { + this.resizer.destroy(); + } catch (e) {} } - this.resizer = null; - if(this.player){ - this.player.destroy(); + this.resizer = undefined; + if (this.player){ + try { + this.player.destroy(); + } catch (e) {} } - this.player = null; - this.video = null; + if (this.observer) { + try { + this.observer.disconnect(); + } catch (e) {} + } + this.player = undefined; + this.video = undefined; } pause(){ @@ -152,9 +178,6 @@ class VideoData { if(this.arDetector){ this.arDetector.stop(); } - if(this.resizer){ - this.resizer.stop(); - } if(this.player){ this.player.stop(); } @@ -162,7 +185,8 @@ class VideoData { resume(){ if(this.destroyed) { - throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}}; + // throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}}; + return; } this.paused = false; try { @@ -214,7 +238,8 @@ class VideoData { panHandler(event, forcePan) { if(this.destroyed) { - throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}}; + // throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}}; + return; } if(!this.resizer) { this.destroy(); diff --git a/src/manifest.json b/src/manifest.json index a5ec9d9..e27fbf6 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -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.2.3", + "version": "4.2.3.1", "applications": { "gecko": { "id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}" diff --git a/src/popup/App.vue b/src/popup/App.vue index 5e55a87..6a7168b 100644 --- a/src/popup/App.vue +++ b/src/popup/App.vue @@ -34,7 +34,7 @@ class="tabitem ltr" :class="{ 'tabitem-selected': site.host === selectedSite, - 'tabitem-disabled': !settings.canStartExtension(site.host) + 'tabitem-disabled': (settings && !settings.canStartExtension(site.host)) }" @click="selectSite(site.host)" > @@ -59,7 +59,7 @@ class="tabitem ltr" :class="{ 'tabitem-selected': selectedFrame === frame.id, - 'disabled': !isDefaultFrame(frame.id) && !settings.canStartExtension(frame.label) + 'disabled': !isDefaultFrame(frame.id) && (settings && !settings.canStartExtension(frame.label)) }" :key="frame.id" @click="selectFrame(frame.id)" @@ -100,7 +100,7 @@ :class="{'selected-tab': selectedTab === 'whats-new'}" @click="selectTab('whats-new')" > -
What's new?
@@ -196,6 +196,7 @@ export default { siteTabDisabled: false, videoTabDisabled: false, canShowVideoTab: {canShow: true, warning: true}, + showWhatsNew: false, } }, async created() { @@ -266,7 +267,6 @@ export default { this.selectedFrame = frame; }, async updateConfig() { - // when this runs, a site could have been enabled or disabled // this means we must update canShowVideoTab this.updateCanShowVideoTab(); @@ -278,6 +278,7 @@ export default { if (!this.settings) { this.canShowVideoTab = {canShow: true, warning: false}; + return; } for (const site of this.activeSites) { t = this.settings.canStartExtension(site.host); @@ -287,8 +288,8 @@ export default { if (t === undefined) { // something isn't the way it should be. Show sites. this.canShowVideoTab = {canShow: true, warning: true}; + return; } - this.canShowVideoTab = {canShow: canShow, warning: warning}; }, processReceivedMessage(message, port) { @@ -330,7 +331,7 @@ export default { } } -return true; + return true; }, showFirstTab(videoTab) { // determine which tab to show. @@ -381,6 +382,11 @@ return true; if (videoTab.frames.length < 2 || Object.keys(videoTab.frames).length < 2) { this.selectedFrame = '__all'; + this.activeSites = [{ + host: this.site.host, + isIFrame: false, // not used tho. Maybe one day + }]; + this.updateCanShowVideoTab(); // update whether video tab can be shown return; } for (const frame in videoTab.frames) { diff --git a/src/popup/panels/WhatsNewPanel.vue b/src/popup/panels/WhatsNewPanel.vue index 8ef4689..b8bf65f 100644 --- a/src/popup/panels/WhatsNewPanel.vue +++ b/src/popup/panels/WhatsNewPanel.vue @@ -2,15 +2,16 @@

What's new

Full changelog for older versions is available here.

-

4.2.3

+

4.2.3[.1]

As you can tell, I don't leave reddit and youtube much. To be fair, the twitching issue was intermittent on twitch.

-

Chrome users: as a result of Chrome's shortcomings, there now exists one potential performance issue. +

Chrome users: as a result of Chrome's shortcomings, there now exists one potential performance issue. If you notice any performance issues, please contact me via github, email or reddit (see: 'report a problem' tab of this popup).

@@ -23,7 +24,7 @@ export default { return { BrowserDetect: BrowserDetect } - } + }, }