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

Extension options WIP

Browse Source
This commit is contained in:
Tamius Han 2022-11-22 01:28:04 +01:00
parent f7a82ccdf7
commit 81e11c2ae9
9 changed files with 400 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,6 +29,7 @@ interface RestrictionsSettings {
minAllowedWidth?: number; // if player is less than this many px wide, ultrawidify will disable itself
minAllowedHeight?: number; // if player is less than this many px tall, ultrawidify will disable itself
onlyAllowInFullscreen?: boolean; // if enabled, ultrawidify will be disabled when not in full screen regardless of what previous two options say
onlyAllowAutodetectionInFullScreen?: boolean; // if enabled, autodetection will only start once in full screen
}
export interface CommandInterface {

9
src/csui/PlayerUiBase.vue
View File

@ -108,6 +108,11 @@
:site="site"
>
</PlayerDetectionPanel>
<BaseExtensionSettings
v-if="selectedTab === 'extensionSettings'"
:settings="settings"
:site="site"
></BaseExtensionSettings>
<AutodetectionSettingsPanel
v-if="selectedTab === 'autodetectionSettings'"
:settings="settings"
@ -131,6 +136,7 @@
</template>
<script>
import BaseExtensionSettings from './src/PlayerUiPanels/BaseExtensionSettings.vue'
import DebugPanel from './src/PlayerUiPanels/DebugPanel.vue'
import VideoSettings from './src/PlayerUiPanels/VideoSettings.vue'
import AutodetectionSettingsPanel from './src/PlayerUiPanels/AutodetectionSettingsPanel.vue'
@ -150,7 +156,7 @@ export default {
ResizerDebugPanel,
VideoSettings,
PlayerDetectionPanel,
AutodetectionSettingsPanel, DebugPanel
AutodetectionSettingsPanel, DebugPanel, BaseExtensionSettings
},
data() {
return {
@ -199,6 +205,7 @@ export default {
tabs: [
{id: 'videoSettings', label: 'Video settings', icon: 'crop'},
{id: 'playerDetection', label: 'Player detection', icon: 'television-play'},
{id: 'extensionSettings', label: 'Extension options', icon: 'cogs' },
{id: 'autodetectionSettings', label: 'Autodetection options', icon: ''},
{id: 'advancedOptions', label: 'Advanced options', icon: 'cogs' },
{id: 'debugging', label: 'Debugging', icon: 'bug-outline' }

87
src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue Normal file
View File

@ -0,0 +1,87 @@
<template>
<div class="flex flex-column w-100">
<h2>Settings for {{site}}</h2>
<SiteExtensionSettings
:settings="settings"
:site="site"
></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>
</div>
</template>
<script>
import SiteSettingsBasicTable from './PanelComponents/ExtensionSettings/SiteSettingsBasicTable.vue'
import SiteExtensionSettings from './PanelComponents/ExtensionSettings/SiteExtensionSettings.vue'
export default {
data() {
},
mixins: [
],
props: [
'settings',
'site',
],
components: {
SiteExtensionSettings,
SiteSettingsBasicTable
},
}
</script>
<style lang="scss" src="../../../res/css/flex.scss" scoped module></style>
<style lang="scss" src="../res-common/panels.scss" scoped module></style>
<style lang="scss" src="../res-common/common.scss" scoped module></style>

203
src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue Normal file
View File

@ -0,0 +1,203 @@
<template>
<div>
<h3>Extension settings</h3>
<div class="field">
<div class="label">Default crop:</div>
<div class="select">
<select
v-model="siteDefaultCrop"
@click="setOption('defaultCrop', $event)"
>
<option
v-if="site !== '@global'"
:value="undefined"
>
Use default ({{defaultCrop}})
</option>
<option
v-for="(command, index) of settings?.active.commands.crop"
:key="index"
:value="JSON.stringify(command.arguments)"
>
{{command.label}}
</option>
</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
v-model="siteDefaultStretchMode"
@click="setOption('defaultStretch', $event)"
>
<option
v-if="site !== '@global'"
:value="undefined"
>
Use default ({{defaultStretch}})
</option>
<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="field">
<div class="label">Persist crop mode between videos</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 class="field">
<div class="label">Disable extension when not in full screen</div>
<div class="select">
<select
v-model="siteDefaultFullScreenOnly"
@click="setOption('restrictions.onlyAllowInFullScreen', $event)"
>
<option :value="undefined">Use default ({{defaultFullScreenOnly}})</option>
<option :value="true">Yes</option>
<option :value="false">No</option>
</select>
</div>
<div class="hint">This option will disable entire extension (including user interface and keyboard shortcuts) while not in full screen. If you use theater mode, you will want to set this option to 'No'.</div>
</div>
<div class="field">
<div class="label">Disable autodetection when not in full screen</div>
<div class="select">
<select
v-model="siteDefaultAardFullScreenOnly"
@click="setOption('restrictions.onlyAllowInFullScreen', $event)"
>
<option :value="undefined">Use default ({{defaultAardFullScreenOnly}})</option>
<option :value="true">Yes</option>
<option :value="false">No</option>
</select>
</div>
<div class="hint">This option will disable autodetection while not in full screen. Other extension functionalities will keep functioning. If you want autodetection in theater mode, you will want to set this option to 'No'.</div>
</div>
</div>
</template>
<script>
import CropModePersistence from './../../../../../common/enums/CropModePersistence.enum';
export default {
data() {
return {
CropModePersistence: CropModePersistence,
}
},
mixins: [
],
props: [
'settings',
'site',
],
components: {
},
computed: {
siteDefaultCrop() {
return JSON.stringify(
this.settings?.getDefaultCrop(this.site) ?? {type: this.site === '@global' ? AspectRatioType.Automatic : AspectRatioType.Default}
);
},
siteDefaultStretch() {
return JSON.stringify(
this.settings?.getDefaultStretch(this.site) ?? {type: this.site === '@global' ? StretchMode.NoStretch : StretchMode.Default}
);
},
siteDefaultCropPersistence() {
return CropModePersistence.Default;
// this.settings?.getDefaultCropPersistence(this.site) ?? {type: this.site === '@global' ? CropModePersistence.Disabled : CropModePersistence.Default}
},
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';
}
},
methods: {
getOption(option) {
},
setOption(option, $event) {
let commandArguments;
// if argument is json, parse json. Otherwise, pass the value as-is
try {
commandArguments = $event.target.value !== undefined ? JSON.parse($event.target.value) : undefined;
} catch(e) {
commandArguments = $event.target.value;
}
if (!this.settings.active.sites[this.site]) {
this.settings.active.sites[this.site] = this.settings.getDefaultSiteConfiguration();
}
const optionPath = option.split('.');
if (optionPath.length < 2) {
this.settings.active.sites[this.site][option] = commandArguments;
} else {
let currentOptionObject = this.settings.active.sites[this.site][optionPath[0]];
let i;
for (i = 1; i < optionPath.length - 1; i++) {
if (currentOptionObject[optionPath[i]] === undefined) {
currentOptionObject[optionPath[i]] = {};
}
currentOptionObject = currentOptionObject[optionPath[i]];
}
currentOptionObject[optionPath[optionPath.length - 1]] = commandArguments;
}
this.settings.saveWithoutReload();
}
}
}
</script>
<style lang="scss" src="../../../../../res/css/flex.scss" scoped></style>
<style lang="scss" src="../../../res-common/panels.scss" scoped></style>
<style lang="scss" src="../../../res-common/common.scss" scoped></style>

40
src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteSettingsBasicTable.vue Normal file
View File

@ -0,0 +1,40 @@
<template>
<table>
<thead>
<tr>
<th>Site</th>
<th>Status</th>
<th>Crop</th>
<th>Persist crop</th>
<th>Stretch</th>
<th>FS only</th>
<th>AARD FS only</th>
</tr>
</thead>
<tbody>
<template v-for="site in settings.active.sites" :key="site">
<tr>
<!-- host --> <td>{{site}}</td>
<!-- official status? --> <td>{{settings.active.sites[site].type}}</td>
<!-- enabled? --> <td>todo: add</td>
<!-- full screen only? --> <td>{{settings.active.sites[site].restrictions?.fullScreenOnly}}</td>
<!-- -->
</tr>
</template>
</tbody>
</table>
</template>
<script>
export default {
data() {
},
props: [
'settings',
],
components: {
},
}
</script>

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

@ -210,14 +210,14 @@ export default {
EditShortcutButton,
},
computed: {
extensionDefaultCrop() {
extensionDefaultStretch() {
return JSON.stringify(
this.settings?.active.crop?.default ?? {type: AspectRatioType.Automatic}
this.settings?.active.stretch?.default ?? {type: StretchMode.NoStretch}
);
},
siteDefaultCrop() {
siteDefaultStretch() {
return JSON.stringify(
this.settings?.getDefaultCrop(this.site) ?? {type: AspectRatioType.Automatic}
this.settings?.getDefaultStretch(this.site) ?? {type: StretchMode.NoStretch}
);
},
},

1
src/csui/src/res-common/common.scss
View File

@ -98,6 +98,7 @@ h1, h2, h3 {
font-size: 0.8rem;
opacity: 0.7;
margin-top: 0.25rem;
width: 100%;
}
.select {

10
src/popup/App.vue
View File

@ -27,7 +27,7 @@
<div class="">
side menu
</div>
<div>
<div class="scrollable">
<PopupVideoSettings
:settings="settings"
:eventBus="eventBus"
@ -35,12 +35,12 @@
:frame="selectedFrame"
></PopupVideoSettings>
</div>
<pre>
<!-- <pre>
---- site:
{{site}}
----
</pre>
</pre> -->
</div>
</div>
@ -304,6 +304,10 @@ html {
font-size: 1.27em;
}
.scrollable {
height: 100%;
overflow-y: auto;
}
.menu-item-inline-desc{
font-size: 0.60em;

51
src/popup/panels/PopupVideoSettings.vue
View File

@ -2,10 +2,11 @@
<div class="flex flex-column" style="padding-bottom: 20px">
<div class="flex flex-row">
<mdicon name="crop" :size="32" />
<h1>Crop video:</h1>
<h3>Crop video:</h3>
</div>
<CropOptionsPanel
style="margin-top: -2rem"
:settings="settings"
:frame="frame"
:exec="exec"
@ -14,11 +15,57 @@
:isEditing="false"
>
</CropOptionsPanel>
<div class="flex flex-row">
<mdicon name="crop" :size="32" />
<h3>Stretch video:</h3>
</div>
<StretchOptionsPanel
style="margin-top: -2rem"
:settings="settings"
:frame="frame"
:exec="exec"
:eventBus="eventBus"
:site="site"
:isEditing="false"
></StretchOptionsPanel>
<div class="flex flex-row">
<mdicon name="crop" :size="32" />
<h3>Zoom:</h3>
</div>
<ZoomOptionsPanel
style="margin-top: -2rem"
:settings="settings"
:frame="frame"
:exec="exec"
:eventBus="eventBus"
:site="site"
:isEditing="false">
</ZoomOptionsPanel>
<div class="flex flex-row">
<mdicon name="crop" :size="32" />
<h3>Video alignment:</h3>
</div>
<div class="flex flex-row">
<alignment-options-control-component
:eventBus="eventBus"
>
</alignment-options-control-component>
</div>
</div>
</template>
<script>
import ZoomOptionsPanel from '../../csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue'
import StretchOptionsPanel from '../../csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue'
import CropOptionsPanel from '../../csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue'
import ExecAction from '../../csui/src/ui-libs/ExecAction';
@ -38,7 +85,7 @@ export default {
'site'
],
components: {
CropOptionsPanel
CropOptionsPanel, StretchOptionsPanel, ZoomOptionsPanel
},
created() {
this.exec = new ExecAction(this.settings, window.location.hostname);