start work on new panels

This commit is contained in:
Tamius Han 2023-01-07 03:03:50 +01:00
parent b902b8f9ba
commit 64bad6758b
3 changed files with 52 additions and 24 deletions

View File

@ -52,9 +52,9 @@
</div> </div>
</div> </div>
<SiteSettingsBasicTable <!-- <SiteSettingsBasicTable
:settings="settings" :settings="settings"
></SiteSettingsBasicTable> ></SiteSettingsBasicTable> -->
</div> </div>
</template> </template>

View File

@ -1,6 +1,29 @@
<template> <template>
<div> <div>
<h3>Extension settings</h3> <h3>Extension settings</h3>
<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>
<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>
<div class="field"> <div class="field">
<div class="label">Default crop:</div> <div class="label">Default crop:</div>
<div class="select"> <div class="select">
@ -23,8 +46,9 @@
</option> </option>
</select> </select>
</div> </div>
<div class="hint">'Auto' option will enable autodetection. 'Reset' will disable extension until manually activated.</div> <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> </div>
<div class="field"> <div class="field">
<div class="label">Default stretch:</div> <div class="label">Default stretch:</div>
<div class="select"> <div class="select">
@ -48,6 +72,7 @@
</select> </select>
</div> </div>
</div> </div>
<div class="field"> <div class="field">
<div class="label">Persist crop mode between videos</div> <div class="label">Persist crop mode between videos</div>
<div class="select"> <div class="select">
@ -70,33 +95,26 @@
</div> </div>
<div class="field"> <div class="field">
<div class="label">Disable extension when not in full screen</div> <div class="label">Persist stretch mode between videos (TODO this is not yet implemented)</div>
<div class="select"> <div class="select">
<select <select
v-model="siteDefaultFullScreenOnly" v-model="siteDefaultCropModePersistence"
@click="setOption('restrictions.onlyAllowInFullScreen', $event)" @click="setOption('cropModePersistence')"
> >
<option :value="undefined">Use default ({{defaultFullScreenOnly}})</option> <option
<option :value="true">Yes</option> v-if="site !== '@global'"
<option :value="false">No</option> :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> </select>
</div> </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>
</div> </div>
</template> </template>
@ -115,6 +133,7 @@ export default {
props: [ props: [
'settings', 'settings',
'site', 'site',
'isDefaultConfiguration'
], ],
components: { components: {

View File

@ -0,0 +1,9 @@
<template>
<div class="flex flex-column">
<div class="">
</div>
</div>
</template>