Settings page is now on some baseline of "works", but needs some minor touch-ups

This commit is contained in:
Tamius Han 2025-12-28 00:13:06 +01:00
parent a8847bdeff
commit fcfc0361dc
7 changed files with 34 additions and 22 deletions

View File

@ -78,6 +78,7 @@
:settings="settings"
:siteSettings="selectedSiteSettings"
:isDefaultConfiguration="selectedSite === '@global'"
:visibleSegments="{advancedPlayerSettings: role === 'settings'}"
></SiteExtensionSettings>
</div>
</template>
@ -98,6 +99,7 @@ export default {
},
props: [
'settings',
'role',
],
components: {
SiteExtensionSettings,

View File

@ -115,8 +115,8 @@
<OtherSiteSettings
v-if="selectedTab === 'website-extension-settings'"
:role="role"
:settings="settings"
:enableSettingsEditor="true"
></OtherSiteSettings>
<PlayerElementSettings
@ -230,8 +230,6 @@ const AVAILABLE_TABS = {
{ id: 'website-extension-settings', label: 'Website exceptions', },
]
},
'siteSettings': {id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
'settings.player-element-settings': { id: 'settings.player-element-settings', label: 'Advanced video player options', icon: 'play-box-edit-outline' },
'window.player-element-settings': { id: 'window.player-element-settings', label: 'Advanced video player options', icon: 'play-box-edit-outline' },
'autodetectionSettings': {id: 'autodetectionSettings', label: 'Autodetection options', icon: 'auto-fix'},
'ui-settings': {id: 'ui-settings', label: 'UI settings', icon: 'movie-cog-outline' },
@ -275,6 +273,12 @@ const TAB_LOADOUT = {
],
}
const DEFAULT_TABS = {
settings: 'default-extension-settings',
updated: 'updated',
popup: 'video-settings',
}
export default defineComponent({
components: {
VideoSettings,
@ -304,7 +308,7 @@ export default defineComponent({
tabs: [
],
selectedTab: 'extensionSettings',
selectedTab: undefined,
BrowserDetect: BrowserDetect,
preventClose: false,
siteSettings: null,
@ -408,6 +412,7 @@ export default defineComponent({
}
}
this.tabs = tabs;
this.selectedTab = this.selectedTab ?? DEFAULT_TABS[this.role];
},
setInitialPath(path: string[] = this.initialPath) {
console.log('setting initial path:', this.initialPath)

View File

@ -50,6 +50,7 @@
<template v-if="tab === 'otherSites'">
<OtherSiteSettings
v-if="settings"
:role="role"
:settings="settings"
>
</OtherSiteSettings>
@ -174,6 +175,7 @@ export default {
},
mixins: [],
props: [
'role',
'settings',
'site',
'enableSettingsEditor',

View File

@ -43,6 +43,7 @@
:settings="settings"
:siteSettings="selectedSiteSettings"
:isDefaultConfiguration="selectedSite === '@global'"
:visibleSegments="{advancedPlayerSettings: role === 'settings'}"
></SiteExtensionSettings>
</div>
</div>
@ -63,6 +64,7 @@ export default {
}
},
props: [
'role',
'settings',
'isCompact',
],

View File

@ -317,10 +317,9 @@
</div>
</div>
<div class="mt-4">
<div v-if="visibleSegments?.advancedPlayerSettings" class="mt-4">
<h4 class="mt-4 text-primary-400 text-[1.125em] font-bold mb-2">Other options</h4>
<button @click="playerDetectionOptionsDialog.visible = true">Advanced video player options</button>
<p>{{playerDetectionOptionsDialog.visible}}</p>
</div>
</div>
@ -328,13 +327,13 @@
<Popup
v-if="playerDetectionOptionsDialog.visible"
title="Player detection options"
confirmButtonText="Save"
cancelButtonText="Cancel"
@onCancel="playerDetectionOptionsDialog.visible = false"
:clientSideButtons="true"
>
<PlayerSelectorAdvancedForm
role="popup"
:settings="settings"
:siteSettings="siteSettings"
@close="playerDetectionOptionsDialog.visible = false"
></PlayerSelectorAdvancedForm>
</Popup>
</template>
@ -361,6 +360,7 @@ export default defineComponent({
'siteSettings',
'isDefaultConfiguration',
'showPlayerSettings',
'visibleSegments', // object of {[segment: string]: true}
],
data() {
return {

View File

@ -148,7 +148,7 @@
<div class="w-full flex flex-row gap-2 justify-end">
<button @click="openSaveAsDialog()">Save as</button>
<button :disabled="!siteSettings.raw.DOMConfig?.[DOMConfigName] || DOMConfigName?.startsWith('@')">Save</button>
<button @click="closeForm()">Close</button>
<button v-if="role === 'popup'" @click="closeForm()">Close</button>
</div>
<!-- PRESET SELECT DIALOG -->
@ -317,6 +317,7 @@ export default({
ConfirmButton,
},
props: [
'role',
'settings',
'siteSettings'
],
@ -352,16 +353,16 @@ export default({
this.DOMConfigName = configKey;
if (!DOMConfigData.elements) {
DOMConfigData.elements = _cp(siteSettings.blankSettings.DOMConfig.empty);
DOMConfigData.elements = _cp(siteSettings.blankSettings.DOMConfig['@empty']);
}
if (!DOMConfigData.elements.player) {
DOMConfigData.elements.player = _cp(siteSettings.blankSettings.DOMConfig.empty.elements.player);
DOMConfigData.elements.player = _cp(siteSettings.blankSettings.DOMConfig['@empty'].elements.player);
}
if (!DOMConfigData.elements.video) {
DOMConfigData.elements.video = _cp(siteSettings.blankSettings.DOMConfig.empty.elements.video);
DOMConfigData.elements.video = _cp(siteSettings.blankSettings.DOMConfig['@empty'].elements.video);
}
} else {
DOMConfigData = _cp(siteSettings.blankSettings.DOMConfig.empty)
DOMConfigData = _cp(siteSettings.blankSettings.DOMConfig['@empty'])
}
this.DOMConfigData = DOMConfigData;
@ -369,7 +370,6 @@ export default({
},
openSelectSnapshotDialog() {
this.selectSnapshotDialog = {
visible: true
@ -478,6 +478,10 @@ export default({
this.siteSettings.raw.activeDOMConfig = this.DOMConfigName;
this.saveAsDialog = {visible: false};
await this.settings.save();
},
closeForm() {
this.$emit('close');
}
}
});

View File

@ -1,19 +1,13 @@
<template>
<div class="flex flex-col relative w-full">
<h2 class="text-[1.75em]">Player UI options</h2>
<!-- The rest of the tab is under 'edit ratios and shortcuts' row -->
<div class="flex flex-col" style="width: 100%">
<div v-if="settings" class="flex flex-col" style="width: 100%">
<div class="flex flex-col compact-form">
<div v-if="!siteSettings.data.enableUI.fullscreen">
UI is disabled for this site.
</div>
<div
class="flex flex-col field-group compact-form"
:class="{disabled: !siteSettings.data.enableUI.fullscreen}"
>
<div class="field disabled">
<div class="label">
@ -107,6 +101,9 @@
</div>
</div>
<div v-else>
Loading settings ...
</div>
</div>
</template>