Merge pull request 'shareFps' (#9) from shareFps into master

Reviewed-on: #9

client/app/assets/styles/main.scss

@@ -31,17 +31,17 @@ body {
 
 .p-select-overlay {
   /* Force dropdown width to match computed min-width from PrimeVue internals. */
-  width: 0;
+  width: 0 !important;
 }
 
 .p-select-label {
-  width: 0;
+  width: 0 !important;
-  overflow: hidden;
+  overflow: hidden !important;
-  text-overflow: ellipsis;
+  text-overflow: ellipsis !important;
 }
 
 .p-select-option-label {
-  min-width: 0;
+  min-width: 0 !important;
-  overflow: hidden;
+  overflow: hidden !important;
-  text-overflow: ellipsis;
+  text-overflow: ellipsis !important;
 }

client/app/components.d.ts

@@ -17,7 +17,6 @@ declare module 'vue' {
     PrimeFloatLabel: typeof import('primevue/floatlabel')['default']
     PrimeInputText: typeof import('primevue/inputtext')['default']
     PrimePassword: typeof import('primevue/password')['default']
-    PrimeProgressBar: typeof import('primevue/progressbar')['default']
     PrimeScrollPanel: typeof import('primevue/scrollpanel')['default']
     PrimeSelect: typeof import('primevue/select')['default']
     PrimeSelectButton: typeof import('primevue/selectbutton')['default']

client/app/composables/use-mediasoup.ts

@@ -317,7 +317,7 @@ export const useMediasoup = createSharedComposable(() => {
     if (!device.value)
       return
 
-    const stream = await getShareStream()
+    const stream = await getShareStream(preferences.shareFps.value)
 
     const track = stream.getVideoTracks()[0]
 

client/app/composables/use-preferences.ts

@@ -19,6 +19,8 @@ export const usePreferences = createGlobalState(() => {
   const noiseSuppression = useLocalStorage('NOISE_SUPPRESSION', true)
   const echoCancellation = useLocalStorage('ECHO_CANCELLATION', true)
 
+  const shareFps = useLocalStorage('SHARE_FPS', 30)
+
   const toggleInputHotkey = ref<SyncedPreferences['toggleInputHotkey']>('')
   const toggleOutputHotkey = ref<SyncedPreferences['toggleOutputHotkey']>('')
 
@@ -57,6 +59,7 @@ export const usePreferences = createGlobalState(() => {
     autoGainControl,
     noiseSuppression,
     echoCancellation,
+    shareFps,
     toggleInputHotkey,
     toggleOutputHotkey,
     inputDeviceExist,

client/app/pages/preferences.vue

@@ -47,6 +47,18 @@
     <!--      <label for="outputDevice">Output device</label> -->
     <!--    </PrimeFloatLabel> -->
 
+    <PrimeDivider align="left">
+      Video
+    </PrimeDivider>
+
+    <div>
+      <div class="flex justify-between text-sm mb-3">
+        <span>FPS</span>
+        <span>{{ shareFps }}</span>
+      </div>
+      <PrimeSlider v-model="shareFps" class="mx-[10px]" :min="30" :max="60" :step="5" />
+    </div>
+
     <template v-if="isTauri">
       <PrimeDivider align="left">
         Hotkeys
@@ -117,6 +129,7 @@ const {
   toggleOutputHotkey,
   inputDeviceExist,
   outputDeviceExist,
+  shareFps,
 } = usePreferences()
 
 const setupToggleInputHotkey = (event: KeyboardEvent) => setupHotkey(event, toggleInputHotkey)

client/src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "chad",
-  "version": "0.2.18",
+  "version": "0.2.19",
   "identifier": "xyz.koptilnya.chad",
   "build": {
     "frontendDist": "../.output/public",