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

Trying to add blanket support for theater mode. Changing aspect ratio works in youtube theater mode, but only when manually launched. Chaning to full screen mode stops it. This commit breaks vimeo support.

Browse Source
This commit is contained in:
Tamius Han 2018-01-18 00:11:03 +01:00
parent 18b8e77e05
commit 9265a336bc
12 changed files with 314 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/conf/Debug.js
View File

@ -1,12 +1,12 @@
// Set prod to true when releasing
_prod = true;
//_prod = false;
// _prod = true;
_prod = false;
Debug = {
debug: true,
keyboard: true,
debugResizer: true,
debugArDetect: true,
debugArDetect: false,
debugStorage: true,
showArDetectCanvas: false,
flushStoredSettings: true

2
js/lib/BrowserDetect.js
View File

@ -16,7 +16,7 @@ catch (e) {};
if(typeof browser === "undefined"){ // This is a good sign we're in chrome or chromium-based browsers
if(chrome){
browser = chrome;
_bd_usebrowser = "chrome;
_bd_usebrowser = "chrome";
_bd_isChrome = true;
_bd_isEdge = false;
}

2
js/lib/Comms.js
View File

@ -1,7 +1,7 @@
var _com_chrome_tabquery_wrapper = async function(tabInfo){
return new Promise(function (resolve, reject){
browser.tabs.query(tabInfo, function(response){
browser.tabs.query(tabInfo);
// Chrome/js shittiness mitigation — remove this line and an empty array will be returned
var r = response;
resolve(r);

82
js/lib/PlayerDetect.js Normal file
View File

@ -0,0 +1,82 @@
/* sprejme <video> tag (element
// vrne dimenzije predvajalnika (širina, višina)
//
// Na youtube v theater mode je razširitev rahlo pokvarjena. Video tag ostane večji od predvajalnika, ko se zapusti
// celozaslonski način. Ta funkcija skuša to težavo rešiti tako, da poišče element predvajalnika, ki je zavit okoli videa.
//
// Funkcija izkorišča lastnost, da bi načeloma moral biti vsak zunanji element večji od notranjega. Najmanjši element od
// <video> značke pa do korena drevesa bi tako moral biti predvajalnik.
//
//
// | EN |
//
// accepts <video> tag (element)
// returns player dimensions (width, height)
//
// Theater mode is mildly broken on youtube. <video> tag remains bigger than the player after leaving the fullscreen mode, and
// there's nothing we can do about that. This function aims to solve the problem by finding the player element that's wrapped around
// the <video> tag.
//
// In general, an outer tag should be bigger than the inner tag. Therefore the smallest element between <video> tag and the document
// root should be the player.
*/
var _pd_getPlayerDimensions = function(element){
if(FullScreenDetect.isFullScreen()){
if(Debug.debug){
console.log("[PlayerDetect::_pd_getPlayerDimensions] video is full screen, returning player dimensions!");
}
return {
width: screen.width,
height: screen.height
};
}
if(Debug.debug){
console.log("[PlayerDetect::_pd_getPlayerDimensions] video is not full screen. Looking for player.");
}
var playerCandidateNode = element;
// in case our <video> is bigger than player in one dimension but smaller in the other
// if site is coded properly, player can't be wider than that
var candidate_width = Math.max(element.offsetWidth, screen.width);
var candidate_height = Math.max(element.offsetHeight, screen.height);
// <video> can't be root in a document, so we can do this
element = element.parentNode;
while(element.parentNode){
// 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 ){
playerCandidateNode = element;
candidate_width = element.offsetWidth;
candidate_height = element.offsetHeight;
if(Debug.debug){
console.log("Found new candidate for player. Dimensions: w:", candidate_width, "h:",candidate_height);
}
}
element = element.parentNode;
}
return {
width: playerCandidateNode.offsetWidth,
height: playerCandidateNode.offsetHeight
};
}
var PlayerDetect = {
getPlayerDimensions: _pd_getPlayerDimensions
}

24
js/modules/ArDetect.js
View File

@ -154,8 +154,8 @@ var _ard_processAr = function(video, width, height, edge_h, edge_w, fallbackMode
//edge_w -—> null/undefined, because we don't autocorrect pillarbox yet
if(Debug.debug){
console.log("[ArDetect::_ard_processAr] processing ar. width:", width, "; height:", height, "; edge top:", edge_h);
if(Debug.debug && Debug.debugArDetect){
console.log("[ArDetect::_ard_processAr] processing ar. sample width:", width, "; sample height:", height, "; edge top:", edge_h);
}
// if we don't specify these things, they'll have some default values.
if(edge_h === undefined){
@ -202,21 +202,21 @@ var _ard_processAr = function(video, width, height, edge_h, edge_w, fallbackMode
}
// če je sprememba več od dovoljenega, spremeni razmerje stranic. Stvari se razlikujejo glede na to, ali smo v fullscreen ali ne
// if change is greater than allowed, change the aspect ratio. Whether we do that depends on whether we're in fullscreen.
if( FullScreenDetect.isFullScreen() ){
// if( FullScreenDetect.isFullScreen() ){
if(Debug.debug)
console.log("[ArDetect::_ard_processAr] attempting to fix aspect ratio. New aspect ratio: ", trueAr);
_ard_oldAr = trueAr;
Resizer.setAr_fs(trueAr);
}
else{
// če nismo v fullscreen, potem preverimo, ali naša stran dovoljuje ne-fs?
// first, we'll check if our site allows for non-fs autoar detection
if( SitesConf.nonfsArDetectEnabled() ){
_ard_oldAr = trueAr;
Resizer.setAr_nonfs(trueAr);
}
}
// }
// else{
// // če nismo v fullscreen, potem preverimo, ali naša stran dovoljuje ne-fs?
// // first, we'll check if our site allows for non-fs autoar detection
// if( SitesConf.nonfsArDetectEnabled() ){
// _ard_oldAr = trueAr;
// Resizer.setAr_nonfs(trueAr);
// }
// }
}

110
js/modules/Resizer.js
View File

@ -32,81 +32,6 @@ var _res_manual_autoar = function(siteProps){
// sending.then( function(){}, function(err1, err2){console.log("uw::periodic: there was an error while sending a message", err1, err2)} );
}
var _res_changeCSS = function(type, action, lastAction, conf, debugmsg){
if(debugmsg)
console.log("uw::changeCSS | starting function. type:", type, "; what_do:",what_do,"\nPlayer element is this:",PLAYER);
// hideMenu("uw-armenu");
// hideMenu("uw-smenu");
var evideo = $("video")[0];
if(!evideo){
if(debugmsg)
console.log("uw::changeCSS | no video element found. Doing nothing.");
return;
}
var video = { width: evideo.videoWidth, height: evideo.videoHeight };
var nplayer = { width: PLAYER.clientWidth, height: PLAYER.clientHeight };
if(debugmsg)
console.log("uw::changeCSS | video dimensions:",video.width,"x",video.height,"; player:",nplayer.width,"x",nplayer.height);
// Youtube predvajalnik privzeto resetira CSS ob prehodu v/iz fullscreen. Tukaj shranimo zadnje dejanje,
// da ga lahko onFullscreenOff/onFullscreenOn uveljavita.
//
// Youtube player resets CSS on fullscreen state change. Here we save the last action taken, so
// onFullscreenOff/onFullscreenOn are able to preserve it (if we want).
lastAction = {type:type, what_do:what_do};
// -----------------------------------------------------------------------------------------
// Handlanje dejanj se zgodi pod to črto
//
// Handling actions happens below this line
// -----------------------------------------------------------------------------------------
if (type == "autoar"){
this.autochar();
return;
}
if (type == "char"){
if(debugmsg)
console.log("uw::changeCSS | trying to change aspect ratio.");
// char = CHange Aspect Ratio
char(what_do, video, nplayer);
return;
}
if (what_do == "reset"){
if(debugmsg)
console.log("uw::changeCSS | issuing reset.");
resetCSS(video, nplayer);
return;
}
// Velikost videa spreminjamo samo, če smo v celozaslonskem načinu ALI če NE pišemo komentarja
// Videa ne spreminjamo tudi, če uporabljamo vrstico za iskanje.
//
// We only change video size when we're in full screen OR if we are NOT writing a comment.
// We also leave video alone if we're using the search bar
if(FullScreenDetect.isFullScreen() || (
(document.activeElement.getAttribute("role") != "textbox") &&
(document.activeElement.getAttribute("type") != "text")
)){
if(debugmsg)
console.log("uw::changeCSS | trying to fit width or height");
changeCSS_nofs(what_do, video, nplayer);
}
}
var _res_char = function(newAr, video, player){
@ -249,8 +174,8 @@ var _res_reset = function(force){
if(Debug.debug)
console.log("[Resizer::_res_reset] css applied. Dimensions/pos: w:",dimensions.width,"; h:",dimensions.height,"; top:",dimensions.top,"; left:",dimensions.left);
if(force)
this._currentAr = -1;
// if(force)
// this._currentAr = -1;
}
// Skrbi za "stare" možnosti, kot na primer "na širino zaslona", "na višino zaslona" in "ponastavi". Približevanje opuščeno.
@ -279,12 +204,12 @@ var _res_legacyAr = function(action){
}
var _res_setAr_kbd = function(ar){
if(FullScreenDetect.isFullScreen()){
if(Debug.debug)
console.log("[Resizer::_res_setAr_kbd] We're in full screen. Setting ar to ", ar);
_res_setAr(ar, {width: screen.width, height: screen.height} );
}
// if(FullScreenDetect.isFullScreen()){
// if(Debug.debug)
// console.log("[Resizer::_res_setAr_kbd] We're in full screen. Setting ar to ", ar);
//
_res_setAr(ar);
// }
// else
// _res_setAr_nonfs(ar);
// TODO: check if site supports non-fs ar
@ -305,22 +230,19 @@ var _res_setAr = function(ar, playerDimensions){
//
if(Debug.debug)
console.log("[Resizer::_res_setArFs] ar is " ,ar, ", playerDimensions are ", playerDimensions);
console.log("[Resizer::_res_setAr] ar is " ,ar, ", playerDimensions are ", playerDimensions);
var videoDimensions = {
width: 0,
height: 0
}
if(Debug.debug){
console.log("[Resizer::_res_setArFs] Player dimensions?",playerDimensions);
}
if(playerDimensions === undefined){
playerDimensions = {
width: screen.width,
height: screen.height
}
if(playerDimensions === undefined)
playerDimensions = PlayerDetect.getPlayerDimensions(vid);
if(Debug.debug){
console.log("[Resizer::_res_setAr] Player dimensions?",playerDimensions);
}
if( fileAr < ar ){
@ -549,8 +471,8 @@ var _res_restore = function(){
if(this._currentAr > 0)
_res_setAr_kbd(this._currentAr);
else
_res_setAr_kbd("default");
// else
// _res_setAr_kbd("default");
}
var Resizer = {

17
js/uw.js
View File

@ -80,7 +80,7 @@ async function main(){
if(Debug.debug){
console.log("%c[uw::onfullscreenchange] are we in full screen?","color: #aaf", FullScreenDetect.isFullScreen());
}
fullScreenCheck(0);
// fullScreenCheck(0);
});
browser.runtime.onMessage.addListener(receiveMessage);
@ -98,13 +98,16 @@ function fullScreenCheck(count) {
}
var fsnow = FullScreenDetect.isFullScreen();
if(fsnow){
// we restore, always — esp. now that we also do things in non-fullscreen
// if(fsnow){
// full screen is on
Resizer.restore();
}
else{
Resizer.reset();
}
// Resizer.restore();
// }
// else{
// Resizer.reset();
// }
// kaj pa, če je FullScreenDetect vrnil narobno vrednost?
// what if FullScreenDetect was not right? Let's verify; if it was wrong we re-trigger it in about 100 ms.

73
manifest-chrome.json~HEAD Normal file
View File

@ -0,0 +1,73 @@
{
"manifest_version": 2,
"name": "Ultrawidify",
"version": "2.0.2",
"icons": {
"32":"res/icons/uw-32.png",
"64":"res/icons/uw-64.png"
},
"description": "Aspect ratio fixer for youtube that works around some people's disability to properly encode 21:9 (and sometimes, 16:9) videos.",
"content_scripts": [{
"matches": ["*://*/*"],
"js": [
"js/dep/jquery-3.1.1.js",
"js/dep/chrome/chrome-extension-async.js",
"js/lib/BrowserDetect.js",
"js/lib/StorageManager.js",
"js/lib/Comms.js",
"js/conf/Debug.js",
"js/conf/Settings.js",
"js/conf/SitesConf.js",
"js/conf/Status.js",
"js/conf/ExtensionConf.js",
"js/lib/FullScreenDetect.js",
"js/modules/PageInfo.js",
"js/modules/ArDetect.js",
"js/modules/Resizer.js",
"js/conf/Keybinds.js",
"js/uw.js" ],
"all_frames": true
}],
"permissions": [
"tabs", "storage", "activeTab", "<all_urls>", "*://*.youtube.com/*", "*://youtube.com/*", "*://imdb.com/*", "*://*.imdb.com/*"
],
"browser_action": {
"default_icon": "res/icons/uw-32.png",
"default_popup": "res/popup/popup.html",
"default_title": "Ultrawidify"
},
"web_accessible_resources": [
"js/*",
"res/img/ytplayer-icons/zoom.png",
"res/img/ytplayer-icons/unzoom.png",
"res/img/ytplayer-icons/fitw.png",
"res/img/ytplayer-icons/fith.png",
"res/img/ytplayer-icons/reset.png",
"res/img/ytplayer-icons/settings.png",
"res/img/settings/about-bg.png",
"res/css/uw_common.css",
"res/css/uw_yt.css",
"res/css/uw_netflix.css",
"res/css/uw_settings.css"
],
"options_ui" : {
"page": "res/settings/settings.html",
"open_in_tab": true
}
}

72
manifest-ff.json Normal file
View File

@ -0,0 +1,72 @@
{
"manifest_version": 2,
"name": "Ultrawidify",
"version": "2.0.3",
"icons": {
"32":"res/icons/uw-32.png",
"64":"res/icons/uw-64.png"
},
"description": "Aspect ratio fixer for youtube that works around some people's disability to properly encode 21:9 (and sometimes, 16:9) videos.",
"content_scripts": [{
"matches": ["*://*/*"],
"js": [
"js/dep/jquery-3.1.1.js",
"js/lib/BrowserDetect.js",
"js/lib/StorageManager.js",
"js/lib/Comms.js",
"js/conf/Debug.js",
"js/conf/Settings.js",
"js/conf/SitesConf.js",
"js/conf/Status.js",
"js/conf/ExtensionConf.js",
"js/lib/FullScreenDetect.js",
"js/modules/PageInfo.js",
"js/modules/ArDetect.js",
"js/modules/Resizer.js",
"js/conf/Keybinds.js",
"js/uw.js" ],
"all_frames": true
}],
"permissions": [
"tabs", "storage", "activeTab", "<all_urls>", "*://*.youtube.com/*", "*://youtube.com/*", "*://imdb.com/*", "*://*.imdb.com/*"
],
"browser_action": {
"default_icon": "res/icons/uw-32.png",
"default_popup": "res/popup/popup.html",
"default_title": "Ultrawidify"
},
"web_accessible_resources": [
"js/*",
"res/img/ytplayer-icons/zoom.png",
"res/img/ytplayer-icons/unzoom.png",
"res/img/ytplayer-icons/fitw.png",
"res/img/ytplayer-icons/fith.png",
"res/img/ytplayer-icons/reset.png",
"res/img/ytplayer-icons/settings.png",
"res/img/settings/about-bg.png",
"res/css/uw_common.css",
"res/css/uw_yt.css",
"res/css/uw_netflix.css",
"res/css/uw_settings.css"
],
"options_ui" : {
"page": "res/settings/settings.html",
"open_in_tab": true
}
}

78
manifest.json
View File

@ -1,7 +1,7 @@
{
"manifest_version": 2,
"name": "Ultrawidify",
"version": "2.0.3",
"version": "2.1.0",
"icons": {
"32":"res/icons/uw-32.png",
@ -9,36 +9,38 @@
},
"description": "Aspect ratio fixer for youtube that works around some people's disability to properly encode 21:9 (and sometimes, 16:9) videos.",
"content_scripts": [{
"matches": ["*://*/*"],
"js": [
"js/dep/jquery-3.1.1.js",
"js/lib/BrowserDetect.js",
"js/lib/StorageManager.js",
"js/lib/Comms.js",
"js/conf/Debug.js",
"js/conf/Settings.js",
"js/conf/SitesConf.js",
"js/conf/Status.js",
"js/conf/ExtensionConf.js",
"js/lib/FullScreenDetect.js",
"js/modules/PageInfo.js",
"js/modules/ArDetect.js",
"js/modules/Resizer.js",
"js/conf/Keybinds.js",
"js/uw.js" ],
"js/dep/jquery-3.1.1.js",
"js/dep/chrome/chrome-extension-async.js",
"js/lib/BrowserDetect.js",
"js/lib/StorageManager.js",
"js/lib/Comms.js",
"js/conf/Debug.js",
"js/conf/Settings.js",
"js/conf/SitesConf.js",
"js/conf/Status.js",
"js/conf/ExtensionConf.js",
"js/lib/FullScreenDetect.js",
"js/lib/PlayerDetect.js",
"js/modules/PageInfo.js",
"js/modules/ArDetect.js",
"js/modules/Resizer.js",
"js/conf/Keybinds.js",
"js/uw.js" ],
"all_frames": true
}],
"permissions": [
"tabs", "storage", "activeTab", "<all_urls>", "*://*.youtube.com/*", "*://youtube.com/*", "*://imdb.com/*", "*://*.imdb.com/*"
"tabs", "storage", "activeTab", "<all_urls>", "*://*.youtube.com/*", "*://youtube.com/*", "*://imdb.com/*", "*://*.imdb.com/*"
],
"browser_action": {
@ -48,21 +50,21 @@
},
"web_accessible_resources": [
"js/*",
"js/*",
"res/img/ytplayer-icons/zoom.png",
"res/img/ytplayer-icons/unzoom.png",
"res/img/ytplayer-icons/fitw.png",
"res/img/ytplayer-icons/fith.png",
"res/img/ytplayer-icons/reset.png",
"res/img/ytplayer-icons/settings.png",
"res/img/settings/about-bg.png",
"res/css/uw_common.css",
"res/css/uw_yt.css",
"res/css/uw_netflix.css",
"res/css/uw_settings.css"
"res/img/ytplayer-icons/zoom.png",
"res/img/ytplayer-icons/unzoom.png",
"res/img/ytplayer-icons/fitw.png",
"res/img/ytplayer-icons/fith.png",
"res/img/ytplayer-icons/reset.png",
"res/img/ytplayer-icons/settings.png",
"res/img/settings/about-bg.png",
"res/css/uw_common.css",
"res/css/uw_yt.css",
"res/css/uw_netflix.css",
"res/css/uw_settings.css"
],
"options_ui" : {

4
res/popup/js/popup.js
View File

@ -55,7 +55,7 @@ var _changeAr_button_shortcuts = { "autoar":"none", "reset":"none", "219":"none"
async function sendMessage(message){
console.log("SENDING MESSAGE TO CONTENT SCRIPT");
var tabs = await Comms.queryTabs({currentWindow: true, active: true});
var tabs = await browser.tabs.query({currentWindow: true, active: true});
if(Debug.debug)
console.log("[uw-bg::sendMessage] trying to send message", message, " to tab ", tabs[0], ". (all tabs:", tabs,")");
@ -367,6 +367,8 @@ document.addEventListener("click", (e) => {
var command = getcmd(e);
if(command)
sendMessage(command);
return true;
});

1
res/popup/popup.html
View File

@ -158,6 +158,7 @@
<ul><li>Page hasn't finished loading<small><br/><span class="smallcaps">Note</span>: webextensions only start working when page is fully loaded.</small></li>
<li>The video is embedded / in an iframe.<small><br/>This is a known issue/limitation. Use keyboard shortcuts to correct aspect ratio.</small></li>
<li>Hamster Rajko is on strike.<small><br/>(Close this popup and reopen in a few seconds)</small></li></ul>
<p><u>Keyboard shortcuts:</u><br/>* <b>A</b> - attempt automatic detection<br/>* <b>W</b> - fit to width<br/>* <b>E</b> - fit to height<br/>* <b>R</b> - reset/stop automatic detection<br/><br/>Force aspect ratio:<br/>* <b>S</b>: 16:9<br/>* <b>D</b>: 21:9<br/>* <b>X</b>: 2:1</p>
</div>
<div id="extension-mode" class="suboption hidden">