From 1eff8c7ccc9dad7ad6cf95911bc30aba8055f7ed Mon Sep 17 00:00:00 2001
From: Craig <craigbett@gmail.com>
Date: Tue, 11 Feb 2020 06:11:07 +0000
Subject: [PATCH] bug fix

---
 client/src/components/resolution.vue | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/client/src/components/resolution.vue b/client/src/components/resolution.vue
index 907f8c3..ad58e45 100644
--- a/client/src/components/resolution.vue
+++ b/client/src/components/resolution.vue
@@ -1,10 +1,15 @@
 <template>
   <vue-context class="context" ref="context">
     <template v-for="(conf, i) in configurations">
-      <li v-for="(rate, j) in conf.rates" :key="`${i}-${j}`" @click="screenSet(conf.width, conf.height, rate)">
+      <li
+        v-for="(fps, j) in conf.rates"
+        :key="`${i}-${j}`"
+        @click="screenSet(conf.width, conf.height, fps)"
+        :class="[conf.width === width && conf.height === height && fps === rate ? 'active' : '']"
+      >
         <i class="fas fa-desktop"></i>
         <span>{{ conf.width }}x{{ conf.height }}</span>
-        <small>{{ rate }}</small>
+        <small>{{ fps }}</small>
       </li>
     </template>
   </vue-context>
@@ -57,6 +62,7 @@
       flex-direction: row;
       padding: 8px 5px;
       cursor: pointer;
+      border-radius: 3px;
 
       i {
         margin-right: 10px;
@@ -72,6 +78,7 @@
         align-self: flex-end;
       }
 
+      &.active,
       &:hover,
       &:focus {
         text-decoration: none;
@@ -106,6 +113,18 @@
   export default class extends Vue {
     @Ref('context') readonly context!: any
 
+    get width() {
+      return this.$accessor.video.width
+    }
+
+    get height() {
+      return this.$accessor.video.height
+    }
+
+    get rate() {
+      return this.$accessor.video.rate
+    }
+
     get configurations() {
       return this.$accessor.video.configurations
     }