Compare commits
No commits in common. "ea4fb95a3cbcdd7781c3bc9f15bb6d1033de7390" and "c2a6a3f0827adfaa43f0f870e8764aa1087307bc" have entirely different histories.
ea4fb95a3c
...
c2a6a3f082
4
package-lock.json
generated
4
package-lock.json
generated
@ -1,12 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "ultrawidify",
|
"name": "ultrawidify",
|
||||||
"version": "6.3.996",
|
"version": "6.3.995",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "ultrawidify",
|
"name": "ultrawidify",
|
||||||
"version": "6.3.996",
|
"version": "6.3.995",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/plugin-proposal-class-properties": "^7.18.6",
|
"@babel/plugin-proposal-class-properties": "^7.18.6",
|
||||||
"@mdi/font": "^7.4.47",
|
"@mdi/font": "^7.4.47",
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "ultrawidify",
|
"name": "ultrawidify",
|
||||||
"version": "6.3.996",
|
"version": "6.3.995",
|
||||||
"description": "Aspect ratio fixer for youtube and other sites, with automatic aspect ratio detection. Supports ultrawide and other ratios.",
|
"description": "Aspect ratio fixer for youtube and other sites, with automatic aspect ratio detection. Supports ultrawide and other ratios.",
|
||||||
"author": "Tamius Han <tamius.han@gmail.com>",
|
"author": "Tamius Han <tamius.han@gmail.com>",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
enum AspectRatioType {
|
enum AspectRatioType {
|
||||||
Default = -3, // inherit from global settings
|
|
||||||
Cycle = -2,
|
Cycle = -2,
|
||||||
Initial = -1, // page default
|
Initial = -1, // page default
|
||||||
Reset = 0, // reset to initial
|
Reset = 0, // reset to initial
|
||||||
|
|||||||
@ -1,8 +1,7 @@
|
|||||||
enum EmbeddedContentSettingsOverridePolicy {
|
enum EmbeddedContentSettingsOverridePolicy {
|
||||||
Always = 2,
|
Always = 2,
|
||||||
UseAsDefault = 1,
|
UseAsDefault = 1,
|
||||||
Default = 0,
|
Never = 0,
|
||||||
Never = -1,
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default EmbeddedContentSettingsOverridePolicy;
|
export default EmbeddedContentSettingsOverridePolicy;
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
export enum PlayerDetectionMode {
|
export enum PlayerDetectionMode {
|
||||||
Auto = 0,
|
Auto = 0,
|
||||||
AncestorIndex = 1,
|
AncestorIndex = 1,
|
||||||
QuerySelectors = 2,
|
querySelectors = 2,
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,4 +1,3 @@
|
|||||||
import { SiteSupportLevel } from './../enums/SiteSupportLevel.enum';
|
|
||||||
import { Action } from '../../../node_modules/vuex/types/index'
|
import { Action } from '../../../node_modules/vuex/types/index'
|
||||||
import { AardPollingOptions } from '../../ext/lib/aard/enums/aard-polling-options.enum'
|
import { AardPollingOptions } from '../../ext/lib/aard/enums/aard-polling-options.enum'
|
||||||
import { AardSubtitleCropMode } from '../../ext/lib/aard/enums/aard-subtitle-crop-mode.enum'
|
import { AardSubtitleCropMode } from '../../ext/lib/aard/enums/aard-subtitle-crop-mode.enum'
|
||||||
@ -10,7 +9,6 @@ import ExtensionMode from '../enums/ExtensionMode.enum'
|
|||||||
import { SiteSupportLevel } from '../enums/SiteSupportLevel.enum'
|
import { SiteSupportLevel } from '../enums/SiteSupportLevel.enum'
|
||||||
import StretchType from '../enums/StretchType.enum'
|
import StretchType from '../enums/StretchType.enum'
|
||||||
import VideoAlignmentType from '../enums/VideoAlignmentType.enum'
|
import VideoAlignmentType from '../enums/VideoAlignmentType.enum'
|
||||||
import { PlayerDetectionMode } from '../enums/PlayerDetectionMode.enum';
|
|
||||||
|
|
||||||
export enum ExtensionEnvironment {
|
export enum ExtensionEnvironment {
|
||||||
Normal = ExtensionMode.All,
|
Normal = ExtensionMode.All,
|
||||||
@ -445,8 +443,8 @@ export interface SiteSettingsInterface {
|
|||||||
enableKeyboard: ExtensionMode;
|
enableKeyboard: ExtensionMode;
|
||||||
enableUI: ExtensionMode;
|
enableUI: ExtensionMode;
|
||||||
|
|
||||||
applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy; // presumed to be 'Use as default' if not defined
|
applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy; // presumed to be 'Always' if not defined
|
||||||
overrideWhenEmbedded?: EmbeddedContentSettingsOverridePolicy;
|
overrideWhenEmbedded?: boolean;
|
||||||
|
|
||||||
|
|
||||||
autocreated?: boolean;
|
autocreated?: boolean;
|
||||||
@ -486,10 +484,11 @@ export interface PlayerAutoConfigInterface {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export interface SiteDOMSettingsInterface {
|
export interface SiteDOMSettingsInterface {
|
||||||
type: SiteSupportLevel; // 'official' | 'community' | 'user-defined' | 'modified' | undefined;
|
type: 'official' | 'community' | 'user-defined' | 'modified' | undefined;
|
||||||
elements?: {
|
elements?: {
|
||||||
player?: PlayerDOMSettingsInterface,
|
player?: SiteDOMElementSettingsInterface,
|
||||||
video?: PlayerDOMSettingsInterface,
|
video?: SiteDOMElementSettingsInterface,
|
||||||
|
other?: { [x: number]: SiteDOMElementSettingsInterface }
|
||||||
};
|
};
|
||||||
customCss?: string;
|
customCss?: string;
|
||||||
periodicallyRefreshPlayerElement?: boolean;
|
periodicallyRefreshPlayerElement?: boolean;
|
||||||
@ -500,19 +499,12 @@ export interface SiteDOMSettingsInterface {
|
|||||||
anchorElement?: HTMLElement;
|
anchorElement?: HTMLElement;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface PlayerDOMSettingsInterface {
|
|
||||||
playerDetectionMode: PlayerDetectionMode,
|
|
||||||
allowAutoFallback: boolean,
|
|
||||||
ancestorIndex?: number,
|
|
||||||
querySelectors?: string,
|
|
||||||
customCSS?: string,
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface SiteDOMElementSettingsInterface {
|
export interface SiteDOMElementSettingsInterface {
|
||||||
manual?: boolean;
|
manual?: boolean;
|
||||||
querySelectors?: string;
|
querySelectors?: string;
|
||||||
index?: number; // previously: useRelativeAncestor + videoAncestor
|
index?: number; // previously: useRelativeAncestor + videoAncestor
|
||||||
mode?: 'index' | 'qs';
|
mode?: 'index' | 'qs';
|
||||||
|
nodeCss?: {[x: string]: string};
|
||||||
}
|
}
|
||||||
|
|
||||||
export default SettingsInterface;
|
export default SettingsInterface;
|
||||||
|
|||||||
@ -0,0 +1,597 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- Enable extension -->
|
||||||
|
|
||||||
|
<pre>{{simpleExtensionSettings}}</pre>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<div class="label">
|
||||||
|
Enable <span class="color-emphasis">extension</span>
|
||||||
|
<span class="sub-label"><br/>under the following conditions:</span>
|
||||||
|
</div>
|
||||||
|
<pre>{{simpleExtensionSettings}}</pre>
|
||||||
|
<div class="select">
|
||||||
|
<select
|
||||||
|
:value="simpleExtensionSettings.enable"
|
||||||
|
@click="setExtensionMode('enable', $event)"
|
||||||
|
>
|
||||||
|
<template v-if="isDefaultConfiguration">
|
||||||
|
<option :value="ExtensionMode.Disabled">
|
||||||
|
Disabled by default
|
||||||
|
</option>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<option :value="ExtensionMode.Default">
|
||||||
|
Use default ({{simpleDefaultSettings.enableAard}})
|
||||||
|
</option>
|
||||||
|
<option :value="ExtensionMode.Disabled">
|
||||||
|
Never
|
||||||
|
</option>
|
||||||
|
</template>
|
||||||
|
<option :value="ExtensionMode.FullScreen">
|
||||||
|
Fullscreen only
|
||||||
|
</option>
|
||||||
|
<option :value="ExtensionMode.Theater">
|
||||||
|
Fullscreen and theater mode
|
||||||
|
</option>
|
||||||
|
<option :value="ExtensionMode.All">
|
||||||
|
Always
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- The rest of the menu is disabled when extension is disabled -->
|
||||||
|
<div :class="{disabled: simpleEffectiveSettings.enable === 'disabled' && !isDefaultConfiguration}">
|
||||||
|
<!-- 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>
|
||||||
|
</div>
|
||||||
|
<div class="select">
|
||||||
|
<select
|
||||||
|
:value="simpleExtensionSettings.enableAard"
|
||||||
|
@click="setExtensionMode('enableAard', $event)"
|
||||||
|
>
|
||||||
|
<template v-if="isDefaultConfiguration">
|
||||||
|
<option :value="ExtensionMode.Disabled">
|
||||||
|
Disabled by default
|
||||||
|
</option>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<option :value="ExtensionMode.Default">
|
||||||
|
Use default ({{simpleDefaultSettings.enableAard}})
|
||||||
|
</option>
|
||||||
|
<option :value="ExtensionMode.Disabled">
|
||||||
|
Never
|
||||||
|
</option>
|
||||||
|
</template>
|
||||||
|
<option :value="ExtensionMode.FullScreen">
|
||||||
|
Fullscreen only
|
||||||
|
</option>
|
||||||
|
<option :value="ExtensionMode.Theater">
|
||||||
|
Fullscreen and theater mode
|
||||||
|
</option>
|
||||||
|
<option :value="ExtensionMode.All">
|
||||||
|
Always
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
</div>
|
||||||
|
<div class="select">
|
||||||
|
<select
|
||||||
|
:value="simpleExtensionSettings.enableKeyboard"
|
||||||
|
@click="setExtensionMode('enableKeyboard', $event)"
|
||||||
|
>
|
||||||
|
<template v-if="isDefaultConfiguration">
|
||||||
|
<option :value="ExtensionMode.Disabled">
|
||||||
|
Disabled by default
|
||||||
|
</option>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<option :value="ExtensionMode.Default">
|
||||||
|
Use default ({{simpleDefaultSettings.enableAard}})
|
||||||
|
</option>
|
||||||
|
<option :value="ExtensionMode.Disabled">
|
||||||
|
Never
|
||||||
|
</option>
|
||||||
|
</template>
|
||||||
|
<option :value="ExtensionMode.FullScreen">
|
||||||
|
Fullscreen only
|
||||||
|
</option>
|
||||||
|
<option :value="ExtensionMode.Theater">
|
||||||
|
Fullscreen and theater mode
|
||||||
|
</option>
|
||||||
|
<option :value="ExtensionMode.All">
|
||||||
|
Always
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Enable UI -->
|
||||||
|
<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
|
||||||
|
:value="simpleExtensionSettings.enableUI"
|
||||||
|
@click="setExtensionMode('enableUI', $event)"
|
||||||
|
>
|
||||||
|
<template v-if="isDefaultConfiguration">
|
||||||
|
<option :value="ExtensionMode.Disabled">
|
||||||
|
Disabled by default
|
||||||
|
</option>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<option :value="ExtensionMode.Default">
|
||||||
|
Use default ({{simpleDefaultSettings.enableAard}})
|
||||||
|
</option>
|
||||||
|
<option :value="ExtensionMode.Disabled">
|
||||||
|
Never
|
||||||
|
</option>
|
||||||
|
</template>
|
||||||
|
<option :value="ExtensionMode.FullScreen">
|
||||||
|
Fullscreen only
|
||||||
|
</option>
|
||||||
|
<option :value="ExtensionMode.Theater">
|
||||||
|
Fullscreen and theater mode
|
||||||
|
</option>
|
||||||
|
<option :value="ExtensionMode.All">
|
||||||
|
Always
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<div class="label">
|
||||||
|
Use these settings for <span class="color-emphasis">embedded content</span>?
|
||||||
|
<!-- <span class="sub-label"><br/>under the following conditions:</span> -->
|
||||||
|
</div>
|
||||||
|
<div class="select">
|
||||||
|
<select
|
||||||
|
:value="siteDefaultForEmbedded"
|
||||||
|
@click="setSiteOption('applyToEmbeddedContent', $event)"
|
||||||
|
>
|
||||||
|
<option :value="EmbeddedContentSettingsOverridePolicy.Always">
|
||||||
|
Always(-ish)
|
||||||
|
</option>
|
||||||
|
<option :value="EmbeddedContentSettingsOverridePolicy.UseAsDefault">
|
||||||
|
Use as default
|
||||||
|
</option>
|
||||||
|
<option :value="EmbeddedContentSettingsOverridePolicy.Never">
|
||||||
|
Never
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<div class="label">
|
||||||
|
Force these settings <span class="color-emphasis">when embedded</span>?
|
||||||
|
<!-- <span class="sub-label"><br/>under the following conditions:</span> -->
|
||||||
|
</div>
|
||||||
|
<div class="select">
|
||||||
|
<select
|
||||||
|
:value="siteDefaultOverrideEmbedded"
|
||||||
|
@click="setSiteOption('overrideWhenEmbedded', $event)"
|
||||||
|
>
|
||||||
|
<option :value="true">
|
||||||
|
Yes
|
||||||
|
</option>
|
||||||
|
<option :value="false">
|
||||||
|
No
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Default crop -->
|
||||||
|
<div class="field">
|
||||||
|
<div class="label">Default crop:</div>
|
||||||
|
<div class="select">
|
||||||
|
<select
|
||||||
|
:value="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>
|
||||||
|
|
||||||
|
<!-- Default stretch -->
|
||||||
|
<div class="field">
|
||||||
|
<div class="label">Default stretch:</div>
|
||||||
|
<div class="select">
|
||||||
|
<select
|
||||||
|
v-model="siteDefaultStretch"
|
||||||
|
@change="setOption('defaults.stretch', $event)"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
v-if="!isDefaultConfiguration"
|
||||||
|
:value="JSON.stringify({useDefault: true})"
|
||||||
|
>
|
||||||
|
Use default ({{getCommandValue(settings?.active.commands.stretch, siteSettings.data.defaults.stretch)}})
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
v-for="(command, index) of settings?.active.commands.stretch"
|
||||||
|
:key="index"
|
||||||
|
:value="JSON.stringify(command.arguments)"
|
||||||
|
>
|
||||||
|
{{command.label}}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Default alignment -->
|
||||||
|
<div class="field">
|
||||||
|
<div class="label">Default alignment:</div>
|
||||||
|
<div class="select">
|
||||||
|
<select
|
||||||
|
v-model="siteDefaultAlignment"
|
||||||
|
@change="setOption('defaults.alignment', $event)"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
v-if="!isDefaultConfiguration"
|
||||||
|
:value="JSON.stringify({useDefault: true})"
|
||||||
|
>
|
||||||
|
Use default ({{getAlignmentLabel(siteSettings.data.defaults.alignment)}})
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
v-for="(command, index) of alignmentOptions"
|
||||||
|
:key="index"
|
||||||
|
:value="JSON.stringify(command.arguments)"
|
||||||
|
>
|
||||||
|
{{command.label}}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Crop, et. al. Persistence -->
|
||||||
|
<div class="field">
|
||||||
|
<div class="label">Persist crop, stretch, and alignment between videos</div>
|
||||||
|
<div class="select">
|
||||||
|
<select
|
||||||
|
v-model="siteDefaultCropPersistence"
|
||||||
|
@click="setOption('persistCSA', $event)"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
v-if="!isDefaultConfiguration"
|
||||||
|
:value="CropModePersistence.Default"
|
||||||
|
>
|
||||||
|
Use default ({{defaultPersistenceLabel}})
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ExtensionMode from '@src/common/enums/ExtensionMode.enum';
|
||||||
|
import VideoAlignmentType from '@src/common/enums/VideoAlignmentType.enum';
|
||||||
|
import CropModePersistence from '@src/common/enums/CropModePersistence.enum';
|
||||||
|
import EmbeddedContentSettingsOverridePolicy from '@src/common/enums/EmbeddedContentSettingsOverridePolicy.enum';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
CropModePersistence: CropModePersistence,
|
||||||
|
ExtensionMode,
|
||||||
|
EmbeddedContentSettingsOverridePolicy,
|
||||||
|
alignmentOptions: [
|
||||||
|
{label: 'Top left', arguments: {x: VideoAlignmentType.Left, y: VideoAlignmentType.Top}},
|
||||||
|
{label: 'Top center', arguments: {x: VideoAlignmentType.Center, y: VideoAlignmentType.Top}},
|
||||||
|
{label: 'Top right', arguments: {x: VideoAlignmentType.Right, y: VideoAlignmentType.Top}},
|
||||||
|
{label: 'Left', arguments: {x: VideoAlignmentType.Left, y: VideoAlignmentType.Center}},
|
||||||
|
{label: 'Center', arguments: {x: VideoAlignmentType.Center, y: VideoAlignmentType.Center}},
|
||||||
|
{label: 'Right', arguments: {x: VideoAlignmentType.Right, y: VideoAlignmentType.Center}},
|
||||||
|
{label: 'Bottom left', arguments: {x: VideoAlignmentType.Left, y: VideoAlignmentType.Bottom}},
|
||||||
|
{label: 'Bottom center', arguments: {x: VideoAlignmentType.Center, y: VideoAlignmentType.Bottom}},
|
||||||
|
{label: 'Bottom right', arguments: {x: VideoAlignmentType.Right, y: VideoAlignmentType.Bottom}}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mixins: [
|
||||||
|
|
||||||
|
],
|
||||||
|
props: [
|
||||||
|
'settings',
|
||||||
|
'siteSettings',
|
||||||
|
'isDefaultConfiguration'
|
||||||
|
],
|
||||||
|
components: {
|
||||||
|
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
simpleExtensionSettings() {
|
||||||
|
return {
|
||||||
|
enable: this.compileSimpleSettings('enable'),
|
||||||
|
enableAard: this.compileSimpleSettings('enableAard'),
|
||||||
|
enableKeyboard: this.compileSimpleSettings('enableKeyboard'),
|
||||||
|
enableUI: this.compileSimpleSettings('enableUI')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
simpleEffectiveSettings() {
|
||||||
|
return {
|
||||||
|
enable: this.compileSimpleSettings('enable', 'site-effective'),
|
||||||
|
enableAard: this.compileSimpleSettings('enableAard', 'site-effective'),
|
||||||
|
enableKeyboard: this.compileSimpleSettings('enableKeyboard', 'site-effective'),
|
||||||
|
enableUI: this.compileSimpleSettings('enableUI', 'site-effective')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
simpleDefaultSettings() {
|
||||||
|
return {
|
||||||
|
enable: this.getDefaultOptionLabel('enable'),
|
||||||
|
enableAard: this.getDefaultOptionLabel('enableAard'),
|
||||||
|
enableKeyboard: this.getDefaultOptionLabel('enableKeyboard'),
|
||||||
|
enableUI: this.getDefaultOptionLabel('enableUI')
|
||||||
|
};
|
||||||
|
},
|
||||||
|
siteDefaultForEmbedded() {
|
||||||
|
return this.siteSettings.raw?.applyToEmbeddedContent;
|
||||||
|
},
|
||||||
|
siteDefaultOverrideEmbedded() {
|
||||||
|
return this.siteSettings.raw?.overrideWhenEmbedded ?? false;
|
||||||
|
},
|
||||||
|
siteDefaultCrop() {
|
||||||
|
return this.siteSettings.raw?.defaults?.crop ? JSON.stringify(this.siteSettings.raw?.defaults?.crop) : JSON.stringify({useDefault: true});
|
||||||
|
},
|
||||||
|
siteDefaultStretch() {
|
||||||
|
return this.siteSettings.raw?.defaults?.stretch ? JSON.stringify(this.siteSettings.raw?.defaults?.stretch) : JSON.stringify({useDefault: true});
|
||||||
|
},
|
||||||
|
siteDefaultAlignment() {
|
||||||
|
return this.siteSettings.raw?.defaults?.alignment ? JSON.stringify(this.siteSettings.raw?.defaults?.alignment) : JSON.stringify({useDefault: true});
|
||||||
|
},
|
||||||
|
siteDefaultCropPersistence() {
|
||||||
|
return this.siteSettings.raw?.persistCSA ?? undefined;
|
||||||
|
},
|
||||||
|
defaultPersistenceLabel() {
|
||||||
|
switch (this.siteSettings.defaultSettings.persistCSA) {
|
||||||
|
case CropModePersistence.CurrentSession:
|
||||||
|
return 'current session';
|
||||||
|
case CropModePersistence.Disabled:
|
||||||
|
return 'disabled';
|
||||||
|
case CropModePersistence.UntilPageReload:
|
||||||
|
return 'until page reload';
|
||||||
|
case CropModePersistence.Forever:
|
||||||
|
return 'Always persist';
|
||||||
|
}
|
||||||
|
|
||||||
|
return '??';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.forceRefreshPage();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* Compiles our extension settings into more user-friendly options
|
||||||
|
*/
|
||||||
|
compileSimpleSettings(component, getFor = 'site') {
|
||||||
|
|
||||||
|
let settingsData;
|
||||||
|
switch (getFor) {
|
||||||
|
case 'site':
|
||||||
|
settingsData = this.siteSettings?.raw;
|
||||||
|
break;
|
||||||
|
case 'site-effective':
|
||||||
|
settingsData = this.siteSettings?.data;
|
||||||
|
break;
|
||||||
|
case 'default':
|
||||||
|
settingsData = this.settings.active.sites['@global'];
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return settingsData[component];
|
||||||
|
},
|
||||||
|
|
||||||
|
getDefaultOptionLabel(component) {
|
||||||
|
const componentValue = this.compileSimpleSettings(component, 'default');
|
||||||
|
|
||||||
|
if (component === 'enableUI') {
|
||||||
|
switch (componentValue) {
|
||||||
|
case 'fs':
|
||||||
|
return 'fullscreen only';
|
||||||
|
case 'enabled':
|
||||||
|
case 'theater':
|
||||||
|
return 'where possible';
|
||||||
|
case 'disabled':
|
||||||
|
return 'disabled';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
switch (componentValue) {
|
||||||
|
case 'fs':
|
||||||
|
return 'Fullscreen only';
|
||||||
|
case 'theater':
|
||||||
|
return 'theater & FS';
|
||||||
|
case 'enabled':
|
||||||
|
return 'always';
|
||||||
|
case 'disabled':
|
||||||
|
return 'disabled';
|
||||||
|
case 'default':
|
||||||
|
return 'complex'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getCommandValue(availableCommands, command) {
|
||||||
|
for (const cmd of availableCommands) {
|
||||||
|
if (JSON.stringify(cmd.arguments) === JSON.stringify(command)) {
|
||||||
|
return cmd.label;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return 'Unknown command';
|
||||||
|
},
|
||||||
|
|
||||||
|
getAlignmentLabel(alignment) {
|
||||||
|
// in case default settings don't have this set
|
||||||
|
if (!alignment) {
|
||||||
|
return 'Center'
|
||||||
|
}
|
||||||
|
|
||||||
|
let x, y;
|
||||||
|
if (alignment.x === VideoAlignmentType.Center) {
|
||||||
|
x = 'center';
|
||||||
|
} else if (alignment.x === VideoAlignmentType.Left) {
|
||||||
|
x = 'left';
|
||||||
|
} else if (alignment.x === VideoAlignmentType.Right) {
|
||||||
|
x = 'right';
|
||||||
|
} else {
|
||||||
|
x = '??'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (alignment.y === VideoAlignmentType.Center) {
|
||||||
|
y = 'center';
|
||||||
|
} else if (alignment.y === VideoAlignmentType.Bottom) {
|
||||||
|
y = 'bottom';
|
||||||
|
} else if (alignment.y === VideoAlignmentType.Top) {
|
||||||
|
y = 'top';
|
||||||
|
} else {
|
||||||
|
y = '???'
|
||||||
|
};
|
||||||
|
|
||||||
|
if (x === y) {
|
||||||
|
return x;
|
||||||
|
}
|
||||||
|
return `${y} ${x}`;
|
||||||
|
},
|
||||||
|
getOption(option) {
|
||||||
|
|
||||||
|
},
|
||||||
|
async setOption(option, $event) {
|
||||||
|
const value = $event.target.value;
|
||||||
|
let commandArguments;
|
||||||
|
|
||||||
|
// if argument is json, parse json. Otherwise, pass the value as-is
|
||||||
|
try {
|
||||||
|
commandArguments = value !== undefined ? JSON.parse(value) : undefined;
|
||||||
|
} catch(e) {
|
||||||
|
commandArguments = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (commandArguments.useDefault) {
|
||||||
|
commandArguments = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
await this.siteSettings.set(option, commandArguments, {reload: false});
|
||||||
|
|
||||||
|
// we also need to force re-compute all watchers, otherwise UI will lag behind
|
||||||
|
// actual state of settings until reload
|
||||||
|
this.forceRefreshPage();
|
||||||
|
},
|
||||||
|
forceRefreshPage() {
|
||||||
|
this._computedWatchers?.simpleExtensionSettings?.run();
|
||||||
|
this._computedWatchers?.simpleDefaultSettings?.run();
|
||||||
|
this._computedWatchers?.siteDefaultCrop?.run();
|
||||||
|
this._computedWatchers?.siteDefaultStretch?.run();
|
||||||
|
this._computedWatchers?.siteDefaultAlignment?.run();
|
||||||
|
this._computedWatchers?.siteDefaultCropPersistence?.run();
|
||||||
|
this._computedWatchers?.defaultPersistenceLabel?.run();
|
||||||
|
|
||||||
|
this.$nextTick( () => this.$forceUpdate());
|
||||||
|
},
|
||||||
|
|
||||||
|
setSiteOption(optionPath, event) {
|
||||||
|
const value = event.target.value;
|
||||||
|
this.siteSettings.set(optionPath, value);
|
||||||
|
},
|
||||||
|
|
||||||
|
setExtensionMode(component, event) {
|
||||||
|
const option = event.target.value;
|
||||||
|
|
||||||
|
if (option === 'complex') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (component === 'enable' && !this.isDefaultConfiguration) {
|
||||||
|
this.setExtensionMode('enableAard', event);
|
||||||
|
this.setExtensionMode('enableKeyboard', event);
|
||||||
|
|
||||||
|
// in enableUI, 'enabled' is unused and 'theater' uses its place
|
||||||
|
if (option === 'enabled') {
|
||||||
|
this.setExtensionMode('enableUI', {target: {value: 'theater'}});
|
||||||
|
} else {
|
||||||
|
this.setExtensionMode('enableUI', event);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (option === 'default') {
|
||||||
|
return this.siteSettings.set(component, {
|
||||||
|
normal: ExtensionMode.Default,
|
||||||
|
theater: ExtensionMode.Default,
|
||||||
|
fullscreen: ExtensionMode.Default
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (option === 'disabled') {
|
||||||
|
return this.siteSettings.set(component, {
|
||||||
|
normal: ExtensionMode.Disabled,
|
||||||
|
theater: ExtensionMode.Disabled,
|
||||||
|
fullscreen: ExtensionMode.Disabled
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (option === 'enabled') {
|
||||||
|
return this.siteSettings.set(component, {
|
||||||
|
normal: ExtensionMode.Enabled,
|
||||||
|
theater: ExtensionMode.Enabled,
|
||||||
|
fullscreen: ExtensionMode.Enabled
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (option === 'theater') {
|
||||||
|
return this.siteSettings.set(component, {
|
||||||
|
normal: ExtensionMode.Disabled,
|
||||||
|
theater: ExtensionMode.Enabled,
|
||||||
|
fullscreen: ExtensionMode.Enabled
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (option === 'fs') {
|
||||||
|
return this.siteSettings.set(component, {
|
||||||
|
normal: ExtensionMode.Disabled,
|
||||||
|
theater: ExtensionMode.Disabled,
|
||||||
|
fullscreen: ExtensionMode.Enabled
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" src="../../../../res/css/flex.scss" scoped></style>
|
||||||
|
<style lang="scss" src="@csui/src/res-common/panels.scss" scoped></style>
|
||||||
|
<style lang="scss" src="@csui/src/res-common/common.scss" scoped></style>
|
||||||
|
<style scoped>
|
||||||
|
.button-hover:hover {
|
||||||
|
color: #fa6;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -12,7 +12,6 @@ import { update } from 'lodash';
|
|||||||
import EmbeddedContentSettingsOverridePolicy from '../../common/enums/EmbeddedContentSettingsOverridePolicy.enum';
|
import EmbeddedContentSettingsOverridePolicy from '../../common/enums/EmbeddedContentSettingsOverridePolicy.enum';
|
||||||
import LegacyExtensionMode from '../../common/enums/LegacyExtensionMode.enum';
|
import LegacyExtensionMode from '../../common/enums/LegacyExtensionMode.enum';
|
||||||
import ExtensionMode from '../../common/enums/ExtensionMode.enum';
|
import ExtensionMode from '../../common/enums/ExtensionMode.enum';
|
||||||
import { PlayerDetectionMode } from '../../common/enums/PlayerDetectionMode.enum';
|
|
||||||
|
|
||||||
|
|
||||||
const ExtensionConfPatch = Object.freeze([
|
const ExtensionConfPatch = Object.freeze([
|
||||||
@ -249,7 +248,7 @@ const ExtensionConfPatch = Object.freeze([
|
|||||||
// applyToEmbeddedContent is now an enum, and also no longer optional
|
// applyToEmbeddedContent is now an enum, and also no longer optional
|
||||||
for (const site in userOptions.sites) {
|
for (const site in userOptions.sites) {
|
||||||
if (userOptions.sites[site].applyToEmbeddedContent === undefined) {
|
if (userOptions.sites[site].applyToEmbeddedContent === undefined) {
|
||||||
userOptions.sites[site].applyToEmbeddedContent = EmbeddedContentSettingsOverridePolicy.UseAsDefault;
|
userOptions.sites[site].applyToEmbeddedContent = EmbeddedContentSettingsOverridePolicy.Always;
|
||||||
} else {
|
} else {
|
||||||
userOptions.sites[site].applyToEmbeddedContent = userOptions.sites[site].applyToEmbeddedContent ? EmbeddedContentSettingsOverridePolicy.Always : EmbeddedContentSettingsOverridePolicy.Never;
|
userOptions.sites[site].applyToEmbeddedContent = userOptions.sites[site].applyToEmbeddedContent ? EmbeddedContentSettingsOverridePolicy.Always : EmbeddedContentSettingsOverridePolicy.Never;
|
||||||
}
|
}
|
||||||
@ -317,53 +316,6 @@ const ExtensionConfPatch = Object.freeze([
|
|||||||
userOptions.ui = defaultOptions.ui
|
userOptions.ui = defaultOptions.ui
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}, {
|
|
||||||
forVersion: '6.3.996',
|
|
||||||
updateFn: (userOptions: SettingsInterface, defaultOptions: SettingsInterface, logger?) => {
|
|
||||||
for (const site in userOptions.sites) {
|
|
||||||
for (const domConf in userOptions.sites.DOMConfig) {
|
|
||||||
const oldConf = userOptions.sites[site].DOMConfig[domConf] as any;
|
|
||||||
|
|
||||||
const newConf: any = {
|
|
||||||
type: oldConf.type ?? userOptions.sites[site].type,
|
|
||||||
elements: {}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (oldConf.elements.player) {
|
|
||||||
newConf.elements['player'] = {
|
|
||||||
playerDetectionMode: oldConf?.elements?.player?.manual ? (
|
|
||||||
oldConf?.elements?.player?.querySelectors.trim() ? PlayerDetectionMode.QuerySelectors : PlayerDetectionMode.AncestorIndex
|
|
||||||
) : PlayerDetectionMode.Auto,
|
|
||||||
allowAutoFallback: true,
|
|
||||||
ancestorIndex: oldConf?.elements?.player?.parentIndex,
|
|
||||||
querySelectors: oldConf?.elements?.player?.querySelectors,
|
|
||||||
customCSS: oldConf?.elements?.player?.customCss,
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
newConf.elements['player'] = {
|
|
||||||
playerDetectionMode: PlayerDetectionMode.Auto,
|
|
||||||
allowAutoFallback: true,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (oldConf.elements.video) {
|
|
||||||
newConf.elements['video'] = {
|
|
||||||
type: oldConf.type ?? userOptions.sites[site].type,
|
|
||||||
elements: {
|
|
||||||
video: {
|
|
||||||
playerDetectionMode: oldConf?.elements?.video?.manual ? PlayerDetectionMode.QuerySelectors : PlayerDetectionMode.Auto,
|
|
||||||
allowAutoFallback: true,
|
|
||||||
querySelectors: oldConf?.elements?.video?.querySelectors,
|
|
||||||
customCSS: oldConf?.elements?.video?.customCss,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
userOptions.sites[site].DOMConfig[domConf] = newConf;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
]);
|
]);
|
||||||
|
|||||||
@ -13,7 +13,6 @@ import EmbeddedContentSettingsOverridePolicy from '../../common/enums/EmbeddedCo
|
|||||||
import { AardPollingOptions } from '../lib/aard/enums/aard-polling-options.enum';
|
import { AardPollingOptions } from '../lib/aard/enums/aard-polling-options.enum';
|
||||||
import { AardSubtitleCropMode } from '../lib/aard/enums/aard-subtitle-crop-mode.enum';
|
import { AardSubtitleCropMode } from '../lib/aard/enums/aard-subtitle-crop-mode.enum';
|
||||||
import { SiteSupportLevel } from '../../common/enums/SiteSupportLevel.enum';
|
import { SiteSupportLevel } from '../../common/enums/SiteSupportLevel.enum';
|
||||||
import { PlayerDetectionMode } from '../../common/enums/PlayerDetectionMode.enum';
|
|
||||||
|
|
||||||
if(Debug.debug)
|
if(Debug.debug)
|
||||||
console.log("Loading: ExtensionConf.js");
|
console.log("Loading: ExtensionConf.js");
|
||||||
@ -804,15 +803,11 @@ 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: ExtensionMode.Disabled,
|
enable: ExtensionMode.Disabled,
|
||||||
enableAard: ExtensionMode.Theater,
|
enableAard: ExtensionMode.Disabled,
|
||||||
enableKeyboard: ExtensionMode.All,
|
enableKeyboard: ExtensionMode.Disabled,
|
||||||
enableUI: ExtensionMode.FullScreen,
|
enableUI: ExtensionMode.FullScreen,
|
||||||
|
|
||||||
applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.UseAsDefault,
|
applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.Always,
|
||||||
overrideWhenEmbedded: EmbeddedContentSettingsOverridePolicy.Never, // Usually, less-than-legitimate websites embed content from different domains.
|
|
||||||
// Setting this to 'always' would ensure embedded content always uses extension's
|
|
||||||
// default settings. It is presumed most people are too dumb to visit "for embedded sizes"
|
|
||||||
// part of the popup, and those who aren't will prolly find that annoying.
|
|
||||||
|
|
||||||
defaultType: SiteSupportLevel.Unknown,
|
defaultType: SiteSupportLevel.Unknown,
|
||||||
persistCSA: CropModePersistence.Disabled,
|
persistCSA: CropModePersistence.Disabled,
|
||||||
@ -821,73 +816,33 @@ const ExtensionConf: SettingsInterface = {
|
|||||||
crop: {type: AspectRatioType.Automatic},
|
crop: {type: AspectRatioType.Automatic},
|
||||||
stretch: {type: StretchType.NoStretch},
|
stretch: {type: StretchType.NoStretch},
|
||||||
alignment: {x: VideoAlignmentType.Center, y: VideoAlignmentType.Center},
|
alignment: {x: VideoAlignmentType.Center, y: VideoAlignmentType.Center},
|
||||||
},
|
|
||||||
|
|
||||||
activeDOMConfig: 'blank',
|
|
||||||
DOMConfig: {
|
|
||||||
'blank': {
|
|
||||||
type: SiteSupportLevel.Unknown,
|
|
||||||
elements: {
|
|
||||||
player: {
|
|
||||||
playerDetectionMode: PlayerDetectionMode.Auto,
|
|
||||||
allowAutoFallback: true,
|
|
||||||
// ancestorIndex: 1, // we leave those on undefined,
|
|
||||||
// querySelectors: '',
|
|
||||||
// customCSS: ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@empty": {
|
"@empty": { // placeholder settings object with fallbacks to @global
|
||||||
defaultType: SiteSupportLevel.Unknown,
|
|
||||||
|
|
||||||
enable: ExtensionMode.Default,
|
enable: ExtensionMode.Default,
|
||||||
enableAard: ExtensionMode.Default,
|
enableAard: ExtensionMode.Default,
|
||||||
enableKeyboard: ExtensionMode.Default,
|
enableKeyboard: ExtensionMode.Default,
|
||||||
enableUI: ExtensionMode.Default,
|
enableUI: ExtensionMode.Default,
|
||||||
applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.Default,
|
|
||||||
overrideWhenEmbedded: EmbeddedContentSettingsOverridePolicy.Default,
|
|
||||||
|
|
||||||
defaults: {
|
applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.Always,
|
||||||
crop: {type: AspectRatioType.Default},
|
|
||||||
stretch: {type: StretchType.Default},
|
|
||||||
alignment: {x: VideoAlignmentType.Default, y: VideoAlignmentType.Default}
|
|
||||||
},
|
|
||||||
|
|
||||||
|
type: SiteSupportLevel.UserDefined,
|
||||||
|
defaultType: SiteSupportLevel.UserDefined,
|
||||||
persistCSA: CropModePersistence.Default,
|
persistCSA: CropModePersistence.Default,
|
||||||
|
defaults: {
|
||||||
activeDOMConfig: 'empty',
|
crop: null,
|
||||||
DOMConfig: {
|
stretch: {type: StretchType.Default},
|
||||||
'empty': {
|
alignment: {x: VideoAlignmentType.Default, y: VideoAlignmentType.Default},
|
||||||
type: SiteSupportLevel.UserDefined,
|
|
||||||
elements: {
|
|
||||||
player: {
|
|
||||||
playerDetectionMode: PlayerDetectionMode.Auto,
|
|
||||||
allowAutoFallback: true,
|
|
||||||
// ancestorIndex: 1,
|
|
||||||
// querySelectors: '',
|
|
||||||
// customCSS: ''
|
|
||||||
},
|
|
||||||
video: {
|
|
||||||
playerDetectionMode: PlayerDetectionMode.Auto,
|
|
||||||
allowAutoFallback: true,
|
|
||||||
// ancestorIndex: 1,
|
|
||||||
// querySelectors: '',
|
|
||||||
// customCSS: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"www.youtube.com": {
|
"www.youtube.com" : {
|
||||||
enable: ExtensionMode.All,
|
enable: ExtensionMode.All,
|
||||||
enableAard: ExtensionMode.All,
|
enableAard: ExtensionMode.All,
|
||||||
enableKeyboard: ExtensionMode.All,
|
enableKeyboard: ExtensionMode.All,
|
||||||
enableUI: ExtensionMode.Default,
|
enableUI: ExtensionMode.All,
|
||||||
|
|
||||||
applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.UseAsDefault,
|
applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.Always,
|
||||||
overrideWhenEmbedded: EmbeddedContentSettingsOverridePolicy.Always,
|
overrideWhenEmbedded: true,
|
||||||
override: false, // ignore value localStorage in favour of this
|
override: false, // ignore value localStorage in favour of this
|
||||||
type: SiteSupportLevel.OfficialSupport, // is officially supported? (Alternatives are 'community' and 'user-defined')
|
type: SiteSupportLevel.OfficialSupport, // is officially supported? (Alternatives are 'community' and 'user-defined')
|
||||||
defaultType: SiteSupportLevel.OfficialSupport, // if user mucks around with settings, type changes to 'user-defined'.
|
defaultType: SiteSupportLevel.OfficialSupport, // if user mucks around with settings, type changes to 'user-defined'.
|
||||||
@ -899,8 +854,7 @@ const ExtensionConf: SettingsInterface = {
|
|||||||
type: SiteSupportLevel.OfficialSupport,
|
type: SiteSupportLevel.OfficialSupport,
|
||||||
elements: {
|
elements: {
|
||||||
player: {
|
player: {
|
||||||
playerDetectionMode: PlayerDetectionMode.QuerySelectors,
|
manual: true,
|
||||||
allowAutoFallback: true,
|
|
||||||
querySelectors: "#movie_player, #player, #c4-player",
|
querySelectors: "#movie_player, #player, #c4-player",
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -913,8 +867,8 @@ const ExtensionConf: SettingsInterface = {
|
|||||||
enableKeyboard: ExtensionMode.All,
|
enableKeyboard: ExtensionMode.All,
|
||||||
enableUI: ExtensionMode.FullScreen,
|
enableUI: ExtensionMode.FullScreen,
|
||||||
|
|
||||||
applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.UseAsDefault,
|
applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.Always,
|
||||||
overrideWhenEmbedded: EmbeddedContentSettingsOverridePolicy.Always,
|
overrideWhenEmbedded: true,
|
||||||
|
|
||||||
override: false, // ignore value localStorage in favour of this
|
override: false, // ignore value localStorage in favour of this
|
||||||
type: SiteSupportLevel.OfficialSupport, // is officially supported? (Alternatives are 'community' and 'user-defined')
|
type: SiteSupportLevel.OfficialSupport, // is officially supported? (Alternatives are 'community' and 'user-defined')
|
||||||
@ -927,8 +881,7 @@ const ExtensionConf: SettingsInterface = {
|
|||||||
type: SiteSupportLevel.OfficialSupport,
|
type: SiteSupportLevel.OfficialSupport,
|
||||||
elements: {
|
elements: {
|
||||||
player: {
|
player: {
|
||||||
playerDetectionMode: PlayerDetectionMode.QuerySelectors,
|
manual: true,
|
||||||
allowAutoFallback: true,
|
|
||||||
querySelectors: "#movie_player, #player, #c4-player",
|
querySelectors: "#movie_player, #player, #c4-player",
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -940,25 +893,10 @@ const ExtensionConf: SettingsInterface = {
|
|||||||
enableAard: ExtensionMode.Disabled,
|
enableAard: ExtensionMode.Disabled,
|
||||||
enableKeyboard: ExtensionMode.All,
|
enableKeyboard: ExtensionMode.All,
|
||||||
enableUI: ExtensionMode.All,
|
enableUI: ExtensionMode.All,
|
||||||
applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.UseAsDefault,
|
applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.Always,
|
||||||
override: false,
|
override: false,
|
||||||
type: SiteSupportLevel.CommunitySupport,
|
type: SiteSupportLevel.CommunitySupport,
|
||||||
defaultType: SiteSupportLevel.CommunitySupport,
|
defaultType: SiteSupportLevel.CommunitySupport,
|
||||||
|
|
||||||
DOMConfig: {
|
|
||||||
'community': {
|
|
||||||
type: SiteSupportLevel.CommunitySupport,
|
|
||||||
elements: {
|
|
||||||
player: {
|
|
||||||
playerDetectionMode: PlayerDetectionMode.Auto,
|
|
||||||
allowAutoFallback: true,
|
|
||||||
// ancestorIndex: 1,
|
|
||||||
// querySelectors: '',
|
|
||||||
// customCSS: ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
"www.disneyplus.com" : {
|
"www.disneyplus.com" : {
|
||||||
enable: ExtensionMode.Theater,
|
enable: ExtensionMode.Theater,
|
||||||
@ -966,7 +904,7 @@ const ExtensionConf: SettingsInterface = {
|
|||||||
enableKeyboard: ExtensionMode.All,
|
enableKeyboard: ExtensionMode.All,
|
||||||
enableUI: ExtensionMode.FullScreen,
|
enableUI: ExtensionMode.FullScreen,
|
||||||
|
|
||||||
applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.UseAsDefault,
|
applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.Always,
|
||||||
type: SiteSupportLevel.CommunitySupport,
|
type: SiteSupportLevel.CommunitySupport,
|
||||||
defaultType: SiteSupportLevel.CommunitySupport,
|
defaultType: SiteSupportLevel.CommunitySupport,
|
||||||
activeDOMConfig: 'community-mstefan99',
|
activeDOMConfig: 'community-mstefan99',
|
||||||
@ -975,13 +913,11 @@ const ExtensionConf: SettingsInterface = {
|
|||||||
type: SiteSupportLevel.OfficialSupport,
|
type: SiteSupportLevel.OfficialSupport,
|
||||||
elements: {
|
elements: {
|
||||||
player: {
|
player: {
|
||||||
playerDetectionMode: PlayerDetectionMode.QuerySelectors,
|
manual: true,
|
||||||
allowAutoFallback: true,
|
|
||||||
querySelectors: ".btm-media-player",
|
querySelectors: ".btm-media-player",
|
||||||
},
|
},
|
||||||
video: {
|
video: {
|
||||||
playerDetectionMode: PlayerDetectionMode.QuerySelectors,
|
manual: true,
|
||||||
allowAutoFallback: true,
|
|
||||||
querySelectors: ".btm-media-client-element"
|
querySelectors: ".btm-media-client-element"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -995,23 +931,9 @@ const ExtensionConf: SettingsInterface = {
|
|||||||
enableKeyboard: ExtensionMode.All,
|
enableKeyboard: ExtensionMode.All,
|
||||||
enableUI: ExtensionMode.FullScreen,
|
enableUI: ExtensionMode.FullScreen,
|
||||||
|
|
||||||
applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.UseAsDefault,
|
applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.Always,
|
||||||
type: SiteSupportLevel.OfficialSupport,
|
type: SiteSupportLevel.OfficialSupport,
|
||||||
defaultType: SiteSupportLevel.OfficialSupport,
|
defaultType: SiteSupportLevel.OfficialSupport,
|
||||||
|
|
||||||
activeDOMConfig: 'official',
|
|
||||||
DOMConfig: {
|
|
||||||
'official': {
|
|
||||||
type: SiteSupportLevel.OfficialSupport,
|
|
||||||
elements: {
|
|
||||||
player: {
|
|
||||||
playerDetectionMode: PlayerDetectionMode.QuerySelectors,
|
|
||||||
allowAutoFallback: true,
|
|
||||||
querySelectors: "#movie_player, #player, #c4-player",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
"old.reddit.com" : {
|
"old.reddit.com" : {
|
||||||
enable: ExtensionMode.Disabled,
|
enable: ExtensionMode.Disabled,
|
||||||
@ -1022,6 +944,19 @@ const ExtensionConf: SettingsInterface = {
|
|||||||
applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.Never,
|
applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.Never,
|
||||||
type: SiteSupportLevel.OfficialBlacklist,
|
type: SiteSupportLevel.OfficialBlacklist,
|
||||||
defaultType: SiteSupportLevel.OfficialBlacklist,
|
defaultType: SiteSupportLevel.OfficialBlacklist,
|
||||||
|
activeDOMConfig: 'official',
|
||||||
|
DOMConfig: {
|
||||||
|
'official': {
|
||||||
|
type: SiteSupportLevel.OfficialSupport,
|
||||||
|
// customCss: 'video {\n width: 100% !important;\n height: 100% !important;\n}',
|
||||||
|
elements: {
|
||||||
|
player: {
|
||||||
|
manual: false,
|
||||||
|
querySelectors: '.reddit-video-player-root, .media-preview-content'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
"www.reddit.com" : {
|
"www.reddit.com" : {
|
||||||
enable: ExtensionMode.Disabled,
|
enable: ExtensionMode.Disabled,
|
||||||
@ -1032,6 +967,19 @@ const ExtensionConf: SettingsInterface = {
|
|||||||
applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.Never,
|
applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.Never,
|
||||||
type: SiteSupportLevel.OfficialBlacklist,
|
type: SiteSupportLevel.OfficialBlacklist,
|
||||||
defaultType: SiteSupportLevel.OfficialBlacklist,
|
defaultType: SiteSupportLevel.OfficialBlacklist,
|
||||||
|
activeDOMConfig: 'official',
|
||||||
|
DOMConfig: {
|
||||||
|
'official': {
|
||||||
|
type: SiteSupportLevel.OfficialSupport,
|
||||||
|
// customCss: 'video {\n width: 100% !important;\n height: 100% !important;\n}',
|
||||||
|
elements: {
|
||||||
|
player: {
|
||||||
|
manual: false,
|
||||||
|
querySelectors: '.reddit-video-player-root, .media-preview-content'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
"imgur.com": {
|
"imgur.com": {
|
||||||
enable: ExtensionMode.Disabled,
|
enable: ExtensionMode.Disabled,
|
||||||
@ -1049,7 +997,7 @@ const ExtensionConf: SettingsInterface = {
|
|||||||
enableKeyboard: ExtensionMode.All,
|
enableKeyboard: ExtensionMode.All,
|
||||||
enableUI: ExtensionMode.FullScreen,
|
enableUI: ExtensionMode.FullScreen,
|
||||||
|
|
||||||
applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.UseAsDefault,
|
applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.Always,
|
||||||
type: SiteSupportLevel.CommunitySupport,
|
type: SiteSupportLevel.CommunitySupport,
|
||||||
defaultType: SiteSupportLevel.CommunitySupport,
|
defaultType: SiteSupportLevel.CommunitySupport,
|
||||||
activeDOMConfig: 'community',
|
activeDOMConfig: 'community',
|
||||||
@ -1058,8 +1006,7 @@ const ExtensionConf: SettingsInterface = {
|
|||||||
type: SiteSupportLevel.CommunitySupport,
|
type: SiteSupportLevel.CommunitySupport,
|
||||||
elements: {
|
elements: {
|
||||||
player: {
|
player: {
|
||||||
playerDetectionMode: PlayerDetectionMode.QuerySelectors,
|
manual: true,
|
||||||
allowAutoFallback: true,
|
|
||||||
querySelectors: "#jwplayer-container"
|
querySelectors: "#jwplayer-container"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1072,18 +1019,36 @@ const ExtensionConf: SettingsInterface = {
|
|||||||
enableKeyboard: ExtensionMode.Theater,
|
enableKeyboard: ExtensionMode.Theater,
|
||||||
enableUI: ExtensionMode.FullScreen,
|
enableUI: ExtensionMode.FullScreen,
|
||||||
|
|
||||||
applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.UseAsDefault,
|
applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.Always,
|
||||||
type: SiteSupportLevel.CommunitySupport,
|
type: SiteSupportLevel.CommunitySupport,
|
||||||
defaultType: SiteSupportLevel.CommunitySupport,
|
defaultType: SiteSupportLevel.CommunitySupport,
|
||||||
|
activeDOMConfig: 'community',
|
||||||
|
DOMConfig: {
|
||||||
|
'community': {
|
||||||
|
type: SiteSupportLevel.CommunitySupport,
|
||||||
|
// customCss: "body {\n background-color: #000;\n}\n\n.application {\n background-color: #000;\n}"
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"metaivi.com": {
|
"metaivi.com": {
|
||||||
enable: ExtensionMode.Theater,
|
enable: ExtensionMode.Theater,
|
||||||
enableAard: ExtensionMode.Theater,
|
enableAard: ExtensionMode.Theater,
|
||||||
enableKeyboard: ExtensionMode.Theater,
|
enableKeyboard: ExtensionMode.Theater,
|
||||||
enableUI: ExtensionMode.FullScreen,
|
enableUI: ExtensionMode.FullScreen,
|
||||||
applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.UseAsDefault,
|
applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.Always,
|
||||||
type: SiteSupportLevel.CommunitySupport,
|
type: SiteSupportLevel.CommunitySupport,
|
||||||
defaultType: SiteSupportLevel.CommunitySupport,
|
defaultType: SiteSupportLevel.CommunitySupport,
|
||||||
|
activeDOMConfig: 'community',
|
||||||
|
DOMConfig: {
|
||||||
|
'community': {
|
||||||
|
type: SiteSupportLevel.CommunitySupport,
|
||||||
|
elements: {
|
||||||
|
video: {
|
||||||
|
nodeCss: {'position': 'absolute !important'}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
"piped.kavin.rocks": {
|
"piped.kavin.rocks": {
|
||||||
enable: ExtensionMode.Theater,
|
enable: ExtensionMode.Theater,
|
||||||
@ -1091,9 +1056,16 @@ const ExtensionConf: SettingsInterface = {
|
|||||||
enableKeyboard: ExtensionMode.Theater,
|
enableKeyboard: ExtensionMode.Theater,
|
||||||
enableUI: ExtensionMode.FullScreen,
|
enableUI: ExtensionMode.FullScreen,
|
||||||
|
|
||||||
applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.UseAsDefault,
|
applyToEmbeddedContent: EmbeddedContentSettingsOverridePolicy.Always,
|
||||||
type: SiteSupportLevel.CommunitySupport,
|
type: SiteSupportLevel.CommunitySupport,
|
||||||
defaultType: SiteSupportLevel.CommunitySupport,
|
defaultType: SiteSupportLevel.CommunitySupport,
|
||||||
|
activeDOMConfig: 'community',
|
||||||
|
DOMConfig: {
|
||||||
|
'community': {
|
||||||
|
type: SiteSupportLevel.CommunitySupport,
|
||||||
|
// customCss: ".shaka-video-container {\n flex-direction: column !important;\n}"
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -39,7 +39,6 @@ export class SiteSettings {
|
|||||||
temporaryData: SiteSettingsInterface;
|
temporaryData: SiteSettingsInterface;
|
||||||
sessionData: SiteSettingsInterface;
|
sessionData: SiteSettingsInterface;
|
||||||
readonly defaultSettings: SiteSettingsInterface;
|
readonly defaultSettings: SiteSettingsInterface;
|
||||||
readonly blankSettings: SiteSettingsInterface;
|
|
||||||
|
|
||||||
storageChangeSubscriptions: {[x: string]: ((newSiteConf, changes, area) => void)[]} = {};
|
storageChangeSubscriptions: {[x: string]: ((newSiteConf, changes, area) => void)[]} = {};
|
||||||
|
|
||||||
@ -51,7 +50,6 @@ export class SiteSettings {
|
|||||||
this.settings = settings;
|
this.settings = settings;
|
||||||
this.raw = settings.active.sites[this.site];
|
this.raw = settings.active.sites[this.site];
|
||||||
this.defaultSettings = settings.active.sites['@global'];
|
this.defaultSettings = settings.active.sites['@global'];
|
||||||
this.blankSettings = settings.active.sites['@empty'];
|
|
||||||
|
|
||||||
this.compileSettingsObject();
|
this.compileSettingsObject();
|
||||||
|
|
||||||
@ -474,7 +472,7 @@ export class SiteSettings {
|
|||||||
// If this function is not being called in response to user actin,
|
// If this function is not being called in response to user actin,
|
||||||
// create fake settings object.
|
// create fake settings object.
|
||||||
if (options.scripted && !this.settings.active.sites[targetSite]) {
|
if (options.scripted && !this.settings.active.sites[targetSite]) {
|
||||||
this.settings.active.sites[targetSite] = _cp(this.blankSettings);
|
this.settings.active.sites[targetSite] = _cp(this.settings.active.sites['@global']);
|
||||||
this.settings.active.sites[targetSite].autocreated = true;
|
this.settings.active.sites[targetSite].autocreated = true;
|
||||||
this.settings.active.sites[targetSite].type = SiteSupportLevel.Unknown;
|
this.settings.active.sites[targetSite].type = SiteSupportLevel.Unknown;
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
"manifest_version": 3,
|
"manifest_version": 3,
|
||||||
"name": "Ultrawidify",
|
"name": "Ultrawidify",
|
||||||
"description": "Removes black bars on ultrawide videos and offers advanced options to fix aspect ratio.",
|
"description": "Removes black bars on ultrawide videos and offers advanced options to fix aspect ratio.",
|
||||||
"version": "6.3.996",
|
"version": "6.3.995",
|
||||||
"icons": {
|
"icons": {
|
||||||
"32":"res/icons/uw-32.png",
|
"32":"res/icons/uw-32.png",
|
||||||
"64":"res/icons/uw-64.png"
|
"64":"res/icons/uw-64.png"
|
||||||
|
|||||||
@ -37,7 +37,7 @@
|
|||||||
v-for="suboption of tab.children"
|
v-for="suboption of tab.children"
|
||||||
:key="suboption.id"
|
:key="suboption.id"
|
||||||
class="suboption"
|
class="suboption"
|
||||||
:class="{'active': suboption.id === selectedTab, 'disabled': suboption.disabled }"
|
:class="{'active': suboption.id === selectedTab}"
|
||||||
@click="selectTab(suboption.id)"
|
@click="selectTab(suboption.id)"
|
||||||
>
|
>
|
||||||
<div class="label">
|
<div class="label">
|
||||||
@ -50,9 +50,6 @@
|
|||||||
:size="32"
|
:size="32"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="suboption.badgeCount" class="badge">
|
|
||||||
{{suboption.badgeCount >= 10 ? '...' : suboption.badgeCount}}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -114,7 +111,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<OtherSiteSettings
|
<OtherSiteSettings
|
||||||
v-if="selectedTab === 'website-extension-settings'"
|
v-if="selectedTab === 'extensionSettings'"
|
||||||
:settings="settings"
|
:settings="settings"
|
||||||
:enableSettingsEditor="true"
|
:enableSettingsEditor="true"
|
||||||
></OtherSiteSettings>
|
></OtherSiteSettings>
|
||||||
@ -219,15 +216,15 @@ const AVAILABLE_TABS = {
|
|||||||
id: 'site-extension-settings', label: 'Site and Extension options', icon: 'cogs',
|
id: 'site-extension-settings', label: 'Site and Extension options', icon: 'cogs',
|
||||||
children: [
|
children: [
|
||||||
{ id: 'site-extension-settings', label: 'For this site', },
|
{ id: 'site-extension-settings', label: 'For this site', },
|
||||||
{ id: 'embedded-extension-settings', label: 'For embedded sites', disabled: true, badgeCount: 0, },
|
{ id: 'embedded-extension-settings', label: 'For embedded sites' },
|
||||||
{ id: 'default-extension-settings', label: 'Default settings' }
|
{ id: 'default-extension-settings', label: 'Default settings' }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
'default-extension-settings': {
|
'extension-settings': {
|
||||||
id: 'default-extension-settings', label: 'Site and Extension options', icon: 'cogs',
|
id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs',
|
||||||
children: [
|
children: [
|
||||||
{ id: 'default-extension-settings', label: 'Default settings' },
|
{ id: 'default-extension-settings', label: 'Default settings' },
|
||||||
{ id: 'website-extension-settings', label: 'Website exceptions', },
|
{ id: 'website-extension-list', label: 'Website settings', },
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
'siteSettings': {id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
|
'siteSettings': {id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
|
||||||
@ -249,7 +246,7 @@ const AVAILABLE_TABS = {
|
|||||||
|
|
||||||
const TAB_LOADOUT = {
|
const TAB_LOADOUT = {
|
||||||
'settings': [
|
'settings': [
|
||||||
'default-extension-settings',
|
'extension-settings',
|
||||||
'settings.player-element-settings',
|
'settings.player-element-settings',
|
||||||
'autodetectionSettings',
|
'autodetectionSettings',
|
||||||
'ui-settings',
|
'ui-settings',
|
||||||
@ -334,7 +331,7 @@ export default defineComponent({
|
|||||||
// THINGS WILL NOT WORK IF YOU USE ARROWS
|
// THINGS WILL NOT WORK IF YOU USE ARROWS
|
||||||
siteSupportLevel() {
|
siteSupportLevel() {
|
||||||
return (this.site && this.siteSettings) ? this.siteSettings.data.type || 'no-support' : 'waiting';
|
return (this.site && this.siteSettings) ? this.siteSettings.data.type || 'no-support' : 'waiting';
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.generateTabs();
|
this.generateTabs();
|
||||||
@ -373,9 +370,6 @@ export default defineComponent({
|
|||||||
*/
|
*/
|
||||||
updateSite(newSite: {host: string, hostnames: string[],}) {
|
updateSite(newSite: {host: string, hostnames: string[],}) {
|
||||||
this.siteSettings = this.settings.getSiteSettings({site: newSite.host});
|
this.siteSettings = this.settings.getSiteSettings({site: newSite.host});
|
||||||
|
|
||||||
this.generateTabs(newSite);
|
|
||||||
|
|
||||||
this.$nextTick( () => this.$forceUpdate());
|
this.$nextTick( () => this.$forceUpdate());
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
@ -384,26 +378,14 @@ export default defineComponent({
|
|||||||
getUrl(url) {
|
getUrl(url) {
|
||||||
return BrowserDetect.getURL(url);
|
return BrowserDetect.getURL(url);
|
||||||
},
|
},
|
||||||
generateTabs(site = this.site) {
|
generateTabs() {
|
||||||
const tabs = [];
|
const tabs = [];
|
||||||
for (const tab of TAB_LOADOUT[this.role]) {
|
for (const tab of TAB_LOADOUT[this.role]) {
|
||||||
if (!AVAILABLE_TABS[tab]) {
|
if (!AVAILABLE_TABS[tab]) {
|
||||||
console.warn('[uw:SettingsWindowContent] tab', tab, 'is not present in available tabs:', AVAILABLE_TABS, '— tabs for role', this.role, TAB_LOADOUT[this.role]);
|
console.warn('[uw:SettingsWindowContent] tab', tab, 'is not present in available tabs:', AVAILABLE_TABS, '— tabs for role', this.role, TAB_LOADOUT[this.role]);
|
||||||
continue;
|
continue;
|
||||||
} else {
|
} else {
|
||||||
if (tab === 'site-extension-settings') {
|
console.log('pushing tab:', tab, AVAILABLE_TABS[tab])
|
||||||
const frames = AVAILABLE_TABS[tab].children?.find(x => x.id === 'embedded-extension-settings');
|
|
||||||
if (frames) {
|
|
||||||
let frameCount = site?.hostnames?.length;
|
|
||||||
|
|
||||||
if (site?.hostnames?.includes(site.host)) {
|
|
||||||
frameCount--;
|
|
||||||
}
|
|
||||||
|
|
||||||
frames.badgeCount = frameCount;
|
|
||||||
frames.disabled = !frameCount;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
tabs.push(AVAILABLE_TABS[tab]);
|
tabs.push(AVAILABLE_TABS[tab]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -469,9 +451,6 @@ export default defineComponent({
|
|||||||
@apply !bg-transparent !text-primary-300 bg-gradient-to-r from-transparent to-black hover:!text-primary-200 ;
|
@apply !bg-transparent !text-primary-300 bg-gradient-to-r from-transparent to-black hover:!text-primary-200 ;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.disabled {
|
|
||||||
@apply pointer-events-none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-tab {
|
.main-tab {
|
||||||
@ -492,8 +471,7 @@ export default defineComponent({
|
|||||||
.suboption {
|
.suboption {
|
||||||
@apply
|
@apply
|
||||||
px-6 py-2
|
px-6 py-2
|
||||||
uppercase text-stone-400/75 font-mono
|
text-[1.125rem] text-stone-500 font-mono
|
||||||
relative
|
|
||||||
hover:bg-stone-800
|
hover:bg-stone-800
|
||||||
hover:text-primary-200
|
hover:text-primary-200
|
||||||
hover:border-r-stone-600;
|
hover:border-r-stone-600;
|
||||||
@ -501,17 +479,6 @@ export default defineComponent({
|
|||||||
&.active {
|
&.active {
|
||||||
@apply !bg-transparent !text-primary-300 bg-gradient-to-r from-transparent to-black hover:!text-primary-200;
|
@apply !bg-transparent !text-primary-300 bg-gradient-to-r from-transparent to-black hover:!text-primary-200;
|
||||||
}
|
}
|
||||||
&.disabled {
|
|
||||||
@apply pointer-events-none text-stone-600/75;
|
|
||||||
}
|
|
||||||
.badge {
|
|
||||||
@apply absolute right-[0.25rem] bottom-0 w-4 h-4 text-stone-950 bg-primary-300 rounded flex justify-center items-center font-bold text-[0.8rem];
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
@apply
|
|
||||||
mb-2;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,11 +5,7 @@
|
|||||||
|
|
||||||
<b class="text-white">Potentially breaking:</b>
|
<b class="text-white">Potentially breaking:</b>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>De-spaghettified the part of the settings that controls whether extension runs on a given site or not.</li>
|
||||||
De-spaghettified the part of the settings that controls whether extension runs on a given site or not.<br/>
|
|
||||||
<small>NOTE — "Don't fix what ain't broken" only applies when the thing that keeps it working is NOT merely
|
|
||||||
a few patches of questionably applied silvertape.</small>
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<b class="text-white">Autodetection:</b>
|
<b class="text-white">Autodetection:</b>
|
||||||
|
|||||||
@ -9,14 +9,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-for="host of hosts" :key="host" @click="selectedSite = host" class="flex flex-col">
|
<div v-for="host of hosts" :key="host" @click="selectedSite = host" class="flex flex-col container pointer hoverable" style="margin-top: 4px; padding: 0.5rem 1rem;">
|
||||||
<template v-if="host !== parentHost">
|
<SiteListItem
|
||||||
<SiteListItem
|
:parentHost="parentHost"
|
||||||
:parentHost="parentHost"
|
:host="host"
|
||||||
:host="host"
|
:settings="settings"
|
||||||
:settings="settings"
|
></SiteListItem>
|
||||||
></SiteListItem>
|
|
||||||
</template>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-if="selectedSite">
|
<template v-if="selectedSite">
|
||||||
|
|||||||
@ -1,6 +1,31 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-row gap-8">
|
<div class="flex flex-row gap-8">
|
||||||
<div v-if="!selectedSite || !isCompact">
|
<div v-if="!selectedSite || !isCompact">
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="flex flex-col cursor-pointer mt-1 px-4 py-2 bg-black border-1 border-stone-500"
|
||||||
|
:class="{'opacity-50 hover:opacity-100': selectedSite && selectedSite !== '@global' }"
|
||||||
|
@click="selectedSite = '@global'"
|
||||||
|
>
|
||||||
|
<div class="flex flex-row">
|
||||||
|
<div class="flex-grow pointer">
|
||||||
|
<b style="color: #fa6">Default settings</b>
|
||||||
|
</div>
|
||||||
|
<div>Edit</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-row">
|
||||||
|
<small>
|
||||||
|
<span style="text-transform: uppercase; font-size: 0.9rem">
|
||||||
|
Enable extension: <span style="font-size: 0.9rem;" :style="getSiteEnabledColor('@global', 'enable')">{{ getSiteEnabledModes('@global', 'enable') }}</span>
|
||||||
|
<span v-if="getSiteEnabledModes('@global', 'enable') === 'disabled'" class="text-[0.75em] lowercase text-stone-400"> (except on whitelisted sites)</span>
|
||||||
|
</span> <br/>
|
||||||
|
Autodetection: <span :style="getSiteEnabledColor('@global', 'enableAard')"><small>{{ getSiteEnabledModes('@global', 'enableAard') }}</small></span>;
|
||||||
|
Keyboard shortcuts: <span :style="getSiteEnabledColor('@global', 'enableKeyboard')"><small>{{ getSiteEnabledModes('@global', 'enableKeyboard') }}</small></span>;
|
||||||
|
In-player UI: <span :style="getSiteEnabledColor('@global', 'enableUI')"><small>{{ getSiteEnabledModes('@global', 'enableUI') }}</small></span>;
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div style="margin-top: 1rem; margin-bottom: 1rem;">
|
<div style="margin-top: 1rem; margin-bottom: 1rem;">
|
||||||
<div class="border border-blue-500 text-blue-500 bg-slate-950 px-4 py-2" style="float: none">
|
<div class="border border-blue-500 text-blue-500 bg-slate-950 px-4 py-2" style="float: none">
|
||||||
<b>NOTE:</b> Sites not on this list use default extension settings.
|
<b>NOTE:</b> Sites not on this list use default extension settings.
|
||||||
|
|||||||
@ -168,7 +168,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Use for embedded content -->
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<div class="label">
|
<div class="label">
|
||||||
Use these settings for <span class="color-emphasis">embedded content</span>?
|
Use these settings for <span class="color-emphasis">embedded content</span>?
|
||||||
@ -176,17 +175,14 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="select">
|
<div class="select">
|
||||||
<select
|
<select
|
||||||
:value="simpleExtensionSettings.applyToEmbeddedContent"
|
:value="siteDefaultForEmbedded"
|
||||||
@click="setSiteOption('applyToEmbeddedContent', $event)"
|
@click="setSiteOption('applyToEmbeddedContent', $event)"
|
||||||
>
|
>
|
||||||
<option :value="EmbeddedContentSettingsOverridePolicy.Default">
|
|
||||||
Use default ({{simpleDefaultSettings.applyToEmbeddedContent}})
|
|
||||||
</option>
|
|
||||||
<option :value="EmbeddedContentSettingsOverridePolicy.Always">
|
<option :value="EmbeddedContentSettingsOverridePolicy.Always">
|
||||||
Always(-ish)
|
Always(-ish)
|
||||||
</option>
|
</option>
|
||||||
<option :value="EmbeddedContentSettingsOverridePolicy.UseAsDefault">
|
<option :value="EmbeddedContentSettingsOverridePolicy.UseAsDefault">
|
||||||
When no settings exist for embedded content
|
Use as default
|
||||||
</option>
|
</option>
|
||||||
<option :value="EmbeddedContentSettingsOverridePolicy.Never">
|
<option :value="EmbeddedContentSettingsOverridePolicy.Never">
|
||||||
Never
|
Never
|
||||||
@ -202,16 +198,13 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="select">
|
<div class="select">
|
||||||
<select
|
<select
|
||||||
:value="simpleExtensionSettings.overrideWhenEmbedded"
|
:value="siteDefaultOverrideEmbedded"
|
||||||
@click="setSiteOption('overrideWhenEmbedded', $event)"
|
@click="setSiteOption('overrideWhenEmbedded', $event)"
|
||||||
>
|
>
|
||||||
<option :value="EmbeddedContentSettingsOverridePolicy.Default">
|
<option :value="true">
|
||||||
Use default ({{simpleDefaultSettings.overrideWhenEmbedded}})
|
|
||||||
</option>
|
|
||||||
<option :value="EmbeddedContentSettingsOverridePolicy.Always">
|
|
||||||
Yes
|
Yes
|
||||||
</option>
|
</option>
|
||||||
<option :value="EmbeddedContentSettingsOverridePolicy.Never">
|
<option :value="false">
|
||||||
No
|
No
|
||||||
</option>
|
</option>
|
||||||
</select>
|
</select>
|
||||||
@ -317,50 +310,18 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div 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>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<Popup
|
|
||||||
v-if="playerDetectionOptionsDialog.visible"
|
|
||||||
title="Player detection options"
|
|
||||||
confirmButtonText="Save"
|
|
||||||
cancelButtonText="Cancel"
|
|
||||||
>
|
|
||||||
<PlayerSelectorAdvancedForm
|
|
||||||
:settings="settings"
|
|
||||||
:siteSettings="siteSettings"
|
|
||||||
></PlayerSelectorAdvancedForm>
|
|
||||||
</Popup>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
|
|
||||||
import Popup from '@components/common/Popup.vue';
|
|
||||||
import PlayerSelectorAdvancedForm from '@components/segments/PlayerElementSelection/Panels/PlayerSelectorAdvancedForm.vue';
|
|
||||||
|
|
||||||
import ExtensionMode from '@src/common/enums/ExtensionMode.enum';
|
import ExtensionMode from '@src/common/enums/ExtensionMode.enum';
|
||||||
import VideoAlignmentType from '@src/common/enums/VideoAlignmentType.enum';
|
import VideoAlignmentType from '@src/common/enums/VideoAlignmentType.enum';
|
||||||
import CropModePersistence from '@src/common/enums/CropModePersistence.enum';
|
import CropModePersistence from '@src/common/enums/CropModePersistence.enum';
|
||||||
import EmbeddedContentSettingsOverridePolicy from '@src/common/enums/EmbeddedContentSettingsOverridePolicy.enum';
|
import EmbeddedContentSettingsOverridePolicy from '@src/common/enums/EmbeddedContentSettingsOverridePolicy.enum';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
|
|
||||||
components: {
|
|
||||||
Popup,
|
|
||||||
PlayerSelectorAdvancedForm,
|
|
||||||
},
|
|
||||||
props: [
|
|
||||||
'settings',
|
|
||||||
'siteSettings',
|
|
||||||
'isDefaultConfiguration',
|
|
||||||
'showPlayerSettings',
|
|
||||||
],
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
CropModePersistence: CropModePersistence,
|
CropModePersistence: CropModePersistence,
|
||||||
@ -376,24 +337,50 @@ export default defineComponent({
|
|||||||
{label: 'Bottom left', arguments: {x: VideoAlignmentType.Left, y: VideoAlignmentType.Bottom}},
|
{label: 'Bottom left', arguments: {x: VideoAlignmentType.Left, y: VideoAlignmentType.Bottom}},
|
||||||
{label: 'Bottom center', arguments: {x: VideoAlignmentType.Center, y: VideoAlignmentType.Bottom}},
|
{label: 'Bottom center', arguments: {x: VideoAlignmentType.Center, y: VideoAlignmentType.Bottom}},
|
||||||
{label: 'Bottom right', arguments: {x: VideoAlignmentType.Right, y: VideoAlignmentType.Bottom}}
|
{label: 'Bottom right', arguments: {x: VideoAlignmentType.Right, y: VideoAlignmentType.Bottom}}
|
||||||
],
|
]
|
||||||
playerDetectionOptionsDialog: {
|
|
||||||
visible: false,
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mixins: [
|
mixins: [
|
||||||
|
|
||||||
],
|
],
|
||||||
|
props: [
|
||||||
|
'settings',
|
||||||
|
'siteSettings',
|
||||||
|
'isDefaultConfiguration'
|
||||||
|
],
|
||||||
|
components: {
|
||||||
|
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
simpleExtensionSettings() {
|
simpleExtensionSettings() {
|
||||||
return this.computeSiteSettingsObject('site');
|
return {
|
||||||
|
enable: this.compileSimpleSettings('enable'),
|
||||||
|
enableAard: this.compileSimpleSettings('enableAard'),
|
||||||
|
enableKeyboard: this.compileSimpleSettings('enableKeyboard'),
|
||||||
|
enableUI: this.compileSimpleSettings('enableUI')
|
||||||
|
}
|
||||||
},
|
},
|
||||||
simpleEffectiveSettings() {
|
simpleEffectiveSettings() {
|
||||||
return this.computeSiteSettingsObject('site-effective');
|
return {
|
||||||
|
enable: this.compileSimpleSettings('enable', 'site-effective'),
|
||||||
|
enableAard: this.compileSimpleSettings('enableAard', 'site-effective'),
|
||||||
|
enableKeyboard: this.compileSimpleSettings('enableKeyboard', 'site-effective'),
|
||||||
|
enableUI: this.compileSimpleSettings('enableUI', 'site-effective')
|
||||||
|
}
|
||||||
},
|
},
|
||||||
simpleDefaultSettings() {
|
simpleDefaultSettings() {
|
||||||
return this.computeDefaultOptionLabels();
|
return {
|
||||||
|
enable: this.getDefaultOptionLabel('enable'),
|
||||||
|
enableAard: this.getDefaultOptionLabel('enableAard'),
|
||||||
|
enableKeyboard: this.getDefaultOptionLabel('enableKeyboard'),
|
||||||
|
enableUI: this.getDefaultOptionLabel('enableUI')
|
||||||
|
};
|
||||||
|
},
|
||||||
|
siteDefaultForEmbedded() {
|
||||||
|
return this.siteSettings.raw?.applyToEmbeddedContent;
|
||||||
|
},
|
||||||
|
siteDefaultOverrideEmbedded() {
|
||||||
|
return this.siteSettings.raw?.overrideWhenEmbedded ?? false;
|
||||||
},
|
},
|
||||||
siteDefaultCrop() {
|
siteDefaultCrop() {
|
||||||
return this.siteSettings.raw?.defaults?.crop ? JSON.stringify(this.siteSettings.raw?.defaults?.crop) : JSON.stringify({useDefault: true});
|
return this.siteSettings.raw?.defaults?.crop ? JSON.stringify(this.siteSettings.raw?.defaults?.crop) : JSON.stringify({useDefault: true});
|
||||||
@ -426,25 +413,11 @@ export default defineComponent({
|
|||||||
this.forceRefreshPage();
|
this.forceRefreshPage();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
computeSiteSettingsObject(getFor = 'site') {
|
|
||||||
const out = {};
|
|
||||||
for (const key in this.settings.default.sites['@global']) {
|
|
||||||
out[key] = this.compileSimpleSettings(key, getFor);
|
|
||||||
}
|
|
||||||
return out;
|
|
||||||
},
|
|
||||||
computeDefaultOptionLabels() {
|
|
||||||
const out = {};
|
|
||||||
for (const key in this.settings.default.sites['@global']) {
|
|
||||||
out[key] = this.getDefaultOptionLabel(key);
|
|
||||||
}
|
|
||||||
return out;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Compiles our extension settings into more user-friendly options
|
* Compiles our extension settings into more user-friendly options
|
||||||
*/
|
*/
|
||||||
compileSimpleSettings(component, getFor = 'site'): ExtensionMode {
|
compileSimpleSettings(component, getFor = 'site'): ExtensionMode {
|
||||||
|
|
||||||
let settingsData;
|
let settingsData;
|
||||||
switch (getFor) {
|
switch (getFor) {
|
||||||
case 'site':
|
case 'site':
|
||||||
@ -458,44 +431,15 @@ export default defineComponent({
|
|||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
return settingsData?.[component] ?? ExtensionMode.Default;
|
console.log('compiling simple settings;', settingsData, 'original settings:', this.siteSettings)
|
||||||
|
|
||||||
|
return settingsData?.[component];
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
|
||||||
* Gets option labels for default values of each option
|
|
||||||
*/
|
|
||||||
getDefaultOptionLabel(component) {
|
getDefaultOptionLabel(component) {
|
||||||
const componentValue: ExtensionMode | EmbeddedContentSettingsOverridePolicy = this.compileSimpleSettings(component, 'default');
|
const componentValue: ExtensionMode = this.compileSimpleSettings(component, 'default');
|
||||||
|
|
||||||
if (component === 'overrideWhenEmbedded') {
|
switch (componentValue) {
|
||||||
switch (componentValue) {
|
|
||||||
case EmbeddedContentSettingsOverridePolicy.Default:
|
|
||||||
return 'default';
|
|
||||||
case EmbeddedContentSettingsOverridePolicy.Always:
|
|
||||||
return 'yes';
|
|
||||||
case EmbeddedContentSettingsOverridePolicy.Never:
|
|
||||||
return 'no';
|
|
||||||
default:
|
|
||||||
return '<invalid value>';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (component === 'applyToEmbeddedContent') {
|
|
||||||
switch (componentValue as EmbeddedContentSettingsOverridePolicy) {
|
|
||||||
case EmbeddedContentSettingsOverridePolicy.Always:
|
|
||||||
return 'always(-ish)';
|
|
||||||
case EmbeddedContentSettingsOverridePolicy.UseAsDefault:
|
|
||||||
return 'when no settings exist for embedded content';
|
|
||||||
case EmbeddedContentSettingsOverridePolicy.Never:
|
|
||||||
return 'never';
|
|
||||||
case EmbeddedContentSettingsOverridePolicy.Default:
|
|
||||||
return 'default';
|
|
||||||
default:
|
|
||||||
return '<invalid value>';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
switch (componentValue as ExtensionMode) {
|
|
||||||
case ExtensionMode.Disabled:
|
case ExtensionMode.Disabled:
|
||||||
return 'disabled';
|
return 'disabled';
|
||||||
case ExtensionMode.Default:
|
case ExtensionMode.Default:
|
||||||
@ -596,13 +540,7 @@ export default defineComponent({
|
|||||||
setExtensionMode(component, event) {
|
setExtensionMode(component, event) {
|
||||||
const option = event.target.value;
|
const option = event.target.value;
|
||||||
this.siteSettings.set(component, option);
|
this.siteSettings.set(component, option);
|
||||||
},
|
}
|
||||||
|
|
||||||
//#region ADVANCED VIDEO PLAYER SETTINGS
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
//#endregion
|
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,68 +1,60 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- ADVANCED OPTIONS -->
|
<!-- ADVANCED OPTIONS -->
|
||||||
<div class="flex flex-col gap-2">
|
<div v-if="DOMConfigData" class="flex flex-col gap-2">
|
||||||
<div class="flex flex-row gap-2 justify-end">
|
<div class="flex flex-row gap-2 justify-end">
|
||||||
<button>Load existing config</button>
|
<button>Load existing config</button>
|
||||||
<button>Import from file</button>
|
<button>Import from file</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="field">
|
||||||
<template v-if="DOMConfigData" >
|
<div class="label">Player detection:</div>
|
||||||
<div class="field">
|
<div class="select">
|
||||||
<div class="label">Player detection:</div>
|
<select v-model="DOMConfigData.elements.player.playerDetectionMode">
|
||||||
<div class="select">
|
<option :value="PlayerDetectionMode.Auto">Automatic</option>
|
||||||
<select v-model="DOMConfigData.elements.player.playerDetectionMode">
|
<option :value="PlayerDetectionMode.AncestorIndex">Fixed player container offset</option>
|
||||||
<option :value="PlayerDetectionMode.Auto">Automatic</option>
|
<option :value="PlayerDetectionMode.QuerySelectors">Query selectors</option>
|
||||||
<option :value="PlayerDetectionMode.AncestorIndex">Fixed player container offset</option>
|
</select>
|
||||||
<option :value="PlayerDetectionMode.QuerySelectors">Query selectors</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<div class="label">Use automatic detection for fallback</div>
|
<div class="label">Use automatic detection for fallback</div>
|
||||||
<div class="checkbox">
|
<div class="checkbox">
|
||||||
<input type="checkbox" v-model="DOMConfigData.elements.player.allowAutoFallback" />
|
<input type="checkbox" v-model="DOMConfigData.elements.player.allowAutoFallback" />
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<div class="label">Player container offset</div>
|
<div class="label">Player container offset</div>
|
||||||
<div class="input">
|
<div class="input">
|
||||||
<input v-model="DOMConfigData.elements.player.ancestorIndex" />
|
<input v-model="DOMConfigData.elements.player.ancestorIndex" />
|
||||||
</div>
|
|
||||||
<div class="hint">
|
|
||||||
Defines how far away from video the player container element is. If you don't know what you're doing, start
|
|
||||||
with 1, save settings, and reload the page. If this doesn't fix your problem, increase the number by 1 and
|
|
||||||
repeat the procedure. If no value between 1-16 works, the site may require additional CSS in order to work.
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="hint">
|
||||||
<div class="field">
|
Defines how far away from video the player container element is. If you don't know what you're doing, start
|
||||||
<div class="label">Query selector</div>
|
with 1, save settings, and reload the page. If this doesn't fix your problem, increase the number by 1 and
|
||||||
<div class="input">
|
repeat the procedure. If no value between 1-16 works, the site may require additional CSS in order to work.
|
||||||
<input v-model="DOMConfigData.elements.player.querySelectors" />
|
|
||||||
</div>
|
|
||||||
<div class="hint">
|
|
||||||
You should be at least somewhat proficient with CSS in order to use this option. If you need to provide more
|
|
||||||
than one query selector, use commas to separate them.
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<div class="label">Additional CSS for the page</div>
|
<div class="label">Query selector</div>
|
||||||
<div class="input">
|
<div class="input">
|
||||||
<textarea v-model="DOMConfigData.customCSS" />
|
<input v-model="DOMConfigData.elements.player.querySelectors" />
|
||||||
</div>
|
|
||||||
<div class="hint">
|
|
||||||
You should be at least somewhat proficient with CSS in order to use this option.
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="hint">
|
||||||
|
You should be at least somewhat proficient with CSS in order to use this option. If you need to provide more
|
||||||
|
than one query selector, use commas to separate them.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
</template>
|
<div class="label">Additional CSS for the page</div>
|
||||||
<template v-else>
|
<div class="input">
|
||||||
No DOM config for this site.
|
<textbox v-model="DOMConfigData.customCss" />
|
||||||
</template>
|
</div>
|
||||||
|
<div class="hint">
|
||||||
|
You should be at least somewhat proficient with CSS in order to use this option.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="w-full flex flex-row gap-2 justify-end">
|
<div class="w-full flex flex-row gap-2 justify-end">
|
||||||
@ -83,7 +75,6 @@ import { SiteSettings } from '@src/ext/lib/settings/SiteSettings';
|
|||||||
import { PlayerDetectionMode } from '@src/common/enums/PlayerDetectionMode.enum';
|
import { PlayerDetectionMode } from '@src/common/enums/PlayerDetectionMode.enum';
|
||||||
|
|
||||||
import Popup from '@components/common/Popup.vue';
|
import Popup from '@components/common/Popup.vue';
|
||||||
import { _cp } from '../../../../../common/js/utils';
|
|
||||||
|
|
||||||
|
|
||||||
export default({
|
export default({
|
||||||
@ -97,7 +88,6 @@ export default({
|
|||||||
],
|
],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
PlayerDetectionMode,
|
|
||||||
DOMConfigData: undefined as any,
|
DOMConfigData: undefined as any,
|
||||||
selectSnapshotDialog: {visible: false},
|
selectSnapshotDialog: {visible: false},
|
||||||
}
|
}
|
||||||
@ -114,11 +104,7 @@ export default({
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
loadSiteSettings(siteSettings: SiteSettings) {
|
loadSiteSettings(siteSettings: SiteSettings) {
|
||||||
if (siteSettings.data.DOMConfig) {
|
this.DOMConfigData = siteSettings.data.DOMConfig[siteSettings.data.activeDOMConfig];
|
||||||
this.DOMConfigData = siteSettings.data.DOMConfig[siteSettings.data.activeDOMConfig];
|
|
||||||
} else {
|
|
||||||
this.DOMConfigData = _cp(siteSettings.blankSettings.DOMConfig.blank)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -200,23 +200,23 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
async setPlayer(index) {
|
async setPlayer(index) {
|
||||||
// yup.
|
// yup.
|
||||||
// this.siteSettings.getDOMConfig('modified', 'original');
|
this.siteSettings.getDOMConfig('modified', 'original');
|
||||||
// await this.siteSettings.setUpdateFlags(['PlayerData']);
|
await this.siteSettings.setUpdateFlags(['PlayerData']);
|
||||||
// await this.siteSettings.set('DOMConfig.modified.type', 'modified', {noSave: true});
|
await this.siteSettings.set('DOMConfig.modified.type', 'modified', {noSave: true});
|
||||||
// await this.siteSettings.set('activeDOMConfig', 'modified', {noSave: true});
|
await this.siteSettings.set('activeDOMConfig', 'modified', {noSave: true});
|
||||||
|
|
||||||
// // if user agrees with ultrawidify on what element player should be,
|
// if user agrees with ultrawidify on what element player should be,
|
||||||
// // we just unset our settings for this site
|
// we just unset our settings for this site
|
||||||
// if (this.elementStack[index].heuristics?.autoMatch) {
|
if (this.elementStack[index].heuristics?.autoMatch) {
|
||||||
// await this.siteSettings.set('DOMConfig.modified.elements.player.manual', false);
|
await this.siteSettings.set('DOMConfig.modified.elements.player.manual', false);
|
||||||
// this.getPlayerTree();
|
this.getPlayerTree();
|
||||||
// } else {
|
} else {
|
||||||
// // ensure settings exist:
|
// ensure settings exist:
|
||||||
// await this.siteSettings.set('DOMConfig.modified.elements.player.manual', true, {noSave: true});
|
await this.siteSettings.set('DOMConfig.modified.elements.player.manual', true, {noSave: true});
|
||||||
// await this.siteSettings.set('DOMConfig.modified.elements.player.mode', 'index', {noSave: true});
|
await this.siteSettings.set('DOMConfig.modified.elements.player.mode', 'index', {noSave: true});
|
||||||
// await this.siteSettings.set('DOMConfig.modified.elements.player.index', index, true);
|
await this.siteSettings.set('DOMConfig.modified.elements.player.index', index, true);
|
||||||
// this.getPlayerTree();
|
this.getPlayerTree();
|
||||||
// }
|
}
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* Toggles active CSS for element of certain parent index.
|
* Toggles active CSS for element of certain parent index.
|
||||||
|
|||||||
@ -56,23 +56,23 @@ export default({
|
|||||||
},
|
},
|
||||||
async setPlayer(index) {
|
async setPlayer(index) {
|
||||||
// yup.
|
// yup.
|
||||||
// this.siteSettings.getDOMConfig('modified', 'original');
|
this.siteSettings.getDOMConfig('modified', 'original');
|
||||||
// await this.siteSettings.setUpdateFlags(['PlayerData']);
|
await this.siteSettings.setUpdateFlags(['PlayerData']);
|
||||||
// await this.siteSettings.set('DOMConfig.modified.type', 'modified', {noSave: true});
|
await this.siteSettings.set('DOMConfig.modified.type', 'modified', {noSave: true});
|
||||||
// await this.siteSettings.set('activeDOMConfig', 'modified', {noSave: true});
|
await this.siteSettings.set('activeDOMConfig', 'modified', {noSave: true});
|
||||||
|
|
||||||
// // if user agrees with ultrawidify on what element player should be,
|
// if user agrees with ultrawidify on what element player should be,
|
||||||
// // we just unset our settings for this site
|
// we just unset our settings for this site
|
||||||
// if (this.elementStack[index].heuristics?.autoMatch) {
|
if (this.elementStack[index].heuristics?.autoMatch) {
|
||||||
// await this.siteSettings.set('DOMConfig.modified.elements.player.manual', false);
|
await this.siteSettings.set('DOMConfig.modified.elements.player.manual', false);
|
||||||
// this.getPlayerTree();
|
this.getPlayerTree();
|
||||||
// } else {
|
} else {
|
||||||
// // ensure settings exist:
|
// ensure settings exist:
|
||||||
// await this.siteSettings.set('DOMConfig.modified.elements.player.manual', true, {noSave: true});
|
await this.siteSettings.set('DOMConfig.modified.elements.player.manual', true, {noSave: true});
|
||||||
// await this.siteSettings.set('DOMConfig.modified.elements.player.mode', 'index', {noSave: true});
|
await this.siteSettings.set('DOMConfig.modified.elements.player.mode', 'index', {noSave: true});
|
||||||
// await this.siteSettings.set('DOMConfig.modified.elements.player.index', index, true);
|
await this.siteSettings.set('DOMConfig.modified.elements.player.index', index, true);
|
||||||
// this.getPlayerTree();
|
this.getPlayerTree();
|
||||||
// }
|
}
|
||||||
},
|
},
|
||||||
edit() {
|
edit() {
|
||||||
|
|
||||||
|
|||||||
@ -156,23 +156,23 @@ export default({
|
|||||||
},
|
},
|
||||||
async setPlayer(index) {
|
async setPlayer(index) {
|
||||||
// yup.
|
// yup.
|
||||||
// this.siteSettings.getDOMConfig('modified', 'original');
|
this.siteSettings.getDOMConfig('modified', 'original');
|
||||||
// await this.siteSettings.setUpdateFlags(['PlayerData']);
|
await this.siteSettings.setUpdateFlags(['PlayerData']);
|
||||||
// await this.siteSettings.set('DOMConfig.modified.type', 'modified', {noSave: true});
|
await this.siteSettings.set('DOMConfig.modified.type', 'modified', {noSave: true});
|
||||||
// await this.siteSettings.set('activeDOMConfig', 'modified', {noSave: true});
|
await this.siteSettings.set('activeDOMConfig', 'modified', {noSave: true});
|
||||||
|
|
||||||
// // if user agrees with ultrawidify on what element player should be,
|
// if user agrees with ultrawidify on what element player should be,
|
||||||
// // we just unset our settings for this site
|
// we just unset our settings for this site
|
||||||
// if (this.elementStack[index].heuristics?.autoMatch) {
|
if (this.elementStack[index].heuristics?.autoMatch) {
|
||||||
// await this.siteSettings.set('DOMConfig.modified.elements.player.manual', false);
|
await this.siteSettings.set('DOMConfig.modified.elements.player.manual', false);
|
||||||
// this.getPlayerTree();
|
this.getPlayerTree();
|
||||||
// } else {
|
} else {
|
||||||
// // ensure settings exist:
|
// ensure settings exist:
|
||||||
// await this.siteSettings.set('DOMConfig.modified.elements.player.manual', true, {noSave: true});
|
await this.siteSettings.set('DOMConfig.modified.elements.player.manual', true, {noSave: true});
|
||||||
// await this.siteSettings.set('DOMConfig.modified.elements.player.mode', 'index', {noSave: true});
|
await this.siteSettings.set('DOMConfig.modified.elements.player.mode', 'index', {noSave: true});
|
||||||
// await this.siteSettings.set('DOMConfig.modified.elements.player.index', index, true);
|
await this.siteSettings.set('DOMConfig.modified.elements.player.index', index, true);
|
||||||
// this.getPlayerTree();
|
this.getPlayerTree();
|
||||||
// }
|
}
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* Toggles active CSS for element of certain parent index.
|
* Toggles active CSS for element of certain parent index.
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user