Merge branch 'feature/player-ui'
This commit is contained in:
commit
e839e632fc
16
.vscode/launch.json
vendored
16
.vscode/launch.json
vendored
@ -4,10 +4,19 @@
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
|
||||
{
|
||||
"type": "chrome",
|
||||
"request": "attach",
|
||||
"name": "Attach to Chrome",
|
||||
"port": 9222,
|
||||
"urlFilter": "http://*/*",
|
||||
"webRoot": "${workspaceFolder}"
|
||||
},
|
||||
{
|
||||
"type": "firefox",
|
||||
"request": "attach",
|
||||
"name": "Attach",
|
||||
"name": "Attach (firefox)",
|
||||
"pathMappings": [
|
||||
{
|
||||
"url": "webpack:///ext",
|
||||
@ -16,7 +25,7 @@
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Launch addon",
|
||||
"name": "Launch addon (firefox)",
|
||||
"type": "firefox",
|
||||
"request": "launch",
|
||||
"port": 6000,
|
||||
@ -36,5 +45,8 @@
|
||||
"firefoxArgs": [
|
||||
"--start-debugger-server"
|
||||
]
|
||||
},
|
||||
"chrome": {
|
||||
"executable": "/usr/bin/google-chrome-stable --remote-debugging-port=9222",
|
||||
}
|
||||
}
|
||||
6
.vscode/settings.json
vendored
6
.vscode/settings.json
vendored
@ -9,10 +9,13 @@
|
||||
"blackbars",
|
||||
"blackframe",
|
||||
"canvas",
|
||||
"clickthrough",
|
||||
"com",
|
||||
"comms",
|
||||
"csui",
|
||||
"decycle",
|
||||
"dinked",
|
||||
"dinks",
|
||||
"disneyplus",
|
||||
"endregion",
|
||||
"equalish",
|
||||
@ -29,6 +32,8 @@
|
||||
"insta",
|
||||
"letterboxed",
|
||||
"manjaro",
|
||||
"mdicon",
|
||||
"mdijs",
|
||||
"minification",
|
||||
"mitigations",
|
||||
"nogrow",
|
||||
@ -49,6 +54,7 @@
|
||||
"tablist",
|
||||
"tamius",
|
||||
"textbox",
|
||||
"ultrawide",
|
||||
"ultrawidify",
|
||||
"unmark",
|
||||
"unmarking",
|
||||
|
||||
26
CHANGELOG.md
26
CHANGELOG.md
@ -11,12 +11,30 @@
|
||||
## v7.0 (planned major)
|
||||
* WebGL autodetection
|
||||
|
||||
## v6.0 (next major)
|
||||
## v6.0 (current major)
|
||||
|
||||
* in-player GUI
|
||||
* Fix UI logger
|
||||
Chrome only, because I needed to rush manifest v3 migration before ensuring things work in Firefox.
|
||||
|
||||
## v5.x (current major)
|
||||
* In player UI
|
||||
* New alignment options (can align video both vertically, as well as horizontally)
|
||||
* Extension does a little bit of a better job differentiating between levels of support for a given site
|
||||
* Changed how cropping and panning works. This should lead to fewer problems and better generic support.
|
||||
* REGRESSION: no manual panning with shift + mouse movement
|
||||
* "Player select" screen, which provides a GUI way for picking HTML element that acts as the video player area
|
||||
|
||||
Regressions and potential issues:
|
||||
* Settings were largely not migrated from previous versions. This is as intended, since changes to cropping (and some other aspects)
|
||||
rendered certain old settings obsolete.
|
||||
* Extension can no longer discriminate between iframes — extension popup commands get sent to ALL iframes on page
|
||||
* Extension probably can't discriminate between multiple videos on a single page
|
||||
|
||||
## v5.x
|
||||
|
||||
### v5.1.7
|
||||
|
||||
Firefox-only.
|
||||
|
||||
* When cropping and panning video, CSS' `transform: translate(x,y)` now uses integers _always_. Before that fix, `translate(x,y)` could be offset by x.5 px, and that half of a pixel introduced a 1px thick line on the portion of the left edge of the video.
|
||||
|
||||
### v5.1.7
|
||||
|
||||
|
||||
6
DOCUMENTATION.MD
Normal file
6
DOCUMENTATION.MD
Normal file
@ -0,0 +1,6 @@
|
||||
# Implementation details
|
||||
|
||||
## Enabling/disabling aspect ratio corrections
|
||||
|
||||
* Aspect ratios are changed by proxy. Extension attaches **a custom CSS class** to `video` and `player` elements.
|
||||
* To prevent extension from affecting the appearance of a webpage, **it's sufficient to remove our custom CSS classes from `video` and `player` elements.**
|
||||
16657
package-lock.json
generated
16657
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
69
package.json
69
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "ultrawidify",
|
||||
"version": "5.1.7",
|
||||
"version": "6.0.0",
|
||||
"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>",
|
||||
"scripts": {
|
||||
@ -16,44 +16,45 @@
|
||||
"build-zip": "node scripts/build-zip.js",
|
||||
"build:dev": "webpack --hide-modules",
|
||||
"dev": "cross-env NODE_ENV=development CHANNEL=dev concurrently \"cross-env BROWSER=firefox npm run build:dev -- --watch\" \"cross-env BROWSER=chrome npm run build:dev -- --watch\" \"cross-env BROWSER=edge npm run build:dev -- --watch\"",
|
||||
"dev-ff": "cross-env NODE_ENV=development CHANNEL=dev BROWSER=firefox npm run build:dev -- --watch",
|
||||
"dev-chrome": "cross-env NODE_ENV=development CHANNEL=dev BROWSER=chrome npm run build:dev -- --watch",
|
||||
"dev-edge": "cross-env NODE_ENV=development CHANNEL=dev BROWSER=edge npm run build:dev -- --watch",
|
||||
"dev:windows": "cross-env NODE_ENV=development CHANNEL=dev concurrently \"cross-env BROWSER=firefox npm run build:dev -- -w --watch-poll\" \"cross-env BROWSER=chrome npm run build:dev -- -w --watch-poll\" \"cross-env BROWSER=edge npm run build:dev -- -w --watch-poll\"",
|
||||
"dev-ff": "rm -rf ./dist-ff && cross-env NODE_ENV=development CHANNEL=dev BROWSER=firefox npm run build:dev -- --watch",
|
||||
"dev-chrome": "rm -rf ./dist-chrome && cross-env NODE_ENV=development CHANNEL=dev BROWSER=chrome npm run build:dev -- --watch",
|
||||
"dev-edge": "rm -rf ./dist-edge && cross-env NODE_ENV=development CHANNEL=dev BROWSER=edge npm run build:dev -- --watch",
|
||||
"pre-build": "rm -rf ./dist-ff; rm -rf ./dist-chrome; rm -rf ./dist-edge; rm -rf ./node_modules; npm ci",
|
||||
"start": "npm run dev"
|
||||
"start": "npm run dev",
|
||||
"start:windows": "npm run dev:windows"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-proposal-class-properties": "^7.12.1",
|
||||
"@types/chrome": "0.0.129",
|
||||
"@types/core-js": "^2.5.3",
|
||||
"@types/es6-promise": "^3.3.0",
|
||||
"@types/firefox": "0.0.30",
|
||||
"@types/resize-observer-browser": "^0.1.5",
|
||||
"@vue/cli": "^4.5.9",
|
||||
"@vue/cli-plugin-typescript": "^4.5.11",
|
||||
"bootstrap": "^4.5.3",
|
||||
"bootstrap-icons": "^1.1.0",
|
||||
"bootstrap-icons-vue": "^0.3.0",
|
||||
"bootstrap-vue": "^2.20.1",
|
||||
"concurrently": "^5.2.0",
|
||||
"@babel/plugin-proposal-class-properties": "^7.16.0",
|
||||
"@mdi/font": "^6.5.95",
|
||||
"@mdi/js": "^6.4.95",
|
||||
"@types/resize-observer-browser": "^0.1.6",
|
||||
"concurrently": "^5.3.0",
|
||||
"fs-extra": "^7.0.1",
|
||||
"json-cyclic": "0.0.3",
|
||||
"lodash": "^4.17.21",
|
||||
"typescript": "^4.2.3",
|
||||
"vue": "^3.0.0-beta.1",
|
||||
"vuex": "^4.0.0-alpha.1",
|
||||
"vuex-webextensions": "^1.3.0",
|
||||
"webextension-polyfill-ts": "^0.24.0"
|
||||
"mdi-vue": "^3.0.11",
|
||||
"typescript": "^4.4.4",
|
||||
"vue": "^3.2.21",
|
||||
"vue-style-loader": "^4.1.3",
|
||||
"vuex": "^4.0.2",
|
||||
"vuex-webextensions": "^1.3.3",
|
||||
"webextension-polyfill": "^0.12.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.13",
|
||||
"@babel/plugin-proposal-optional-chaining": "^7.10.4",
|
||||
"@babel/preset-env": "^7.12.13",
|
||||
"@types/lodash": "^4.14.168",
|
||||
"@types/node": "^14.14.25",
|
||||
"@vue/compiler-sfc": "^3.0.3",
|
||||
"@babel/core": "^7.16.0",
|
||||
"@babel/preset-env": "^7.16.0",
|
||||
"@types/chrome": "0.0.240",
|
||||
"@types/core-js": "^2.5.5",
|
||||
"@types/es6-promise": "^3.3.0",
|
||||
"@types/firefox": "0.0.31",
|
||||
"@types/lodash": "^4.14.176",
|
||||
"@types/node": "^14.17.32",
|
||||
"@vue/cli": "^4.5.15",
|
||||
"@vue/cli-plugin-typescript": "^4.5.15",
|
||||
"@vue/compiler-sfc": "^3.2.21",
|
||||
"archiver": "^3.0.0",
|
||||
"babel-loader": "^8.2.2",
|
||||
"babel-loader": "^8.2.3",
|
||||
"babel-preset-es2020": "^1.0.2",
|
||||
"copy-webpack-plugin": "^4.5.3",
|
||||
"cross-env": "^5.2.0",
|
||||
@ -62,13 +63,13 @@
|
||||
"file-loader": "^1.1.11",
|
||||
"mini-css-extract-plugin": "^0.4.4",
|
||||
"node-sass": "^4.14.1",
|
||||
"resolve-url-loader": "^5.0.0",
|
||||
"sass-loader": "^7.1.0",
|
||||
"ts-loader": "^8.0.16",
|
||||
"ts-loader": "^8.3.0",
|
||||
"vue-cli-plugin-vue-next": "~0.1.4",
|
||||
"vue-loader": "^16.0.0",
|
||||
"vue-loader": "^16.8.2",
|
||||
"web-ext-types": "^2.3.0",
|
||||
"webextension-polyfill": "^0.10.0",
|
||||
"webpack": "^4.44.0",
|
||||
"webpack": "^4.46.0",
|
||||
"webpack-chrome-extension-reloader": "^0.8.3",
|
||||
"webpack-cli": "^3.3.12",
|
||||
"webpack-shell-plugin": "^0.5.0",
|
||||
|
||||
@ -5,8 +5,7 @@ const fs = require('fs');
|
||||
|
||||
const BUNDLE_DIR = path.join(__dirname, `../dist-${process.env.BROWSER === 'firefox' ? 'ff' : process.env.BROWSER}`);
|
||||
const bundles = [
|
||||
'popup/popup.js',
|
||||
'options/options.js',
|
||||
'csui/csui-popup.js',
|
||||
];
|
||||
|
||||
const evalRegexForProduction = /;([a-z])=function\(\){return this}\(\);try{\1=\1\|\|Function\("return this"\)\(\)\|\|\(0,eval\)\("this"\)}catch\(t\){"object"==typeof window&&\(\1=window\)}/g;
|
||||
|
||||
@ -1,17 +0,0 @@
|
||||
<template>
|
||||
<div class="button center-text flex"
|
||||
:class="{'setting-selected': selected, 'w24': fixedWidth, 'flex-auto': !fixedWidth }"
|
||||
>
|
||||
{{label}}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
fixedWidth: Boolean,
|
||||
selected: Boolean,
|
||||
label: String,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
File diff suppressed because one or more lines are too long
@ -1,25 +0,0 @@
|
||||
.uw-ultrawidify-container-root {
|
||||
.json-level-indent {
|
||||
padding-left: 2em !important;
|
||||
font-family: 'Overpass Mono', monospace;
|
||||
}
|
||||
.item-key {
|
||||
color: rgb(255, 196, 148);
|
||||
}
|
||||
.item-key-boolean-false {
|
||||
color: rgb(207, 149, 101)
|
||||
}
|
||||
|
||||
.json-value-boolean-true {
|
||||
color: rgb(150, 240, 198);
|
||||
}
|
||||
.json-value-boolean-false {
|
||||
color: rgb(241, 21, 21);
|
||||
}
|
||||
.json-value-number {
|
||||
color: rgb(121, 121, 238);
|
||||
}
|
||||
.json-value-string {
|
||||
color: rgb(226, 175, 7);
|
||||
}
|
||||
}
|
||||
@ -1,55 +0,0 @@
|
||||
<template>
|
||||
<div class="qsb flex flex-row flex-cross-center flex-center flex-nogrow"
|
||||
:class="{
|
||||
'id': selector.startsWith('#'),
|
||||
'class': selector.startsWith('.'),
|
||||
}">
|
||||
<div class="flex mt2px">{{selector}}</div> <span class="flex closeButton" @click="remove">×</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
selector: String,
|
||||
},
|
||||
methods: {
|
||||
remove() {
|
||||
this.$emit('remove');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.uw-ultrawidify-container-root {
|
||||
.mt2px {
|
||||
margin-top: 7px;
|
||||
}
|
||||
.id {
|
||||
border: 1px solid #d00;
|
||||
background-color: rgba(216, 94, 24, 0.25)
|
||||
}
|
||||
.class {
|
||||
border: 1px solid #33d;
|
||||
background-color: rgba(69, 69, 255, 0.25)
|
||||
}
|
||||
.closeButton {
|
||||
margin-top: 2px;
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
font-size: 1.5em;
|
||||
color: #e00;
|
||||
}
|
||||
.closeButton:hover {
|
||||
cursor: pointer;
|
||||
color: #fa6;
|
||||
}
|
||||
.qsb {
|
||||
cursor:default;
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,11 +1,13 @@
|
||||
enum AspectRatioType {
|
||||
Initial = -1, // page default
|
||||
Reset = 0, // reset to initial
|
||||
Automatic = 1, // set by Aard
|
||||
FitWidth = 2, // legacy/dynamic = fit to width
|
||||
FitHeight = 3, // legacy/dynamic = fit to height
|
||||
Fixed = 4, // pre-determined aspect ratio
|
||||
Manual = 5, // ratio achieved by zooming in/zooming out
|
||||
Cycle = -2,
|
||||
Initial = -1, // page default
|
||||
Reset = 0, // reset to initial
|
||||
Automatic = 1, // we want to request automatic aspect ratio detection
|
||||
FitWidth = 2, // legacy/dynamic = fit to width
|
||||
FitHeight = 3, // legacy/dynamic = fit to height
|
||||
Fixed = 4, // pre-determined aspect ratio
|
||||
Manual = 5, // ratio achieved by zooming in/zooming out
|
||||
AutomaticUpdate = 6, // set by Aard
|
||||
}
|
||||
|
||||
export default AspectRatioType;
|
||||
|
||||
@ -2,6 +2,8 @@ enum VideoAlignmentType {
|
||||
Left = 0,
|
||||
Center = 1,
|
||||
Right = 2,
|
||||
Top = 3,
|
||||
Bottom = 4,
|
||||
Default = -1
|
||||
};
|
||||
|
||||
|
||||
6
src/common/interfaces/ArInterface.ts
Normal file
6
src/common/interfaces/ArInterface.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import AspectRatioType from '../enums/AspectRatioType.enum';
|
||||
|
||||
export interface Ar {
|
||||
type: AspectRatioType,
|
||||
ratio?: number
|
||||
}
|
||||
@ -6,23 +6,57 @@ import ExtensionMode from '../enums/ExtensionMode.enum'
|
||||
import StretchType from '../enums/StretchType.enum'
|
||||
import VideoAlignmentType from '../enums/VideoAlignmentType.enum'
|
||||
|
||||
export interface KeyboardShortcutInterface {
|
||||
key?: string,
|
||||
code?: string,
|
||||
ctrlKey?: boolean,
|
||||
metaKey?: boolean,
|
||||
altKey?: boolean,
|
||||
shiftKey?: boolean,
|
||||
onKeyUp?: boolean,
|
||||
onKeyDown?: boolean,
|
||||
onMouseMove?: boolean,
|
||||
}
|
||||
|
||||
interface ActionScopeInterface {
|
||||
show: boolean,
|
||||
label?: string, // example override, takes precedence over default label
|
||||
shortcut?: {
|
||||
key?: string,
|
||||
code?: string,
|
||||
ctrlKey?: boolean,
|
||||
metaKey?: boolean,
|
||||
altKey?: boolean,
|
||||
shiftKey?: boolean,
|
||||
onKeyUp?: boolean,
|
||||
onKeyDown?: boolean,
|
||||
onMouseMove?: boolean,
|
||||
}[],
|
||||
shortcut?: KeyboardShortcutInterface[],
|
||||
}
|
||||
|
||||
interface RestrictionsSettings {
|
||||
disableOnSmallPlayers?: boolean; // Whether ultrawidify should disable itself when the player is small
|
||||
minAllowedWidth?: number; // if player is less than this many px wide, ultrawidify will disable itself
|
||||
minAllowedHeight?: number; // if player is less than this many px tall, ultrawidify will disable itself
|
||||
onlyAllowInFullscreen?: boolean; // if enabled, ultrawidify will be disabled when not in full screen regardless of what previous two options say
|
||||
onlyAllowAutodetectionInFullScreen?: boolean; // if enabled, autodetection will only start once in full screen
|
||||
}
|
||||
|
||||
interface ExtensionEnvironmentSettingsInterface {
|
||||
normal: ExtensionMode,
|
||||
theater: ExtensionMode,
|
||||
fullscreen: ExtensionMode,
|
||||
}
|
||||
|
||||
export interface CommandInterface {
|
||||
action: string,
|
||||
label: string,
|
||||
comment?: string,
|
||||
arguments?: any,
|
||||
shortcut?: KeyboardShortcutInterface,
|
||||
internalOnly?: boolean,
|
||||
actionId?: string,
|
||||
}
|
||||
|
||||
export type SettingsReloadComponent = 'PlayerData' | 'VideoData';
|
||||
export type SettingsReloadFlags = true | SettingsReloadComponent;
|
||||
|
||||
interface SettingsInterface {
|
||||
_updateFlags?: {
|
||||
requireReload?: SettingsReloadFlags,
|
||||
forSite?: string
|
||||
}
|
||||
|
||||
arDetect: {
|
||||
disabledReason: string, // if automatic aspect ratio has been disabled, show reason
|
||||
allowedMisaligned: number, // top and bottom letterbox thickness can differ by this much.
|
||||
@ -150,11 +184,29 @@ interface SettingsInterface {
|
||||
testRowOffset: number // we test this % of height from detected edge
|
||||
}
|
||||
},
|
||||
|
||||
restrictions?: RestrictionsSettings;
|
||||
|
||||
crop: {
|
||||
default: any;
|
||||
},
|
||||
stretch: {
|
||||
default: any;
|
||||
conditionalDifferencePercent: number // black bars less than this wide will trigger stretch
|
||||
// if mode is set to '1'. 1.0=100%
|
||||
},
|
||||
kbm: {
|
||||
enabled: boolean, // if keyboard/mouse handler service will run
|
||||
keyboardEnabled: boolean, // if keyboard shortcuts are processed
|
||||
mouseEnabled: boolean, // if mouse movement is processed
|
||||
}
|
||||
|
||||
zoom: {
|
||||
minLogZoom: number,
|
||||
maxLogZoom: number,
|
||||
announceDebounce: number // we wait this long before announcing new zoom
|
||||
},
|
||||
|
||||
miscSettings: {
|
||||
mousePan: {
|
||||
enabled: boolean
|
||||
@ -162,10 +214,7 @@ interface SettingsInterface {
|
||||
mousePanReverseMouse: boolean,
|
||||
defaultAr?: any
|
||||
},
|
||||
stretch: {
|
||||
conditionalDifferencePercent: number // black bars less than this wide will trigger stretch
|
||||
// if mode is set to '1'. 1.0=100%
|
||||
},
|
||||
|
||||
resizer: {
|
||||
setStyleString: {
|
||||
maxRetries: number,
|
||||
@ -220,11 +269,19 @@ interface SettingsInterface {
|
||||
},
|
||||
userAdded?: boolean,
|
||||
}[],
|
||||
// This object fulfills the same purpose as 'actions', but is written in less retarded and overly
|
||||
// complicated way. Hopefully it'll be easier to maintain it that way.
|
||||
commands?: {
|
||||
crop?: CommandInterface[],
|
||||
stretch?: CommandInterface[],
|
||||
zoom?: CommandInterface[],
|
||||
pan?: CommandInterface[],
|
||||
internal?: CommandInterface[],
|
||||
},
|
||||
whatsNewChecked: boolean,
|
||||
// -----------------------------------------
|
||||
// ::: SITE CONFIGURATION :::
|
||||
// -----------------------------------------
|
||||
// Nastavitve za posamezno stran
|
||||
// Config for a given page:
|
||||
//
|
||||
// <hostname> : {
|
||||
@ -241,7 +298,6 @@ interface SettingsInterface {
|
||||
// override: <true|false> // override user settings for this site on update
|
||||
// }
|
||||
//
|
||||
// Veljavne vrednosti za možnosti
|
||||
// Valid values for options:
|
||||
//
|
||||
// status, arStatus, statusEmbedded:
|
||||
@ -252,42 +308,111 @@ interface SettingsInterface {
|
||||
// * disabled — never allow
|
||||
//
|
||||
sites: {
|
||||
[x: string]: {
|
||||
mode?: ExtensionMode,
|
||||
autoar?: ExtensionMode,
|
||||
autoarFallback?: ExtensionMode,
|
||||
stretch?: StretchType,
|
||||
videoAlignment?: VideoAlignmentType,
|
||||
keyboardShortcutsEnabled?: ExtensionMode,
|
||||
type?: string,
|
||||
override?: boolean,
|
||||
arPersistence?: boolean,
|
||||
actions?: any;
|
||||
|
||||
cropModePersistence?: CropModePersistence;
|
||||
|
||||
DOM?: {
|
||||
player?: {
|
||||
manual?: boolean,
|
||||
querySelectors?: string,
|
||||
additionalCss?: string,
|
||||
useRelativeAncestor?: boolean,
|
||||
videoAncestor?: any,
|
||||
playerNodeCss?: string,
|
||||
periodicallyRefreshPlayerElement?: boolean
|
||||
},
|
||||
video?: {
|
||||
manual?: boolean,
|
||||
querySelectors?: string,
|
||||
additionalCss?: string,
|
||||
useRelativeAncestor?: boolean,
|
||||
playerNodeCss?: string
|
||||
}
|
||||
},
|
||||
css?: string;
|
||||
usePlayerArInFullscreen?: boolean;
|
||||
}
|
||||
[x: string]: SiteSettingsInterface,
|
||||
}
|
||||
// sites: {
|
||||
// [x: string]: {
|
||||
// defaultCrop?: any, // v6 new
|
||||
// defaultStretch?: any, // v6 new
|
||||
// enabled: ExtensionEnvironmentSettingsInterface, // v6 new
|
||||
// enabledAard: ExtensionEnvironmentSettingsInterface,// v6 new
|
||||
|
||||
// // everything 'superseded by' needs to be implemented
|
||||
// // as well as ported from the old settings
|
||||
// mode?: ExtensionMode, // v6 — superseded by looking at enableIn
|
||||
// autoar?: ExtensionMode, // v6 — superseded by looking at enableIn
|
||||
// autoarFallback?: ExtensionMode, // v6 — deprecated, no replacement
|
||||
// stretch?: StretchType, // v6 — superseded by defaultStretch
|
||||
// videoAlignment?: VideoAlignmentType,
|
||||
// keyboardShortcutsEnabled?: ExtensionMode,
|
||||
// type?: string,
|
||||
// override?: boolean,
|
||||
// arPersistence?: boolean,
|
||||
// actions?: any;
|
||||
|
||||
// cropModePersistence?: CropModePersistence;
|
||||
|
||||
// DOM?: {
|
||||
// player?: {
|
||||
// manual?: boolean,
|
||||
// querySelectors?: string,
|
||||
// additionalCss?: string,
|
||||
// useRelativeAncestor?: boolean,
|
||||
// videoAncestor?: any,
|
||||
// playerNodeCss?: string,
|
||||
// periodicallyRefreshPlayerElement?: boolean
|
||||
// },
|
||||
// video?: {
|
||||
// manual?: boolean,
|
||||
// querySelectors?: string,
|
||||
// additionalCss?: string,
|
||||
// useRelativeAncestor?: boolean,
|
||||
// playerNodeCss?: string
|
||||
// }
|
||||
// },
|
||||
// css?: string;
|
||||
// usePlayerArInFullscreen?: boolean;
|
||||
|
||||
// restrictions?: RestrictionsSettings;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
export interface SiteSettingsInterface {
|
||||
enable: ExtensionEnvironmentSettingsInterface;
|
||||
enableAard: ExtensionEnvironmentSettingsInterface;
|
||||
enableKeyboard: ExtensionEnvironmentSettingsInterface;
|
||||
|
||||
type?: 'official' | 'community' | 'user-defined' | 'testing' | 'officially-disabled' | 'unknown' | 'modified';
|
||||
defaultType: 'official' | 'community' | 'user-defined' | 'testing' | 'officially-disabled' | 'unknown' | 'modified';
|
||||
|
||||
// must be defined in @global and @empty
|
||||
persistCSA?: CropModePersistence, // CSA - crop, stretch, alignment
|
||||
|
||||
defaults?: { // must be defined in @global and @empty
|
||||
crop?: {type: AspectRatioType, [x: string]: any},
|
||||
stretch?: StretchType,
|
||||
alignment?: {x: VideoAlignmentType, y: VideoAlignmentType},
|
||||
}
|
||||
|
||||
cropModePersistence?: CropModePersistence;
|
||||
stretchModePersistence?: CropModePersistence;
|
||||
alignmentPersistence?: CropModePersistence;
|
||||
|
||||
|
||||
activeDOMConfig?: string;
|
||||
DOMConfig?: { [x: string]: SiteDOMSettingsInterface };
|
||||
|
||||
// the following script are for extension caching and shouldn't be saved.
|
||||
// if they _are_ saved, they will be overwritten
|
||||
currentDOMConfig?: SiteDOMSettingsInterface;
|
||||
|
||||
// the following fields are for use with extension update script
|
||||
override?: boolean; // whether settings for this site will be overwritten by extension upgrade script
|
||||
}
|
||||
|
||||
export interface SiteDOMSettingsInterface {
|
||||
type: 'official' | 'community' | 'user-defined' | 'modified' | undefined;
|
||||
elements?: {
|
||||
player?: SiteDOMElementSettingsInterface,
|
||||
video?: SiteDOMElementSettingsInterface,
|
||||
other?: { [x: number]: SiteDOMElementSettingsInterface }
|
||||
};
|
||||
customCss?: string;
|
||||
periodicallyRefreshPlayerElement?: boolean;
|
||||
|
||||
// the following script are for extension caching and shouldn't be saved.
|
||||
// if they _are_ saved, they will be overwritten
|
||||
anchorElementIndex?: number;
|
||||
anchorElement?: HTMLElement;
|
||||
}
|
||||
|
||||
export interface SiteDOMElementSettingsInterface {
|
||||
manual?: boolean;
|
||||
querySelectors?: string;
|
||||
index?: number; // previously: useRelativeAncestor + videoAncestor
|
||||
mode?: 'index' | 'qs';
|
||||
nodeCss?: {[x: string]: string};
|
||||
}
|
||||
|
||||
export default SettingsInterface;
|
||||
@ -20,7 +20,7 @@
|
||||
* does things in its own very special(tm) way, as if it had one
|
||||
* extra chromosome over Firefox.
|
||||
*
|
||||
* Easy chhoice, really.
|
||||
* Easy choice, really.
|
||||
*/
|
||||
export class ChromeShittinessMitigations {
|
||||
static port = null;
|
||||
|
||||
@ -21,6 +21,20 @@ class KeyboardShortcutParser {
|
||||
}
|
||||
return shortcutCombo;
|
||||
}
|
||||
|
||||
static generateShortcutFromKeypress(event) {
|
||||
return {
|
||||
ctrlKey: event.ctrlKey,
|
||||
altKey: event.altKey,
|
||||
shiftKey: event.shiftKey,
|
||||
metaKey: event.metaKey,
|
||||
code: event.code,
|
||||
key: event.key,
|
||||
keyup: true,
|
||||
keydown: false,
|
||||
type: event.type, // only needed for purposes of EditShortcutButton
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default KeyboardShortcutParser;
|
||||
@ -1,3 +1,18 @@
|
||||
export async function sleep(timeout) {
|
||||
return new Promise<void>( (resolve, reject) => setTimeout(() => resolve(), timeout));
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates deep copy of an object
|
||||
* @param obj
|
||||
* @returns
|
||||
*/
|
||||
export function _cp(obj) {
|
||||
try {
|
||||
return JSON.parse(JSON.stringify(obj));
|
||||
} catch (e) {
|
||||
// console.error('Failed to parse json. This probably means that the data we received was not an object. Will return data as-is');
|
||||
// console.error('data in:', obj, 'error:', e);
|
||||
return obj;
|
||||
}
|
||||
}
|
||||
|
||||
69
src/csui/GlobalFrame.vue
Normal file
69
src/csui/GlobalFrame.vue
Normal file
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div class="uw-clickthrough relative w-100 h-100">
|
||||
<template v-for="rectangle of drawnRectangles" :key="rectangle.id ?? rectangle">
|
||||
|
||||
<!-- Player element overlays -->
|
||||
<div class="absolute z-index-overlay"
|
||||
:style="rectangle.style"
|
||||
>
|
||||
<!-- used for drawing player element overlay rectangles - keep this section empty -->
|
||||
</div>
|
||||
|
||||
<!-- Notification overlay -->
|
||||
<div class="absolute z-index-notification notification-area">
|
||||
<template v-for="notification of displayedNotifications" :key="notification.id">
|
||||
<div class="notification d-flex flex-row">
|
||||
<div class="notification-icon">
|
||||
<mdicon :name="notification.icon ?? 'alert'" :size="128"></mdicon>
|
||||
</div>
|
||||
<div class="notification-text">
|
||||
<h3 class="notification-title">{{ notification.title }}</h3>
|
||||
<p class="notification-verbose">{{ notification.text }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UIProbeMixin from './src/utils/UIProbeMixin';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
},
|
||||
mixins: [
|
||||
UIProbeMixin
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
drawnRectangles: [],
|
||||
displayedNotifications: [],
|
||||
}
|
||||
},
|
||||
|
||||
async created() {
|
||||
this.logger = new Logger();
|
||||
|
||||
// this prolly needs to be taken out
|
||||
await this.logger.init({
|
||||
allowLogging: true,
|
||||
});
|
||||
|
||||
/**
|
||||
* Setup the "companion" onMouseMove handler to the one in the content script.
|
||||
* We can handle events with the same function we use to handle events from
|
||||
* the content script.
|
||||
*/
|
||||
document.addEventListener('mousemove', (event) => {
|
||||
this.handleProbe({
|
||||
coords: {
|
||||
x: event.clientX,
|
||||
y: event.clientY
|
||||
}
|
||||
}, this.origin);
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,461 +0,0 @@
|
||||
<template>
|
||||
<div v-if="showLoggerUi" class="root-window flex flex-column overflow-hidden"
|
||||
@keyup.stop
|
||||
@keydown.stop
|
||||
@keypress.stop
|
||||
>
|
||||
<div class="header">
|
||||
<div class="header-top flex flex-row">
|
||||
<div class="flex-grow">
|
||||
<h1>{{header.header}}</h1>
|
||||
</div>
|
||||
<div class="button flex-noshrink button-header"
|
||||
@click="hidePopup()"
|
||||
>
|
||||
<template v-if="logStringified">Finish logging</template>
|
||||
<template v-else>Hide popup</template>
|
||||
</div>
|
||||
<!-- <div class="button flex-noshrink button-header"
|
||||
@click="stopLogging()"
|
||||
>
|
||||
Stop logging
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="header-bottom">
|
||||
<div>{{header.subheader}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content flex flex-row flex-grow overflow-hidden">
|
||||
|
||||
<!-- LOGGER SETTINGS PANEL -->
|
||||
<div class="settings-panel flex flex-noshrink flex-column">
|
||||
<div class="panel-top flex-nogrow">
|
||||
<h2>Logger configuration</h2>
|
||||
</div>
|
||||
<div class="flex flex-row flex-end w100">
|
||||
<div v-if="!showTextMode" class="button" @click="loadDefaultConfig()">
|
||||
Default config
|
||||
</div>
|
||||
<div v-if="!showTextMode" class="button" @click="showTextMode = true">
|
||||
<Icon icon="clipboard-plus" style="font-size: 2em"></Icon> Paste config ...
|
||||
</div>
|
||||
<div v-else class="button" @click="showTextMode = false">
|
||||
Back
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-middle scrollable flex-grow log-config-margin">
|
||||
<template v-if="showTextMode">
|
||||
<div ref="settingsEditArea"
|
||||
style="white-space: pre-wrap; border: 1px solid orange; padding: 10px;"
|
||||
class="monospace h100"
|
||||
:class="{'jsonbg': !confHasError, 'jsonbg-error': confHasError}"
|
||||
contenteditable="true"
|
||||
@input="updateSettings"
|
||||
>
|
||||
{{parsedSettings}}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<JsonObject label="logger-settings"
|
||||
:value="currentSettings"
|
||||
:ignoreKeys="{'allowLogging': false}"
|
||||
@change="updateSettingsUi"
|
||||
></JsonObject>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex flex-row flex-end">
|
||||
<div class="button" @click="restoreLoggerSettings()">
|
||||
Revert
|
||||
</div>
|
||||
<div class="button button-primary" @click="saveLoggerSettings()">
|
||||
Save
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LOGGER OUTPUT/START LOGGING -->
|
||||
<div class="results-panel flex flex-shrink flex-column overflow-hidden">
|
||||
<div class="panel-top flex-nogrow">
|
||||
<h2>Logger results</h2>
|
||||
</div>
|
||||
<template v-if="logStringified">
|
||||
<div v-if="confHasError" class="warn">
|
||||
Logger configuration contains an error. You can export current log, but you will be unable to record a new log.
|
||||
</div>
|
||||
<div class="panel-middle scrollable flex-grow p-t-025em">
|
||||
<pre>
|
||||
{{logStringified}}
|
||||
</pre>
|
||||
</div>
|
||||
<div class="flex-noshrink flex flex-row flex-end p-t-025em">
|
||||
<div class="button button-bar"
|
||||
@click="startLogging()"
|
||||
>
|
||||
New log
|
||||
</div>
|
||||
<div class="button button-bar"
|
||||
@click="exportLog()"
|
||||
>
|
||||
Export log
|
||||
</div>
|
||||
<div class="button button-bar button-primary"
|
||||
@click="exportAndQuit()"
|
||||
>
|
||||
Export & finish
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="panel-middle scrollable flex-grow">
|
||||
<div>
|
||||
<p>Here's express usage tutorial on how to use the logger.</p>
|
||||
<p>Quick rundown of all the options you can put into logger configuration can be found <a href="https://github.com/tamius-han/ultrawidify/wiki/Development&Debugging:-Logger-options" target="_blank">here</a>.</p>
|
||||
<p>If you want logging results to appear here, in this window, you need to put appropriate configuration in the fileOptions section of the settings. You can edit the settings by clicking 'paste config' button.</p>
|
||||
<p>To start logging to console, it's enough to click that tiny 'save' button down there, under logger options (<code>logger-settings.allowLogging</code> must be set to true. Then — depending on where you want logging to happen — you also need to enable either <code>logger-settings.fileOptions.enabled</code> or <code>logger-settings.consoleOptions.enabled</code>)</p>
|
||||
<p>You can quickly toggle values for various components by clicking on "true" or "false".</p>
|
||||
<p>Click the small 'save' down at the bottom of this window to immediately apply the logger configuration changes.</p>
|
||||
<p>Yes, I know this is not a pinnacle of user-friendliness, nor a pinnacle of web design. It was put together very quickly, mostly for my convenience. I have plans to move extension UI from the popup into the player, tho, and these plans will make this window obsolete. Because of that, I plan to do absolutely nothing about the state of this window. Wait for the extension redesign pls.</p>
|
||||
</div>
|
||||
<div v-if="confHasError" class="warn">
|
||||
Logger configuration contains an error. Cannot start logging.
|
||||
</div>
|
||||
<div v-else-if="lastSettings && lastSettings.allowLogging && lastSettings.consoleOptions && lastSettings.consoleOptions.enabled"
|
||||
class="flex flex-column flex-center flex-cross-center w100 h100"
|
||||
>
|
||||
<p class="m-025em">
|
||||
Logging in progress ...
|
||||
</p>
|
||||
<div class="button button-big button-primary"
|
||||
@click="stopLogging()"
|
||||
>
|
||||
Stop logging
|
||||
</div>
|
||||
<template v-if="lastSettings && lastSettings.timeout"
|
||||
class="m-025em"
|
||||
>
|
||||
<p>
|
||||
... or wait until logging ends.
|
||||
</p>
|
||||
<p>
|
||||
You can <a @click="hidePopup()">hide popup</a> — it will automatically re-appear when logging finishes.
|
||||
</p>
|
||||
</template>
|
||||
<template v-else-if="lastSettings">
|
||||
<p>
|
||||
You can <a @click="hidePopup()">hide popup</a> — the logging will continue until you re-open the popup and stop it.
|
||||
</p>
|
||||
</template>
|
||||
</div>
|
||||
<div v-else class="flex flex-column flex-center flex-cross-center w100 h100">
|
||||
<div class="button button-big button-primary"
|
||||
@click="startLogging()"
|
||||
>
|
||||
Start logging
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div>
|
||||
button row is heres
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import Logger, { baseLoggingOptions } from '../ext/lib/Logger';
|
||||
import Comms from '../ext/lib/comms/Comms';
|
||||
import IO from '../common/js/IO';
|
||||
import JsonObject from '../common/components/JsonEditor/JsonObject';
|
||||
import Icon from '../common/components/Icon';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
JsonObject,
|
||||
Icon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showLoggerUi: false,
|
||||
header: {
|
||||
header: 'whoopsie daisy',
|
||||
subheader: 'you broke the header choosing script'
|
||||
},
|
||||
parsedSettings: '',
|
||||
lastSettings: {},
|
||||
currentSettings: {},
|
||||
confHasError: false,
|
||||
logStringified: '',
|
||||
showTextMode: false,
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
const headerRotation = [{
|
||||
header: "DEFORESTATOR 5000",
|
||||
subheader: "Iron Legion's finest logging tool"
|
||||
}, {
|
||||
header: "Astinus",
|
||||
subheader: "Ultrawidify logging tool"
|
||||
}, {
|
||||
header: "Tracer",
|
||||
subheader: "I'm already printing stack traces"
|
||||
}, {
|
||||
header: "Grûmsh",
|
||||
subheader: "He who watches"
|
||||
}, {
|
||||
header: "Situation Room/The Council",
|
||||
subheader: "We will always be watching"
|
||||
}];
|
||||
|
||||
this.header = headerRotation[Math.floor(+Date.now() / (3600000*24)) % headerRotation.length] || this.header;
|
||||
|
||||
this.getLoggerSettings();
|
||||
},
|
||||
computed: {
|
||||
...mapState([
|
||||
'uwLog',
|
||||
'showLogger',
|
||||
'loggingEnded',
|
||||
]),
|
||||
},
|
||||
watch: {
|
||||
uwLog(newValue, oldValue) {
|
||||
if (oldValue !== newValue) {
|
||||
this.$store.dispatch('uw-show-logger');
|
||||
this.logStringified = JSON.stringify(newValue, null, 2);
|
||||
}
|
||||
},
|
||||
async showLogger(newValue) {
|
||||
this.showLoggerUi = newValue;
|
||||
|
||||
// update logger settings (they could have changed while the popup was closed)
|
||||
if (newValue) {
|
||||
this.getLoggerSettings();
|
||||
}
|
||||
},
|
||||
loggingEnded(newValue) {
|
||||
// note — the value of loggingEnded never actually matters. Even if this value is 'true'
|
||||
// internally, vuexStore.dspatch() will still do its job and give us the signal we want
|
||||
if (newValue) {
|
||||
this.stopLogging();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadDefaultConfig() {
|
||||
this.lastSettings = baseLoggingOptions;
|
||||
this.parsedSettings = JSON.stringify(this.lastSettings, null, 2) || '';
|
||||
this.currentSettings = JSON.parse(JSON.stringify(this.lastSettings));
|
||||
},
|
||||
async getLoggerSettings() {
|
||||
this.lastSettings = await Logger.getConfig() || baseLoggingOptions;
|
||||
this.parsedSettings = JSON.stringify(this.lastSettings, null, 2) || '';
|
||||
this.currentSettings = JSON.parse(JSON.stringify(this.lastSettings));
|
||||
},
|
||||
updateSettings(val) {
|
||||
try {
|
||||
this.parsedSettings = JSON.stringify(JSON.parse(val.target.textContent.trim()), null, 2);
|
||||
this.lastSettings = JSON.parse(val.target.textContent.trim());
|
||||
this.currentSettings = JSON.parse(JSON.stringify(this.lastSettings));
|
||||
this.confHasError = false;
|
||||
} catch (e) {
|
||||
this.confHasError = true;
|
||||
}
|
||||
},
|
||||
updateSettingsUi(val) {
|
||||
try {
|
||||
this.parsedSettings = JSON.stringify(val, null, 2);
|
||||
this.lastSettings = val;
|
||||
this.currentSettings = JSON.parse(JSON.stringify(this.lastSettings));
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
},
|
||||
saveLoggerSettings() {
|
||||
Logger.saveConfig({...this.lastSettings});
|
||||
},
|
||||
restoreLoggerSettings() {
|
||||
this.getLoggerSettings();
|
||||
this.confHasError = false;
|
||||
},
|
||||
async startLogging(){
|
||||
this.logStringified = undefined;
|
||||
await Logger.saveConfig({...this.lastSettings, allowLogging: true});
|
||||
window.location.reload();
|
||||
},
|
||||
hidePopup() {
|
||||
// this function only works as 'close' if logging has finished
|
||||
if (this.logStringified) {
|
||||
Logger.saveConfig({...this.lastSettings, allowLogging: false});
|
||||
this.logStringified = undefined;
|
||||
}
|
||||
this.$store.dispatch('uw-hide-logger');
|
||||
|
||||
this.showLoggerUi = false;
|
||||
},
|
||||
closePopupAndStopLogging() {
|
||||
Logger.saveConfig({...this.lastSettings, allowLogging: false});
|
||||
this.logStringified = undefined;
|
||||
this.$store.dispatch('uw-hide-logger');
|
||||
},
|
||||
stopLogging() {
|
||||
Logger.saveConfig({...this.lastSettings, allowLogging: false});
|
||||
this.lastSettings.allowLogging = false;
|
||||
},
|
||||
exportLog() {
|
||||
IO.csStringToFile(this.logStringified);
|
||||
},
|
||||
exportAndQuit() {
|
||||
this.exportLog();
|
||||
this.logStringified = undefined;
|
||||
this.closePopupAndStopLogging();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" src="../res/css/flex.scss" scoped></style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../res/css/colors.scss';
|
||||
@import '../res/css/font/overpass.css';
|
||||
@import '../res/css/font/overpass-mono.css';
|
||||
@import '../res/css/common.scss';
|
||||
|
||||
.uw-ultrawidify-container-root {
|
||||
.root-window {
|
||||
position: fixed !important;
|
||||
top: 5vh !important;
|
||||
left: 5vw !important;
|
||||
width: 90vw !important;
|
||||
height: 90vh !important;
|
||||
z-index: 999999 !important;
|
||||
background-color: rgba( $page-background, 0.9) !important;
|
||||
color: #f1f1f1 !important;
|
||||
font-size: 14px !important;
|
||||
|
||||
box-sizing: border-box !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
div {
|
||||
font-family: 'Overpass';
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: 'Overpass Thin';
|
||||
}
|
||||
h1 {
|
||||
font-size: 4em;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.header {
|
||||
h1 {
|
||||
margin-bottom: -0.20em;
|
||||
margin-top: 0.0em;
|
||||
}
|
||||
.header-top, .header-bottom {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
.header-top {
|
||||
background-color: $popup-header-background !important;
|
||||
}
|
||||
.header-bottom {
|
||||
font-size: 1.75em;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
padding: 8px 32px;
|
||||
width: 100%;
|
||||
}
|
||||
.settings-panel {
|
||||
box-sizing: border-box;
|
||||
padding-right: 8px;
|
||||
flex-grow: 2 !important;
|
||||
min-width: 30% !important;
|
||||
flex-shrink: 0 !important;
|
||||
height: inherit !important;
|
||||
}
|
||||
.results-panel {
|
||||
box-sizing: border-box;
|
||||
padding-left: 8px;
|
||||
max-width: 70% !important;
|
||||
flex-grow: 5 !important;
|
||||
flex-shrink: 0 !important;
|
||||
height: inherit !important;
|
||||
}
|
||||
|
||||
.scrollable {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: 'Overpass Mono';
|
||||
}
|
||||
|
||||
.m-025em {
|
||||
margin: 0.25em;
|
||||
}
|
||||
|
||||
.p-t-025em {
|
||||
padding-top: 0.25em;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
background-color: $primary;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button-big {
|
||||
font-size: 1.5em;
|
||||
padding: 1.75em 3.25em;
|
||||
}
|
||||
|
||||
.button-bar {
|
||||
font-size: 1.25em;
|
||||
padding: 0.25em 1.25em;
|
||||
margin-left: 0.25em;
|
||||
}
|
||||
|
||||
.button-header {
|
||||
font-size: 2em;
|
||||
padding-top: 0.1em;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.jsonbg {
|
||||
background-color: #131313;
|
||||
}
|
||||
.jsonbg-error {
|
||||
background-color: #884420;
|
||||
}
|
||||
|
||||
.log-config-margin {
|
||||
margin-top: 3em;
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,216 +0,0 @@
|
||||
<template>
|
||||
<div v-if="showNotification" class="uw-ultrawidify-container flex flex-column overflow-hidden">
|
||||
<div class="notification-popup flex flex-row">
|
||||
<div v-if="notificationIcon" class="flex-nogrow flex-noshrink notification-icon">
|
||||
<Icon
|
||||
class="flex-nogrow flex-noshrink"
|
||||
:icon="notificationIcon"
|
||||
>
|
||||
</Icon>
|
||||
</div>
|
||||
<div class="notification-content flex-grow flex-shrink flex flex-column flex-cross-center">
|
||||
<div
|
||||
class="notification-text"
|
||||
v-html="notificationText"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
v-if="notificationActions"
|
||||
class="action-buttons flex flex-row"
|
||||
>
|
||||
<div
|
||||
v-for="action of notificationActions"
|
||||
class="action-button"
|
||||
:key="action"
|
||||
@click="action.command"
|
||||
>
|
||||
<Icon v-if="action.icon" :icon="action.icon"></Icon>{{action.label}}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="hideActions"
|
||||
class="hide-actions"
|
||||
>
|
||||
Never show again:<wbr>
|
||||
<template
|
||||
v-for="action of hideActions"
|
||||
:key="action"
|
||||
>
|
||||
<i @click="closeNotification">
|
||||
<a
|
||||
class="hide-action-button"
|
||||
@click="action.command"
|
||||
>
|
||||
{{action.label}}
|
||||
</a>
|
||||
<wbr>
|
||||
</i>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="notification-icon action-button"
|
||||
@click="closeNotification()"
|
||||
>
|
||||
<Icon
|
||||
class="flex-nogrow flex-noshrink"
|
||||
icon="x"
|
||||
>
|
||||
</Icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import Icon from '../common/components/Icon';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
notificationTimeout: null,
|
||||
notificationIcon: "exclamation-triangle",
|
||||
notificationText: "<b>Sample text.</b> This will be replaced with real notification later.",
|
||||
notificationActions: null,
|
||||
hideActions: null,
|
||||
showNotification: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState([
|
||||
'notificationConfig'
|
||||
]),
|
||||
},
|
||||
watch: {
|
||||
/**
|
||||
* Sets new notification config. Currently, we can only show one notification at a time.
|
||||
*
|
||||
* We expect a config object like this:
|
||||
* {
|
||||
* timeout: number — how long we'll be displaying the notification. If empty, 10s. -1: until user dismisses it
|
||||
* icon: string — what icon we're gonna show. We're using bootstrap icons. Can be empty.
|
||||
* text: — notification text. Supports HTML.
|
||||
* notificationActions: [
|
||||
* {
|
||||
* command: function that gets executed upon clicking the button.
|
||||
* label: label of the button
|
||||
* icon: icon of the button
|
||||
* }
|
||||
* ],
|
||||
* hideOptions: [
|
||||
* // more of notificationActions except it's a special case
|
||||
* ]
|
||||
* }
|
||||
*/
|
||||
notificationConfig(newConfig) {
|
||||
if (newConfig) {
|
||||
this.notificationText = newConfig.text;
|
||||
this.notificationActions = newConfig.notificationActions;
|
||||
this.notificationIcon = newConfig.icon;
|
||||
this.hideActions = newConfig.hideActions;
|
||||
|
||||
this.showNotification = true;
|
||||
|
||||
if (newConfig.timeout !== -1) {
|
||||
this.notificationTimeout = setTimeout(() => this.closeNotification(), newConfig.timeout ?? 5000);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeNotification() {
|
||||
clearTimeout(this.notificationTimeout);
|
||||
|
||||
this.showNotification = false;
|
||||
this.notificationIcon = null;
|
||||
this.notificationText = null;
|
||||
this.notificationActions = null;
|
||||
this.hideActions = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../res/css/uwui-base.scss';
|
||||
@import '../res/css/colors.scss';
|
||||
@import '../res/css/font/overpass.css';
|
||||
@import '../res/css/font/overpass-mono.css';
|
||||
@import '../res/css/common.scss';
|
||||
|
||||
.uw-ultrawidify-container-root {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
|
||||
display: block !important;
|
||||
position: relative !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
pointer-events: none !important;
|
||||
|
||||
font-size: 16px !important;
|
||||
|
||||
.notification-popup {
|
||||
pointer-events: auto !important;
|
||||
position: absolute;
|
||||
z-index: 99999999;
|
||||
top: 2em;
|
||||
right: 2em;
|
||||
width: 32em;
|
||||
|
||||
padding: 0.7em 0.5em;
|
||||
|
||||
font-family: 'Overpass';
|
||||
|
||||
background-color: rgba(108, 55, 12, 0.779);
|
||||
color: #fff;
|
||||
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.notifcation-content {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.notification-text {
|
||||
text-align: justify;
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.25em;
|
||||
}
|
||||
|
||||
.notification-icon {
|
||||
font-size: 3em;
|
||||
line-height: 0.5;
|
||||
}
|
||||
.action-button {
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hide-actions {
|
||||
color: #ccc;
|
||||
font-size: 0.8em;
|
||||
justify-self: flex-end;
|
||||
align-self: flex-end;
|
||||
margin-top: 1em;
|
||||
margin-bottom: -1em;
|
||||
}
|
||||
|
||||
.hide-action-button {
|
||||
color: #eee;
|
||||
font-size: 0.9em;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: rgba(255,255,255,0.5);
|
||||
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
345
src/csui/PlayerOverlay.vue
Normal file
345
src/csui/PlayerOverlay.vue
Normal file
@ -0,0 +1,345 @@
|
||||
<template>
|
||||
|
||||
<div
|
||||
v-if="settingsInitialized && uwTriggerZoneVisible && !isGlobal"
|
||||
class="uw-hover uv-hover-trigger-region uw-clickable"
|
||||
:style="uwTriggerRegionConf"
|
||||
@mouseenter="showUwWindow"
|
||||
>
|
||||
<h1>Aspect ratio controls</h1>
|
||||
<div>Hover to activate</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="settingsInitialized && uwWindowVisible"
|
||||
class="uw-window flex flex-col uw-clickable"
|
||||
:class="{'fade-out': uwWindowFadeOut}"
|
||||
@mouseenter="cancelUwWindowHide"
|
||||
@mouseleave="hideUwWindow()"
|
||||
>
|
||||
<PlayerUIWindow
|
||||
:settings="settings"
|
||||
:eventBus="eventBus"
|
||||
:logger="logger"
|
||||
:in-player="!isGlobal"
|
||||
:site="site"
|
||||
@close="uwWindowVisible = false"
|
||||
@preventClose="(event) => uwWindowFadeOutDisabled = event"
|
||||
></PlayerUIWindow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PlayerUIWindow from './src/PlayerUIWindow.vue'
|
||||
import BrowserDetect from '../ext/conf/BrowserDetect';
|
||||
import Logger from '../ext/lib/Logger';
|
||||
import Settings from '../ext/lib/Settings';
|
||||
import EventBus from '../ext/lib/EventBus';
|
||||
import UIProbeMixin from './src/utils/UIProbeMixin';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PlayerUIWindow
|
||||
},
|
||||
mixins: [
|
||||
UIProbeMixin
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
uwTriggerZoneVisible: false,
|
||||
uwTriggerZoneTimeout: undefined,
|
||||
uwTriggerRegionConf: {
|
||||
left: "10%",
|
||||
top: "10%",
|
||||
height: "30%",
|
||||
width: "30%",
|
||||
maxWidth: "24rem",
|
||||
maxHeight: "13.37rem",
|
||||
},
|
||||
|
||||
uwWindowFadeOutDisabled: false,
|
||||
uwWindowFadeOut: false,
|
||||
uwWindowCloseTimeout: undefined,
|
||||
uwWindowVisible: false,
|
||||
|
||||
// component properties
|
||||
settings: {},
|
||||
BrowserDetect: BrowserDetect,
|
||||
settingsInitialized: false,
|
||||
eventBus: new EventBus(),
|
||||
logger: null,
|
||||
|
||||
// NOTE: chromium doesn't allow us to access window.parent.location
|
||||
// meaning we will have to correct this value from our uwui-probe
|
||||
// messages ... which is a bummer.
|
||||
site: null,
|
||||
origin: '*', // will be set appropriately once the first uwui-probe event is received
|
||||
lastProbeTs: null,
|
||||
|
||||
isGlobal: true,
|
||||
disabled: false,
|
||||
|
||||
uiVisible: true,
|
||||
debugData: {
|
||||
resizer: {},
|
||||
player: {},
|
||||
},
|
||||
debugDataPrettified: '',
|
||||
|
||||
// in global overlay, this property is used to determine
|
||||
// if closing the window should emit uw-set-ui-state
|
||||
// event on eventBus
|
||||
showPlayerUIAfterClose: false,
|
||||
|
||||
statusFlags: {
|
||||
hasDrm: undefined,
|
||||
},
|
||||
|
||||
saveState: {},
|
||||
|
||||
selectedTab: 'videoSettings',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// LPT: NO ARROW FUNCTIONS IN COMPUTED,
|
||||
// IS SUPER HARAM
|
||||
// THINGS WILL NOT WORK IF YOU USE ARROWS
|
||||
windowWidth() {
|
||||
return window.innerWidth;
|
||||
},
|
||||
windowHeight() {
|
||||
return window.innerHeight;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
showUi(visible) {
|
||||
if (visible !== undefined) {
|
||||
this.uiVisible = visible;
|
||||
}
|
||||
},
|
||||
resizerDebugData(newData) {
|
||||
this.debugData.resizer = newData;
|
||||
this.debugDataPrettified = JSON.stringify(this.debugData, null, 2);
|
||||
},
|
||||
playerDebugData(newData) {
|
||||
this.debugData.player = newData;
|
||||
this.debugDataPrettified = JSON.stringify(this.debugData, null, 2);
|
||||
}
|
||||
},
|
||||
|
||||
async created() {
|
||||
this.logger = new Logger();
|
||||
|
||||
// this prolly needs to be taken out
|
||||
await this.logger.init({
|
||||
allowLogging: true,
|
||||
});
|
||||
|
||||
this.settings = new Settings({afterSettingsSaved: this.updateConfig, logger: this.logger});
|
||||
await this.settings.init();
|
||||
this.settingsInitialized = true;
|
||||
|
||||
// set up communication with client script.
|
||||
// NOTE: companion onmousemove is set up in UIProbeMixin
|
||||
window.addEventListener('message', event => {
|
||||
this.handleMessage(event);
|
||||
});
|
||||
|
||||
this.eventBus.subscribe('uw-config-broadcast', {function: (data) => {
|
||||
if (data.type === 'drm-status') {
|
||||
this.statusFlags.hasDrm = data.hasDrm;
|
||||
}
|
||||
}});
|
||||
|
||||
|
||||
this.eventBus.subscribe('uw-set-ui-state', { function: (data) => {
|
||||
if (data.globalUiVisible !== undefined) {
|
||||
if (this.isGlobal) {
|
||||
if (data.globalUiVisible) {
|
||||
this.showUwWindow();
|
||||
} else {
|
||||
this.hideUwWindow(true);
|
||||
}
|
||||
// this.showPlayerUIAfterClose = data.showPlayerUIAfterClose;
|
||||
} else {
|
||||
// non global UIs are hidden while global overlay
|
||||
// is visible and vice versa
|
||||
// this.disabled = data.globalUiVisible;
|
||||
this.saveState = {
|
||||
uwWindowVisible: this.uwWindowVisible,
|
||||
uwWindowFadeOutDisabled: this.uwWindowFadeOutDisabled,
|
||||
uwWindowFadeOut: this.uwWindowFadeOut
|
||||
};
|
||||
this.uwWindowFadeOutDisabled = false;
|
||||
this.hideUwWindow(true);
|
||||
}
|
||||
}
|
||||
}});
|
||||
|
||||
this.eventBus.subscribe(
|
||||
'uw-restore-ui-state',
|
||||
{
|
||||
function: (data) => {
|
||||
if (this.saveState) {
|
||||
if (this.saveState.uwWindowVisible) {
|
||||
this.showUwWindow();
|
||||
}
|
||||
this.uwWindowFadeOutDisabled = this.saveState.uwWindowFadeOutDisabled;
|
||||
this.uwWindowFadeOut = this.saveState.uwWindowFadeOut;
|
||||
}
|
||||
this.saveState = {};
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
this.sendToParentLowLevel('uwui-get-role', null);
|
||||
this.sendToParentLowLevel('uwui-get-theme', null);
|
||||
|
||||
//
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Gets URL of the browser settings page (i think?)
|
||||
*/
|
||||
getUrl(url) {
|
||||
return BrowserDetect.getURL(url);
|
||||
},
|
||||
|
||||
/**
|
||||
* Mostly intended to process messages received via window.addEventListener('message').
|
||||
* This method should include minimal logic — instead, it should only route messages
|
||||
* to the correct function down the line.
|
||||
*/
|
||||
handleMessage(event) {
|
||||
switch (event.data.action) {
|
||||
case 'uwui-probe':
|
||||
if (!this.site) {
|
||||
this.origin = event.origin;
|
||||
this.site = event.origin.split('//')[1];
|
||||
}
|
||||
return this.handleProbe(event.data, event.origin); // handleProbe is defined in UIProbeMixin
|
||||
case 'uw-bus-tunnel':
|
||||
return this.handleBusTunnelIn(event.data.payload);
|
||||
case 'uwui-set-role':
|
||||
this.isGlobal = event.data.payload.role === 'global';
|
||||
this.sendToParentLowLevel('uwui-interface-ready', true);
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Sends message to parent _without_ using event bus.
|
||||
*/
|
||||
sendToParentLowLevel(action, payload, lowLevelExtras = {}) {
|
||||
window.parent.postMessage(
|
||||
{
|
||||
action, payload, ...lowLevelExtras
|
||||
},
|
||||
'*'
|
||||
);
|
||||
},
|
||||
|
||||
showUwWindow() {
|
||||
this.uwWindowFadeOut = false;
|
||||
this.uwWindowVisible = true;
|
||||
this.uwTriggerZoneVisible = false;
|
||||
|
||||
// refresh DRM status
|
||||
this.eventBus.send('get-drm-status');
|
||||
|
||||
// if (this.isGlobal) {
|
||||
// this.sendToParentLowLevel('uwui-clickable', undefined, {clickable: true});
|
||||
// }
|
||||
},
|
||||
|
||||
hideUwWindow(skipTimeout = false) {
|
||||
if (this.uwWindowFadeOutDisabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const timeout = skipTimeout ? 0 : 1100;
|
||||
|
||||
this.uwWindowCloseTimeout = setTimeout(
|
||||
() => {
|
||||
this.uwWindowVisible = false;
|
||||
|
||||
// Global UI has some extra housekeeping to do when window gets hidden
|
||||
if (this.isGlobal) {
|
||||
this.sendToParentLowLevel('uwui-global-window-hidden', {});
|
||||
}
|
||||
},
|
||||
timeout
|
||||
);
|
||||
this.uwWindowFadeOut = true;
|
||||
},
|
||||
|
||||
cancelUwWindowHide() {
|
||||
this.uwWindowFadeOut = false;
|
||||
clearTimeout(this.uwWindowCloseTimeout);
|
||||
},
|
||||
|
||||
handleBusTunnelIn(payload) {
|
||||
this.eventBus.send(payload.action, payload.config, payload.routingData);
|
||||
},
|
||||
|
||||
selectTab(tab) {
|
||||
this.selectedTab = tab;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'res/css/uwui-base.scss';
|
||||
@import 'res/css/colors.scss';
|
||||
@import 'res/css/font/overpass.css';
|
||||
@import 'res/css/font/overpass-mono.css';
|
||||
@import 'res/css/common.scss';
|
||||
@import './src/res-common/_variables';
|
||||
|
||||
|
||||
.uw-hover {
|
||||
position: absolute;
|
||||
|
||||
z-index: 999999999999999999;
|
||||
}
|
||||
|
||||
.uv-hover-trigger-region {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
border: 0.5rem dashed #fff;
|
||||
color: #fff;
|
||||
backdrop-filter: blur(0.5rem) brightness(0.5);
|
||||
}
|
||||
|
||||
.uw-window {
|
||||
position: absolute;
|
||||
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
|
||||
z-index: 999999999999999999;
|
||||
|
||||
width: 2500px;
|
||||
height: 1200px;
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
|
||||
pointer-events: all !important;
|
||||
|
||||
opacity: 1;
|
||||
backdrop-filter: blur(16px) saturate(120%);
|
||||
|
||||
&.fade-out {
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s;
|
||||
transition-delay: 0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,177 +0,0 @@
|
||||
<template>
|
||||
<div class="uw-hover uv-hover-trigger-region">
|
||||
TEST CONTENT
|
||||
</div>
|
||||
<div class="popup-panel">
|
||||
<div class="tab-row flex flex-row">
|
||||
<div class="tab">
|
||||
todo: icon<br/>
|
||||
Video options
|
||||
</div>
|
||||
</div>
|
||||
<div>sudpo
|
||||
<!-- Panel section -->
|
||||
<template v-if="settingsInitialized">
|
||||
<VideoSettings
|
||||
:settings="settings"
|
||||
></VideoSettings>
|
||||
<ResizerDebugPanel :debugData="debugData">
|
||||
</ResizerDebugPanel>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VideoSettings from './PlayerUiPanels/VideoSettings.vue'
|
||||
import { mapState } from 'vuex';
|
||||
import Icon from '../common/components/Icon';
|
||||
import ResizerDebugPanel from './PlayerUiPanels/ResizerDebugPanelComponent';
|
||||
import BrowserDetect from '../ext/conf/BrowserDetect';
|
||||
import ExecAction from './ui-libs/ExecAction';
|
||||
import Logger from '../ext/lib/Logger';
|
||||
import Settings from '../ext/lib/Settings';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Icon,
|
||||
ResizerDebugPanel, VideoSettings
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// component properties
|
||||
settings: {},
|
||||
settingsInitialized: false,
|
||||
execAction: new ExecAction(),
|
||||
logger: null,
|
||||
|
||||
uiVisible: true,
|
||||
debugData: {
|
||||
resizer: {},
|
||||
player: {},
|
||||
},
|
||||
debugDataPrettified: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState([
|
||||
'showUi',
|
||||
'resizerDebugData',
|
||||
'playerDebugData'
|
||||
]),
|
||||
windowWidth: () => {
|
||||
return window.innerWidth;
|
||||
},
|
||||
windowHeight: () => {
|
||||
return window.innerHeight;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
showUi(visible) {
|
||||
if (visible !== undefined) {
|
||||
this.uiVisible = visible;
|
||||
}
|
||||
},
|
||||
resizerDebugData(newData) {
|
||||
this.debugData.resizer = newData;
|
||||
this.debugDataPrettified = JSON.stringify(this.debugData, null, 2);
|
||||
},
|
||||
playerDebugData(newData) {
|
||||
this.debugData.player = newData;
|
||||
this.debugDataPrettified = JSON.stringify(this.debugData, null, 2);
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
try {
|
||||
this.logger = new Logger();
|
||||
await this.logger.init({
|
||||
allowLogging: true,
|
||||
});
|
||||
|
||||
this.settings = new Settings({afterSettingsSaved: this.updateConfig, logger: this.logger});
|
||||
await this.settings.init();
|
||||
this.settingsInitialized = true;
|
||||
|
||||
this.execAction.setSettings(this.settings);
|
||||
} catch (e) {
|
||||
console.error('Failed to initiate ultrawidify player ui.', e);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getUrl(url) {
|
||||
return BrowserDetect.getURL(url);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" src="../res/css/uwui-base.scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
@import '../res/css/uwui-base.scss';
|
||||
@import '../res/css/colors.scss';
|
||||
@import '../res/css/font/overpass.css';
|
||||
@import '../res/css/font/overpass-mono.css';
|
||||
@import '../res/css/common.scss';
|
||||
|
||||
.uw-ultrawidify-container-root {
|
||||
// .relative-wrapper {
|
||||
// position: relative;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// }
|
||||
|
||||
.uw-hover {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
|
||||
z-index: 999999999999999999;
|
||||
}
|
||||
.uw-hover:hover {
|
||||
background-color: #f00;
|
||||
}
|
||||
|
||||
.popup-panel {
|
||||
position: absolute;
|
||||
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
|
||||
z-index: 999999999999999999;
|
||||
|
||||
width: 2500px;
|
||||
height: 1200px;
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
|
||||
pointer-events: all !important;
|
||||
|
||||
background-color: rgba(0,0,0,0.69);
|
||||
color: #fff;
|
||||
|
||||
overflow-y: auto;
|
||||
|
||||
.tab {
|
||||
display: block;
|
||||
height: 42px;
|
||||
font-size: 2.5rem;
|
||||
background: rgb(87, 54, 26);
|
||||
}
|
||||
.tab:hover {
|
||||
background-color: #f00;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
535
src/csui/Popup.vue
Normal file
535
src/csui/Popup.vue
Normal file
@ -0,0 +1,535 @@
|
||||
<template>
|
||||
<div class="popup-panel">
|
||||
<!--
|
||||
NOTE — the code that makes ultrawidify popup work in firefox regardless of whether the
|
||||
extension is being displayed in a normal or a small/overflow popup breaks the popup
|
||||
behaviour on Chrome (where the popup would never reach the full width of 800px)
|
||||
|
||||
Since I'm tired and the hour is getting late, we'll just add an extra CSS class for
|
||||
non-firefox builds of this extension and be done with it. No need to complicate things
|
||||
further than that.
|
||||
-->
|
||||
<div v-if="settingsInitialized"
|
||||
class="popup flex flex-col no-overflow"
|
||||
:class="{'popup-chrome': ! BrowserDetect?.firefox}"
|
||||
>
|
||||
<div class="flex-row flex-nogrow flex-noshrink relative header"
|
||||
>
|
||||
<div class="grow shrink">
|
||||
<h1>
|
||||
<span class="smallcaps">Ultrawidify</span>: <small>Quick settings</small>
|
||||
</h1>
|
||||
</div>
|
||||
<div v-if="BrowserDetect?.processEnvChannel !== 'stable'" class="absolute channel-info version-info">
|
||||
Build channel: {{BrowserDetect?.processEnvChannel}} <br/>
|
||||
<label>Version:</label> <br/>
|
||||
{{ settings.getExtensionVersion() }}
|
||||
</div>
|
||||
<div v-else class="version-info">
|
||||
<label>Version:</label> <br/>
|
||||
{{ settings.getExtensionVersion() }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- CONTAINER ROOT -->
|
||||
<div class="flex flex-row body no-overflow flex-grow">
|
||||
|
||||
<!-- TABS -->
|
||||
<div class="flex flex-col tab-row" style="flex: 3 3; border-right: 1px solid #222;">
|
||||
<div
|
||||
v-for="tab of tabs"
|
||||
:key="tab.id"
|
||||
class="tab flex flex-row"
|
||||
:class="{'active': tab.id === selectedTab}"
|
||||
@click="selectTab(tab.id)"
|
||||
>
|
||||
<div class="icon-container">
|
||||
<mdicon
|
||||
:name="tab.icon"
|
||||
:size="32"
|
||||
/>
|
||||
</div>
|
||||
<div class="label">
|
||||
{{tab.label}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="scrollable" style="flex: 7 7; padding: 1rem;">
|
||||
<template v-if="settings && siteSettings">
|
||||
<InPlayerUIAdvertisement
|
||||
v-if="selectedTab === 'playerUiCtl'"
|
||||
:eventBus="eventBus"
|
||||
/>
|
||||
<PopupVideoSettings
|
||||
v-if="selectedTab === 'videoSettings'"
|
||||
:settings="settings"
|
||||
:eventBus="eventBus"
|
||||
:siteSettings="siteSettings"
|
||||
></PopupVideoSettings>
|
||||
<!-- <PlayerDetectionPanel
|
||||
v-if="selectedTab === 'playerDetection'"
|
||||
:settings="settings"
|
||||
:eventBus="eventBus"
|
||||
:siteSettings="siteSettings"
|
||||
:site="site.host"
|
||||
>
|
||||
</PlayerDetectionPanel> -->
|
||||
<BaseExtensionSettings
|
||||
v-if="selectedTab === 'extensionSettings'"
|
||||
:settings="settings"
|
||||
:eventBus="eventBus"
|
||||
:siteSettings="siteSettings"
|
||||
:site="site.host"
|
||||
>
|
||||
</BaseExtensionSettings>
|
||||
</template>
|
||||
<template v-else>No settings or site settings found.</template>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseExtensionSettings from './src/PlayerUiPanels/BaseExtensionSettings.vue'
|
||||
import PlayerDetectionPanel from './src/PlayerUiPanels/PlayerDetectionPanel.vue'
|
||||
import PopupVideoSettings from './src/popup/panels/PopupVideoSettings.vue'
|
||||
import InPlayerUIAdvertisement from './src/PlayerUiPanels/InPlayerUiAdvertisement.vue';
|
||||
import Debug from '../ext/conf/Debug';
|
||||
import BrowserDetect from '../ext/conf/BrowserDetect';
|
||||
import Comms from '../ext/lib/comms/Comms';
|
||||
import CommsClient, {CommsOrigin} from '../ext/lib/comms/CommsClient';
|
||||
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';
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
comms: undefined,
|
||||
eventBus: new EventBus(),
|
||||
settings: {},
|
||||
settingsInitialized: false,
|
||||
narrowPopup: null,
|
||||
sideMenuVisible: null,
|
||||
logger: undefined,
|
||||
site: undefined,
|
||||
siteSettings: undefined,
|
||||
selectedTab: 'playerUiCtl',
|
||||
tabs: [
|
||||
// see this for icons: https://pictogrammers.com/library/mdi/
|
||||
{id: 'playerUiCtl', label: 'In-player UI', icon: 'artboard'},
|
||||
{id: 'videoSettings', label: 'Video settings', icon: 'crop'},
|
||||
// {id: 'playerDetection', label: 'Player detection', icon: 'television-play'},
|
||||
{id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
|
||||
],
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.logger = new Logger();
|
||||
await this.logger.init({
|
||||
allowLogging: true,
|
||||
});
|
||||
|
||||
this.settings = new Settings({afterSettingsSaved: () => this.updateConfig(), logger: this.logger});
|
||||
await this.settings.init();
|
||||
this.settingsInitialized = true;
|
||||
|
||||
// const port = chrome.runtime.connect({name: 'popup-port'});
|
||||
// port.onMessage.addListener( (m,p) => this.processReceivedMessage(m,p));
|
||||
// CSM.setProperty('port', port);
|
||||
|
||||
this.eventBus = new EventBus();
|
||||
this.eventBus.subscribe(
|
||||
'set-current-site',
|
||||
{
|
||||
function: (config, context) => {
|
||||
if (this.site) {
|
||||
if (!this.site.host) {
|
||||
// dunno why this fix is needed, but sometimes it is
|
||||
this.site.host = config.site.host;
|
||||
}
|
||||
}
|
||||
this.site = config.site;
|
||||
// this.selectedSite = this.selectedSite || config.site.host;
|
||||
this.siteSettings = this.settings.getSiteSettings(this.site.host);
|
||||
|
||||
this.eventBus.setupPopupTunnelWorkaround({
|
||||
origin: CommsOrigin.Popup,
|
||||
comms: {
|
||||
forwardTo: 'active'
|
||||
}
|
||||
});
|
||||
|
||||
this.loadFrames(this.site);
|
||||
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
this.comms = new CommsClient('popup-port', this.logger, this.eventBus);
|
||||
this.eventBus.setComms(this.comms);
|
||||
this.eventBus.setupPopupTunnelWorkaround({
|
||||
origin: CommsOrigin.Popup,
|
||||
comms: {forwardTo: 'active'}
|
||||
});
|
||||
|
||||
|
||||
// ensure we'll clean player markings on popup close
|
||||
window.addEventListener("unload", () => {
|
||||
CSM.port.postMessage({
|
||||
cmd: 'unmark-player',
|
||||
forwardToAll: true,
|
||||
});
|
||||
// if (BrowserDetect.anyChromium) {
|
||||
// chrome.extension.getBackgroundPage().sendUnmarkPlayer({
|
||||
// cmd: 'unmark-player',
|
||||
// forwardToAll: true,
|
||||
// });
|
||||
// }
|
||||
});
|
||||
|
||||
// get info about current site from background script
|
||||
while (true) {
|
||||
this.requestSite();
|
||||
await this.sleep(5000);
|
||||
}
|
||||
},
|
||||
async updated() {
|
||||
const body = document.getElementsByTagName('body')[0];
|
||||
|
||||
// ensure that narrowPopup only gets set the first time the popup renders
|
||||
// if popup was rendered before, we don't do anything because otherwise
|
||||
// we'll be causing an unwanted re-render
|
||||
//
|
||||
// another thing worth noting — the popup gets first initialized with
|
||||
// offsetWidth set to 0. This means proper popup will be displayed as a
|
||||
// mini popup if we don't check for that.
|
||||
if (this.narrowPopup === null && body.offsetWidth > 0) {
|
||||
this.narrowPopup = body.offsetWidth < 600;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Debug,
|
||||
BrowserDetect,
|
||||
PopupVideoSettings, PlayerDetectionPanel, BaseExtensionSettings, InPlayerUIAdvertisement
|
||||
},
|
||||
methods: {
|
||||
async sleep(t) {
|
||||
return new Promise( (resolve,reject) => {
|
||||
setTimeout(() => resolve(), t);
|
||||
});
|
||||
},
|
||||
toObject(obj) {
|
||||
return JSON.parse(JSON.stringify(obj));
|
||||
},
|
||||
requestSite() {
|
||||
try {
|
||||
this.logger.log('info','popup', '[popup::getSite] Requesting current site ...')
|
||||
// CSM.port.postMessage({command: 'get-current-site'});
|
||||
this.eventBus.send(
|
||||
'get-current-site',
|
||||
{
|
||||
comms: {forwardTo: 'active'}
|
||||
}
|
||||
);
|
||||
} catch (e) {
|
||||
this.logger.log('error','popup','[popup::getSite] sending get-current-site failed for some reason. Reason:', e);
|
||||
}
|
||||
},
|
||||
getRandomColor() {
|
||||
return `rgb(${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)})`;
|
||||
},
|
||||
selectTab(tab) {
|
||||
this.selectedTab = tab;
|
||||
},
|
||||
processReceivedMessage(message, port) {
|
||||
this.logger.log('info', 'popup', '[popup::processReceivedMessage] received message:', message)
|
||||
|
||||
if (message.command === 'set-current-site'){
|
||||
if (this.site) {
|
||||
if (!this.site.host) {
|
||||
// dunno why this fix is needed, but sometimes it is
|
||||
this.site.host = site.tabHostname;
|
||||
}
|
||||
}
|
||||
this.site = message.site;
|
||||
|
||||
// update activeSites
|
||||
// this.activeSites = this.activeSites.filter(x => x.host !== message.site);
|
||||
|
||||
// add current site
|
||||
// this.activeSites = unshift({
|
||||
// host: message.site.host,
|
||||
// isIFrame: false, // currently unused
|
||||
// });
|
||||
this.selectedSite = this.selectedSite || message.site.host;
|
||||
|
||||
this.loadFrames(this.site);
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
isDefaultFrame(frameId) {
|
||||
return frameId === '__playing' || frameId === '__all';
|
||||
},
|
||||
loadFrames() {
|
||||
this.activeSites = [{
|
||||
host: this.site.host,
|
||||
isIFrame: false, // not used tho. Maybe one day
|
||||
}];
|
||||
this.selectedSite = this.selectedSite || this.site.host;
|
||||
|
||||
// for (const frame in videoTab.frames) {
|
||||
// this.activeFrames.push({
|
||||
// id: `${this.site.id}-${frame}`,
|
||||
// label: videoTab.frames[frame].host,
|
||||
// ...this.frameStore[frame],
|
||||
// })
|
||||
|
||||
// // only add each host once at most
|
||||
// if (!this.activeSites.find(x => x.host === videoTab.frames[frame].host)) {
|
||||
// this.activeSites.push({
|
||||
// host: videoTab.frames[frame].host,
|
||||
// isIFrame: undefined // maybe one day
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
|
||||
// update whether video tab can be shown
|
||||
// this.updateCanShowVideoTab();
|
||||
},
|
||||
getRandomColor() {
|
||||
return `rgb(${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)})`;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// @import 'res/css/uwui-base.scss';
|
||||
@import 'res/css/colors.scss';
|
||||
@import 'res/css/font/overpass.css';
|
||||
@import 'res/css/font/overpass-mono.css';
|
||||
@import 'res/css/common.scss';
|
||||
@import './src/res-common/_variables';
|
||||
|
||||
.header {
|
||||
background-color: rgb(90, 28, 13);
|
||||
color: #fff;
|
||||
padding: 8px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.version-info {
|
||||
text-align: right;
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.8;
|
||||
label {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.site-support-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.site-support-site {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.site-support {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
margin-left: 1rem;
|
||||
border-radius: 8px;
|
||||
padding: 0rem 1.5rem 0rem 1rem;
|
||||
|
||||
position: relative;
|
||||
|
||||
.tooltip {
|
||||
padding: 1rem;
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
transform: translateY(110%);
|
||||
width: 42em;
|
||||
|
||||
background-color: rgba(0,0,0,0.90);
|
||||
color: #ccc;
|
||||
}
|
||||
&:hover {
|
||||
.tooltip {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.mdi {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
&.official {
|
||||
background-color: #fa6;
|
||||
color: #000;
|
||||
|
||||
.mdi {
|
||||
fill: #000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.community {
|
||||
background-color: rgb(85, 85, 179);
|
||||
color: #fff;
|
||||
|
||||
.mdi {
|
||||
fill: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-support {
|
||||
background-color: rgb(138, 65, 126);
|
||||
color: #eee;
|
||||
|
||||
.mdi {
|
||||
fill: #eee !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.user-added {
|
||||
border: 1px solid #ff0;
|
||||
|
||||
color: #ff0;
|
||||
|
||||
.mdi {
|
||||
fill: #ff0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex-grow: 1;
|
||||
|
||||
.warning-area {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
|
||||
overflow-y: auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.warning-box {
|
||||
background: rgb(255, 174, 107);
|
||||
color: #000;
|
||||
margin: 1rem;
|
||||
padding: 1rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.icon-container {
|
||||
margin-right: 1rem;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba(0,0,0,0.7);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.popup-panel {
|
||||
background-color: rgba(0,0,0,0.50);
|
||||
color: #fff;
|
||||
|
||||
overflow-y: auto;
|
||||
|
||||
.popup-window-header {
|
||||
padding: 1rem;
|
||||
background-color: rgba(5,5,5, 0.75);
|
||||
}
|
||||
.tab-row {
|
||||
background-color: rgba(11,11,11, 0.75);
|
||||
|
||||
.tab {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
padding: 1rem;
|
||||
font-size: 1.25rem;
|
||||
// height: rem;
|
||||
min-height: 3rem;
|
||||
|
||||
border-bottom: 1px solid rgba(128, 128, 128, 0.5);
|
||||
border-top: 1px solid rgba(128, 128, 128, 0.5);
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
&.active {
|
||||
opacity: 1.0;
|
||||
background-color: $primaryBg;
|
||||
color: rgb(255, 174, 107);
|
||||
border-bottom: 1px solid rgba(116, 78, 47, 0.5);
|
||||
border-top: 1px solid rgba(116, 78, 47, 0.5);
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
width: 64px;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.label {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup-title, .popup-title h1 {
|
||||
font-size: 48px !important;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.button {
|
||||
border: 1px solid #222 !important;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0; padding: 0; font-weight: 400; font-size:24px;
|
||||
}
|
||||
</style>
|
||||
16
src/csui/csui-global.html
Normal file
16
src/csui/csui-global.html
Normal file
@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="color-scheme" content="light dark">
|
||||
<title>Ultrawidify - Content Script User Interface (global overlay)</title>
|
||||
<!-- <link rel="stylesheet" href="csui.css"> -->
|
||||
<% if (NODE_ENV === 'development') { %>
|
||||
<!-- Load some resources only in development environment -->
|
||||
<% } %>
|
||||
</head>
|
||||
<body class="uw-ultrawidify-container-root">
|
||||
<div id="app"></div>
|
||||
<script src="csui-global.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
11
src/csui/csui-global.js
Normal file
11
src/csui/csui-global.js
Normal file
@ -0,0 +1,11 @@
|
||||
import { createApp } from 'vue';
|
||||
import GlobalFrame from './GlobalFrame';
|
||||
import mdiVue from 'mdi-vue/v3';
|
||||
import * as mdijs from '@mdi/js';
|
||||
|
||||
// NOTE — this is in-player interface for ultrawidify
|
||||
// it is injected into the page in UI.init()
|
||||
|
||||
createApp(GlobalFrame)
|
||||
.use(mdiVue, {icons: mdijs})
|
||||
.mount('#app');
|
||||
13
src/csui/csui-overlay-dark.html
Normal file
13
src/csui/csui-overlay-dark.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="color-scheme" content="dark">
|
||||
<title>Ultrawidify - Content Script User Interface (in-player overlay)</title>
|
||||
<!-- <link rel="stylesheet" href="csui.css"> -->
|
||||
</head>
|
||||
<body class="uw-ultrawidify-container-root" style="background-color: transparent">
|
||||
<div id="app"></div>
|
||||
<script src="csui.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
13
src/csui/csui-overlay-light.html
Normal file
13
src/csui/csui-overlay-light.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="color-scheme" content="light">
|
||||
<title>Ultrawidify - Content Script User Interface (in-player overlay)</title>
|
||||
<!-- <link rel="stylesheet" href="csui.css"> -->
|
||||
</head>
|
||||
<body class="uw-ultrawidify-container-root" style="background-color: transparent">
|
||||
<div id="app"></div>
|
||||
<script src="csui.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
12
src/csui/csui-overlay-normal.html
Normal file
12
src/csui/csui-overlay-normal.html
Normal file
@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ultrawidify - Content Script User Interface (in-player overlay)</title>
|
||||
<!-- <link rel="stylesheet" href="csui.css"> -->
|
||||
</head>
|
||||
<body class="uw-ultrawidify-container-root" style="background-color: transparent">
|
||||
<div id="app"></div>
|
||||
<script src="csui.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -3,16 +3,18 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
<link rel="stylesheet" href="popup.css">
|
||||
<!-- <link rel="stylesheet" href="popup.css"> -->
|
||||
|
||||
<% if (NODE_ENV === 'development') { %>
|
||||
<!-- Load some resources only in development environment -->
|
||||
<% } %>
|
||||
</head>
|
||||
<body style="width: 100%; height: 100%; overflow-x: hidden;" class="uw-ultrawidify-container-root">
|
||||
<body
|
||||
style="width: 100%; height: 100%; overflow-x: hidden; min-width: 750px"
|
||||
>
|
||||
<div id="app">
|
||||
|
||||
</div>
|
||||
<script src="popup.js"></script>
|
||||
<script src="csui-popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
8
src/csui/csui-popup.js
Normal file
8
src/csui/csui-popup.js
Normal file
@ -0,0 +1,8 @@
|
||||
import { createApp } from 'vue'
|
||||
import Popup from './Popup';
|
||||
import mdiVue from 'mdi-vue/v3';
|
||||
import * as mdijs from '@mdi/js';
|
||||
|
||||
createApp(Popup)
|
||||
.use(mdiVue, {icons: mdijs})
|
||||
.mount('#app');
|
||||
11
src/csui/csui.js
Normal file
11
src/csui/csui.js
Normal file
@ -0,0 +1,11 @@
|
||||
import { createApp } from 'vue';
|
||||
import PlayerOverlay from './PlayerOverlay';
|
||||
import mdiVue from 'mdi-vue/v3';
|
||||
import * as mdijs from '@mdi/js';
|
||||
|
||||
// NOTE — this is in-player interface for ultrawidify
|
||||
// it is injected into the page in UI.init()
|
||||
|
||||
createApp(PlayerOverlay)
|
||||
.use(mdiVue, {icons: mdijs})
|
||||
.mount('#app');
|
||||
396
src/csui/res/css/common.scss
Normal file
396
src/csui/res/css/common.scss
Normal file
@ -0,0 +1,396 @@
|
||||
@import "colors.scss";
|
||||
@import "fonts.scss";
|
||||
@import "flex.scss";
|
||||
// @import "~/@mdi/font/css/materialdesignicons.css";
|
||||
|
||||
// @import "form.scss";
|
||||
|
||||
body {
|
||||
background-color: $background-primary;
|
||||
color: $text-normal;
|
||||
font-family: 'Overpass', sans-serif;
|
||||
font-size: 1.2em;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
height: 100vh;
|
||||
border: 0px;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
/* STANDARD WIDTHS AND HEIGHTS */
|
||||
.w100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.h100, .h-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.w24 {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.m-t-0-33em {
|
||||
margin-top: 0.33em;
|
||||
}
|
||||
|
||||
.x-pad-1em {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* overflow stuff */
|
||||
.overflow-y-auto {
|
||||
overflow: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba($primary-color, 0.7) $background-primary;
|
||||
}
|
||||
.scrollbar-darker {
|
||||
scrollbar-color: rgba($primary-color, 0.5) $background-primary;
|
||||
}
|
||||
|
||||
|
||||
/* scrollbars for chrome/webkit */
|
||||
.overflow-y-auto::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
}
|
||||
.overflow-y-auto::-webkit-scrollbar-track {
|
||||
background: $background-primary;
|
||||
}
|
||||
.overflow-y-auto::-webkit-scrollbar-thumb {
|
||||
background: rgba($primary-color, 0.7);
|
||||
}
|
||||
.overflow-y-auto::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
.scrollbar-darker::-webkit-scrollbar-thumb {
|
||||
background: rgba($primary-color, 0.5);
|
||||
}
|
||||
|
||||
.no-overflow {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.no-overflow-x {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.no-overflow-y {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
/* .SELECTED CLASSES */
|
||||
|
||||
.selected-tab {
|
||||
background-color: initial;
|
||||
border-left: $primary-color 5px solid;
|
||||
}
|
||||
|
||||
.selected-tab-secondary {
|
||||
background-color: initial;
|
||||
border-left: $secondary-color 3px solid !important;
|
||||
}
|
||||
|
||||
|
||||
/* BASIC STYLING */
|
||||
|
||||
.description {
|
||||
color: $text-dim;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.label {
|
||||
padding-top: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
font-variant: small-caps;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.label-secondary {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.button-box {
|
||||
padding-top: 0.69rem;
|
||||
padding-bottom: 0.69rem;
|
||||
}
|
||||
|
||||
.indent {
|
||||
padding-left: 4.2rem;
|
||||
}
|
||||
|
||||
.row-padding {
|
||||
padding-top: 0.69rem;
|
||||
padding-bottom: 0.69rem;
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
color: $primary-color;
|
||||
}
|
||||
a:hover {
|
||||
color: lighten($primary-color, 10%);
|
||||
}
|
||||
|
||||
/* INPUT FORMATTING */
|
||||
input[type="number"], input[type="text"], input {
|
||||
outline: none;
|
||||
background-color: $input-background;
|
||||
color: $text-normal;
|
||||
padding: 0.1rem;
|
||||
padding-top: 0.2rem;
|
||||
padding-bottom: 0.1rem;
|
||||
margin-left: 1rem;
|
||||
border: 1px solid $input-border;
|
||||
}
|
||||
|
||||
input:disabled {
|
||||
background: #444444;
|
||||
color: darken($text-normal, 50%);
|
||||
}
|
||||
|
||||
/* ELEMENT POSITIONING */
|
||||
|
||||
.row {
|
||||
display: block;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.button-row {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.float-left {
|
||||
float: left;
|
||||
}
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* TEXT FORMATTING (no colors) */
|
||||
|
||||
small {
|
||||
font-size: 0.75em;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 0.75em;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.medium-small {
|
||||
font-size: 0.85em;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.smallcaps{
|
||||
font-variant: small-caps;
|
||||
}
|
||||
|
||||
.center{
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.invalid-input {
|
||||
border: 1px solid #720 !important;
|
||||
background-color: #410 !important;
|
||||
}
|
||||
|
||||
.button {
|
||||
/*display: inline-block;*/
|
||||
// padding-top: 8px;
|
||||
// padding-bottom: 3px;
|
||||
//padding-left: 5px;
|
||||
//padding-right: 5px;
|
||||
border: 1px solid rgb(39, 39, 39);
|
||||
margin-top: 3px;
|
||||
margin-bottom: 3px;
|
||||
color: $text-dim;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
user-select: none;;
|
||||
}
|
||||
|
||||
|
||||
.selected, .setting-selected {
|
||||
color: $selected-color !important;
|
||||
background-color: $background-selected !important;
|
||||
}
|
||||
|
||||
.selected-tab {
|
||||
color: $selected-color;
|
||||
}
|
||||
|
||||
.setting-selected {
|
||||
border: 1px solid shade($selected-color, 25%);
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
color: lighten($selected-color, 10%);
|
||||
background-color: lighten($background-selected, 10%);
|
||||
}
|
||||
|
||||
.disabled {
|
||||
pointer-events: none;
|
||||
/* color: #666; */
|
||||
filter: contrast(50%) brightness(40%) grayscale(100%);
|
||||
}
|
||||
|
||||
.disabled-button {
|
||||
color: #666 !important;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
.disabled-button:hover {
|
||||
color: #777 !important;
|
||||
background-color: #222 !important;
|
||||
}
|
||||
|
||||
/* BROWSER-SPECIFIC DISABLE */
|
||||
.disabled-edge {
|
||||
pointer-events: none !important;
|
||||
filter: contrast(50%) brightness(40%) grayscale(100%) !important;
|
||||
content: "NOT SUPPORTED IN THIS BROWSER";
|
||||
}
|
||||
.disabled-edge::after {
|
||||
background-color: #333272;
|
||||
color: #d8d9e6;
|
||||
display: inline-block;
|
||||
font-size: .75em;
|
||||
font-variant: small-caps;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/** misc **/
|
||||
|
||||
.warning-color {
|
||||
color: #d6ba4a;
|
||||
}
|
||||
|
||||
.warning, .warning-lite {
|
||||
color: #d6ba4a;
|
||||
padding-left: 35px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.warning::before, .warning-lite::before {
|
||||
content: "⚠ ";
|
||||
display: inline-block;
|
||||
}
|
||||
.warning::before {
|
||||
font-weight: bold;
|
||||
font-size: 2.5em;
|
||||
margin-left: -35px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.info {
|
||||
color: $info-color;
|
||||
padding-left: 35px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.info::before {
|
||||
content: "ⓘ";
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
margin-left: -35px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.new {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.new::after {
|
||||
content: "ⓘ";
|
||||
color: $info-color !important;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.experimental::after {
|
||||
// content: "Experimental";
|
||||
content: "Ⓔ";
|
||||
color: #ffde12;
|
||||
// background-color: #1f1f1f;
|
||||
display: inline-block;
|
||||
font-size: .75em;
|
||||
font-variant: small-caps;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
margin-left: 10px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
.experimental:hover::after {
|
||||
content: "Ⓔ Experimental";
|
||||
// content: "";
|
||||
color: #ffde12;
|
||||
// background-color: #1f1f1f;
|
||||
display: inline-block;
|
||||
font-size: .75em;
|
||||
font-variant: small-caps;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
margin-left: 10px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.sticky-bottom {
|
||||
width: 100%;
|
||||
position: sticky;
|
||||
// position: fixed;
|
||||
bottom: 0px;
|
||||
background-color: rgba($background-primary, 0.7);
|
||||
}
|
||||
|
||||
.rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.ltr {
|
||||
direction: ltr;
|
||||
}
|
||||
.monospace {
|
||||
font-family: 'Overpass Mono';
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
51
src/csui/res/css/flex.scss
Normal file
51
src/csui/res/css/flex.scss
Normal file
@ -0,0 +1,51 @@
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-auto {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.flex-nogrow {
|
||||
flex-grow: 0;
|
||||
}
|
||||
.flex-shrink {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
.flex-noshrink {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.flex-cross-center {
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.flex-self-center {
|
||||
align-self: center;
|
||||
}
|
||||
@ -1,111 +1,111 @@
|
||||
@font-face {
|
||||
font-family: 'Overpass';
|
||||
src: url('/res/fonts/overpass-webfont/overpass-thin.woff2') format('woff2'); /* Super Modern Browsers */
|
||||
src: url('/csui/res/fonts/overpass-webfont/overpass-thin.woff2') format('woff2'); /* Super Modern Browsers */
|
||||
font-weight: 200;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass';
|
||||
src: url('/res/fonts/overpass-webfont/overpass-thin-italic.woff2') format('woff2');
|
||||
src: url('/csui/res/fonts/overpass-webfont/overpass-thin-italic.woff2') format('woff2');
|
||||
font-weight: 200;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass';
|
||||
src: url('/res/fonts/overpass-webfont/overpass-extralight.woff2') format('woff2');
|
||||
src: url('/csui/res/fonts/overpass-webfont/overpass-extralight.woff2') format('woff2');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass';
|
||||
src: url('/res/fonts/overpass-webfont/overpass-extralight-italic.woff2') format('woff2');
|
||||
src: url('/csui/res/fonts/overpass-webfont/overpass-extralight-italic.woff2') format('woff2');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass';
|
||||
src: url('/res/fonts/overpass-webfont/overpass-light.woff2') format('woff2');
|
||||
src: url('/csui/res/fonts/overpass-webfont/overpass-light.woff2') format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass';
|
||||
src: url('/res/fonts/overpass-webfont/overpass-light-italic.woff2') format('woff2');
|
||||
src: url('/csui/res/fonts/overpass-webfont/overpass-light-italic.woff2') format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass';
|
||||
src: url('/res/fonts/overpass-webfont/overpass-regular.woff2') format('woff2');
|
||||
src: url('/csui/res/fonts/overpass-webfont/overpass-regular.woff2') format('woff2');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass';
|
||||
src: url('/res/fonts/overpass-webfont/overpass-italic.woff2') format('woff2');
|
||||
src: url('/csui/res/fonts/overpass-webfont/overpass-italic.woff2') format('woff2');
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass';
|
||||
src: url('/res/fonts/overpass-webfont/overpass-semibold.woff2') format('woff2');
|
||||
src: url('/csui/res/fonts/overpass-webfont/overpass-semibold.woff2') format('woff2');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass';
|
||||
src: url('/res/fonts/overpass-webfont/overpass-semibold-italic.woff2') format('woff2');
|
||||
src: url('/csui/res/fonts/overpass-webfont/overpass-semibold-italic.woff2') format('woff2');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass';
|
||||
src: url('/res/fonts/overpass-webfont/overpass-bold.woff2') format('woff2');
|
||||
src: url('/csui/res/fonts/overpass-webfont/overpass-bold.woff2') format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass';
|
||||
src: url('/res/fonts/overpass-webfont/overpass-bold-italic.woff2') format('woff2');
|
||||
src: url('/csui/res/fonts/overpass-webfont/overpass-bold-italic.woff2') format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass mono';
|
||||
src: url('/res/fonts/overpass-mono-webfont/overpass-mono-light.woff2') format('woff2');
|
||||
src: url('/csui/res/fonts/overpass-mono-webfont/overpass-mono-light.woff2') format('woff2');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass mono';
|
||||
src: url('/res/fonts/overpass-mono-webfont/overpass-mono-regular.woff2') format('woff2');
|
||||
src: url('/csui/res/fonts/overpass-mono-webfont/overpass-mono-regular.woff2') format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass mono';
|
||||
src: url('/res/fonts/overpass-mono-webfont/overpass-mono-semibold.woff2') format('woff2');
|
||||
src: url('/csui/res/fonts/overpass-mono-webfont/overpass-mono-semibold.woff2') format('woff2');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass mono';
|
||||
src: url('/res/fonts/overpass-mono-webfont/overpass-mono-bold.woff2') format('woff2');
|
||||
src: url('/csui/res/fonts/overpass-mono-webfont/overpass-mono-bold.woff2') format('woff2');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
26653
src/csui/res/css/mdi.scss
Normal file
26653
src/csui/res/css/mdi.scss
Normal file
File diff suppressed because it is too large
Load Diff
35
src/csui/res/css/uwui-base.scss
Normal file
35
src/csui/res/css/uwui-base.scss
Normal file
@ -0,0 +1,35 @@
|
||||
@import 'flex.scss';
|
||||
@import 'colors.scss';
|
||||
@import 'common.scss';
|
||||
|
||||
* {
|
||||
font-family: 'Overpass';
|
||||
}
|
||||
|
||||
.uw-ultrawidify-container-root {
|
||||
// here's the defaults:
|
||||
// all: initial;
|
||||
// * {
|
||||
// all: unset;
|
||||
// }
|
||||
|
||||
// here's things that we don't want as defaults
|
||||
// (must come after the all: declaration, otherwise
|
||||
// all: declaration overrides everything.)
|
||||
|
||||
// we put our UI _over_ site's player:
|
||||
z-index: 999999;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: none transparent !important;
|
||||
|
||||
// Ensure we're display:block
|
||||
display: block;
|
||||
|
||||
// we are click-through by default:
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
BIN
src/csui/res/fonts/materialdesignicons-webfont.woff2
Normal file
BIN
src/csui/res/fonts/materialdesignicons-webfont.woff2
Normal file
Binary file not shown.
BIN
src/csui/res/icons/ms-promo-tile.png
Normal file
BIN
src/csui/res/icons/ms-promo-tile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
BIN
src/csui/res/icons/uw-128.png
Normal file
BIN
src/csui/res/icons/uw-128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
BIN
src/csui/res/icons/uw-32.png
Normal file
BIN
src/csui/res/icons/uw-32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/csui/res/icons/uw-64.png
Normal file
BIN
src/csui/res/icons/uw-64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
src/csui/res/icons/uw-microsoft-store-icon.png
Normal file
BIN
src/csui/res/icons/uw-microsoft-store-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
src/csui/res/icons/uw-webstore-icon.png
Normal file
BIN
src/csui/res/icons/uw-webstore-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
src/csui/res/img/settings/bg_random2.png
Normal file
BIN
src/csui/res/img/settings/bg_random2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
497
src/csui/src/PlayerUIWindow.vue
Normal file
497
src/csui/src/PlayerUIWindow.vue
Normal file
@ -0,0 +1,497 @@
|
||||
<template>
|
||||
<div
|
||||
class="popup-panel flex flex-col uw-clickable h-full"
|
||||
>
|
||||
<div class="popup-window-header">
|
||||
<div class="header-title">
|
||||
<div class="popup-title">Ultrawidify <small>{{settings?.active?.version}} - {{BrowserDetect.processEnvChannel}}</small></div>
|
||||
<div class="site-support-info">
|
||||
<div class="site-support-site">{{site}}</div>
|
||||
<template v-if="inPlayer">
|
||||
<div v-if="siteSupportLevel === 'official'" class="site-support official">
|
||||
<mdicon name="check-decagram" />
|
||||
<div>Verified</div>
|
||||
<div class="tooltip">The extension is being tested and should work on this site.</div>
|
||||
</div>
|
||||
<div v-if="siteSupportLevel === 'community'" class="site-support community">
|
||||
<mdicon name="handshake" />
|
||||
<div>Community</div>
|
||||
<div class="tooltip">
|
||||
People say extension works on this site (or have provided help getting the extension to work if it didn't).<br/><br/>
|
||||
Tamius (the dev) does not test the extension on this site, probably because it requires a subscription or
|
||||
is geoblocked.
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="siteSupportLevel === 'no-support'" class="site-support no-support">
|
||||
<mdicon name="help-circle-outline" />
|
||||
<div>Unknown</div>
|
||||
<div class="tooltip">
|
||||
Not officially supported. Extension will try to fix things, but no promises.<br/><br/>
|
||||
Tamius (the dev) does not test the extension on this site for various reasons
|
||||
(unaware, not using the site, language barrier, geoblocking, paid services Tam doesn't use).
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="siteSupportLevel === 'user-added'" class="site-support user-added">
|
||||
<mdicon name="account" />
|
||||
<div>Custom</div>
|
||||
<div class="tooltip">
|
||||
You have manually changed settings for this site. The extension is doing what you told it to do.
|
||||
</div>
|
||||
</div>
|
||||
<mdicon v-if="siteSupportLevel === 'community'" class="site-support supported" name="checkbox-marked-circle" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-buttons">
|
||||
<div
|
||||
class="header-button"
|
||||
:class="{'button-active': preventClose}"
|
||||
@click="setPreventClose(!preventClose)"
|
||||
>
|
||||
<mdicon v-if="!preventClose" name="pin-outline" :size="32" />
|
||||
<mdicon v-else name="pin" :size="32" />
|
||||
</div>
|
||||
<div
|
||||
class="header-button close-button"
|
||||
@click="$emit('close')"
|
||||
>
|
||||
<mdicon name="close" :size="36"></mdicon>
|
||||
</div>
|
||||
<!-- <a >{{preventClose ? 'allow auto-close' : 'prevent auto-close'}}</a> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-main flex flex-row">
|
||||
<div class="tab-row flex flex-col grow-0 shrink-0">
|
||||
<div
|
||||
v-for="tab of tabs"
|
||||
:key="tab.id"
|
||||
class="tab"
|
||||
:class="{
|
||||
'active': tab.id === selectedTab,
|
||||
'highlight-tab': tab.highlight,
|
||||
}"
|
||||
@click="selectTab(tab.id)"
|
||||
>
|
||||
<div class="icon-container">
|
||||
<mdicon
|
||||
v-if="tab.icon"
|
||||
:name="tab.icon"
|
||||
:size="32"
|
||||
/>
|
||||
</div>
|
||||
<div class="label">
|
||||
{{tab.label}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content flex flex-col">
|
||||
<!-- autodetection warning -->
|
||||
|
||||
<div class="warning-area">
|
||||
<div
|
||||
v-if="statusFlags.hasDrm"
|
||||
class="warning-box"
|
||||
>
|
||||
<div class="icon-container">
|
||||
<mdicon name="alert" :size="32" />
|
||||
</div>
|
||||
<div>
|
||||
This site is blocking automatic aspect ratio detection. You will have to adjust aspect ratio manually.<br/>
|
||||
<a>Learn more ...</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row panel-content">
|
||||
<!-- Panel section -->
|
||||
<VideoSettings
|
||||
v-if="selectedTab === 'videoSettings'"
|
||||
:settings="settings"
|
||||
:siteSettings="siteSettings"
|
||||
:eventBus="eventBus"
|
||||
:site="site"
|
||||
></VideoSettings>
|
||||
<PlayerDetectionPanel
|
||||
v-if="selectedTab === 'playerDetection'"
|
||||
:siteSettings="siteSettings"
|
||||
:eventBus="eventBus"
|
||||
:site="site"
|
||||
>
|
||||
</PlayerDetectionPanel>
|
||||
<BaseExtensionSettings
|
||||
v-if="selectedTab === 'extensionSettings'"
|
||||
:settings="settings"
|
||||
:siteSettings="siteSettings"
|
||||
:site="site"
|
||||
></BaseExtensionSettings>
|
||||
<AutodetectionSettingsPanel
|
||||
v-if="selectedTab === 'autodetectionSettings'"
|
||||
:settings="settings"
|
||||
:siteSettings="siteSettings"
|
||||
:eventBus="eventBus"
|
||||
:site="site"
|
||||
>
|
||||
</AutodetectionSettingsPanel>
|
||||
<DebugPanel
|
||||
v-if="selectedTab === 'debugging'"
|
||||
:settings="settings"
|
||||
:eventBus="eventBus"
|
||||
:site="site"
|
||||
></DebugPanel>
|
||||
<ChangelogPanel
|
||||
v-if="selectedTab === 'changelog'"
|
||||
:settings="settings"
|
||||
></ChangelogPanel>
|
||||
<AboutPanel
|
||||
v-if="selectedTab === 'about'"
|
||||
>
|
||||
</AboutPanel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import DebugPanel from './PlayerUiPanels/DebugPanel.vue'
|
||||
import AutodetectionSettingsPanel from './PlayerUiPanels/AutodetectionSettingsPanel.vue'
|
||||
import BaseExtensionSettings from './PlayerUiPanels/BaseExtensionSettings.vue'
|
||||
import PlayerDetectionPanel from './PlayerUiPanels/PlayerDetectionPanel.vue'
|
||||
import VideoSettings from './PlayerUiPanels/VideoSettings.vue'
|
||||
import BrowserDetect from '../../ext/conf/BrowserDetect'
|
||||
import ChangelogPanel from './PlayerUiPanels/ChangelogPanel.vue'
|
||||
import AboutPanel from './PlayerUiPanels/AboutPanel.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VideoSettings,
|
||||
PlayerDetectionPanel,
|
||||
BaseExtensionSettings,
|
||||
AutodetectionSettingsPanel,
|
||||
DebugPanel,
|
||||
ChangelogPanel,
|
||||
AboutPanel
|
||||
},
|
||||
mixins: [],
|
||||
data() {
|
||||
return {
|
||||
statusFlags: {
|
||||
hasDrm: undefined,
|
||||
},
|
||||
|
||||
tabs: [
|
||||
{id: 'videoSettings', label: 'Video settings', icon: 'crop'},
|
||||
{id: 'playerDetection', label: 'Player detection', icon: 'television-play'},
|
||||
{id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
|
||||
// {id: 'autodetectionSettings', label: 'Autodetection options', icon: ''},
|
||||
// {id: 'advancedOptions', label: 'Advanced options', icon: 'cogs' },
|
||||
// {id: 'debugging', label: 'Debugging', icon: 'bug-outline' }
|
||||
{id: 'changelog', label: 'What\'s new', icon: 'information-box-outline' },
|
||||
{id: 'about', label: 'About', icon: 'star-four-points-circle'}
|
||||
],
|
||||
selectedTab: 'videoSettings',
|
||||
BrowserDetect: BrowserDetect,
|
||||
preventClose: false,
|
||||
siteSettings: null,
|
||||
}
|
||||
},
|
||||
props: [
|
||||
'settings',
|
||||
'eventBus',
|
||||
'logger',
|
||||
'in-player',
|
||||
'site'
|
||||
],
|
||||
computed: {
|
||||
// LPT: NO ARROW FUNCTIONS IN COMPUTED,
|
||||
// IS SUPER HARAM
|
||||
// THINGS WILL NOT WORK IF YOU USE ARROWS
|
||||
siteSupportLevel() {
|
||||
return (this.site && this.siteSettings) ? this.siteSettings.data.type || 'no-support' : 'waiting';
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.siteSettings = this.settings.getSiteSettings(this.site);
|
||||
this.tabs.find(x => x.id === 'changelog').highlight = !this.settings.active.whatsNewChecked;
|
||||
|
||||
this.eventBus.subscribe(
|
||||
'uw-show-ui',
|
||||
() => {
|
||||
if (this.inPlayer) {
|
||||
return; // show-ui is only intended for global overlay
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Gets URL of the browser settings page (i think?)
|
||||
*/
|
||||
getUrl(url) {
|
||||
return BrowserDetect.getURL(url);
|
||||
},
|
||||
selectTab(tab) {
|
||||
this.selectedTab = tab;
|
||||
},
|
||||
setPreventClose(bool) {
|
||||
this.preventClose = bool;
|
||||
this.$emit('preventClose', bool);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '../res/css/uwui-base.scss';
|
||||
@import '../res/css/colors.scss';
|
||||
@import '../res/css/font/overpass.css';
|
||||
@import '../res/css/font/overpass-mono.css';
|
||||
@import '../res/css/common.scss';
|
||||
@import '../src/res-common/_variables';
|
||||
|
||||
// .relative-wrapper {
|
||||
// position: relative;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// }
|
||||
|
||||
.tab-row {
|
||||
width: 22rem;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tab-main {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.site-support-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.site-support-site {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.site-support {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
margin-left: 1rem;
|
||||
border-radius: 8px;
|
||||
padding: 0rem 1.5rem 0rem 1rem;
|
||||
|
||||
position: relative;
|
||||
|
||||
.tooltip {
|
||||
padding: 1rem;
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
transform: translateY(110%);
|
||||
width: 42em;
|
||||
|
||||
background-color: rgba(0,0,0,0.90);
|
||||
color: #ccc;
|
||||
}
|
||||
&:hover {
|
||||
.tooltip {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.mdi {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
&.official {
|
||||
background-color: #fa6;
|
||||
color: #000;
|
||||
|
||||
.mdi {
|
||||
fill: #000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.community {
|
||||
background-color: rgb(85, 85, 179);
|
||||
color: #fff;
|
||||
|
||||
.mdi {
|
||||
fill: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-support {
|
||||
background-color: rgb(138, 65, 126);
|
||||
color: #eee;
|
||||
|
||||
.mdi {
|
||||
fill: #eee !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.user-added {
|
||||
border: 1px solid #ff0;
|
||||
|
||||
color: #ff0;
|
||||
|
||||
.mdi {
|
||||
fill: #ff0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex-grow: 1;
|
||||
|
||||
.warning-area {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
|
||||
overflow-y: auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.warning-box {
|
||||
background: rgb(255, 174, 107);
|
||||
color: #000;
|
||||
margin: 1rem;
|
||||
padding: 1rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.icon-container {
|
||||
margin-right: 1rem;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba(0,0,0,0.7);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.popup-panel {
|
||||
background-color: rgba(0,0,0,0.50);
|
||||
color: #fff;
|
||||
|
||||
overflow-y: auto;
|
||||
|
||||
.popup-window-header {
|
||||
padding: 1rem;
|
||||
background-color: rgba(5,5,5, 0.75);
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.header-title {
|
||||
flex: 1 1;
|
||||
}
|
||||
.header-buttons {
|
||||
flex: 0 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.header-button {
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&.button-active {
|
||||
background-color: #fa6;
|
||||
color: #000;
|
||||
|
||||
&:hover {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
&.close-button {
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #fa6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-row {
|
||||
background-color: rgba(11,11,11, 0.75);
|
||||
|
||||
.tab {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
padding: 2rem;
|
||||
font-size: 1.5rem;
|
||||
height: 4rem;
|
||||
|
||||
border-bottom: 1px solid rgba(128, 128, 128, 0.5);
|
||||
border-top: 1px solid rgba(128, 128, 128, 0.5);
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
&.active {
|
||||
opacity: 1.0;
|
||||
background-color: $primaryBg;
|
||||
color: rgb(255, 174, 107);
|
||||
border-bottom: 1px solid rgba(116, 78, 47, 0.5);
|
||||
border-top: 1px solid rgba(116, 78, 47, 0.5);
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
width: 64px;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.label {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
&.highlight-tab {
|
||||
opacity: 0.9;
|
||||
color: #eee;
|
||||
|
||||
// .label {
|
||||
// color: rgb(239, 192, 152);
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup-title, .popup-title h1 {
|
||||
font-size: 48px !important;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
140
src/csui/src/PlayerUiPanels/AboutPanel.vue
Normal file
140
src/csui/src/PlayerUiPanels/AboutPanel.vue
Normal file
@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<div class="flex flex-col w-full h-full gap-2">
|
||||
<h1>About Ultrawidify</h1>
|
||||
<p>
|
||||
Ultrawidify version: <b>{{addonVersion}}</b><br>
|
||||
Install source: <b>{{addonSource}}</b>
|
||||
</p>
|
||||
|
||||
<div class="flex flex-row gap-2 bg-black">
|
||||
<div class="w-[1/2]" style="width: 50%">
|
||||
<h2>Report a problem</h2>
|
||||
<p>
|
||||
You may report <strike>undocumented features</strike> bugs using one of the following options (in order of preference):
|
||||
</p>
|
||||
<ul>
|
||||
<li> <a target="_blank" href="https://github.com/tamius-han/ultrawidify/issues"><b>Github (preferred)</b></a><br/></li>
|
||||
<li>Email: <a target="_blank" :href="mailtoLink">tamius.han@gmail.com</a></li>
|
||||
</ul>
|
||||
<p>
|
||||
When reporting bugs, please include the following information:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Extension version</li>
|
||||
<li>Which browser you're using¹</li>
|
||||
<li>Which extension store you installed extension from (install source)²</li>
|
||||
<li>Which site you're having the issue on (preferably link. For issues with autodetection, please also include a timestamp)</li>
|
||||
<li>What do I need to do in order to make the issue happen</li>
|
||||
<li>Please include a screenshot of the problem. It usually helps.</li>
|
||||
</ul>
|
||||
<p>
|
||||
<small>
|
||||
[1] If using anything other than Firefox, Chrome, or Edge, please check if issue also happens in Chrome or Edge. Bugs affecting Opera will only get fixed if they also affect Chrome, because <a href="https://stuff.tamius.net/sacred-texts/2024/06/08/why-im-boycotting-opera/">I'm salty</a>.<br/>
|
||||
[2] It is recommended that users of Microsoft Edge install Ultrawidify from the Microsoft Edge Addons source
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="w-[1/2]" style="width: 50%">
|
||||
<h2>Thank you monies</h2>
|
||||
<p>
|
||||
If you think I deserve money for the work I did up to this point, you can bankroll my caffeine addiction.
|
||||
</p>
|
||||
<p class="text-center">
|
||||
<a class="donate" href="https://www.paypal.com/paypalme/tamius">Donate on Paypal</a>
|
||||
</p>
|
||||
<h2>Fun stuff</h2>
|
||||
<p>
|
||||
This is probably a bad idea but—
|
||||
</p>
|
||||
<p>
|
||||
Are you attending Isle of Wonders on Cres, Croatia, between 28. 6. and 30. 6.? So am I, by official duty.
|
||||
</p>
|
||||
<p>
|
||||
Club Amulet D20 is forecasted to have a stand there, and I am forecasted to be in the general vicinity of it (barring any unexpected circumstances). I'll be either taking photos, painting minis, or doing heatstroke any% in rather rudamentary costume.
|
||||
</p>
|
||||
<p>
|
||||
If you're there, you can swing around to say 'hi' or provide some validation, or paint some minis. Rumor has it Conquest will have paint&take event.
|
||||
</p>
|
||||
<p>
|
||||
— Tamius
|
||||
</p>
|
||||
<p>
|
||||
</p>
|
||||
<p>
|
||||
<small>I am not paid to shill this.</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BrowserDetect from '../../../ext/conf/BrowserDetect';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BrowserDetect,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// reminder — webextension-polyfill doesn't seem to work in vue!
|
||||
addonVersion: BrowserDetect.firefox ? chrome.runtime.getManifest().version : chrome.runtime.getManifest().version,
|
||||
addonSource: BrowserDetect.processEnvVersion,
|
||||
mailtoLink: '',
|
||||
redditLink: '',
|
||||
showEasterEgg: false,
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
const messageTemplate = encodeURIComponent(
|
||||
`Describe your issue in more detail. In case of misaligned videos, please provide screenshots. When reporting\
|
||||
issues with autodetection not detecting aspect ratio correctly, please provide a link with timestamp to the\
|
||||
problematic video at the time where the problem happens. You may delete this paragraph, as it's only a template.
|
||||
|
||||
|
||||
Extension info (AUTOGENERATED — DO NOT CHANGE OR REMOVE):
|
||||
* Build: ${BrowserDetect.processEnvBrowser}-${this.addonVersion}-stable
|
||||
|
||||
Browser-related stuff (please ensure this section is correct):
|
||||
* User Agent string: ${window.navigator.userAgent}
|
||||
* vendor: ${window.navigator.vendor}
|
||||
* Operating system: ${window.navigator.platform}
|
||||
`
|
||||
);
|
||||
this.mailtoLink = `mailto:tamius.han@gmail.com?subject=%5BUltrawidify%5D%20ENTER%20SUMMARY%20OF%20YOUR%20ISSUE%20HERE&body=${messageTemplate}`;
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
p, li {
|
||||
font-size: 1rem;
|
||||
}
|
||||
small {
|
||||
opacity: 0.5;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
a {
|
||||
color: #fa6;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.donate {
|
||||
margin: 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.25rem;
|
||||
background-color: #fa6;
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
185
src/csui/src/PlayerUiPanels/AlignmentOptionsControlComponent.vue
Normal file
185
src/csui/src/PlayerUiPanels/AlignmentOptionsControlComponent.vue
Normal file
@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div class="alignment-box">
|
||||
<div class="row">
|
||||
<div
|
||||
class="col top left"
|
||||
@click="align(VideoAlignment.Left, VideoAlignment.Top)"
|
||||
>
|
||||
<div class="alignment-ui"></div>
|
||||
</div>
|
||||
<div
|
||||
class="col top center"
|
||||
@click="align(VideoAlignment.Center, VideoAlignment.Top)"
|
||||
>
|
||||
<div class="alignment-ui"></div>
|
||||
</div>
|
||||
<div
|
||||
class="col top right"
|
||||
@click="align(VideoAlignment.Right, VideoAlignment.Top)"
|
||||
>
|
||||
<div class="alignment-ui"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="col ycenter left"
|
||||
@click="align(VideoAlignment.Left, VideoAlignment.Center)"
|
||||
>
|
||||
<div class="alignment-ui"></div>
|
||||
</div>
|
||||
<div
|
||||
class="col ycenter center"
|
||||
@click="align(VideoAlignment.Center, VideoAlignment.Center)"
|
||||
>
|
||||
<div class="alignment-ui"></div>
|
||||
</div>
|
||||
<div
|
||||
class="col ycenter right"
|
||||
@click="align(VideoAlignment.Right, VideoAlignment.Center)"
|
||||
>
|
||||
<div class="alignment-ui"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="col bottom left"
|
||||
@click="align(VideoAlignment.Left, VideoAlignment.Bottom)"
|
||||
>
|
||||
<div class="alignment-ui"></div>
|
||||
</div>
|
||||
<div
|
||||
class="col bottom center"
|
||||
@click="align(VideoAlignment.Center, VideoAlignment.Bottom)"
|
||||
>
|
||||
<div class="alignment-ui"></div>
|
||||
</div>
|
||||
<div
|
||||
class="col bottom right"
|
||||
@click="align(VideoAlignment.Right, VideoAlignment.Bottom)"
|
||||
>
|
||||
<div class="alignment-ui"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VideoAlignmentType from '../../../common/enums/VideoAlignmentType.enum';
|
||||
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'eventBus'
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
VideoAlignment: VideoAlignmentType
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
align(alignmentX, alignmentY) {
|
||||
this.eventBus?.sendToTunnel('set-alignment', {x: alignmentX, y: alignmentY})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped module>
|
||||
.alignment-box {
|
||||
aspect-ratio: 1;
|
||||
width: 100%;
|
||||
min-width: 40px;
|
||||
max-width: 80px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.row {
|
||||
flex: 0 0 33%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.col {
|
||||
flex: 0 0 33%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
background-color: rgba(0,0,0,0.25);
|
||||
cursor: pointer;
|
||||
|
||||
margin: 0.125rem;
|
||||
padding: 0.5rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
|
||||
border-bottom: 1px solid transparent;
|
||||
|
||||
.alignment-ui {
|
||||
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
|
||||
border-style: solid;
|
||||
border-width: 0px;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
border-bottom: 1px solid #fa6;
|
||||
|
||||
.alignment-ui {
|
||||
border-color: #fa6 !important;
|
||||
}
|
||||
|
||||
&.center.ycenter {
|
||||
.alignment-ui {
|
||||
background-color: #fa6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.top {
|
||||
align-items: flex-start;
|
||||
|
||||
.alignment-ui {
|
||||
border-top-width: 3px;
|
||||
}
|
||||
}
|
||||
&.bottom {
|
||||
align-items: flex-end;
|
||||
|
||||
.alignment-ui {
|
||||
border-bottom-width: 3px;
|
||||
}
|
||||
}
|
||||
&.left {
|
||||
justify-content: flex-start;
|
||||
|
||||
.alignment-ui {
|
||||
border-left-width: 3px;
|
||||
}
|
||||
}
|
||||
&.right {
|
||||
justify-content: flex-end;
|
||||
|
||||
.alignment-ui {
|
||||
border-right-width: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&.center.ycenter {
|
||||
|
||||
.alignment-ui {
|
||||
width: 25%;
|
||||
height: 25%;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
478
src/csui/src/PlayerUiPanels/AutodetectionSettingsPanel.vue
Normal file
478
src/csui/src/PlayerUiPanels/AutodetectionSettingsPanel.vue
Normal file
@ -0,0 +1,478 @@
|
||||
<template>
|
||||
<div class="flex flex-col tab-root">
|
||||
<div class="flex flex-row flex-wrap">
|
||||
|
||||
<!-- AARD performance metrics -->
|
||||
<div class="sub-panel">
|
||||
<div class="flex flex-row">
|
||||
<h1><mdicon name="television-play" :size="32" /> Automatic Aspect Ratio Detection</h1>
|
||||
</div>
|
||||
<div class="sub-panel-content">
|
||||
<p>
|
||||
<b>Autodetection performance</b>
|
||||
</p>
|
||||
<p>
|
||||
Automatic aspect ratio detection is a resource-hungry feature.
|
||||
This page allows you to trade autodetection accuracy and/or frequency for
|
||||
better performance.
|
||||
</p>
|
||||
<p>
|
||||
Note that some browsers <a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance/now" target="_blank">limit the accuracy of time measurements</a>, though once the bars go past the blue line those limitations are largely inconsequential.
|
||||
</p>
|
||||
<div class="performance-graph-container">
|
||||
<div class="performance-graph">
|
||||
<div class="time-budget hz144"></div>
|
||||
<div class="time-budget hz120"></div>
|
||||
<div class="time-budget hz60"></div>
|
||||
<div class="time-budget hz30"></div>
|
||||
<div class="time-budget hz24"></div>
|
||||
<div class="time-budget rest"></div>
|
||||
|
||||
<div class="bar-container">
|
||||
<div class="average-case">
|
||||
<div class="stats">
|
||||
<b>Average: </b>
|
||||
<span class="draw">draw (main) {{(performanceData?.imageDraw?.averageTime ?? 0).toFixed(1)}} ms</span> |
|
||||
<span class="draw-blackframe">blackframe {{(performanceData?.blackFrame?.averageTime ?? 0).toFixed(1)}} ms</span> |
|
||||
<span class="processing">
|
||||
processing {{
|
||||
Math.max(
|
||||
(performanceData?.total?.averageTime ?? 0)
|
||||
- (performanceData?.imageDraw?.averageTime ?? 0)
|
||||
- (performanceData?.blackFrame?.averageTime ?? 0),
|
||||
0
|
||||
).toFixed(1)
|
||||
}} ms
|
||||
</span>
|
||||
</div>
|
||||
<div class="bar">
|
||||
<div
|
||||
class="draw"
|
||||
:style="{'width': (performanceData?.imageDraw?.averageTime ?? 0) + '%'}"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="draw-blackframe"
|
||||
:style="{'width': (performanceData?.blackFrame?.averageTime ?? 0) + '%'}"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="processing"
|
||||
:style="{
|
||||
'width': Math.max(
|
||||
(performanceData?.total?.averageTime ?? 0)
|
||||
- (performanceData?.imageDraw?.averageTime ?? 0)
|
||||
- (performanceData?.blackFrame?.averageTime ?? 0),
|
||||
0
|
||||
) + '%'
|
||||
}"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="worst-case">
|
||||
<div class="stats">
|
||||
<b>Worst: </b>
|
||||
<span class="draw">draw (main) {{(performanceData?.imageDraw?.worstTime ?? 0).toFixed(1)}} ms</span> |
|
||||
<span class="draw-blackframe">blackframe {{(performanceData?.blackFrame?.worstTime ?? 0).toFixed(1)}} ms</span> |
|
||||
<span class="processing">
|
||||
processing {{
|
||||
Math.max(
|
||||
(performanceData?.total?.worstTime ?? 0)
|
||||
- (performanceData?.imageDraw?.worstTime ?? 0)
|
||||
- (performanceData?.blackFrame?.worstTime ?? 0),
|
||||
0
|
||||
).toFixed(1)
|
||||
}} ms
|
||||
</span>
|
||||
</div>
|
||||
<div class="bar">
|
||||
<div
|
||||
class="draw"
|
||||
:style="{'width': (performanceData?.imageDraw?.worstTime ?? 0) + '%'}"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="draw-blackframe"
|
||||
:style="{'width': (performanceData?.blackFrame?.worstTime ?? 0) + '%'}"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="processing"
|
||||
:style="{
|
||||
'width': Math.max(
|
||||
(performanceData?.total?.worstTime ?? 0)
|
||||
- (performanceData?.imageDraw?.worstTime ?? 0)
|
||||
- (performanceData?.blackFrame?.worstTime ?? 0),
|
||||
0
|
||||
) + '%'
|
||||
}"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="average-case">
|
||||
<div class="stats">
|
||||
<b>AR change (average): </b>
|
||||
<span class="draw">draw (main) {{(performanceData?.imageDraw?.averageTime ?? 0).toFixed(1)}} ms</span> |
|
||||
<span class="draw-blackframe">blackframe {{(performanceData?.blackFrame?.averageTime ?? 0).toFixed(1)}} ms</span> |
|
||||
<span class="processing">processing {{
|
||||
(
|
||||
(performanceData?.fastLetterbox?.averageTime ?? 0)
|
||||
+ (performanceData?.edgeDetect?.averageTime ?? 0)
|
||||
).toFixed(1)
|
||||
}} ms</span>
|
||||
</div>
|
||||
<div class="bar">
|
||||
<div
|
||||
class="draw"
|
||||
:style="{'width': (performanceData?.imageDraw?.averageTime ?? 0) + '%'}"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="draw-blackframe"
|
||||
:style="{'width': (performanceData?.blackFrame?.averageTime ?? 0) + '%'}"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="processing"
|
||||
:style="{
|
||||
'width': (
|
||||
(performanceData?.fastLetterbox?.averageTime ?? 0)
|
||||
+ (performanceData?.edgeDetect?.averageTime ?? 0)
|
||||
) + '%'
|
||||
}"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="worst-case">
|
||||
<div class="stats">
|
||||
<b>AR change (worst): </b>
|
||||
<span class="draw">draw (main) {{(performanceData?.imageDraw?.worstTime ?? 0).toFixed(1)}} ms</span> |
|
||||
<span class="draw-blackframe">blackframe {{(performanceData?.blackFrame?.worstTime ?? 0).toFixed(1)}} ms</span> |
|
||||
<span class="processing">processing {{
|
||||
(
|
||||
(performanceData?.fastLetterbox?.worstTime ?? 0)
|
||||
+ (performanceData?.edgeDetect?.worstTime ?? 0)
|
||||
).toFixed(1)
|
||||
}} ms</span>
|
||||
</div>
|
||||
<div class="bar">
|
||||
<div
|
||||
class="draw"
|
||||
:style="{'width': (performanceData?.imageDraw?.worstTime ?? 0) + '%'}"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="draw-blackframe"
|
||||
:style="{'width': (performanceData?.blackFrame?.worstTime ?? 0) + '%'}"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="processing"
|
||||
:style="{
|
||||
'width': (
|
||||
(performanceData?.fastLetterbox?.worstTime ?? 0)
|
||||
+ (performanceData?.edgeDetect?.worstTime ?? 0)
|
||||
) + '%'
|
||||
}"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-segment">
|
||||
<h2>Basic settings</h2>
|
||||
|
||||
<div class="option">
|
||||
<div class="name">
|
||||
Autodetection frequency
|
||||
</div>
|
||||
<div class="description">
|
||||
Shorter intervals (left side of the slider) are more responsive to changes in aspect ratio detections,
|
||||
but requires more system resources.
|
||||
</div>
|
||||
<div class="indent">
|
||||
<div class="flex flex-row row-padding">
|
||||
<div class="flex flex-input">
|
||||
More often <small>(~60/s)</small>
|
||||
<input type="range"
|
||||
:value="Math.log(settings.active.arDetect.timers.playing)"
|
||||
@change="setArCheckFrequency($event.target.value)"
|
||||
min="2.3"
|
||||
max="9.3"
|
||||
step="any"
|
||||
/>
|
||||
Less often <small>(~1/10s)</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option">
|
||||
<div class="name">
|
||||
Autodetection sensitivity
|
||||
</div>
|
||||
<div class="description">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="label">Maximum allowed vertical video misalignment:</div>
|
||||
<div class="input">
|
||||
<input v-model="settings.active.arDetect.allowedMisaligned" />
|
||||
</div>
|
||||
<div class="description">
|
||||
Ultrawidify detects letterbox only if video is vertically centered. Some people are bad at vertically
|
||||
centering the content, though. This is how off-center the video can be before autodetection will
|
||||
refuse to crop it.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option">
|
||||
<div class="name">Video sample size</div>
|
||||
<div class="input">
|
||||
<input v-model="settings.active.arDetect.canvasDimensions.sampleCanvas.width" /> x <input v-model="settings.active.arDetect.canvasDimensions.sampleCanvas.height" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="label">Sample columns:</div>
|
||||
<div class="input"><input v-model="settings.active.arDetect.sampling.staticCols" /></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="label">Sample rows:</div>
|
||||
<div class="input"><input v-model="settings.active.arDetect.sampling.staticRows" /></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Button from '../components/Button.vue'
|
||||
import KeyboardShortcutParser from '../../../common/js/KeyboardShortcutParser';
|
||||
import ShortcutButton from '../components/ShortcutButton';
|
||||
import EditShortcutButton from '../components/EditShortcutButton';
|
||||
import BrowserDetect from '../../../ext/conf/BrowserDetect';
|
||||
import AspectRatioType from '../../../common/enums/AspectRatioType.enum';
|
||||
import StretchType from '../../../common/enums/StretchType.enum';
|
||||
import CropModePersistence from '../../../common/enums/CropModePersistence.enum';
|
||||
import AlignmentOptionsControlComponent from './AlignmentOptionsControlComponent.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
exec: null,
|
||||
performanceData: {},
|
||||
graphRefreshInterval: undefined,
|
||||
}
|
||||
},
|
||||
mixins: [
|
||||
],
|
||||
props: [
|
||||
'settings',
|
||||
'frame',
|
||||
'eventBus',
|
||||
'site'
|
||||
],
|
||||
created() {
|
||||
this.eventBus.subscribe('uw-config-broadcast', {function: (config) => this.handleConfigBroadcast(config)});
|
||||
},
|
||||
mounted() {
|
||||
this.eventBus.sendToTunnel('get-aard-timing');
|
||||
this.graphRefreshInterval = setInterval(() => this.eventBus.sendToTunnel('get-aard-timing'), 500);
|
||||
},
|
||||
destroyed() {
|
||||
clearInterval(this.graphRefreshInterval);
|
||||
},
|
||||
components: {
|
||||
ShortcutButton,
|
||||
EditShortcutButton,
|
||||
Button,
|
||||
AlignmentOptionsControlComponent
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
methods: {
|
||||
async openOptionsPage() {
|
||||
BrowserDetect.runtime.openOptionsPage();
|
||||
},
|
||||
refreshGraph() {
|
||||
this.eventBus.sendToTunnel('get-aard-timing');
|
||||
},
|
||||
handleConfigBroadcast(data) {
|
||||
if (data.type === 'aard-performance-data') {
|
||||
this.performanceData = data.performanceData;
|
||||
this.$nextTick( () => this.$forceUpdate() );
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" src="../../res/css/flex.scss" scoped module></style>
|
||||
<style lang="scss" src="../res-common/panels.scss" scoped module></style>
|
||||
<style lang="scss" src="../res-common/common.scss" scoped module></style>
|
||||
|
||||
<style lang="scss" scoped module>
|
||||
@import '../res-common/variables';
|
||||
|
||||
.performance-graph-container {
|
||||
position: relative;
|
||||
|
||||
width: 100%;
|
||||
height: 8rem;
|
||||
padding: 1rem;
|
||||
|
||||
.performance-graph {
|
||||
border: 1px solid #fa6;
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
// graph is 100 ms wide
|
||||
.time-budget {
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
z-index: 100;
|
||||
|
||||
&.hz144 {
|
||||
width: 6.9%;
|
||||
// background-color: rgba(143, 143, 235, 0.47);
|
||||
}
|
||||
&.hz120 {
|
||||
width: 1.39%;
|
||||
// background-color: rgba(108, 108, 211, 0.441);
|
||||
}
|
||||
&.hz60 {
|
||||
width: 8.33%;
|
||||
// background-color: rgba(78, 78, 182, 0.327);
|
||||
border-right: 2px solid rgb(96, 96, 227);
|
||||
&::after {
|
||||
content: '60fps';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -2px;
|
||||
|
||||
border-right: 2px solid rgb(96, 96, 227);
|
||||
|
||||
transform: translateY(-100%);
|
||||
|
||||
font-size: 0.6rem;
|
||||
padding-right: 0.25rem;
|
||||
text-transform: small-caps;
|
||||
}
|
||||
}
|
||||
&.hz30 {
|
||||
width: 16.67%;
|
||||
// background-color: rgba(56, 56, 151, 0.308);
|
||||
border-right: 2px solid #fb772a;
|
||||
|
||||
&::after {
|
||||
content: '30fps';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -2px;
|
||||
|
||||
border-right: 2px solid #fb772a;
|
||||
|
||||
transform: translateY(-100%);
|
||||
|
||||
font-size: 0.6rem;
|
||||
padding-right: 0.25rem;
|
||||
text-transform: small-caps;
|
||||
}
|
||||
}
|
||||
&.hz24 {
|
||||
width: 8.33%;
|
||||
// background-color: rgba(37, 37, 118, 0.269);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.bar-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
|
||||
> div {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.stats {
|
||||
background-color: rgba(0, 0, 0, 0.544);
|
||||
font-size: 0.75rem;
|
||||
font-family: 'Overpass Mono';
|
||||
z-index: 11010;
|
||||
|
||||
span {
|
||||
font-size: 0.75rem;
|
||||
z-index: 11011;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
margin-top: 0.25rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
&.draw::before {
|
||||
background-color: #fb772a;
|
||||
}
|
||||
&.draw-blackframe::before {
|
||||
background-color: #e70c0c;
|
||||
}
|
||||
&.processing::before {
|
||||
background-color: rgb(176, 167, 239);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bar {
|
||||
width: 100%;
|
||||
height: 0.69rem;
|
||||
background-color: #000;
|
||||
|
||||
overflow: hidden;
|
||||
* {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.draw {
|
||||
background-color: #fb772a;
|
||||
}
|
||||
.draw-blackframe {
|
||||
background-color: #e70c0c;
|
||||
}
|
||||
.processing {
|
||||
background-color: rgb(176, 167, 239);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
105
src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
Normal file
105
src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
Normal file
@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="flex flex-col w-100">
|
||||
|
||||
<!-- TAB ROW -->
|
||||
<div class="flex flex-row">
|
||||
<div
|
||||
class="tab"
|
||||
:class="{'active': tab === 'siteSettings'}"
|
||||
@click="setTab('siteSettings')"
|
||||
>
|
||||
Settings for current site<br/>
|
||||
<small>{{ site }}</small>
|
||||
</div>
|
||||
<div
|
||||
class="tab"
|
||||
:class="{'active': tab === 'extensionSettings'}"
|
||||
@click="setTab(tab = 'extensionSettings')"
|
||||
>
|
||||
Default settings for extension
|
||||
</div>
|
||||
<div
|
||||
class="tab"
|
||||
:class="{'active': tab === 'otherSites'}"
|
||||
@click="setTab(tab = 'otherSites')"
|
||||
>
|
||||
Settings for other sites
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="tab === 'siteSettings' && siteSettings">
|
||||
<!-- <div class="button">
|
||||
Reset settings for site
|
||||
</div> -->
|
||||
<SiteExtensionSettings
|
||||
v-if="settings"
|
||||
:settings="settings"
|
||||
:siteSettings="siteSettings"
|
||||
:isDefaultConfiguration="false"
|
||||
></SiteExtensionSettings>
|
||||
</template>
|
||||
|
||||
<template v-if="tab === 'extensionSettings' && globalSettings">
|
||||
<SiteExtensionSettings
|
||||
v-if="settings"
|
||||
:settings="settings"
|
||||
:siteSettings="globalSettings"
|
||||
:isDefaultConfiguration="true"
|
||||
></SiteExtensionSettings>
|
||||
</template>
|
||||
|
||||
<template v-if="tab === 'otherSites'">
|
||||
<OtherSiteSettings
|
||||
v-if="settings"
|
||||
:settings="settings"
|
||||
>
|
||||
</OtherSiteSettings>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SiteExtensionSettings from './PanelComponents/ExtensionSettings/SiteExtensionSettings.vue';
|
||||
import OtherSiteSettings from './PanelComponents/ExtensionSettings/OtherSiteSettings.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tab: 'siteSettings'
|
||||
}
|
||||
},
|
||||
mixins: [
|
||||
|
||||
],
|
||||
props: [
|
||||
'settings',
|
||||
'site',
|
||||
],
|
||||
components: {
|
||||
SiteExtensionSettings,
|
||||
OtherSiteSettings
|
||||
},
|
||||
computed: {
|
||||
globalSettings() {
|
||||
return this.settings?.getSiteSettings('@global') ?? null;
|
||||
},
|
||||
siteSettings() {
|
||||
if (this.site) {
|
||||
return this.settings?.getSiteSettings(this.site) ?? null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setTab(tab) {
|
||||
this.tab = tab;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" src="../../res/css/flex.scss" scoped module></style>
|
||||
<style lang="scss" src="../res-common/panels.scss" scoped module></style>
|
||||
<style lang="scss" src="../res-common/common.scss" scoped module></style>
|
||||
142
src/csui/src/PlayerUiPanels/ChangelogPanel.vue
Normal file
142
src/csui/src/PlayerUiPanels/ChangelogPanel.vue
Normal file
@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div class="flex flex-col w-full h-full gap-2">
|
||||
<div class="flex flex-row gap-2 bg-black">
|
||||
<div class="w-[1/2]" style="width: 50%">
|
||||
<h1>What's new</h1>
|
||||
<p>Full changelog for older versions <a href="https://github.com/tamius-han/ultrawidify/blob/master/CHANGELOG.md">is available here</a>.</p>
|
||||
|
||||
<h2>6.0.0</h2>
|
||||
<p>
|
||||
I don't think I need to write a changelog for this one. I've also been working on this, on and (mostly) off, for ... a long time, so I might have "kinda forgot" some minor things.
|
||||
</p>
|
||||
<ul>
|
||||
<li><b>Manifest v3</b>. Bit late, but still.</li>
|
||||
<li>
|
||||
<b>In-player UI.</b><br/>
|
||||
This one took major effort to pull off. Required some changes under the hood, required me to de-spaghettify some code. The UI will only show
|
||||
if the video takes up sufficient amount of space (currently determined as 960 pixels wide).
|
||||
</li>
|
||||
<li>
|
||||
<b>New alignment options.</b> Video can be aligned vertically as well as horizontally.
|
||||
</li>
|
||||
<!-- <li>
|
||||
By default, Ultrawidify will not kick in on "small videos". You have to be either in full screen or theater mode. Ultrawidify assumes that any
|
||||
video that takes up more than 85% of the window width is being viewed in theater mode. This value may be tweaked later on. This feature can be
|
||||
configured (or turned off entirely) via 'Advanced options' menu on the in-player UI.
|
||||
</li> -->
|
||||
<li>
|
||||
The in-player extension UI will do a better job differentiating between the various level of support: "official" for the sites that Tam can check
|
||||
on his own, "fingers crossed" for sites that Tam can't check because my load-bearing credit card can't support the weight of a dozen subscription
|
||||
services, and "community support" for sites that enjoy support through the helping hand of people willing to help.
|
||||
</li>
|
||||
<li>
|
||||
The in-player UI should now display a warning whenever Ultrawidify detects automatic aspect ratio detection isn't happening because the site uses DRM.
|
||||
</li>
|
||||
<!-- <li>
|
||||
Better zooming. The slider is back, baby.
|
||||
</li> -->
|
||||
<!-- <li>
|
||||
Panning option that's a bit more intuitive.
|
||||
</li> -->
|
||||
</ul>
|
||||
<h3>Unbaked features</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<b>Player UI settings</b>. Ultrawidify doesn't always correctly identify which area the video should fill, especially when not in full screen mode.
|
||||
Version 6.0.0 was intended to come with UI that makes it easier for you to "help" ultrawidify by identifying the correct player element. Alas, I was
|
||||
busier than expected and manifest v3 deadline came faster than expected.
|
||||
</li>
|
||||
<li>
|
||||
<b>Disabling Ultrawidify UI trigger zone, or otherwise changing target area size and position, is not possible</b>.
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Regressions</h3>
|
||||
<ul>
|
||||
<li>
|
||||
Due to major changes under the hood, custom settings from older versions were NOT been migrated (probably).
|
||||
</li>
|
||||
<li>
|
||||
It is unclear how extension acts on sites with more than one video.
|
||||
</li>
|
||||
<li>
|
||||
Extension lost the ability to discriminate between iframes. Actions taken through the popup will be affect <b>all</b> iframes.
|
||||
</li>
|
||||
<li>
|
||||
Hope the UI is worth the regressions, because getting UI to work has been a MAJOR pain in the ass.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="w-[1/2]" style="width: 50%; padding-left: 1rem; padding-top: 5rem;">
|
||||
<h2>Thank you monies</h2>
|
||||
<p>
|
||||
If you think I deserve money for the work I did up to this point, you can bankroll my caffeine addiction.
|
||||
</p>
|
||||
<p class="text-center">
|
||||
<a class="donate" href="https://www.paypal.com/paypalme/tamius">Donate on Paypal</a>
|
||||
</p>
|
||||
<h2>Fun stuff</h2>
|
||||
<p>
|
||||
This is probably a bad idea but—
|
||||
</p>
|
||||
<p>
|
||||
Are you attending Isle of Wonders on Cres, Croatia, between 28. 6. and 30. 6.? So am I, by official duty.
|
||||
</p>
|
||||
<p>
|
||||
Club Amulet D20 is forecasted to have a stand there, and I am forecasted to be in the general vicinity of it (barring any unexpected circumstances). I'll be either taking photos, painting minis, or doing heatstroke any% in rather rudamentary costume.
|
||||
</p>
|
||||
<p>
|
||||
If you're there, you can swing around to say 'hi' or provide some validation, or paint some minis. Rumor has it Conquest will have paint&take event.
|
||||
</p>
|
||||
<p>
|
||||
— Tamius
|
||||
</p>
|
||||
<p>
|
||||
</p>
|
||||
<p>
|
||||
<small>I am not paid to shill this.</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default({
|
||||
props: [
|
||||
'settings'
|
||||
],
|
||||
mounted() {
|
||||
this.settings.active.whatsNewChecked = true;
|
||||
this.settings.save();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
p, li {
|
||||
font-size: 1rem;
|
||||
}
|
||||
small {
|
||||
opacity: 0.5;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
a {
|
||||
color: #fa6;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.donate {
|
||||
margin: 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.25rem;
|
||||
background-color: #fa6;
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
126
src/csui/src/PlayerUiPanels/DebugPanel.vue
Normal file
126
src/csui/src/PlayerUiPanels/DebugPanel.vue
Normal file
@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<div>
|
||||
<h1>{{loggerPanel.title}}<small><br/>{{loggerPanel.subtitle}}</small></h1>
|
||||
|
||||
<div>Logger configuration:</div>
|
||||
|
||||
<template v-if="loggerPanel.pasteConfMode">
|
||||
|
||||
</template>
|
||||
<template v-else>
|
||||
<JsonObject
|
||||
label="logger-settings"
|
||||
:value="currentSettings"
|
||||
:ignoreKeys="{'allowLogging': false}"
|
||||
@change="updateSettingsUi"
|
||||
></JsonObject>
|
||||
</template>
|
||||
|
||||
<div class="flex flex-row flex-end">
|
||||
<div class="button" @click="restoreLoggerSettings()">
|
||||
Revert
|
||||
</div>
|
||||
<div class="button button-primary" @click="saveLoggerSettings()">
|
||||
Save
|
||||
</div>
|
||||
<div class="button button-primary" @click="startLogging()">
|
||||
Save and start logging
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JsonObject from '../components/JsonEditor/JsonObject.vue'
|
||||
import Logger, { baseLoggingOptions } from '../../../ext/lib/Logger';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
JsonObject
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loggerPanelRotation: [{
|
||||
title: 'DEFORESTATOR 5000',
|
||||
subtitle: 'Iron Legion\'s finest logging tool'
|
||||
},{
|
||||
title: 'Astinus',
|
||||
subtitle: 'Ultrawidify logging tool'
|
||||
}, {
|
||||
title: 'Tracer',
|
||||
subtitle: "Maybe I'll be Tracer — I'm already printing stack traces."
|
||||
}, {
|
||||
title: 'Grûmsh',
|
||||
subtitle: "He who watches (all the things printed to the console)."
|
||||
}, {
|
||||
title: 'Situation Room/The Council',
|
||||
subtitle: 'We will always be watching.'
|
||||
}, {
|
||||
title: 'Isengard Land Management Services',
|
||||
subtitle: "#log4saruman"
|
||||
}, {
|
||||
title: 'Saw Hero',
|
||||
subtitle: 'Ultrawidify logging tool'
|
||||
}],
|
||||
|
||||
loggerPanel: {
|
||||
title: 'whoopsie daisy',
|
||||
subtitle: 'you broke the header choosing script',
|
||||
pasteConfMode: false,
|
||||
},
|
||||
lastSettings: undefined,
|
||||
parsedSettings: undefined,
|
||||
currentSettings: undefined
|
||||
};
|
||||
},
|
||||
props: [
|
||||
'settings',
|
||||
'eventBus',
|
||||
'site'
|
||||
],
|
||||
created() {
|
||||
this.loggerPanel = {
|
||||
...this.loggerPanelRotation[Math.floor(Math.random() * this.loggerPanelRotation.length)],
|
||||
pasteConfMode: false,
|
||||
};
|
||||
this.loadDefaultConfig();
|
||||
},
|
||||
methods: {
|
||||
loadDefaultConfig() {
|
||||
this.lastSettings = baseLoggingOptions;
|
||||
this.parsedSettings = JSON.stringify(this.lastSettings, null, 2) || '';
|
||||
this.currentSettings = JSON.parse(JSON.stringify(this.lastSettings));
|
||||
},
|
||||
async getLoggerSettings() {
|
||||
this.lastSettings = await Logger.getConfig() || baseLoggingOptions;
|
||||
this.parsedSettings = JSON.stringify(this.lastSettings, null, 2) || '';
|
||||
this.currentSettings = JSON.parse(JSON.stringify(this.lastSettings));
|
||||
},
|
||||
updateSettingsUi(val) {
|
||||
try {
|
||||
this.parsedSettings = JSON.stringify(val, null, 2);
|
||||
this.lastSettings = val;
|
||||
this.currentSettings = JSON.parse(JSON.stringify(this.lastSettings));
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
},
|
||||
saveLoggerSettings() {
|
||||
Logger.saveConfig({...this.lastSettings});
|
||||
},
|
||||
restoreLoggerSettings() {
|
||||
this.getLoggerSettings();
|
||||
this.confHasError = false;
|
||||
},
|
||||
async startLogging(){
|
||||
this.logStringified = undefined;
|
||||
await Logger.saveConfig({...this.lastSettings, allowLogging: true});
|
||||
window.location.reload();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
34
src/csui/src/PlayerUiPanels/InPlayerUiAdvertisement.vue
Normal file
34
src/csui/src/PlayerUiPanels/InPlayerUiAdvertisement.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>In-player UI</h1>
|
||||
<div
|
||||
class="button b3"
|
||||
style="margin: 16px; padding: 4px;"
|
||||
@click="showInPlayerUi()"
|
||||
>
|
||||
Show in-player UI
|
||||
</div>
|
||||
<p></p>
|
||||
<p></p>
|
||||
<p>In-player UI should show and hide automatically as you start or stop moving your mouse inside the player window.</p>
|
||||
<p>Note that by default, in-player UI may not show if player window is not big enough.</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UIProbeMixin from '../utils/UIProbeMixin';
|
||||
|
||||
export default {
|
||||
mixins: [
|
||||
UIProbeMixin
|
||||
],
|
||||
props: [
|
||||
'eventBus',
|
||||
],
|
||||
methods: {
|
||||
showInPlayerUi() {
|
||||
this.eventBus.send('uw-set-ui-state', {globalUiVisible: true}, {comms: {forwardTo: 'active'}});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div class="">
|
||||
<template v-if="!selectedSite">
|
||||
<div style="margin-top: 1rem; margin-bottom: 1rem;">
|
||||
<b>NOTE:</b> Sites not on this list use default extension settings.
|
||||
</div>
|
||||
<div v-for="site of sites" :key="site.key" @click="selectedSite = site.key" class="flex flex-col container pointer" style="margin-top: 4px; padding: 0.5rem 1rem;">
|
||||
<div class="flex flex-row">
|
||||
<div class="flex-grow pointer">
|
||||
<b>{{ site.key }}</b>
|
||||
<span :style="getSiteTypeColor(site.type)">
|
||||
(config: {{site.type ?? 'unknown'}})
|
||||
</span></div>
|
||||
<div>Edit</div>
|
||||
</div>
|
||||
<div class="flex flex-row">
|
||||
<small>
|
||||
Enabled: <span :style="getSiteEnabledColor(site.key, 'enable')"><small>{{ getSiteEnabledModes(site.key, 'enable') }}</small></span>;
|
||||
Aard <span :style="getSiteEnabledColor(site.key, 'enableAard')"><small>{{ getSiteEnabledModes(site.key, 'enableAard') }}</small></span>;
|
||||
kbd: <span :style="getSiteEnabledColor(site.key, 'enableKeyboard')"><small>{{ getSiteEnabledModes(site.key, 'enableKeyboard') }}</small></span>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="selectedSite">
|
||||
<div class="flex flex-row container" style="align-items: center; color: #dedede; margin-top: 1rem;">
|
||||
<div @click="selectedSite = null" class="pointer button-hover" style=" font-size: 2em; padding: 0.5rem; margin-right: 1em;">
|
||||
←
|
||||
</div>
|
||||
<div>
|
||||
Editing {{ selectedSite }}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<SiteExtensionSettings
|
||||
v-if="selectedSiteSettings"
|
||||
:settings="settings"
|
||||
:siteSettings="selectedSiteSettings"
|
||||
:isDefaultConfiguration="false"
|
||||
></SiteExtensionSettings>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ExtensionMode from '../../../../../common/enums/ExtensionMode.enum';
|
||||
import SiteExtensionSettings from './SiteExtensionSettings.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedSite: null,
|
||||
}
|
||||
},
|
||||
props: [
|
||||
'settings',
|
||||
],
|
||||
components: {
|
||||
SiteExtensionSettings,
|
||||
},
|
||||
computed: {
|
||||
sites() {
|
||||
if (!this.settings?.active?.sites) {
|
||||
return [];
|
||||
} else {
|
||||
const sites = [];
|
||||
for (const siteKey in this.settings.active.sites) {
|
||||
if (!siteKey.startsWith('@')) {
|
||||
sites.push({
|
||||
key: siteKey,
|
||||
...this.settings.active.sites[siteKey]
|
||||
})
|
||||
}
|
||||
};
|
||||
sites.sort((a, b) => {
|
||||
const cmpa = a.key.replace('www.', '');
|
||||
const cmpb = b.key.replace('www.', '');
|
||||
|
||||
return cmpa < cmpb ? -1 : 1;
|
||||
});
|
||||
return sites;
|
||||
}
|
||||
},
|
||||
selectedSiteSettings() {
|
||||
return this.settings?.getSiteSettings(this.selectedSite) ?? null;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getSiteTypeColor(siteType) {
|
||||
switch (siteType) {
|
||||
case 'official': return 'color: #fa6';
|
||||
case 'community': return 'color: rgb(114, 114, 218)';
|
||||
case 'officially-disabled': return 'color: #f00';
|
||||
case 'testing': return 'color: #d81';
|
||||
default: return 'color: rgb(138, 65, 126)'
|
||||
};
|
||||
},
|
||||
getSiteEnabledColor(site, component) {
|
||||
const status = this.getSiteEnabledModes(site, component);
|
||||
|
||||
return status === 'disabled' ? 'color: #f00' : 'color: #1f8';
|
||||
},
|
||||
getSiteEnabledModes(site, component) {
|
||||
if (this.settings?.getSiteSettings(site).data[component]?.normal === ExtensionMode.Enabled) {
|
||||
return 'always';
|
||||
}
|
||||
if (this.settings?.getSiteSettings(site).data[component]?.theater === ExtensionMode.Enabled) {
|
||||
return 'T + FS';
|
||||
}
|
||||
if (this.settings?.getSiteSettings(site).data[component]?.fullscreen === ExtensionMode.Enabled) {
|
||||
return 'fullscreen';
|
||||
}
|
||||
return 'disabled';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" src="../../../../res/css/flex.scss" scoped></style>
|
||||
<style lang="scss" src="../../../res-common/panels.scss" scoped></style>
|
||||
<style lang="scss" src="../../../res-common/common.scss" scoped></style>
|
||||
@ -0,0 +1,456 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Enable extension -->
|
||||
<div class="field">
|
||||
<div class="label">
|
||||
Enable extension under the following conditions:
|
||||
</div>
|
||||
<div class="select">
|
||||
<select
|
||||
v-model="simpleExtensionSettings.enable"
|
||||
@click="setExtensionMode('enable', $event)"
|
||||
>
|
||||
<option
|
||||
v-if="simpleExtensionSettings.enable === 'complex'"
|
||||
value="complex"
|
||||
>
|
||||
(Site uses advanced settings)
|
||||
</option>
|
||||
<template v-if="isDefaultConfiguration">
|
||||
<option value="disabled">
|
||||
Disabled (unless enabled for specific site)
|
||||
</option>
|
||||
</template>
|
||||
<template v-else>
|
||||
<option value="default">
|
||||
Use default ()
|
||||
</option>
|
||||
<option value="disabled">
|
||||
Never
|
||||
</option>
|
||||
</template>
|
||||
<option value="fs">
|
||||
Fullscreen only
|
||||
</option>
|
||||
<option value="theater">
|
||||
Fullscreen and theater mode
|
||||
</option>
|
||||
<option value="enabled">
|
||||
Always
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Enable AARD -->
|
||||
<div class="field">
|
||||
<div class="label">
|
||||
Enable automatic aspect ratio detection under the following conditions:
|
||||
</div>
|
||||
<div class="select">
|
||||
<select
|
||||
v-model="simpleExtensionSettings.enableAard"
|
||||
@click="setExtensionMode('enableAard', $event)"
|
||||
>
|
||||
<option
|
||||
v-if="simpleExtensionSettings.enable === 'complex'"
|
||||
value="complex"
|
||||
>
|
||||
(Site uses advanced settings)
|
||||
</option>
|
||||
<template v-if="isDefaultConfiguration">
|
||||
<option value="disabled">
|
||||
Disabled (unless enabled for specific site)
|
||||
</option>
|
||||
</template>
|
||||
<template v-else>
|
||||
<option value="default">
|
||||
Use default ()
|
||||
</option>
|
||||
<option value="disabled">
|
||||
Never
|
||||
</option>
|
||||
</template>
|
||||
<option value="fs">
|
||||
Fullscreen only
|
||||
</option>
|
||||
<option value="theater">
|
||||
Fullscreen and theater mode
|
||||
</option>
|
||||
<option value="enabled">
|
||||
Always
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Enable keyboard -->
|
||||
<div class="field">
|
||||
<div class="label">
|
||||
Enable keyboard shortcuts under the following conditions
|
||||
</div>
|
||||
<div class="select">
|
||||
<select
|
||||
v-model="simpleExtensionSettings.enableKeyboard"
|
||||
@click="setExtensionMode('enableKeyboard', $event)"
|
||||
>
|
||||
<option
|
||||
v-if="simpleExtensionSettings.enable === 'complex'"
|
||||
value="complex"
|
||||
>
|
||||
(Site uses advanced settings)
|
||||
</option>
|
||||
<template v-if="isDefaultConfiguration">
|
||||
<option value="disabled">
|
||||
Disabled (unless enabled for specific site)
|
||||
</option>
|
||||
</template>
|
||||
<template v-else>
|
||||
<option value="default">
|
||||
Use default ()
|
||||
</option>
|
||||
<option value="disabled">
|
||||
Never
|
||||
</option>
|
||||
</template>
|
||||
<option value="fs">
|
||||
Fullscreen only
|
||||
</option>
|
||||
<option value="theater">
|
||||
Fullscreen and theater mode
|
||||
</option>
|
||||
<option value="enabled">
|
||||
Always
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Default crop -->
|
||||
<div class="field">
|
||||
<div class="label">Default crop:</div>
|
||||
<div class="select">
|
||||
<select
|
||||
v-model="siteDefaultCrop"
|
||||
@click="setOption('defaults.crop', $event)"
|
||||
>
|
||||
<option
|
||||
v-if="!isDefaultConfiguration"
|
||||
:value="undefined"
|
||||
>
|
||||
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 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">
|
||||
<div class="label">Default stretch:</div>
|
||||
<div class="select">
|
||||
<select
|
||||
v-model="siteDefaultStretch"
|
||||
@click="setOption('defaults.stretch', $event)"
|
||||
>
|
||||
<option
|
||||
v-if="!isDefaultConfiguration"
|
||||
:value="undefined"
|
||||
>
|
||||
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"
|
||||
@click="setOption('defaults.alignment', $event)"
|
||||
>
|
||||
<option
|
||||
v-if="!isDefaultConfiguration"
|
||||
:value="undefined"
|
||||
>
|
||||
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 ({{defaultPersistanceLabel}})
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ExtensionMode from '../../../../../common/enums/ExtensionMode.enum';
|
||||
import VideoAlignmentType from '../../../../../common/enums/VideoAlignmentType.enum';
|
||||
import CropModePersistence from './../../../../../common/enums/CropModePersistence.enum';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
CropModePersistence: CropModePersistence,
|
||||
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'),
|
||||
}
|
||||
},
|
||||
siteDefaultCrop() {
|
||||
return this.siteSettings.raw?.defaults?.crop ? JSON.stringify(this.siteSettings.raw?.defaults?.crop) : undefined;
|
||||
},
|
||||
siteDefaultStretch() {
|
||||
return this.siteSettings.raw?.defaults?.stretch ? JSON.stringify(this.siteSettings.raw?.defaults?.stretch) : undefined;
|
||||
},
|
||||
siteDefaultAlignment() {
|
||||
return this.siteSettings.raw?.defaults?.alignment ? JSON.stringify(this.siteSettings.raw?.defaults?.alignment) : undefined;
|
||||
},
|
||||
siteDefaultCropPersistence() {
|
||||
return this.siteSettings.raw?.persistCSA ?? undefined;
|
||||
},
|
||||
defaultPersistanceLabel() {
|
||||
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 '??';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Compiles our extension settings into more user-friendly options
|
||||
*/
|
||||
compileSimpleSettings(component) {
|
||||
try {
|
||||
if (
|
||||
this.siteSettings?.data?.[component]?.normal === ExtensionMode.Disabled
|
||||
&& this.siteSettings?.data?.[component]?.theater === ExtensionMode.Disabled
|
||||
&& this.siteSettings?.data?.[component]?.fullscreen === ExtensionMode.Disabled
|
||||
) {
|
||||
return 'disabled';
|
||||
}
|
||||
if (
|
||||
this.siteSettings?.data?.[component]?.normal === ExtensionMode.Default
|
||||
&& this.siteSettings?.data?.[component]?.theater === ExtensionMode.Default
|
||||
&& this.siteSettings?.data?.[component]?.fullscreen === ExtensionMode.Default
|
||||
) {
|
||||
return 'default';
|
||||
}
|
||||
if (
|
||||
this.siteSettings?.data?.[component]?.normal === ExtensionMode.Disabled
|
||||
&& this.siteSettings?.data?.[component]?.theater === ExtensionMode.Disabled
|
||||
&& this.siteSettings?.data?.[component]?.fullscreen === ExtensionMode.Enabled
|
||||
) {
|
||||
return 'fs';
|
||||
}
|
||||
if (
|
||||
this.siteSettings?.data?.[component]?.normal === ExtensionMode.Disabled
|
||||
&& this.siteSettings?.data?.[component]?.theater === ExtensionMode.Enabled
|
||||
&& this.siteSettings?.data?.[component]?.fullscreen === ExtensionMode.Enabled
|
||||
) {
|
||||
return 'theater';
|
||||
}
|
||||
if (
|
||||
this.siteSettings?.data?.[component]?.normal === ExtensionMode.Enabled
|
||||
&& this.siteSettings?.data?.[component]?.theater === ExtensionMode.Enabled
|
||||
&& this.siteSettings?.data?.[component]?.fullscreen === ExtensionMode.Enabled
|
||||
) {
|
||||
return 'enabled';
|
||||
}
|
||||
|
||||
return 'complex';
|
||||
} catch (e) {
|
||||
return 'loading';
|
||||
}
|
||||
},
|
||||
|
||||
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) {
|
||||
|
||||
},
|
||||
setOption(option, $event) {
|
||||
let commandArguments;
|
||||
|
||||
// if argument is json, parse json. Otherwise, pass the value as-is
|
||||
try {
|
||||
commandArguments = $event.target.value !== undefined ? JSON.parse($event.target.value) : undefined;
|
||||
} catch(e) {
|
||||
commandArguments = $event.target.value;
|
||||
}
|
||||
|
||||
this.siteSettings.set(option, commandArguments);
|
||||
},
|
||||
setExtensionMode(component, event) {
|
||||
const option = event.target.value;
|
||||
|
||||
if (option === 'complex') {
|
||||
return;
|
||||
}
|
||||
|
||||
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="../../../res-common/panels.scss" scoped></style>
|
||||
<style lang="scss" src="../../../res-common/common.scss" scoped></style>
|
||||
<style scoped>
|
||||
.button-hover:hover {
|
||||
color: #fa6;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<!-- <div class="flex flex-row">
|
||||
<mdicon name="crop" :size="32" />
|
||||
<h1>Crop video:</h1>
|
||||
</div> -->
|
||||
<div class="sub-panel-content flex flex-row flex-wrap">
|
||||
<ShortcutButton
|
||||
v-for="(command, index) of settings?.active.commands.crop"
|
||||
class="flex b3 button"
|
||||
:class="{active: editMode ? index === editModeOptions?.crop?.selectedIndex : isActiveCrop(command)}"
|
||||
:key="index"
|
||||
:label="command.label"
|
||||
:shortcut="getKeyboardShortcutLabel(command)"
|
||||
@click="editMode ? editAction(command, index, 'crop') : execAction(command)"
|
||||
>
|
||||
</ShortcutButton>
|
||||
|
||||
<!-- "Add new" button -->
|
||||
<ShortcutButton
|
||||
v-if="editMode"
|
||||
class="button b3"
|
||||
:class="{active: editMode ? editModeOptions?.crop?.selectedIndex === null : isActiveCrop(command)}"
|
||||
label="Add new"
|
||||
@click="editAction(
|
||||
{action: 'set-ar', label: 'New aspect ratio', arguments: {type: AspectRatioType.Fixed}},
|
||||
null,
|
||||
'crop'
|
||||
)"
|
||||
></ShortcutButton>
|
||||
</div>
|
||||
|
||||
<!-- EDIT MODE PANEL -->
|
||||
<div
|
||||
v-if="editMode && !editModeOptions?.crop?.selected"
|
||||
class="sub-panel-content"
|
||||
>
|
||||
<div class="edit-action-area">
|
||||
Click a button to edit
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="editMode && editModeOptions?.crop?.selected" class="sub-panel-content">
|
||||
<div class="edit-action-area-header">
|
||||
<span class="text-primary">Editing options for:</span> <b>{{editModeOptions?.crop?.selected?.label}}</b>
|
||||
<template v-if="editModeOptions?.crop?.selectedIndex === null && editModeOptions?.crop?.selected?.label !== 'New aspect ratio'">(New ratio)</template>
|
||||
</div>
|
||||
<div class="edit-action-area">
|
||||
<!-- Some options are only shown for type 4 (fixed) crops -->
|
||||
<template v-if="editModeOptions?.crop?.selected?.arguments?.type === AspectRatioType.Fixed">
|
||||
<div class="field">
|
||||
<div class="label">
|
||||
Ratio:
|
||||
</div>
|
||||
<div class="input">
|
||||
<!-- We do an ugly in order to avoid spamming functions down at the bottom -->
|
||||
<input
|
||||
v-model="editModeOptions.crop.selected.arguments.ratio"
|
||||
@blur="editModeOptions.crop.selected.label === 'New aspect ratio' ? editModeOptions.crop.selected.label = editModeOptions.crop.selected.arguments.ratio : null"
|
||||
>
|
||||
</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:
|
||||
</div>
|
||||
<div class="input">
|
||||
<input v-model="editModeOptions.crop.selected.label">
|
||||
</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 -->
|
||||
<div class="field">
|
||||
<div class="label">Shortcut:</div>
|
||||
<div class="">
|
||||
<EditShortcutButton
|
||||
:shortcut="editModeOptions?.crop?.selected?.shortcut"
|
||||
@shortcutChanged="updateSelectedShortcut($event, 'crop')"
|
||||
>
|
||||
</EditShortcutButton>
|
||||
</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
|
||||
v-if="editModeOptions?.crop?.selected?.arguments?.type === AspectRatioType.Fixed && editModeOptions?.crop?.selectedIndex !== null"
|
||||
class="button"
|
||||
@click="deleteAction('crop')"
|
||||
>
|
||||
<mdicon name="delete"></mdicon> Delete
|
||||
</div>
|
||||
<div class="flex-grow"></div>
|
||||
<div class="button" @click="cancelEdit('crop')">Cancel</div>
|
||||
<div class="button" @click="saveShortcut('crop')">
|
||||
<mdicon name="floppy"></mdicon>
|
||||
|
||||
<template v-if="editModeOptions?.crop?.selectedIndex === null">Add</template>
|
||||
<template v-else>Save</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="edit-action-area">
|
||||
<div class="field">
|
||||
<div class="label">Default for this site</div>
|
||||
<div class="select">
|
||||
<select
|
||||
:value="siteDefaultCrop"
|
||||
@click="setDefaultCrop($event, 'site')"
|
||||
>
|
||||
<option
|
||||
v-for="(command, index) of settings?.active.commands.crop"
|
||||
:key="index"
|
||||
:value="JSON.stringify(command.arguments)"
|
||||
>
|
||||
{{command.label}}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ShortcutButton from '../../../components/ShortcutButton.vue';
|
||||
import EditShortcutButton from '../../../components/EditShortcutButton';
|
||||
import EditModeMixin from '../../../utils/EditModeMixin';
|
||||
import KeyboardShortcutParserMixin from '../../../utils/KeyboardShortcutParserMixin';
|
||||
import CommsMixin from '../../../utils/CommsMixin';
|
||||
import AspectRatioType from '../../../../../common/enums/AspectRatioType.enum';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
||||
return {
|
||||
AspectRatioType: AspectRatioType,
|
||||
|
||||
// TODO: this should be mixin?
|
||||
resizerConfig: {
|
||||
crop: null,
|
||||
stretch: null,
|
||||
zoom: null,
|
||||
pan: null
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [
|
||||
// ComputeActionsMixin,
|
||||
EditModeMixin,
|
||||
KeyboardShortcutParserMixin,
|
||||
CommsMixin
|
||||
],
|
||||
props: [
|
||||
'settings', // required for buttons and actions, which are global
|
||||
'siteSettings',
|
||||
'eventBus',
|
||||
'isEditing'
|
||||
],
|
||||
components: {
|
||||
ShortcutButton,
|
||||
EditShortcutButton,
|
||||
},
|
||||
computed: {
|
||||
siteDefaultCrop() {
|
||||
return JSON.stringify(
|
||||
this.siteSettings.data.defaults.crop
|
||||
);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
isEditing(newValue, oldValue) {
|
||||
if (newValue) {
|
||||
this.enableEditMode();
|
||||
} else {
|
||||
this.disableEditMode();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Sets default crop, for either site or global
|
||||
*/
|
||||
setDefaultCrop($event, scope) {
|
||||
const commandArguments = JSON.parse($event.target.value);
|
||||
|
||||
this.siteSettings.set('defaults.crop', commandArguments);
|
||||
this.settings.saveWithoutReload();
|
||||
},
|
||||
|
||||
/**
|
||||
* Determines whether a given crop command is the currently active one
|
||||
*/
|
||||
isActiveCrop(cropCommand) {
|
||||
if (! this.resizerConfig.crop) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const defaultCrop = this.siteSettings.data.defaults.crop;
|
||||
|
||||
if (cropCommand.arguments.type === AspectRatioType.Automatic) {
|
||||
return this.resizerConfig.crop.type === AspectRatioType.Automatic
|
||||
|| this.resizerConfig.crop.type === AspectRatioType.AutomaticUpdate
|
||||
|| this.resizerConfig.crop.type === AspectRatioType.Initial && defaultCrop === AspectRatioType.Automatic;
|
||||
}
|
||||
if (cropCommand.arguments.type === AspectRatioType.Reset) {
|
||||
return this.resizerConfig.crop.type === AspectRatioType.Reset
|
||||
|| this.resizerConfig.crop.type === AspectRatioType.Initial && defaultCrop !== AspectRatioType.Automatic;
|
||||
}
|
||||
if (cropCommand.arguments.type === AspectRatioType.Fixed) {
|
||||
return this.resizerConfig.crop.type === AspectRatioType.Fixed
|
||||
&& this.resizerConfig.crop.ratio === cropCommand.arguments.ratio;
|
||||
}
|
||||
// only legacy options (fitw, fith) left to handle:
|
||||
return cropCommand.arguments.type === this.resizerConfig.crop.type;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" src="../../../../res/css/flex.scss" scoped></style>
|
||||
<style lang="scss" src="../../../res-common/panels.scss" scoped></style>
|
||||
<style lang="scss" src="../../../res-common/common.scss" scoped></style>
|
||||
@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<div class="sub-panel-content flex flex-row flex-wrap">
|
||||
<ShortcutButton
|
||||
v-for="(command, index) of settings?.active.commands.stretch"
|
||||
class="b3 button"
|
||||
:class="{active: editMode ? index === editModeOptions?.stretch?.selectedIndex : isActiveStretch(command)}"
|
||||
:key="index"
|
||||
:label="command.label"
|
||||
:shortcut="getKeyboardShortcutLabel(command)"
|
||||
@click="editMode ? editAction(command, index, 'stretch') : execAction(command)"
|
||||
>
|
||||
</ShortcutButton>
|
||||
|
||||
<!-- "Add new" button -->
|
||||
<ShortcutButton
|
||||
v-if="editMode"
|
||||
class="button b3"
|
||||
label="Add new"
|
||||
@click="editAction(
|
||||
{action: 'set-stretch', label: 'Stretch to ...', arguments: {type: StretchType.FixedSource}},
|
||||
null,
|
||||
'stretch'
|
||||
)"
|
||||
></ShortcutButton>
|
||||
</div>
|
||||
|
||||
<!-- EDIT MODE PANEL -->
|
||||
<div
|
||||
v-if="editMode && !editModeOptions?.stretch?.selected"
|
||||
class="sub-panel-content"
|
||||
>
|
||||
<div class="edit-action-area">
|
||||
Click a button to edit
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="editMode && editModeOptions?.stretch?.selected" class="sub-panel-content">
|
||||
<div class="edit-action-area-header">
|
||||
<span class="text-primary">Editing options for:</span> <b>{{editModeOptions?.stretch?.selected?.label}}</b>
|
||||
<template v-if="editModeOptions?.stretch?.selectedIndex === null && editModeOptions?.stretch?.selected?.label !== 'Stretch to ...'">(New option)</template>
|
||||
</div>
|
||||
<div class="edit-action-area">
|
||||
<!-- There are some special options for 'thin borders' -->
|
||||
<template v-if="editModeOptions?.stretch?.selected?.arguments?.type === StretchType.Conditional">
|
||||
<div class="field">
|
||||
<div class="label">
|
||||
Limit:
|
||||
</div>
|
||||
<div class="input">
|
||||
<input
|
||||
v-model="editModeOptions.stretch.selected.arguments.limit"
|
||||
>
|
||||
</div>
|
||||
<div class="hint">
|
||||
If vertical borders would take up less than this much of screen width, the image will be stretched. If the borders are too thick, image will not be stretched.
|
||||
Value of 1 means 100%. Value of 0.1 means vertical black bars can take up 10% of the width at most. There's no validation on this, use common sense.
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Some options are only shown for type 5 (fixed) stretch -->
|
||||
<template v-if="editModeOptions?.stretch?.selected?.arguments?.type === StretchType.FixedSource">
|
||||
<div class="field">
|
||||
<div class="label">
|
||||
Ratio:
|
||||
</div>
|
||||
<div class="input">
|
||||
<!-- We do an ugly in order to avoid spamming functions down at the bottom -->
|
||||
<input
|
||||
v-model="editModeOptions.stretch.selected.arguments.ratio"
|
||||
@blur="editModeOptions.stretch.selected.label === 'Stretch to ...' ? editModeOptions.stretch.selected.label = `Stretch to ${editModeOptions.stretch.selected.arguments.ratio}` : null"
|
||||
>
|
||||
</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:
|
||||
</div>
|
||||
<div class="input">
|
||||
<input v-model="editModeOptions.stretch.selected.label">
|
||||
</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 -->
|
||||
<div class="field">
|
||||
<div class="label">Shortcut:</div>
|
||||
<div class="">
|
||||
<EditShortcutButton
|
||||
:shortcut="editModeOptions?.stretch?.selected?.shortcut"
|
||||
@shortcutChanged="updateSelectedShortcut($event, 'stretch')"
|
||||
>
|
||||
</EditShortcutButton>
|
||||
</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
|
||||
v-if="editModeOptions?.stretch?.selected?.arguments?.type === StretchType.FixedSource && editModeOptions?.stretch?.selectedIndex !== null"
|
||||
class="button"
|
||||
@click="deleteAction('stretch')"
|
||||
>
|
||||
<mdicon name="delete"></mdicon> Delete
|
||||
</div>
|
||||
<div class="flex-grow"></div>
|
||||
<div class="button" @click="cancelEdit('stretch')">Cancel</div>
|
||||
<div class="button" @click="saveShortcut('stretch')">
|
||||
<mdicon name="floppy"></mdicon>
|
||||
|
||||
<template v-if="editModeOptions?.crop?.selectedIndex === null">Add</template>
|
||||
<template v-else>Save</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="edit-action-area">
|
||||
<div class="field">
|
||||
<div class="label">Default for this site:</div>
|
||||
<div class="select">
|
||||
<div class="select">
|
||||
<select
|
||||
v-model="siteDefaultStretchMode"
|
||||
@click="setDefaultStretchingMode($event, 'site')"
|
||||
>
|
||||
<option
|
||||
v-for="(command, index) of settings?.active.commands.stretch"
|
||||
:key="index"
|
||||
:value="JSON.stringify(command.arguments)"
|
||||
>
|
||||
{{command.label}}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ShortcutButton from '../../../components/ShortcutButton.vue';
|
||||
import EditShortcutButton from '../../../components/EditShortcutButton';
|
||||
import EditModeMixin from '../../../utils/EditModeMixin';
|
||||
import KeyboardShortcutParserMixin from '../../../utils/KeyboardShortcutParserMixin';
|
||||
import CommsMixin from '../../../utils/CommsMixin';
|
||||
import StretchType from '../../../../../common/enums/StretchType.enum';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
exec: null,
|
||||
StretchType: StretchType,
|
||||
|
||||
// TODO: this should be mixin?
|
||||
resizerConfig: {
|
||||
crop: null,
|
||||
stretch: null,
|
||||
zoom: null,
|
||||
pan: null
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [
|
||||
// ComputeActionsMixin,
|
||||
EditModeMixin,
|
||||
KeyboardShortcutParserMixin,
|
||||
CommsMixin
|
||||
],
|
||||
props: [
|
||||
'settings', // required for buttons and actions, which are global
|
||||
'siteSettings',
|
||||
'eventBus',
|
||||
'isEditing'
|
||||
],
|
||||
components: {
|
||||
ShortcutButton,
|
||||
EditShortcutButton,
|
||||
},
|
||||
computed: {
|
||||
siteDefaultStretch() {
|
||||
return JSON.stringify(
|
||||
this.siteSettings.data.defaults.stretch
|
||||
);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
isEditing(newValue, oldValue) {
|
||||
if (newValue) {
|
||||
this.enableEditMode();
|
||||
} else {
|
||||
this.disableEditMode();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Sets default stretching mode, for either site or global
|
||||
*/
|
||||
setDefaultStretchingMode($event, globalOrSite) {
|
||||
const commandArguments = JSON.parse($event.target.value);
|
||||
this.siteSettings.set('defaults.stretch', commandArguments);
|
||||
},
|
||||
|
||||
/**
|
||||
* Determines whether a given stretch command is the currently active one
|
||||
*/
|
||||
isActiveStretch(stretchCommand) {
|
||||
if (! this.resizerConfig.stretch) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// const defaultCrop = this.settings.getDefaultStretch(this.site);
|
||||
|
||||
if ([StretchType.NoStretch, StretchType.Basic, StretchType.Hybrid, StretchType.Conditional, StretchType.Default].includes(stretchCommand.arguments.type)) {
|
||||
return this.resizerConfig.stretch.type === stretchCommand.arguments.type;
|
||||
}
|
||||
return this.resizerConfig.crop.type === stretchCommand.arguments.type && this.resizerConfig.crop.ratio === stretchCommand.arguments.ratio;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" src="../../../../res/css/flex.scss" scoped></style>
|
||||
<style lang="scss" src="../../../res-common/panels.scss" scoped></style>
|
||||
<style lang="scss" src="../../../res-common/common.scss" scoped></style>
|
||||
@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<!--
|
||||
min, max and value need to be implemented in js as this slider
|
||||
should use logarithmic scale
|
||||
-->
|
||||
<div class="flex flex-row flex-end">
|
||||
<Button
|
||||
v-if="zoomAspectRatioLocked"
|
||||
label="Unlock aspect ratio"
|
||||
icon="lock-open"
|
||||
:fixedWidth="true"
|
||||
@click="toggleZoomAr()"
|
||||
>
|
||||
</Button>
|
||||
<Button
|
||||
v-else
|
||||
label="Lock aspect ratio"
|
||||
icon="lock"
|
||||
:fixedWidth="true"
|
||||
@click="toggleZoomAr()"
|
||||
>
|
||||
</Button>
|
||||
</div>
|
||||
<template v-if="zoomAspectRatioLocked">
|
||||
<input id="_input_zoom_slider"
|
||||
class="input-slider"
|
||||
type="range"
|
||||
step="any"
|
||||
min="-1"
|
||||
max="3"
|
||||
:value="zoom.x"
|
||||
@input="changeZoom($event.target.value)"
|
||||
/>
|
||||
<div style="overflow: auto" class="flex flex-row">
|
||||
<div class="flex flex-grow medium-small x-pad-1em">
|
||||
Zoom: {{getZoomForDisplay('x')}}
|
||||
</div>
|
||||
<div class="flex flex-nogrow flex-noshrink medium-small">
|
||||
<a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div>Horizontal zoom</div>
|
||||
<input id="_input_zoom_slider"
|
||||
class="input-slider"
|
||||
type="range"
|
||||
step="any"
|
||||
min="-1"
|
||||
max="4"
|
||||
:value="zoom.x"
|
||||
@input="changeZoom($event.target.value, 'x')"
|
||||
/>
|
||||
|
||||
<div>Vertical zoom</div>
|
||||
<input id="_input_zoom_slider"
|
||||
class="input-slider"
|
||||
type="range"
|
||||
step="any"
|
||||
min="-1"
|
||||
max="3"
|
||||
:value="zoom.y"
|
||||
@input="changeZoom($event.target.value, 'y')"
|
||||
/>
|
||||
|
||||
<div style="overflow: auto" class="flex flex-row">
|
||||
<div class="flex flex-grow medium-small x-pad-1em">
|
||||
Zoom: {{getZoomForDisplay('x')}} x {{getZoomForDisplay('y')}}
|
||||
</div>
|
||||
<div class="flex flex-nogrow flex-noshrink medium-small">
|
||||
<a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
zoomAspectRatioLocked: true,
|
||||
zoom: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
|
||||
// TODO: this should be mixin?
|
||||
resizerConfig: {
|
||||
crop: null,
|
||||
stretch: null,
|
||||
zoom: null,
|
||||
pan: null
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [
|
||||
|
||||
],
|
||||
props: [
|
||||
'settings', // required for buttons and actions, which are global
|
||||
'siteSettings',
|
||||
'eventBus',
|
||||
'isEditing'
|
||||
],
|
||||
methods: {
|
||||
getZoomForDisplay(axis) {
|
||||
// zoom is internally handled logarithmically, because we want to have x0.5, x1, x2, x4 ... magnifications
|
||||
// spaced out at regular intervals. When displaying, we need to convert that to non-logarithmic values.
|
||||
|
||||
return `${(Math.pow(2, this.zoom[axis]) * 100).toFixed()}%`
|
||||
},
|
||||
toggleZoomAr() {
|
||||
this.zoomAspectRatioLocked = !this.zoomAspectRatioLocked;
|
||||
},
|
||||
|
||||
resetZoom() {
|
||||
// we store zoom logarithmically on this component
|
||||
this.zoom = {x: 0, y: 0};
|
||||
|
||||
// we do not use logarithmic zoom elsewhere
|
||||
// todo: replace eventBus with postMessage to parent
|
||||
// this.eventBus.send('set-zoom', {zoom: 1, axis: 'y'});
|
||||
// this.eventBus.send('set-zoom', {zoom: 1, axis: 'x'});
|
||||
|
||||
this.eventBus?.sendToTunnel('set-zoom', {zoom: 1, axis: 'y'});
|
||||
this.eventBus?.sendToTunnel('set-zoom', {zoom: 1, axis: 'x'});
|
||||
},
|
||||
changeZoom(newZoom, axis) {
|
||||
// we store zoom logarithmically on this compnent
|
||||
if (!axis) {
|
||||
this.zoom.x = newZoom;
|
||||
} else {
|
||||
this.zoom[axis] = newZoom;
|
||||
}
|
||||
|
||||
// we do not use logarithmic zoom elsewhere, therefore we need to convert
|
||||
newZoom = Math.pow(2, newZoom);
|
||||
|
||||
if (this.zoomAspectRatioLocked) {
|
||||
this.eventBus?.sendToTunnel('set-zoom', {zoom: newZoom, axis: 'y'});
|
||||
this.eventBus?.sendToTunnel('set-zoom', {zoom: newZoom, axis: 'x'});
|
||||
} else {
|
||||
this.eventBus?.sendToTunnel('set-zoom', {zoom: newZoom, axis: axis ?? 'x'});
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" src="../../../../res/css/flex.scss" scoped></style>
|
||||
<style lang="scss" src="../../../res-common/panels.scss" scoped></style>
|
||||
<style lang="scss" src="../../../res-common/common.scss" scoped></style>
|
||||
569
src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue
Normal file
569
src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue
Normal file
@ -0,0 +1,569 @@
|
||||
<template>
|
||||
<div class="flex flex-col tab-root">
|
||||
<!-- ADD ANY OPTION BARS HERE -->
|
||||
|
||||
<!-- The rest of the tab -->
|
||||
<div class="flex flex-row flex-wrap">
|
||||
|
||||
<!-- Player element picker -->
|
||||
<div class="sub-panel">
|
||||
<div class="flex flex-row">
|
||||
<h1><mdicon name="television-play" :size="32" /> Player element</h1>
|
||||
</div>
|
||||
<div class="flex flex-row">
|
||||
<div class="sub-panel-content">
|
||||
<p>
|
||||
You're probably on this page because Ultrawidify doesn't crop the player correctly.
|
||||
</p>
|
||||
<p>
|
||||
If you hover over the boxes below, the corresponding element will change (sepia filter + higher brightness + reduced contrast + it gets an outline). Player element
|
||||
should be the closest element to the video element, for which the sepia/brightness effect covers the area you expect the video will cover.
|
||||
</p>
|
||||
<p>
|
||||
You need to reload the page for changes to take effect.
|
||||
</p>
|
||||
|
||||
<!-- <p>
|
||||
<a @click="showAdvancedOptions = !showAdvancedOptions">
|
||||
<template v-if="showAdvancedOptions">Hide advanced options</template>
|
||||
<template v-else>Show advanced options</template>
|
||||
</a>
|
||||
</p> -->
|
||||
|
||||
<div v-if="showAdvancedOptions" style="display: flex; flex-direction: row">
|
||||
<div style="display: flex; flex-direction: column">
|
||||
<div>
|
||||
<input :checked="playerManualQs"
|
||||
@change="togglePlayerManualQs"
|
||||
type="checkbox"
|
||||
/>
|
||||
<div>
|
||||
Use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors" target="_blank">CSS selector</a> for player<br/>
|
||||
<small>If defining multiple selectors, separate them with commas.</small>
|
||||
</div>
|
||||
</div>
|
||||
<div>Selector</div>
|
||||
<input type="text"
|
||||
v-model="playerQs"
|
||||
@change="updatePlayerQuerySelector"
|
||||
@blur="updatePlayerQuerySelector"
|
||||
:disabled="playerByNodeIndex || !playerManualQs"
|
||||
/>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column">
|
||||
<b>Custom CSS for site</b>
|
||||
<textarea></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-direction: row;">
|
||||
<div class="element-tree">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<div class="status-relative">
|
||||
Status <mdicon name="help-circle" @click="showLegend = !showLegend" />
|
||||
|
||||
<div v-if="showLegend" class="element-symbol-legend">
|
||||
<b>Symbols:</b><br />
|
||||
<mdicon name="alert-remove" class="invalid" /> Element of invalid dimensions<br />
|
||||
<mdicon name="refresh-auto" class="auto-match" /> Ultrawidify's player detection thinks this should be the player<br />
|
||||
<mdicon name="bookmark" class="parent-offset-match" /> Site settings say this should be the player (based on counting parents)<br />
|
||||
<mdicon name="crosshairs" class="qs-match" /> Site settings say this should be the player (based on query selectors)<br />
|
||||
<mdicon name="check-circle" class="activePlayer" /> Element that is actually the player
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<th>Element</th>
|
||||
<!-- <th>Actions</th> -->
|
||||
<!-- <th>Quick fixes</th> -->
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(element, index) of elementStack"
|
||||
:key="index"
|
||||
class="element-row"
|
||||
>
|
||||
<td>
|
||||
<div class="status">
|
||||
<div
|
||||
v-if="element.heuristics?.invalidSize"
|
||||
class="invalid"
|
||||
>
|
||||
<mdicon name="alert-remove" />
|
||||
</div>
|
||||
<div
|
||||
v-if="element.heuristics?.autoMatch"
|
||||
class="auto-match"
|
||||
>
|
||||
<mdicon name="refresh-auto" />
|
||||
</div>
|
||||
<div
|
||||
v-if="element.heuristics?.qsMatch"
|
||||
class="qs-match"
|
||||
>
|
||||
<mdicon name="crosshairs" />
|
||||
</div>
|
||||
<div
|
||||
v-if="element.heuristics?.manualElementByParentIndex"
|
||||
class="parent-offset-match"
|
||||
>
|
||||
<mdicon name="bookmark" />
|
||||
</div>
|
||||
<div
|
||||
v-if="element.heuristics?.activePlayer"
|
||||
class="activePlayer"
|
||||
>
|
||||
<mdicon name="check-circle" />
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div
|
||||
class="element-data"
|
||||
|
||||
@mouseover="markElement(index, true)"
|
||||
@mouseleave="markElement(index, false)"
|
||||
|
||||
@click="setPlayer(index)"
|
||||
>
|
||||
<div class="tag">
|
||||
<b>{{element.tagName}}</b> <i class="id">{{element.id ? `#`:''}}{{element.id}}</i> @ <span class="dimensions">{{element.width}}</span>x<span class="dimensions">{{element.height}}</span>
|
||||
|
||||
</div>
|
||||
<div v-if="element.classList" class="class-list">
|
||||
<div v-for="cls of element.classList" :key="cls">
|
||||
{{cls}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="flex flex-row">
|
||||
<!-- <div @click="designatePlayer(index)">Set as player {{ index }}</div> -->
|
||||
</div>
|
||||
</td>
|
||||
<!-- <td>
|
||||
<div
|
||||
class="css-fixes"
|
||||
>
|
||||
<div style="width: 100%"><b>Quick fixes:</b></div>
|
||||
<div
|
||||
class="css-line"
|
||||
:class="{'active': cssStack[index]?.includes('width: 100%;')}"
|
||||
@click="toggleCssForElement(index, 'width: 100%;')"
|
||||
>
|
||||
Width: 100%
|
||||
</div>
|
||||
<div
|
||||
class="css-line"
|
||||
:class="{'active': cssStack[index]?.includes('height: 100%;')}"
|
||||
@click="toggleCssForElement(index, 'height: 100%;')"
|
||||
>
|
||||
Height: 100%
|
||||
</div>
|
||||
<div
|
||||
class="css-line"
|
||||
:class="{'active': cssStack[index]?.includes('display: flex;')}"
|
||||
@click="toggleCssForElement(index, 'display: flex;')"
|
||||
>
|
||||
Display: flex
|
||||
</div>
|
||||
<div class="css-line">
|
||||
Flex direction:
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('flex-direction: row;')}"
|
||||
@click="toggleCssForElement(index, 'flex-direction', 'row')"
|
||||
>
|
||||
row
|
||||
</span> |
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('flex-direction: column;')}"
|
||||
@click="toggleCssForElement(index, 'flex-direction', 'column')"
|
||||
>
|
||||
column
|
||||
</span>
|
||||
</div>
|
||||
<div class="css-line">
|
||||
Justify content:
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('justify-content: start;')}"
|
||||
@click="toggleCssForElement(index, 'justify-content', 'start')"
|
||||
>
|
||||
start
|
||||
</span> |
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('justify-content: center;')}"
|
||||
@click="toggleCssForElement(index, 'justify-content', 'center')"
|
||||
>
|
||||
center
|
||||
</span> |
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('justify-content: end;')}"
|
||||
@click="toggleCssForElement(index, 'justify-content', 'end')"
|
||||
>
|
||||
end
|
||||
</span>
|
||||
</div>
|
||||
<div class="css-line">
|
||||
Align items:
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('align-items: start;')}"
|
||||
@click="toggleCssForElement(index, 'align-items', 'start')"
|
||||
>
|
||||
start
|
||||
</span> |
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('align-items: center;')}"
|
||||
@click="toggleCssForElement(index, 'align-items', 'center')"
|
||||
>
|
||||
center
|
||||
</span> |
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('align-items: end;')}"
|
||||
@click="toggleCssForElement(index, 'align-items', 'end')"
|
||||
>
|
||||
end
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="css-line">
|
||||
Justify self:
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('justify-self: start;')}"
|
||||
@click="toggleCssForElement(index, 'justify-self', 'start')"
|
||||
>
|
||||
start
|
||||
</span> |
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('justify-self: center;')}"
|
||||
@click="toggleCssForElement(index, 'justify-self', 'center')"
|
||||
>
|
||||
center
|
||||
</span> |
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('justify-self: end;')}"
|
||||
@click="toggleCssForElement(index, 'justify-self', 'end')"
|
||||
>
|
||||
end
|
||||
</span>
|
||||
</div>
|
||||
<div class="css-line">
|
||||
Align self:
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('align-self: start;')}"
|
||||
@click="toggleCssForElement(index, 'align-self', 'start')"
|
||||
>
|
||||
start
|
||||
</span> |
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('align-self: center;')}"
|
||||
@click="toggleCssForElement(index, 'align-self', 'center')"
|
||||
>
|
||||
center
|
||||
</span> |
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('align-self: end;')}"
|
||||
@click="toggleCssForElement(index, 'align-self', 'end')"
|
||||
>
|
||||
end
|
||||
</span>
|
||||
</div>
|
||||
<div class="css-line">
|
||||
Text-align:
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('text-align: left;')}"
|
||||
@click="toggleCssForElement(index, 'text-align', 'left')"
|
||||
>
|
||||
left
|
||||
</span> |
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('text-align: center;')}"
|
||||
@click="toggleCssForElement(index, 'text-align', 'center')"
|
||||
>
|
||||
center
|
||||
</span> |
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.find(x => x.includes('text-align: right'))}"
|
||||
@click="toggleCssForElement(index, 'text-align', 'right')"
|
||||
>
|
||||
right
|
||||
</span>
|
||||
</div>
|
||||
<div class="css-line">
|
||||
Position:
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('position: relative;')}"
|
||||
@click="toggleCssForElement(index, 'position', 'relative')"
|
||||
>
|
||||
relative
|
||||
</span> |
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('position: absolute;')}"
|
||||
@click="toggleCssForElement(index, 'position', 'absolute')"
|
||||
>
|
||||
absolute
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td> -->
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="element-config">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="css-preview">
|
||||
{{cssStack}}
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="sub-panel-content">
|
||||
<h2>Advanced settings</h2>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
|
||||
export default({
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
elementStack: [],
|
||||
cssStack: [],
|
||||
showLegend: false,
|
||||
showAdvancedOptions: false,
|
||||
};
|
||||
},
|
||||
mixins: [],
|
||||
props: [
|
||||
'siteSettings',
|
||||
'frame',
|
||||
'eventBus',
|
||||
'site',
|
||||
'isPopup'
|
||||
],
|
||||
created() {
|
||||
this.eventBus.subscribe('uw-config-broadcast', {function: (config) => this.handleElementStack(config)});
|
||||
},
|
||||
mounted() {
|
||||
this.getPlayerTree();
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
getPlayerTree() {
|
||||
if (this.isPopup) {
|
||||
this.eventBus.send('get-player-tree');
|
||||
} else {
|
||||
this.eventBus.sendToTunnel('get-player-tree');
|
||||
}
|
||||
},
|
||||
handleElementStack(configBroadcast) {
|
||||
if (configBroadcast.type === 'player-tree') {
|
||||
this.elementStack = configBroadcast.config;
|
||||
this.$nextTick( () => this.$forceUpdate() );
|
||||
}
|
||||
},
|
||||
markElement(parentIndex, enable) {
|
||||
this.eventBus.sendToTunnel('set-mark-element', {parentIndex, enable});
|
||||
},
|
||||
async setPlayer(index) {
|
||||
// yup.
|
||||
this.siteSettings.getDOMConfig('modified', 'original');
|
||||
await this.siteSettings.setUpdateFlags(['PlayerData']);
|
||||
await this.siteSettings.set('DOMConfig.modified.type', 'modified', {noSave: true});
|
||||
await this.siteSettings.set('activeDOMConfig', 'modified', {noSave: true});
|
||||
|
||||
// if user agrees with ultrawidify on what element player should be,
|
||||
// we just unset our settings for this site
|
||||
if (this.elementStack[index].heuristics?.autoMatch) {
|
||||
await this.siteSettings.set('DOMConfig.modified.elements.player.manual', false);
|
||||
this.getPlayerTree();
|
||||
} else {
|
||||
// ensure settings exist:
|
||||
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.index', index, true);
|
||||
this.getPlayerTree();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Toggles active CSS for element of certain parent index.
|
||||
* cssValue is optional and can be included in cssRule argument
|
||||
*/
|
||||
toggleCssForElement(index, cssRule, cssValue) {
|
||||
// we will handle elements that put cssValue as a separate argument elsewhere
|
||||
if (cssValue) {
|
||||
return this.toggleCssForElement_3arg(index,cssRule, cssValue);
|
||||
}
|
||||
|
||||
// this rule applies to current element — remove it!
|
||||
if (this.cssStack[index]?.includes(cssRule)) {
|
||||
this.cssStack[index] = this.cssStack[index].filter(x => ! x.includes(cssRule));
|
||||
} else {
|
||||
if (!this.cssStack[index]) {
|
||||
this.cssStack[index] = [];
|
||||
}
|
||||
this.cssStack[index].push(cssRule)
|
||||
}
|
||||
|
||||
//TODO: update settings!
|
||||
},
|
||||
toggleCssForElement_3arg(index, cssRule, cssValue) {
|
||||
const matching = this.cssStack[index]?.find(x => x.includes(cssRule))
|
||||
if (matching) {
|
||||
this.cssStack[index] = this.cssStack[index].filter(x => ! x.includes(cssRule));
|
||||
if (!matching.includes(cssValue)) {
|
||||
this.cssStack[index].push(`${cssRule}: ${cssValue};`);
|
||||
}
|
||||
} else {
|
||||
if (!this.cssStack[index]) {
|
||||
this.cssStack[index] = [];
|
||||
}
|
||||
this.cssStack[index].push(`${cssRule}: ${cssValue};`);
|
||||
}
|
||||
|
||||
//TODO: update settings!
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.element-tree {
|
||||
.element-row {
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
margin: 0.5rem;
|
||||
|
||||
.status {
|
||||
width: 6.9rem;
|
||||
margin-right: 1rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
.invalid {
|
||||
color: #f00;
|
||||
}
|
||||
}
|
||||
.element-data {
|
||||
border: 1px solid rgba(255,255,255,0.5);
|
||||
padding: 0.5rem 1rem;
|
||||
|
||||
max-width: 30rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.tag {
|
||||
text-transform: lowercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
.id {
|
||||
font-style: italic;
|
||||
}
|
||||
.class-list {
|
||||
font-style: italic;
|
||||
opacity: 0.75;
|
||||
font-size: 0.75rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> div {
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.125rem 0.5rem;
|
||||
margin: 0.125rem 0.25rem;
|
||||
}
|
||||
}
|
||||
.dimensions {
|
||||
color: #473c85;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// .css-fixes {
|
||||
// // display: flex;
|
||||
// // flex-direction: row;
|
||||
// // flex-wrap: wrap;
|
||||
// // align-items: flex-start;
|
||||
// // justify-content:flex-start;
|
||||
// }
|
||||
.css-line {
|
||||
display: inline-block;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid rgba(255,255,255,0.5);
|
||||
background: #000;
|
||||
margin: 0.125rem 0.25rem;
|
||||
padding: 0.125rem 0.25rem;
|
||||
|
||||
&.active, >span.active {
|
||||
background: rgb(255, 174, 107);
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.status-relative {
|
||||
position: relative;
|
||||
|
||||
.element-symbol-legend {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
|
||||
z-index: 20000;
|
||||
|
||||
width: 32rem;
|
||||
|
||||
text-align: left;
|
||||
|
||||
background-color: #000;
|
||||
padding: 1rem;
|
||||
border: 1px solid rgba(255,255,255,0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.tab-root {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
157
src/csui/src/PlayerUiPanels/ResizerDebugPanelComponent.vue
Normal file
157
src/csui/src/PlayerUiPanels/ResizerDebugPanelComponent.vue
Normal file
@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div class="panel-root">
|
||||
<h1>Resizer debug data</h1>
|
||||
<div class="flex flex-row flex-wrap">
|
||||
<div class="panel">
|
||||
<h3 class="panel-title">
|
||||
Player info
|
||||
</h3>
|
||||
<div class="data-item">
|
||||
<div class="data-title">Window size:
|
||||
<small>(Inner size)</small>
|
||||
</div>
|
||||
<div class="data">{{windowWidth}} x {{windowHeight}}</div>
|
||||
<div class="button" @click="refreshWindowSize()">
|
||||
<!-- <Icon icon="arrow-clockwise"></Icon> -->
|
||||
Refresh</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div class="data-title">Player dimensions:</div>
|
||||
<div class="data">{{debugData?.resizer?.playerData?.dimensions?.width ?? 'not detected'}} x {{debugData?.resizer?.playerData?.dimensions?.height ?? 'not detected'}}</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div class="data-title">Is fullscreen?</div>
|
||||
<div class="data">{{debugData?.resizer?.playerData?.dimensions?.fullscreen ?? 'unknown'}}</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div class="data-title">Player id | classlist</div>
|
||||
<div class="data">{{debugData?.resizer?.playerData?.elementId || '<no ID>'}} | {{debugData?.resizer?.playerData?.classList || '<no classes>'}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stream info -->
|
||||
<div class="panel">
|
||||
<h3 class="panel-title">
|
||||
Stream info
|
||||
</h3>
|
||||
<div class="data-item">
|
||||
<div class="data-title">
|
||||
Stream dimensions: <small>(Native size of the video)</small>
|
||||
</div>
|
||||
<div class="data">
|
||||
{{debugData?.resizer?.videoRawData?.streamDimensions.x}} x {{debugData?.resizer?.videoRawData?.streamDimensions?.y}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div class="data-title">
|
||||
Stream displayed dimensions: <small>(Video file is being upscaled to this size)</small>
|
||||
</div>
|
||||
<div class="data">
|
||||
{{debugData?.resizer?.videoRawData?.displayedSize?.x.toFixed()}} x {{debugData?.resizer?.videoRawData?.displayedSize?.y.toFixed()}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div class="data-title">Video element native size: <small>(Size of the html element. Should be same as above most of the time!)</small></div>
|
||||
<div class="data">{{debugData?.resizer?.videoRawData?.displayedSize?.x.toFixed(1)}} x {{debugData?.resizer?.videoRawData?.displayedSize?.y.toFixed(1)}}</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div class="data-title">Size difference to player (raw): <small>(positive numbers: video element is bigger than player element)</small></div>
|
||||
<div class="data">x: {{debugData?.resizer?.sizeDifferenceToPlayer?.beforeZoom?.wdiff.toFixed(1)}}; y: {{debugData?.resizer?.sizeDifferenceToPlayer?.beforeZoom?.hdiff.toFixed(1)}}</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div class="data-title">Video element size (post zoom): <small>(Size of the html element after transform:scale is applied. Or at least, that's what Resizer::computeOffsets() thinks the final size is.)</small></div>
|
||||
<div class="data">{{debugData?.resizer?.transformedSize?.x.toFixed(2)}} x {{debugData?.resizer?.transformedSize?.y.toFixed(2)}}</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div class="data-title"><b>Size difference to player (post-zoom):</b> <small>(same as above, except after cropping, stretching, panning and zoom are applied)</small></div>
|
||||
<div class="data">x: {{debugData?.resizer?.sizeDifferenceToPlayer?.afterZoom?.wdiff.toFixed(2)}}; y: {{debugData?.resizer?.sizeDifferenceToPlayer?.afterZoom?.hdiff.toFixed(2)}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Transform info -->
|
||||
<div class="panel">
|
||||
<h3 class="panel-title">
|
||||
Transformations
|
||||
</h3>
|
||||
<div class="data-item">
|
||||
<div class="data-title">Alignment: <small>(I agree that 'left' and 'right' are both evil, but that's not the kind of alignments we're thinking of)</small></div>
|
||||
<div class="data">{{debugData?.resizer?.videoTransform?.alignment || '<unknown>'}}</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div class="data-title">Scale factor</div>
|
||||
<div class="data">x: {{debugData?.resizer?.videoTransform?.scale.x.toFixed(2)}}; y: {{debugData?.resizer?.videoTransform?.scale.y.toFixed(2)}}</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div class="data-title">Translation</div>
|
||||
<div class="data">x: {{debugData?.resizer?.videoTransform?.translate.x.toFixed(2)}}; y: {{debugData?.resizer?.videoTransform?.translate.y.toFixed(2)}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="uw-debug-info flex"> -->
|
||||
<!-- <pre> -->
|
||||
<!-- {{debugDataPrettified}} -->
|
||||
<!-- </pre> -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import Icon from '../../common/components/Icon';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
// Icon,
|
||||
},
|
||||
props: {
|
||||
debugData: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
windowWidth: window.innerWidth,
|
||||
windowHeight: window.innerHeight
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
refreshWindowSize() {
|
||||
this.windowWidth = window.innerWidth;
|
||||
this.windowHeight = window.innerHeight;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../../res/css/uwui-base.scss';
|
||||
@import '../../../res/css/colors.scss';
|
||||
@import '../../../res/css/font/overpass.css';
|
||||
@import '../../../res/css/font/overpass-mono.css';
|
||||
@import '../../../res/css/common.scss';
|
||||
|
||||
.panel-root {
|
||||
display: block;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
display: inline-block;
|
||||
width: 420px;
|
||||
max-width: 100%;
|
||||
padding: 12px 6px;
|
||||
}
|
||||
|
||||
.data-item {
|
||||
display: block;
|
||||
margin-bottom: 0.69rem;
|
||||
}
|
||||
|
||||
.data-title {
|
||||
|
||||
small {
|
||||
display: block;
|
||||
opacity: 0.69;
|
||||
}
|
||||
}
|
||||
.data {
|
||||
color: $primary-color;
|
||||
}
|
||||
</style>
|
||||
9
src/csui/src/PlayerUiPanels/SiteSettings.vue
Normal file
9
src/csui/src/PlayerUiPanels/SiteSettings.vue
Normal file
@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
|
||||
|
||||
<div class="">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
192
src/csui/src/PlayerUiPanels/VideoSettings.vue
Normal file
192
src/csui/src/PlayerUiPanels/VideoSettings.vue
Normal file
@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<div class="flex flex-col" style="position: relative; width: 100%;">
|
||||
<!-- 'Change UI' options is a tiny bit in upper right corner. -->
|
||||
<div
|
||||
class="options-bar flex flex-row"
|
||||
:class="{isEditing: editMode}"
|
||||
>
|
||||
<template v-if="editMode">
|
||||
<div style="height: 100%; display: flex; flex-direction: column; justify-content: center; flex: 0 0; padding-right: 8px;">
|
||||
<mdicon name="alert" size="32" />
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
You are currently editing options and shortcuts.<br/>
|
||||
<b>NOTE: changes will take effect after page reload.</b>
|
||||
</div>
|
||||
<div
|
||||
class="flex-nogrow flex-noshrink"
|
||||
@click="editMode = !editMode"
|
||||
>
|
||||
Exit edit mode
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="flex-grow"></div>
|
||||
<div
|
||||
class=""
|
||||
@click="editMode = !editMode"
|
||||
>
|
||||
Edit ratios and shortcuts
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- The rest of the tab is under 'edit ratios and shortcuts' row -->
|
||||
<div class="flex flex-row flex-wrap" style="width: 100%">
|
||||
|
||||
<div class="flex flex-col">
|
||||
<!-- CROP OPTIONS -->
|
||||
<div v-if="settings" class="sub-panel">
|
||||
<div class="flex flex-row">
|
||||
<mdicon name="crop" :size="32" />
|
||||
<h1>Crop video:</h1>
|
||||
</div>
|
||||
|
||||
<CropOptionsPanel
|
||||
:settings="settings"
|
||||
:siteSettings="siteSettings"
|
||||
:eventBus="eventBus"
|
||||
:isEditing="editMode"
|
||||
>
|
||||
</CropOptionsPanel>
|
||||
</div>
|
||||
|
||||
<!-- STRETCH OPTIONS -->
|
||||
<div v-if="settings" class="sub-panel">
|
||||
<div class="flex flex-row">
|
||||
<mdicon name="stretch-to-page-outline" :size="32" />
|
||||
<h1>Stretch video:</h1>
|
||||
</div>
|
||||
|
||||
<StretchOptionsPanel
|
||||
:settings="settings"
|
||||
:siteSettings="siteSettings"
|
||||
:eventBus="eventBus"
|
||||
:isEditing="editMode"
|
||||
></StretchOptionsPanel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
|
||||
<!-- VIDEO ALIGNMENT -->
|
||||
<div class="sub-panel">
|
||||
<div class="flex flex-row">
|
||||
<mdicon name="align-horizontal-center" :size="32" />
|
||||
<h1>Video alignment:</h1>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row justify-center mt-4">
|
||||
<alignment-options-control-component
|
||||
:eventBus="eventBus"
|
||||
>
|
||||
</alignment-options-control-component>
|
||||
</div>
|
||||
|
||||
<!-- <div class="flex flex-row flex-wrap">
|
||||
<div class="m-t-0-33em display-block">
|
||||
<input id="_input_zoom_site_allow_pan"
|
||||
type="checkbox"
|
||||
/>
|
||||
Pan with mouse
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<!-- ZOOM OPTIONS -->
|
||||
<!-- <div class="sub-panel">
|
||||
<div class="flex flex-row">
|
||||
<mdicon name="magnify-plus-outline" :size="32" />
|
||||
<h1>Manual zoom:</h1>
|
||||
</div>
|
||||
|
||||
<ZoomOptionsPanel
|
||||
:settings="settings"
|
||||
:siteSettings="siteSettings"
|
||||
:eventBus="eventBus"
|
||||
:isEditing="editMode"
|
||||
></ZoomOptionsPanel>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ZoomOptionsPanel from './PanelComponents/VideoSettings/ZoomOptionsPanel.vue'
|
||||
import CropOptionsPanel from './PanelComponents/VideoSettings/CropOptionsPanel'
|
||||
import StretchOptionsPanel from './PanelComponents/VideoSettings/StretchOptionsPanel'
|
||||
import Button from '../components/Button.vue'
|
||||
import ShortcutButton from '../components/ShortcutButton';
|
||||
import EditShortcutButton from '../components/EditShortcutButton';
|
||||
import ComputeActionsMixin from '../mixins/ComputeActionsMixin';
|
||||
import BrowserDetect from '../../../ext/conf/BrowserDetect';
|
||||
import AlignmentOptionsControlComponent from './AlignmentOptionsControlComponent.vue';
|
||||
import CommsMixin from '../utils/CommsMixin';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
exec: null,
|
||||
scope: 'page',
|
||||
|
||||
editMode: false,
|
||||
|
||||
resizerConfig: {
|
||||
crop: null,
|
||||
stretch: null,
|
||||
zoom: null,
|
||||
pan: null
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [
|
||||
ComputeActionsMixin,
|
||||
CommsMixin,
|
||||
],
|
||||
props: [
|
||||
'settings', // required for buttons and actions, which are global
|
||||
'siteSettings',
|
||||
'frame',
|
||||
'eventBus',
|
||||
'site'
|
||||
],
|
||||
created() {
|
||||
this.eventBus.subscribe('uw-config-broadcast', {function: (config) => this.handleConfigBroadcast(config)});
|
||||
},
|
||||
mounted() {
|
||||
this.eventBus.sendToTunnel('get-ar');
|
||||
},
|
||||
components: {
|
||||
ShortcutButton,
|
||||
EditShortcutButton,
|
||||
Button,
|
||||
AlignmentOptionsControlComponent,
|
||||
StretchOptionsPanel,
|
||||
CropOptionsPanel, ZoomOptionsPanel
|
||||
},
|
||||
methods: {
|
||||
|
||||
async openOptionsPage() {
|
||||
BrowserDetect.runtime.openOptionsPage();
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" src="../../res/css/flex.scss" scoped module></style>
|
||||
<style lang="scss" src="../res-common/panels.scss" scoped module></style>
|
||||
<style lang="scss" src="../res-common/common.scss" scoped module></style>
|
||||
<style lang="scss" scoped>
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
.mt-4{
|
||||
margin-top: 1rem;
|
||||
}
|
||||
</style>
|
||||
@ -12,7 +12,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="command-details">
|
||||
<div class="flex flex-column cmd-container cd-pad">
|
||||
<div class="flex flex-col cmd-container cd-pad">
|
||||
<div class="flex bold">
|
||||
Command:
|
||||
</div>
|
||||
@ -22,7 +22,7 @@
|
||||
</div>
|
||||
|
||||
<!-- SCOPES -->
|
||||
<div class="flex flex-column scopes-container cd-pad">
|
||||
<div class="flex flex-col scopes-container cd-pad">
|
||||
<div class="flex bold">Popup tabs:</div>
|
||||
|
||||
<!-- global scope -->
|
||||
@ -151,99 +151,97 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
@import '../../res/css/colors.scss';
|
||||
|
||||
.uw-ultrawidify-container-root {
|
||||
.action {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.action {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.action .command-details {
|
||||
height: 0px;
|
||||
max-height: 0px;
|
||||
transition: max-height 0.5s ease;
|
||||
overflow: hidden;
|
||||
transition: height 0.5s ease;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
}
|
||||
.action .command-details {
|
||||
height: 0px;
|
||||
max-height: 0px;
|
||||
transition: max-height 0.5s ease;
|
||||
overflow: hidden;
|
||||
transition: height 0.5s ease;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.action:hover .command-details {
|
||||
height: auto;
|
||||
max-height: 200px;
|
||||
transition: max-height 0.5s ease;
|
||||
}
|
||||
.action:hover .command-details {
|
||||
height: auto;
|
||||
max-height: 200px;
|
||||
transition: max-height 0.5s ease;
|
||||
}
|
||||
|
||||
.command-details {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
}
|
||||
.command-details {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.action-name-cmd-container, .p1rem {
|
||||
padding: 1rem;
|
||||
}
|
||||
.action-name-cmd-container, .p1rem {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.cd-pad {
|
||||
padding: 0.5em;
|
||||
}
|
||||
.cd-pad {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.action-name {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
color: $text-normal;
|
||||
width: 50%;
|
||||
}
|
||||
.action-name {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
color: $text-normal;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.action-name:hover, .action:hover .action-name {
|
||||
color: lighten($primary-color, 20%);
|
||||
}
|
||||
.action-name:hover, .action:hover .action-name {
|
||||
color: lighten($primary-color, 20%);
|
||||
}
|
||||
|
||||
.red {
|
||||
color: $primary-color !important;
|
||||
}
|
||||
.red {
|
||||
color: $primary-color !important;
|
||||
}
|
||||
|
||||
.cmd-container {
|
||||
width: 13.37rem;
|
||||
}
|
||||
.cmd-container {
|
||||
width: 13.37rem;
|
||||
}
|
||||
|
||||
.cmdlist {
|
||||
font-family: 'Overpass Mono';
|
||||
font-size: 0.9rem;
|
||||
color: $text-dim;
|
||||
}
|
||||
.cmdlist {
|
||||
font-family: 'Overpass Mono';
|
||||
font-size: 0.9rem;
|
||||
color: $text-dim;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
.bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.scope-scope {
|
||||
width: 5rem;
|
||||
text-align: right !important;
|
||||
color: $secondary-color;
|
||||
}
|
||||
.scope-scope {
|
||||
width: 5rem;
|
||||
text-align: right !important;
|
||||
color: $secondary-color;
|
||||
}
|
||||
|
||||
.scope-visible {
|
||||
width: 7rem;
|
||||
}
|
||||
.scope-visible {
|
||||
width: 7rem;
|
||||
}
|
||||
|
||||
.scope-button-label {
|
||||
width: 16rem;
|
||||
}
|
||||
.scope-button-label {
|
||||
width: 16rem;
|
||||
}
|
||||
|
||||
.scope-row-label {
|
||||
color: $text-dark;
|
||||
}
|
||||
.scope-row-label {
|
||||
color: $text-dark;
|
||||
}
|
||||
|
||||
.scope-row-highlight {
|
||||
color: $text-normal;
|
||||
}
|
||||
.scope-row-highlight {
|
||||
color: $text-normal;
|
||||
}
|
||||
|
||||
.transparent {
|
||||
opacity: 0;
|
||||
}
|
||||
.transparent {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
43
src/csui/src/components/Button.vue
Normal file
43
src/csui/src/components/Button.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="button center-text"
|
||||
:class="{'setting-selected': selected }"
|
||||
>
|
||||
<div class="label">
|
||||
{{label}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
fixedWidth: Boolean,
|
||||
selected: Boolean,
|
||||
label: String,
|
||||
icon: String,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.button {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: none;
|
||||
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
margin-right: 8px;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
text-align: center;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
191
src/csui/src/components/EditShortcutButton.vue
Normal file
191
src/csui/src/components/EditShortcutButton.vue
Normal file
@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<div class="flex flex-row">
|
||||
<div
|
||||
class="flex-grow button"
|
||||
@click="editShortcut()"
|
||||
|
||||
>
|
||||
<template v-if="!editing">
|
||||
{{shortcutDisplay}}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{currentKeypress ?? 'Press a key'}}
|
||||
<input ref="input"
|
||||
class="hidden-input"
|
||||
@keyup.capture="keyup($event)"
|
||||
@keydown.capture="keydown($event)"
|
||||
@input.prevent=""
|
||||
@blur="editing = false;"
|
||||
>
|
||||
</template>
|
||||
</div>
|
||||
<div class="button" @click="$emit('shortcutChanged', null)">
|
||||
<mdicon name="delete"></mdicon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import KeyboardShortcutParser from '../../../common/js/KeyboardShortcutParser';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
shortcut: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentKeypress: undefined,
|
||||
currentKey: undefined,
|
||||
editing: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
shortcutDisplay() {
|
||||
if (!this.shortcut) {
|
||||
return '(no shortcut)'
|
||||
}
|
||||
return KeyboardShortcutParser.parseShortcut(this.shortcut);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
editShortcut() {
|
||||
this.editing = true;
|
||||
this.currentKeypress = undefined;
|
||||
this.currentKey = undefined;
|
||||
|
||||
// input doesn't exist now, but will exist on the next tick
|
||||
this.$nextTick(()=> this.$refs.input.focus());
|
||||
},
|
||||
/**
|
||||
* Updates currently pressed keypress for display
|
||||
*/
|
||||
keydown(event) {
|
||||
// event.repeat is set to 'true' when key is being held down, but not on
|
||||
// first keydown. We don't need to process subsequent repeats of a keypress
|
||||
// we already processed.
|
||||
if (event.repeat) {
|
||||
return;
|
||||
}
|
||||
|
||||
const shortcut = KeyboardShortcutParser.generateShortcutFromKeypress(event);
|
||||
const fixedShortcut = this.handleModifierKeypress(shortcut);
|
||||
|
||||
if (this.currentKey === undefined) {
|
||||
this.currentKey = fixedShortcut;
|
||||
} else {
|
||||
// here's a fun fact. Keydown doesn't do modifier keys the way we want —
|
||||
// notably, A-Z0-9 keys are returned without modifier state (all modifiers)
|
||||
// are set to false in keydown events. That means we need to keep track of
|
||||
// modifiers ourselves.
|
||||
if (fixedShortcut.notModifier) {
|
||||
this.currentKey.key = fixedShortcut.key;
|
||||
this.currentKey.code = fixedShortcut.code;
|
||||
} else {
|
||||
this.currentKey = {
|
||||
...fixedShortcut,
|
||||
key: this.currentKey.key,
|
||||
code: this.currentKey.code
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// update display
|
||||
this.currentKeypress = KeyboardShortcutParser.parseShortcut(this.currentKey);
|
||||
},
|
||||
/**
|
||||
* Emits shortcutChanged when shortcut is considered changed
|
||||
*/
|
||||
keyup(event) {
|
||||
const shortcut = KeyboardShortcutParser.generateShortcutFromKeypress(event);
|
||||
const fixedShortcut = this.handleModifierKeypress(shortcut);
|
||||
|
||||
if (fixedShortcut.notModifier) {
|
||||
this.editing = false;
|
||||
this.$emit('shortcutChanged', this.currentKey);
|
||||
} else {
|
||||
// if none of the modifiers are pressed and if no other key is being held down,
|
||||
// we need to reset label back to 'pls press key'
|
||||
if (!fixedShortcut.altKey && !fixedShortcut.ctrlKey && !fixedShortcut.metaKey && !fixedShortcut.shiftKey && !fixedShortcut.code) {
|
||||
this.currentKeypress = undefined;
|
||||
this.currentKey = undefined;
|
||||
} else {
|
||||
this.currentKey = shortcut;
|
||||
this.currentKeypress = KeyboardShortcutParser.parseShortcut(this.currentKey);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Handles current keypress if event.keyCode is a modifier key.
|
||||
* Returns true if current event was a modifier key, false if
|
||||
* if was a regular A-Z 0-9 key.
|
||||
*/
|
||||
handleModifierKeypress(event) {
|
||||
const modifierPressed = event.type === 'keydown';
|
||||
|
||||
switch (event.code) {
|
||||
case 'ShiftLeft':
|
||||
case 'ShiftRight':
|
||||
return {
|
||||
...event,
|
||||
key: '…',
|
||||
code: null,
|
||||
shiftKey: modifierPressed
|
||||
}
|
||||
case 'ControlLeft':
|
||||
case 'ControlRight':
|
||||
return {
|
||||
...event,
|
||||
key: '…',
|
||||
code: null,
|
||||
controlKey: modifierPressed
|
||||
};
|
||||
case 'MetaLeft':
|
||||
case 'MetaRight':
|
||||
return {
|
||||
...event,
|
||||
key: '…',
|
||||
code: null,
|
||||
metaKey: modifierPressed
|
||||
};
|
||||
case 'AltLeft':
|
||||
case 'AltRight':
|
||||
return {
|
||||
...event,
|
||||
key: '…',
|
||||
code: null,
|
||||
altKey: modifierPressed
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
...event,
|
||||
notModifier: true,
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" src="../res-common/common.scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
@import "../res-common/variables";
|
||||
|
||||
.center-text {
|
||||
text-align: center;
|
||||
}
|
||||
.dark {
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
.hidden-input {
|
||||
position: absolute;
|
||||
z-index: -9999;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex flex-column json-level-indent">
|
||||
<div class="flex flex-col json-level-indent">
|
||||
<div class="flex flex-row" @click="expanded_internal = !expanded_internal">
|
||||
<div v-if="value_internal.key" class="item-key">
|
||||
"{{value_internal.key}}" <b>:</b>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex flex-column json-level-indent">
|
||||
<div class="flex flex-col json-level-indent">
|
||||
<div class="flex flex-row" @click="expanded_internal = !expanded_internal">
|
||||
<div class="item-key-line">
|
||||
<template v-if="label">
|
||||
23
src/csui/src/components/JsonEditor/json.scss
Normal file
23
src/csui/src/components/JsonEditor/json.scss
Normal file
@ -0,0 +1,23 @@
|
||||
.json-level-indent {
|
||||
padding-left: 2em !important;
|
||||
font-family: 'Overpass Mono', monospace;
|
||||
}
|
||||
.item-key {
|
||||
color: rgb(255, 196, 148);
|
||||
}
|
||||
.item-key-boolean-false {
|
||||
color: rgb(207, 149, 101)
|
||||
}
|
||||
|
||||
.json-value-boolean-true {
|
||||
color: rgb(150, 240, 198);
|
||||
}
|
||||
.json-value-boolean-false {
|
||||
color: rgb(241, 21, 21);
|
||||
}
|
||||
.json-value-number {
|
||||
color: rgb(121, 121, 238);
|
||||
}
|
||||
.json-value-string {
|
||||
color: rgb(226, 175, 7);
|
||||
}
|
||||
53
src/csui/src/components/QsElement.vue
Normal file
53
src/csui/src/components/QsElement.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="qsb flex flex-row flex-cross-center flex-center flex-nogrow"
|
||||
:class="{
|
||||
'id': selector.startsWith('#'),
|
||||
'class': selector.startsWith('.'),
|
||||
}">
|
||||
<div class="flex mt2px">{{selector}}</div> <span class="flex closeButton" @click="remove">×</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
selector: String,
|
||||
},
|
||||
methods: {
|
||||
remove() {
|
||||
this.$emit('remove');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mt2px {
|
||||
margin-top: 7px;
|
||||
}
|
||||
.id {
|
||||
border: 1px solid #d00;
|
||||
background-color: rgba(216, 94, 24, 0.25)
|
||||
}
|
||||
.class {
|
||||
border: 1px solid #33d;
|
||||
background-color: rgba(69, 69, 255, 0.25)
|
||||
}
|
||||
.closeButton {
|
||||
margin-top: 2px;
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
font-size: 1.5em;
|
||||
color: #e00;
|
||||
}
|
||||
.closeButton:hover {
|
||||
cursor: pointer;
|
||||
color: #fa6;
|
||||
}
|
||||
.qsb {
|
||||
cursor:default;
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
</style>
|
||||
@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<div class="flex flex-column">
|
||||
<div class="flex flex-col">
|
||||
<div v-if="!editing && !adding" class="flex flex-row">
|
||||
<div class="">
|
||||
<b>Query selector:</b> {{qs.string}}<br/>
|
||||
<b>Additional CSS:</b> {{qs.css || 'no style rules'}}
|
||||
</div>
|
||||
<div class="flex flex-column flex-nogrow">
|
||||
<div class="flex flex-col flex-nogrow">
|
||||
<a @click="editing = true">Edit</a>
|
||||
<a @click="$emit('delete')">Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex flex-row">
|
||||
<div class="flex flex-column">
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-row">
|
||||
<div class="flex label-secondary form-label">
|
||||
Query selector:
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex flex-column flex-center">
|
||||
<div class="flex flex-col flex-center">
|
||||
<div class="flex flex-self-center">
|
||||
{{label}}
|
||||
</div>
|
||||
@ -21,12 +21,10 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.uw-ultrawidify-container-root {
|
||||
.center-text {
|
||||
text-align: center;
|
||||
}
|
||||
.dark {
|
||||
opacity: 50%;
|
||||
}
|
||||
.center-text {
|
||||
text-align: center;
|
||||
}
|
||||
.dark {
|
||||
opacity: 50%;
|
||||
}
|
||||
</style>
|
||||
6
src/csui/src/mixins/ComputeActionsMixin.js
Normal file
6
src/csui/src/mixins/ComputeActionsMixin.js
Normal file
@ -0,0 +1,6 @@
|
||||
export default {
|
||||
// computed: {
|
||||
// aspectRatioActions: this.settings?.active.commands.crop,
|
||||
// stretchActions: this.settings?.active.commands.stretch
|
||||
// }
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
export default {
|
||||
computed: {
|
||||
scopeActions: function() {
|
||||
return this.settings.active.actions.filter(x => {
|
||||
return this.settings?.active.actions?.filter(x => {
|
||||
if (! x.scopes) {
|
||||
console.error('This action does not have a scope.', x);
|
||||
return false;
|
||||
@ -10,7 +10,7 @@ export default {
|
||||
}) || [];
|
||||
},
|
||||
extensionActions: function(){
|
||||
return this.scopeActions.filter(x => x.cmd.length === 1 && x.cmd[0].action === 'set-extension-mode') || [];
|
||||
return this.scopeActions.filter(x => x.cmd.length === 1 && x.cmd[0].action === 'set-ExtensionMode') || [];
|
||||
},
|
||||
aardActions: function(){
|
||||
return this.scopeActions.filter(x => x.cmd.length === 1 && x.cmd[0].action === 'set-autoar-mode') || [];
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex flex-column h100">
|
||||
<div class="flex flex-col h100">
|
||||
<div class="row">
|
||||
<span class="label">Ultrawidify version:</span><br/> {{addonVersion}}
|
||||
</div>
|
||||
@ -7,7 +7,7 @@
|
||||
<span class="label">Having an issue?</span><br/> Report <strike>undocumented features</strike> bugs using one of the following options (in order of preference):
|
||||
<ul>
|
||||
<li> <a target="_blank" href="https://github.com/tamius-han/ultrawidify/issues"><b>Github (preferred)</b></a><br/></li>
|
||||
<li>Email: <a target="_blank" :href="mailtoLink">{{gmailLink}}</a></li>
|
||||
<li>Email: <a target="_blank" :href="mailtoLink">tamius.han@gmail.com</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -48,7 +48,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
// reminder — webextension-polyfill doesn't seem to work in vue!
|
||||
addonVersion: BrowserDetect.firefox ? browser.runtime.getManifest().version : chrome.runtime.getManifest().version,
|
||||
addonVersion: BrowserDetect.firefox ? chrome.runtime.getManifest().version : chrome.runtime.getManifest().version,
|
||||
loggingEnabled: false,
|
||||
loggerSettings: '',
|
||||
loggerSettingsError: false,
|
||||
@ -76,7 +76,7 @@ Browser-related stuff (please ensure this section is correct):
|
||||
* Operating system: ${window.navigator.platform}
|
||||
`
|
||||
);
|
||||
this.mailtoLink = `mailto:${this.gmailLink}?subject=%5BUltrawidify%5D%20ENTER%20SUMMARY%20OF%20YOUR%20ISSUE%20HERE&body=${messageTemplate}`;
|
||||
this.mailtoLink = `mailto:tamius.han@gmail.com?subject=%5BUltrawidify%5D%20ENTER%20SUMMARY%20OF%20YOUR%20ISSUE%20HERE&body=${messageTemplate}`;
|
||||
},
|
||||
methods: {
|
||||
async updateLoggerSettings(allowLogging) {
|
||||
94
src/csui/src/popup/panels/PopupVideoSettings.vue
Normal file
94
src/csui/src/popup/panels/PopupVideoSettings.vue
Normal file
@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div class="flex flex-col" style="padding-bottom: 20px">
|
||||
<div class="flex flex-row">
|
||||
<mdicon name="crop" :size="24" />
|
||||
<h1>Crop video:</h1>
|
||||
</div>
|
||||
|
||||
<CropOptionsPanel
|
||||
style="margin-top: -2rem"
|
||||
:settings="settings"
|
||||
:eventBus="eventBus"
|
||||
:siteSettings="siteSettings"
|
||||
:isEditing="false"
|
||||
>
|
||||
</CropOptionsPanel>
|
||||
|
||||
<div class="flex flex-row">
|
||||
<mdicon name="crop" :size="24" />
|
||||
<h1>Stretch video:</h1>
|
||||
</div>
|
||||
|
||||
<StretchOptionsPanel
|
||||
style="margin-top: -2rem"
|
||||
:settings="settings"
|
||||
:eventBus="eventBus"
|
||||
:siteSettings="siteSettings"
|
||||
:isEditing="false"
|
||||
></StretchOptionsPanel>
|
||||
|
||||
<div class="flex flex-row">
|
||||
<mdicon name="crop" :size="24" />
|
||||
<h1>Zoom:</h1>
|
||||
</div>
|
||||
|
||||
<ZoomOptionsPanel
|
||||
style="margin-top: -2rem"
|
||||
:settings="settings"
|
||||
:eventBus="eventBus"
|
||||
:siteSettings="siteSettings"
|
||||
:isEditing="false"
|
||||
>
|
||||
</ZoomOptionsPanel>
|
||||
|
||||
<div class="flex flex-row">
|
||||
<mdicon name="crop" :size="24" />
|
||||
<h1>Video alignment:</h1>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row">
|
||||
<alignment-options-control-component
|
||||
:eventBus="eventBus"
|
||||
>
|
||||
</alignment-options-control-component>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CropOptionsPanel from '../../PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel';
|
||||
import StretchOptionsPanel from '../../PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue';
|
||||
import ZoomOptionsPanel from '../../PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
exec: null,
|
||||
};
|
||||
},
|
||||
mixins: [
|
||||
|
||||
],
|
||||
props: [
|
||||
'settings',
|
||||
'siteSettings',
|
||||
'eventBus',
|
||||
],
|
||||
components: {
|
||||
CropOptionsPanel, StretchOptionsPanel, ZoomOptionsPanel
|
||||
},
|
||||
created() {
|
||||
this.eventBus.subscribe('uw-config-broadcast', {function: (config) => this.handleConfigBroadcast(config)});
|
||||
},
|
||||
mounted() {
|
||||
this.eventBus.sendToTunnel('get-ar');
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex flex-column" style="padding-bottom: 20px; position: relative">
|
||||
<div class="flex flex-col" style="padding-bottom: 20px; position: relative">
|
||||
<!-- <div class="">
|
||||
<div class="label">Player picker</div>
|
||||
<div class="desc">
|
||||
@ -58,7 +58,7 @@
|
||||
</div>
|
||||
|
||||
<div v-if="playerManualQs">
|
||||
<div v-if="!playerByNodeIndex" class="flex flex-column">
|
||||
<div v-if="!playerByNodeIndex" class="flex flex-col">
|
||||
<div class="">Query selectors for player:</div>
|
||||
<input type="text"
|
||||
v-model="playerQs"
|
||||
@ -115,7 +115,7 @@
|
||||
<div class="description">
|
||||
This css will be inserted into webpage every time it loads.
|
||||
</div>
|
||||
<div class="flex flex-column">
|
||||
<div class="flex flex-col">
|
||||
<textarea
|
||||
v-model="playerCss"
|
||||
@change="updatePlayerCss"
|
||||
@ -135,7 +135,7 @@
|
||||
type="checkbox"
|
||||
/> Detect automatically
|
||||
</div>
|
||||
<div class="flex flex-column">
|
||||
<div class="flex flex-col">
|
||||
<div class="flex label-secondary form-label">Query selectors</div>
|
||||
<input type="text"
|
||||
v-model="videoQs"
|
||||
@ -144,7 +144,7 @@
|
||||
@blur="updateVideoQuerySelector"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-column">
|
||||
<div class="flex flex-col">
|
||||
<div class="flex label-secondary form-label">Additional style for video element</div>
|
||||
<input type="text"
|
||||
v-model="videoCss"
|
||||
@ -160,10 +160,10 @@
|
||||
Sometimes, the extension may misbehave as a result of issues and bugs present in your browser, operating system or your GPU driver.
|
||||
Some of the issues can be fixed by limiting certain functionalities of this addon.
|
||||
</div>
|
||||
<div class="flex flex-column">
|
||||
<div class="flex flex-col">
|
||||
<div
|
||||
v-if="BrowserDetect.anyChromium"
|
||||
class="workaround flex flex-column"
|
||||
class="workaround flex flex-col"
|
||||
>
|
||||
<div class="flex label-secondary form-label">
|
||||
<input :checked="settings?.active?.mitigations?.zoomLimit?.enabled"
|
||||
@ -250,23 +250,23 @@ export default {
|
||||
},
|
||||
props: {
|
||||
site: String,
|
||||
settings: Object,
|
||||
siteSettings: Object,
|
||||
},
|
||||
created() {
|
||||
try {
|
||||
this.videoManualQs = this.settings.active.sites[this.site]?.DOM?.video?.manual ?? this.videoManualQs;
|
||||
this.videoQs = this.settings.active.sites[this.site]?.DOM?.video?.querySelectors;
|
||||
this.videoCss = this.settings.active.sites[this.site]?.DOM?.video?.additionalCss;
|
||||
this.videoManualQs = this.siteSettings.data.currentDOMConfig?.elements?.video?.manual ?? this.videoManualQs;
|
||||
this.videoQs = this.siteSettings.data.currentDOMConfig?.elements?.video?.querySelectors;
|
||||
this.videoCss = this.siteSettings.data.currentDOMConfig?.elements?.video?.nodeCss;
|
||||
} catch (e) {
|
||||
// that's here just in case relevant settings for this site don't exist yet
|
||||
}
|
||||
|
||||
try {
|
||||
this.playerManualQs = this.settings.active.sites[this.site]?.DOM?.player?.manual ?? this.playerManualQs;
|
||||
this.playerQs = this.settings.active.sites[this.site]?.DOM?.player?.querySelectors;
|
||||
this.playerByNodeIndex = this.settings.active.sites[this.site]?.DOM?.player?.useRelativeAncestor ?? this.playerByNodeIndex;
|
||||
this.playerParentNodeIndex = this.settings.active.sites[this.site]?.DOM?.player?.videoAncestor;
|
||||
this.usePlayerAr = this.settings.active.sites[this.site]?.usePlayerArInFullscreen;
|
||||
this.playerManualQs = this.siteSettings.data.currentDOMConfig?.elements?.player?.manual ?? this.playerManualQs;
|
||||
this.playerQs = this.siteSettings.data.currentDOMConfig?.elements?.player?.querySelectors;
|
||||
this.playerByNodeIndex = !this.siteSettings.data.currentDOMConfig?.elements?.player?.querySelectors || this.playerByNodeIndex;
|
||||
this.playerParentNodeIndex = this.siteSettings.data.currentDOMConfig?.elements?.player?.index;
|
||||
// this.usePlayerAr = this.settings.active.sites[this.site]?.usePlayerArInFullscreen;
|
||||
} catch (e) {
|
||||
// that's here just in case relevant settings for this site don't exist yet
|
||||
}
|
||||
@ -295,32 +295,8 @@ export default {
|
||||
|
||||
observer.observe(saveButtonBait);
|
||||
},
|
||||
ensureSettings(scope) {
|
||||
if (! this.settings.active.sites[this.site]) {
|
||||
this.settings.active.sites[this.site] = {
|
||||
mode: ExtensionMode.Default,
|
||||
autoar: ExtensionMode.Default,
|
||||
type: 'user-added',
|
||||
stretch: StretchType.Default,
|
||||
videoAlignment: VideoAlignmentType.Default,
|
||||
keyboardShortcutsEnabled: ExtensionMode.Default,
|
||||
}
|
||||
}
|
||||
if (! this.settings.active.sites[this.site].DOM) {
|
||||
this.settings.active.sites[this.site].DOM = {};
|
||||
}
|
||||
if (! this.settings.active.sites[this.site].DOM[scope]) {
|
||||
this.settings.active.sites[this.site].DOM[scope] = {
|
||||
manual: false,
|
||||
querySelectors: '',
|
||||
additionalCss: '',
|
||||
useRelativeAncestor: scope === 'player' ? false : undefined,
|
||||
videoAncestor: undefined,
|
||||
playerNodeCss: scope === 'player' ? '' : undefined,
|
||||
}
|
||||
}
|
||||
},
|
||||
updateVideoQuerySelector() {
|
||||
this.siteSettings.set('currentDOMConfig')
|
||||
this.ensureSettings('video');
|
||||
this.settings.active.sites[this.site].DOM.video.querySelectors = this.videoQs;
|
||||
this.settings.save();
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user