Add ability to filter sources.

package.json

@@ -18,6 +18,7 @@
     "@heroicons/vue": "^1.0.5",
     "@vueuse/core": "^7.1.2",
     "core-js": "^3.6.5",
+    "lodash": "^4.17.21",
     "obs-websocket-js": "^4.0.3",
     "on-change": "^3.0",
     "uuid": "^8.3.2",
@@ -27,6 +28,7 @@
   "devDependencies": {
     "@types/chai": "^4.3.0",
     "@types/electron-devtools-installer": "^2.2.0",
+    "@types/lodash": "^4.14.178",
     "@types/mocha": "^9.0.0",
     "@types/uuid": "^8.3.3",
     "@typescript-eslint/eslint-plugin": "^4.18.0",

src/Preferences.vue

@@ -18,13 +18,19 @@
       <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>
+    <p class="controls-heading">Sources</p>
+    <div class="control-field">
+      <label>Source Filter</label>
+      <input type="text" v-model="sourceFilter">
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import '@/assets/shared.css';
 import { ipcRenderer } from 'electron';
-import { computed, defineComponent, onMounted, ref } from 'vue'
+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';
@@ -37,6 +43,7 @@ export default defineComponent({
       port: 4444,
       password: null
     });
+    const sourceFilter = ref('');
 
     const isConnectButtonVisible = computed(() => connectionState.value == OBSConnectionState.Disconnected || connectionState.value == OBSConnectionState.Error)
     const isAbortButtonVisible = computed(() => connectionState.value == OBSConnectionState.Connecting);
@@ -59,7 +66,16 @@ export default defineComponent({
             connection.value = connection
           }
         });
+      
+      ipcRenderer.invoke('load-source-filter')
+        .then(filter => {
+          sourceFilter.value = filter;
+        })
     });
+
+    watch(sourceFilter, debounce((newFilter: string) => {
+      ipcRenderer.send('set-source-filter', newFilter);
+    }));
     
     return {
       connection,
@@ -69,13 +85,14 @@ export default defineComponent({
 
       isConnectButtonVisible,
       isAbortButtonVisible,
-      isDisconnectButtonVisible
+      isDisconnectButtonVisible,
+
+      sourceFilter
     }
   }
 })
 </script>
 
-
 <style>
 @tailwind base;
 @tailwind components;

src/background.ts

@@ -27,7 +27,9 @@ const preferences = new Preferences({
   }
 });
 
-const obsSocket = new OBSSocket();
+const obsSocket = new OBSSocket({
+  sourceFilter: preferences.sourceFilter
+});
 
 installInterface({
   preferences,

src/electron/interface.ts

@@ -30,4 +30,14 @@ export function install(options: InstallationOptions): void {
   ipcMain.handle('get-obs-sources', () => {
     return options.obsSocket.sources;
   });
+
+  ipcMain.handle('load-source-filter', () => {
+    return options.preferences.sourceFilter;
+  });
+
+  ipcMain.on('set-source-filter', (_, filter: string) => {
+    options.preferences.sourceFilter = filter;
+
+    options.obsSocket.sourceFilter = filter;
+  })
 }

src/electron/obs.ts

@@ -5,13 +5,21 @@ import broadcast from "./broadcast";
 import { OBSConnectionState } from "@/obs/connection-state";
 import { OBSConnectionOptions } from "@/obs/connection";
 
+interface OBSSocketOptions {
+  sourceFilter: string
+}
+
 export default class OBSSocket {
   _state = OBSConnectionState.Disconnected;
   _socket = new ObsWebSocket();
 
+  _filter = '';
+
   _sources: string[] = [];
 
-  constructor() {
+  constructor(options: OBSSocketOptions) {
+    this._filter = options.sourceFilter;
+
     this.sources = [];
     this._socket.on('SourceCreated', (data) => this._sourceCreated(data));
     this._socket.on('SourceDestroyed', (data) => this._sourceDestroyed(data));
@@ -62,6 +70,16 @@ export default class OBSSocket {
     broadcast('obs-sources', sources);
   }
 
+  get sourceFilter(): string {
+    return this._filter;
+  }
+
+  set sourceFilter(filter: string) {
+    this._filter = filter;
+
+    this._fullUpdate();
+  }
+
   _fullUpdate(): Promise<unknown> {
     return Promise.all([
       this._fetchSources()
@@ -72,26 +90,37 @@ export default class OBSSocket {
     return this._socket.send('GetSourcesList')
       .then((response) => {
         this.sources = response.sources
-          .filter(source => source.type == 'input')
+          .filter(source => source.type == 'input' && source.name.includes(this._filter))
           .map(source => source.name);
       })
   }
 
   _sourceCreated({ sourceName, sourceType }: { sourceName: string, sourceType: string }): void {
     if (sourceType != 'input') { return }
-    this.sources.push(sourceName);
+    this._sources.push(sourceName);
   }
 
   _sourceDestroyed({ sourceName }: { sourceName: string }): void {
     const sourceIndex = this.sources.indexOf(sourceName);
     if (sourceIndex < 0) { return }
-    this.sources.splice(sourceIndex, 1);
+    this._sources.splice(sourceIndex, 1);
   }
 
   _sourceRenamed({ previousName, newName, sourceType }: { previousName: string, newName: string, sourceType: string }): void {
     if (sourceType != 'input') { return }
     const sourceIndex = this.sources.indexOf(previousName);
-    if (sourceIndex < 0) { return }
-    this.sources.splice(sourceIndex, 1, newName);
+    const newNameMatchesFilter = newName.includes(this._filter);
+
+    if (sourceIndex < 0) {
+      if (newNameMatchesFilter) {
+        this._sources.push(newName);
+      }
+    } else {
+      if (newNameMatchesFilter) {
+        this._sources[sourceIndex] = newName;
+      } else {
+        this._sources.splice(sourceIndex, 1);
+      }
+    }
   }
 }

src/electron/preferences.ts

@@ -29,4 +29,17 @@ export default class Preferences {
 
     this.store.set('obs-connection', value)
   }
+
+  get sourceFilter(): string {
+    const sourceFilter = this.store.get('source-filter')
+    if (typeof sourceFilter !== 'string') {
+      return '';
+    }
+
+    return sourceFilter;
+  }
+
+  set sourceFilter(value: string) {
+    this.store.set('source-filter', value);
+  }
 }

yarn.lock

@@ -1231,6 +1231,11 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
   integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
 
+"@types/lodash@^4.14.178":
+  version "4.14.178"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.178.tgz#341f6d2247db528d4a13ddbb374bcdc80406f4f8"
+  integrity sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw==
+
 "@types/mime@^1":
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/@types/mime/-/mime-1.3.2.tgz#93e25bf9ee75fe0fd80b594bc4feb0e862111b5a"