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

Merge branch 'master' into stable

Browse Source
This commit is contained in:
Tamius Han 2019-06-14 23:22:24 +02:00
commit 3fcf32c687
23 changed files with 890 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
CHANGELOG.md
View File

@ -4,10 +4,18 @@
### Plans for the future
* Allow users to set autodetection sensitivity
* Settings page looks ugly af right now. Maybe fix it some time later
### v4.0.1 (current)
### v4.1.0 (current)
* Added ability to add custom CSS to page
* Fixed video alignment issues on old.reddit. Disabled extension on imgur by default.
* Extension now works on vimeo again
* **UX:** Renamed 'about' to 'report a problem' in order to make contact info more discoverable
### v4.0.1
* Fixed bug where sites using 'default' option in 'Extension mode' settings would be disabled, even if extension was not.
* Fixed bug where extension sometimes wouldn't work on Netflix.
@ -21,12 +29,11 @@
* Black frame detection has been implemented and improved. Some cases (but not all) of text on black background causing aspect ratio corrections have also been fixed.
* Autodetection frequency increased from roughly once every 0.6 seconds to about 3 checks per second.
* Fixed the bug where autodetectin didn't calculate aspect ratio correctly. This bug would manifest in extension cropping too much even though the edge was clearly defined. It most commonly occured in videos of aspect ratio <1 that contained letterbox. [ex 1]( https://www.youtube.com/watch?v=9DP0TbOQcOw), [ex 2](https://www.reddit.com/r/videos/comments/a137pj/daily_reminder_that_shelly_miscavige_wife_of/)
* Black frame detection has been implemented and improved. Some cases (but not all) of text on black background causing aspect ratio corrections have also been fixed.
* **Settings page was re-added**
* This includes a page for adding new aspect ratios and keyboard shortcuts. This feature is experimental.
* It's possible to tweak autodetection sensitivity and frequency.
* It's possible to tweak autodetection sensitivity and frequency — in slightly more user-friendly way as well
* It's also possible to tweak autodetection settings in detail.
* It's now possible to reset settings to default
* It's now possible to reset settings to default
* Rewrote keyboard shortcuts and changed how they're handled. Massively.
* You can now select which specific video on the page you control, provided each video is in its separate iframe
* While I wasn't looking, Netflix started supporting ultrawide monitors on its own. Netflix' implementation clashes with my own, though, so I've decided to disable autodetection on videos that netflix already cropped on their own. Manual aspect ratio changes are still possible, but they're off. You've been warned.
@ -35,7 +42,7 @@
~~### v3.3.0~~
~~This will probably get promoted to 4.0, continuing the trend of version something.3 not happening. Eulul~~
~~This will probably get promoted to 4.0, continuing the trend of version something. 3 not happening. Eulul~~
* ~~Basic mode added~~
* ~~Per-site controls in popup (to control embedded videos)~~

1
package.json
View File

@ -4,6 +4,7 @@
"description": "Aspect ratio fixer for youtube that works around some people's disability to properly encode 21:9 (and sometimes, 16:9) videos.",
"author": "Tamius Han <tamius.han@gmail.com>",
"scripts": {
"start": "cross-env HMR=true npm run build:dev -- --watch",
"build": "cross-env NODE_ENV=production BROWSER=firefox webpack --hide-modules",
"build-chrome": "cross-env NODE_ENV=production BROWSER=chrome webpack --hide-modules",
"build-edge": "cross-env NODE_ENV=production BROWSER=edge webpack --hide-modules",

87
src/common/components/QuerySelectorSetting.vue Normal file
View File

@ -0,0 +1,87 @@
<template>
<div class="flex flex-column">
<div v-if="!editing && !adding" class="flex flex-row">
<div class="">
<b>Query selector:</b> {{qs.string}}<br/>
<b>Additional CSS:</b> {{qs.css || 'no style rules'}}
</div>
<div class="flex flex-column flex-nogrow">
<a @click="editing = true">Edit</a>
<a @click="$emit('delete')">Delete</a>
</div>
</div>
<div v-else class="flex flex-row">
<div class="flex flex-column">
<div class="flex flex-row">
<div class="flex label-secondary form-label">
Query selector:
</div>
<div class="flex flex-input">
<input type="text"
v-model="qs.string"
/>
</div>
</div>
<div class="flex flex-row">
<div class="flex label-secondary form-label">
Additional CSS:
</div>
<div class="flex flex-input">
<input type="text"
v-model="qs.css"
/>
</div>
</div>
</div>
<div>
<a v-if="editing" @click="cancelEdit">Cancel</a>
<a v-if="adding" @click="clear">Clear</a>
<a @click="save">Save</a>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
qs: {string: '', css: ''},
editing: false,
}
},
props: {
querySelector: Object,
adding: {
type: Boolean,
required: false,
default: false
}
},
watch: {
querySelector(val) {
this.qs = JSON.parse(JSON.stringify(val));
}
},
methods: {
save() {
if (this.adding) {
this.$emit('create', this.qs);
this.qs = {string: '', css: ''};
} else {
this.emit$('update', this.qs)
}
},
cancelEdit() {
this.qs = JSON.parse(JSON.stringify(this.querySelector));
},
clear() {
this.qs = {string: '', css: ''};
}
}
}
</script>
<style>
</style>

5
src/ext/conf/Debug.js
View File

@ -6,9 +6,8 @@ var Debug = {
// performanceMetrics: true, // should not be affected by debug.debug in order to allow benchmarking of the impact logging in console has
// init: true,
// debug: true,
// debug: false,
// keyboard: true,
// debugResizer: true,
// resizer: true,
// debugArDetect: true,
// scaler: true,
// debugStorage: false,
@ -18,7 +17,7 @@ var Debug = {
// showArDetectCanvas: true,
// flushStoredSettings: true,
// flushStoredSettings: false,
// playerDetectDebug: true,
// playerDetect: true,
// periodic: true,
// videoRescan: true,
// mousemove: true,

45
src/ext/conf/ExtensionConf.js
View File

@ -919,6 +919,51 @@ var ExtensionConf = {
}
}
},
"old.reddit.com" : {
mode: ExtensionMode.Enabled,
autoar: currentBrowser.firefox ? ExtensionMode.Enabled : ExtensionMode.Disabled,
override: false,
type: 'official',
stretch: Stretch.Default,
videoAlignment: VideoAlignment.Default,
keyboardShortcutsEnabled: ExtensionMode.Default,
DOM: {
video: {
manual: false,
querySelectors: '',
additionalCss: '',
},
player: {
manual: true,
useRelativeAncestor: true,
videoAncestor: 1,
}
},
css: '',
},
"vimeo.com": {
mode: 3,
autoar: 3,
type: 'official',
stretch: -1,
videoAlignment: -1,
keyboardShortcutsEnabled: 0,
DOM: {
player: {
manual: true,
querySelectors: ".player_outro_area",
useRelativeAncestor: false,
},
},
css: ".player_outro_area {\n width: 100% !important;\n display: flex !important;\n justify-content: center !important;\n}\n\n.player_container, .player {\n width: 100% !important; \n}"
},
"imgur.com": {
mode: -1,
autoar: -1,
autoarFallback: 0,
stretch: -1,
videoAlignment: 1
},
}
}

38
src/ext/lib/Settings.js
View File

@ -143,6 +143,14 @@ class Settings {
});
}
if (Debug.debug && Debug.debugStorage) {
try {
console.log("[Settings::get] Got settings:", JSON.parse(ret.uwSettings));
} catch (e) {
console.log("[Settings::get] No settings.")
}
}
try {
return JSON.parse(ret.uwSettings);
} catch(e) {
@ -151,7 +159,7 @@ class Settings {
}
async set(extensionConf) {
if (Debug.debug) {
if (Debug.debug && Debug.debugStorage) {
console.log("[Settings::set] setting new settings:", extensionConf)
}
@ -172,7 +180,7 @@ class Settings {
}
async save() {
if (Debug.debug) {
if (Debug.debug && Debug.storage) {
console.log("[Settings::save] Saving active settings:", this.active);
}
@ -228,8 +236,10 @@ class Settings {
site = window.location.hostname;
if (!site) {
console.log("[Settings::canStartExtension] window.location.hostname is null or undefined:", window.location.hostname)
console.log("active settings:", this.active)
if (Debug.debug) {
console.log("[Settings::canStartExtension] window.location.hostname is null or undefined:", window.location.hostname)
console.log("active settings:", this.active)
}
return ExtensionMode.Disabled;
}
}
@ -280,17 +290,17 @@ class Settings {
// }
try{
// if site is not defined, we use default mode:
if (! this.active.sites[site]) {
return this.active.sites['@global'].mode === ExtensionMode.Enabled;
}
if (! this.active.sites[site]) {
return this.active.sites['@global'].mode === ExtensionMode.Enabled;
}
if(this.active.sites['@global'].mode === ExtensionMode.Enabled) {
return this.active.sites[site].mode !== ExtensionMode.Disabled;
} else if (this.active.sites['@global'].mode === ExtensionMode.Whitelist) {
return this.active.sites[site].mode === ExtensionMode.Enabled;
} else {
return false;
}
if(this.active.sites['@global'].mode === ExtensionMode.Enabled) {
return this.active.sites[site].mode !== ExtensionMode.Disabled;
} else if (this.active.sites['@global'].mode === ExtensionMode.Whitelist) {
return this.active.sites[site].mode === ExtensionMode.Enabled;
} else {
return false;
}
} catch(e){
if(Debug.debug){
console.log("[Settings.js::canStartExtension] Something went wrong — are settings defined/has init() been called?\nSettings object:", this)

5
src/ext/lib/ar-detect/ArDetector.js
View File

@ -572,8 +572,8 @@ class ArDetector {
// this means canvas needs to be resized, so we'll just re-run setup with all those new parameters
this.stop();
var newCanvasWidth = window.innerHeight * (this.video.videoWidth / this.video.videoHeight);
var newCanvasHeight = window.innerHeight;
let newCanvasWidth = window.innerHeight * (this.video.videoWidth / this.video.videoHeight);
let newCanvasHeight = window.innerHeight;
if (this.conf.resizer.videoAlignment === VideoAlignment.Center) {
this.canvasDrawWindowHOffset = Math.round((window.innerWidth - newCanvasWidth) * 0.5);
@ -952,7 +952,6 @@ class ArDetector {
);
if (currentMax > this.blackLevel + blthreshold) {
console.log("CURRENT MAX:", currentMax, "BLACK LEVEL, threshold, bl+t", this.blackLevel, blthreshold, this.blackLevel+blthreshold)
// we search no further
if (currentMin < this.blackLevel) {
this.blackLevel = currentMin;

4
src/ext/lib/comms/CommsClient.js
View File

@ -151,6 +151,10 @@ class CommsClient {
return Promise.resolve(true);
}
async sendMessage(message) {
await this.sendMessage_nonpersistent(message);
}
registerVideo(){
if (Debug.debug && Debug.comms) {
console.log(`[CommsClient::registerVideo] <${this.commsId}>`, "Registering video for current page.");

11
src/ext/lib/comms/CommsServer.js
View File

@ -13,7 +13,7 @@ class CommsServer {
if (BrowserDetect.firefox) {
browser.runtime.onConnect.addListener(p => ths.onConnect(p));
browser.runtime.onMessage.addListener(m => ths.processReceivedMessage_nonpersistent(m));
browser.runtime.onMessage.addListener((m, sender) => ths.processReceivedMessage_nonpersistent(m, sender));
} else {
chrome.runtime.onConnect.addListener(p => ths.onConnect(p));
chrome.runtime.onMessage.addListener((m, sender, callback) => ths.processReceivedMessage_nonpersistent(m, sender, callback));
@ -215,6 +215,15 @@ class CommsServer {
if (Debug.debug && Debug.comms) {
console.log("%c[CommsServer.js::processMessage_nonpersistent] Received message from background script!", "background-color: #11D; color: #aad", message, sender);
}
if (message.cmd === 'inject-css') {
this.server.injectCss(message.cssString, sender);
return;
}
if (message.cmd === 'remove-css') {
this.server.removeCss(message.cssString, sender);
return;
}
if (message.forwardToContentScript) {
if (Debug.debug && Debug.comms) {

57
src/ext/lib/video-data/PageInfo.js
View File

@ -27,6 +27,18 @@ class PageInfo {
this.scheduleUrlCheck();
this.currentZoomScale = 1;
try {
const playerStyleString = this.settings.active.sites[window.location.host].css;
if (playerStyleString) {
this.comms.sendMessage({
cmd: 'inject-css',
cssString: playerStyleString
});
}
} catch (e) {
// do nothing. It's ok if there's no special settings for the player element
}
}
destroy() {
@ -40,6 +52,18 @@ class PageInfo {
this.comms.unregisterVideo(video.id)
video.destroy();
}
try {
playerStyleString = this.settings.active.sites[window.location.host].css;
if (playerStyleString) {
this.comms.sendMessage({
cmd: 'remove-css',
cssString: playerStyleString
});
}
} catch (e) {
// do nothing. It's ok if there's no special settings for the player element
}
}
reset() {
@ -65,16 +89,34 @@ class PageInfo {
this.actionHandlerInitQueue = [];
}
getVideos(host) {
if (this.settings.active.sites[host]
&& this.settings.active.sites[host].DOM
&& this.settings.active.sites[host].DOM.video
&& this.settings.active.sites[host].DOM.video.manual
&& this.settings.active.sites[host].DOM.video.querySelector){
const videos = document.querySelectorAll(this.settings.active.sites[host].DOM.video.querySelector);
if (videos.length) {
return videos;
}
}
return document.getElementsByTagName('video');
}
rescan(rescanReason){
const oldVideoCount = this.videos.length;
try{
var vids = document.getElementsByTagName('video');
var vids = this.getVideos(window.location.host);
if(!vids || vids.length == 0){
this.hasVideos = false;
if(rescanReason == RescanReason.PERIODIC){
if (Debug.debug && Debug.videoRescan && Debug.periodic) {
console.log("[PageInfo::rescan] Scheduling normal rescan:")
}
this.scheduleRescan(RescanReason.PERIODIC);
}
return;
@ -186,12 +228,11 @@ class PageInfo {
var ths = this;
this.rescanTimer = setTimeout(function(rr){
this.rescanTimer = setTimeout(function(rescanReason){
ths.rescanTimer = null;
ths.rescan(rr);
ths.rescan(rescanReason);
ths = null;
}, rescanReason === this.settings.active.pageInfo.timeouts.rescan, RescanReason.PERIODIC)
}, this.settings.active.pageInfo.timeouts.rescan, RescanReason.PERIODIC)
} catch(e) {
if(Debug.debug){
console.log("[PageInfo::scheduleRescan] scheduling rescan failed. Here's why:",e)
@ -212,16 +253,16 @@ class PageInfo {
ths.ghettoUrlCheck();
ths = null;
}, this.settings.active.pageInfo.timeouts.urlCheck)
}catch(e){
} catch(e){
if(Debug.debug){
console.log("[PageInfo::scheduleUrlCheck] scheduling URL check failed. Here's why:",e)
console.error("[PageInfo::scheduleUrlCheck] scheduling URL check failed. Here's why:",e)
}
}
}
ghettoUrlCheck() {
if (this.lastUrl != window.location.href){
if(Debug.debug){
if(Debug.debug && Debug.periodic){
console.log("[PageInfo::ghettoUrlCheck] URL has changed. Triggering a rescan!");
}

159
src/ext/lib/video-data/PlayerData.js
View File

@ -224,16 +224,23 @@ class PlayerData {
}
collectionHas(collection, element) {
for (let i = 0, len = collection.length; i < len; i++) {
if (collection[i] == element) {
return true;
}
}
return false;
}
getPlayerDimensions(elementNames){
// element names — reserved for future use. If element names are provided, this function should return first element that
// has classname or id that matches at least one in the elementNames array.
var element = this.video.parentNode;
getPlayer(isFullScreen) {
const host = window.location.host;
let element = this.video.parentNode;
if(! element ){
if(Debug.debug)
console.log("[PlayerDetect::_pd_getPlayerDimensions] element is not valid, doing nothing.", element)
if(Debug.debug) {
console.log("[PlayerDetect::_pd_getPlayer] element is not valid, doing nothing.", element)
}
if(this.element) {
const ths = this;
}
@ -242,8 +249,32 @@ class PlayerData {
return;
}
var isFullScreen = PlayerData.isFullScreen();
if (this.settings.active.sites[host]
&& this.settings.active.sites[host].DOM
&& this.settings.active.sites[host].DOM.player
&& this.settings.active.sites[host].DOM.player.manual) {
if (this.settings.active.sites[host].DOM.player.useRelativeAncestor
&& this.settings.active.sites[host].DOM.player.videoAncestor) {
let parentsLeft = this.settings.active.sites[host].DOM.player.videoAncestor - 1;
while (parentsLeft --> 0) {
element = element.parentNode;
}
if (element) {
return element;
}
} else if (this.settings.active.sites[host].DOM.player.querySelectors) {
const allSelectors = document.querySelectorAll(this.settings.active.sites[host].DOM.player.querySelectors);
while (element && !this.collectionHas(allSelectors, element)) {
element = element.parentNode;
}
if (element) {
return element;
}
}
}
var trustCandidateAfterGrows = 2; // if candidate_width or candidate_height increases in either dimensions this many
// times, we say we found our player. (This number ignores weird elements)
// in case our <video> is bigger than player in one dimension but smaller in the other
@ -252,70 +283,84 @@ class PlayerData {
var candidate_height = Math.max(element.offsetHeight, window.innerHeight);
var playerCandidateNode = element;
try {
var grows = trustCandidateAfterGrows;
while(element != undefined){
// odstranimo čudne elemente, ti bi pokvarili zadeve
// remove weird elements, those would break our stuff
if ( element.offsetWidth == 0 || element.offsetHeight == 0){
element = element.parentNode;
continue;
}
if ( element.offsetHeight <= candidate_height &&
element.offsetWidth <= candidate_width ){
// if we're in fullscreen, we only consider elements that are exactly as big as the monitor.
if( ! isFullScreen ||
(element.offsetWidth == window.innerWidth && element.offsetHeight == window.innerHeight) ){
playerCandidateNode = element;
candidate_width = element.offsetWidth;
candidate_height = element.offsetHeight;
grows = trustCandidateAfterGrows;
if(Debug.debug){
console.log("Found new candidate for player. Dimensions: w:", candidate_width, "h:",candidate_height, "node:", playerCandidateNode);
}
}
}
else if(grows --<= 0){
if(Debug.debug && Debug.playerDetect){
console.log("Current element grew in comparrison to the child. We probably found the player. breaking loop, returning current result");
}
break;
}
// if we haven't found element using fancy methods, we resort to the good old fashioned way
var grows = trustCandidateAfterGrows;
while(element != undefined){
// odstranimo čudne elemente, ti bi pokvarili zadeve
// remove weird elements, those would break our stuff
if ( element.offsetWidth == 0 || element.offsetHeight == 0){
element = element.parentNode;
continue;
}
if ( element.offsetHeight <= candidate_height &&
element.offsetWidth <= candidate_width ){
// if we're in fullscreen, we only consider elements that are exactly as big as the monitor.
if( ! isFullScreen ||
(element.offsetWidth == window.innerWidth && element.offsetHeight == window.innerHeight) ){
playerCandidateNode = element;
candidate_width = element.offsetWidth;
candidate_height = element.offsetHeight;
grows = trustCandidateAfterGrows;
if(Debug.debug){
console.log("Found new candidate for player. Dimensions: w:", candidate_width, "h:",candidate_height, "node:", playerCandidateNode);
}
}
}
else if(grows --<= 0){
if(Debug.debug && Debug.playerDetect){
console.log("Current element grew in comparrison to the child. We probably found the player. breaking loop, returning current result");
}
break;
}
element = element.parentNode;
}
catch (e) {
console.log("pdeeee,",e);
return playerCandidateNode;
}
getPlayerDimensions(){
const isFullScreen = PlayerData.isFullScreen();
const element = this.getPlayer(isFullScreen);
if(! element ){
if(Debug.debug) {
console.log("[PlayerDetect::getPlayerDimensions] element is not valid, doing nothing.", element)
}
this.element = undefined;
this.dimensions = undefined;
return;
}
if (isFullScreen && playerCandidateNode == element) {
if (isFullScreen) {
this.dimensions = {
width: window.innerWidth,
height: window.innerHeight,
fullscreen: true
}
const ths = this;
if (this.element != element) {
this.element = element;
this.makeOverlay()
}
} else {
this.dimensions = {
width: candidate_width,
height: candidate_height,
width: element.offsetWidth,
height: element.offsetHeight,
fullscreen: isFullScreen
};
const ths = this;
if(this.element != playerCandidateNode) {
this.element = playerCandidateNode;
if(this.element != element) {
this.element = element;
this.makeOverlay();
}
}
@ -331,7 +376,7 @@ class PlayerData {
// return true;
// }
if(this.dimensions && this.dimensions.fullscreen){
if (this.dimensions && this.dimensions.fullscreen){
if(! PlayerData.isFullScreen()){
console.log("[PlayerDetect] player size changed. reason: exited fullscreen");
}
@ -342,7 +387,7 @@ class PlayerData {
if ( this.element &&
( this.dimensions.width != this.element.offsetWidth ||
this.dimensions.height != this.element.offsetHeight )
){
) {
console.log("[PlayerDetect] player size changed. reason: dimension change. Old dimensions?", this.dimensions.width, this.dimensions.height, "new dimensions:", this.element.offsetWidth, this.element.offsetHeight);
}
}

7
src/ext/lib/video-data/VideoData.js
View File

@ -223,10 +223,9 @@ class VideoData {
}
isPlaying() {
console.log("is playing? video:", this.video, "ctime:", this.video.currentTime,
"paused/ended:", this.video.paused, this.video.ended,
"is playing?", this.video && this.video.currentTime > 0 && !this.video.paused && !this.video.ended);
// console.log("is playing? video:", this.video, "ctime:", this.video.currentTime,
// "paused/ended:", this.video.paused, this.video.ended,
// "is playing?", this.video && this.video.currentTime > 0 && !this.video.paused && !this.video.ended);
return this.video && this.video.currentTime > 0 && !this.video.paused && !this.video.ended;
}

58
src/ext/lib/video-transform/CssHandler.js Normal file
View File

@ -0,0 +1,58 @@
import Debug from '../../conf/Debug';
class CssHandler {
static buildStyleArray(existingStyleString, extraStyleString) {
if (existingStyleString) {
const styleArray = existingStyleString.split(";");
if (extraStyleString) {
const extraCss = extraStyleString.split(';');
let dup = false;
for (const ecss of extraCss) {
for (let i in styleArray) {
if (ecss.split(':')[0].trim() === styleArray[i].split(':')[0].trim()) {
dup = true;
styleArray[i] = ecss;
}
if (dup) {
dup = false;
continue;
}
styleArray.push(ecss);
}
}
}
for (var i in styleArray) {
styleArray[i] = styleArray[i].trim();
// some sites do 'top: 50%; left: 50%; transform: <transform>' to center videos.
// we dont wanna, because we already center videos on our own
if (styleArray[i].startsWith("transform:") ||
styleArray[i].startsWith("top:") ||
styleArray[i].startsWith("left:") ||
styleArray[i].startsWith("right:") ||
styleArray[i].startsWith("bottom:") ){
delete styleArray[i];
}
}
return styleArray;
}
return [];
}
static buildStyleString(styleArray) {
let styleString = '';
for(var i in styleArray) {
if(styleArray[i]) {
styleString += styleArray[i] + "; ";
}
}
return styleString;
}
}
export default CssHandler;

147
src/ext/lib/video-transform/Resizer.js
View File

@ -30,6 +30,7 @@ class Resizer {
this.correctedVideoDimensions = {};
this.currentCss = {};
this.currentStyleString = "";
this.currentPlayerStyleString = "";
this.currentCssValidFor = {};
// restore watchdog. While true, applyCss() tries to re-apply new css until this value becomes false again
@ -96,7 +97,7 @@ class Resizer {
if (! this.conf.player.dimensions) {
ratioOut = screen.width / screen.height;
} else {
if (Debug.debug && Debug.debugResizer) {
if (Debug.debug && Debug.resizer) {
console.log(`[Resizer::calculateRatioForLegacyOptions] <rid:${this.resizerId}> Player dimensions:`, this.conf.player.dimensions.width ,'x', this.conf.player.dimensions.height,'aspect ratio:', this.conf.player.dimensions.width / this.conf.player.dimensions.height)
}
ratioOut = this.conf.player.dimensions.width / this.conf.player.dimensions.height;
@ -194,7 +195,7 @@ class Resizer {
// I'm not sure whether they do. Check that.
ar = this.calculateRatioForLegacyOptions(ar);
if (! ar) {
if (Debug.debug && Debug.debugResizer) {
if (Debug.debug && Debug.resizer) {
console.log(`[Resizer::setAr] <${this.resizerId}> Something wrong with ar or the player. Doing nothing.`);
}
return;
@ -426,7 +427,6 @@ class Resizer {
}
else {
if (this.lastAr && this.lastAr.ratio === null) {
console.log("[Resizer::restore] LAST AR IS NULL")
throw "Last ar is null!"
}
this.setAr(this.lastAr, this.lastAr)
@ -526,35 +526,31 @@ class Resizer {
return translate;
}
applyCss(stretchFactors, translate){
buildStyleArray(existingStyleString, extraStyleString) {
if (existingStyleString) {
const styleArray = existingStyleString.split(";");
if (! this.video) {
if(Debug.debug) {
console.log("[Resizer::applyCss] <rid:"+this.resizerId+"> Video went missing, doing nothing.");
if (extraStyleString) {
const extraCss = extraStyleString.split(';');
let dup = false;
for (const ecss of extraCss) {
for (let i in styleArray) {
if (ecss.split(':')[0].trim() === styleArray[i].split(':')[0].trim()) {
dup = true;
styleArray[i] = ecss;
}
if (dup) {
dup = false;
continue;
}
styleArray.push(ecss);
}
}
}
this.conf.destroy();
return;
}
// save stuff for quick tests (before we turn numbers into css values):
this.currentVideoSettings = {
validFor: this.conf.player.dimensions,
// videoWidth: dimensions.width,
// videoHeight: dimensions.height
}
var styleArrayStr = this.video.getAttribute('style');
var styleArrayObj = window.getComputedStyle(this.video);
if (styleArrayStr) {
var styleArray = styleArrayStr.split(";");
for(var i in styleArray){
styleArray[i] = styleArray[i].trim();
for (var i in styleArray) {
styleArray[i] = styleArray[i].trim();
// some sites do 'top: 50%; left: 50%; transform: <transform>' to center videos.
// we dont wanna, because we already center videos on our own
if (styleArray[i].startsWith("transform:") ||
@ -565,36 +561,78 @@ class Resizer {
delete styleArray[i];
}
}
}else {
var styleArray = [];
return styleArray;
}
return [];
}
buildStyleString(styleArray) {
let styleString = '';
for(var i in styleArray) {
if(styleArray[i]) {
styleString += styleArray[i] + "; ";
}
}
return styleString;
}
applyCss(stretchFactors, translate){
// apply extra CSS here. In case of duplicated properties, extraCss overrides
// default styleString
if (! this.video) {
if(Debug.debug) {
console.log("[Resizer::applyCss] <rid:"+this.resizerId+"> Video went missing, doing nothing.");
}
this.conf.destroy();
return;
}
if (Debug.debug && Debug.resizer) {
console.log("[Resizer::applyCss] <rid:"+this.resizerId+"> will apply css.", {stretchFactors, translate});
}
// save stuff for quick tests (before we turn numbers into css values):
this.currentVideoSettings = {
validFor: this.conf.player.dimensions,
// videoWidth: dimensions.width,
// videoHeight: dimensions.height
}
const styleArrayString = this.video.getAttribute('style');
let extraStyleString;
try {
extraStyleString = this.settings.active.sites[window.location.host].DOM.video.additionalCss;
} catch (e) {
// do nothing. It's ok if no special settings are defined for this site, we'll just do defaults
}
const styleArray = this.buildStyleArray(styleArrayString, extraStyleString)
// add remaining elements
if(stretchFactors){
if (stretchFactors) {
styleArray.push(`transform: translate(${translate.x}px, ${translate.y}px) scale(${stretchFactors.xFactor}, ${stretchFactors.yFactor})`);
styleArray.push("top: 0px; left: 0px; bottom: 0px; right: 0px");
}
const styleString = this.buildStyleString(styleArray);
// build style string back
var styleString = "";
for(var i in styleArray)
if(styleArray[i])
styleString += styleArray[i] + "; ";
this.setStyleString(styleString);
}
setStyleString (styleString, count = 0) {
setStyleString (styleString) {
this.video.setAttribute("style", styleString);
this.currentStyleString = styleString;
this.currentStyleString = this.video.getAttribute('style');
this.currentCssValidFor = this.conf.player.dimensions;
if(this.restore_wd){
if(! this.video){
if (this.restore_wd) {
if (!this.video){
if(Debug.debug)
console.log("[Resizer::_res_setStyleString] <rid:"+this.resizerId+"> Video element went missing, nothing to do here.")
return;
@ -637,8 +675,8 @@ class Resizer {
// }
// this means video went missing. videoData will be re-initialized when the next video is found
if(! this.video){
if(Debug.debug && Debug.debugResizer) {
if (!this.video){
if(Debug.debug && Debug.resizer) {
console.log("[Resizer::cssCheck] <rid:"+this.resizerId+"> no video detecting, issuing destroy command");
}
this.conf.destroy();
@ -646,23 +684,34 @@ class Resizer {
}
if(this.destroyed) {
if(Debug.debug && Debug.debugResizer) {
if(Debug.debug && Debug.resizer) {
console.log("[Resizer::cssCheck] <rid:"+this.resizerId+"> destroyed flag is set, we shouldnt be running");
}
this.stopCssWatcher();
return;
}
var styleString = this.video.getAttribute('style');
let cssValid = true;
// first, a quick test:
// if (this.currentVideoSettings.validFor == this.conf.player.dimensions ){
if (this.currentStyleString !== styleString){
if(Debug.debug && Debug.debugResizer) {
cssValid &= this.currentVideoSettings.validFor.width === this.conf.player.dimensions.width;
if (cssValid) {
const styleString = this.video.getAttribute('style');
cssValid &= this.currentStyleString === styleString;
}
if (cssValid && this.currentPlayerStyleString) { // only check for changes to player element if we applied them before
const playerStyleString = this.player.element.getAttribute('style');
cssValid &= this.currentPlayerStyleString === playerStyleString;
}
if (!cssValid){
if(Debug.debug && Debug.resizer) {
console.log(`%c[Resizer::cssCheck] <rid:${this.resizerId}> something touched our style string. We need to re-apply the style.`, {background: '#ddf', color: '#007'});
}
this.restore();
this.scheduleCssWatcher(10);
return;
}
if (this.cssWatcherIncreasedFrequencyCounter > 0) {
--this.cssWatcherIncreasedFrequencyCounter;

24
src/ext/uw-bg.js
View File

@ -52,6 +52,30 @@ class UWServer {
});
}
async injectCss(css, sender) {
try {
if (Debug.debug) {
console.log("[uwbg::injectCss] Injecting CSS:", css, sender);
}
if (BrowserDetect.firefox || BrowserDetect.edge) {
await browser.tabs.insertCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
} else if (BrowserDetect.chrome) {
chrome.tabs.insertCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
}
} catch (e) {
if (Debug.debug) {
console.error("Error while injecting css:", {error: e, css, sender});
}
}
}
removetCss(css, sender) {
if (BrowserDetect.firefox || BrowserDetect.edge) {
browser.tabs.removeCSS(sender.tab.idd, {code: css, cssOrigin: 'user', frameId: sender.frameId});
} else if (BrowserDetect.chrome) {
chrome.tabs.removeCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
}
}
scheduleGc(timeout) {
if (this._gctimeout) {
return;

4
src/manifest.json
View File

@ -1,8 +1,8 @@
{
"manifest_version": 2,
"name": "Ultrawidify",
"description": "Aspect ratio fixer for Youtube, Netflix and possibly more. Supports automatic aspect ratio detection on certain sites.",
"version": "4.0.1a1",
"description": "Removes black bars on ultrawide videos and offers advanced options to fix aspect ratio.",
"version": "4.1.0",
"applications": {
"gecko": {
"id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}"

95
src/popup/App.vue
View File

@ -24,7 +24,20 @@
<div class="">
Site settings
</div>
<div class="">
<div v-if="selectedTab === 'site' && this.activeSites.length > 1"
class=""
>
<small>Select site to control:</small>
<div class="">
<div v-for="site of activeSites"
:key="site.host"
class="tabitem"
:class="{'tabitem-selected': site.host === selectedSite}"
@click="selectSite(site.host)"
>
{{site.host}}
</div>
</div>
</div>
</div>
<div class="menu-item"
@ -51,12 +64,47 @@
</div>
</div>
<div class="menu-item experimental"
:class="{'selected-tab': selectedTab === 'site-details'}"
@click="selectTab('site-details')"
>
<div class="">
Video and player detection
</div>
<div v-if="selectedTab === 'site-details' && this.activeSites.length > 1"
class=""
>
<small>Select site to control:</small>
<div class="">
<div v-for="site of activeSites"
:key="site.host"
class="tabitem"
:class="{'tabitem-selected': site.host === selectedSite}"
@click="selectSite(site.host)"
>
{{site.host}}
</div>
</div>
</div>
</div>
<div class="menu-item"
:class="{'selected-tab': selectedTab === 'whats-new'}"
@click="selectTab('whats-new')"
>
<div class="">
What's new?
</div>
<div class="">
</div>
</div>
<div class="menu-item"
:class="{'selected-tab': selectedTab === 'about'}"
@click="selectTab('about')"
>
<div class="">
About
Report a problem
</div>
<div class="">
</div>
@ -86,10 +134,16 @@
class=""
:settings="settings"
:scope="selectedTab"
:site="site && site.host"
:site="selectedSite"
/>
<SiteDetailsPanel v-if="settings && settings.active && selectedTab === 'site-details' "
class=""
:settings="settings"
:site="selectedSite"
/>
<PerformancePanel v-if="selectedTab === 'performance-metrics'"
:performance="performance" />
<WhatsNewPanel v-if="selectedTab === 'whats-new'" />
<AboutPanel v-if="selectedTab === 'about'" />
<Donate v-if="selectedTab === 'donate'" />
</div>
@ -98,6 +152,8 @@
</template>
<script>
import WhatsNewPanel from './panels/WhatsNewPanel.vue';
import SiteDetailsPanel from './panels/SiteDetailsPanel.vue';
import Donate from '../common/misc/Donate.vue';
import Debug from '../ext/conf/Debug';
import BrowserDetect from '../ext/conf/BrowserDetect';
@ -114,7 +170,9 @@ export default {
return {
selectedTab: 'video',
selectedFrame: '__all',
selectedSite: '',
activeFrames: [],
activeSites: [],
port: BrowserDetect.firefox ? browser.runtime.connect({name: 'popup-port'}) : chrome.runtime.connect({name: 'popup-port'}),
comms: new Comms(),
frameStore: {},
@ -156,6 +214,8 @@ export default {
Debug,
AboutPanel,
Donate,
SiteDetailsPanel,
WhatsNewPanel,
},
methods: {
async sleep(t) {
@ -207,6 +267,17 @@ export default {
this.port.postMessage({cmd: 'get-current-zoom'});
}
this.site = message.site;
// update activeSites
// this.activeSites = this.activeSites.filter(x => x.host !== message.site);
// add current site
// this.activeSites = unshift({
// host: message.site.host,
// isIFrame: false, // currently unused
// });
this.selectedSite = this.selectedSite || message.site.host;
// loadConfig(site.host); TODO
this.loadFrames(this.site);
} else if (message.cmd === 'set-current-zoom') {
@ -225,8 +296,6 @@ export default {
// selectedSubitemLoaded = true;
}
this.activeFrames = [];
if (videoTab.frames.length < 2 || Object.keys(videoTab.frames).length < 2) {
this.selectedFrame = '__all';
return;
@ -253,6 +322,11 @@ export default {
}
this.activeFrames = [{id: '__all', label: 'All'},{id: '__playing', label: 'Currently playing'}];
this.activeSites = [{
host: this.site.host,
isIFrame: false, // not used tho. Maybe one day
}];
this.selectedSite = this.selectedSite || this.site.host;
for (const frame in videoTab.frames) {
this.activeFrames.push({
@ -260,6 +334,14 @@ export default {
label: videoTab.frames[frame].host,
...this.frameStore[frame],
})
// only add each host once at most
if (!this.activeSites.find(x => x.host === videoTab.frames[frame].host)) {
this.activeSites.push({
host: videoTab.frames[frame].host,
isIFrame: undefined // maybe one day
});
}
}
},
getRandomColor() {
@ -273,6 +355,9 @@ export default {
},
selectFrame(id){
this.selectedFrame = id;
},
selectSite(host) {
this.selectedSite = host;
}
}
}

7
src/popup/panels/AboutPanel.vue
View File

@ -6,10 +6,15 @@
<div class="row">
<span class="label">Having an issue?</span><br/> Report <strike>undocumented features</strike> bugs using one of the following options:
<ul>
<li> <a target="_blank" href="https://github.com/xternal7/ultrawidify/issues"><b>Github (strongly preferred)</b></a><br/></li>
<li> <a target="_blank" href="https://github.com/xternal7/ultrawidify/issues"><b>Github (preferred)</b></a><br/></li>
<li>PM me on <a target="_blank" href="https://www.reddit.com/message/compose?to=xternal7&subject=[Ultrawidify]%20ENTER%20SUMMARY%20OF%20YOUR%20PROBLEM%20HERE&message=Describe+your+issue+in+more+detail.+Don%27t+forget+to+include%3A%0D%0A%2A+Extension+version%0D%0A%2A+Browser%0D%0A%2A+Operating+system%0D%0A%2A+Other+extensions+that+could+possibly+interfere%0D%0A%0D%0AIf+you%27re+reporting+an+issue+with+automatic+aspect+ratio+detection%2C+please+also+include+the+following+%28if+possible%29%3A%0D%0A%2A+model+and+make+of+your+CPU%0D%0A%2A+amount+of+RAM">reddit</a><br/></li>
<li>Email: <a target="_blank" href="mailto:tamius.han@gmail.com?subject=%5BUltrawidify%5D+ENTER+SUMMARY+OF+YOUR+ISSUE+HERE&body=Describe+your+issue+in+more+detail.+Don%27t+forget+to+include%3A%0D%0A%2A+Extension+version%0D%0A%2A+Browser%0D%0A%2A+Operating+system%0D%0A%2A+Other+extensions+that+could+possibly+interfere%0D%0A%0D%0AIf+you%27re+reporting+an+issue+with+automatic+aspect+ratio+detection%2C+please+also+include+the+following+%28if+possible%29%3A%0D%0A%2A+model+and+make+of+your+CPU%0D%0A%2A+amount+of+RAM">tamius.han@gmail.com</a></li>
</ul>
<br/>
If reporting perfomrance/RAM usage issue, please include your CPU model and RAM.
<br/>
<br/>
If reporting issues with autodetection, please also include a screenshot and a link to the video > with timestamp(s) if possible.
</div>
</div>
</template>

4
src/popup/panels/DefaultSettingsPanel.vue
View File

@ -9,7 +9,7 @@
<div v-if="settings && extensionActions.length"
class="w100"
>
<div class="label">Enable extension {{scope === 'site' ? 'for this site' : ''}}:</div>
<div class="label">Enable extension <template v-if="scope === 'site'">for {{site}}</template>:</div>
<div class="flex flex-row flex-wrap">
<ShortcutButton v-for="(action, index) of extensionActions"
class="flex flex-grow button"
@ -27,7 +27,7 @@
<div v-if="aardActions.length"
class="w100"
>
<div class="label">Enable autodetection {{scope === 'site' ? 'for this site' : ''}}:</div>
<div class="label">Enable autodetection <template v-if="scope === 'site'">for {{site}}</template>:</div>
<div class="flex flex-row flex-wrap">
<ShortcutButton v-for="(action, index) of aardActions"
class="flex flex-grow button"

225
src/popup/panels/SiteDetailsPanel.vue Normal file
View File

@ -0,0 +1,225 @@
<template>
<div class="w100 flex flex-column" style="padding-bottom: 20px">
<div class="label">
Video detection settings<br/><small>for {{site}}</small>
</div>
<div class="description">Video is just the moving picture bit without the player.</div>
<div class="">
<div class="">
<input :checked="!videoManualQs"
@change="toggleVideoManualQs"
type="checkbox"
/> Detect automatically
</div>
<div class="flex flex-column">
<div class="flex label-secondary form-label">Query selectors</div>
<input type="text"
v-model="videoQs"
:disabled="!videoManualQs"
@change="updateVideoQuerySelector"
@blur="updateVideoQuerySelector"
/>
</div>
<div class="flex flex-column">
<div class="flex label-secondary form-label">Additional css</div>
<input type="text"
v-model="videoCss"
@change="updateVideoCss"
@blur="updateVideoCss"
/>
</div>
</div>
<div class="label">
Player detection settings<br/><small>for {{site}}</small>
</div>
<div class="description">
Player is the frame around the video. Extension crops/stretches the video to fit the player.
</div>
<div class="">
<div class="">
<input :checked="!playerManualQs"
@change="togglePlayerManualQs"
type="checkbox"
/> Detect automatically
</div>
<div class="flex flex-column">
<div class="">Query selectors:</div>
<input type="text"
v-model="playerQs"
@change="updatePlayerQuerySelector"
@blur="updatePlayerQuerySelector"
:disabled="playerByNodeIndex || !playerManualQs"
/>
</div>
<div class="">
<input :checked="playerByNodeIndex"
:disabled="!playerManualQs"
@change="toggleByNodeIndex"
type="checkbox"
/> Specify player node parent index instead
</div>
<div class="flex flex-column">
<div class="">Player node parent index:</div>
<input v-model="playerParentNodeIndex"
:disabled="!playerByNodeIndex || !playerManualQs"
@change="updatePlayerParentNodeIndex"
@blur="updatePlayerParentNodeIndex"
type="number"
/>
</div>
</div>
<div class="label">
Additional css<br/><small>for {{site}}</small>
</div>
<div class="description">
This css will be inserted into webpage every time it loads.
</div>
<div class="flex flex-column">
<textarea
v-model="playerCss"
@change="updatePlayerCss"
@blur="updatePlayerCss"
>
</textarea>
</div>
</div>
</template>
<script>
import QuerySelectorSetting from '../../common/components/QuerySelectorSetting.vue';
import ExtensionMode from '../../common/enums/extension-mode.enum';
import VideoAlignment from '../../common/enums/video-alignment.enum';
import Stretch from '../../common/enums/stretch.enum';
export default {
components: {
QuerySelectorSetting,
},
data() {
return {
videoManualQs: false,
videoQs: '',
videoCss: '',
playerManualQs: false,
playerQs: '',
playerCss: '',
playerByNodeIndex: false,
playerParentNodeIndex: undefined,
};
},
props: {
site: String,
settings: Object,
},
created() {
console.log("created!")
try {
this.videoManualQs = this.settings.active.sites[this.site].DOM.video.manual || this.videoManualQs;
this.videoQs = this.settings.active.sites[this.site].DOM.video.querySelectors;
this.videoCss = this.settings.active.sites[this.site].DOM.video.additionalCss;
} catch (e) {
// that's here just in case relevant settings for this site don't exist yet
console.log("failed to load settings for the site — for video stuff")
}
try {
this.playerManualQs = this.settings.active.sites[this.site].DOM.player.manual || this.playerManualQs;
this.playerQs = this.settings.active.sites[this.site].DOM.player.querySelectors;
this.playerByNodeIndex = this.settings.active.sites[this.site].DOM.player.useRelativeAncestor || this.playerByNodeIndex;
this.playerParentNodeIndex = this.settings.active.sites[this.site].DOM.player.videoAncestor;
} catch (e) {
// that's here just in case relevant settings for this site don't exist yet
console.log("failed to load settings for the site — for video stuff")
}
try {
this.playerCss = this.settings.active.sites[this.site].css || '';
} catch (e) {
// that's here just in case relevant settings for this site don't exist yet
console.log("failed to load settings for the site — for video stuff")
}
console.log("created — got settings:", this.settings)
},
methods: {
ensureSettings(scope) {
if (! this.settings.active.sites[this.site]) {
this.settings.active.sites[this.site] = {
mode: ExtensionMode.Default,
autoar: ExtensionMode.Default,
type: 'user-added',
stretch: Stretch.Default,
videoAlignment: VideoAlignment.Default,
keyboardShortcutsEnabled: ExtensionMode.Default,
}
}
if (! this.settings.active.sites[this.site].DOM) {
this.settings.active.sites[this.site].DOM = {};
}
if (! this.settings.active.sites[this.site].DOM[scope]) {
this.settings.active.sites[this.site].DOM[scope] = {
manual: false,
querySelectors: '',
additionalCss: '',
useRelativeAncestor: scope === 'player' ? false : undefined,
videoAncestor: undefined,
playerNodeCss: scope === 'player' ? '' : undefined,
}
}
},
updateVideoQuerySelector() {
this.ensureSettings('video');
this.settings.active.sites[this.site].DOM.video.querySelectors = this.videoQs;
this.settings.save();
},
updateVideoCss() {
this.ensureSettings('video');
this.settings.active.sites[this.site].DOM.video.additionalCss = this.videoCss;
this.settings.save();
},
updatePlayerQuerySelector() {
this.ensureSettings('player');
this.settings.active.sites[this.site].DOM.player.querySelectors = this.playerQs;
this.settings.save();
},
updatePlayerCss() {
this.ensureSettings('player');
this.settings.active.sites[this.site].css = this.playerCss;
this.settings.save();
},
updatePlayerParentNodeIndex() {
this.ensureSettings('player');
this.settings.active.sites[this.site].DOM.player.videoAncestor = this.playerParentNodeIndex;
this.settings.save();
},
toggleVideoManualQs() {
this.ensureSettings('video');
this.videoManualQs = !this.videoManualQs;
this.settings.active.sites[this.site].DOM.video.enabled = this.videoManualQs;
this.settings.save();
},
togglePlayerManualQs() {
this.ensureSettings('player');
this.playerManualQs = !this.playerManualQs;
this.settings.active.sites[this.site].DOM.player.enabled = this.playerManualQs;
this.settings.save();
},
toggleByNodeIndex() {
this.ensureSettings('player');
this.playerByNodeIndex = !this.playerByNodeIndex;
this.settings.active.sites[this.site].DOM.player.useRelativeAncestor = this.playerByNodeIndex;
this.settings.save();
},
}
}
</script>
<style>
</style>

39
src/popup/panels/WhatsNewPanel.vue Normal file
View File

@ -0,0 +1,39 @@
<template>
<div>
<h2>What's new</h2>
<p>Full changelog for older versions <a href="https://github.com/xternal7/ultrawidify/blob/master/CHANGELOG.md">is available here</a>.</p>
<p class="label">4.1.0</p>
<ul>
<li>This</li>
<li>(Experimental) You can specify custom CSS for the page.</li>
<li>(Experimental) You can manually specify how player element is detected</li>
<li>Fixed old.reddit and vimeo for that. Disabled extension on imgur by default.</li>
</ul>
<p class="label">4.0.0</p>
<p>
<ul>
<li>Fixed the bug where settings wouldn't be saved.</li>
<li><b>Autodetection improvements:</b><ul>
<li>Implemented gradient detection. Changing aspect ratio will only happen if hard edge is detected</li>
<li>Improved black frame detection. Some (but not all) issues about autodetection triggering on dark frames were resolved</li>
<li>Increased autodetection frequency from 0.6s to 0.3s. <b>This isn't likely to happen, but if you notice this
extension using excessive amounts of RAM (2+ GB), this is why. If you experience this issue, please contact me (see 'Report a problem' tab).</b>
</li>
</ul></li>
<li>Settings page for extension added.</li>
<li>(Experimental) You can define custom keyboard shortcuts in settings. See 'actions' menu.</li>
</ul>
For more detailed info, see <a href="https://github.com/xternal7/ultrawidify/blob/master/CHANGELOG.md">full changelog</a>.
</p>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>

5
src/res/css/common.scss
View File

@ -93,7 +93,6 @@ a:hover {
}
/* INPUT FORMATTING */
input[type="number"], input[type="text"], input {
outline: none;
background-color: $input-background;
@ -105,6 +104,10 @@ input[type="number"], input[type="text"], input {
border: 1px solid $input-border;
}
input:disabled {
background: #444444;
color: darken($text-normal, 50%);
}
/* ELEMENT POSITIONING */

BIN
src/res/img/settings/about-bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 783 KiB