chore: fix all sonarcloud's code smells (#2072)

Author: ferferga

.vscode/extensions.json

@@ -10,7 +10,8 @@
     "dbaeumer.vscode-eslint",
     "lokalise.i18n-ally",
     "ryanluker.vscode-coverage-gutters",
-    "yoavbls.pretty-ts-errors"
+    "yoavbls.pretty-ts-errors",
+    "SonarSource.sonarlint-vscode"
   ],
   "unwantedRecommendations": [
     "octref.vetur",

.vscode/settings.json

@@ -38,5 +38,11 @@
     "vue": "html"
   },
   "vue.autoInsert.dotValue": true,
-  "vue.server.fullCompletionList": true
+  "vue.server.fullCompletionList": true,
+  "sonarlint.output.showAnalyzerLogs": true,
+  "sonarlint.output.showVerboseLogs": true,
+  "sonarlint.connectedMode.project": {
+    "connectionId": "jellyfin-vue",
+    "projectKey": "jellyfin_jellyfin-vue"
+  }
 }

frontend/src/components/Buttons/MarkPlayedButton.vue

@@ -37,13 +37,13 @@ async function togglePlayed(): Promise<void> {
     if (isPlayed.value) {
       isPlayed.value = false;
       await remote.sdk.newUserApi(getPlaystateApi).markUnplayedItem({
-        userId: remote.auth.currentUserId || '',
+        userId: remote.auth.currentUserId ?? '',
         itemId: props.item.Id
       });
     } else {
       isPlayed.value = true;
       await remote.sdk.newUserApi(getPlaystateApi).markPlayedItem({
-        userId: remote.auth.currentUserId || '',
+        userId: remote.auth.currentUserId ?? '',
         itemId: props.item.Id
       });
     }

frontend/src/components/Buttons/SubtitleSelectionButton.vue

@@ -57,7 +57,7 @@ const tracks = computed(() => {
       srcIndex: -1,
       type: SubtitleDeliveryMethod.External
     },
-    ...(subs || [])
+    ...(subs ?? [])
   ];
 });
 </script>

frontend/src/components/Item/MediaDetail/MediaDetailContent.vue

@@ -36,7 +36,7 @@ const properties = computed(() => {
     props.stream.Width && props.stream.Height
       ? `${props.stream.Width}x${props.stream.Height}`
       : undefined;
-  const framerate = props.stream.AverageFrameRate || props.stream.RealFrameRate;
+  const framerate = props.stream.AverageFrameRate ?? props.stream.RealFrameRate;
   const language = props.stream.Language
     ? getLocaleName(props.stream.Language, locale.value)
     : undefined;

frontend/src/components/Item/Metadata/MetadataEditor.vue

@@ -340,7 +340,7 @@ async function getGenres(parentId: string): Promise<void> {
  * Save metadata for the current item
  */
 async function saveMetadata(): Promise<void> {
-  if (!metadata.value || !metadata.value.Id) {
+  if (!metadata.value?.Id) {
     return;
   }
 

frontend/src/components/Item/Metadata/RefreshMetadataDialog.vue

@@ -140,7 +140,7 @@ async function refreshMetadata(): Promise<void> {
     taskManager.startTask({
       type: TaskType.LibraryRefresh,
       id: props.item.Id || '',
-      data: props.item.Name || 'ID ' + props.item.Id,
+      data: props.item.Name ?? `ID ${props.item.Id}`,
       progress: 0
     });
 

frontend/src/components/Layout/AppBar/SearchField.vue

@@ -20,7 +20,7 @@ const router = useRouter();
 
 const searchQuery = computed({
   get(): string {
-    return route.query.q?.toString() || '';
+    return route.query.q?.toString() ?? '';
   },
   async set(value) {
     await router.replace({

frontend/src/components/Layout/Carousel/Carousel.vue

@@ -96,7 +96,7 @@ function setControlledSwiper (instance: SwiperType): void {
  * See https://github.com/nolimits4web/swiper/issues/2629 and https://github.com/surmon-china/vue-awesome-swiper/issues/483
  */
 function onSlideChange(): void {
-  currentIndex.value = swiperInstance.value?.realIndex || 0;
+  currentIndex.value = swiperInstance.value?.realIndex ?? 0;
 
   if (swiperInstance.value?.isBeginning || swiperInstance.value?.isEnd) {
     swiperInstance.value?.updateSlides();

frontend/src/components/Layout/Carousel/Item/ItemsCarousel.vue

@@ -134,7 +134,7 @@ watch(
 
       const itemData = (
         await remote.sdk.newUserApi(getUserLibraryApi).getItem({
-          userId: remote.auth.currentUserId || '',
+          userId: remote.auth.currentUserId ?? '',
           itemId: id
         })
       ).data;

frontend/src/components/Layout/Navigation/NavigationDrawer.vue

@@ -55,15 +55,15 @@ const { t } = useI18n();
 const drawer = inject<Ref<boolean>>('NavigationDrawer');
 
 const transparentLayout = computed(() => {
-  return route.meta.transparentLayout || false;
+  return route.meta.transparentLayout ?? false;
 });
 
 const drawerItems = computed(() => {
   return userLibraries.libraries.map((view: BaseItemDto) => {
     if (view.Id) {
       return {
         icon: getLibraryIcon(view.CollectionType),
-        title: view.Name || '',
+        title: view.Name ?? '',
         to: `/library/${view.Id}`
       };
     }

frontend/src/components/Layout/VirtualGrid/VirtualGrid.vue

@@ -136,7 +136,7 @@ const contentSize = computed(() => {
 });
 const rootStyles = computed<StyleValue>(() =>
   Object.fromEntries([
-    ...Object.entries(contentSize.value || {}).map(([property, value]) => [
+    ...Object.entries(contentSize.value ?? {}).map(([property, value]) => [
       property,
       `${value}px`
     ]),

frontend/src/components/Layout/VirtualGrid/pipeline.ts

@@ -93,14 +93,14 @@ export function getScrollParents(
     /**
      * Parent.assignedSlot.parentElement find the correct parent if the grid is inside a native web component
      */
-    parent = parent.assignedSlot?.parentElement || parent.parentElement;
+    parent = parent.assignedSlot?.parentElement ?? parent.parentElement;
   }
 
-  const fallback = document.scrollingElement || document.documentElement;
+  const fallback = document.scrollingElement ?? document.documentElement;
 
   return {
-    vertical: vertical || fallback,
-    horizontal: horizontal || fallback
+    vertical: vertical ?? fallback,
+    horizontal: horizontal ?? fallback
   };
 }
 

frontend/src/components/Playback/DraggableQueue.vue

@@ -69,7 +69,7 @@ onMounted(() => {
       if (typeof oldIndex === 'number') {
         const item = playbackManager.queue[oldIndex];
 
-        if (item && item.Id && typeof e.newIndex === 'number') {
+        if (item?.Id && typeof e.newIndex === 'number') {
           playbackManager.changeItemPosition(item.Id, e.newIndex);
         }
       }

frontend/src/components/Playback/PlayerElement.vue

@@ -7,7 +7,7 @@
         :is="mediaElementType"
         v-show="mediaElementType === 'video' && teleportTarget"
         ref="mediaElementRef"
-        :poster="posterUrl"
+        :poster="String(posterUrl)"
         autoplay
         crossorigin="anonymous"
         playsinline
@@ -99,13 +99,13 @@ const teleportTarget = computed<
   }
 });
 
-const posterUrl = computed<string>(() =>
+const posterUrl = computed(() =>
   !isNil(playbackManager.currentItem) &&
   playbackManager.currentlyPlayingMediaType === 'Video'
     ? getImageInfo(playbackManager.currentItem, {
       preferBackdrop: true
-    }).url || ''
-    : ''
+    }).url
+    : undefined
 );
 
 /**

frontend/src/components/Playback/TrackList.vue

@@ -141,7 +141,7 @@ const tracks = ref<BaseItemDto[] | null | undefined>();
 async function fetch(): Promise<void> {
   tracks.value = (
     await remote.sdk.newUserApi(getItemsApi).getItems({
-      userId: remote.auth.currentUserId || '',
+      userId: remote.auth.currentUserId ?? '',
       parentId: props.item.Id,
       sortBy: ['SortName'],
       sortOrder: [SortOrder.Ascending],

frontend/src/pages/genre/_itemId/index.vue

@@ -85,15 +85,11 @@ const genres = ref<BaseItemDto[]>([]);
 
 onMounted(async () => {
   const { itemId } = route.params as { itemId: string };
-  const typesQuery = route.query.type;
-
-  const includeItemTypes = (
-    typesQuery == undefined
-      ? []
-      : (typeof typesQuery === 'string'
-          ? [typesQuery]
-          : typesQuery)
-  ) as BaseItemKind[];
+  const typesQuery = route.query.type as BaseItemKind ?? [];
+
+  const includeItemTypes: BaseItemKind[] = typeof typesQuery === 'string'
+    ? [typesQuery]
+    : typesQuery;
 
   loading.value = true;
 

frontend/src/pages/index.vue

@@ -96,7 +96,7 @@ const homeSections = computed<HomeSection[]>(() => {
             latestMediaSections.push({
               name: 'latestLibrary',
               libraryName: userView.Name,
-              libraryId: userView.Id || '',
+              libraryId: userView.Id ?? '',
               shape: getShapeFromCollectionType(userView.CollectionType),
               type: 'latestmedia'
             });

frontend/src/pages/playback/music/index.vue

@@ -166,7 +166,7 @@ watch(
   () => {
     if (swiperInstance.value && !isNil(playbackManager.currentItemIndex)) {
       swiperInstance.value.slideTo(playbackManager.currentItemIndex);
-      route.meta.title = playbackManager.currentItem?.Name || '';
+      route.meta.title = playbackManager.currentItem?.Name ?? '';
     }
   },
   { immediate: true }
@@ -183,7 +183,7 @@ watch(isVisualizing, async () => {
  * Handle slide changes
  */
 function onSlideChange(): void {
-  const index = swiperInstance.value?.activeIndex || 0;
+  const index = swiperInstance.value?.activeIndex ?? 0;
 
   playbackManager.currentItemIndex = index;
 }

frontend/src/pages/search.vue

@@ -96,7 +96,7 @@ const memo = reactive(
   ])
 );
 
-const searchQuery = computed(() => route.query?.q?.toString() || '');
+const searchQuery = computed(() => route.query?.q?.toString() ?? '');
 const items = computed(() => memo.get(searchQuery.value)?.items ?? []);
 const people = computed(() => memo.get(searchQuery.value)?.people ?? []);
 const movies = computed(() =>
@@ -123,7 +123,7 @@ const performDebouncedSearch = useDebounceFn(async (searchTerm: string) => {
     const itemSearch =
       (
         await remote.sdk.newUserApi(getItemsApi).getItemsByUserId({
-          userId: remote.auth.currentUserId || '',
+          userId: remote.auth.currentUserId ?? '',
           searchTerm,
           includeItemTypes: [
             BaseItemKind.Movie,

frontend/src/pages/server/login.vue

@@ -108,7 +108,7 @@ const route = useRoute();
 const router = useRouter();
 const remote = useRemote();
 const api = remote.sdk.oneTimeSetup(
-  remote.auth.currentServer?.PublicAddress || ''
+  remote.auth.currentServer?.PublicAddress ?? ''
 );
 
 route.meta.title = t('login.login');

frontend/src/pages/wizard.vue

@@ -125,7 +125,7 @@ const heading = computed(() => {
 async function completeWizard(): Promise<void> {
   try {
     const api = remote.sdk.oneTimeSetup(
-      remote.auth.currentServer?.PublicAddress || ''
+      remote.auth.currentServer?.PublicAddress ?? ''
     );
 
     await getStartupApi(api).completeWizard();

frontend/src/store/clientSettings.ts

@@ -25,7 +25,7 @@ interface ClientSettingsState {
  */
 const navigatorLanguage = useNavigatorLanguage();
 const BROWSER_LANGUAGE = computed<string>(() => {
-  const rawString = navigatorLanguage.language.value || '';
+  const rawString = navigatorLanguage.language.value ?? '';
   /**
    * Removes the culture info from the language string, so 'es-ES' is recognised as 'es'
    */

frontend/src/store/playbackManager.ts

@@ -303,7 +303,7 @@ class PlaybackManagerStore {
           srcLang: sub.Language ?? undefined,
           type: sub.DeliveryMethod ?? SubtitleDeliveryMethod.Drop,
           srcIndex: sub.srcIndex,
-          codec: sub.Codec || undefined
+          codec: sub.Codec
         }));
     }
   }
@@ -466,7 +466,7 @@ class PlaybackManagerStore {
   public set currentVolume(newVolume: number) {
     newVolume = newVolume > 100 ? 100 : newVolume;
     newVolume = newVolume < 0 ? 0 : newVolume;
-    this.isMuted = newVolume === 0 ? true : false;
+    this.isMuted = newVolume === 0;
 
     if (this._state.isRemotePlayer) {
       this._state.remoteCurrentVolume = newVolume;
@@ -747,9 +747,9 @@ class PlaybackManagerStore {
   };
 
   public stop = (): void => {
-    const sessionId = String(this._state.playSessionId || '');
+    const sessionId = String(this._state.playSessionId ?? '');
     const time = Number(this.currentTime);
-    const itemId = String(this.currentItem?.Id || '');
+    const itemId = String(this.currentItem?.Id ?? '');
     const volume = Number(this.currentVolume);
 
     Object.assign(this._state, this._defaultState);
@@ -860,7 +860,7 @@ class PlaybackManagerStore {
     if (item) {
       return (
         await remote.sdk.newUserApi(getMediaInfoApi).getPostedPlaybackInfo({
-          itemId: item?.Id || '',
+          itemId: item?.Id ?? '',
           userId: remote.auth.currentUserId,
           autoOpenLiveStream: true,
           playbackInfoDto: { DeviceProfile: playbackProfile },
@@ -965,8 +965,8 @@ class PlaybackManagerStore {
         mediaSourceId: mediaSource.Id,
         deviceId: remote.sdk.deviceInfo.id,
         api_key: remote.auth.currentUserToken,
-        Tag: mediaSource.ETag || '',
-        LiveStreamId: mediaSource.LiveStreamId || ''
+        Tag: mediaSource.ETag ?? '',
+        LiveStreamId: mediaSource.LiveStreamId ?? ''
       };
 
       const parameters = new URLSearchParams(directOptions).toString();
@@ -1063,42 +1063,42 @@ class PlaybackManagerStore {
                 src:
                     getImageInfo(this.currentItem, {
                       width: 96
-                    }).url || '',
+                    }).url ?? '',
                 sizes: '96x96'
               },
               {
                 src:
                     getImageInfo(this.currentItem, {
                       width: 128
-                    }).url || '',
+                    }).url ?? '',
                 sizes: '128x128'
               },
               {
                 src:
                     getImageInfo(this.currentItem, {
                       width: 192
-                    }).url || '',
+                    }).url ?? '',
                 sizes: '192x192'
               },
               {
                 src:
                     getImageInfo(this.currentItem, {
                       width: 256
-                    }).url || '',
+                    }).url ?? '',
                 sizes: '256x256'
               },
               {
                 src:
                     getImageInfo(this.currentItem, {
                       width: 384
-                    }).url || '',
+                    }).url ?? '',
                 sizes: '384x384'
               },
               {
                 src:
                     getImageInfo(this.currentItem, {
                       width: 512
-                    }).url || '',
+                    }).url ?? '',
                 sizes: '512x512'
               }
             ]

frontend/src/store/playerElement.ts

@@ -192,7 +192,7 @@ class PlayerElementStore {
        * If VTT found, applying it
        */
       mediaElementRef.value.textTracks[vttIdx].mode = 'showing';
-    } else if (ass !== undefined && ass.src) {
+    } else if (ass?.src) {
       /**
        * If SSA, using Subtitle Opctopus
        */