Compare commits
No commits in common. "5c26e49c17d0a617043b53ccd7f778c0e3a14964" and "d322c0909a25f5c9970006609f194abdfd08373e" have entirely different histories.
5c26e49c17
...
d322c0909a
@ -19,13 +19,6 @@
|
|||||||
<h1>
|
<h1>
|
||||||
<span class="smallcaps">Ultrawidify</span>: <small>Quick settings</small>
|
<span class="smallcaps">Ultrawidify</span>: <small>Quick settings</small>
|
||||||
</h1>
|
</h1>
|
||||||
<div v-if="site && siteSettings" style="transform: scale(0.75) translateX(-12.5%); margin-bottom: -0.5rem; align-content: center" class="flex flex-row">
|
|
||||||
<div>site: {{site.host}}</div>
|
|
||||||
<SupportLevelIndicator
|
|
||||||
:siteSupportLevel="siteSupportLevel"
|
|
||||||
>
|
|
||||||
</SupportLevelIndicator>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div v-if="BrowserDetect?.processEnvChannel !== 'stable'" class="absolute channel-info version-info">
|
<div v-if="BrowserDetect?.processEnvChannel !== 'stable'" class="absolute channel-info version-info">
|
||||||
Build channel: {{BrowserDetect?.processEnvChannel}} <br/>
|
Build channel: {{BrowserDetect?.processEnvChannel}} <br/>
|
||||||
@ -120,7 +113,6 @@ import Settings from '../ext/lib/Settings';
|
|||||||
import Logger from '../ext/lib/Logger';
|
import Logger from '../ext/lib/Logger';
|
||||||
import EventBus from '../ext/lib/EventBus';
|
import EventBus from '../ext/lib/EventBus';
|
||||||
import {ChromeShittinessMitigations as CSM} from '../common/js/ChromeShittinessMitigations';
|
import {ChromeShittinessMitigations as CSM} from '../common/js/ChromeShittinessMitigations';
|
||||||
import SupportLevelIndicator from '@csui/src/components/SupportLevelIndicator.vue'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@ -130,7 +122,6 @@ export default {
|
|||||||
PlayerDetectionPanel,
|
PlayerDetectionPanel,
|
||||||
BaseExtensionSettings,
|
BaseExtensionSettings,
|
||||||
InPlayerUIAdvertisement,
|
InPlayerUIAdvertisement,
|
||||||
SupportLevelIndicator,
|
|
||||||
AboutPanel
|
AboutPanel
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
@ -155,11 +146,6 @@ export default {
|
|||||||
],
|
],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
|
||||||
siteSupportLevel() {
|
|
||||||
return (this.site && this.siteSettings) ? this.siteSettings.data.type || 'no-support' : 'waiting';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async created() {
|
async created() {
|
||||||
this.logger = new Logger();
|
this.logger = new Logger();
|
||||||
await this.logger.init({
|
await this.logger.init({
|
||||||
|
|||||||
@ -103,6 +103,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
|
padding-top: 1.5rem;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
font-variant: small-caps;
|
font-variant: small-caps;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|||||||
@ -138,7 +138,8 @@ import ChangelogPanel from './PlayerUiPanels/ChangelogPanel.vue'
|
|||||||
import AboutPanel from '@csui/src/PlayerUiPanels/AboutPanel.vue'
|
import AboutPanel from '@csui/src/PlayerUiPanels/AboutPanel.vue'
|
||||||
import PlayerUiSettings from './PlayerUiPanels/PlayerUiSettings.vue'
|
import PlayerUiSettings from './PlayerUiPanels/PlayerUiSettings.vue'
|
||||||
import ResetBackupPanel from './PlayerUiPanels/ResetBackupPanel.vue'
|
import ResetBackupPanel from './PlayerUiPanels/ResetBackupPanel.vue'
|
||||||
import SupportLevelIndicator from '@csui/src/components/SupportLevelIndicator.vue'
|
|
||||||
|
import SupportLevelIndicator from './components/SupportLevelIndicator.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
|||||||
@ -3,8 +3,7 @@
|
|||||||
<!-- Enable extension -->
|
<!-- Enable extension -->
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<div class="label">
|
<div class="label">
|
||||||
Enable <span class="color-emphasis">extension</span>
|
Enable extension under the following conditions:
|
||||||
<span class="sub-label"><br/>under the following conditions:</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="select">
|
<div class="select">
|
||||||
<select
|
<select
|
||||||
@ -19,7 +18,7 @@
|
|||||||
</option>
|
</option>
|
||||||
<template v-if="isDefaultConfiguration">
|
<template v-if="isDefaultConfiguration">
|
||||||
<option value="disabled">
|
<option value="disabled">
|
||||||
Disabled by default
|
Disabled (unless enabled for specific site)
|
||||||
</option>
|
</option>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
@ -43,224 +42,185 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- The rest of the menu is disabled when extension is disabled -->
|
<!-- Enable AARD -->
|
||||||
<div :class="{disabled: simpleExtensionSettings.enable === 'disabled' }">
|
<div class="field">
|
||||||
<!-- Enable AARD -->
|
<div class="label">
|
||||||
<div class="field">
|
Enable automatic aspect ratio detection under the following conditions:
|
||||||
<div class="label">
|
|
||||||
Enable <span class="color-emphasis">automatic aspect ratio detection</span>
|
|
||||||
<span class="sub-label"><br/>under the following conditions:</span>
|
|
||||||
</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 by default
|
|
||||||
</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>
|
</div>
|
||||||
|
<div class="select">
|
||||||
<!-- Enable keyboard -->
|
<select
|
||||||
<div class="field">
|
v-model="simpleExtensionSettings.enableAard"
|
||||||
<div class="label">
|
@click="setExtensionMode('enableAard', $event)"
|
||||||
Enable <span class="color-emphasis">keyboard shortcuts</span>
|
>
|
||||||
<span class="sub-label"><br/>under the following conditions:</span>
|
<option
|
||||||
</div>
|
v-if="simpleExtensionSettings.enable === 'complex'"
|
||||||
<div class="select">
|
value="complex"
|
||||||
<select
|
|
||||||
v-model="simpleExtensionSettings.enableKeyboard"
|
|
||||||
@click="setExtensionMode('enableKeyboard', $event)"
|
|
||||||
>
|
>
|
||||||
<option
|
(Site uses advanced settings)
|
||||||
v-if="simpleExtensionSettings.enable === 'complex'"
|
</option>
|
||||||
value="complex"
|
<template v-if="isDefaultConfiguration">
|
||||||
>
|
<option value="disabled">
|
||||||
(Site uses advanced settings)
|
Disabled (unless enabled for specific site)
|
||||||
</option>
|
</option>
|
||||||
<template v-if="isDefaultConfiguration">
|
</template>
|
||||||
<option value="disabled">
|
<template v-else>
|
||||||
Disabled by default
|
<option value="default">
|
||||||
</option>
|
Use default ()
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<option value="default">
|
|
||||||
Use default ()
|
|
||||||
</option>
|
|
||||||
<option value="disabled">
|
|
||||||
Never
|
|
||||||
</option>
|
|
||||||
</template>
|
|
||||||
<option value="fs">
|
|
||||||
Fullscreen only
|
|
||||||
</option>
|
</option>
|
||||||
<option value="theater">
|
<option value="disabled">
|
||||||
Fullscreen and theater mode
|
Never
|
||||||
</option>
|
</option>
|
||||||
<option value="enabled">
|
</template>
|
||||||
Always
|
<option value="fs">
|
||||||
</option>
|
Fullscreen only
|
||||||
</select>
|
</option>
|
||||||
</div>
|
<option value="theater">
|
||||||
|
Fullscreen and theater mode
|
||||||
|
</option>
|
||||||
|
<option value="enabled">
|
||||||
|
Always
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Enable keyboard -->
|
<!-- Enable keyboard -->
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<div class="label">
|
<div class="label">
|
||||||
Enable <span class="color-emphasis">in-player UI</span>
|
Enable keyboard shortcuts under the following conditions
|
||||||
<span class="sub-label"><br/>under the following conditions:</span>
|
|
||||||
</div>
|
|
||||||
<div class="select">
|
|
||||||
<select
|
|
||||||
v-model="simpleExtensionSettings.enableUI"
|
|
||||||
@click="setExtensionMode('enableUI', $event)"
|
|
||||||
>
|
|
||||||
<template v-if="isDefaultConfiguration">
|
|
||||||
<option value="disabled">
|
|
||||||
Disabled by default
|
|
||||||
</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">
|
|
||||||
Always where possible
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="select">
|
||||||
<!-- Default crop -->
|
<select
|
||||||
<div class="field">
|
v-model="simpleExtensionSettings.enableKeyboard"
|
||||||
<div class="label">Default crop:</div>
|
@click="setExtensionMode('enableKeyboard', $event)"
|
||||||
<div class="select">
|
>
|
||||||
<select
|
<option
|
||||||
v-model="siteDefaultCrop"
|
v-if="simpleExtensionSettings.enable === 'complex'"
|
||||||
@change="setOption('defaults.crop', $event)"
|
value="complex"
|
||||||
>
|
>
|
||||||
<option
|
(Site uses advanced settings)
|
||||||
v-if="!isDefaultConfiguration"
|
</option>
|
||||||
:value="JSON.stringify({useDefault: true})"
|
<template v-if="isDefaultConfiguration">
|
||||||
>
|
<option value="disabled">
|
||||||
Use default ({{getCommandValue(settings?.active.commands.crop, siteSettings.data.defaults.crop)}})
|
Disabled (unless enabled for specific site)
|
||||||
</option>
|
</option>
|
||||||
<option
|
</template>
|
||||||
v-for="(command, index) of settings?.active.commands.crop"
|
<template v-else>
|
||||||
:key="index"
|
<option value="default">
|
||||||
:value="JSON.stringify(command.arguments)"
|
Use default ()
|
||||||
>
|
|
||||||
{{command.label}}
|
|
||||||
</option>
|
</option>
|
||||||
</select>
|
<option value="disabled">
|
||||||
</div>
|
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"
|
||||||
|
@change="setOption('defaults.crop', $event)"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
v-if="!isDefaultConfiguration"
|
||||||
|
:value="JSON.stringify({useDefault: true})"
|
||||||
|
>
|
||||||
|
Use default ({{getCommandValue(settings?.active.commands.crop, siteSettings.data.defaults.crop)}})
|
||||||
|
</option>
|
||||||
|
<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="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 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 -->
|
<!-- Default stretch -->
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<div class="label">Default stretch:</div>
|
<div class="label">Default stretch:</div>
|
||||||
<div class="select">
|
<div class="select">
|
||||||
<select
|
<select
|
||||||
v-model="siteDefaultStretch"
|
v-model="siteDefaultStretch"
|
||||||
@change="setOption('defaults.stretch', $event)"
|
@change="setOption('defaults.stretch', $event)"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
v-if="!isDefaultConfiguration"
|
||||||
|
:value="JSON.stringify({useDefault: true})"
|
||||||
>
|
>
|
||||||
<option
|
Use default ({{getCommandValue(settings?.active.commands.stretch, siteSettings.data.defaults.stretch)}})
|
||||||
v-if="!isDefaultConfiguration"
|
</option>
|
||||||
:value="JSON.stringify({useDefault: true})"
|
<option
|
||||||
>
|
v-for="(command, index) of settings?.active.commands.stretch"
|
||||||
Use default ({{getCommandValue(settings?.active.commands.stretch, siteSettings.data.defaults.stretch)}})
|
:key="index"
|
||||||
</option>
|
:value="JSON.stringify(command.arguments)"
|
||||||
<option
|
>
|
||||||
v-for="(command, index) of settings?.active.commands.stretch"
|
{{command.label}}
|
||||||
:key="index"
|
</option>
|
||||||
:value="JSON.stringify(command.arguments)"
|
</select>
|
||||||
>
|
|
||||||
{{command.label}}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Default alignment -->
|
<!-- Default alignment -->
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<div class="label">Default alignment:</div>
|
<div class="label">Default alignment:</div>
|
||||||
<div class="select">
|
<div class="select">
|
||||||
<select
|
<select
|
||||||
v-model="siteDefaultAlignment"
|
v-model="siteDefaultAlignment"
|
||||||
@change="setOption('defaults.alignment', $event)"
|
@change="setOption('defaults.alignment', $event)"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
v-if="!isDefaultConfiguration"
|
||||||
|
:value="JSON.stringify({useDefault: true})"
|
||||||
>
|
>
|
||||||
<option
|
Use default ({{getAlignmentLabel(siteSettings.data.defaults.alignment)}})
|
||||||
v-if="!isDefaultConfiguration"
|
</option>
|
||||||
:value="JSON.stringify({useDefault: true})"
|
<option
|
||||||
>
|
v-for="(command, index) of alignmentOptions"
|
||||||
Use default ({{getAlignmentLabel(siteSettings.data.defaults.alignment)}})
|
:key="index"
|
||||||
</option>
|
:value="JSON.stringify(command.arguments)"
|
||||||
<option
|
>
|
||||||
v-for="(command, index) of alignmentOptions"
|
{{command.label}}
|
||||||
:key="index"
|
</option>
|
||||||
:value="JSON.stringify(command.arguments)"
|
</select>
|
||||||
>
|
|
||||||
{{command.label}}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Crop, et. al. Persistence -->
|
<!-- Crop, et. al. Persistence -->
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<div class="label">Persist crop, stretch, and alignment between videos</div>
|
<div class="label">Persist crop, stretch, and alignment between videos</div>
|
||||||
<div class="select">
|
<div class="select">
|
||||||
<select
|
<select
|
||||||
v-model="siteDefaultCropPersistence"
|
v-model="siteDefaultCropPersistence"
|
||||||
@click="setOption('persistCSA', $event)"
|
@click="setOption('persistCSA', $event)"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
v-if="!isDefaultConfiguration"
|
||||||
|
:value="CropModePersistence.Default"
|
||||||
>
|
>
|
||||||
<option
|
Use default ({{defaultPersistanceLabel}})
|
||||||
v-if="!isDefaultConfiguration"
|
</option>
|
||||||
:value="CropModePersistence.Default"
|
<option :value="CropModePersistence.Disabled">Disabled</option>
|
||||||
>
|
<option :value="CropModePersistence.UntilPageReload">Until page reload</option>
|
||||||
Use default ({{defaultPersistanceLabel}})
|
<option :value="CropModePersistence.CurrentSession">Current session</option>
|
||||||
</option>
|
<option :value="CropModePersistence.Forever">Always persist</option>
|
||||||
<option :value="CropModePersistence.Disabled">Disabled</option>
|
</select>
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -441,20 +401,13 @@ export default {
|
|||||||
commandArguments = undefined;
|
commandArguments = undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log('saving settings ...');
|
|
||||||
await this.siteSettings.set(option, commandArguments, {reload: false});
|
await this.siteSettings.set(option, commandArguments, {reload: false});
|
||||||
console.log('settings saved.');
|
|
||||||
|
|
||||||
// we also need to force re-compute all watchers, otherwise UI will lag behind
|
// changing alignment options doesn't trigger re-compute, so we need to do it ourselves.
|
||||||
// actual state of settings until reload
|
// note that this re-computes siteDefaultAlignment even when setting other options, but
|
||||||
this._computedWatchers?.simpleExtensionSettings?.run();
|
// it's _too late AM_ and hit to performance probably isn't bad enough to warrant
|
||||||
this._computedWatchers?.siteDefaultCrop?.run();
|
// spending time on a more correct solution tomorrow
|
||||||
this._computedWatchers?.siteDefaultStretch?.run();
|
this._computedWatchers.siteDefaultAlignment.run();
|
||||||
this._computedWatchers?.siteDefaultAlignment?.run();
|
|
||||||
this._computedWatchers?.siteDefaultCropPersistence?.run();
|
|
||||||
this._computedWatchers?.defaultPersistanceLabel?.run();
|
|
||||||
|
|
||||||
console.log('watchers recomputed');
|
|
||||||
|
|
||||||
this.$nextTick( () => this.$forceUpdate());
|
this.$nextTick( () => this.$forceUpdate());
|
||||||
},
|
},
|
||||||
|
|||||||
@ -16,7 +16,7 @@
|
|||||||
<ShortcutButton
|
<ShortcutButton
|
||||||
v-if="editMode"
|
v-if="editMode"
|
||||||
class="button b3"
|
class="button b3"
|
||||||
:class="{active: editMode ? editModeOptions?.crop?.selectedIndex === null : isActiveCrop(command)}"
|
:class="{active: editMode ? editModeOptions?.crop?.selectedIndex === null : isActiveCrop(command)}"
|
||||||
label="Add new"
|
label="Add new"
|
||||||
@click="editAction(
|
@click="editAction(
|
||||||
{action: 'set-ar', label: 'New aspect ratio', arguments: {type: AspectRatioType.Fixed}},
|
{action: 'set-ar', label: 'New aspect ratio', arguments: {type: AspectRatioType.Fixed}},
|
||||||
@ -54,13 +54,12 @@
|
|||||||
@blur="editModeOptions.crop.selected.label === 'New aspect ratio' ? editModeOptions.crop.selected.label = editModeOptions.crop.selected.arguments.ratio : null"
|
@blur="editModeOptions.crop.selected.label === 'New aspect ratio' ? editModeOptions.crop.selected.label = editModeOptions.crop.selected.arguments.ratio : null"
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="hint">
|
||||||
|
You can enter a ratio in width:height format (e.g. "21:9" or "1:2.39"), or just the factor
|
||||||
|
(in this case, "1:2.39" would become "2.39" and "21:9" would become "2.33"). You should enter
|
||||||
|
your numbers without quote marks. Number will be converted to factor form on save.
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="hint">
|
|
||||||
You can enter a ratio in width:height format (e.g. "21:9" or "1:2.39"), or just the factor
|
|
||||||
(in this case, "1:2.39" would become "2.39" and "21:9" would become "2.33"). You should enter
|
|
||||||
your numbers without quote marks. Number will be converted to factor form on save.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<div class="label">
|
<div class="label">
|
||||||
Label:
|
Label:
|
||||||
@ -68,9 +67,9 @@
|
|||||||
<div class="input">
|
<div class="input">
|
||||||
<input v-model="editModeOptions.crop.selected.label">
|
<input v-model="editModeOptions.crop.selected.label">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="hint">
|
||||||
<div class="hint">
|
Label for the button. You can make it say something other than ratio.
|
||||||
Label for the button. You can make it say something other than ratio.
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -84,11 +83,11 @@
|
|||||||
>
|
>
|
||||||
</EditShortcutButton>
|
</EditShortcutButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="hint">
|
||||||
<div class="hint">
|
<b>Note:</b> Your browser and OS already use certain key combinations that involve Ctrl and Meta (Windows) keys — and, to a lesser extent, Alt.
|
||||||
<b>Note:</b> Your browser and OS already use certain key combinations that involve Ctrl and Meta (Windows) keys — and, to a lesser extent, Alt.
|
The extension doesn't (and cannot) check whether the keyboard shortcut you enter is actually free for you to use. The extension also won't override
|
||||||
The extension doesn't (and cannot) check whether the keyboard shortcut you enter is actually free for you to use. The extension also won't override
|
any keyboard shortcuts defined by the site itself.
|
||||||
any keyboard shortcuts defined by the site itself.
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row flex-end">
|
<div class="flex flex-row flex-end">
|
||||||
@ -112,7 +111,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="siteSettings && allowSettingSiteDefault" class="edit-action-area">
|
<div v-if="siteSettings" class="edit-action-area">
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<div class="label">Default for this site</div>
|
<div class="label">Default for this site</div>
|
||||||
<div class="select">
|
<div class="select">
|
||||||
@ -166,8 +165,7 @@ export default {
|
|||||||
'settings', // required for buttons and actions, which are global
|
'settings', // required for buttons and actions, which are global
|
||||||
'siteSettings',
|
'siteSettings',
|
||||||
'eventBus',
|
'eventBus',
|
||||||
'isEditing',
|
'isEditing'
|
||||||
'allowSettingSiteDefault'
|
|
||||||
],
|
],
|
||||||
components: {
|
components: {
|
||||||
ShortcutButton,
|
ShortcutButton,
|
||||||
|
|||||||
@ -73,11 +73,10 @@
|
|||||||
@change="(event) => updateSettings(true)"
|
@change="(event) => updateSettings(true)"
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="hint">
|
||||||
|
Width of the trigger zone (% of player area).
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="hint">
|
|
||||||
Width of the trigger zone (% of player area).
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<div class="label">Trigger zone height:</div>
|
<div class="label">Trigger zone height:</div>
|
||||||
<div class="input range-input">
|
<div class="input range-input">
|
||||||
@ -96,11 +95,10 @@
|
|||||||
@change="(event) => updateSettings(true)"
|
@change="(event) => updateSettings(true)"
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="hint">
|
||||||
|
Height of the trigger zone (% of player area).
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="hint">
|
|
||||||
Height of the trigger zone (% of player area).
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<div class="label">Trigger zone horizontal offset:</div>
|
<div class="label">Trigger zone horizontal offset:</div>
|
||||||
<div class="input range-input">
|
<div class="input range-input">
|
||||||
@ -118,11 +116,10 @@
|
|||||||
@change="(event) => updateSettings(true)"
|
@change="(event) => updateSettings(true)"
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="hint">
|
||||||
|
By default, trigger zone is centered around the button. This option moves trigger zone left and right.
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="hint">
|
|
||||||
By default, trigger zone is centered around the button. This option moves trigger zone left and right.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<div class="label">Trigger zone vertical offset:</div>
|
<div class="label">Trigger zone vertical offset:</div>
|
||||||
<div class="input range-input">
|
<div class="input range-input">
|
||||||
@ -140,9 +137,9 @@
|
|||||||
@change="(event) => updateSettings(true)"
|
@change="(event) => updateSettings(true)"
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="hint">
|
||||||
<div class="hint">
|
By default, trigger zone is centered around the button. This option moves trigger zone up and down.
|
||||||
By default, trigger zone is centered around the button. This option moves trigger zone up and down.
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="action-row">
|
<div class="action-row">
|
||||||
|
|||||||
@ -1,16 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col" style="padding-bottom: 20px">
|
<div class="flex flex-col" style="padding-bottom: 20px">
|
||||||
|
|
||||||
<!--
|
|
||||||
Extension is disabled for a given site when it's disabled in full screen, since
|
|
||||||
current settings do not allow the extension to only be disabled while in full screen
|
|
||||||
-->
|
|
||||||
<template v-if="siteSettings.isEnabledForEnvironment(false, true) === ExtensionMode.Disabled">
|
|
||||||
<div class="info">
|
|
||||||
Extension is not enabled for this site.
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<div class="flex flex-row">
|
<div class="flex flex-row">
|
||||||
<mdicon name="crop" :size="24" />
|
<mdicon name="crop" :size="24" />
|
||||||
<h1>Crop video:</h1>
|
<h1>Crop video:</h1>
|
||||||
@ -51,13 +40,11 @@
|
|||||||
import CropOptionsPanel from '../../PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel';
|
import CropOptionsPanel from '../../PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel';
|
||||||
import StretchOptionsPanel from '../../PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue';
|
import StretchOptionsPanel from '../../PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue';
|
||||||
import ZoomOptionsPanel from '../../PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue';
|
import ZoomOptionsPanel from '../../PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue';
|
||||||
import ExtensionMode from '@src/common/enums/ExtensionMode.enum.ts';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
exec: null,
|
exec: null,
|
||||||
ExtensionMode: ExtensionMode,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mixins: [
|
mixins: [
|
||||||
|
|||||||
@ -115,9 +115,7 @@ button, .button {
|
|||||||
.field {
|
.field {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
box-sizing: border-box;
|
flex-wrap: wrap;
|
||||||
width: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
|
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
@ -131,39 +129,28 @@ button, .button {
|
|||||||
|
|
||||||
.label {
|
.label {
|
||||||
flex: 0 0 25%;
|
flex: 0 0 25%;
|
||||||
min-width: 16rem;
|
|
||||||
text-align: right;
|
text-align: right;
|
||||||
padding-right: 1rem;
|
padding-right: 1rem;
|
||||||
|
|
||||||
.color-emphasis {
|
|
||||||
color: #fa6;
|
|
||||||
}
|
|
||||||
.sub-label {
|
|
||||||
font-size: 0.9em;
|
|
||||||
opacity: 0.69;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.input, .range-input {
|
.input, .range-input {
|
||||||
flex-grow: 1;
|
flex: 0 0 70%;
|
||||||
flex-shrink: 1;
|
|
||||||
max-width: 24rem;
|
max-width: 24rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.has-hint {
|
.hint {
|
||||||
display: flex;
|
padding-left: calc(25% + 1rem);
|
||||||
flex-direction: column;
|
font-size: 0.8rem;
|
||||||
|
opacity: 0.7;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select {
|
.select {
|
||||||
flex-grow: 1;
|
|
||||||
flex-shrink: 1;
|
|
||||||
|
|
||||||
select {
|
select {
|
||||||
background: rgba($blackBg, $hoverTransparentOpacity);
|
background: rgba($blackBg, $hoverTransparentOpacity);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
// border: 0px solid transparent;
|
border: 0px solid transparent;
|
||||||
border: 1px solid rgba(255, 171, 102, 0.42);
|
|
||||||
|
|
||||||
padding: 0.5rem 1rem 0.25rem;
|
padding: 0.5rem 1rem 0.25rem;
|
||||||
outline: none;
|
outline: none;
|
||||||
@ -173,15 +160,6 @@ button, .button {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.hint {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
opacity: 0.7;
|
|
||||||
margin-top: 0.25rem;
|
|
||||||
margin-bottom: 0.75rem;
|
|
||||||
margin-left: 5rem;
|
|
||||||
// width: 100%;
|
|
||||||
box-sizing:border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.options-bar {
|
.options-bar {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@ -1419,8 +1419,8 @@ const ExtensionConf: SettingsInterface = {
|
|||||||
// #g — only available in @global
|
// #g — only available in @global
|
||||||
// #s — only available for specific site
|
// #s — only available for specific site
|
||||||
enable: { // How should extension work:
|
enable: { // How should extension work:
|
||||||
fullscreen: ExtensionMode.Disabled, // 'enabled' - work everywhere except blacklist
|
fullscreen: ExtensionMode.Enabled, // 'enabled' - work everywhere except blacklist
|
||||||
theater: ExtensionMode.Disabled, // 'whitelist' - only work on whitelisted sites (#g)
|
theater: ExtensionMode.Enabled, // 'whitelist' - only work on whitelisted sites (#g)
|
||||||
normal: ExtensionMode.Disabled, // 'disabled' - work nowhere
|
normal: ExtensionMode.Disabled, // 'disabled' - work nowhere
|
||||||
}, // 'default' - follow global rules (#s)
|
}, // 'default' - follow global rules (#s)
|
||||||
enableAard: { // Should we try to automatically detect aspect ratio?
|
enableAard: { // Should we try to automatically detect aspect ratio?
|
||||||
|
|||||||
@ -224,7 +224,7 @@ export class SiteSettings {
|
|||||||
* @param isFullscreen
|
* @param isFullscreen
|
||||||
* @returns ExtensionMode
|
* @returns ExtensionMode
|
||||||
*/
|
*/
|
||||||
isEnabledForEnvironment(isTheater: boolean, isFullscreen: boolean): ExtensionMode {
|
isEnabledForEnvironment(isTheater: boolean, isFullscreen: boolean) {
|
||||||
const env = this._getEnvironment(isTheater, isFullscreen);
|
const env = this._getEnvironment(isTheater, isFullscreen);
|
||||||
return this.data.enable[env];
|
return this.data.enable[env];
|
||||||
}
|
}
|
||||||
@ -235,7 +235,7 @@ export class SiteSettings {
|
|||||||
* @param isFullscreen
|
* @param isFullscreen
|
||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
isAardEnabledForEnvironment(isTheater: boolean, isFullscreen: boolean): ExtensionMode {
|
isAardEnabledForEnvironment(isTheater: boolean, isFullscreen: boolean) {
|
||||||
const env = this._getEnvironment(isTheater, isFullscreen);
|
const env = this._getEnvironment(isTheater, isFullscreen);
|
||||||
return this.data.enableAard[env];
|
return this.data.enableAard[env];
|
||||||
}
|
}
|
||||||
@ -246,7 +246,7 @@ export class SiteSettings {
|
|||||||
* @param isFullscreen
|
* @param isFullscreen
|
||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
isKeyboardEnabledForEnvironment(isTheater: boolean, isFullscreen: boolean): ExtensionMode {
|
isKeyboardEnabledForEnvironment(isTheater: boolean, isFullscreen: boolean) {
|
||||||
const env = this._getEnvironment(isTheater, isFullscreen);
|
const env = this._getEnvironment(isTheater, isFullscreen);
|
||||||
return this.data.enableKeyboard[env];
|
return this.data.enableKeyboard[env];
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user