Fix url img

frontend/src/App.vue

@@ -21,6 +21,10 @@ export default {
   },
   created() {
     this.$store.dispatch('checkAuth')
+    // Charger les paramètres au démarrage si l'utilisateur est authentifié
+    if (this.isAuthenticated) {
+      this.$store.dispatch('loadSettings')
+    }
   }
 }
 </script>

frontend/src/store/index.js

@@ -8,14 +8,25 @@ export default createStore({
     token: localStorage.getItem('token') || '',
     user: null,
     loading: false,
-    error: null
+    error: null,
+    settings: {
+      sonarr: {
+        url: '',
+        apiKey: ''
+      },
+      radarr: {
+        url: '',
+        apiKey: ''
+      }
+    }
   },
   
   getters: {
     isAuthenticated: state => !!state.token,
     user: state => state.user,
     loading: state => state.loading,
-    error: state => state.error
+    error: state => state.error,
+    settings: state => state.settings
   },
   
   mutations: {
@@ -41,6 +52,9 @@ export default createStore({
     LOGOUT(state) {
       state.token = ''
       state.user = null
+    },
+    SET_SETTINGS(state, settings) {
+      state.settings = settings
     }
   },
   
@@ -124,6 +138,50 @@ export default createStore({
         console.error('Erreur lors de la vérification des utilisateurs', error)
         return true // Par défaut, on suppose qu'il existe des utilisateurs pour éviter des comportements inattendus
       }
+    },
+    
+    // Charger les paramètres
+    async loadSettings({ commit }) {
+      try {
+        const token = localStorage.getItem('token')
+        if (!token) return
+        
+        const response = await axios.get(`${API_URL}/settings`, {
+          headers: {
+            'x-auth-token': token
+          }
+        })
+        
+        if (response.data) {
+          commit('SET_SETTINGS', response.data)
+        }
+      } catch (error) {
+        console.error('Erreur lors du chargement des paramètres', error)
+      }
+    },
+    
+    // Sauvegarder les paramètres
+    async saveSettings({ commit }, settings) {
+      try {
+        const token = localStorage.getItem('token')
+        if (!token) return
+        
+        await axios.post(
+          `${API_URL}/settings`,
+          settings,
+          {
+            headers: {
+              'x-auth-token': token
+            }
+          }
+        )
+        
+        commit('SET_SETTINGS', settings)
+        return true
+      } catch (error) {
+        console.error('Erreur lors de l\'enregistrement des paramètres', error)
+        throw error
+      }
     }
   },
   

frontend/src/views/Movies.vue

@@ -54,7 +54,7 @@
       <div v-else class="movie-grid">
         <div v-for="movie in filteredMovies" :key="movie.id" class="movie-card">
           <div class="movie-poster">
-            <img :src="movie.images && movie.images[0] ? movie.images[0].url : 'default-poster.jpg'" alt="Poster" />
+            <img :src="movie.images && movie.images[0] ? getImageUrl(movie.images[0].url) : 'default-poster.jpg'" alt="Poster" />
           </div>
           <div class="movie-info">
             <h3 class="movie-title">{{ movie.title }}</h3>
@@ -173,6 +173,20 @@ export default {
         return 'status-available'
       }
     },
+    getImageUrl(url) {
+      if (!url) return 'default-poster.jpg';
+      // Vérifie si l'URL est absolue (commence par http:// ou https://)
+      if (url.match(/^https?:\/\//)) {
+        return url;
+      } else {
+        // Récupère l'URL de l'API Radarr depuis les settings
+        const radarrApiUrl = this.$store.state.settings?.radarrUrl || this.settings?.radarr?.url || '';
+        // Extraire l'URL de base (enlever /v3/api ou /api/v3)
+        const baseUrl = radarrApiUrl.replace(/\/(v3\/api|api\/v3)$/, '');
+        // Si l'URL commence par un /, on ne l'ajoute pas
+        return url.startsWith('/') ? `${baseUrl}${url}` : `${baseUrl}/${url}`;
+      }
+    },
     filterMovies() {
       // Fonction pour filtrer les films selon la recherche
       const searchLower = this.search.toLowerCase()

frontend/src/views/Series.vue

@@ -56,7 +56,7 @@
         <div v-else class="series-grid">
           <div v-for="series in filteredSeries" :key="series.id" class="series-card">
             <div class="series-poster">
-              <img :src="series.images && series.images[0] ? series.images[0].url : 'default-poster.jpg'" alt="Poster" />
+              <img :src="series.images && series.images[0] ? getImageUrl(series.images[0].url) : 'default-poster.jpg'" alt="Poster" />
             </div>
             <div class="series-info">
               <h3 class="series-title">{{ series.title }}</h3>
@@ -94,7 +94,7 @@
         <div v-else class="episode-list">
           <div v-for="episode in upcomingEpisodes" :key="episode.id" class="episode-card">
             <div class="episode-image">
-              <img :src="episode.series.images && episode.series.images[0] ? episode.series.images[0].url : 'default-poster.jpg'" alt="Series Poster" />
+              <img :src="episode.series.images && episode.series.images[0] ? getImageUrl(episode.series.images[0].url) : 'default-poster.jpg'" alt="Series Poster" />
             </div>
             <div class="episode-info">
               <h3 class="series-title">{{ episode.series.title }}</h3>
@@ -251,6 +251,20 @@ export default {
       } else {
         this.filteredSeries = sourceList
       }
+    },
+    getImageUrl(url) {
+      if (!url) return 'default-poster.jpg';
+      // Vérifie si l'URL est absolue (commence par http:// ou https://)
+      if (url.match(/^https?:\/\//)) {
+        return url;
+      } else {
+        // Récupère l'URL de l'API Sonarr depuis les settings
+        const sonarrApiUrl = this.$store.state.settings?.sonarrUrl || this.settings?.sonarr?.url || '';
+        // Extraire l'URL de base (enlever /v3/api ou /api/v3)
+        const baseUrl = sonarrApiUrl.replace(/\/(v3\/api|api\/v3)$/, '');
+        // Si l'URL commence par un /, on ne l'ajoute pas
+        return url.startsWith('/') ? `${baseUrl}${url}` : `${baseUrl}/${url}`;
+      }
     }
   },
   watch: {

frontend/src/views/Settings.vue

@@ -143,6 +143,10 @@ export default {
   },
   mounted() {
     this.loadSettings()
+    // Charger les paramètres du store si disponibles
+    if (this.$store.getters.settings) {
+      this.settings = JSON.parse(JSON.stringify(this.$store.getters.settings))
+    }
   },
   methods: {
     async loadSettings() {
@@ -153,19 +157,16 @@ export default {
           return
         }
         
-        const response = await axios.get(`${API_URL}/settings`, {
+        await this.$store.dispatch('loadSettings')
-          headers: {
-            'x-auth-token': token
-          }
-        })
         
-        if (response.data) {
+        // Si des paramètres existent dans le store, les utiliser
-          // Si des paramètres existent déjà, les charger
+        const storeSettings = this.$store.getters.settings
-          if (response.data.sonarr) {
+        if (storeSettings) {
-            this.settings.sonarr = response.data.sonarr
+          if (storeSettings.sonarr) {
+            this.settings.sonarr = {...storeSettings.sonarr}
           }
-          if (response.data.radarr) {
+          if (storeSettings.radarr) {
-            this.settings.radarr = response.data.radarr
+            this.settings.radarr = {...storeSettings.radarr}
           }
         }
       } catch (error) {
@@ -223,15 +224,8 @@ export default {
           return
         }
         
-        await axios.post(
+        // Sauvegarder les paramètres via le store
-          `${API_URL}/settings`,
+        await this.$store.dispatch('saveSettings', this.settings)
-          this.settings,
-          {
-            headers: {
-              'x-auth-token': token
-            }
-          }
-        )
         
         this.successMessage = 'Configuration enregistrée avec succès'
         setTimeout(() => {