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

Merge branch 'master' into feature/player-ui

Browse Source
This commit is contained in:
Tamius Han 2021-10-19 20:27:41 +02:00
commit 2a747e11af
14 changed files with 292 additions and 256 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -13,3 +13,5 @@ build/
src/res/img/git-ignore/
test/debug-configs/
debugging-resources/

23
.gitlab-ci.yml
View File

@ -1,23 +0,0 @@
image: node:current
cache:
paths:
- node_modules/
- .yarn
stages:
- prep
- build
- pack
install deps:
stage: prep
script: yarn install
build:
stage: build
script: npm run build
create zip:
stage: pack
script: npm run build-zip

6
.vscode/settings.json vendored
View File

@ -1,7 +1,5 @@
{
"cSpell.words": [
"PILLARBOX",
"PILLARBOXED",
"aard",
"ardetector",
"autodetect",
@ -16,6 +14,7 @@
"csui",
"decycle",
"disneyplus",
"endregion",
"equalish",
"fith",
"fitw",
@ -24,6 +23,7 @@
"gmail",
"guardline",
"han",
"haram",
"iframe",
"imgur",
"insta",
@ -34,6 +34,8 @@
"nogrow",
"noshrink",
"outro",
"PILLARBOX",
"PILLARBOXED",
"polyfill",
"recursing",
"reddit",

5
CHANGELOG.md
View File

@ -18,10 +18,15 @@
## v5.x (current major)
### v5.1.1
* Fixed autodetection
### v5.1.0
* Re-enable logger
* Move aspect ratio autodetection to requestAnimationFrame
* Fix netflix
### v5.0.7

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "ultrawidify",
"version": "5.1.0",
"version": "5.1.1",
"lockfileVersion": 2,
"requires": true,
"packages": {

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "ultrawidify",
"version": "5.1.0",
"version": "5.1.1",
"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": {

33
src/csui/LoggerUi.vue
View File

@ -33,6 +33,9 @@
<h2>Logger configuration</h2>
</div>
<div class="flex flex-row flex-end w100">
<div v-if="!showTextMode" class="button" @click="loadDefaultConfig()">
Default config
</div>
<div v-if="!showTextMode" class="button" @click="showTextMode = true">
<Icon icon="clipboard-plus" style="font-size: 2em"></Icon>&nbsp; Paste config ...
</div>
@ -56,7 +59,7 @@
<template v-else>
<JsonObject label="logger-settings"
:value="currentSettings"
:ignoreKeys="{'allowLogging': true}"
:ignoreKeys="{'allowLogging': false}"
@change="updateSettingsUi"
></JsonObject>
</template>
@ -107,11 +110,16 @@
</template>
<template v-else>
<div class="panel-middle scrollable flex-grow">
<div v-if="!parsedSettings" class="text-center w100">
Please paste logger config into the text box to the left.
←←←
<div>
<p>Here's express usage tutorial on how to use the logger.</p>
<p>Quick rundown of all the options you can put into logger configuration can be found <a href="https://github.com/tamius-han/ultrawidify/wiki/Development&Debugging:-Logger-options" target="_blank">here</a>.</p>
<p>If you want logging results to appear here, in this window, you need to put appropriate configuration in the fileOptions section of the settings. You can edit the settings by clicking 'paste config' button.</p>
<p>To start logging to console, it's enough to click that tiny 'save' button down there, under logger options (<code>logger-settings.allowLogging</code> must be set to true. Then — depending on where you want logging to happen — you also need to enable either <code>logger-settings.fileOptions.enabled</code> or <code>logger-settings.consoleOptions.enabled</code>)</p>
<p>You can quickly toggle values for various components by clicking on "true" or "false".</p>
<p>Click the small 'save' down at the bottom of this window to immediately apply the logger configuration changes.</p>
<p>Yes, I know this is not a pinnacle of user-friendliness, nor a pinnacle of web design. It was put together very quickly, mostly for my convenience. I have plans to move extension UI from the popup into the player, tho, and these plans will make this window obsolete. Because of that, I plan to do absolutely nothing about the state of this window. Wait for the extension redesign pls.</p>
</div>
<div v-else-if="confHasError" class="warn">
<div v-if="confHasError" class="warn">
Logger configuration contains an error. Cannot start logging.
</div>
<div v-else-if="lastSettings && lastSettings.allowLogging && lastSettings.consoleOptions && lastSettings.consoleOptions.enabled"
@ -160,7 +168,7 @@
<script>
import { mapState } from 'vuex';
import Logger from '../ext/lib/Logger';
import Logger, { baseLoggingOptions } from '../ext/lib/Logger';
import Comms from '../ext/lib/comms/Comms';
import IO from '../common/js/IO';
import JsonObject from '../common/components/JsonEditor/JsonObject';
@ -196,6 +204,12 @@ export default {
}, {
header: "Tracer",
subheader: "I'm already printing stack traces"
}, {
header: "Grûmsh",
subheader: "He who watches"
}, {
header: "Situation Room/The Council",
subheader: "We will always be watching"
}];
this.header = headerRotation[Math.floor(+Date.now() / (3600000*24)) % headerRotation.length] || this.header;
@ -233,8 +247,13 @@ export default {
}
},
methods: {
loadDefaultConfig() {
this.lastSettings = baseLoggingOptions;
this.parsedSettings = JSON.stringify(this.lastSettings, null, 2) || '';
this.currentSettings = JSON.parse(JSON.stringify(this.lastSettings));
},
async getLoggerSettings() {
this.lastSettings = await Logger.getConfig() || {};
this.lastSettings = await Logger.getConfig() || baseLoggingOptions;
this.parsedSettings = JSON.stringify(this.lastSettings, null, 2) || '';
this.currentSettings = JSON.parse(JSON.stringify(this.lastSettings));
},

7
src/ext/conf/ExtConfPatches.js
View File

@ -234,6 +234,13 @@ const ExtensionConfPatch = [
playerNodeCss: "",
}
}
}, {
forVersion: '5.0.8',
updateFn: (userOptions, defaultOptions) => {
userOptions.sites['www.netflix.com'].DOM.player = {
manual: false
}
}
}
];

10
src/ext/conf/ExtensionConf.ts
View File

@ -1048,13 +1048,9 @@ const ExtensionConf: SettingsInterface = {
videoAlignment: VideoAlignmentType.Default,
keyboardShortcutsEnabled: ExtensionMode.Default,
arPersistence: true, // persist aspect ratio between different videos
"DOM": {
"player": {
"manual": true,
"querySelectors": ".VideoContainer",
"additionalCss": "",
"useRelativeAncestor": false,
"playerNodeCss": ""
DOM: {
player: {
manual: false, // as of 2021-09, netflix no longer requires manual player class. This may change in the future tho.
}
}
},

6
src/ext/lib/Logger.ts
View File

@ -28,10 +28,10 @@ export const baseLoggingOptions: LoggerConfig = {
"resizer": true,
"scaler": true,
"stretcher": true,
// "videoRescan": true,
// "playerRescan": true,
"videoRescan": false,
"playerRescan": false,
"arDetect": true,
"arDetect_verbose": true
"arDetect_verbose": false
},
allowBlacklistedOrigins: {
'periodicPlayerCheck': false,

67
src/ext/lib/ar-detect/ArDetector.ts
View File

@ -326,7 +326,7 @@ class ArDetector {
this._paused = false;
this._halted = false;
this._paused = false;
this._exited = false;
// start autodetection
this.startLoop();
@ -342,13 +342,16 @@ class ArDetector {
}
this.animationFrameHandle = window.requestAnimationFrame( (ts) => this.animationFrameBootstrap(ts));
this.logger.log('info', 'debug', `"%c[ArDetect::startLoop] <@${this.arid}> AARD loop started.`, _ard_console_start);
}
stop() {
if (this.animationFrameHandle) {
window.cancelAnimationFrame(this.animationFrameHandle);
}
this.logger.log('info', 'debug', `"%c[ArDetect::stop] <@${this.arid}> Stopping AnimationFrame loop.`, _ard_console_stop);
window.cancelAnimationFrame(this.animationFrameHandle);
} else {
this.logger.log('info', 'debug', `"%c[ArDetect::stop] <@${this.arid}> AnimationFrame loop is already paused (due to an earlier call of this function).`);
}
}
unpause() {
@ -408,13 +411,14 @@ class ArDetector {
* @returns
*/
private canTriggerFrameCheck() {
if (this._paused) {
if (this._paused || this._halted || this._exited) {
return false;
}
// if video was paused & we know that we already checked that frame,
// we will not check it again.
const videoState = this.getVideoPlaybackState();
if (videoState !== VideoPlaybackState.Playing) {
if (this.status.lastVideoStatus === videoState) {
return false;
@ -527,31 +531,35 @@ class ArDetector {
/**
* This is the "main loop" for aspect ratio autodetection
*/
private animationFrameBootstrap(timestamp: number) {
private async animationFrameBootstrap(timestamp: number) {
// this.logger.log('info', 'arDetect_verbose', `[ArDetect::animationFrameBootstrap] <@${this.arid}> New animation frame.\nmanualTickEnabled: ${!this.manualTickEnabled}\ncan trigger frame check? ${this.canTriggerFrameCheck()}\nnext tick? ${this._nextTick}\n => (a&b | c) => Can we do tick? ${ (!this.manualTickEnabled && this.canTriggerFrameCheck()) || this._nextTick}\n\ncan we continue running? ${this && !this._halted && !this._paused}`);
// do timekeeping first
this.addPerformanceTimeMeasure(this.performance.animationFrame, timestamp - this.performance.animationFrame.lastTime)
this.addPerformanceTimeMeasure(this.performance.animationFrame, timestamp - this.performance.animationFrame.lastTime);
this.performance.animationFrame.lastTime = timestamp;
// trigger frame check, if we're allowed to
if ( (!this.manualTickEnabled && this.canTriggerFrameCheck()) || this._nextTick) {
this.logger.log('info', 'arDetect_verbose', `[ArDetect::animationFrameBootstrap] <@${this.arid}> Processing next tick.`);
this._nextTick = false;
try {
const startTime = performance.now();
this.frameCheck();
await this.frameCheck();
this.addPerformanceTimeMeasure(this.performance.aard, performance.now() - startTime);
} catch (e) {
this.logger.log('error', 'debug', `%c[ArDetect::main] <@${this.arid}> Frame check failed:`, "color: #000, background: #f00", e);
this.logger.log('error', 'debug', `%c[ArDetect::animationFrameBootstrap] <@${this.arid}> Frame check failed:`, "color: #000, background: #f00", e);
}
}
if (this && !this._halted && !this._paused) {
this.animationFrameHandle = window.requestAnimationFrame( (ts) => this.animationFrameBootstrap(ts));
} else if (this._halted) {
this.logger.log('info', 'debug', `%c[ArDetect::main] <@${this.arid}> Main autodetection loop exited. Halted? ${this._halted}`, _ard_console_stop);
this.logger.log('info', 'debug', `%c[ArDetect::animationFrameBootstrap] <@${this.arid}> Main autodetection loop exited. Halted? ${this._halted}`, _ard_console_stop);
this._exited = true;
} else {
this.logger.log('info', 'debug', `[ArDetect::main] <@${this.arid}> Not renewing animation frame for some reason. Paused? ${this._paused}; Halted?: ${this._halted}, Exited?: ${this._exited}`);
this.logger.log('info', 'debug', `[ArDetect::animationFrameBootstrap] <@${this.arid}> Not renewing animation frame for some reason. Paused? ${this._paused}; Halted?: ${this._halted}, Exited?: ${this._exited}`);
}
}
@ -620,6 +628,10 @@ class ArDetector {
}
processAr(trueAr){
if (!this.isRunning()) {
this.logger.log('warn', 'debug', `[ArDetect::processAr] <@${this.arid}> Trying to change aspect ratio while AARD is paused.`);
return;
}
this.detectedAr = trueAr;
// poglejmo, če se je razmerje stranic spremenilo
@ -660,7 +672,9 @@ class ArDetector {
id = undefined;
}
frameCheck(){
async frameCheck(){
this.logger.log('info', 'arDetect_verbose', `%c[ArDetect::processAr] <@${this.arid}> Starting frame check.`);
if(! this.video){
this.logger.log('error', 'debug', `%c[ArDetect::frameCheck] <@${this.arid}> Video went missing. Destroying current instance of videoData.`);
this.conf.destroy();
@ -680,7 +694,15 @@ class ArDetector {
//
try {
startTime = performance.now();
// do it in ghetto async. This way, other javascript function should be able to
// get a chance to do something _before_ we process our data
await new Promise<void>(
resolve => {
this.blackframeContext.drawImage(this.video, 0, 0, this.blackframeCanvas.width, this.blackframeCanvas.height);
resolve();
}
);
partialDrawImageTime += performance.now() - startTime;
this.fallbackMode = false;
@ -726,7 +748,12 @@ class ArDetector {
return; // it's prolly just a fluke, so we do nothing special here
}
// draw blackframe sample from our main sample:
await new Promise<void>(
resolve => {
this.blackframeContext.drawImage(this.canvas, this.blackframeCanvas.width, this.blackframeCanvas.height);
resolve();
}
);
partialDrawImageTime += performance.now() - startTime;
this.logger.log('info', 'arDetect_verbose', `%c[ArDetect::frameCheck] canvas.drawImage seems to have worked`, "color:#000; backgroud:#2f5;");
@ -743,7 +770,12 @@ class ArDetector {
// if we are in normal mode though, the frame has yet to be drawn
if (!this.fallbackMode) {
startTime = performance.now();
await new Promise<void>(
resolve => {
this.context.drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height);
resolve();
}
)
partialDrawImageTime += performance.now() - startTime;
}
@ -800,6 +832,8 @@ class ArDetector {
// (since the new letterbox edge isn't present in our sample due to technical
// limitations)
if (this.fallbackMode && guardLineOut.blackbarFail) {
this.logger.log('warn', 'arDetect_verbose', `%c[ArDetect::frameCheck] <@${this.arid}> We are in fallback mode and blackbar failed. Reverting to initial aspect ratio.`);
this.conf.resizer.setAr({type: AspectRatioType.Automatic, ratio: this.defaultAr});
this.guardLine.reset();
this.noLetterboxCanvasReset = true;
@ -808,25 +842,18 @@ class ArDetector {
return;
}
// će se razmerje stranic spreminja iz ožjega na širšega, potem najprej poglejmo za prisotnostjo navpičnih črnih obrob.
// če so prisotne navpične obrobe tudi na levi in desni strani, potlej obstaja možnost, da gre za logo na črnem ozadju.
// v tem primeru obstaja nevarnost, da porežemo preveč. Ker obstaja dovolj velika možnost, da bi porezali preveč, rajši
// ne naredimo ničesar.
//
// če je pillarbox zaznan v primeru spremembe iz ožjega na širše razmerje stranice, razmerje povrnemo na privzeto vrednost.
//
// If aspect ratio changes from narrower to wider, we first check for presence of pillarbox. Presence of pillarbox indicates
// a chance of a logo on black background. We could cut easily cut too much. Because there's a somewhat significant chance
// that we will cut too much, we rather avoid doing anything at all. There's gonna be a next chance.
try{
if(guardLineOut.blackbarFail || guardLineOut.imageFail){
if(this.edgeDetector.findBars(imageData, null, EdgeDetectPrimaryDirection.Horizontal).status === 'ar_known'){
if(guardLineOut.blackbarFail){
this.logger.log('info', 'arDetect', `[ArDetect::frameCheck] Detected blackbar violation and pillarbox. Resetting to default aspect ratio.`);
this.conf.resizer.setAr({type: AspectRatioType.Automatic, ratio: this.defaultAr});
this.guardLine.reset();
} else {
this.logger.log('info', 'arDetect_verbose', `[ArDetect::frameCheck] Guardline failed, blackbar didn't, and we got pillarbox. Doing nothing.`);
}
this.clearImageData(imageData);

178
src/ext/lib/video-data/PageInfo.ts
View File

@ -29,7 +29,7 @@ class PageInfo {
logger: Logger;
settings: Settings;
comms: CommsClient;
videos: VideoData[] = [];
videos: {videoData: VideoData, element: HTMLVideoElement}[] = [];
//#endregion
//#region misc stuff
@ -113,8 +113,8 @@ class PageInfo {
}
for (let video of this.videos) {
try {
(this.comms.unregisterVideo as any)(video.vdid)
video.destroy();
(this.comms.unregisterVideo as any)(video.videoData.vdid)
video.videoData.destroy();
} catch (e) {
this.logger.log('error', ['debug', 'init'], '[PageInfo::destroy] unable to destroy video! Error:', e);
}
@ -135,8 +135,10 @@ class PageInfo {
reset() {
for(let video of this.videos) {
video.destroy();
video.videoData.destroy();
video.videoData = null;
}
this.videos = [];
this.rescan(RescanReason.MANUAL);
}
@ -159,7 +161,7 @@ class PageInfo {
getVideos(host) {
if (this.settings.active.sites[host]?.DOM?.video?.manual
&& this.settings.active.sites[host]?.DOM?.video?.querySelectors){
const videos = document.querySelectorAll(this.settings.active.sites[host].DOM.video.querySelectors);
const videos = document.querySelectorAll(this.settings.active.sites[host].DOM.video.querySelectors) as NodeListOf<HTMLVideoElement>;
if (videos.length) {
return videos;
@ -172,9 +174,25 @@ class PageInfo {
return this.readOnly ? this.hasVideos : this.videos.length;
}
rescan(rescanReason){
const oldVideoCount = this.videos.length;
/**
* Re-scans the page for videos. Removes any videos that no longer exist from our list
* of videos. Destroys all videoData objects for all the videos that don't have their
* own <video> html element on the page.
* @param rescanReason Why was the rescan triggered. Mostly used for logging.
* @returns
*/
rescan(rescanReason?: RescanReason){
// is there any video data objects that had their HTML elements removed but not yet
// destroyed? We clean that up here.
const orphans = this.videos.filter(x => !document.body.contains(x.element));
for (const orphan of orphans) {
orphan.videoData.destroy();
}
// remove all destroyed videos.
this.videos = this.videos.filter(x => !x.videoData.destroyed);
// add new videos
try{
let vids = this.getVideos(window.location.hostname);
@ -191,17 +209,24 @@ class PageInfo {
// add new videos
this.hasVideos = false;
let videoExists = false;
let video, v;
for (video of vids) {
// če najdemo samo en video z višino in širino, to pomeni, da imamo na strani veljavne videe
// če trenutni video nima definiranih teh vrednostih, preskočimo vse nadaljnja preverjanja
// <===[:::::::]===>
for (const videoElement of vids) {
// do not re-add videos that we already track:
if (this.videos.find(x => x.element.isEqualNode(videoElement))) {
continue;
}
// if we find even a single video with width and height, that means the page has valid videos
// if video lacks either of the two properties, we skip all further checks cos pointless
if(video.offsetWidth && video.offsetHeight){
if(!videoElement.offsetWidth || !videoElement.offsetHeight) {
continue;
}
// at this point, we're certain that we found new videos. Let's update some properties:
this.hasVideos = true;
// if PageInfo is marked as "readOnly", we actually aren't adding any videos to anything because
// that's super haram. We're only interested in whether
if (this.readOnly) {
// in lite mode, we're done. This is all the info we want, but we want to actually start doing
// things that interfere with the website. We still want to be running a rescan, tho.
@ -211,44 +236,21 @@ class PageInfo {
}
return;
}
} else {
continue;
}
videoExists = false;
for (v of this.videos) {
if (v.destroyed) {
continue; //TODO: if destroyed video is same as current video, copy aspect ratio settings to current video
}
if (v.video == video) {
videoExists = true;
break;
}
}
if (videoExists) {
continue;
} else {
this.logger.log('info', 'videoRescan', "[PageInfo::rescan] found new video candidate:", video, "NOTE:: Video initialization starts here:\n--------------------------------\n")
this.logger.log('info', 'videoRescan', "[PageInfo::rescan] found new video candidate:", videoElement, "NOTE:: Video initialization starts here:\n--------------------------------\n")
try {
v = new VideoData(video, this.settings, this);
this.videos.push(v);
const newVideo = new VideoData(videoElement, this.settings, this);
this.videos.push({videoData: newVideo, element: videoElement});
} catch (e) {
this.logger.log('error', 'debug', "rescan error: failed to initialize videoData. Skipping this video.",e);
}
this.logger.log('info', 'videoRescan', "END VIDEO INITIALIZATION\n\n\n-------------------------------------\nvideos[] is now this:", this.videos,"\n\n\n\n\n\n\n\n")
}
}
this.removeDestroyed();
// če smo ostali brez videev, potem odregistriraj stran.
// če nismo ostali brez videev, potem registriraj stran.
//
// if we're left without videos on the current page, we unregister the page.
// if we have videos, we call register.
if (this.comms) {
@ -280,27 +282,23 @@ class PageInfo {
}
} catch(e) {
// če pride do zajeba, potem lahko domnevamo da na strani ni nobenega videa. Uničimo vse objekte videoData
// da preprečimo večkratno inicializacijo. Če smo se z našim ugibom zmotili, potem se bodo vsi videi ponovno
// našli ob naslednjem preiskovanju
//
// if we encounter a fuckup, we can assume that no videos were found on the page. We destroy all videoData
// objects to prevent multiple initialization (which happened, but I don't know why). No biggie if we destroyed
// videoData objects in error — they'll be back in the next rescan
this.logger.log('error', 'debug', "rescan error: — destroying all videoData objects",e);
for (const v of this.videos) {
v.destroy();
v.videoData.destroy();
}
this.videos = [];
return;
}
if(rescanReason == RescanReason.PERIODIC){
this.scheduleRescan(RescanReason.PERIODIC);
}
}
removeDestroyed(){
this.videos = this.videos.filter( vid => vid.destroyed === false);
this.videos = this.videos.filter( vid => vid.videoData.destroyed === false);
}
scheduleRescan(rescanReason){
@ -358,14 +356,14 @@ class PageInfo {
initArDetection(playingOnly){
if (playingOnly) {
for(let vd of this.videos){
if(vd.isPlaying()) {
vd.initArDetection();
if(vd.videoData.isPlaying()) {
vd.videoData.initArDetection();
}
}
return;
} else {
for(let vd of this.videos){
vd.initArDetection();
vd.videoData.initArDetection();
}
}
}
@ -376,13 +374,13 @@ class PageInfo {
pauseProcessing(playingOnly){
if (playingOnly) {
for(let vd of this.videos){
if (vd.isPlaying()) {
vd.pause();
if (vd.videoData.isPlaying()) {
vd.videoData.pause();
}
}
} else {
for(let vd of this.videos){
vd.pause();
vd.videoData.pause();
}
}
}
@ -390,18 +388,18 @@ class PageInfo {
resumeProcessing(resumeAutoar = false, playingOnly = false){
if (playingOnly) {
for(let vd of this.videos){
if (vd.isPlaying()) {
vd.resume();
if (vd.videoData.isPlaying()) {
vd.videoData.resume();
if(resumeAutoar){
vd.resumeAutoAr();
vd.videoData.resumeAutoAr();
}
}
}
} else {
for(let vd of this.videos){
vd.resume();
vd.videoData.resume();
if(resumeAutoar){
vd.resumeAutoAr();
vd.videoData.resumeAutoAr();
}
}
}
@ -414,13 +412,13 @@ class PageInfo {
}
if (playingOnly) {
for(let vd of this.videos){
if (vd.isPlaying()) {
vd.startArDetection();
if (vd.videoData.isPlaying()) {
vd.videoData.startArDetection();
}
}
} else {
for(let vd of this.videos){
vd.startArDetection();
vd.videoData.startArDetection();
}
}
}
@ -428,13 +426,13 @@ class PageInfo {
stopArDetection(playingOnly){
if (playingOnly) {
for(let vd of this.videos){
if (vd.isPlaying()) {
vd.stopArDetection();
if (vd.videoData.isPlaying()) {
vd.videoData.stopArDetection();
}
}
} else {
for(let vd of this.videos){
vd.stopArDetection();
vd.videoData.stopArDetection();
}
}
}
@ -449,8 +447,8 @@ class PageInfo {
try {
for (let vd of this.videos) {
if (!playingOnly || vd.isPlaying()) {
vd.resetLastAr();
if (!playingOnly || vd.videoData.isPlaying()) {
vd.videoData.resetLastAr();
}
}
} catch (e) {
@ -464,14 +462,14 @@ class PageInfo {
// TODO: find a way to only change aspect ratio for one video
if (ar === AspectRatioType.Reset) {
for (let vd of this.videos) {
if (!playingOnly || vd.isPlaying()) {
vd.resetAr();
if (!playingOnly || vd.videoData.isPlaying()) {
vd.videoData.resetAr();
}
}
} else {
for (let vd of this.videos) {
if (!playingOnly || vd.isPlaying()) {
vd.setAr(ar)
if (!playingOnly || vd.videoData.isPlaying()) {
vd.videoData.setAr(ar)
}
}
}
@ -480,13 +478,13 @@ class PageInfo {
setVideoAlignment(videoAlignment, playingOnly) {
if (playingOnly) {
for(let vd of this.videos) {
if (vd.isPlaying()) {
vd.setVideoAlignment(videoAlignment)
if (vd.videoData.isPlaying()) {
vd.videoData.setVideoAlignment(videoAlignment)
}
}
} else {
for(let vd of this.videos) {
vd.setVideoAlignment(videoAlignment)
vd.videoData.setVideoAlignment(videoAlignment)
}
}
}
@ -494,13 +492,13 @@ class PageInfo {
setPanMode(mode, playingOnly?: boolean) {
if (playingOnly) {
for(let vd of this.videos) {
if (vd.isPlaying()) {
vd.setPanMode(mode);
if (vd.videoData.isPlaying()) {
vd.videoData.setPanMode(mode);
}
}
} else {
for(let vd of this.videos) {
vd.setPanMode(mode);
vd.videoData.setPanMode(mode);
}
}
}
@ -508,13 +506,13 @@ class PageInfo {
restoreAr(playingOnly?: boolean) {
if (playingOnly) {
for(let vd of this.videos){
if (vd.isPlaying()) {
vd.restoreAr();
if (vd.videoData.isPlaying()) {
vd.videoData.restoreAr();
}
}
} else {
for(let vd of this.videos){
vd.restoreAr();
vd.videoData.restoreAr();
}
}
}
@ -524,13 +522,13 @@ class PageInfo {
if (playingOnly) {
for(let vd of this.videos){
if (vd.isPlaying()) {
vd.setStretchMode(stretchMode, fixedStretchRatio)
if (vd.videoData.isPlaying()) {
vd.videoData.setStretchMode(stretchMode, fixedStretchRatio)
}
}
} else {
for(let vd of this.videos){
vd.setStretchMode(stretchMode, fixedStretchRatio)
vd.videoData.setStretchMode(stretchMode, fixedStretchRatio)
}
}
}
@ -538,33 +536,33 @@ class PageInfo {
setZoom(zoomLevel, no_announce?: boolean, playingOnly?: boolean) {
if (playingOnly) {
for(let vd of this.videos) {
if (vd.isPlaying()) {
vd.setZoom(zoomLevel, no_announce);
if (vd.videoData.isPlaying()) {
vd.videoData.setZoom(zoomLevel, no_announce);
}
}
} else {
for(let vd of this.videos) {
vd.setZoom(zoomLevel, no_announce);
vd.videoData.setZoom(zoomLevel, no_announce);
}
}
}
zoomStep(step, playingOnly?: boolean) {
for(let vd of this.videos){
if (!playingOnly || vd.isPlaying()) {
vd.zoomStep(step);
if (!playingOnly || vd.videoData.isPlaying()) {
vd.videoData.zoomStep(step);
}
}
}
markPlayer(name, color) {
for (let vd of this.videos) {
vd.markPlayer(name,color);
vd.videoData.markPlayer(name,color);
}
}
unmarkPlayer() {
for (let vd of this.videos) {
vd.unmarkPlayer();
vd.videoData.unmarkPlayer();
}
}
@ -579,13 +577,13 @@ class PageInfo {
setManualTick(manualTick) {
for(let vd of this.videos) {
vd.setManualTick(manualTick);
vd.videoData.setManualTick(manualTick);
}
}
tick() {
for(let vd of this.videos) {
vd.tick();
vd.videoData.tick();
}
}

2
src/manifest.json
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": "5.1.0",
"version": "5.1.1",
"applications": {
"gecko": {
"id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}"

21
src/popup/panels/WhatsNewPanel.vue
View File

@ -2,20 +2,23 @@
<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">5.1.0</p>
<p class="label">5.1.1</p>
<p>
In last patch notes:
</p>
<pre>
> Hopefully that didn't break anything too much
</pre>
<p>
Well, about that ...
</p>
<ul>
<li>
Under the hood changes: aspect ratio autodetection now uses requestAnimationFrame instead of a setTimeout/setInterval-based loop.
</li>
<li>
Logger is sorta fixed.
Fixed the problem where autodetection wouldn't work for most people that aren't me.
</li>
</ul>
<p>
Hopefully that didn't break anything too much.
</p>
<p><small>
<b>Known issues:</b> zooming is limited in Chromium-based browsers. This is a browser bug that no extension can fix. See <a href="https://github.com/tamius-han/ultrawidify/discussions/161" target="_blank">this</a> for more info.
<b>Known issues:</b> zooming is limited in Chromium-based browsers. This is a browser bug that no extension can fix. Technical details about this can be found <a href="https://stuff.tamius.net/sacred-texts/2021/08/19/ultrawidify-and-chrome-2021-edition-episode-2/" target="_blank">on my blog.</a>.
</small></p>
</div>
</template>