From 760e17287ef8eea984e69e782318c8177ecd5ec8 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 6 Jun 2025 12:22:59 +0200
Subject: [PATCH] track > variation : add bg color

---
 public/site/blueprints/pages/track.yml                   | 5 +++++
 public/site/models/project.php                           | 1 +
 src/components/project/virtual-sample/DynamicView.vue    | 6 +++++-
 src/components/project/virtual-sample/Interactive360.vue | 2 +-
 src/components/project/virtual-sample/SingleImage.vue    | 5 +++--
 5 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/public/site/blueprints/pages/track.yml b/public/site/blueprints/pages/track.yml
index 7a0134f..3289814 100644
--- a/public/site/blueprints/pages/track.yml
+++ b/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
diff --git a/public/site/models/project.php b/public/site/models/project.php
index d61cdd0..d657506 100644
--- a/public/site/models/project.php
+++ b/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' => [],
         ];        
         
diff --git a/src/components/project/virtual-sample/DynamicView.vue b/src/components/project/virtual-sample/DynamicView.vue
index 17321ea..2313fad 100644
--- a/src/components/project/virtual-sample/DynamicView.vue
+++ b/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"
diff --git a/src/components/project/virtual-sample/Interactive360.vue b/src/components/project/virtual-sample/Interactive360.vue
index 77075aa..356554e 100644
--- a/src/components/project/virtual-sample/Interactive360.vue
+++ b/src/components/project/virtual-sample/Interactive360.vue
@@ -1,5 +1,5 @@
 <template>
-  <figure>
+  <figure :style="'--bg-color:' + activeTrack.backgroundColor">
     <div
       @mousedown="enableDragToRotate"
       @touchstart="enableDragToRotate"
diff --git a/src/components/project/virtual-sample/SingleImage.vue b/src/components/project/virtual-sample/SingleImage.vue
index fd6169a..d0e3aa3 100644
--- a/src/components/project/virtual-sample/SingleImage.vue
+++ b/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,
 });