refactor: remove withDefaults, use destructure everywhere

Use reactive props destructure (https://blog.vuejs.org/posts/vue-3-5#reactive-props-destructure) to simplify the prop declaration. Also, finding unused props is far easier with destructure (a lot of unused props were removed in fact), so all the defineProps statements have been migrated as well. Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
jellyfin · Sep 6, 2024 · 45815f7 · 45815f7
1 parent 1970a7e
commit 45815f7
Show file tree

Hide file tree

Showing 62 changed files with 482 additions and 610 deletions.
diff --git a/frontend/src/components/Buttons/FilterButton.vue b/frontend/src/components/Buttons/FilterButton.vue
@@ -193,7 +193,7 @@ export interface Filters {
   years: number[];
 }
 
-const props = defineProps<{
+const { item, disabled } = defineProps<{
   item: BaseItemDto;
   disabled?: boolean;
 }>();
@@ -216,8 +216,8 @@ const yearFilters = ref<number[]>([]);
 
 const isMovieOrTvShow = computed(
   () =>
-    props.item.CollectionType === 'movies'
-    || props.item.CollectionType === 'tvshows'
+    item.CollectionType === 'movies'
+    || item.CollectionType === 'tvshows'
 );
 
 const statusFilters = computed<{ label: string; name: ItemFilter }[]>(() => [
@@ -279,16 +279,16 @@ const typeFilters: { label: string; name: TypeFilters }[] = [
  * applying filters and sorting
  */
 async function refreshItems(): Promise<void> {
-  if (!props.item.Id || !props.item.Type) {
+  if (!item.Id || !item.Type) {
     return;
   }
 
   try {
     const response = (
       await remote.sdk.newUserApi(getFilterApi).getQueryFiltersLegacy({
         userId: remote.auth.currentUserId,
-        parentId: props.item.Id,
-        includeItemTypes: [props.item.Type]
+        parentId: item.Id,
+        includeItemTypes: [item.Type]
       })
     ).data;
 
@@ -320,7 +320,7 @@ function emitFilterChange(): void {
     years: selectedYearFilters.value
   });
 }
-watch(() => props.item, refreshItems);
+watch(() => item, refreshItems);
 </script>
 
 <style scoped>

diff --git a/frontend/src/components/Buttons/LikeButton.vue b/frontend/src/components/Buttons/LikeButton.vue
@@ -15,12 +15,7 @@ import IMdiHeartOutline from 'virtual:icons/mdi/heart-outline';
 import { computed, ref } from 'vue';
 import { useApi } from '@/composables/apis';
 
-const props = withDefaults(
-  defineProps<{ item: BaseItemDto; size?: string }>(),
-  {
-    size: 'small'
-  }
-);
+const { size = 'small', item } = defineProps<{ item: BaseItemDto; size?: string }>();
 /**
  * We use the composables to handle when there's no connection to the server
  *
@@ -29,12 +24,12 @@ const props = withDefaults(
  */
 const methodToExecute = ref<'markFavoriteItem' | 'unmarkFavoriteItem' | undefined>();
 const { loading } = await useApi(getUserLibraryApi, methodToExecute, { skipCache: { request: true }, globalLoading: false })(() => ({
-  itemId: props.item.Id ?? ''
+  itemId: item.Id ?? ''
 }));
 
 const isFavorite = computed({
   get() {
-    return props.item.UserData?.IsFavorite ?? false;
+    return item.UserData?.IsFavorite ?? false;
   },
   set(newValue) {
     methodToExecute.value = newValue ? 'markFavoriteItem' : 'unmarkFavoriteItem';

diff --git a/frontend/src/components/Buttons/MarkPlayedButton.vue b/frontend/src/components/Buttons/MarkPlayedButton.vue
@@ -16,7 +16,7 @@ import { computed, ref } from 'vue';
 import { canMarkWatched } from '@/utils/items';
 import { useApi } from '@/composables/apis';
 
-const props = defineProps<{
+const { item } = defineProps<{
   item: BaseItemDto;
 }>();
 
@@ -29,12 +29,12 @@ const methodToExecute = ref<'markPlayedItem' | 'markUnplayedItem' | undefined>()
  * to do manual modification here
  */
 const { loading } = await useApi(getPlaystateApi, methodToExecute, { skipCache: { request: true }, globalLoading: false })(() => ({
-  itemId: props.item.Id ?? ''
+  itemId: item.Id ?? ''
 }));
 
 const isPlayed = computed({
   get() {
-    return props.item.UserData?.Played;
+    return item.UserData?.Played;
   },
   set(newValue) {
     methodToExecute.value = newValue ? 'markPlayedItem' : 'markUnplayedItem';

diff --git a/frontend/src/components/Buttons/Playback/NextTrackButton.vue b/frontend/src/components/Buttons/Playback/NextTrackButton.vue
@@ -1,17 +1,15 @@
 <template>
   <VBtn
+    v-bind="$attrs"
     icon
-    :size="props.size"
     :disabled="!playbackManager.nextItem"
     @click="playbackManager.setNextItem">
-    <VIcon :size="size">
+    <VIcon v-bind="$attrs">
       <IMdiSkipNext />
     </VIcon>
   </VBtn>
 </template>
 
 <script setup lang="ts">
 import { playbackManager } from '@/store/playback-manager';
-
-const props = defineProps<{ size?: string }>();
 </script>
diff --git a/frontend/src/components/Buttons/Playback/PlayButton.vue b/frontend/src/components/Buttons/Playback/PlayButton.vue
@@ -46,63 +46,61 @@ import { playbackManager } from '@/store/playback-manager';
 import { canPlay, canResume } from '@/utils/items';
 import { ticksToMs } from '@/utils/time';
 
-const props = withDefaults(
-  defineProps<{
-    item: BaseItemDto;
-    iconOnly?: boolean;
-    fab?: boolean;
-    shuffle?: boolean;
-    videoTrackIndex?: number;
-    audioTrackIndex?: number;
-    subtitleTrackIndex?: number;
-    mediaSourceIndex?: number;
-    disabled?: boolean;
-  }>(),
-  {
-    iconOnly: false,
-    fab: false,
-    shuffle: false,
-    disabled: false,
-    videoTrackIndex: undefined,
-    audioTrackIndex: undefined,
-    subtitleTrackIndex: undefined,
-    mediaSourceIndex: undefined
-  }
-);
+const {
+  item,
+  iconOnly,
+  fab,
+  shuffle,
+  videoTrackIndex,
+  audioTrackIndex,
+  subtitleTrackIndex,
+  mediaSourceIndex,
+  disabled
+} = defineProps<{
+  item: BaseItemDto;
+  iconOnly?: boolean;
+  fab?: boolean;
+  shuffle?: boolean;
+  videoTrackIndex?: number;
+  audioTrackIndex?: number;
+  subtitleTrackIndex?: number;
+  mediaSourceIndex?: number;
+  disabled?: boolean;
+}>();
 
 const loading = ref(false);
 
 /** Begins or resumes playing of the item */
 async function playOrResume(): Promise<void> {
   loading.value = true;
 
-  if (props.item && canResume(props.item)) {
+  if (canResume(item)) {
     await playbackManager.play({
-      item: props.item,
-      audioTrackIndex: props.audioTrackIndex,
-      subtitleTrackIndex: props.subtitleTrackIndex,
-      videoTrackIndex: props.videoTrackIndex,
-      mediaSourceIndex: props.mediaSourceIndex,
+      item: item,
+      audioTrackIndex: audioTrackIndex,
+      subtitleTrackIndex: subtitleTrackIndex,
+      videoTrackIndex: videoTrackIndex,
+      mediaSourceIndex: mediaSourceIndex,
       startFromTime:
-        ticksToMs(props.item.UserData?.PlaybackPositionTicks) / 1000
+        ticksToMs(item.UserData?.PlaybackPositionTicks) / 1000
     });
-  } else if (props.shuffle) {
+  } else if (shuffle) {
     // We force playback from the start when shuffling, since you wouldn't resume AND shuffle at the same time
     await playbackManager.play({
-      item: props.item,
-      audioTrackIndex: props.audioTrackIndex,
-      subtitleTrackIndex: props.subtitleTrackIndex,
-      videoTrackIndex: props.videoTrackIndex,
-      mediaSourceIndex: props.mediaSourceIndex,
+      item: item,
+      audioTrackIndex: audioTrackIndex,
+      subtitleTrackIndex: subtitleTrackIndex,
+      videoTrackIndex: videoTrackIndex,
+      mediaSourceIndex: mediaSourceIndex,
       startShuffled: true
     });
   } else {
     await playbackManager.play({
-      item: props.item,
-      audioTrackIndex: props.audioTrackIndex,
-      subtitleTrackIndex: props.subtitleTrackIndex,
-      videoTrackIndex: props.videoTrackIndex,
-      mediaSourceIndex: props.mediaSourceIndex
+      item: item,
+      audioTrackIndex: audioTrackIndex,
+      subtitleTrackIndex: subtitleTrackIndex,
+      videoTrackIndex: videoTrackIndex,
+      mediaSourceIndex: mediaSourceIndex
     });
   }
 

diff --git a/frontend/src/components/Buttons/Playback/PlayPauseButton.vue b/frontend/src/components/Buttons/Playback/PlayPauseButton.vue
@@ -1,11 +1,11 @@
 <template>
   <VBtn
+    v-bind="$attrs"
     icon
-    :size="size"
     :loading="playbackManager.isBuffering"
     @click="playbackManager.playPause">
     <VIcon
-      :size="size"
+      v-bind="$attrs"
       :icon="playPauseIcon" />
   </VBtn>
 </template>
@@ -17,8 +17,6 @@ import IMdiPlayCircleOutline from 'virtual:icons/mdi/play-circle-outline';
 import { computed } from 'vue';
 import { PlaybackStatus, playbackManager } from '@/store/playback-manager';
 
-defineProps<{ size?: string }>();
-
 const playPauseIcon = computed(() => {
   if (playbackManager.isPaused) {
     return IMdiPlayCircleOutline;

diff --git a/frontend/src/components/Buttons/Playback/PreviousTrackButton.vue b/frontend/src/components/Buttons/Playback/PreviousTrackButton.vue
@@ -1,10 +1,10 @@
 <template>
   <VBtn
+    v-bind="$attrs"
     icon
-    :size="size"
     @click="() => playbackManager.setPreviousItem()"
     @dblclick="() => playbackManager.setPreviousItem(true)">
-    <VIcon :size="size">
+    <VIcon v-bind="$attrs">
       <IMdiSkipPrevious />
     </VIcon>
   </VBtn>
@@ -13,6 +13,4 @@
 <script setup lang="ts">
 import IMdiSkipPrevious from 'virtual:icons/mdi/skip-previous';
 import { playbackManager } from '@/store/playback-manager';
-
-defineProps<{ size?: string }>();
 </script>
diff --git a/frontend/src/components/Buttons/Playback/RepeatButton.vue b/frontend/src/components/Buttons/Playback/RepeatButton.vue
@@ -1,11 +1,11 @@
 <template>
   <VBtn
+    v-bind="$attrs"
     icon
-    :size="size"
     :color="playbackManager.isRepeating ? 'primary' : undefined"
     @click="playbackManager.toggleRepeatMode">
     <VIcon
-      :size="size"
+      v-bind="$attrs"
       :icon="repeatIcon" />
   </VBtn>
 </template>
@@ -16,8 +16,6 @@ import IMdiRepeatOnce from 'virtual:icons/mdi/repeat-once';
 import { computed } from 'vue';
 import { RepeatMode, playbackManager } from '@/store/playback-manager';
 
-defineProps<{ size?: string }>();
-
 const repeatIcon = computed(() =>
   playbackManager.repeatMode === RepeatMode.RepeatOne
     ? IMdiRepeatOnce

diff --git a/frontend/src/components/Buttons/Playback/ShuffleButton.vue b/frontend/src/components/Buttons/Playback/ShuffleButton.vue
@@ -1,17 +1,15 @@
 <template>
   <VBtn
+    v-bind="$attrs"
     icon
-    :size="size"
     :color="playbackManager.isShuffling ? 'primary' : undefined"
     @click="playbackManager.toggleShuffle">
-    <VIcon :size="size">
+    <VIcon v-bind="$attrs">
       <IMdiShuffle />
     </VIcon>
   </VBtn>
 </template>
 
 <script setup lang="ts">
 import { playbackManager } from '@/store/playback-manager';
-
-defineProps<{ size?: string }>();
 </script>
diff --git a/frontend/src/components/Buttons/QueueButton.vue b/frontend/src/components/Buttons/QueueButton.vue
@@ -78,19 +78,16 @@ import { useI18n } from 'vue-i18n';
 import { getTotalEndsAtTime } from '@/utils/time';
 import { InitMode, playbackManager } from '@/store/playback-manager';
 
-const props = withDefaults(
-  defineProps<{
-    size?: number;
-    closeOnClick?: boolean;
-  }>(),
-  { size: 40, closeOnClick: false }
-);
+const { size = 40, closeOnClick = false } = defineProps<{
+  size?: number;
+  closeOnClick?: boolean;
+}>();
 
 const { t } = useI18n();
 
 const menuModel = ref(false);
-const listWidth = computed(() => `${props.size}vw`);
-const listHeight = computed(() => `${props.size}vh`);
+const listWidth = computed(() => `${size}vw`);
+const listHeight = computed(() => `${size}vh`);
 
 const sourceText = computed(() => {
   /**

diff --git a/frontend/src/components/Buttons/SortButton.vue b/frontend/src/components/Buttons/SortButton.vue
@@ -1,10 +1,9 @@
 <template>
   <VBtn
     icon
-    v-bind="props"
     :disabled="disabled"
-    @click="emit('change', model[0], !props.ascending)">
-    <VIcon v-if="props.ascending">
+    @click="emit('change', model[0], !ascending)">
+    <VIcon v-if="ascending">
       <IMdiSortAscending />
     </VIcon>
     <VIcon v-else>
@@ -26,7 +25,7 @@
         v-model:selected="model"
         :items="items"
         class="filter-content"
-        @update:selected="emit('change', model[0], props.ascending)" />
+        @update:selected="emit('change', model[0], ascending)" />
     </VMenu>
   </VBtn>
 </template>
@@ -35,10 +34,7 @@
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-const props = withDefaults(
-  defineProps<{ ascending: boolean; disabled?: boolean }>(),
-  { disabled: false }
-);
+const { ascending, disabled } = defineProps<{ ascending: boolean; disabled?: boolean }>();
 const emit = defineEmits<{
   change: [sortBy: string, ascendingOrder: boolean];
 }>();

diff --git a/frontend/src/components/Buttons/TypeButton.vue b/frontend/src/components/Buttons/TypeButton.vue
@@ -26,7 +26,7 @@ import type { BaseItemDto, BaseItemKind } from '@jellyfin/sdk/lib/generated-clie
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-const props = defineProps<{
+const { type } = defineProps<{
   type: BaseItemDto['CollectionType'];
 }>();
 
@@ -36,7 +36,7 @@ const model = defineModel<BaseItemKind | undefined>({ required: true });
 const { t } = useI18n();
 
 const items = computed<{ title: string; value: BaseItemKind }[]>(() => {
-  switch (props.type) {
+  switch (type) {
     case 'movies': {
       return [
         { title: t('movies'), value: 'Movie' },