diff --git a/electron/main/background.ts b/electron/main/background.ts index bfe01e8a..0b7cfeb4 100644 --- a/electron/main/background.ts +++ b/electron/main/background.ts @@ -60,7 +60,8 @@ app.on('ready', () => { overlay = new Overlay(store).buildWindow(indexHtml); new TrayIcon(store, overlay).buildTray(trayIconPath); ipcEvents = new IpcEvents(store); - ipcEvents.registerEvents(overlay, indexHtml); + ipcEvents.registerWindow(overlay); + ipcEvents.registerEvents(indexHtml); // only call auto-updater for prod environment if (!process.env.VITE_DEV_SERVER_URL) { @@ -86,7 +87,7 @@ app.on('activate', () => { overlay = new Overlay(store).buildWindow(indexHtml); // register the events and overlay again since they still hold a reference to a null object in case the overlay was recreated ipcEvents.registerWindow(overlay); - ipcEvents.registerEvents(overlay, indexHtml); + ipcEvents.registerEvents(indexHtml); // wait a second for the window to be created again so that it can handle events setTimeout(() => { overlay?.webContents.send(IpcEvent.Recreated); diff --git a/electron/main/ipcEvents.ts b/electron/main/ipcEvents.ts index 4d2fd078..a439aa99 100644 --- a/electron/main/ipcEvents.ts +++ b/electron/main/ipcEvents.ts @@ -12,9 +12,7 @@ export default class IpcEvents { constructor(private store: ElectronStore) {} - registerEvents(overlay: BrowserWindow | null, indexHtml: string) { - this.registerWindow(overlay); - + registerEvents(indexHtml: string) { this.rerender(); this.close(); this.setClickThrough(); @@ -28,7 +26,7 @@ export default class IpcEvents { } private rerender() { - ipcMain.on(IpcEvent.Rerender, (_event: Electron.IpcMainEvent, args: any) => { + ipcMain.on(IpcEvent.Rerender, (_event: Electron.IpcMainEvent, args: 'child' | 'parent') => { if (args === 'child' && this.settings) { this.settings.webContents.send(IpcEvent.Rerender); } diff --git a/shared/types/store.ts b/shared/types/store.ts index 01004583..c54fa103 100644 --- a/shared/types/store.ts +++ b/shared/types/store.ts @@ -34,7 +34,7 @@ export type General = { }; export type Updater = { - channel: 'latest' | 'beta' | 'alpa'; + channel: 'latest' | 'beta'; }; export type AppStore = { diff --git a/src/App.vue b/src/App.vue index 6e13905d..1026d6a8 100644 --- a/src/App.vue +++ b/src/App.vue @@ -8,11 +8,11 @@ :is-start-page="showStart" :channel="chatOptions.channel" :store="store" - @show-start="setShowStart" - @show-chat="setShowChat" + @show-start="showView('start')" + @show-chat="showView('chat')" @vanish="ipcRenderer.send(IpcEvent.Vanish)" /> - +
@@ -32,7 +32,6 @@ import { AppStore } from '../shared/types'; import MenuButtons from './components/header/Buttons.vue'; import DropDownMenu from './components/header/Dropdown.vue'; -import Show from './helper/show'; import Chat from './pages/Chat.vue'; import ExternalSource from './pages/ExternalSource.vue'; import Settings from './pages/Settings.vue'; @@ -68,26 +67,47 @@ const showApp = () => { showMenuBar.value = !store.get('savedWindowState').isTransparent && !settings.value.isOpen; }; -const setShowStart = () => { - Show.Start({ showChat, showStart, showSettings, showExternalSource }); -}; - -const setShowChat = () => { - Show.Chat({ showChat, showStart, showSettings, showExternalSource }); -}; - -const setShowExternalSource = () => { - Show.ExternalSource({ showChat, showStart, showSettings, showExternalSource }); +const showView = (view: T) => { + switch (view) { + case 'chat': + showChat.value = true; + showStart.value = false; + showSettings.value = false; + showExternalSource.value = false; + break; + + case 'start': + showChat.value = false; + showStart.value = true; + showSettings.value = false; + showExternalSource.value = false; + break; + + case 'settings': + showChat.value = false; + showStart.value = false; + showSettings.value = true; + showExternalSource.value = false; + checkingVersion.value = false; + break; + + case 'externalSource': + showChat.value = false; + showStart.value = false; + showSettings.value = false; + showExternalSource.value = true; + break; + } }; const enableChat = (channel: string) => { store.set('chatOptions.channel', channel); - setShowChat(); + showView('chat'); }; const enableExternalSource = (source: string) => { externalSource.value = source; - setShowExternalSource(); + showView('externalSource'); }; const vanish = () => { @@ -98,9 +118,9 @@ const vanish = () => { document.querySelector('#app')?.setAttribute('vanished', 'true'); if (showExternalSource.value) { - setShowExternalSource(); + showView('externalSource'); } else if (storeChatOptions.channel !== '') { - setShowChat(); + showView('chat'); } showMenuBar.value = false; @@ -108,7 +128,7 @@ const vanish = () => { }; if (settings.value.isOpen) { - Show.Settings({ showChat, showStart, showSettings, checkingVersion, showExternalSource }); + showView('settings'); } ipcRenderer.on(IpcEvent.Rerender, () => settingsKey.value++); diff --git a/src/helper/show.ts b/src/helper/show.ts deleted file mode 100644 index 7caac268..00000000 --- a/src/helper/show.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { Ref } from 'vue'; - -type ShowArgs = { - showChat: Ref; - showStart: Ref; - showSettings: Ref; - showExternalSource: Ref; -}; - -export default class Show { - static Start({ showChat, showStart, showSettings, showExternalSource }: ShowArgs) { - showChat.value = false; - showStart.value = true; - showSettings.value = false; - showExternalSource.value = false; - } - - static Chat({ showChat, showStart, showSettings, showExternalSource }: ShowArgs) { - showChat.value = true; - showStart.value = false; - showSettings.value = false; - showExternalSource.value = false; - } - - static ExternalSource({ showChat, showStart, showSettings, showExternalSource }: ShowArgs) { - showChat.value = false; - showStart.value = false; - showSettings.value = false; - showExternalSource.value = true; - } - - static Settings({ - showChat, - showStart, - showSettings, - checkingVersion, - showExternalSource, - }: ShowArgs & { checkingVersion: Ref }) { - showChat.value = false; - showStart.value = false; - showSettings.value = true; - checkingVersion.value = false; - showExternalSource.value = false; - } -} diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue index a2ea9786..c9fce100 100644 --- a/src/pages/Settings.vue +++ b/src/pages/Settings.vue @@ -5,18 +5,20 @@ @@ -69,73 +71,76 @@ const showCSSEditor = ref(false); const showJSEditor = ref(false); const showUpdates = ref(false); -const setShowGeneral = () => { - document.querySelector('#options')?.removeAttribute('active'); - document.querySelector('#css')?.removeAttribute('active'); - document.querySelector('#js')?.removeAttribute('active'); - document.querySelector('#updates')?.removeAttribute('active'); - document.querySelector('#general')?.setAttribute('active', 'true'); - - showJSEditor.value = false; - showCSSEditor.value = false; - showUpdates.value = false; - showOptions.value = false; - showGeneral.value = true; +const showView = (view: T) => { + switch (view) { + case 'general': + document.querySelector('#options')?.removeAttribute('active'); + document.querySelector('#css')?.removeAttribute('active'); + document.querySelector('#js')?.removeAttribute('active'); + document.querySelector('#updates')?.removeAttribute('active'); + document.querySelector('#general')?.setAttribute('active', 'true'); + + showJSEditor.value = false; + showCSSEditor.value = false; + showUpdates.value = false; + showOptions.value = false; + showGeneral.value = true; + break; + + case 'options': + document.querySelector('#general')?.removeAttribute('active'); + document.querySelector('#css')?.removeAttribute('active'); + document.querySelector('#js')?.removeAttribute('active'); + document.querySelector('#updates')?.removeAttribute('active'); + document.querySelector('#options')?.setAttribute('active', 'true'); + + showGeneral.value = false; + showJSEditor.value = false; + showCSSEditor.value = false; + showUpdates.value = false; + showOptions.value = true; + break; + + case 'css': + document.querySelector('#general')?.removeAttribute('active'); + document.querySelector('#options')?.removeAttribute('active'); + document.querySelector('#js')?.removeAttribute('active'); + document.querySelector('#updates')?.removeAttribute('active'); + document.querySelector('#css')?.setAttribute('active', 'true'); + + showGeneral.value = false; + showJSEditor.value = false; + showOptions.value = false; + showUpdates.value = false; + showCSSEditor.value = true; + break; + + case 'js': + document.querySelector('#general')?.removeAttribute('active'); + document.querySelector('#options')?.removeAttribute('active'); + document.querySelector('#css')?.removeAttribute('active'); + document.querySelector('#updates')?.removeAttribute('active'); + document.querySelector('#js')?.setAttribute('active', 'true'); + + showGeneral.value = false; + showOptions.value = false; + showCSSEditor.value = false; + showUpdates.value = false; + showJSEditor.value = true; + break; + + case 'updates': + // document.querySelector('#general')?.removeAttribute('active'); + // document.querySelector('#options')?.removeAttribute('active'); + // document.querySelector('#css')?.removeAttribute('active'); + // document.querySelector('#js')?.removeAttribute('active'); + // document.querySelector('#updates')?.setAttribute('active', 'true'); + // showGeneral.value = false; + // showJSEditor.value = false; + // showOptions.value = false; + // showCSSEditor.value = false; + // showUpdates.value = true; + break; + } }; - -const setShowOptions = () => { - document.querySelector('#general')?.removeAttribute('active'); - document.querySelector('#css')?.removeAttribute('active'); - document.querySelector('#js')?.removeAttribute('active'); - document.querySelector('#updates')?.removeAttribute('active'); - document.querySelector('#options')?.setAttribute('active', 'true'); - - showGeneral.value = false; - showJSEditor.value = false; - showCSSEditor.value = false; - showUpdates.value = false; - showOptions.value = true; -}; - -const setShowCSS = () => { - document.querySelector('#general')?.removeAttribute('active'); - document.querySelector('#options')?.removeAttribute('active'); - document.querySelector('#js')?.removeAttribute('active'); - document.querySelector('#updates')?.removeAttribute('active'); - document.querySelector('#css')?.setAttribute('active', 'true'); - - showGeneral.value = false; - showJSEditor.value = false; - showOptions.value = false; - showUpdates.value = false; - showCSSEditor.value = true; -}; - -const setShowJS = () => { - document.querySelector('#general')?.removeAttribute('active'); - document.querySelector('#options')?.removeAttribute('active'); - document.querySelector('#css')?.removeAttribute('active'); - document.querySelector('#updates')?.removeAttribute('active'); - document.querySelector('#js')?.setAttribute('active', 'true'); - - showGeneral.value = false; - showOptions.value = false; - showCSSEditor.value = false; - showUpdates.value = false; - showJSEditor.value = true; -}; - -// const setShowUpdates = () => { -// document.querySelector('#general')?.removeAttribute('active'); -// document.querySelector('#options')?.removeAttribute('active'); -// document.querySelector('#css')?.removeAttribute('active'); -// document.querySelector('#js')?.removeAttribute('active'); -// document.querySelector('#updates')?.setAttribute('active', 'true'); - -// showGeneral.value = false; -// showJSEditor.value = false; -// showOptions.value = false; -// showCSSEditor.value = false; -// showUpdates.value = true; -// };