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

Reviewed-on: #9

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)