Set initial radio button value on load

src/renderer/components/ft-radio-button/ft-radio-button.js

@@ -18,6 +18,10 @@ export default defineComponent({
     disabled: {
       type: Boolean,
       default: false
+    },
+    initialValueIndex: {
+      type: Number,
+      default: 0
     }
   },
   data: function () {
@@ -34,7 +38,7 @@ export default defineComponent({
   },
   mounted: function () {
     this.id = this._uid
-    this.selectedValue = this.values[0]
+    this.selectedValue = this.values[this.initialValueIndex]
   },
   methods: {
     updateSelectedValue: function (value) {

src/renderer/components/ft-radio-button/ft-radio-button.vue

@@ -14,7 +14,7 @@
         v-model="selectedValue"
         :name="inputName"
         :value="values[index]"
-        :checked="index === 0"
+        :checked="index === initialValueIndex"
         :disabled="disabled"
         class="radio"
         type="radio"

src/renderer/components/ft-search-filters/ft-search-filters.js

@@ -15,6 +15,10 @@ export default defineComponent({
   },
   data: function () {
     return {
+      searchSortByStartIndex: 0,
+      searchTimeStartIndex: 0,
+      searchTypeStartIndex: 0,
+      searchDurationStartIndex: 0,
       sortByValues: [
         'relevance',
         'rating',
@@ -101,6 +105,12 @@ export default defineComponent({
       ]
     }
   },
+  created: function () {
+    this.searchSortByStartIndex = this.sortByValues.indexOf(this.searchSettings.sortBy)
+    this.searchTimeStartIndex = this.timeValues.indexOf(this.searchSettings.time)
+    this.searchTypeStartIndex = this.typeValues.indexOf(this.searchSettings.type)
+    this.searchDurationStartIndex = this.durationValues.indexOf(this.searchSettings.duration)
+  },
   methods: {
     isVideoOrMovieOrAll(type) {
       return type === 'video' || type === 'movie' || type === 'all'

src/renderer/components/ft-search-filters/ft-search-filters.vue

@@ -17,6 +17,7 @@
           :title="$t('Search Filters.Sort By.Sort By')"
           :labels="sortByLabels"
           :values="sortByValues"
+          :initial-value-index="searchSortByStartIndex"
           class="searchRadio"
           @change="updateSortBy"
         />
@@ -25,6 +26,7 @@
           :title="$t('Search Filters.Time.Time')"
           :labels="timeLabels"
           :values="timeValues"
+          :initial-value-index="searchTimeStartIndex"
           class="searchRadio"
           @change="updateTime"
         />
@@ -33,6 +35,7 @@
           :title="$t('Search Filters.Type.Type')"
           :labels="typeLabels"
           :values="typeValues"
+          :initial-value-index="searchTypeStartIndex"
           class="searchRadio"
           @change="updateType"
         />
@@ -41,6 +44,7 @@
           :title="$t('Search Filters.Duration.Duration')"
           :labels="durationLabels"
           :values="durationValues"
+          :initial-value-index="searchDurationStartIndex"
           class="searchRadio"
           @change="updateDuration"
         />

src/renderer/components/top-nav/top-nav.js

@@ -84,10 +84,6 @@ export default defineComponent({
       return this.$store.getters.getSearchFilterValueChanged
     },
 
-    showFilters: function () {
-      return this.$store.getters.getShowSearchFilters
-    },
-
     forwardText: function () {
       return this.$t('Forward')
     },

src/renderer/components/top-nav/top-nav.scss

@@ -89,11 +89,6 @@
 
   margin-inline-start: $effect-distance;
 
-  &.showFilters {
-    box-shadow: 0 0 $effect-distance var(--primary-color);
-    transform: translateY(1px);
-  }
-
   &.filterChanged {
     box-shadow: 0 0 $effect-distance var(--primary-color);
     color: var(--primary-color);
@@ -212,18 +207,4 @@
       flex: 1;
     }
   }
-
-  // .searchFilters {
-  //   inset-inline: 0;
-  //   margin-block: 10px 20px;
-  //   margin-inline: 220px 20px;
-  //   position: absolute;
-  //   transition: margin 150ms ease-in-out;
-
-  //   @media only screen and (width <= 680px) {
-  //     inset-inline: 0;
-  //     margin-block: 95px 0;
-  //     margin-inline: 10px;
-  //   }
-  // }
 }

src/renderer/components/top-nav/top-nav.vue

@@ -92,8 +92,7 @@
         />
         <font-awesome-icon
           class="navFilterIcon navIcon"
-          :class="{ filterChanged: searchFilterValueChanged, showFilters: showFilters }"
-          :aria-pressed="showFilters"
+          :class="{ filterChanged: searchFilterValueChanged }"
           :icon="['fas', 'filter']"
           :title="$t('Search Filters.Search Filters')"
           role="button"

src/renderer/store/modules/utils.js

@@ -178,7 +178,7 @@ const getters = {
 
   getLastVideoRefreshTimestampByProfile: (state) => (profileId) => {
     return state.lastVideoRefreshTimestampByProfile[profileId]
-  }
+  },
 }
 
 const actions = {
@@ -921,14 +921,14 @@ const mutations = {
     state.cachedPlaylist = value
   },
 
-  setSearchSortBy (state, value) {
-    state.searchSettings.sortBy = value
-  },
-
   setSearchFilterValueChanged (state, value) {
     state.searchFilterValueChanged = value
   },
 
+  setSearchSortBy (state, value) {
+    state.searchSettings.sortBy = value
+  },
+
   setSearchTime (state, value) {
     state.searchSettings.time = value
   },