track > variation : add bg color

public/site/blueprints/pages/track.yml

@@ -4,6 +4,11 @@ tabs:
   contentTab:
     label: Contenu
     fields:
+      backgroundColor:
+        label: Couleur de fond
+        type: color
+        default: "#E6E6E6"
+        placeholder: "#E6E6E6"
       views:
         label: Rendu
         type: files

public/site/models/project.php

@@ -103,6 +103,7 @@ class ProjectPage extends NotificationsPage {
         $trackData = [
           'title' => (string) $track->title(),
           'slug' => (string) $track->slug(),
+          'backgroundColor' => (string) $track->backgroundColor(),
           'files' => [],
         ];        
         

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

@@ -35,7 +35,11 @@
           v-if="activeTrack.files.length > 1"
           :activeTrack="activeTrack"
         />
-        <SingleImage v-else :file="activeTrack.files[0]" />
+        <SingleImage
+          v-else
+          :file="activeTrack.files[0]"
+          :backgroundColor="activeTrack.backgroundColor"
+        />
       </template>
       <div
         v-if="isCompareModeEnabled && activeTracks.length < 2"

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

@@ -1,5 +1,5 @@
 <template>
-  <figure>
+  <figure :style="'--bg-color:' + activeTrack.backgroundColor">
     <div
       @mousedown="enableDragToRotate"
       @touchstart="enableDragToRotate"

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

@@ -1,5 +1,5 @@
 <template>
-  <figure>
+  <figure :style="'--bg-color:' + backgroundColor">
     <img :src="file.url" alt="" />
   </figure>
 </template>
@@ -9,7 +9,8 @@ import { storeToRefs } from 'pinia';
 import { useVirtualSampleStore } from '../../../stores/virtualSample';
 import { watch } from 'vue';
 
-const { file } = defineProps({
+const { file, backgroundColor } = defineProps({
+  backgroundColor: String,
   file: Object,
 });