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

UI: can set default crop, stretch. (TODO: actually get and use those values)

Browse Source
This commit is contained in:
Tamius Han 2021-11-23 01:32:42 +01:00
parent ee8ac1d9ee
commit 30835e94c0
5 changed files with 239 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/common/interfaces/SettingsInterface.ts
View File

@ -172,6 +172,10 @@ interface SettingsInterface {
restrictions?: RestrictionsSettings;
crop: {
default: any;
},
zoom: {
minLogZoom: number,
maxLogZoom: number,
@ -186,6 +190,7 @@ interface SettingsInterface {
defaultAr?: any
},
stretch: {
default: any;
conditionalDifferencePercent: number // black bars less than this wide will trigger stretch
// if mode is set to '1'. 1.0=100%
},
@ -283,10 +288,15 @@ interface SettingsInterface {
//
sites: {
[x: string]: {
mode?: ExtensionMode,
autoar?: ExtensionMode,
autoarFallback?: ExtensionMode,
stretch?: StretchType,
defaultCrop?: any, // v6 new
defaultStretch?: any, // v6 new
// everything 'superseded by' needs to be implemented
// as well as ported from the old settings
mode?: ExtensionMode, // v6 — superseded by defaultCrop
autoar?: ExtensionMode, // v6 — superseded by defaultCrop
autoarFallback?: ExtensionMode, // v6 — deprecated, no replacement
stretch?: StretchType, // v6 — superseded by defaultStretch
videoAlignment?: VideoAlignmentType,
keyboardShortcutsEnabled?: ExtensionMode,
type?: string,

151
src/csui/PlayerUiPanels/VideoSettings.vue
View File

@ -1,5 +1,8 @@
<template>
<div class="flex flex-row flex-wrap" style="padding-bottom: 20px">
<!-- CROP OPTIONS -->
<div v-if="settings" class="sub-panel">
<div class="flex flex-row">
<mdicon name="crop" :size="32" />
@ -15,7 +18,45 @@
>
</ShortcutButton>
</div>
<div class="flex flex-row">
<div class="label">Default for this site</div>
<div class="select">
<select
:value="siteDefaultCrop"
@click="setDefaultCrop($event, 'site')"
>
<option
v-for="(command, index) of settings?.active.commands.crop"
:key="index"
:value="JSON.stringify(command.arguments)"
>
{{command.label}}
</option>
</select>
</div>
</div>
<div class="flex flex-row">
<div class="label">Extension default</div>
<div class="select">
<select
:value="extensionDefaultCrop"
@click="setDefaultCrop($event, 'global')"
>
<option
v-for="(command, index) of settings?.active.commands.crop"
:key="index"
:value="JSON.stringify(command.arguments)"
>
{{command.label}}
</option>
</select>
</div>
</div>
</div>
<!-- STRETCH OPTIONS -->
<div v-if="settings" class="sub-panel">
<div class="flex flex-row">
<mdicon name="stretch-to-page-outline" :size="32" />
@ -31,7 +72,45 @@
>
</ShortcutButton>
</div>
<div class="flex flex-row">
<div class="label">Default for this site</div>
<div class="select">
<select
v-model="siteDefaultStretchMode"
@click="setDefaultStretchingMode($event, 'site')"
>
<option
v-for="(command, index) of settings?.active.commands.stretch"
:key="index"
:value="JSON.stringify(command.arguments)"
>
{{command.label}}
</option>
</select>
</div>
</div>
<div class="flex flex-row">
<div class="label">Extension default</div>
<div class="select">
<select
v-model="extensionDefaultStretchMode"
@click="setDefaultStretchingMode($event, 'global')"
>
<option
v-for="(command, index) of settings?.active.commands.stretch"
:key="index"
:value="JSON.stringify(command.arguments)"
>
{{command.label}}
</option>
</select>
</div>
</div>
</div>
<!-- ZOOM OPTIONS -->
<div class="sub-panel">
<div class="flex flex-row">
<mdicon name="magnify-plus-outline" :size="32" />
@ -146,6 +225,7 @@ import ComputeActionsMixin from '../../common/mixins/ComputeActionsMixin';
import ExecAction from '../ui-libs/ExecAction';
import BrowserDetect from '../../ext/conf/BrowserDetect';
import AspectRatioType from '../../common/enums/AspectRatioType.enum';
import StretchType from '../../common/enums/StretchType.enum';
import CropModePersistence from '../../common/enums/CropModePersistence.enum';
import AlignmentOptionsControlComponent from './AlignmentOptionsControlComponent.vue';
@ -155,6 +235,8 @@ export default {
exec: null,
scope: 'page',
CropModePersistence: CropModePersistence,
StretchType: StretchType,
AspectRatioType: AspectRatioType,
zoomAspectRatioLocked: true,
zoom: {
x: 0,
@ -163,7 +245,7 @@ export default {
}
},
mixins: [
ComputeActionsMixin
ComputeActionsMixin,
],
props: [
'settings',
@ -189,6 +271,29 @@ export default {
AlignmentOptionsControlComponent
},
computed: {
// because this is passed to a <select>, all the values must be
// passed as strings.
extensionDefaultCrop() {
return JSON.stringify(
this.settings?.active.crop?.default ?? {type: AspectRatioType.Automatic}
);
},
siteDefaultCrop() {
console.log('default crop for site:', JSON.parse(JSON.stringify(this.settings)), this.settings?.active.sites[window.location.hostname], this.settings?.active.sites[window.location.hostname].defaultCrop)
return JSON.stringify(
this.settings?.getDefaultCrop() ?? {type: AspectRatioType.Automatic}
);
},
extensionDefaultStretchMode () {
return JSON.stringify(
this.settings?.active.stretch.default ?? {type: StretchType.NoStretch}
);
},
siteDefaultStretchMode () {
return JSON.stringify(
this.settings?.getDefaultStretchMode() ?? {type: StretchType.NoStretch}
);
}
},
methods: {
getZoomForDisplay(axis) {
@ -236,6 +341,50 @@ export default {
newZoom = Math.pow(2, newZoom);
this.eventBus.send('set-zoom', {zoom: newZoom, axis: axis, noAnnounce: true});
},
/**
* Sets default crop, for either site or global
*/
setDefaultCrop($event, globalOrSite) {
const commandArguments = JSON.parse($event.target.value);
if (globalOrSite === 'site') {
if (!this.settings.active.sites[window.location.hostname]) {
this.settings.active.sites[window.location.hostname] = this.settings.getDefaultSiteConfiguration();
}
this.settings.active.sites[window.location.hostname].defaultCrop = commandArguments;
} else {
// eventually, this 'if' will be safe to remove (and we'll be able to only
// get away with the 'else' section) Maybe in 6 months or so.
if (!this.settings.active.crop) {
console.log('active settings crop not present. Well add');
this.settings.active['crop'] = {
default: commandArguments
}
} else {
console.log('default crop settings are present:', JSON.parse(JSON.stringify(this.settings.active.crop)))
this.settings.active.crop.default = commandArguments;
}
}
this.settings.saveWithoutReload();
},
/**
* Sets default stretching mode, for either site or global
*/
setDefaultStretchingMode($event, globalOrSite) {
const commandArguments = JSON.parse($event.target.value);
if (globalOrSite === 'site') {
if (!this.settings.active.sites[window.location.hostname]) {
this.setting.active.sites[window.location.hostname] = this.settings.getDefaultSiteConfiguration();
}
this.setting.active.sites[window.location.hostname].defaultStretch = commandArguments;
} else {
this.settings.active.stretch.default = commandArguments;
}
this.settings.saveWithoutReload();
}
}
}
</script>

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

@ -140,6 +140,11 @@ const ExtensionConf: SettingsInterface = {
testRowOffset: 0.02 // we test this % of height from detected edge
}
},
crop: {
default: {
type: AspectRatioType.Automatic,
}
},
zoom: {
minLogZoom: -1,
maxLogZoom: 3,
@ -152,6 +157,9 @@ const ExtensionConf: SettingsInterface = {
mousePanReverseMouse: false,
},
stretch: {
default: {
type: StretchType.NoStretch
},
conditionalDifferencePercent: 0.05 // black bars less than this wide will trigger stretch
// if mode is set to '1'. 1.0=100%
},
@ -1360,10 +1368,10 @@ const ExtensionConf: SettingsInterface = {
// stretch? <stretch mode> // automatically stretch video on this site in this manner
// videoAlignment? <left|center|right>
//
// type: <official|community|user> // 'official' — blessed by Tam.
// // 'community' — blessed by reddit.
// // 'user' — user-defined (not here)
// override: <true|false> // override user settings for this site on update
// type: <official|community|user-added> // 'official' — blessed by Tam.
// // 'community' — blessed by people sending me messages.
// // 'user-added' — user-defined (not here)
// override: <true|false> // override user settings for this site on update
// }
//
// Valid values for options:

85
src/ext/lib/Settings.ts
View File

@ -11,6 +11,7 @@ import BrowserDetect from '../conf/BrowserDetect';
import Logger from './Logger';
import SettingsInterface from '../../common/interfaces/SettingsInterface';
import { browser } from 'webextension-polyfill-ts';
import AspectRatioType from '../../common/enums/AspectRatioType.enum';
if(process.env.CHANNEL !== 'stable'){
console.info("Loading Settings");
@ -80,13 +81,13 @@ class Settings {
return browser.runtime.getManifest().version;
}
getExtensionVersion(): string {
return Settings.getExtensionVersion();
return Settings.getExtensionVersion();
}
compareExtensionVersions(a, b) {
let aa = a.split('.');
let bb = b.split('.');
if (+aa[0] !== +bb[0]) {
// difference on first digit
return +aa[0] - +bb[0];
@ -105,8 +106,8 @@ class Settings {
aa[3] = aa[3] === undefined ? 0 : aa[3];
bb[3] = bb[3] === undefined ? 0 : bb[3];
// also, the fourth digit can start with a letter.
// versions that start with a letter are ranked lower than
// also, the fourth digit can start with a letter.
// versions that start with a letter are ranked lower than
// versions x.x.x.0
if (
(isNaN(+aa[3]) && !isNaN(+bb[3]))
@ -115,7 +116,7 @@ class Settings {
return isNaN(+aa[3]) ? -1 : 1;
}
// at this point, either both version numbers are a NaN or
// at this point, either both version numbers are a NaN or
// both versions are a number.
if (!isNaN(+aa[3])) {
return +aa[3] - +bb[3];
@ -168,7 +169,7 @@ class Settings {
const updateFn = patches[index].updateFn;
delete patches[index].forVersion;
delete patches[index].updateFn;
if (Object.keys(patches[index]).length > 0) {
ObjectCopy.overwrite(this.active, patches[index]);
}
@ -213,11 +214,11 @@ class Settings {
// if there's no settings saved, return default settings.
if(! settings || (Object.keys(settings).length === 0 && settings.constructor === Object)) {
this.logger?.log(
'info',
'settings',
'[Settings::init] settings don\'t exist. Using defaults.\n#keys:',
settings ? Object.keys(settings).length : 0,
'\nsettings:',
'info',
'settings',
'[Settings::init] settings don\'t exist. Using defaults.\n#keys:',
settings ? Object.keys(settings).length : 0,
'\nsettings:',
settings
);
this.active = this.getDefaultSettings();
@ -262,7 +263,7 @@ class Settings {
// set 'whatsNewChecked' flag to false when updating, always
this.active.whatsNewChecked = false;
// update settings version to current
this.active.version = this.version;
this.active.version = this.version;
await this.save();
return this.active;
@ -270,7 +271,7 @@ class Settings {
async get() {
let ret;
ret = await browser.storage.local.get('uwSettings');
this.logger?.log('info', 'settings', 'Got settings:', ret && ret.uwSettings && JSON.parse(ret.uwSettings));
@ -350,18 +351,18 @@ class Settings {
// -----------------------------------------
// Nastavitve za posamezno stran
// Config for a given page:
//
//
// <hostname> : {
// status: <option> // should extension work on this site?
// arStatus: <option> // should we do autodetection on this site?
// statusEmbedded: <option> // reserved for future... maybe
// }
//
// Veljavne vrednosti za možnosti
// }
//
// Veljavne vrednosti za možnosti
// Valid values for options:
//
// status, arStatus, statusEmbedded:
//
//
// * enabled — always allow
// * basic — only allow fullscreen
// * default — allow if default is to allow, block if default is to block
@ -405,7 +406,7 @@ class Settings {
if (this.active.sites[site].mode === ExtensionMode.Enabled) {
return ExtensionMode.Enabled;
} else if (this.active.sites[site].mode === ExtensionMode.Basic) {
return ExtensionMode.Basic;
return ExtensionMode.Basic;
} else if (this.active.sites[site].mode === ExtensionMode.Disabled) {
return ExtensionMode.Disabled;
} else {
@ -415,7 +416,7 @@ class Settings {
return ExtensionMode.Disabled;
}
}
} catch(e){
this.logger?.log('error', 'settings', "[Settings.js::canStartExtension] Something went wrong — are settings defined/has init() been called?\n\nerror:", e, "\n\nSettings object:", this)
@ -470,7 +471,7 @@ class Settings {
}
try {
if (!this.active.sites[site]
if (!this.active.sites[site]
|| this.active.sites[site].keyboardShortcutsEnabled === undefined
|| this.active.sites[site].keyboardShortcutsEnabled === ExtensionMode.Default) {
return this.keyboardShortcutsEnabled('@global');
@ -518,7 +519,7 @@ class Settings {
);
// }
// if site is not defined, we use default mode:
// if site is not defined, we use default mode:
if (! this.active.sites[site]) {
this.logger?.log('info', ['settings', 'aard', 'init', 'debug'], "[Settings::canStartAutoAr] Settings not defined for this site, returning defaults.", site, this.active.sites[site], this.active.sites);
return this.active.sites['@global'].autoar === ExtensionMode.Enabled;
@ -548,7 +549,7 @@ class Settings {
if (!option || allDefault[option] === undefined) {
return allDefault;
}
return allDefault[option];
}
@ -561,7 +562,7 @@ class Settings {
return this.active.miscSettings.defaultAr;
}
getDefaultStretchMode(site) {
getDefaultStretchMode_legacy(site) {
if (site && (this.active.sites[site]?.stretch ?? StretchType.Default) !== StretchType.Default) {
return this.active.sites[site].stretch;
}
@ -585,6 +586,42 @@ class Settings {
return this.active.sites['@global'].videoAlignment;
}
/**
* Gets default site configuration. Only returns essential settings.
* @returns
*/
getDefaultSiteConfiguration() {
return {
type: 'user-added',
defaultCrop: {
type: AspectRatioType.Automatic, // AARD is enabled by default
},
defaultStretch: {
type: StretchType.NoStretch, // because we aren't uncultured savages
},
}
}
/**
* Gets default cropping mode for extension.
* Returns site default if defined, otherwise it returns extension default.
* If extension default is not defined because extension updated but the
* settings didn't port over, we return automatic.
*/
getDefaultCrop(site?: string) {
return this.active.sites[site ?? window.location.hostname]?.defaultCrop ?? this.active.crop?.default ?? {type: AspectRatioType.Automatic};
}
/**
* Gets default stretching mode for extension.
* Returns site default if defined, otherwise it returns extension default.
* If extension default is not defined because extension updated but the
* settings didn't port over, we return automatic.
*/
getDefaultStretchMode(site?: string) {
return this.active.sites[site ?? window.location.hostname]?.defaultStretch ?? this.active.stretch.default ?? {type: StretchType.NoStretch};
}
}
export default Settings;

4
src/ext/lib/video-transform/Stretcher.ts
View File

@ -31,13 +31,13 @@ class Stretcher {
this.conf = videoData;
this.logger = videoData.logger;
this.settings = videoData.settings;
this.mode = this.settings.getDefaultStretchMode(window.location.hostname);
this.mode = this.settings.getDefaultStretchMode_legacy(window.location.hostname);
this.fixedStretchRatio = undefined;
}
setStretchMode(stretchMode, fixedStretchRatio?) {
if (stretchMode === StretchType.Default) {
this.mode = this.settings.getDefaultStretchMode(window.location.hostname);
this.mode = this.settings.getDefaultStretchMode_legacy(window.location.hostname);
} else {
if (stretchMode === StretchType.Fixed || stretchMode == StretchType.FixedSource) {
this.fixedStretchRatio = fixedStretchRatio;