-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Make preferences a modal on Windows.
- Loading branch information
1 parent
96c044b
commit 3fdb346
Showing
9 changed files
with
181 additions
and
115 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| <template> | ||
| <div class="text-sm macos:bg-system-background-under-page macos:text-system-text"> | ||
| <div class="macos:space-y-2 windows:flex windows:flex-col windows:gap-8 windows:w-1/2"> | ||
| <Controls label="OBS Connection"> | ||
| <Control label="Host" type="text" v-model="connection.host"></Control> | ||
| <Control label="Port" type="text" v-model="connection.port"></Control> | ||
| <Control label="Password" type="password" v-model="connection.password"></Control> | ||
|
|
||
| <div class="flex justify-end macos:col-start-2 macos:col-end-9 windows:w-2/3"> | ||
| <button v-if="isConnectButtonVisible" class="px-3 py-1 bg-green-500 rounded" @click="connect">Connect</button> | ||
| <button v-if="isAbortButtonVisible" class="px-3 py-1 bg-yellow-500 rounded">Abort</button> | ||
| <button v-if="isDisconnectButtonVisible" class="px-3 py-1 bg-red-500 rounded" @click="disconnect">Disconnect</button> | ||
| </div> | ||
| </Controls> | ||
|
|
||
| <Controls label="Filters"> | ||
| <div v-if="isWindows" class="mb-2">Filters allow you to limit which scenes and sources show up.</div> | ||
| <Control label="Source Filter" type="text" v-model="sourceFilter"></Control> | ||
| <Control label="Scene Filter" type="text" v-model="sceneFilter"></Control> | ||
| </Controls> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { ipcRenderer } from 'electron'; | ||
| import { computed, defineComponent, onMounted, ref, watch } from 'vue' | ||
| import debounce from 'lodash/debounce'; | ||
| import { isOBSConnectionOptions } from '@/obs/connection'; | ||
| import { useObsConnectionState } from '@/integration/obs'; | ||
| import { OBSConnectionState } from '@/obs/connection-state'; | ||
| import Controls from '@/components/Preferences/Controls.vue'; | ||
| import Control from '@/components/Preferences/Control.vue'; | ||
| import { useIsWindows } from '@/integration/platform'; | ||
| export default defineComponent({ | ||
| components: { | ||
| Controls, | ||
| Control | ||
| }, | ||
| setup() { | ||
| const connectionState = useObsConnectionState(); | ||
| const connection = ref({ | ||
| host: 'localhost', | ||
| port: 4444, | ||
| password: null | ||
| }); | ||
| const sourceFilter = ref(''); | ||
| const sceneFilter = ref(''); | ||
| const isConnectButtonVisible = computed(() => connectionState.value == OBSConnectionState.Disconnected || connectionState.value == OBSConnectionState.Error) | ||
| const isAbortButtonVisible = computed(() => connectionState.value == OBSConnectionState.Connecting); | ||
| const isDisconnectButtonVisible = computed(() => connectionState.value == OBSConnectionState.Connected); | ||
| const connect = () => { | ||
| if (isOBSConnectionOptions(connection.value)) { | ||
| ipcRenderer.send('connect-to-obs', JSON.parse(JSON.stringify(connection.value))); | ||
| } | ||
| } | ||
| const disconnect = () => { | ||
| ipcRenderer.send('disconnect-from-obs'); | ||
| } | ||
| onMounted(() => { | ||
| ipcRenderer.invoke('load-obs-connection') | ||
| .then(connection => { | ||
| if (connection) { | ||
| connection.value = connection | ||
| } | ||
| }); | ||
| ipcRenderer.invoke('load-source-filter') | ||
| .then(filter => { | ||
| sourceFilter.value = filter; | ||
| }) | ||
| ipcRenderer.invoke('load-scene-filter') | ||
| .then(filter => { | ||
| sceneFilter.value = filter; | ||
| }); | ||
| }); | ||
| watch(sourceFilter, debounce((newFilter: string) => { | ||
| ipcRenderer.send('set-source-filter', newFilter); | ||
| })); | ||
| watch(sceneFilter, debounce((newFilter: string) => { | ||
| ipcRenderer.send('set-scene-filter', newFilter); | ||
| })); | ||
| const isWindows = useIsWindows(); | ||
| return { | ||
| connection, | ||
| connectionState, | ||
| connect, | ||
| disconnect, | ||
| isConnectButtonVisible, | ||
| isAbortButtonVisible, | ||
| isDisconnectButtonVisible, | ||
| sourceFilter, | ||
| sceneFilter, | ||
| isWindows | ||
| } | ||
| } | ||
| }) | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| <template> | ||
| <Dialog :open="open" @close="close" class="fixed inset-x-0 bottom-0 z-10 bg-white flex flex-col" style="top: env(titlebar-area-height, 40px);"> | ||
| <DialogTitle class="text-4xl font-light flex space-x-2 mb-4"> | ||
| <button class="hover:bg-gray-200 px-2 py-2" title="Back" @click.prevent="close"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M10 19l-7-7m0 0l7-7m-7 7h18" /> | ||
| </svg> | ||
| </button> | ||
|
|
||
| <span>Settings</span> | ||
| </DialogTitle> | ||
|
|
||
| <Content class="p-6 pt-4 overflow-y-auto"></Content> | ||
| </Dialog> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { defineComponent } from 'vue' | ||
| import { | ||
| Dialog, | ||
| DialogTitle, | ||
| } from "@headlessui/vue"; | ||
| import Content from './Content.vue'; | ||
| export default defineComponent({ | ||
| components: { | ||
| Dialog, | ||
| DialogTitle, | ||
| Content | ||
| }, | ||
| props: { | ||
| open: { | ||
| type: Boolean, | ||
| required: true | ||
| } | ||
| }, | ||
| emits: ['close'], | ||
| setup(_, { emit }) { | ||
| return { | ||
| close: () => emit('close') | ||
| }; | ||
| } | ||
| }) | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters