#170

src/components/project/virtual-sample/DynamicView.vue

@@ -9,9 +9,9 @@
           :items="track.variations"
           :isCompareModeEnabled="isCompareModeEnabled"
           :index="index"
-          @update:selectedItems="selectTrack"
         />
       </div>
+
       <button
         class="btn | ml-auto"
         :class="{ 'btn--secondary': isCompareModeEnabled }"
@@ -26,17 +26,25 @@
     </header>
 
     <div class="track">
-      <template v-for="activeTrack in activeTracks" :key="activeTrack.title">
+      <template
+        v-for="activeTrack in activeTracks"
+        :key="activeTrack.slug || activeTrack.title"
+      >
+        <!-- accès sûr avec optional chaining -->
         <Interactive360
-          v-if="activeTrack.files.length > 1"
+          v-if="activeTrack?.files?.length > 1"
           :activeTrack="activeTrack"
         />
         <SingleImage
-          v-else
+          v-else-if="activeTrack?.files?.length === 1"
           :file="activeTrack.files[0]"
           :backgroundColor="activeTrack.backgroundColor"
         />
+        <div v-else class="track-empty | bg-white rounded-xl w-full p-32">
+          <p>Contenu non disponible pour cette piste</p>
+        </div>
       </template>
+
       <div
         v-if="isCompareModeEnabled && activeTracks.length < 2"
         class="track-empty | bg-white rounded-xl w-full p-32"
@@ -46,6 +54,7 @@
     </div>
   </div>
 </template>
+
 <script setup>
 import { computed, watch, onMounted, onBeforeMount } from 'vue';
 import { storeToRefs } from 'pinia';
@@ -63,57 +72,62 @@ const route = useRoute();
 const { page } = storeToRefs(usePageStore());
 const { isCommentsOpen, isCommentPanelEnabled, activeTracks, openedFile } =
   storeToRefs(useDialogStore());
-
 const { isCompareModeEnabled } = storeToRefs(useVirtualSampleStore());
 
-const rawTracks = page.value.steps.find(
-  (step) => step.slug === 'virtual-sample'
-).files.dynamic;
-
-onBeforeMount(() => {
-  const firstTrack = rawTracks[Object.keys(rawTracks)[0]];
-  const firstVariation = firstTrack[0];
-  activeTracks.value = [firstVariation];
-
-  // TO RE-ENABLE
-  // if (route.hash.length > 0) {
-  //   const trackToOpen = tracks.value.find(
-  //     (track) => track.slug === route.hash.substring(1)
-  //   );
-  //   activeTracks.value = [trackToOpen];
-  // } else {
-  //   activeTracks.value = [tracks.value[0]];
-  // }
-});
-
-onMounted(() => {
-  if (route.hash.length === 0) return;
-
-  const selector = route.hash.replace('#', '#track--');
-  const targetBtn = document.querySelector(selector);
-  if (targetBtn) {
-    targetBtn.scrollIntoView();
-  }
-});
-
+// computed tracks à partir de la structure page
 const tracks = computed(() => {
-  const rawTracks = page.value.steps.find(
-    (step) => step.slug === 'virtual-sample'
-  ).files.dynamic;
+  const raw =
+    page.value.steps.find((step) => step.slug === 'virtual-sample')?.files
+      ?.dynamic || {};
+  const list = [];
 
-  const tracks = [];
-
-  for (const key in rawTracks) {
-    tracks.push({
+  for (const key in raw) {
+    list.push({
       title: key,
       slug: slugify(key),
-      variations: rawTracks[key],
+      variations: raw[key] || [],
     });
   }
 
-  return tracks;
+  return list;
 });
 
+// ---------- INITIALISATION ----------
+// onBeforeMount : on initialise toujours activeTracks avec une VARIATION (jamais un track)
+onBeforeMount(() => {
+  // essayer la hash en priorité
+  let initialVariation = null;
+
+  if (route?.hash && route.hash.length > 0) {
+    const variations = tracks.value.flatMap((t) => t.variations || []);
+    initialVariation =
+      variations.find((v) => v.slug === route.hash.substring(1)) || null;
+  }
+
+  // fallback : première variation du premier track
+  if (!initialVariation) {
+    initialVariation = tracks.value[0]?.variations?.[0] || null;
+  }
+
+  if (initialVariation) {
+    activeTracks.value = [initialVariation];
+  } else {
+    activeTracks.value = []; // aucun contenu disponible
+  }
+});
+
+// scroll si hash présent
+onMounted(() => {
+  if (route.query?.comments) isCommentsOpen.value = true;
+  if (!route?.hash || route.hash.length === 0) return;
+
+  const selector = route.hash.replace('#', '#track--');
+  const targetBtn = document.querySelector(selector);
+  if (targetBtn) targetBtn.scrollIntoView();
+});
+
+// ---------- COMPUTED / WATCH ----------
+
 const isSingleImage = computed(() => {
   return (
     activeTracks.value?.length === 1 &&
@@ -122,19 +136,18 @@ const isSingleImage = computed(() => {
 });
 
 const singleFile = computed(() => {
-  return isSingleImage.value && activeTracks.value[0].files[0];
+  return isSingleImage.value ? activeTracks.value[0].files[0] : null;
 });
 
 watch(
   singleFile,
   (newValue) => {
-    if (newValue) {
-      openedFile.value = newValue;
-    }
+    if (newValue) openedFile.value = newValue;
   },
   { immediate: true }
 );
 
+// gestion du mode comparaison : fermer les commentaires, etc.
 watch(isCompareModeEnabled, (newValue) => {
   if (newValue) {
     isCommentsOpen.value = false;
@@ -143,12 +156,15 @@ watch(isCompareModeEnabled, (newValue) => {
     isCommentPanelEnabled.value = true;
   }
 
+  // quand on quitte le mode comparaison on retire l'élément secondaire si nécessaire
   if (!newValue && activeTracks.value.length === 2) {
     activeTracks.value.pop();
   }
 });
 
+// ---------- UTIL / helper ----------
 function getCommentsCount(track) {
+  if (!track || !Array.isArray(track.files)) return undefined;
   let count = 0;
   for (const file of track.files) {
     count += file?.comments?.length || 0;