fix: workaround swiper's slide index calculation (#2705)

There is a bug with the Vue's component of swiper that does not like how slides are passed as slots

Signed-off-by: GitHub <noreply@github.com>

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

@@ -24,7 +24,9 @@
       @real-index-change="onSlideChange"
       @touch-start="onTouch"
       @touch-end="onTouch">
-      <slot name="slides" />
+      <slot
+        name="slides"
+        @vue:updated="() => console.log('jslot update')" />
     </Swiper>
     <CarouselProgressBar
       v-if="progressBar && !topProgressBar && slides > 0"
@@ -49,7 +51,7 @@ import 'swiper/css/parallax';
 import 'swiper/css/virtual';
 import { A11y, EffectFade, Keyboard, Parallax, Virtual } from 'swiper/modules';
 import { Swiper } from 'swiper/vue';
-import { ref, shallowRef } from 'vue';
+import { shallowRef, onMounted } from 'vue';
 import { useResponsiveClasses } from '#/composables/use-responsive-classes';
 
 const { slideDuration = 7000, progressBar, topProgressBar } = defineProps<{
@@ -69,10 +71,16 @@ const emit = defineEmits<{
 
 const modules = [A11y, Parallax, EffectFade, Keyboard, Virtual];
 
-const currentIndex = ref(0);
-const isPaused = ref(false);
+const currentIndex = shallowRef(0);
+const isPaused = shallowRef(false);
 const swiperInstance = shallowRef<SwiperType>();
 
+onMounted(() => {
+  if (swiperInstance.value) {
+    swiperInstance.value.update();
+  }
+});
+
 /**
  * Handle slide changes
  */

frontend/src/components/Layout/SwiperSection.vue

@@ -44,7 +44,6 @@
           <ItemCard
             :item="item"
             :shape="shape"
-
             text
             link
             margin

frontend/src/pages/playback/music.vue

@@ -99,7 +99,7 @@ import 'swiper/css/keyboard';
 import 'swiper/css/virtual';
 import { A11y, EffectCoverflow, Virtual } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/vue';
-import { computed, shallowRef, watchEffect } from 'vue';
+import { computed, shallowRef, watchEffect, onMounted } from 'vue';
 import { isNil } from '@jellyfin-vue/shared/validation';
 import { playbackGuard } from '#/plugins/router/middlewares/playback';
 import { playbackManager } from '#/store/playback-manager';
@@ -129,6 +129,12 @@ const artistString = computed(() =>
 
 const swiperInstance = shallowRef<SwiperType>();
 
+onMounted(() => {
+  if (swiperInstance.value) {
+    swiperInstance.value.update();
+  }
+});
+
 useItemBackdrop(playbackManager.currentItem, 0.75);
 useItemPageTitle(playbackManager.currentItem);