Compare commits
No commits in common. "5c26e49c17d0a617043b53ccd7f778c0e3a14964" and "d322c0909a25f5c9970006609f194abdfd08373e" have entirely different histories.
5c26e49c17
...
d322c0909a
@ -19,13 +19,6 @@
|
||||
<h1>
|
||||
<span class="smallcaps">Ultrawidify</span>: <small>Quick settings</small>
|
||||
</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 v-if="BrowserDetect?.processEnvChannel !== 'stable'" class="absolute channel-info version-info">
|
||||
Build channel: {{BrowserDetect?.processEnvChannel}} <br/>
|
||||
@ -120,7 +113,6 @@ import Settings from '../ext/lib/Settings';
|
||||
import Logger from '../ext/lib/Logger';
|
||||
import EventBus from '../ext/lib/EventBus';
|
||||
import {ChromeShittinessMitigations as CSM} from '../common/js/ChromeShittinessMitigations';
|
||||
import SupportLevelIndicator from '@csui/src/components/SupportLevelIndicator.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -130,7 +122,6 @@ export default {
|
||||
PlayerDetectionPanel,
|
||||
BaseExtensionSettings,
|
||||
InPlayerUIAdvertisement,
|
||||
SupportLevelIndicator,
|
||||
AboutPanel
|
||||
},
|
||||
data () {
|
||||
@ -155,11 +146,6 @@ export default {
|
||||
],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
siteSupportLevel() {
|
||||
return (this.site && this.siteSettings) ? this.siteSettings.data.type || 'no-support' : 'waiting';
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.logger = new Logger();
|
||||
await this.logger.init({
|
||||
|
||||
@ -103,6 +103,7 @@ body {
|
||||
}
|
||||
|
||||
.label {
|
||||
padding-top: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
font-variant: small-caps;
|
||||
font-weight: 600;
|
||||
|
||||
@ -138,7 +138,8 @@ import ChangelogPanel from './PlayerUiPanels/ChangelogPanel.vue'
|
||||
import AboutPanel from '@csui/src/PlayerUiPanels/AboutPanel.vue'
|
||||
import PlayerUiSettings from './PlayerUiPanels/PlayerUiSettings.vue'
|
||||
import ResetBackupPanel from './PlayerUiPanels/ResetBackupPanel.vue'
|
||||
import SupportLevelIndicator from '@csui/src/components/SupportLevelIndicator.vue'
|
||||
|
||||
import SupportLevelIndicator from './components/SupportLevelIndicator.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
@ -3,8 +3,7 @@
|
||||
<!-- Enable extension -->
|
||||
<div class="field">
|
||||
<div class="label">
|
||||
Enable <span class="color-emphasis">extension</span>
|
||||
<span class="sub-label"><br/>under the following conditions:</span>
|
||||
Enable extension under the following conditions:
|
||||
</div>
|
||||
<div class="select">
|
||||
<select
|
||||
@ -19,7 +18,7 @@
|
||||
</option>
|
||||
<template v-if="isDefaultConfiguration">
|
||||
<option value="disabled">
|
||||
Disabled by default
|
||||
Disabled (unless enabled for specific site)
|
||||
</option>
|
||||
</template>
|
||||
<template v-else>
|
||||
@ -43,13 +42,10 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- The rest of the menu is disabled when extension is disabled -->
|
||||
<div :class="{disabled: simpleExtensionSettings.enable === 'disabled' }">
|
||||
<!-- Enable AARD -->
|
||||
<div class="field">
|
||||
<div class="label">
|
||||
Enable <span class="color-emphasis">automatic aspect ratio detection</span>
|
||||
<span class="sub-label"><br/>under the following conditions:</span>
|
||||
Enable automatic aspect ratio detection under the following conditions:
|
||||
</div>
|
||||
<div class="select">
|
||||
<select
|
||||
@ -64,7 +60,7 @@
|
||||
</option>
|
||||
<template v-if="isDefaultConfiguration">
|
||||
<option value="disabled">
|
||||
Disabled by default
|
||||
Disabled (unless enabled for specific site)
|
||||
</option>
|
||||
</template>
|
||||
<template v-else>
|
||||
@ -91,8 +87,7 @@
|
||||
<!-- Enable keyboard -->
|
||||
<div class="field">
|
||||
<div class="label">
|
||||
Enable <span class="color-emphasis">keyboard shortcuts</span>
|
||||
<span class="sub-label"><br/>under the following conditions:</span>
|
||||
Enable keyboard shortcuts under the following conditions
|
||||
</div>
|
||||
<div class="select">
|
||||
<select
|
||||
@ -107,7 +102,7 @@
|
||||
</option>
|
||||
<template v-if="isDefaultConfiguration">
|
||||
<option value="disabled">
|
||||
Disabled by default
|
||||
Disabled (unless enabled for specific site)
|
||||
</option>
|
||||
</template>
|
||||
<template v-else>
|
||||
@ -131,40 +126,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Enable keyboard -->
|
||||
<div class="field">
|
||||
<div class="label">
|
||||
Enable <span class="color-emphasis">in-player UI</span>
|
||||
<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>
|
||||
|
||||
<!-- Default crop -->
|
||||
<div class="field">
|
||||
<div class="label">Default crop:</div>
|
||||
@ -188,8 +149,8 @@
|
||||
</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>
|
||||
|
||||
<!-- Default stretch -->
|
||||
<div class="field">
|
||||
@ -263,7 +224,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -441,20 +401,13 @@ export default {
|
||||
commandArguments = undefined;
|
||||
}
|
||||
|
||||
console.log('saving settings ...');
|
||||
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
|
||||
// actual state of settings until reload
|
||||
this._computedWatchers?.simpleExtensionSettings?.run();
|
||||
this._computedWatchers?.siteDefaultCrop?.run();
|
||||
this._computedWatchers?.siteDefaultStretch?.run();
|
||||
this._computedWatchers?.siteDefaultAlignment?.run();
|
||||
this._computedWatchers?.siteDefaultCropPersistence?.run();
|
||||
this._computedWatchers?.defaultPersistanceLabel?.run();
|
||||
|
||||
console.log('watchers recomputed');
|
||||
// changing alignment options doesn't trigger re-compute, so we need to do it ourselves.
|
||||
// note that this re-computes siteDefaultAlignment even when setting other options, but
|
||||
// it's _too late AM_ and hit to performance probably isn't bad enough to warrant
|
||||
// spending time on a more correct solution tomorrow
|
||||
this._computedWatchers.siteDefaultAlignment.run();
|
||||
|
||||
this.$nextTick( () => this.$forceUpdate());
|
||||
},
|
||||
|
||||
@ -54,13 +54,12 @@
|
||||
@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 class="field">
|
||||
<div class="label">
|
||||
Label:
|
||||
@ -68,10 +67,10 @@
|
||||
<div class="input">
|
||||
<input v-model="editModeOptions.crop.selected.label">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hint">
|
||||
Label for the button. You can make it say something other than ratio.
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- editing keyboard shortcuts is always allowed -->
|
||||
@ -84,12 +83,12 @@
|
||||
>
|
||||
</EditShortcutButton>
|
||||
</div>
|
||||
</div>
|
||||
<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.
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row flex-end">
|
||||
<div
|
||||
@ -112,7 +111,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="siteSettings && allowSettingSiteDefault" class="edit-action-area">
|
||||
<div v-if="siteSettings" class="edit-action-area">
|
||||
<div class="field">
|
||||
<div class="label">Default for this site</div>
|
||||
<div class="select">
|
||||
@ -166,8 +165,7 @@ export default {
|
||||
'settings', // required for buttons and actions, which are global
|
||||
'siteSettings',
|
||||
'eventBus',
|
||||
'isEditing',
|
||||
'allowSettingSiteDefault'
|
||||
'isEditing'
|
||||
],
|
||||
components: {
|
||||
ShortcutButton,
|
||||
|
||||
@ -73,11 +73,10 @@
|
||||
@change="(event) => updateSettings(true)"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hint">
|
||||
Width of the trigger zone (% of player area).
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="label">Trigger zone height:</div>
|
||||
<div class="input range-input">
|
||||
@ -96,11 +95,10 @@
|
||||
@change="(event) => updateSettings(true)"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hint">
|
||||
Height of the trigger zone (% of player area).
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="label">Trigger zone horizontal offset:</div>
|
||||
<div class="input range-input">
|
||||
@ -118,11 +116,10 @@
|
||||
@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 class="field">
|
||||
<div class="label">Trigger zone vertical offset:</div>
|
||||
<div class="input range-input">
|
||||
@ -140,10 +137,10 @@
|
||||
@change="(event) => updateSettings(true)"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hint">
|
||||
By default, trigger zone is centered around the button. This option moves trigger zone up and down.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action-row">
|
||||
<button @click="finishTriggerZoneEdit">Finish editing</button>
|
||||
|
||||
@ -1,16 +1,5 @@
|
||||
<template>
|
||||
<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">
|
||||
<mdicon name="crop" :size="24" />
|
||||
<h1>Crop video:</h1>
|
||||
@ -51,13 +40,11 @@
|
||||
import CropOptionsPanel from '../../PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel';
|
||||
import StretchOptionsPanel from '../../PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue';
|
||||
import ZoomOptionsPanel from '../../PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue';
|
||||
import ExtensionMode from '@src/common/enums/ExtensionMode.enum.ts';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
exec: null,
|
||||
ExtensionMode: ExtensionMode,
|
||||
};
|
||||
},
|
||||
mixins: [
|
||||
|
||||
@ -115,9 +115,7 @@ button, .button {
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
flex-wrap: wrap;
|
||||
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
@ -131,39 +129,28 @@ button, .button {
|
||||
|
||||
.label {
|
||||
flex: 0 0 25%;
|
||||
min-width: 16rem;
|
||||
text-align: right;
|
||||
padding-right: 1rem;
|
||||
|
||||
.color-emphasis {
|
||||
color: #fa6;
|
||||
}
|
||||
.sub-label {
|
||||
font-size: 0.9em;
|
||||
opacity: 0.69;
|
||||
}
|
||||
}
|
||||
|
||||
.input, .range-input {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex: 0 0 70%;
|
||||
max-width: 24rem;
|
||||
}
|
||||
|
||||
.has-hint {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.hint {
|
||||
padding-left: calc(25% + 1rem);
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.7;
|
||||
margin-top: 0.25rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.select {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
|
||||
select {
|
||||
background: rgba($blackBg, $hoverTransparentOpacity);
|
||||
color: #fff;
|
||||
// border: 0px solid transparent;
|
||||
border: 1px solid rgba(255, 171, 102, 0.42);
|
||||
border: 0px solid transparent;
|
||||
|
||||
padding: 0.5rem 1rem 0.25rem;
|
||||
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 {
|
||||
position: absolute;
|
||||
|
||||
@ -1419,8 +1419,8 @@ const ExtensionConf: SettingsInterface = {
|
||||
// #g — only available in @global
|
||||
// #s — only available for specific site
|
||||
enable: { // How should extension work:
|
||||
fullscreen: ExtensionMode.Disabled, // 'enabled' - work everywhere except blacklist
|
||||
theater: ExtensionMode.Disabled, // 'whitelist' - only work on whitelisted sites (#g)
|
||||
fullscreen: ExtensionMode.Enabled, // 'enabled' - work everywhere except blacklist
|
||||
theater: ExtensionMode.Enabled, // 'whitelist' - only work on whitelisted sites (#g)
|
||||
normal: ExtensionMode.Disabled, // 'disabled' - work nowhere
|
||||
}, // 'default' - follow global rules (#s)
|
||||
enableAard: { // Should we try to automatically detect aspect ratio?
|
||||
|
||||
@ -224,7 +224,7 @@ export class SiteSettings {
|
||||
* @param isFullscreen
|
||||
* @returns ExtensionMode
|
||||
*/
|
||||
isEnabledForEnvironment(isTheater: boolean, isFullscreen: boolean): ExtensionMode {
|
||||
isEnabledForEnvironment(isTheater: boolean, isFullscreen: boolean) {
|
||||
const env = this._getEnvironment(isTheater, isFullscreen);
|
||||
return this.data.enable[env];
|
||||
}
|
||||
@ -235,7 +235,7 @@ export class SiteSettings {
|
||||
* @param isFullscreen
|
||||
* @returns
|
||||
*/
|
||||
isAardEnabledForEnvironment(isTheater: boolean, isFullscreen: boolean): ExtensionMode {
|
||||
isAardEnabledForEnvironment(isTheater: boolean, isFullscreen: boolean) {
|
||||
const env = this._getEnvironment(isTheater, isFullscreen);
|
||||
return this.data.enableAard[env];
|
||||
}
|
||||
@ -246,7 +246,7 @@ export class SiteSettings {
|
||||
* @param isFullscreen
|
||||
* @returns
|
||||
*/
|
||||
isKeyboardEnabledForEnvironment(isTheater: boolean, isFullscreen: boolean): ExtensionMode {
|
||||
isKeyboardEnabledForEnvironment(isTheater: boolean, isFullscreen: boolean) {
|
||||
const env = this._getEnvironment(isTheater, isFullscreen);
|
||||
return this.data.enableKeyboard[env];
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user