tamius-han/ultrawidify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'vue3'

Browse Source
This commit is contained in:
Tamius Han 2020-12-01 00:21:29 +01:00
commit 97099ece1c
9 changed files with 313 additions and 1105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1286
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

31
package.json
View File

@ -4,20 +4,20 @@
"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": {
"start": "npm run dev",
"pre-build": "rm -rf ./dist-ff; rm -rf ./dist-chrome; rm -rf ./node_modules; npm ci",
"build": "npm run pre-build; cross-env NODE_ENV=production BROWSER=firefox CHANNEL=stable webpack --hide-modules",
"build-chrome": "cross-env NODE_ENV=production BROWSER=chrome CHANNEL=stable webpack --hide-modules",
"build-edge": "cross-env NODE_ENV=production BROWSER=edge CHANNEL=stable webpack --hide-modules",
"build:dev": "webpack --hide-modules",
"build-testing": "cross-env NODE_ENV=development BROWSER=firefox CHANNEL=testing webpack --hide-modules",
"build-nightly": "cross-env NODE_ENV=development BROWSER=firefox CHANNEL=nightly webpack --hide-modules",
"build-testing-chrome": "cross-env NODE_ENV=development BROWSER=chrome CHANNEL=testing webpack --hide-modules",
"build-nightly-chrome": "cross-env NODE_ENV=development BROWSER=chrome CHANNEL=nightly webpack --hide-modules",
"build-chrome:dev": "cross-env NODE_ENV=development BROWSER=chrome webpack --hide-modules",
"build-all": "mkdir -p ./build/old; npm run pre-build; rm ./dist-zip/uw-amo-source.zip; mv -f ./dist-zip/*.zip ./build/old; npm run build; node scripts/build-zip.js ff; npm run build-chrome; node scripts/build-zip.js chrome; ./scripts/prepare-amo-source.sh",
"build-chrome": "cross-env NODE_ENV=production BROWSER=chrome CHANNEL=stable webpack --hide-modules",
"build-chrome:dev": "cross-env NODE_ENV=development BROWSER=chrome webpack --hide-modules",
"build-edge": "cross-env NODE_ENV=production BROWSER=edge CHANNEL=stable webpack --hide-modules",
"build-nightly": "cross-env NODE_ENV=development BROWSER=firefox CHANNEL=nightly webpack --hide-modules",
"build-nightly-chrome": "cross-env NODE_ENV=development BROWSER=chrome CHANNEL=nightly webpack --hide-modules",
"build-testing": "cross-env NODE_ENV=development BROWSER=firefox CHANNEL=testing webpack --hide-modules",
"build-testing-chrome": "cross-env NODE_ENV=development BROWSER=chrome CHANNEL=testing webpack --hide-modules",
"build-zip": "node scripts/build-zip.js",
"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\""
"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\"",
"pre-build": "rm -rf ./dist-ff; rm -rf ./dist-chrome; rm -rf ./node_modules; npm ci",
"start": "npm run dev"
},
"dependencies": {
"@types/core-js": "^2.5.3",
@ -26,8 +26,8 @@
"concurrently": "^5.2.0",
"fs-extra": "^7.0.1",
"json-cyclic": "0.0.3",
"vue": "^2.6.12",
"vuex": "^3.5.1",
"vue": "^3.0.0-beta.1",
"vuex": "^4.0.0-alpha.1",
"vuex-webextensions": "^1.3.0",
"webextension-polyfill": "^0.6.0"
},
@ -35,6 +35,7 @@
"@babel/core": "^7.10.5",
"@babel/plugin-proposal-optional-chaining": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"@vue/compiler-sfc": "^3.0.3",
"archiver": "^3.0.0",
"babel-loader": "^8.1.0",
"copy-webpack-plugin": "^4.5.3",
@ -45,8 +46,8 @@
"mini-css-extract-plugin": "^0.4.4",
"node-sass": "^4.14.1",
"sass-loader": "^7.1.0",
"vue-loader": "^15.9.3",
"vue-template-compiler": "^2.6.11",
"vue-cli-plugin-vue-next": "~0.1.4",
"vue-loader": "^16.0.0",
"web-ext-types": "^2.1.0",
"webpack": "^4.44.0",
"webpack-chrome-extension-reloader": "^0.8.3",

8
src/ext/lib/Logger.js
View File

@ -486,10 +486,14 @@ class Logger {
saveViaBgScript() {
console.info('[info] will attempt to save. Issuing "show-logger"');
if (!this.conf?.fileOptions?.enabled || this.isBackgroundScript) {
console.info('[info] Logging to file is either disabled or we\'re not on the content script. Not saving.');
if (this.isBackgroundScript) {
console.info('[info] Background script cannot display logger UI.');
return;
}
// if (!this.conf?.fileOptions?.enabled) {
// console.info('[info] Logging to file is disabled. Logger won\'t get shown.');
// return;
// }
Comms.sendMessage({cmd: 'show-logger', forwardToSameFramePort: true, port: 'content-ui-port'});

56
src/ext/uw-ui.js
View File

@ -1,6 +1,6 @@
// vue dependency imports
import Vue from 'vue';
import Vuex from 'vuex';
import { createApp } from 'vue';
import { createStore } from 'vuex';
import VuexWebExtensions from 'vuex-webextensions';
import LoggerUi from '../csui/LoggerUi';
@ -124,16 +124,19 @@ class UwUi {
}
try {
Vue.prototype.$browser = global.browser;
Vue.use(Vuex);
this.vuexStore = new Vuex.Store({
plugins: [VuexWebExtensions({
persistentStates: [
'uwLog',
'showLogger',
'loggingEnded',
],
})],
// Vue.prototype.$browser = global.browser;
// Vue.use(Vuex);
this.vuexStore = createStore({
plugins: [
VuexWebExtensions({
persistentStates: [
'uwLog',
'showLogger',
'loggingEnded',
],
}),
],
state: {
uwLog: '',
showLogger: false,
@ -184,22 +187,27 @@ class UwUi {
const uwid = `uw-ui-root-${random}`;
const rootDiv = document.createElement('div');
rootDiv.setAttribute("style", "position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999; background-color: #ff0000;");
rootDiv.setAttribute("style", "position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999;");
rootDiv.setAttribute("id", uwid);
document.body.appendChild(rootDiv);
try {
new Vue({
el: `#${uwid}`,
components: {
LoggerUi: LoggerUi
},
store: this.vuexStore,
render(h) {
return h('logger-ui');
}
});
createApp(LoggerUi)
.component('LoggerUi', LoggerUi)
.use(this.vuexStore)
.mount(`#${uwid}`);
// new Vue({
// el: `#${uwid}`,
// components: {
// LoggerUi: LoggerUi
// },
// store: this.vuexStore,
// render(h) {
// return h('logger-ui');
// }
// });
} catch (e) {
console.error("Error while initiating vue:", e)
}
@ -208,12 +216,14 @@ class UwUi {
}
async showLogger() {
console.log("show logger?")
if (!this.loggerUiInitiated) {
await this.initLoggerUi();
}
try {
console.log("will show logger")
this.vuexStore.dispatch('uw-show-logger');
} catch (e) {
console.error('Failed to dispatch vuex store', e)

4
src/options/about.vue
View File

@ -38,12 +38,14 @@ import Settings from '../ext/lib/Settings';
export default {
data() {
return {
addonVersion: Settings.getVersion(),
addonVersion: '[extension version not loaded. This is a bug.]',
mailtoLink: 'mailto:tamius.han@gmail.com',
redditLink: '',
}
},
created() {
this.addonVersion = Settings.getExtensionVersion();
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\

10
src/options/options.js
View File

@ -1,8 +1,4 @@
import Vue from 'vue'
import App from './App'
import { createApp } from 'vue';
import App from './App';
/* eslint-disable no-new */
new Vue({
el: '#app',
render: h => h(App)
})
createApp(App).mount('#app');

11
src/popup/App.vue
View File

@ -29,7 +29,7 @@
<div class="">
Site settings
</div>
<div v-if="selectedTab === 'site' && this.activeSites.length > 1"
<div v-if="selectedTab === 'site' && activeSites.length > 1"
class=""
>
<small>Select site to control:</small>
@ -55,7 +55,7 @@
<div class="">
Video settings <span v-if="canShowVideoTab.canShow && canShowVideoTab.warning" class="warning-color">⚠</span>
</div>
<div v-if="selectedTab === 'video' && this.activeFrames.length > 0"
<div v-if="selectedTab === 'video' && activeFrames.length > 0"
class=""
>
<small>Select embedded frame to control:</small>
@ -82,7 +82,7 @@
<div class="">
Advanced settings
</div>
<div v-if="selectedTab === 'site-details' && this.activeSites.length > 1"
<div v-if="selectedTab === 'site-details' && activeSites.length > 1"
class=""
>
<small>Select site to control:</small>
@ -137,7 +137,7 @@
<!-- PANELS/CONTENT -->
<div id="tab-content" class="flex-grow h100 overflow-y-auto">
<VideoPanel v-if="settings && settings.active && selectedTab === 'video'"
<VideoPanel v-if="settings?.active && selectedTab === 'video'"
class=""
:someSitesDisabledWarning="canShowVideoTab.warning"
:settings="settings"
@ -145,7 +145,7 @@
:zoom="currentZoom"
@zoom-change="updateZoom($event)"
/>
<DefaultSettingsPanel v-if="settings && settings.active && (selectedTab === 'site' || selectedTab === 'global')"
<DefaultSettingsPanel v-if="settings?.active && (selectedTab === 'global' || selectedTab === 'site')"
class=""
:settings="settings"
:scope="selectedTab"
@ -325,6 +325,7 @@ export default {
if (!this.site || this.site.host !== message.site.host) {
this.port.postMessage({cmd: 'get-current-zoom'});
}
console.log("processing received message:", message)
this.site = message.site;
// update activeSites

2
src/popup/panels/DefaultSettingsPanel.vue
View File

@ -147,7 +147,6 @@ export default {
components: {
ShortcutButton,
},
watch: {
settings: {
deep: true,
@ -172,7 +171,6 @@ export default {
let site;
if (this.scope === 'global') {
site = '@global'
this.site = site;
} else {
if (!this.site) {
return '';

10
src/popup/popup.js
View File

@ -1,11 +1,7 @@
import Vue from 'vue'
import App from './App'
import { createApp } from 'vue'
import App from './App';
// global.browser = require('webextension-polyfill')
// Vue.prototype.$browser = global.browser
/* eslint-disable no-new */
new Vue({
el: '#app',
render: h => h(App)
})
createApp(App).mount('#app');