live resolution complete

client/src/components/resolution.vue

@@ -2,14 +2,13 @@
   <vue-context class="context" ref="context">
     <template v-for="(conf, i) in configurations">
       <li
-        v-for="(fps, j) in conf.rates"
+        :key="i"
-        :key="`${i}-${j}`"
+        @click="screenSet(conf)"
-        @click="screenSet(conf.width, conf.height, fps)"
+        :class="[conf.width === width && conf.height === height && conf.rate === rate ? 'active' : '']"
-        :class="[conf.width === width && conf.height === height && fps === rate ? 'active' : '']"
       >
         <i class="fas fa-desktop"></i>
         <span>{{ conf.width }}x{{ conf.height }}</span>
-        <small>{{ fps }}</small>
+        <small>{{ conf.rate }}</small>
       </li>
     </template>
   </vue-context>
@@ -60,7 +59,7 @@
       align-content: center;
       display: flex;
       flex-direction: row;
-      padding: 8px 5px;
+      padding: 8px;
       cursor: pointer;
       border-radius: 3px;
 
@@ -99,7 +98,7 @@
 
 <script lang="ts">
   import { Component, Ref, Watch, Vue } from 'vue-property-decorator'
-  import { Member } from '~/neko/types'
+  import { ScreenResolution } from '~/neko/types'
 
   // @ts-ignore
   import { VueContext } from 'vue-context'
@@ -133,8 +132,8 @@
       this.context.open(event)
     }
 
-    screenSet(width: number, height: number, rate: number) {
+    screenSet(resolution: ScreenResolution) {
-      this.$accessor.video.screenSet({ width, height, rate })
+      this.$accessor.video.screenSet(resolution)
     }
   }
 </script>

client/src/components/video.vue

@@ -30,7 +30,7 @@
       </div>
       <ul v-if="!fullscreen" class="video-menu">
         <li><i @click.stop.prevent="requestFullscreen" class="fas fa-expand"></i></li>
-        <li v-if="admin"><i @click.stop.prevent="onResolution" class="fas fa-cog"></i></li>
+        <li v-if="admin"><i @click.stop.prevent="onResolution" class="fas fa-desktop"></i></li>
       </ul>
       <neko-resolution ref="resolution" />
     </div>

client/src/neko/messages.ts

@@ -10,7 +10,7 @@ import {
   ScreenEvents,
   AdminEvents,
 } from './events'
-import { Member, ScreenConfigurations } from './types'
+import { Member, ScreenConfigurations, ScreenResolution } from './types'
 
 export type WebSocketMessages =
   | WebSocketMessage
@@ -157,11 +157,8 @@ export interface ScreenResolutionMessage extends WebSocketMessage, ScreenResolut
   event: ScreenEvents
 }
 
-export interface ScreenResolutionPayload {
+export interface ScreenResolutionPayload extends ScreenResolution {
   id?: string
-  width: number
-  height: number
-  rate: number
 }
 
 export interface ScreenConfigurationsMessage extends WebSocketMessage, ScreenConfigurationsPayload {

client/src/neko/types.ts

@@ -8,11 +8,17 @@ export interface Member {
 }
 
 export interface ScreenConfigurations {
-  [index: number]: ScreenConfiguration
+  [index: string]: ScreenConfiguration
 }
 
 export interface ScreenConfiguration {
-  width: string
+  width: number
-  height: string
+  height: number
-  rates: { [index: number]: number }
+  rates: { [index: string]: number }
+}
+
+export interface ScreenResolution {
+  width: number
+  height: number
+  rate: number
 }

client/src/store/video.ts

@@ -1,7 +1,7 @@
 import { getterTree, mutationTree, actionTree } from 'typed-vuex'
 import { get, set } from '~/utils/localstorage'
 import { EVENT } from '~/neko/events'
-import { ScreenConfigurations } from '~/neko/types'
+import { ScreenConfigurations, ScreenResolution } from '~/neko/types'
 import { accessor } from '~/store'
 
 export const namespaced = true
@@ -10,7 +10,7 @@ export const state = () => ({
   index: -1,
   tracks: [] as MediaStreamTrack[],
   streams: [] as MediaStream[],
-  configurations: {} as ScreenConfigurations,
+  configurations: [] as ScreenResolution[],
   width: 1280,
   height: 720,
   rate: 30,
@@ -99,7 +99,25 @@ export const mutations = mutationTree(state, {
   },
 
   setConfigurations(state, configurations: ScreenConfigurations) {
-    state.configurations = configurations
+    const data: ScreenResolution[] = []
+
+    for (const i of Object.keys(configurations)) {
+      const { width, height, rates } = configurations[i]
+      if (width >= 600 && height >= 300) {
+        for (const j of Object.keys(rates)) {
+          const rate = rates[j]
+          if (rate >= 15 && rate <= 60) {
+            data.push({
+              width,
+              height,
+              rate,
+            })
+          }
+        }
+      }
+    }
+
+    state.configurations = data.sort((a, b) => (b.width === a.width ? b.rate - a.rate : b.width - a.width))
   },
 
   setVolume(state, volume: number) {
@@ -155,12 +173,12 @@ export const actions = actionTree(
       $client.sendMessage(EVENT.SCREEN.RESOLUTION)
     },
 
-    screenSet({ state }, { width, height, rate }: { width: number; height: number; rate: number }) {
+    screenSet({ state }, resolution: ScreenResolution) {
       if (!accessor.connected || !accessor.user.admin) {
         return
       }
 
-      $client.sendMessage(EVENT.SCREEN.SET, { width, height, rate })
+      $client.sendMessage(EVENT.SCREEN.SET, resolution)
     },
   },
 )