Don't reinvent the wheel

src/components/Player.vue

@@ -47,7 +47,6 @@ export default {
     video: Object,
     sponsors: Object,
     skipToTime: Number,
-    selectedAutoPlay: Boolean,
     selectedAutoLoop: Boolean
   },
   data () {

src/routes/Preferences.vue

@@ -2,11 +2,13 @@
   <v-container fluid>
     <h1 class="text-h4 text-center">{{ $t('titles.preferences') }}</h1>
     <v-divider class="ma-4" />
-    <div style="display: flex;" v-for="(opt, optId) in options" :key="optId">
-      <v-simple-checkbox
+    <div v-for="(opt, optId) in options" :key="optId">
+      <v-checkbox
         v-if="opt.type === 'bool'"
-        :value="$store.getters['prefs/getPreferenceBoolean'](opt.id, opt.default)"
-        @input="setValue(opt.id, $event)"
+        dense
+        :label="$t('preferences.' + opt.id)"
+        :input-value="$store.getters['prefs/getPreferenceBoolean'](opt.id, opt.default)"
+        @change="setValue(opt.id, $event)"
       />
       <v-text-field
         v-else-if="opt.type === 'number'"
@@ -21,7 +23,6 @@
         :value="$store.getters['prefs/getPreference'](opt.id, opt.default)"
         @input="setValue(opt.id, $event)" :items="opt.options"
       />
-      <p v-if="opt.type === 'bool'">{{ $t('preferences.' + opt.id) }}</p><br />
     </div>
     <h5 class="text-h5">{{ $t('actions.instances_list') }}</h5>
     <v-data-table :headers="tableHeaders" :items="instances" />

src/routes/WatchVideo.vue

@@ -7,7 +7,6 @@
       :video="video"
       :skip-to-time="'t' in $route.query ? Number($route.query.t) : null"
       :sponsors="sponsors"
-      :selectedAutoPlay="isAutoplayEnabled"
       :selectedAutoLoop="selectedAutoLoop"
       @videoEnded="videoEnded"
     />
@@ -71,7 +70,7 @@
             </div>
             <div>
               <!-- TODO translate -->
-              <v-checkbox dense :value="isAutoplayEnabled" @change="onAutoplayChg" label="Autoplay Next Video" />
+              <v-checkbox dense :input-value="isAutoplayEnabled" @change="onAutoplayChg" label="Autoplay Next Video" />
               <v-checkbox dense v-model="selectedAutoLoop" label="Loop this video" />
             </div>
           </v-card-text>

src/store/authentication-store.js

@@ -41,7 +41,7 @@ const AuthenticationStore = {
 
   getters: {
     isCurrentlyAuthenticated (state, getters, rootState, rootGetters) {
-      return state.authStateByInstance[rootGetters['prefs/apiUrl']]?.isAuthenticated
+      return state.authStateByInstance[rootGetters['prefs/apiUrl']]?.isAuthenticated === true
     },
 
     authToken (state, getters, rootState, rootGetters) {