More ESLint fixes.

frontend/vue/components/Admin/Index.vue

@@ -32,8 +32,8 @@
 
                     <b-list-group>
                         <b-list-group-item
-                            v-for="(item, key) in panel.items"
+                            v-for="(item, itemKey) in panel.items"
-                            :key="key"
+                            :key="itemKey"
                             :href="item.url"
                         >
                             {{

frontend/vue/components/Common/Charts/HourChart.vue

@@ -18,11 +18,15 @@ const props = defineProps({
     },
     data: {
         type: Array,
-        default: []
+        default: () => {
+            return [];
+        }
     },
     labels: {
         type: Array,
-        default: []
+        default: () => {
+            return [];
+        }
     }
 });
 

frontend/vue/components/Common/Charts/PieChart.vue

@@ -17,11 +17,15 @@ const props = defineProps({
     },
     data: {
         type: Array,
-        default: []
+        default: () => {
+            return [];
+        }
     },
     labels: {
         type: Array,
-        default: []
+        default: () => {
+            return [];
+        }
     },
     aspectRatio: {
         type: Number,

frontend/vue/components/Common/Charts/TimeSeriesChart.vue

@@ -20,7 +20,9 @@ const props = defineProps({
     },
     data: {
         type: Array,
-        default: []
+        default: () => {
+            return [];
+        }
     }
 });
 

frontend/vue/components/Common/DataTable.vue

@@ -49,7 +49,7 @@
                                 debounce="200"
                                 type="search"
                                 class="search-field form-control"
-                                :placeholder="langSearch"
+                                :placeholder="$gettext('Search')"
                             />
                         </div>
                     </div>
@@ -58,8 +58,7 @@
                             <b-button
                                 v-b-tooltip.hover
                                 variant="default"
-                                title="Refresh"
+                                :title="$gettext('Refresh rows')"
-                                :title="langRefreshTooltip"
                                 @click="onClickRefresh"
                             >
                                 <icon icon="refresh" />
@@ -69,7 +68,7 @@
                                 v-b-tooltip.hover
                                 variant="default"
                                 :text="perPageLabel"
-                                :title="langPerPageTooltip"
+                                :title="$gettext('Rows per page')"
                             >
                                 <b-dropdown-item
                                     v-for="pageOption in pageOptions"
@@ -84,7 +83,7 @@
                                 v-if="selectFields"
                                 v-b-tooltip.hover
                                 variant="default"
-                                :title="langSelectFieldsTooltip"
+                                :title="$gettext('Select displayed fields')"
                             >
                                 <template #button-content>
                                     <icon icon="filter_list" />
@@ -133,8 +132,8 @@
                 :per-page="perPage"
                 :items="itemProvider"
                 :fields="visibleFields"
-                :empty-text="langNoRecords"
+                :empty-text="$gettext('No records to display.')"
-                :empty-filtered-text="langNoRecords"
+                :empty-filtered-text="$gettext('No records to display.')"
                 :responsive="responsive"
                 :no-provider-paging="handleClientSide"
                 :no-provider-sorting="handleClientSide"
@@ -150,7 +149,7 @@
             >
                 <template #head(selected)="data">
                     <b-form-checkbox
-                        :aria-label="langSelectAll"
+                        :aria-label="$gettext('Select all visible rows')"
                         :checked="allSelected"
                         @change="toggleSelected"
                     />
@@ -158,11 +157,11 @@
                 <template #cell(selected)="{ rowSelected }">
                     <div class="text-muted">
                         <template v-if="rowSelected">
-                            <span class="sr-only">{{ langDeselectRow }}</span>
+                            <span class="sr-only">{{ $gettext('Deselect') }}</span>
                             <icon icon="check_box" />
                         </template>
                         <template v-else>
-                            <span class="sr-only">{{ langSelectRow }}</span>
+                            <span class="sr-only">{{ $gettext('Select') }}</span>
                             <icon icon="check_box_outline_blank" />
                         </template>
                     </div>
@@ -187,7 +186,7 @@
                                 </div>
                             </div>
 
-                            {{ langLoading }}
+                            {{ $gettext('Loading...') }}
                         </div>
                     </div>
                 </template>
@@ -217,7 +216,7 @@
 
 <script>
 import store from 'store';
-import {forEach, filter, map} from 'lodash';
+import {forEach, filter, map, defaultTo, includes} from 'lodash';
 import Icon from './Icon.vue';
 import {defineComponent} from "vue";
 
@@ -319,33 +318,6 @@ export default defineComponent({
         };
     },
     computed: {
-        langRefreshTooltip() {
-            return this.$gettext('Refresh rows');
-        },
-        langPerPageTooltip() {
-            return this.$gettext('Rows per page');
-        },
-        langSelectFieldsTooltip() {
-            return this.$gettext('Select displayed fields');
-        },
-        langSelectAll() {
-            return this.$gettext('Select all visible rows');
-        },
-        langSelectRow() {
-            return this.$gettext('Select');
-        },
-        langDeselectRow() {
-            return this.$gettext('Deselect');
-        },
-        langSearch() {
-            return this.$gettext('Search');
-        },
-        langNoRecords() {
-            return this.$gettext('No records to display.');
-        },
-        langLoading() {
-            return this.$gettext('Loading...');
-        },
         visibleFields() {
             let fields = this.allFields.slice();
 
@@ -411,10 +383,10 @@ export default defineComponent({
             if (store.enabled && store.get(this.storeKey) !== undefined) {
                 let settings = store.get(this.storeKey);
 
-                this.perPage = _.defaultTo(settings.perPage, this.defaultPerPage);
+                this.perPage = defaultTo(settings.perPage, this.defaultPerPage);
 
                 forEach(this.selectableFields, (field) => {
-                    field.visible = _.includes(settings.visibleFields, field.key);
+                    field.visible = includes(settings.visibleFields, field.key);
                 });
 
                 if (settings.sortBy) {

frontend/vue/components/Common/ScheduleView.vue

@@ -30,6 +30,7 @@ const emit = defineEmits(['click']);
 const onEventDidMount = (info) => {
     let desc = info?.event?.extendedProps?.description || null;
     if (desc !== null) {
+        // eslint-ignore-line no-undef
         $(info.el).tooltip({
             title: desc,
             placement: 'top',

frontend/vue/components/Common/StreamingLogView.vue

@@ -18,17 +18,14 @@
             class="form-control log-viewer"
             spellcheck="false"
             readonly
-        >{{ logs }}</textarea>
+            :value="logs"
+        />
     </b-overlay>
 </template>
 
 <script>
-
-import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox";
-
 export default {
     name: 'StreamingLogView',
-    components: {BWrappedFormCheckbox},
     props: {
         logUrl: {
             type: String,

frontend/vue/components/Dashboard.vue

@@ -322,7 +322,6 @@
 
 <script>
 import TimeSeriesChart from '~/components/Common/Charts/TimeSeriesChart.vue';
-import DataTable from '~/components/Common/DataTable';
 import store from 'store';
 import Icon from '~/components/Common/Icon';
 import Avatar from '~/components/Common/Avatar';
@@ -330,7 +329,7 @@ import PlayButton from "~/components/Common/PlayButton";
 import AlbumArt from "~/components/Common/AlbumArt";
 
 export default {
-    components: {PlayButton, Avatar, Icon, DataTable, TimeSeriesChart, AlbumArt},
+    components: {PlayButton, Avatar, Icon, TimeSeriesChart, AlbumArt},
     props: {
         userUrl: {
             type: String,

frontend/vue/components/InlinePlayer.vue

@@ -81,7 +81,7 @@ import AudioPlayer from '~/components/Common/AudioPlayer.vue';
 import formatTime from '~/functions/formatTime.js';
 import Icon from '~/components/Common/Icon.vue';
 import {usePlayerStore} from "~/store.js";
-import {useMounted, useStorage} from "@vueuse/core";
+import {useStorage} from "@vueuse/core";
 import {computed, ref, toRef} from "vue";
 
 const store = usePlayerStore();
@@ -90,7 +90,6 @@ const current = toRef(store, 'current');
 
 const volume = useStorage('player_volume', 55);
 const isMuted = useStorage('player_is_muted', false);
-const isMounted = useMounted();
 const $player = ref(); // AudioPlayer
 
 const duration = computed(() => {

frontend/vue/components/Public/FullPlayer/SongHistory.vue

@@ -31,7 +31,9 @@ import {DateTime} from "luxon";
 const props = defineProps({
     history: {
         type: Array,
-        default: []
+        default: () => {
+            return [];
+        }
     },
     showAlbumArt: {
         type: Boolean,

frontend/vue/components/Public/FullPlayer/SongHistoryModal.vue

@@ -20,7 +20,9 @@ import SongHistory from './SongHistory';
 const props = defineProps({
     history: {
         type: Array,
-        default: []
+        default: () => {
+            return [];
+        }
     },
     showAlbumArt: {
         type: Boolean,

frontend/vue/components/Public/OnDemand.vue

@@ -105,7 +105,9 @@ const props = defineProps({
     },
     customFields: {
         type: Array,
-        default: []
+        default: () => {
+            return [];
+        }
     },
     showDownloadButton: {
         type: Boolean,

frontend/vue/components/Public/Player.vue

@@ -248,7 +248,6 @@ const currentTimeTotalDisplay = computed(() => {
     return ($currentTrackDuration) ? formatTime($currentTrackDuration) : null;
 });
 
-const isMounted = useMounted();
 const $player = ref(); // Template ref
 
 const volume = useStorage('player_volume', 55);

frontend/vue/components/Public/WebDJ.vue

@@ -64,7 +64,9 @@ export default {
         },
         libUrls: {
             type: Array,
-            default: []
+            default: () => {
+                return [];
+            }
         },
         baseUri: {
             type: String,

frontend/vue/components/Public/WebDJ/SettingsPanel.vue

@@ -319,7 +319,9 @@ export default {
         },
         libUrls: {
             type: Array,
-            default: []
+            default: () => {
+                return [];
+            }
         },
         baseUri: {
             type: String,

frontend/vue/components/Stations/Media/MediaToolbar.vue

@@ -167,7 +167,9 @@ export default {
         },
         playlists: {
             type: Array,
-            default: []
+            default: () => {
+                return [];
+            }
         },
         batchUrl: {
             type: String,

frontend/vue/components/Stations/Playlists/Form/Schedule.vue

@@ -51,7 +51,9 @@ export default {
         },
         scheduleItems: {
             type: Array,
-            default: []
+            default: () => {
+                return [];
+            }
         }
     },
     methods: {

frontend/vue/components/Stations/Profile/EmbedModal.vue

@@ -61,7 +61,9 @@
                             class="full-width form-control text-preformatted"
                             spellcheck="false"
                             style="height: 100px;"
-                        >{{ embedCode }}</textarea>
+                            readonly
+                            :value="embedCode"
+                        />
                         <copy-to-clipboard-button :text="embedCode" />
                     </b-card-body>
                 </b-card>

frontend/vue/components/Stations/Queue/LogsModal.vue

@@ -8,7 +8,8 @@
             class="form-control log-viewer"
             spellcheck="false"
             readonly
-        >{{ logs }}</textarea>
+            :value="logs"
+        />
 
         <template #modal-footer>
             <b-button

frontend/vue/components/Stations/Reports/Listeners/Map.vue

@@ -37,7 +37,9 @@ const props = defineProps({
     },
     listeners: {
         type: Array,
-        default: []
+        default: () => {
+            return [];
+        }
     },
 });
 

frontend/vue/components/Stations/Streamers/Form/Schedule.vue

@@ -32,14 +32,12 @@
 </template>
 
 <script>
-import PlaylistTime from '~/components/Common/TimeCode';
 import Icon from '~/components/Common/Icon';
-import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 import StreamersFormScheduleRow from "~/components/Stations/Streamers/Form/ScheduleRow.vue";
 
 export default {
     name: 'StreamerFormSchedule',
-    components: {StreamersFormScheduleRow, BWrappedFormGroup, Icon, PlaylistTime},
+    components: {StreamersFormScheduleRow, Icon},
     props: {
         form: {
             type: Object,
@@ -51,7 +49,9 @@ export default {
         },
         scheduleItems: {
             type: Array,
-            default: []
+            default: () => {
+                return [];
+            }
         }
     },
     data() {