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>

14
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,9 +1368,9 @@ 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)
// 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
// }
//

39
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");
@ -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;