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

Update settings object, finalize-ish site settings panel

Browse Source
This commit is contained in:
Tamius Han 2023-01-15 22:11:47 +01:00
parent 30b028d836
commit cc0ae60c83
9 changed files with 392 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -357,11 +357,8 @@ export interface SiteSettingsInterface {
type?: 'official' | 'community' | 'user-defined' | 'testing' | 'officially-disabled';
persistOption?: { // must be defined in @global and @empty
crop?: CropModePersistence,
stretch?: CropModePersistence,
alignment?: CropModePersistence
},
// must be defined in @global and @empty
persistCSA?: CropModePersistence, // CSA - crop, stretch, alignment
defaults?: { // must be defined in @global and @empty
crop?: {type: AspectRatioType, [x: string]: any},

4
src/common/js/utils.ts
View File

@ -11,8 +11,8 @@ export function _cp(obj) {
try {
return JSON.parse(JSON.stringify(obj));
} catch (e) {
console.error('Failed to parse json. This probably means that the data we received was not an object. Will return data as-is');
console.error('data in:', obj, 'error:', e);
// console.error('Failed to parse json. This probably means that the data we received was not an object. Will return data as-is');
// console.error('data in:', obj, 'error:', e);
return obj;
}
}

58
src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
View File

@ -1,57 +1,13 @@
<template>
<div class="flex flex-column w-100">
<h2>Settings for {{site}}</h2>
<SiteExtensionSettings
v-if="settings"
:settings="settings"
:site="site"
:siteSettings="globalSettings"
:isDefaultConfiguration="true"
></SiteExtensionSettings>
<h2>Default settings</h2>
<div class="field">
<div class="label">Default crop:</div>
<div class="select">
<select>
<!-- todo: load crop options -->
</select>
</div>
<div class="hint">'Auto' option will enable autodetection. 'Reset' will disable extension until manually activated.</div>
</div>
<div class="field">
<div class="label">Default stretch:</div>
<div class="select">
<select>
<!-- todo: load stretch options -->
</select>
</div>
</div>
<div class="field">
<div class="label">Persist crop mode between videos</div>
<div class="select">
<select>
<!-- todo: load crop mode persistence -->
</select>
</div>
</div>
<div class="field">
<div class="label">Only enable extension in full screen</div>
<div class="select">
<select>
</select>
</div>
</div>
<div class="field">
<div class="label">Only enable autodetection in full screen</div>
<div class="select">
<select>
</select>
</div>
</div>
<!-- <SiteSettingsBasicTable
:settings="settings"
></SiteSettingsBasicTable> -->
@ -65,7 +21,8 @@ import SiteExtensionSettings from './PanelComponents/ExtensionSettings/SiteExten
export default {
data() {
return {
}
},
mixins: [
@ -78,6 +35,11 @@ export default {
SiteExtensionSettings,
SiteSettingsBasicTable
},
computed: {
globalSettings() {
return this.settings?.getSiteSettings('@global') ?? null;
}
}
}
</script>

410
src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue
View File

@ -1,41 +1,144 @@
<template>
<div>
<h3>Extension settings</h3>
<!-- Enable extension -->
<div class="field">
<div class="label">
Enable extension under the following conditions:
</div>
<ul>
<li>while in full screen</li>
<li>while in theater mode</li>
<li>during normal playback</li>
</ul>
<div class="select">
<select
v-model="simpleExtensionSettings.enable"
@click="setExtensionMode('enable', $event)"
>
<option
v-if="simpleExtensionSettings.enable === 'complex'"
value="complex"
>
(Site uses advanced settings)
</option>
<template v-if="isDefaultConfiguration">
<option value="disabled">
Disabled (unless enabled for specific site)
</option>
</template>
<template v-else>
<option value="default">
Use default ()
</option>
<option value="disabled">
Never
</option>
</template>
<option value="fs">
Fullscreen only
</option>
<option value="theater">
Fullscreen and theater mode
</option>
<option value="enabled">
Always
</option>
</select>
</div>
</div>
<!-- Enable AARD -->
<div class="field">
<div class="label">
Enable automatic aspect ratio detection under the following conditions:
</div>
<ul>
<li>while in full screen</li>
<li>while in theater mode</li>
<li>during normal playback</li>
</ul>
<div class=""></div>
<div class="select">
<select
v-model="simpleExtensionSettings.enableAard"
@click="setExtensionMode('enableAard', $event)"
>
<option
v-if="simpleExtensionSettings.enable === 'complex'"
value="complex"
>
(Site uses advanced settings)
</option>
<template v-if="isDefaultConfiguration">
<option value="disabled">
Disabled (unless enabled for specific site)
</option>
</template>
<template v-else>
<option value="default">
Use default ()
</option>
<option value="disabled">
Never
</option>
</template>
<option value="fs">
Fullscreen only
</option>
<option value="theater">
Fullscreen and theater mode
</option>
<option value="enabled">
Always
</option>
</select>
</div>
</div>
<!-- Enable keyboard -->
<div class="field">
<div class="label">
Enable keyboard shortcuts under the following conditions
</div>
<div class="select">
<select
v-model="simpleExtensionSettings.enableKeyboard"
@click="setExtensionMode('enableKeyboard', $event)"
>
<option
v-if="simpleExtensionSettings.enable === 'complex'"
value="complex"
>
(Site uses advanced settings)
</option>
<template v-if="isDefaultConfiguration">
<option value="disabled">
Disabled (unless enabled for specific site)
</option>
</template>
<template v-else>
<option value="default">
Use default ()
</option>
<option value="disabled">
Never
</option>
</template>
<option value="fs">
Fullscreen only
</option>
<option value="theater">
Fullscreen and theater mode
</option>
<option value="enabled">
Always
</option>
</select>
</div>
</div>
<!-- Default crop -->
<div class="field">
<div class="label">Default crop:</div>
<div class="select">
<select
v-model="siteDefaultCrop"
@click="setOption('defaultCrop', $event)"
@click="setOption('defaults.crop', $event)"
>
<option
v-if="site !== '@global'"
v-if="!isDefaultConfiguration"
:value="undefined"
>
Use default ({{defaultCrop}})
Use default ({{getCommandValue(settings?.active.commands.crop, siteSettings.data.defaults.crop)}})
</option>
<option
v-for="(command, index) of settings?.active.commands.crop"
@ -49,18 +152,19 @@
<div class="hint">This is how extension will crop video if/when autodetection is disabled. Pick 'Reset' option to keep aspect ratio as-is by default.</div>
</div>
<!-- Default stretch -->
<div class="field">
<div class="label">Default stretch:</div>
<div class="select">
<select
v-model="siteDefaultStretchMode"
@click="setOption('defaultStretch', $event)"
v-model="siteDefaultStretch"
@click="setOption('defaults.stretch', $event)"
>
<option
v-if="site !== '@global'"
v-if="!isDefaultConfiguration"
:value="undefined"
>
Use default ({{defaultStretch}})
Use default ({{getCommandValue(settings?.active.commands.stretch, siteSettings.data.defaults.stretch)}})
</option>
<option
v-for="(command, index) of settings?.active.commands.stretch"
@ -73,18 +177,44 @@
</div>
</div>
<!-- Default alignment -->
<div class="field">
<div class="label">Persist crop mode between videos</div>
<div class="label">Default alignment:</div>
<div class="select">
<select
v-model="siteDefaultCropModePersistence"
@click="setOption('cropModePersistence')"
v-model="siteDefaultAlignment"
@click="setOption('defaults.alignment', $event)"
>
<option
v-if="site !== '@global'"
v-if="!isDefaultConfiguration"
:value="undefined"
>
Use default ({{getAlignmentLabel(siteSettings.data.defaults.alignment)}})
</option>
<option
v-for="(command, index) of alignmentOptions"
:key="index"
:value="JSON.stringify(command.arguments)"
>
{{command.label}}
</option>
</select>
</div>
</div>
<!-- Crop, et. al. Persistence -->
<div class="field">
<div class="label">Persist crop, stretch, and alignment between videos</div>
<div class="select">
<select
v-model="siteDefaultCropPersistence"
@click="setOption('persistCSA', $event)"
>
<option
v-if="!isDefaultConfiguration"
:value="CropModePersistence.Default"
>
Use default ({{defaultCropPersistence}})
Use default ({{defaultPersistanceLabel()}})
</option>
<option :value="CropModePersistence.Disabled">Disabled</option>
<option :value="CropModePersistence.UntilPageReload">Until page reload</option>
@ -93,44 +223,36 @@
</select>
</div>
</div>
<div class="field">
<div class="label">Persist stretch mode between videos (TODO — this is not yet implemented)</div>
<div class="select">
<select
v-model="siteDefaultCropModePersistence"
@click="setOption('cropModePersistence')"
>
<option
v-if="site !== '@global'"
:value="CropModePersistence.Default"
>
Use default ({{defaultCropPersistence}})
</option>
<option :value="CropModePersistence.Disabled">Disabled</option>
<option :value="CropModePersistence.UntilPageReload">Until page reload</option>
<option :value="CropModePersistence.CurrentSession">Current session</option>
<option :value="CropModePersistence.Forever">Always persist</option>
</select>
</div>
</div>
</div>
</template>
<script>
import ExtensionMode from '../../../../../common/enums/ExtensionMode.enum';
import VideoAlignmentType from '../../../../../common/enums/VideoAlignmentType.enum';
import CropModePersistence from './../../../../../common/enums/CropModePersistence.enum';
export default {
data() {
return {
CropModePersistence: CropModePersistence,
alignmentOptions: [
{label: 'Top left', arguments: {x: VideoAlignmentType.Left, y: VideoAlignmentType.Top}},
{label: 'Top center', arguments: {x: VideoAlignmentType.Center, y: VideoAlignmentType.Top}},
{label: 'Top right', arguments: {x: VideoAlignmentType.Right, y: VideoAlignmentType.Top}},
{label: 'Left', arguments: {x: VideoAlignmentType.Left, y: VideoAlignmentType.Center}},
{label: 'Center', arguments: {x: VideoAlignmentType.Center, y: VideoAlignmentType.Center}},
{label: 'Right', arguments: {x: VideoAlignmentType.Right, y: VideoAlignmentType.Center}},
{label: 'Bottom left', arguments: {x: VideoAlignmentType.Left, y: VideoAlignmentType.Bottom}},
{label: 'Bottom center', arguments: {x: VideoAlignmentType.Center, y: VideoAlignmentType.Bottom}},
{label: 'Bottom right', arguments: {x: VideoAlignmentType.Right, y: VideoAlignmentType.Bottom}}
]
}
},
mixins: [
],
props: [
'settings',
'siteSettings',
'isDefaultConfiguration'
],
@ -138,45 +260,136 @@ export default {
},
computed: {
simpleExtensionSettings() {
return {
enable: this.compileSimpleSettings('enable'),
enableAard: this.compileSimpleSettings('enableAard'),
enableKeyboard: this.compileSimpleSettings('enableKeyboard'),
}
},
siteDefaultCrop() {
return JSON.stringify(
this.siteSettings.data.defaults.crop
);
return this.siteSettings.raw?.defaults?.crop ? JSON.stringify(this.siteSettings.raw?.defaults?.crop) : undefined;
},
siteDefaultStretch() {
return JSON.stringify(
this.siteSettings.data.defaults.stretch
);
return this.siteSettings.raw?.defaults?.stretch ? JSON.stringify(this.siteSettings.raw?.defaults?.stretch) : undefined;
},
siteDefaultAlignment() {
return this.siteSettings.raw?.defaults?.alignment ? JSON.stringify(this.siteSettings.raw?.defaults?.alignment) : undefined;
},
siteDefaultCropPersistence() {
return CropModePersistence.Default;
// this.settings?.getDefaultCropPersistence(this.site) ?? {type: this.site === '@global' ? CropModePersistence.Disabled : CropModePersistence.Default}
return this.siteSettings.raw?.persistCSA ?? undefined;
},
siteDefaultFullScreenOnly() {
return undefined;
// return this.settings.getDefaultRestriction(this.site, 'onlyAllowInFullscreen');
},
siteDefaultAardFullScreenOnly() {
return undefined;
// return this.settings.getDefaultRestriction(this.site, 'onlyAllowAutodetectionInFullscreen')
},
defaultCrop() {
return 'parse me';
},
defaultStretch() {
return 'parse me';
},
defaultCropPersistence() {
return 'parse me';
},
defaultFullScreenOnly() {
return 'parse me';
},
defaultAardFullScreenOnly() {
return 'parse me';
defaultPersistanceLabel() {
switch (this.siteSettings.defaultSettings.persistCSA) {
case CropModePersistence.CurrentSession:
return 'current session';
case CropModePersistence.Disabled:
return 'disabled';
case CropModePersistence.UntilPageReload:
return 'until page reload';
case CropModePersistence.Forever:
return 'Always persist';
}
return '??';
}
},
methods: {
/**
* Compiles our extension settings into more user-friendly options
*/
compileSimpleSettings(component) {
try {
if (
this.siteSettings?.data?.[component]?.normal === ExtensionMode.Disabled
&& this.siteSettings?.data?.[component]?.theater === ExtensionMode.Disabled
&& this.siteSettings?.data?.[component]?.fullscreen === ExtensionMode.Disabled
) {
return 'disabled';
}
if (
this.siteSettings?.data?.[component]?.normal === ExtensionMode.Default
&& this.siteSettings?.data?.[component]?.theater === ExtensionMode.Default
&& this.siteSettings?.data?.[component]?.fullscreen === ExtensionMode.Default
) {
return 'default';
}
if (
this.siteSettings?.data?.[component]?.normal === ExtensionMode.Disabled
&& this.siteSettings?.data?.[component]?.theater === ExtensionMode.Disabled
&& this.siteSettings?.data?.[component]?.fullscreen === ExtensionMode.Enabled
) {
return 'fs';
}
if (
this.siteSettings?.data?.[component]?.normal === ExtensionMode.Disabled
&& this.siteSettings?.data?.[component]?.theater === ExtensionMode.Enabled
&& this.siteSettings?.data?.[component]?.fullscreen === ExtensionMode.Enabled
) {
return 'theater';
}
if (
this.siteSettings?.data?.[component]?.normal === ExtensionMode.Enabled
&& this.siteSettings?.data?.[component]?.theater === ExtensionMode.Enabled
&& this.siteSettings?.data?.[component]?.fullscreen === ExtensionMode.Enabled
) {
return 'enabled';
}
return 'complex';
} catch (e) {
return 'loading';
}
},
getCommandValue(availableCommands, command) {
console.log('command:', command, 'from available commands', availableCommands);
for (const cmd of availableCommands) {
console.log('——— processing command:', cmd)
console.log('comparing', JSON.stringify(command), 'to', JSON.stringify(cmd.arguments));
if (JSON.stringify(cmd.arguments) === JSON.stringify(command)) {
return cmd.label;
}
}
return 'Unknown command';
},
getAlignmentLabel(alignment) {
console.log('alignment for site. ----------------------------', alignment);
// in case default settings don't have this set
if (!alignment) {
return 'Center'
}
let x, y;
if (alignment.x === VideoAlignmentType.Center) {
x = 'center';
} else if (alignment.x === VideoAlignmentType.Left) {
x = 'left';
} else if (alignment.x === VideoAlignmentType.Right) {
x = 'right';
} else {
x = '??'
}
if (alignment.y === VideoAlignmentType.Center) {
y = 'center';
} else if (alignment.y === VideoAlignmentType.Bottom) {
y = 'bottom';
} else if (alignment.y === VideoAlignmentType.Top) {
y = 'top';
} else {
y = '???'
};
if (x === y) {
return x;
}
return `${y} ${x}`;
},
getOption(option) {
},
@ -191,6 +404,51 @@ export default {
}
this.siteSettings.set(option, commandArguments);
},
setExtensionMode(component, event) {
const option = event.target.value;
console.log('setting option', component, 'to', event.target.value);
if (option === 'complex') {
return;
}
if (option === 'default') {
return this.siteSettings.set(component, {
normal: ExtensionMode.Default,
theater: ExtensionMode.Default,
fullscreen: ExtensionMode.Default
});
}
if (option === 'disabled') {
return this.siteSettings.set(component, {
normal: ExtensionMode.Disabled,
theater: ExtensionMode.Disabled,
fullscreen: ExtensionMode.Disabled
});
}
if (option === 'enabled') {
return this.siteSettings.set(component, {
normal: ExtensionMode.Enabled,
theater: ExtensionMode.Enabled,
fullscreen: ExtensionMode.Enabled
});
}
if (option === 'theater') {
return this.siteSettings.set(component, {
normal: ExtensionMode.Disabled,
theater: ExtensionMode.Enabled,
fullscreen: ExtensionMode.Enabled
});
}
if (option === 'fs') {
return this.siteSettings.set(component, {
normal: ExtensionMode.Disabled,
theater: ExtensionMode.Disabled,
fullscreen: ExtensionMode.Enabled
});
}
}
}

18
src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue
View File

@ -147,24 +147,6 @@
</div>
</div>
</div>
<div class="field">
<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>
</template>

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

@ -6,6 +6,7 @@ import VideoAlignmentType from '../../common/enums/VideoAlignmentType.enum';
import BrowserDetect from './BrowserDetect';
import SettingsInterface from '../../common/interfaces/SettingsInterface';
import { _cp } from '../../common/js/utils';
import CropModePersistence from '../../common/enums/CropModePersistence.enum';
const ExtensionConfPatch = [
{
@ -201,6 +202,15 @@ const ExtensionConfPatch = [
}
}
}
}, {
forVersion: '6.0.0-alpha3',
updateFn: (userOptions: SettingsInterface, defaultOptions) => {
delete (userOptions as any).sites['@global'].persistOption;
delete (userOptions as any).sites['@empty'].persistOption;
userOptions.sites['@global'].persistCSA = CropModePersistence.Disabled;
userOptions.sites['@empty'].persistCSA = CropModePersistence.Disabled;
}
}
];

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

@ -1410,11 +1410,7 @@ const ExtensionConf: SettingsInterface = {
normal: ExtensionMode.Disabled
},
persistOption: {
crop: CropModePersistence.Disabled,
stretch: CropModePersistence.Disabled,
alignment: CropModePersistence.Disabled,
},
persistCSA: CropModePersistence.Disabled,
defaults: {
crop: {type: AspectRatioType.Reset}, // does NOT override Aard
@ -1439,11 +1435,7 @@ const ExtensionConf: SettingsInterface = {
normal: ExtensionMode.Default
},
type: 'user-defined',
persistOption: {
crop: CropModePersistence.Default,
stretch: CropModePersistence.Default,
alignment: CropModePersistence.Default,
},
persistCSA: CropModePersistence.Default,
defaults: {
crop: null,
stretch: StretchType.Default,

39
src/ext/lib/settings/SiteSettings.ts
View File

@ -7,19 +7,28 @@ import { browser } from 'webextension-polyfill-ts';
import StretchType from '../../../common/enums/StretchType.enum';
import VideoAlignmentType from '../../../common/enums/VideoAlignmentType.enum';
/**
* Contains settings that are currently in effect for a given site. If a certain option
* doesn't have a value — or if it has 'default' option, SiteSettings.data will contain
* the value that "default" should stand for.
*
* SiteSettings.raw also contains settings object as it actually exist in the config.
*/
export class SiteSettings {
private settings: Settings;
private site: string;
data: SiteSettingsInterface;
raw: SiteSettingsInterface; // actual settings
data: SiteSettingsInterface; // effective settings
temporaryData: SiteSettingsInterface;
sessionData: SiteSettingsInterface;
private defaultSettings: SiteSettingsInterface;
readonly defaultSettings: SiteSettingsInterface;
//#region lifecycle
constructor(settings: Settings, site: string) {
this.settings = settings;
this.data = settings.active.sites[site];
this.site = site;
this.defaultSettings = settings.default.sites['@global'];
this.compileSettingsObject();
@ -42,12 +51,13 @@ export class SiteSettings {
* Alan pls ensure default settings object follows the correct structure
*/
private compileSettingsObject() {
this.raw = _cp(this.settings.active.sites[this.site] ?? {})
if (!this.data) {
this.data = _cp(this.defaultSettings);
return;
}
if (!this.data.defaults) {
this.data.defaults = _cp(this.defaultSettings.defaults);
} else {
@ -82,16 +92,9 @@ export class SiteSettings {
}
}
// ensure data.persistOption exists:
if (!this.data.persistOption) {
this.data.persistOption = {} as any; // this will get populated correctly soon
if (!this.data.persistCSA || this.data.persistCSA === CropModePersistence.Default) {
this.data.persistCSA = this.defaultSettings.persistCSA ?? CropModePersistence.Disabled;
}
for (const persistOption of ['crop', 'stretch', 'alignment']) {
if ( (this.data.persistOption[persistOption] ?? CropModePersistence.Default) === CropModePersistence.Default ) {
this.data.persistOption[persistOption] = this.defaultSettings.persistOption[persistOption];
}
}
if (this.data.activeDOMConfig && this.data.DOMConfig) {
this.data.currentDOMConfig = this.data.DOMConfig[this.data.activeDOMConfig];
@ -113,7 +116,9 @@ export class SiteSettings {
const parsedSettings = JSON.parse(changes.uwSettings.newValue);
this.data = parsedSettings.active.sites[this.site];
this.defaultSettings = parsedSettings.active.sites['@global'];
// we ignore 'readonly' property this once
(this as any).defaultSettings = parsedSettings.active.sites['@global'];
this.compileSettingsObject();
}
@ -142,7 +147,7 @@ export class SiteSettings {
* Gets default crop mode for extension, while taking persistence settings into account
*/
getDefaultOption(option: 'crop' | 'stretch' | 'alignment') {
const persistenceLevel = this.data.persistOption[option];
const persistenceLevel = this.data.persistCSA;
switch (persistenceLevel) {
case CropModePersistence.UntilPageReload:
@ -217,6 +222,9 @@ export class SiteSettings {
const pathParts = optionPath.split('.');
if (pathParts.length === 1) {
this.settings.active.sites[this.site][optionPath] = optionValue;
} else {
let iterator = this.settings.active.sites[this.site];
let i;
for (i = 0; i < pathParts.length - 1; i++) {
@ -226,6 +234,7 @@ export class SiteSettings {
iterator = iterator[pathParts[i]];
}
iterator[pathParts[i]] = optionValue;
}
if (reload) {
this.settings.save();
@ -275,7 +284,7 @@ export class SiteSettings {
* @returns
*/
async updatePersistentOption(option: 'crop' | 'stretch' | 'alignment', value) {
const persistenceLevel = this.data.persistOption[option];
const persistenceLevel = this.data.persistCSA;
switch (persistenceLevel) {
case CropModePersistence.Disabled:
return;

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": "6.0.0-alpha1",
"version": "6.0.0-alpha3",
"applications": {
"gecko": {
"id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}"