Upgrade libraries
This commit is contained in:
parent
2e4226b828
commit
ca093f5b34
35033
package-lock.json
generated
35033
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
106
package.json
106
package.json
@ -4,17 +4,17 @@
|
|||||||
"description": "Aspect ratio fixer for youtube and other sites, with automatic aspect ratio detection. Supports ultrawide and other ratios.",
|
"description": "Aspect ratio fixer for youtube and other sites, with automatic aspect ratio detection. Supports ultrawide and other ratios.",
|
||||||
"author": "Tamius Han <tamius.han@gmail.com>",
|
"author": "Tamius Han <tamius.han@gmail.com>",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "npm run pre-build; cross-env NODE_ENV=production BROWSER=firefox CHANNEL=stable webpack --hide-modules",
|
"build": "npm run pre-build; cross-env NODE_ENV=production BROWSER=firefox CHANNEL=stable webpack",
|
||||||
"build-all": "bash ./scripts/build-all.sh",
|
"build-all": "bash ./scripts/build-all.sh",
|
||||||
"build-chrome": "cross-env NODE_ENV=production BROWSER=chrome CHANNEL=stable webpack --hide-modules",
|
"build-chrome": "cross-env NODE_ENV=production BROWSER=chrome CHANNEL=stable webpack",
|
||||||
"build-chrome:dev": "cross-env NODE_ENV=development BROWSER=chrome webpack --hide-modules",
|
"build-chrome:dev": "cross-env NODE_ENV=development BROWSER=chrome webpack",
|
||||||
"build-edge": "cross-env NODE_ENV=production BROWSER=edge CHANNEL=stable webpack --hide-modules",
|
"build-edge": "cross-env NODE_ENV=production BROWSER=edge CHANNEL=stable webpack",
|
||||||
"build-nightly": "cross-env NODE_ENV=development BROWSER=firefox CHANNEL=nightly webpack --hide-modules",
|
"build-nightly": "cross-env NODE_ENV=development BROWSER=firefox CHANNEL=nightly webpack",
|
||||||
"build-nightly-chrome": "cross-env NODE_ENV=development BROWSER=chrome CHANNEL=nightly webpack --hide-modules",
|
"build-nightly-chrome": "cross-env NODE_ENV=development BROWSER=chrome CHANNEL=nightly webpack",
|
||||||
"build-testing": "cross-env NODE_ENV=development BROWSER=firefox CHANNEL=testing webpack --hide-modules",
|
"build-testing": "cross-env NODE_ENV=development BROWSER=firefox CHANNEL=testing webpack",
|
||||||
"build-testing-chrome": "cross-env NODE_ENV=development BROWSER=chrome CHANNEL=testing webpack --hide-modules",
|
"build-testing-chrome": "cross-env NODE_ENV=development BROWSER=chrome CHANNEL=testing webpack",
|
||||||
"build-zip": "node scripts/build-zip.js",
|
"build-zip": "node scripts/build-zip.js",
|
||||||
"build:dev": "webpack --hide-modules",
|
"build:dev": "webpack",
|
||||||
"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": "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: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: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-ff": "rm -rf ./dist-ff && cross-env NODE_ENV=development CHANNEL=dev BROWSER=firefox npm run build:dev -- --watch",
|
||||||
@ -25,55 +25,61 @@
|
|||||||
"start:windows": "npm run dev:windows"
|
"start:windows": "npm run dev:windows"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/plugin-proposal-class-properties": "^7.16.0",
|
"@babel/plugin-proposal-class-properties": "^7.18.6",
|
||||||
"@mdi/font": "^6.5.95",
|
"@mdi/font": "^7.4.47",
|
||||||
"@mdi/js": "^6.4.95",
|
"@mdi/js": "^7.4.47",
|
||||||
"@types/resize-observer-browser": "^0.1.6",
|
"@types/resize-observer-browser": "^0.1.11",
|
||||||
"concurrently": "^5.3.0",
|
"concurrently": "^9.2.1",
|
||||||
"fs-extra": "^7.0.1",
|
"fs-extra": "^11.3.2",
|
||||||
"gl-matrix": "^3.4.3",
|
"gl-matrix": "^3.4.4",
|
||||||
"json-cyclic": "0.0.3",
|
"json-cyclic": "1.0.2",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
"mdi-vue": "^3.0.11",
|
"mdi-vue": "^3.0.13",
|
||||||
"typescript": "^4.4.4",
|
"typescript": "^5.9.3",
|
||||||
"vanilla-jsoneditor": "^3.3.0",
|
"vanilla-jsoneditor": "^3.10.0",
|
||||||
"vue": "^3.2.21",
|
"vue": "^3.5.25",
|
||||||
"vue-style-loader": "^4.1.3",
|
"vue-style-loader": "^4.1.3",
|
||||||
"vuex": "^4.0.2",
|
"vuex": "^4.1.0",
|
||||||
"vuex-webextensions": "^1.3.3",
|
"vuex-webextensions": "^1.3.3",
|
||||||
"webextension-polyfill": "^0.12.0"
|
"webextension-polyfill": "^0.12.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.16.0",
|
"@babel/core": "^7.28.5",
|
||||||
"@babel/preset-env": "^7.16.0",
|
"@babel/preset-env": "^7.28.5",
|
||||||
"@types/chrome": "0.0.240",
|
"@tailwindcss/postcss": "^4.1.17",
|
||||||
"@types/core-js": "^2.5.5",
|
"@types/chrome": "0.1.31",
|
||||||
"@types/es6-promise": "^3.3.0",
|
"@types/core-js": "^2.5.8",
|
||||||
"@types/firefox": "0.0.31",
|
"@types/es6-promise": "^3.3.2",
|
||||||
"@types/lodash": "^4.14.176",
|
"@types/firefox": "0.0.34",
|
||||||
"@types/node": "^14.17.32",
|
"@types/lodash": "^4.17.21",
|
||||||
"@vue/cli": "^4.5.15",
|
"@types/node": "^24.10.1",
|
||||||
"@vue/cli-plugin-typescript": "^4.5.15",
|
"@vue/cli": "^5.0.9",
|
||||||
"@vue/compiler-sfc": "^3.2.21",
|
"@vue/cli-plugin-typescript": "^5.0.9",
|
||||||
"archiver": "^3.0.0",
|
"@vue/compiler-sfc": "^3.5.25",
|
||||||
"babel-loader": "^8.2.3",
|
"archiver": "^7.0.1",
|
||||||
|
"babel-loader": "^10.0.0",
|
||||||
"babel-preset-es2020": "^1.0.2",
|
"babel-preset-es2020": "^1.0.2",
|
||||||
"copy-webpack-plugin": "^4.5.3",
|
"copy-webpack-plugin": "^13.0.1",
|
||||||
"cross-env": "^5.2.0",
|
"cross-env": "^10.1.0",
|
||||||
"css-loader": "^0.28.11",
|
"css-loader": "^7.1.2",
|
||||||
"ejs": "^2.7.4",
|
"ejs": "^3.1.10",
|
||||||
"file-loader": "^1.1.11",
|
"file-loader": "^6.2.0",
|
||||||
"mini-css-extract-plugin": "^0.4.4",
|
"mini-css-extract-plugin": "^2.9.4",
|
||||||
"node-sass": "^4.14.1",
|
"node-sass": "^9.0.0",
|
||||||
|
"postcss": "^8.5.6",
|
||||||
|
"postcss-preset-env": "^10.4.0",
|
||||||
|
"postcss-strip-inline-comments": "^0.1.5",
|
||||||
"resolve-url-loader": "^5.0.0",
|
"resolve-url-loader": "^5.0.0",
|
||||||
"sass-loader": "^7.1.0",
|
"sass-loader": "^16.0.6",
|
||||||
"ts-loader": "^8.3.0",
|
"tailwindcss": "^4.1.17",
|
||||||
|
"ts-loader": "^9.5.4",
|
||||||
"vue-cli-plugin-vue-next": "~0.1.4",
|
"vue-cli-plugin-vue-next": "~0.1.4",
|
||||||
"vue-loader": "^16.8.2",
|
"vue-loader": "^17.4.2",
|
||||||
"web-ext-types": "^2.3.0",
|
"vue-tsc": "^3.1.5",
|
||||||
"webpack": "^4.46.0",
|
"web-ext-types": "^3.2.1",
|
||||||
"webpack-chrome-extension-reloader": "^0.8.3",
|
"webpack": "^5.103.0",
|
||||||
"webpack-cli": "^3.3.12",
|
"webpack-cli": "^6.0.1",
|
||||||
"webpack-shell-plugin": "^0.5.0"
|
"webpack-shell-plugin": "^0.5.0",
|
||||||
|
"webpack-shell-plugin-next": "^2.3.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: [
|
||||||
|
require('@tailwindcss/postcss'),
|
||||||
|
require('autoprefixer'),
|
||||||
|
],
|
||||||
|
};
|
||||||
@ -688,23 +688,9 @@ export default {
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
// width: 100%;
|
|
||||||
// height: 100%;
|
|
||||||
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
||||||
// .context-item {
|
|
||||||
// font-size: .95rem;
|
|
||||||
// padding: 1rem 1.6rem;
|
|
||||||
// background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
// backdrop-filter: blur(16px) saturate(120%);
|
|
||||||
|
|
||||||
// white-space: nowrap;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .spawn-container {
|
|
||||||
// border: 1px solid white;
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.extension-status-messages {
|
.extension-status-messages {
|
||||||
@ -716,9 +702,6 @@ export default {
|
|||||||
|
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
|
|
||||||
// width: 112.25%;
|
|
||||||
// transform: translate(-12.5%, 12.5%) scale(0.75);
|
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
|
|||||||
@ -339,12 +339,13 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
// @import 'res/css/uwui-base.scss';
|
/*
|
||||||
@import 'res/css/colors.scss';
|
@import 'res/css/colors.scss';
|
||||||
@import 'res/css/font/overpass.css';
|
@import 'res/css/font/overpass.css';
|
||||||
@import 'res/css/font/overpass-mono.css';
|
@import 'res/css/font/overpass-mono.css';
|
||||||
@import 'res/css/common.scss';
|
@import 'res/css/common.scss';
|
||||||
@import './src/res-common/_variables';
|
@import './src/res-common/_variables';
|
||||||
|
*/
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
background-color: rgb(90, 28, 13);
|
background-color: rgb(90, 28, 13);
|
||||||
@ -352,10 +353,6 @@ export default {
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
|
|
||||||
// display: flex;
|
|
||||||
// flex-direction: row;
|
|
||||||
// justify-content: space-between;
|
|
||||||
|
|
||||||
border-bottom: 1px dotted #fa6;
|
border-bottom: 1px dotted #fa6;
|
||||||
|
|
||||||
|
|
||||||
@ -529,7 +526,6 @@ export default {
|
|||||||
|
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
// height: rem;
|
|
||||||
min-height: 3rem;
|
min-height: 3rem;
|
||||||
|
|
||||||
border-bottom: 1px solid rgba(128, 128, 128, 0.5);
|
border-bottom: 1px solid rgba(128, 128, 128, 0.5);
|
||||||
@ -562,9 +558,6 @@ export default {
|
|||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
color: #eee;
|
color: #eee;
|
||||||
|
|
||||||
// .label {
|
|
||||||
// color: rgb(239, 192, 152);
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,9 +1,8 @@
|
|||||||
@import "colors.scss";
|
/* @import "colors.scss"; */
|
||||||
|
/*
|
||||||
@import "fonts.scss";
|
@import "fonts.scss";
|
||||||
@import "flex.scss";
|
@import "flex.scss";
|
||||||
// @import "~/@mdi/font/css/materialdesignicons.css";
|
*/
|
||||||
|
|
||||||
// @import "form.scss";
|
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@ -255,10 +254,6 @@ small {
|
|||||||
button,
|
button,
|
||||||
.button {
|
.button {
|
||||||
/*display: inline-block;*/
|
/*display: inline-block;*/
|
||||||
// padding-top: 8px;
|
|
||||||
// padding-bottom: 3px;
|
|
||||||
//padding-left: 5px;
|
|
||||||
//padding-right: 5px;
|
|
||||||
border: 1px solid rgb(39, 39, 39);
|
border: 1px solid rgb(39, 39, 39);
|
||||||
margin-top: 3px;
|
margin-top: 3px;
|
||||||
margin-bottom: 3px;
|
margin-bottom: 3px;
|
||||||
@ -402,10 +397,8 @@ button,
|
|||||||
}
|
}
|
||||||
|
|
||||||
.experimental::after {
|
.experimental::after {
|
||||||
// content: "Experimental";
|
|
||||||
content: "Ⓔ";
|
content: "Ⓔ";
|
||||||
color: #ffde12;
|
color: #ffde12;
|
||||||
// background-color: #1f1f1f;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: .75em;
|
font-size: .75em;
|
||||||
font-variant: small-caps;
|
font-variant: small-caps;
|
||||||
@ -416,9 +409,7 @@ button,
|
|||||||
}
|
}
|
||||||
.experimental:hover::after {
|
.experimental:hover::after {
|
||||||
content: "Ⓔ Experimental";
|
content: "Ⓔ Experimental";
|
||||||
// content: "";
|
|
||||||
color: #ffde12;
|
color: #ffde12;
|
||||||
// background-color: #1f1f1f;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: .75em;
|
font-size: .75em;
|
||||||
font-variant: small-caps;
|
font-variant: small-caps;
|
||||||
@ -431,7 +422,6 @@ button,
|
|||||||
.sticky-bottom {
|
.sticky-bottom {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
// position: fixed;
|
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
background-color: rgba($background-primary, 0.7);
|
background-color: rgba($background-primary, 0.7);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,12 +1,14 @@
|
|||||||
@import 'flex.scss';
|
/* @import 'flex.scss';
|
||||||
@import 'colors.scss';
|
@import 'colors.scss';
|
||||||
@import 'common.scss';
|
@import 'common.scss';
|
||||||
|
*/
|
||||||
|
|
||||||
* {
|
* {
|
||||||
font-family: 'Overpass';
|
font-family: 'Overpass';
|
||||||
}
|
}
|
||||||
|
|
||||||
.uw-ultrawidify-container-root {
|
.uw-ultrawidify-container-root {
|
||||||
|
/*
|
||||||
// here's the defaults:
|
// here's the defaults:
|
||||||
// all: initial;
|
// all: initial;
|
||||||
// * {
|
// * {
|
||||||
@ -18,6 +20,7 @@
|
|||||||
// all: declaration overrides everything.)
|
// all: declaration overrides everything.)
|
||||||
|
|
||||||
// we put our UI _over_ site's player:
|
// we put our UI _over_ site's player:
|
||||||
|
*/
|
||||||
z-index: 999999;
|
z-index: 999999;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -26,10 +29,10 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
background-color: none transparent !important;
|
background-color: none transparent !important;
|
||||||
|
|
||||||
// Ensure we're display:block
|
/* Ensure we're display:block */
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
// we are click-through by default:
|
/* we are click-through by default: */
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -25,112 +25,17 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="tab-main flex flex-row">
|
<SettingsWindowContent
|
||||||
<div class="tab-row flex flex-col grow-0 shrink-0">
|
:tabs="tabs"
|
||||||
<div
|
:selectedTab="selectedTab"
|
||||||
v-for="tab of tabs"
|
:settings="settings"
|
||||||
:key="tab.id"
|
:eventBus="eventBus"
|
||||||
>
|
:logger="logger"
|
||||||
<div
|
:in-player="inPlayer"
|
||||||
v-if="!tab.hidden"
|
:site="site"
|
||||||
class="tab"
|
@selectTab="selectTab"
|
||||||
:class="{
|
@preventClose="setPreventClose"
|
||||||
'active': tab.id === selectedTab,
|
></SettingsWindowContent>
|
||||||
'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>
|
|
||||||
<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>
|
|
||||||
<PlayerUiSettings
|
|
||||||
v-if="selectedTab === 'playerUiSettings'"
|
|
||||||
:settings="settings"
|
|
||||||
:siteSettings="siteSettings"
|
|
||||||
:eventBus="eventBus"
|
|
||||||
>
|
|
||||||
</PlayerUiSettings>
|
|
||||||
<BaseExtensionSettings
|
|
||||||
v-if="selectedTab === 'extensionSettings'"
|
|
||||||
:settings="settings"
|
|
||||||
:siteSettings="siteSettings"
|
|
||||||
:site="site"
|
|
||||||
:enableSettingsEditor="true"
|
|
||||||
></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>
|
|
||||||
<!-- <ResetBackupPanel
|
|
||||||
v-if="selectedTab === 'resetBackup'"
|
|
||||||
:settings="settings"
|
|
||||||
>
|
|
||||||
</ResetBackupPanel> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
@ -165,19 +70,6 @@ export default {
|
|||||||
statusFlags: {
|
statusFlags: {
|
||||||
hasDrm: undefined,
|
hasDrm: undefined,
|
||||||
},
|
},
|
||||||
|
|
||||||
tabs: [
|
|
||||||
// {id: 'videoSettings', label: 'Video settings', icon: 'crop'},
|
|
||||||
{id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
|
|
||||||
{id: 'playerUiSettings', label: 'UI and keyboard', icon: 'movie-cog-outline' },
|
|
||||||
{id: 'playerDetection', label: 'Player detection', icon: 'television-play'},
|
|
||||||
{id: 'autodetectionSettings', label: 'Autodetection options', icon: 'auto-fix'},
|
|
||||||
// {id: 'advancedOptions', label: 'Advanced options', icon: 'cogs' },
|
|
||||||
{id: 'changelog', label: 'What\'s new', icon: 'alert-decagram' },
|
|
||||||
{id: 'about', label: 'About', icon: 'information-outline'},
|
|
||||||
{id: 'debugging', label: 'Debugging', icon: 'bug-outline', hidden: true},
|
|
||||||
],
|
|
||||||
selectedTab: 'extensionSettings',
|
|
||||||
BrowserDetect: BrowserDetect,
|
BrowserDetect: BrowserDetect,
|
||||||
preventClose: false,
|
preventClose: false,
|
||||||
siteSettings: null,
|
siteSettings: null,
|
||||||
@ -249,19 +141,12 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '../res/css/uwui-base.scss';
|
/*@import '../res/css/uwui-base.scss';
|
||||||
@import '../res/css/colors.scss';
|
@import '../res/css/colors.scss';
|
||||||
@import '../res/css/font/overpass.css';
|
@import '../res/css/font/overpass.css';
|
||||||
@import '../res/css/font/overpass-mono.css';
|
@import '../res/css/font/overpass-mono.css';
|
||||||
@import '../res/css/common.scss';
|
@import '../res/css/common.scss';
|
||||||
@import '../src/res-common/_variables';
|
@import '../src/res-common/_variables';*/
|
||||||
|
|
||||||
// .relative-wrapper {
|
|
||||||
// position: relative;
|
|
||||||
// width: 100%;
|
|
||||||
// height: 100%;
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.tab-row {
|
.tab-row {
|
||||||
@ -416,10 +301,6 @@ export default {
|
|||||||
&.highlight-tab {
|
&.highlight-tab {
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
color: #eee;
|
color: #eee;
|
||||||
|
|
||||||
// .label {
|
|
||||||
// color: rgb(239, 192, 152);
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -81,9 +81,6 @@ export default {
|
|||||||
<style lang="scss" scoped module>
|
<style lang="scss" scoped module>
|
||||||
.alignment-box {
|
.alignment-box {
|
||||||
aspect-ratio: 1;
|
aspect-ratio: 1;
|
||||||
// width: 100%;
|
|
||||||
// min-width: 40px;
|
|
||||||
// max-width: 80px;
|
|
||||||
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
|||||||
@ -338,11 +338,6 @@ export default {
|
|||||||
<style lang="scss" src="@csui/src/res-common/common.scss" scoped module></style>
|
<style lang="scss" src="@csui/src/res-common/common.scss" scoped module></style>
|
||||||
|
|
||||||
<style lang="scss" scoped module>
|
<style lang="scss" scoped module>
|
||||||
@import '../res-common/variables';
|
|
||||||
|
|
||||||
// .aard-settings-group {
|
|
||||||
// max-width: 69rem;
|
|
||||||
// }
|
|
||||||
|
|
||||||
.performance-graph-container {
|
.performance-graph-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -361,7 +356,7 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
// graph is 100 ms wide
|
/* graph is 100 ms wide */
|
||||||
.time-budget {
|
.time-budget {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -373,15 +368,12 @@ export default {
|
|||||||
|
|
||||||
&.hz144 {
|
&.hz144 {
|
||||||
width: 6.9%;
|
width: 6.9%;
|
||||||
// background-color: rgba(143, 143, 235, 0.47);
|
|
||||||
}
|
}
|
||||||
&.hz120 {
|
&.hz120 {
|
||||||
width: 1.39%;
|
width: 1.39%;
|
||||||
// background-color: rgba(108, 108, 211, 0.441);
|
|
||||||
}
|
}
|
||||||
&.hz60 {
|
&.hz60 {
|
||||||
width: 8.33%;
|
width: 8.33%;
|
||||||
// background-color: rgba(78, 78, 182, 0.327);
|
|
||||||
border-right: 2px solid rgb(96, 96, 227);
|
border-right: 2px solid rgb(96, 96, 227);
|
||||||
&::after {
|
&::after {
|
||||||
content: '60fps';
|
content: '60fps';
|
||||||
@ -400,7 +392,6 @@ export default {
|
|||||||
}
|
}
|
||||||
&.hz30 {
|
&.hz30 {
|
||||||
width: 16.67%;
|
width: 16.67%;
|
||||||
// background-color: rgba(56, 56, 151, 0.308);
|
|
||||||
border-right: 2px solid #fb772a;
|
border-right: 2px solid #fb772a;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
@ -420,7 +411,6 @@ export default {
|
|||||||
}
|
}
|
||||||
&.hz24 {
|
&.hz24 {
|
||||||
width: 8.33%;
|
width: 8.33%;
|
||||||
// background-color: rgba(37, 37, 118, 0.269);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -417,13 +417,7 @@ export default({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" src="../../res/css/flex.scss" scoped module></style>
|
|
||||||
<style lang="scss" src="@csui/src/res-common/panels.scss" scoped module></style>
|
|
||||||
<style lang="scss" src="@csui/src/res-common/common.scss" scoped module></style>
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "@csui/res/css/colors.scss";
|
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
@ -513,8 +507,6 @@ p {
|
|||||||
|
|
||||||
.element-tree {
|
.element-tree {
|
||||||
.element-row {
|
.element-row {
|
||||||
// display: flex;
|
|
||||||
// flex-direction: row;
|
|
||||||
margin: 0.5rem;
|
margin: 0.5rem;
|
||||||
|
|
||||||
.status {
|
.status {
|
||||||
@ -569,13 +561,6 @@ p {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// .css-fixes {
|
|
||||||
// // display: flex;
|
|
||||||
// // flex-direction: row;
|
|
||||||
// // flex-wrap: wrap;
|
|
||||||
// // align-items: flex-start;
|
|
||||||
// // justify-content:flex-start;
|
|
||||||
// }
|
|
||||||
.css-line {
|
.css-line {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
flex-grow: 0;
|
flex-grow: 0;
|
||||||
|
|||||||
404
src/csui/src/SettingsWindowContent.vue
Normal file
404
src/csui/src/SettingsWindowContent.vue
Normal file
@ -0,0 +1,404 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="popup-panel flex flex-col uw-clickable h-full main-window relative"
|
||||||
|
>
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-if="!tab.hidden"
|
||||||
|
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>
|
||||||
|
<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>
|
||||||
|
<PlayerUiSettings
|
||||||
|
v-if="selectedTab === 'playerUiSettings'"
|
||||||
|
:settings="settings"
|
||||||
|
:siteSettings="siteSettings"
|
||||||
|
:eventBus="eventBus"
|
||||||
|
>
|
||||||
|
</PlayerUiSettings>
|
||||||
|
<BaseExtensionSettings
|
||||||
|
v-if="selectedTab === 'extensionSettings'"
|
||||||
|
:settings="settings"
|
||||||
|
:siteSettings="siteSettings"
|
||||||
|
:site="site"
|
||||||
|
:enableSettingsEditor="true"
|
||||||
|
></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>
|
||||||
|
<!-- <ResetBackupPanel
|
||||||
|
v-if="selectedTab === 'resetBackup'"
|
||||||
|
:settings="settings"
|
||||||
|
>
|
||||||
|
</ResetBackupPanel> -->
|
||||||
|
</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 '@csui/src/PlayerUiPanels/AboutPanel.vue'
|
||||||
|
import PlayerUiSettings from './PlayerUiPanels/PlayerUiSettings.vue'
|
||||||
|
import ResetBackupPanel from './PlayerUiPanels/ResetBackupPanel.vue'
|
||||||
|
import SupportLevelIndicator from '@csui/src/components/SupportLevelIndicator.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
VideoSettings,
|
||||||
|
PlayerDetectionPanel,
|
||||||
|
BaseExtensionSettings,
|
||||||
|
AutodetectionSettingsPanel,
|
||||||
|
DebugPanel,
|
||||||
|
PlayerUiSettings,
|
||||||
|
ChangelogPanel,
|
||||||
|
AboutPanel,
|
||||||
|
SupportLevelIndicator,
|
||||||
|
ResetBackupPanel,
|
||||||
|
},
|
||||||
|
mixins: [],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
statusFlags: {
|
||||||
|
hasDrm: undefined,
|
||||||
|
},
|
||||||
|
|
||||||
|
tabs: [
|
||||||
|
// {id: 'videoSettings', label: 'Video settings', icon: 'crop'},
|
||||||
|
{id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
|
||||||
|
{id: 'playerUiSettings', label: 'UI and keyboard', icon: 'movie-cog-outline' },
|
||||||
|
{id: 'playerDetection', label: 'Player detection', icon: 'television-play'},
|
||||||
|
{id: 'autodetectionSettings', label: 'Autodetection options', icon: 'auto-fix'},
|
||||||
|
// {id: 'advancedOptions', label: 'Advanced options', icon: 'cogs' },
|
||||||
|
{id: 'changelog', label: 'What\'s new', icon: 'alert-decagram' },
|
||||||
|
{id: 'about', label: 'About', icon: 'information-outline'},
|
||||||
|
{id: 'debugging', label: 'Debugging', icon: 'bug-outline', hidden: true},
|
||||||
|
],
|
||||||
|
selectedTab: 'extensionSettings',
|
||||||
|
BrowserDetect: BrowserDetect,
|
||||||
|
preventClose: false,
|
||||||
|
siteSettings: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: [
|
||||||
|
'settings',
|
||||||
|
'eventBus',
|
||||||
|
'logger',
|
||||||
|
'in-player',
|
||||||
|
'site',
|
||||||
|
'defaultTab'
|
||||||
|
],
|
||||||
|
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.settings.listenAfterChange(this.setDebugTabVisibility);
|
||||||
|
|
||||||
|
if (this.defaultTab) {
|
||||||
|
this.selectedTab = this.defaultTab;
|
||||||
|
}
|
||||||
|
this.siteSettings = this.settings.getSiteSettings({site: this.site});
|
||||||
|
this.tabs.find(x => x.id === 'changelog').highlight = !this.settings.active?.whatsNewChecked;
|
||||||
|
|
||||||
|
this.eventBus.subscribe(
|
||||||
|
'uw-show-ui',
|
||||||
|
{
|
||||||
|
source: this,
|
||||||
|
function: () => {
|
||||||
|
if (this.inPlayer) {
|
||||||
|
return; // show-ui is only intended for global overlay
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
this.setDebugTabVisibility();
|
||||||
|
},
|
||||||
|
destroyed() {
|
||||||
|
this.settings.removeListenerAfterChange(this.setDebugTabVisibility);
|
||||||
|
this.eventBus.unsubscribeAll(this);
|
||||||
|
},
|
||||||
|
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);
|
||||||
|
},
|
||||||
|
setDebugTabVisibility() {
|
||||||
|
const debugTab = this.tabs.find( x => x.id === 'debugging');
|
||||||
|
if (debugTab) {
|
||||||
|
debugTab.hidden = !this.settings.active.ui.devMode;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</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';
|
||||||
|
*/
|
||||||
|
|
||||||
|
.tab-row {
|
||||||
|
width: 22rem;
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-main {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.site-support-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: bottom;
|
||||||
|
|
||||||
|
.site-support-site {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: 6rem;
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-title, .popup-title h1 {
|
||||||
|
font-size: 48px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -82,7 +82,6 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
// background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
backdrop-filter: saturate(50%) brightness(50%) blur(1rem);
|
backdrop-filter: saturate(50%) brightness(50%) blur(1rem);
|
||||||
z-index: 99999;
|
z-index: 99999;
|
||||||
|
|
||||||
|
|||||||
@ -174,7 +174,6 @@ export default {
|
|||||||
|
|
||||||
<style lang="scss" src="@csui/src/res-common/common.scss" scoped></style>
|
<style lang="scss" src="@csui/src/res-common/common.scss" scoped></style>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "../res-common/variables";
|
|
||||||
|
|
||||||
.center-text {
|
.center-text {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|||||||
@ -79,7 +79,6 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
// background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
backdrop-filter: saturate(50%) brightness(50%) blur(1rem);
|
backdrop-filter: saturate(50%) brightness(50%) blur(1rem);
|
||||||
z-index: 99999;
|
z-index: 99999;
|
||||||
|
|
||||||
|
|||||||
@ -191,7 +191,6 @@ button, .button {
|
|||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
// border: 0px solid transparent;
|
|
||||||
border: 1px solid rgba(255, 171, 102, 0.42);
|
border: 1px solid rgba(255, 171, 102, 0.42);
|
||||||
|
|
||||||
padding: 0.5rem 1rem 0.25rem;
|
padding: 0.5rem 1rem 0.25rem;
|
||||||
@ -208,7 +207,6 @@ button, .button {
|
|||||||
margin-top: 0.25rem;
|
margin-top: 0.25rem;
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
margin-left: 5rem;
|
margin-left: 5rem;
|
||||||
// width: 100%;
|
|
||||||
box-sizing:border-box;
|
box-sizing:border-box;
|
||||||
|
|
||||||
&.error {
|
&.error {
|
||||||
@ -241,9 +239,6 @@ button, .button {
|
|||||||
padding-right: 0.25rem;
|
padding-right: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// .input-slider {
|
|
||||||
// width: 480px;
|
|
||||||
// }
|
|
||||||
.warning-lite {
|
.warning-lite {
|
||||||
padding-right: 16px;
|
padding-right: 16px;
|
||||||
padding-bottom: 16px;
|
padding-bottom: 16px;
|
||||||
|
|||||||
@ -156,7 +156,7 @@ const ExtensionConf: SettingsInterface = {
|
|||||||
|
|
||||||
aard: {
|
aard: {
|
||||||
aardType: 'auto',
|
aardType: 'auto',
|
||||||
useLegacy: true,
|
useLegacy: false,
|
||||||
|
|
||||||
polling: {
|
polling: {
|
||||||
runInBackgroundTabs: AardPollingOptions.Reduced,
|
runInBackgroundTabs: AardPollingOptions.Reduced,
|
||||||
|
|||||||
@ -107,9 +107,9 @@ class Logger {
|
|||||||
}
|
}
|
||||||
|
|
||||||
static syncConfig(callback: (x) => void) {
|
static syncConfig(callback: (x) => void) {
|
||||||
chrome.storage.onChanged.addListener( (changes, area) => {
|
chrome.storage.onChanged.addListener( (changes: any, area: string) => {
|
||||||
if (changes.uwLogger) {
|
if (changes.uwLogger) {
|
||||||
const newLoggerConf = JSON.parse(changes.uwLogger.newValue)
|
const newLoggerConf = JSON.parse(changes.uwLogger.newValue as any)
|
||||||
if (process.env.CHANNEL === 'dev') {
|
if (process.env.CHANNEL === 'dev') {
|
||||||
console.info('Logger settings reloaded. New conf:', newLoggerConf);
|
console.info('Logger settings reloaded. New conf:', newLoggerConf);
|
||||||
}
|
}
|
||||||
@ -172,7 +172,7 @@ class Logger {
|
|||||||
this.temp_disable = false;
|
this.temp_disable = false;
|
||||||
this.stopTime = this.conf.timeout ? performance.now() + (this.conf.timeout * 1000) : undefined;
|
this.stopTime = this.conf.timeout ? performance.now() + (this.conf.timeout * 1000) : undefined;
|
||||||
|
|
||||||
chrome.storage.onChanged.addListener( (changes, area) => {
|
chrome.storage.onChanged.addListener( (changes: any, area: any) => {
|
||||||
if (process.env.CHANNEL === 'dev') {
|
if (process.env.CHANNEL === 'dev') {
|
||||||
if (!changes.uwLogger) {
|
if (!changes.uwLogger) {
|
||||||
// console.info('[Logger::<storage/on change> No new logger settings!');
|
// console.info('[Logger::<storage/on change> No new logger settings!');
|
||||||
@ -195,7 +195,7 @@ class Logger {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
storageChangeListener(changes, area) {
|
storageChangeListener(changes: any, area: any) {
|
||||||
if (!changes.uwLogger) {
|
if (!changes.uwLogger) {
|
||||||
console.info('We dont have any logging settings, not processing frther');
|
console.info('We dont have any logging settings, not processing frther');
|
||||||
return;
|
return;
|
||||||
|
|||||||
@ -42,7 +42,7 @@ export class LogAggregator {
|
|||||||
history: any[];
|
history: any[];
|
||||||
|
|
||||||
static async getConfig() {
|
static async getConfig() {
|
||||||
let ret = await chrome.storage.local.get(STORAGE_LOG_SETTINGS_KEY);
|
let ret: any = await chrome.storage.local.get(STORAGE_LOG_SETTINGS_KEY);
|
||||||
|
|
||||||
if (process.env.CHANNEL === 'dev') {
|
if (process.env.CHANNEL === 'dev') {
|
||||||
try {
|
try {
|
||||||
@ -73,7 +73,7 @@ export class LogAggregator {
|
|||||||
}
|
}
|
||||||
|
|
||||||
static syncConfig(callback: (x) => void) {
|
static syncConfig(callback: (x) => void) {
|
||||||
chrome.storage.onChanged.addListener( (changes, area) => {
|
chrome.storage.onChanged.addListener( (changes: any, area) => {
|
||||||
if (changes.uwLogger) {
|
if (changes.uwLogger) {
|
||||||
const newLoggerConf = JSON.parse(changes.uwLogger.newValue)
|
const newLoggerConf = JSON.parse(changes.uwLogger.newValue)
|
||||||
if (process.env.CHANNEL === 'dev') {
|
if (process.env.CHANNEL === 'dev') {
|
||||||
|
|||||||
@ -1,7 +1,5 @@
|
|||||||
import { settings } from 'cluster'
|
|
||||||
import SettingsInterface from '@src/common/interfaces/SettingsInterface';
|
import SettingsInterface from '@src/common/interfaces/SettingsInterface';
|
||||||
|
|
||||||
|
|
||||||
export interface SettingsSnapshot {
|
export interface SettingsSnapshot {
|
||||||
isAutomatic?: boolean;
|
isAutomatic?: boolean;
|
||||||
isProtected?: boolean;
|
isProtected?: boolean;
|
||||||
@ -92,7 +90,7 @@ export class SettingsSnapshotManager {
|
|||||||
async listSnapshots(): Promise<SettingsSnapshot[]> {
|
async listSnapshots(): Promise<SettingsSnapshot[]> {
|
||||||
const ret = await chrome.storage.local.get('uwSettings-snapshots');
|
const ret = await chrome.storage.local.get('uwSettings-snapshots');
|
||||||
try {
|
try {
|
||||||
const json = JSON.parse(ret['uwSettings-snapshots']) as SettingsSnapshot[];
|
const json = JSON.parse(ret['uwSettings-snapshots'] as string) as SettingsSnapshot[];
|
||||||
return json;
|
return json;
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
return [] as SettingsSnapshot[];
|
return [] as SettingsSnapshot[];
|
||||||
|
|||||||
33
src/ext/lib/settings/migrate-major-version.ts
Normal file
33
src/ext/lib/settings/migrate-major-version.ts
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
import SettingsInterface from '../../../common/interfaces/SettingsInterface';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Upgrading from v5 to v6 introduced major changes in the settings structure. As such, upgrading from v5 to v6
|
||||||
|
* start with default settings for v6, and then manually migrate some of the more important settings from v5.
|
||||||
|
* @param currentSettings
|
||||||
|
* @param defaultSettings
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export function migrate5to6(currentSettings: SettingsInterface & any, defaultSettings: SettingsInterface): SettingsInterface {
|
||||||
|
// if settings do not have a version, return default settings.
|
||||||
|
// This is okay, because currentSettings.version should be undefined only if settings are either very ancient
|
||||||
|
// or settings were never modified at all.
|
||||||
|
if (!currentSettings.version) {
|
||||||
|
return defaultSettings;
|
||||||
|
}
|
||||||
|
|
||||||
|
// do not perform migration if the version is already 6 or higher
|
||||||
|
const [majorVersion] = currentSettings.version.split('.');
|
||||||
|
if (+majorVersion >= 6) {
|
||||||
|
return currentSettings;
|
||||||
|
}
|
||||||
|
|
||||||
|
const newSettings = JSON.parse(JSON.stringify(defaultSettings));
|
||||||
|
|
||||||
|
// TODO: migrate the following:
|
||||||
|
// * when migrating from v5, default extension mode should be enabled for all sites
|
||||||
|
// unless it was changed by the user
|
||||||
|
// * keyboard shortcuts should be migrated
|
||||||
|
// * attempt to migrate custom site settings for users's custom sites
|
||||||
|
|
||||||
|
return newSettings;
|
||||||
|
}
|
||||||
56
src/ext/lib/uwui/BasicNotifications.ts
Normal file
56
src/ext/lib/uwui/BasicNotifications.ts
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
export class BasicNotifications {
|
||||||
|
|
||||||
|
bodyElement: HTMLBodyElement;
|
||||||
|
basicNotificationContainer: HTMLDivElement;
|
||||||
|
isIframe = window.self !== window.top;
|
||||||
|
activeNotifications = [];
|
||||||
|
notificationCount = 0;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.bodyElement = document.body as HTMLBodyElement;
|
||||||
|
this.createNotificationContainer();
|
||||||
|
}
|
||||||
|
|
||||||
|
private createNotificationContainer() {
|
||||||
|
this.basicNotificationContainer = document.createElement('div')
|
||||||
|
this.basicNotificationContainer.style.all = 'initial';
|
||||||
|
this.basicNotificationContainer.style.fontSize = '16px';
|
||||||
|
this.basicNotificationContainer.style.fontFamily = "'Overpass', sans-serif";
|
||||||
|
this.basicNotificationContainer.style.position = 'fixed';
|
||||||
|
this.basicNotificationContainer.style.left = '0';
|
||||||
|
this.basicNotificationContainer.style.top = '0';
|
||||||
|
this.basicNotificationContainer.style.width = '100vw';
|
||||||
|
this.basicNotificationContainer.style.height = '100vh';
|
||||||
|
this.basicNotificationContainer.style.zIndex = '999999';
|
||||||
|
this.basicNotificationContainer.style.pointerEvents = 'none';
|
||||||
|
this.basicNotificationContainer.style.display = 'flex';
|
||||||
|
this.basicNotificationContainer.style.flexDirection = 'column';
|
||||||
|
|
||||||
|
this.bodyElement.appendChild(this.basicNotificationContainer);
|
||||||
|
}
|
||||||
|
|
||||||
|
showNotification(notification: {title: string, body?: string, expire?: number | false}) {
|
||||||
|
if (this.isIframe) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const notificationDiv = document.createElement('div');
|
||||||
|
const notificationId = this.notificationCount++;
|
||||||
|
notificationDiv.innerHTML = `
|
||||||
|
<div style="
|
||||||
|
display: flex; flex-direction: row;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #fff;
|
||||||
|
backdrop-filter: blur(1rem) brightness(0.33);
|
||||||
|
margin: 1rem;
|
||||||
|
">
|
||||||
|
<div style="display: flex; flex-direction: column;">
|
||||||
|
<div><b style="text: #fff">${notification.title}</b></div>
|
||||||
|
${notification.body ? `<div style="color: #ccc">${document.body}</div>` : ''}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button id="ultrawidify-uw-notification-id-${notificationId}">Dismiss</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,5 +1,4 @@
|
|||||||
import ExtensionMode from '../../../common/enums/ExtensionMode.enum';
|
import ExtensionMode from '@src/common/enums/ExtensionMode.enum';
|
||||||
import { EventBusConnector } from '../EventBus';
|
|
||||||
|
|
||||||
if (process.env.CHANNEL !== 'stable'){
|
if (process.env.CHANNEL !== 'stable'){
|
||||||
console.info("Loading: UI");
|
console.info("Loading: UI");
|
||||||
|
|||||||
115
src/main.css
Normal file
115
src/main.css
Normal file
@ -0,0 +1,115 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Overpass';
|
||||||
|
src: url('/ui/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('/ui/res/fonts/overpass-webfont/overpass-thin-italic.woff2') format('woff2');
|
||||||
|
font-weight: 200;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Overpass';
|
||||||
|
src: url('/ui/res/fonts/overpass-webfont/overpass-extralight.woff2') format('woff2');
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Overpass';
|
||||||
|
src: url('/ui/res/fonts/overpass-webfont/overpass-extralight-italic.woff2') format('woff2');
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Overpass';
|
||||||
|
src: url('/ui/res/fonts/overpass-webfont/overpass-light.woff2') format('woff2');
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Overpass';
|
||||||
|
src: url('/ui/res/fonts/overpass-webfont/overpass-light-italic.woff2') format('woff2');
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Overpass';
|
||||||
|
src: url('/ui/res/fonts/overpass-webfont/overpass-regular.woff2') format('woff2');
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Overpass';
|
||||||
|
src: url('/ui/res/fonts/overpass-webfont/overpass-italic.woff2') format('woff2');
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Overpass';
|
||||||
|
src: url('/ui/res/fonts/overpass-webfont/overpass-semibold.woff2') format('woff2');
|
||||||
|
font-weight: 600;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Overpass';
|
||||||
|
src: url('/ui/res/fonts/overpass-webfont/overpass-semibold-italic.woff2') format('woff2');
|
||||||
|
font-weight: 600;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Overpass';
|
||||||
|
src: url('/ui/res/fonts/overpass-webfont/overpass-bold.woff2') format('woff2');
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Overpass';
|
||||||
|
src: url('/ui/res/fonts/overpass-webfont/overpass-bold-italic.woff2') format('woff2');
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Overpass mono';
|
||||||
|
src: url('/ui/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('/ui/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('/ui/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('/ui/res/fonts/overpass-mono-webfont/overpass-mono-bold.woff2') format('woff2');
|
||||||
|
font-weight: 600;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
@ -31,6 +31,11 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
|
"options_ui": {
|
||||||
|
"page": "ui/pages/settings/index.html",
|
||||||
|
"open_in_tab": true
|
||||||
|
},
|
||||||
|
|
||||||
"web_accessible_resources": [
|
"web_accessible_resources": [
|
||||||
{
|
{
|
||||||
"resources": [
|
"resources": [
|
||||||
@ -42,7 +47,7 @@
|
|||||||
"res/icons/*",
|
"res/icons/*",
|
||||||
"res/img/*",
|
"res/img/*",
|
||||||
"csui/*",
|
"csui/*",
|
||||||
"install/*"
|
"ui/*"
|
||||||
],
|
],
|
||||||
"matches": [
|
"matches": [
|
||||||
"*://*/*"
|
"*://*/*"
|
||||||
|
|||||||
@ -61,7 +61,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import BrowserDetect from '../../ext/conf/BrowserDetect';
|
import BrowserDetect from '../../../ext/conf/BrowserDetect';
|
||||||
import { LogAggregator } from '@src/ext/lib/logging/LogAggregator';
|
import { LogAggregator } from '@src/ext/lib/logging/LogAggregator';
|
||||||
import { ComponentLogger } from '@src/ext/lib/logging/ComponentLogger';
|
import { ComponentLogger } from '@src/ext/lib/logging/ComponentLogger';
|
||||||
|
|
||||||
@ -187,8 +187,6 @@ html, body {
|
|||||||
|
|
||||||
.tabitem {
|
.tabitem {
|
||||||
font-variant: normal;
|
font-variant: normal;
|
||||||
// font-size: 0.69em;
|
|
||||||
// margin-left: 16px;
|
|
||||||
border-left: transparent 3px solid;
|
border-left: transparent 3px solid;
|
||||||
padding-left: 12px;
|
padding-left: 12px;
|
||||||
margin-left: -10px;
|
margin-left: -10px;
|
||||||
@ -217,8 +215,6 @@ html, body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.popup {
|
.popup {
|
||||||
// max-width: 780px;
|
|
||||||
// width: 800px;
|
|
||||||
height: 600px;
|
height: 600px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
42
src/ui/pages/settings/App.vue
Normal file
42
src/ui/pages/settings/App.vue
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
<template>
|
||||||
|
this will be a settings page.
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue';
|
||||||
|
import BrowserDetect from '../../../ext/conf/BrowserDetect';
|
||||||
|
import { LogAggregator } from '@src/ext/lib/logging/LogAggregator';
|
||||||
|
import { ComponentLogger } from '@src/ext/lib/logging/ComponentLogger';
|
||||||
|
import Settings from '@src/ext/lib/settings/Settings';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
settings: undefined as Settings | undefined,
|
||||||
|
logger: undefined as ComponentLogger | undefined,
|
||||||
|
logAggregator: undefined as LogAggregator | undefined,
|
||||||
|
settingsInitialized: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async created() {
|
||||||
|
this.logAggregator = new LogAggregator('');
|
||||||
|
this.logger = new ComponentLogger(this.logAggregator, 'App.vue');
|
||||||
|
|
||||||
|
this.settings = new Settings({
|
||||||
|
logAggregator: this.logAggregator,
|
||||||
|
onSettingsChanged: () => this.updateConfig()
|
||||||
|
});
|
||||||
|
await this.settings.init();
|
||||||
|
this.settingsInitialized = true;
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
updateConfig() {
|
||||||
|
this.settings.init();
|
||||||
|
this.$nextTick( () => this.$forceUpdate());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
17
src/ui/pages/settings/index.html
Normal file
17
src/ui/pages/settings/index.html
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en"; style="position: relative">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="color-scheme" content="light dark">
|
||||||
|
<title>Ultrawidify - settings</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">
|
||||||
|
settings index — app will be loaded below
|
||||||
|
<div id="app"></div>
|
||||||
|
<script src="settings.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
13
src/ui/pages/settings/settings.js
Normal file
13
src/ui/pages/settings/settings.js
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { createApp } from 'vue';
|
||||||
|
import App from './App';
|
||||||
|
import mdiVue from 'mdi-vue/v3';
|
||||||
|
import * as mdijs from '@mdi/js';
|
||||||
|
|
||||||
|
import '@src/main.css';
|
||||||
|
|
||||||
|
// NOTE — this is in-player interface for ultrawidify
|
||||||
|
// it is injected into the page in UI.init()
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(mdiVue, {icons: mdijs})
|
||||||
|
.mount('#app');
|
||||||
@ -180,8 +180,6 @@ body {
|
|||||||
|
|
||||||
.tabitem {
|
.tabitem {
|
||||||
font-variant: normal;
|
font-variant: normal;
|
||||||
// font-size: 0.69em;
|
|
||||||
// margin-left: 16px;
|
|
||||||
border-left: transparent 3px solid;
|
border-left: transparent 3px solid;
|
||||||
padding-left: 12px;
|
padding-left: 12px;
|
||||||
margin-left: -10px;
|
margin-left: -10px;
|
||||||
@ -210,8 +208,6 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.popup {
|
.popup {
|
||||||
// max-width: 780px;
|
|
||||||
// width: 800px;
|
|
||||||
height: 600px;
|
height: 600px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
50
src/ui/res/fonts/LICENSE.md
Normal file
50
src/ui/res/fonts/LICENSE.md
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
## License
|
||||||
|
|
||||||
|
Copyright 2015 Red Hat, Inc.,
|
||||||
|
This Font Software is dual licensed and available under the SIL Open Font License, Version 1.1. and also the LGPL 2.1
|
||||||
|
|
||||||
|
The Open Font license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
|
||||||
|
|
||||||
|
The GNU LGPL can be found at http://www.gnu.org/licenses/old-licenses/lgpl-2.1.en.html
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### SIL OPEN FONT LICENSE
|
||||||
|
Version 1.1 - 26 February 2007
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### PREAMBLE
|
||||||
|
The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others.
|
||||||
|
|
||||||
|
The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives.
|
||||||
|
|
||||||
|
#### DEFINITIONS
|
||||||
|
“Font Software” refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation.
|
||||||
|
|
||||||
|
“Reserved Font Name” refers to any names specified as such after the copyright statement(s).
|
||||||
|
|
||||||
|
“Original Version” refers to the collection of Font Software components as distributed by the Copyright Holder(s).
|
||||||
|
|
||||||
|
“Modified Version” refers to any derivative made by adding to, deleting, or substituting—in part or in whole—any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment.
|
||||||
|
|
||||||
|
“Author” refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software.
|
||||||
|
|
||||||
|
#### PERMISSION & CONDITIONS
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions:
|
||||||
|
|
||||||
|
1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself.
|
||||||
|
|
||||||
|
2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user.
|
||||||
|
|
||||||
|
3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users.
|
||||||
|
|
||||||
|
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission.
|
||||||
|
|
||||||
|
5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software.
|
||||||
|
|
||||||
|
#### TERMINATION
|
||||||
|
This license becomes null and void if any of the above conditions are not met.
|
||||||
|
|
||||||
|
#### DISCLAIMER
|
||||||
|
THE FONT SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||||
BIN
src/ui/res/fonts/materialdesignicons-webfont.woff2
Normal file
BIN
src/ui/res/fonts/materialdesignicons-webfont.woff2
Normal file
Binary file not shown.
BIN
src/ui/res/fonts/overpass-mono-webfont/overpass-mono-bold.woff2
Normal file
BIN
src/ui/res/fonts/overpass-mono-webfont/overpass-mono-bold.woff2
Normal file
Binary file not shown.
BIN
src/ui/res/fonts/overpass-mono-webfont/overpass-mono-light.woff2
Normal file
BIN
src/ui/res/fonts/overpass-mono-webfont/overpass-mono-light.woff2
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
src/ui/res/fonts/overpass-webfont/overpass-bold-italic.woff2
Normal file
BIN
src/ui/res/fonts/overpass-webfont/overpass-bold-italic.woff2
Normal file
Binary file not shown.
BIN
src/ui/res/fonts/overpass-webfont/overpass-bold.woff2
Normal file
BIN
src/ui/res/fonts/overpass-webfont/overpass-bold.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
src/ui/res/fonts/overpass-webfont/overpass-extralight.woff2
Normal file
BIN
src/ui/res/fonts/overpass-webfont/overpass-extralight.woff2
Normal file
Binary file not shown.
BIN
src/ui/res/fonts/overpass-webfont/overpass-italic.woff2
Normal file
BIN
src/ui/res/fonts/overpass-webfont/overpass-italic.woff2
Normal file
Binary file not shown.
BIN
src/ui/res/fonts/overpass-webfont/overpass-light-italic.woff2
Normal file
BIN
src/ui/res/fonts/overpass-webfont/overpass-light-italic.woff2
Normal file
Binary file not shown.
BIN
src/ui/res/fonts/overpass-webfont/overpass-light.woff2
Normal file
BIN
src/ui/res/fonts/overpass-webfont/overpass-light.woff2
Normal file
Binary file not shown.
BIN
src/ui/res/fonts/overpass-webfont/overpass-regular.woff2
Normal file
BIN
src/ui/res/fonts/overpass-webfont/overpass-regular.woff2
Normal file
Binary file not shown.
BIN
src/ui/res/fonts/overpass-webfont/overpass-semibold-italic.woff2
Normal file
BIN
src/ui/res/fonts/overpass-webfont/overpass-semibold-italic.woff2
Normal file
Binary file not shown.
BIN
src/ui/res/fonts/overpass-webfont/overpass-semibold.woff2
Normal file
BIN
src/ui/res/fonts/overpass-webfont/overpass-semibold.woff2
Normal file
Binary file not shown.
BIN
src/ui/res/fonts/overpass-webfont/overpass-thin-italic.woff2
Normal file
BIN
src/ui/res/fonts/overpass-webfont/overpass-thin-italic.woff2
Normal file
Binary file not shown.
BIN
src/ui/res/fonts/overpass-webfont/overpass-thin.woff2
Normal file
BIN
src/ui/res/fonts/overpass-webfont/overpass-thin.woff2
Normal file
Binary file not shown.
@ -17,7 +17,7 @@ const server = new UWServer();
|
|||||||
chrome.runtime.onInstalled.addListener((details) => {
|
chrome.runtime.onInstalled.addListener((details) => {
|
||||||
if (details.reason === "update") {
|
if (details.reason === "update") {
|
||||||
chrome.tabs.create({
|
chrome.tabs.create({
|
||||||
url: chrome.runtime.getURL("install/updated/updated.html")
|
url: chrome.runtime.getURL("ui/pages/updated/index.html")
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
10
tailwind.config.js
Normal file
10
tailwind.config.js
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
content: [
|
||||||
|
'./src/**/*.{vue,js,ts,jsx,tsx}',
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
};
|
||||||
@ -1,9 +1,10 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
|
"module": "esnext",
|
||||||
"moduleResolution": "node",
|
"moduleResolution": "node",
|
||||||
"outDir": "./ts-out",
|
"outDir": "./ts-out",
|
||||||
"allowJs": true,
|
"allowJs": true,
|
||||||
"target": "es2018",
|
"target": "esnext",
|
||||||
"types": [
|
"types": [
|
||||||
"chrome",
|
"chrome",
|
||||||
"node"
|
"node"
|
||||||
@ -12,6 +13,15 @@
|
|||||||
"node_modules/@types",
|
"node_modules/@types",
|
||||||
"node_modules/web-ext-types"
|
"node_modules/web-ext-types"
|
||||||
],
|
],
|
||||||
|
"baseUrl": "./src",
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"skipDefaultLibCheck": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"paths": {
|
||||||
|
"@src/*": [ "*" ],
|
||||||
|
"@csui/*": [ "csui/*" ],
|
||||||
|
"@/*": [ "*" ]
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"include": [ "./src/**/*" ],
|
"include": [ "./src/**/*" ],
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,9 +1,8 @@
|
|||||||
const webpack = require('webpack');
|
const webpack = require('webpack');
|
||||||
const ejs = require('ejs');
|
const ejs = require('ejs');
|
||||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||||
const WebpackShellPlugin = require('webpack-shell-plugin');
|
const WebpackShellPluginNext = require('webpack-shell-plugin-next');
|
||||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||||
const ChromeExtensionReloader = require('webpack-chrome-extension-reloader');
|
|
||||||
const { VueLoaderPlugin } = require('vue-loader');
|
const { VueLoaderPlugin } = require('vue-loader');
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
|
|
||||||
@ -18,9 +17,12 @@ const config = {
|
|||||||
'ext/uw': './ext/uw.js',
|
'ext/uw': './ext/uw.js',
|
||||||
'uw-bg': './uw-bg.js',
|
'uw-bg': './uw-bg.js',
|
||||||
'csui/csui-popup': './csui/csui-popup.js',
|
'csui/csui-popup': './csui/csui-popup.js',
|
||||||
'csui/csui': './csui/csui.js',
|
// 'csui/settings': './csui/settings.js',
|
||||||
// 'install/first-time/first-time':'./install/first-time/first-time.js',
|
// 'csui/csui': './csui/csui.js',
|
||||||
'install/updated/updated': './install/updated/updated.js',
|
|
||||||
|
// 'ui/pages/updated/updated': './ui/pages/updated/updated.js',
|
||||||
|
'ui/pages/updated/updated': './ui/pages/updated/updated.js',
|
||||||
|
'ui/pages/settings/settings': './ui/pages/settings/settings.js',
|
||||||
},
|
},
|
||||||
output: {
|
output: {
|
||||||
path: __dirname + `/dist-${process.env.BROWSER == 'firefox' ? 'ff' : process.env.BROWSER}`,
|
path: __dirname + `/dist-${process.env.BROWSER == 'firefox' ? 'ff' : process.env.BROWSER}`,
|
||||||
@ -33,6 +35,9 @@ const config = {
|
|||||||
alias: {
|
alias: {
|
||||||
'@src': path.resolve(__dirname, 'src'),
|
'@src': path.resolve(__dirname, 'src'),
|
||||||
'@csui': path.resolve(__dirname, 'src/csui'),
|
'@csui': path.resolve(__dirname, 'src/csui'),
|
||||||
|
'@ui': path.resolve(__dirname, 'src/ui'),
|
||||||
|
'@components': path.resolve(__dirname, 'src/ui/components'),
|
||||||
|
'@': path.resolve(__dirname, 'src'),
|
||||||
},
|
},
|
||||||
// maybe we'll move vue stuff to TS some day, but today is not the day
|
// maybe we'll move vue stuff to TS some day, but today is not the day
|
||||||
extensions: [
|
extensions: [
|
||||||
@ -44,166 +49,173 @@ const config = {
|
|||||||
rules: [
|
rules: [
|
||||||
{
|
{
|
||||||
test: /\.ts$/,
|
test: /\.ts$/,
|
||||||
loader: 'ts-loader',
|
|
||||||
exclude: /node_modules/
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.vue$/,
|
|
||||||
loaders: 'vue-loader',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.js$/,
|
|
||||||
loader: 'babel-loader',
|
|
||||||
exclude: /node_modules/,
|
exclude: /node_modules/,
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.(sc|c)ss$/,
|
|
||||||
use: [
|
use: [
|
||||||
// MiniCssExtractPlugin.loader,
|
|
||||||
'vue-style-loader',
|
|
||||||
{
|
{
|
||||||
loader: 'css-loader',
|
loader: 'ts-loader',
|
||||||
// modules: {
|
|
||||||
// localIdentName: "[name]-[hash]"
|
|
||||||
// }
|
|
||||||
// options: {
|
|
||||||
// modules: true,
|
|
||||||
// // localIdentName: "🔶uw_[local]"
|
|
||||||
// localIdentName: "[name]-[hash]"
|
|
||||||
// // localIdentName: "uw_[local]"
|
|
||||||
// }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
loader: 'sass-loader',
|
|
||||||
options: {
|
options: {
|
||||||
sourceMap: true
|
appendTsSuffixTo: [/\.vue$/],
|
||||||
|
transpileOnly: true,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
// {
|
|
||||||
// test: /\.scss$/,
|
|
||||||
// use: [
|
|
||||||
// // MiniCssExtractPlugin.loader,
|
|
||||||
// 'css-loader',
|
|
||||||
// // {
|
|
||||||
// // loader: 'css-loader',
|
|
||||||
// // // options: {
|
|
||||||
// // // modules: true,
|
|
||||||
// // // localIdentName: "🔶uw_[local]"
|
|
||||||
// // // }
|
|
||||||
// // },
|
|
||||||
// 'sass-loader'
|
|
||||||
// ],
|
|
||||||
// },
|
|
||||||
{
|
{
|
||||||
test: /\.(png|jpg|gif|svg|ico)$/,
|
test: /\.vue$/,
|
||||||
loader: 'file-loader',
|
use: [
|
||||||
options: {
|
{
|
||||||
name: '[path][name].[ext]',
|
loader: 'vue-loader'
|
||||||
},
|
}
|
||||||
},
|
]
|
||||||
{
|
|
||||||
test: /\.(woff(2)?)$/,
|
|
||||||
loader: 'file-loader',
|
|
||||||
options: {
|
|
||||||
name: '[path][name].[ext]',
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.js$/,
|
test: /\.js$/,
|
||||||
exclude: /node_modules/,
|
exclude: /node_modules/,
|
||||||
loader: "babel-loader"
|
use: [
|
||||||
|
{
|
||||||
|
loader: 'babel-loader'
|
||||||
|
}
|
||||||
|
]
|
||||||
},
|
},
|
||||||
],
|
{
|
||||||
|
test: /\.(sc|c)ss$/,
|
||||||
|
use: [
|
||||||
|
'vue-style-loader',
|
||||||
|
{
|
||||||
|
loader: 'css-loader',
|
||||||
|
options: {
|
||||||
|
// Uncomment if you want CSS modules
|
||||||
|
// modules: {
|
||||||
|
// localIdentName: "[name]-[hash]"
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loader: 'postcss-loader',
|
||||||
|
options: {
|
||||||
|
postcssOptions: {
|
||||||
|
plugins: [
|
||||||
|
require('postcss-strip-inline-comments')(),
|
||||||
|
require('postcss-preset-env') ({
|
||||||
|
stage: 1,
|
||||||
|
})
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.(png|jpg|webp|gif|svg|ico)$/,
|
||||||
|
type: 'asset/resource',
|
||||||
|
generator: {
|
||||||
|
filename: '[path][name][ext]' // Webpack 5 uses generator.filename
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.(woff(2)?)$/,
|
||||||
|
type: 'asset/resource',
|
||||||
|
generator: {
|
||||||
|
filename: '[path][name][ext]'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
new VueLoaderPlugin(),
|
new VueLoaderPlugin(),
|
||||||
new MiniCssExtractPlugin({
|
new MiniCssExtractPlugin({
|
||||||
filename: '[name].css',
|
filename: '[name].css',
|
||||||
}),
|
}),
|
||||||
new CopyWebpackPlugin([
|
new CopyWebpackPlugin({
|
||||||
{ from: 'res', to: 'res', ignore: ['css', 'css/**']},
|
patterns: [
|
||||||
{ from: 'ext', to: 'ext', ignore: ['conf/*', 'lib/**']},
|
{ from: 'res', to: 'res', globOptions: { ignore: ['css', 'css/**'] } },
|
||||||
{ from: 'csui', to: 'csui', ignore: ['src']},
|
{ from: 'ext', to: 'ext', globOptions: { ignore: ['conf/*', 'lib/**'] } },
|
||||||
{ from: 'install', to: 'install' },
|
{ from: 'csui', to: 'csui', globOptions: { ignore: ['src'] }},
|
||||||
|
{ from: 'ui/res', to: 'ui/res' },
|
||||||
|
|
||||||
// we need to get webextension-polyfill and put it in common/lib
|
// we need to get webextension-polyfill and put it in common/lib
|
||||||
{ from: '../node_modules/webextension-polyfill/dist/browser-polyfill.js', to: 'common/lib/browser-polyfill.js'},
|
{ from: '../node_modules/webextension-polyfill/dist/browser-polyfill.js', to: 'common/lib/browser-polyfill.js'},
|
||||||
|
|
||||||
// This is extension icon, as used on extension lists and/or extension's action button
|
// This is extension icon, as used on extension lists and/or extension's action button
|
||||||
// This folder does not contain any GUI icons — these are in /res/icons.
|
// This folder does not contain any GUI icons — these are in /res/icons.
|
||||||
// (TODO: check if this copy is even necessary — /icons has same content as /res/icons)
|
// (TODO: check if this copy is even necessary — /icons has same content as /res/icons)
|
||||||
{ from: 'icons', to: 'icons', ignore: ['icon.xcf'] },
|
{ from: 'icons', to: 'icons', globOptions: { ignore: ['icon.xcf'] } },
|
||||||
{ from: 'csui/csui-popup.html', to: 'csui/csui-popup.html', transform: transformHtml },
|
{ from: 'csui/csui-popup.html', to: 'csui/csui-popup.html', transform: transformHtml },
|
||||||
{ from: 'csui/csui-overlay-normal.html', to: 'csui/csui.html', transform: transformHtml },
|
{ from: 'csui/csui-overlay-normal.html', to: 'csui/csui.html', transform: transformHtml },
|
||||||
{ from: 'csui/csui-overlay-dark.html', to: 'csui/csui-dark.html', transform: transformHtml },
|
{ from: 'csui/csui-overlay-dark.html', to: 'csui/csui-dark.html', transform: transformHtml },
|
||||||
{ from: 'csui/csui-overlay-light.html', to: 'csui/csui-light.html', transform: transformHtml },
|
{ from: 'csui/csui-overlay-light.html', to: 'csui/csui-light.html', transform: transformHtml },
|
||||||
// { from: 'install/first-time/first-time.html', to: 'install/first-time/first-time.html', transform: transformHtml},
|
{ from: 'ui/pages/settings/index.html', to: 'ui/pages/settings/index.html', transform: transformHtml },
|
||||||
{ from: 'install/updated/updated.html', to: 'install/updated/updated.html', transform: transformHtml },
|
// { from: 'ui/pages/installed/index.html', to: 'ui/pages/installed/index.html', transform: transformHtml },
|
||||||
{
|
{ from: 'ui/pages/updated/index.html', to: 'ui/pages/updated/index.html', transform: transformHtml },
|
||||||
from: 'manifest.json',
|
{ from: 'ui/pages/settings/index.html', to: 'ui/pages/settings/index.html', transform: transformHtml },
|
||||||
to: 'manifest.json',
|
{
|
||||||
transform: (content) => {
|
from: 'manifest.json',
|
||||||
const jsonContent = JSON.parse(content);
|
to: 'manifest.json',
|
||||||
// jsonContent.version = version;
|
transform: (content) => {
|
||||||
|
const jsonContent = JSON.parse(content);
|
||||||
|
// jsonContent.version = version;
|
||||||
|
|
||||||
// if (config.mode === 'development') {
|
// if (config.mode === 'development') {
|
||||||
// jsonContent['content_security_policy'] = "script-src 'self' 'unsafe-eval'; object-src 'self'";
|
// jsonContent['content_security_policy'] = "script-src 'self' 'unsafe-eval'; object-src 'self'";
|
||||||
// }
|
// }
|
||||||
|
|
||||||
if (process.env.CHANNEL === 'nightly') {
|
if (process.env.CHANNEL === 'nightly') {
|
||||||
jsonContent.name = "Ultrawidify - nightly";
|
jsonContent.name = "Ultrawidify - nightly";
|
||||||
jsonContent.description = "FOR TESTING ONLY -- THIS BUILD USES ONLY THE FRESHEST COMMITS FROM GITHUB AND MAY THEREFORE BE COMPLETELY BROKEN";
|
jsonContent.description = "FOR TESTING ONLY -- THIS BUILD USES ONLY THE FRESHEST COMMITS FROM GITHUB AND MAY THEREFORE BE COMPLETELY BROKEN";
|
||||||
|
|
||||||
// version numbers for nightly builds: YYMM.DD.BUILD_NUMBER
|
// version numbers for nightly builds: YYMM.DD.BUILD_NUMBER
|
||||||
jsonContent.version = `${new Date()
|
jsonContent.version = `${new Date()
|
||||||
.toISOString() // YYYY-MM-DDTHH:MM:SS...
|
.toISOString() // YYYY-MM-DDTHH:MM:SS...
|
||||||
.split('T')[0] // gives YYYY-MM-DD
|
.split('T')[0] // gives YYYY-MM-DD
|
||||||
.substr(2) // YYYY -> YY
|
.substr(2) // YYYY -> YY
|
||||||
.replace('-', '') // YY-MM-DD -> YYMM-DD
|
.replace('-', '') // YY-MM-DD -> YYMM-DD
|
||||||
.replace('-', '.') // YYMM-DD -> YYMM.DD
|
.replace('-', '.') // YYMM-DD -> YYMM.DD
|
||||||
}.${process.env.BUILD_NUMBER === undefined ? 0 : process.env.BUILD_NUMBER}`;
|
}.${process.env.BUILD_NUMBER === undefined ? 0 : process.env.BUILD_NUMBER}`;
|
||||||
jsonContent.browser_action.default_title = "Ultrawidify Nightly";
|
jsonContent.browser_action.default_title = "Ultrawidify Nightly";
|
||||||
|
|
||||||
// because we don't want web-ext to submit this as proper release
|
// because we don't want web-ext to submit this as proper release
|
||||||
delete jsonContent.applications;
|
delete jsonContent.applications;
|
||||||
} else if (process.env.CHANNEL === 'testing') {
|
} else if (process.env.CHANNEL === 'testing') {
|
||||||
jsonContent.name = "Ultrawidify - testing";
|
jsonContent.name = "Ultrawidify - testing";
|
||||||
jsonContent.description = "FOR TESTING ONLY -- this build is intended for testing a fix of certain bugs. It's not fit for normal use.";
|
jsonContent.description = "FOR TESTING ONLY -- this build is intended for testing a fix of certain bugs. It's not fit for normal use.";
|
||||||
|
|
||||||
// version numbers for nightly builds: YYMM.DD.BUILD_NUMBER
|
// version numbers for nightly builds: YYMM.DD.BUILD_NUMBER
|
||||||
jsonContent.version = `${new Date()
|
jsonContent.version = `${new Date()
|
||||||
.toISOString() // YYYY-MM-DDTHH:MM:SS...
|
.toISOString() // YYYY-MM-DDTHH:MM:SS...
|
||||||
.split('T')[0] // gives YYYY-MM-DD
|
.split('T')[0] // gives YYYY-MM-DD
|
||||||
.substr(2) // YYYY -> YY
|
.substr(2) // YYYY -> YY
|
||||||
.replace('-', '') // YY-MM-DD -> YYMM-DD
|
.replace('-', '') // YY-MM-DD -> YYMM-DD
|
||||||
.replace('-', '.') // YYMM-DD -> YYMM.DD
|
.replace('-', '.') // YYMM-DD -> YYMM.DD
|
||||||
}.${process.env.BUILD_NUMBER === undefined ? 0 : process.env.BUILD_NUMBER}`;
|
}.${process.env.BUILD_NUMBER === undefined ? 0 : process.env.BUILD_NUMBER}`;
|
||||||
jsonContent.browser_action.default_title = "Ultrawidify Testing";
|
jsonContent.browser_action.default_title = "Ultrawidify Testing";
|
||||||
|
|
||||||
// because we don't want web-ext to submit this as proper release
|
// because we don't want web-ext to submit this as proper release
|
||||||
delete jsonContent.applications;
|
delete jsonContent.applications;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (process.env.BROWSER !== 'firefox') {
|
if (process.env.BROWSER !== 'firefox') {
|
||||||
jsonContent.version = jsonContent.version.replace(/[a-zA-Z-]/g, '');
|
jsonContent.version = jsonContent.version.replace(/[a-zA-Z-]/g, '');
|
||||||
try {
|
try {
|
||||||
delete jsonContent.options_ui.browser_style;
|
delete jsonContent.options_ui.browser_style;
|
||||||
} catch (e) { }
|
} catch (e) { }
|
||||||
try {
|
try {
|
||||||
delete jsonContent.background.scripts;
|
delete jsonContent.background.scripts;
|
||||||
} catch (e) {}
|
} catch (e) {}
|
||||||
} else {
|
} else {
|
||||||
delete jsonContent.background.service_worker;
|
delete jsonContent.background.service_worker;
|
||||||
}
|
}
|
||||||
|
|
||||||
return JSON.stringify(jsonContent, null, 2);
|
return JSON.stringify(jsonContent, null, 2);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
new WebpackShellPluginNext({
|
||||||
|
onBuildEnd: {
|
||||||
|
scripts: ['node scripts/remove-evals.js'],
|
||||||
|
blocking: true,
|
||||||
|
parallel: false,
|
||||||
},
|
},
|
||||||
]),
|
|
||||||
new WebpackShellPlugin({
|
|
||||||
onBuildEnd: ['node scripts/remove-evals.js'],
|
|
||||||
}),
|
}),
|
||||||
new webpack.DefinePlugin({
|
new webpack.DefinePlugin({
|
||||||
'process.env.BROWSER': JSON.stringify(process.env.BROWSER),
|
'process.env.BROWSER': JSON.stringify(process.env.BROWSER),
|
||||||
@ -239,7 +251,7 @@ if (config.mode === 'production') {
|
|||||||
|
|
||||||
if (process.env.HMR === 'true') {
|
if (process.env.HMR === 'true') {
|
||||||
config.plugins = (config.plugins || []).concat([
|
config.plugins = (config.plugins || []).concat([
|
||||||
new ChromeExtensionReloader(),
|
// new ChromeExtensionReloader(), // no longer a thing for webpack 5
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user