@bebranded/bb-contents 1.0.42-beta → 1.0.44-beta
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bb-contents.js +124 -96
- package/package.json +1 -1
package/bb-contents.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* BeBranded Contents
|
|
3
3
|
* Contenus additionnels français pour Webflow
|
|
4
|
-
* @version 1.0.
|
|
4
|
+
* @version 1.0.44-beta
|
|
5
5
|
* @author BeBranded
|
|
6
6
|
* @license MIT
|
|
7
7
|
* @website https://www.bebranded.xyz
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
|
|
18
18
|
// Configuration
|
|
19
19
|
const config = {
|
|
20
|
-
version: '1.0.
|
|
20
|
+
version: '1.0.44-beta',
|
|
21
21
|
debug: true, // Activé temporairement pour debug
|
|
22
22
|
prefix: 'bb-', // utilisé pour générer les sélecteurs (data-bb-*)
|
|
23
23
|
youtubeEndpoint: null, // URL du worker YouTube (à définir par l'utilisateur)
|
|
@@ -613,107 +613,135 @@
|
|
|
613
613
|
}
|
|
614
614
|
element.bbProcessed = true;
|
|
615
615
|
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
616
|
+
// Utiliser la nouvelle fonction initElement
|
|
617
|
+
this.initElement(element);
|
|
618
|
+
});
|
|
619
|
+
},
|
|
620
|
+
|
|
621
|
+
// Fonction pour initialiser un seul élément YouTube
|
|
622
|
+
initElement: function(element) {
|
|
623
|
+
// Vérifier si c'est un bot - pas d'appel API
|
|
624
|
+
if (this.isBot()) {
|
|
625
|
+
return;
|
|
626
|
+
}
|
|
627
|
+
|
|
628
|
+
const channelId = bbContents._getAttr(element, 'bb-youtube-channel');
|
|
629
|
+
const videoCount = bbContents._getAttr(element, 'bb-youtube-video-count') || '10';
|
|
630
|
+
const allowShorts = bbContents._getAttr(element, 'bb-youtube-allow-shorts') === 'true';
|
|
631
|
+
const language = bbContents._getAttr(element, 'bb-youtube-language') || 'fr';
|
|
632
|
+
|
|
633
|
+
// Vérifier la configuration au moment de l'initialisation
|
|
634
|
+
const endpoint = bbContents.config.youtubeEndpoint;
|
|
635
|
+
|
|
636
|
+
console.log('[DEBUG] YouTube element config:', {channelId, videoCount, allowShorts, language, endpoint});
|
|
637
|
+
|
|
638
|
+
if (!channelId) {
|
|
639
|
+
return;
|
|
640
|
+
}
|
|
641
|
+
|
|
642
|
+
if (!endpoint) {
|
|
643
|
+
// Attendre que la configuration soit définie (max 5 secondes)
|
|
644
|
+
const retryCount = element.getAttribute('data-youtube-retry-count') || '0';
|
|
645
|
+
const retries = parseInt(retryCount);
|
|
623
646
|
|
|
624
|
-
if (
|
|
625
|
-
|
|
647
|
+
if (retries < 50) { // 50 * 100ms = 5 secondes max
|
|
648
|
+
console.log('[DEBUG] YouTube endpoint not configured yet, waiting... (attempt', retries + 1, ')');
|
|
649
|
+
element.innerHTML = '<div style="padding: 20px; text-align: center; color: #6b7280;">Configuration YouTube en cours...</div>';
|
|
650
|
+
element.setAttribute('data-youtube-retry-count', (retries + 1).toString());
|
|
651
|
+
|
|
652
|
+
// Réessayer dans 100ms
|
|
653
|
+
setTimeout(() => {
|
|
654
|
+
this.initElement(element);
|
|
655
|
+
}, 100);
|
|
626
656
|
return;
|
|
627
|
-
}
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
// Erreur: youtubeEndpoint non configuré
|
|
657
|
+
} else {
|
|
658
|
+
// Timeout après 5 secondes
|
|
659
|
+
console.log('[DEBUG] YouTube endpoint configuration timeout');
|
|
631
660
|
element.innerHTML = '<div style="padding: 20px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; color: #dc2626;"><strong>Configuration YouTube manquante</strong><br>Ajoutez dans le <head> :<br><code style="display: block; background: #f3f4f6; padding: 10px; margin: 10px 0; border-radius: 4px; font-family: monospace;"><script><br>bbContents.config.youtubeEndpoint = \'votre-worker-url\';<br></script></code></div>';
|
|
632
661
|
return;
|
|
633
662
|
}
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
}
|
|
647
|
-
|
|
648
|
-
if (!template) {
|
|
649
|
-
// Erreur: élément [bb-youtube-item] manquant
|
|
650
|
-
element.innerHTML = '<div style="padding: 20px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; color: #dc2626;"><strong>Template manquant</strong><br>Ajoutez un élément avec l\'attribut bb-youtube-item</div>';
|
|
651
|
-
return;
|
|
652
|
-
}
|
|
653
|
-
|
|
654
|
-
// Cacher le template original
|
|
655
|
-
template.style.display = 'none';
|
|
656
|
-
|
|
657
|
-
// Marquer l'élément comme traité par le module YouTube
|
|
658
|
-
element.setAttribute('data-bb-youtube-processed', 'true');
|
|
659
|
-
|
|
660
|
-
// Vérifier le cache d'abord
|
|
661
|
-
const cacheKey = `youtube_${channelId}_${videoCount}_${allowShorts}_${language}`;
|
|
662
|
-
const cachedData = this.cache.get(cacheKey);
|
|
663
|
-
|
|
664
|
-
if (cachedData) {
|
|
665
|
-
// Données YouTube récupérées du cache (économie API)
|
|
666
|
-
this.generateYouTubeFeed(container, template, cachedData.value, allowShorts, language);
|
|
667
|
-
return;
|
|
663
|
+
}
|
|
664
|
+
|
|
665
|
+
// Chercher le template pour une vidéo (directement dans l'élément ou dans un conteneur)
|
|
666
|
+
let template = element.querySelector('[bb-youtube-item]');
|
|
667
|
+
let container = element;
|
|
668
|
+
|
|
669
|
+
// Si pas de template direct, chercher dans un conteneur
|
|
670
|
+
if (!template) {
|
|
671
|
+
const containerElement = element.querySelector('[bb-youtube-container]');
|
|
672
|
+
if (containerElement) {
|
|
673
|
+
container = containerElement;
|
|
674
|
+
template = containerElement.querySelector('[bb-youtube-item]');
|
|
668
675
|
}
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
676
|
+
}
|
|
677
|
+
|
|
678
|
+
if (!template) {
|
|
679
|
+
element.innerHTML = '<div style="padding: 20px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; color: #dc2626;"><strong>Template manquant</strong><br>Ajoutez un élément avec l\'attribut bb-youtube-item</div>';
|
|
680
|
+
return;
|
|
681
|
+
}
|
|
682
|
+
|
|
683
|
+
// Cacher le template original
|
|
684
|
+
template.style.display = 'none';
|
|
685
|
+
|
|
686
|
+
// Marquer l'élément comme traité par le module YouTube
|
|
687
|
+
element.setAttribute('data-bb-youtube-processed', 'true');
|
|
688
|
+
|
|
689
|
+
// Vérifier le cache d'abord
|
|
690
|
+
const cacheKey = `youtube_${channelId}_${videoCount}_${allowShorts}_${language}`;
|
|
691
|
+
const cachedData = this.cache.get(cacheKey);
|
|
692
|
+
|
|
693
|
+
if (cachedData) {
|
|
694
|
+
// Données YouTube récupérées du cache (économie API)
|
|
695
|
+
this.generateYouTubeFeed(container, template, cachedData.value, allowShorts, language);
|
|
696
|
+
return;
|
|
697
|
+
}
|
|
698
|
+
|
|
699
|
+
// Afficher un loader
|
|
700
|
+
container.innerHTML = '<div style="padding: 20px; text-align: center; color: #6b7280;">Chargement des vidéos YouTube...</div>';
|
|
701
|
+
|
|
702
|
+
// Appeler l'API via le Worker
|
|
703
|
+
console.log('[DEBUG] Fetching YouTube data from:', `${endpoint}?channelId=${channelId}&maxResults=${videoCount}&allowShorts=${allowShorts}`);
|
|
704
|
+
fetch(`${endpoint}?channelId=${channelId}&maxResults=${videoCount}&allowShorts=${allowShorts}`)
|
|
705
|
+
.then(response => {
|
|
706
|
+
console.log('[DEBUG] YouTube API response status:', response.status);
|
|
707
|
+
if (!response.ok) {
|
|
708
|
+
throw new Error(`HTTP ${response.status}`);
|
|
709
|
+
}
|
|
710
|
+
return response.json();
|
|
711
|
+
})
|
|
712
|
+
.then(data => {
|
|
713
|
+
console.log('[DEBUG] YouTube API data received:', data);
|
|
714
|
+
if (data.error) {
|
|
715
|
+
throw new Error(data.error.message || 'Erreur API YouTube');
|
|
716
|
+
}
|
|
717
|
+
|
|
718
|
+
// Sauvegarder en cache pour 24h
|
|
719
|
+
this.cache.set(cacheKey, data);
|
|
720
|
+
// Données YouTube mises en cache pour 24h (économie API)
|
|
721
|
+
|
|
722
|
+
this.generateYouTubeFeed(container, template, data, allowShorts, language);
|
|
723
|
+
})
|
|
724
|
+
.catch(error => {
|
|
725
|
+
console.error('[DEBUG] YouTube API error:', error);
|
|
726
|
+
// Erreur dans le module youtube
|
|
727
|
+
|
|
728
|
+
// En cas d'erreur, essayer de récupérer du cache même expiré
|
|
729
|
+
const expiredCache = localStorage.getItem(cacheKey);
|
|
730
|
+
if (expiredCache) {
|
|
731
|
+
try {
|
|
732
|
+
const cachedData = JSON.parse(expiredCache);
|
|
733
|
+
console.log('[DEBUG] Using expired cache:', cachedData);
|
|
734
|
+
// Utilisation du cache expiré en cas d'erreur API
|
|
735
|
+
this.generateYouTubeFeed(container, template, cachedData.value, allowShorts, language);
|
|
736
|
+
return;
|
|
737
|
+
} catch (e) {
|
|
738
|
+
console.error('[DEBUG] Cache parsing error:', e);
|
|
739
|
+
// Ignorer les erreurs de parsing
|
|
712
740
|
}
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
}
|
|
716
|
-
|
|
741
|
+
}
|
|
742
|
+
|
|
743
|
+
container.innerHTML = `<div style="padding: 20px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; color: #dc2626;"><strong>Erreur de chargement</strong><br>${error.message}</div>`;
|
|
744
|
+
});
|
|
717
745
|
},
|
|
718
746
|
|
|
719
747
|
generateYouTubeFeed: function(container, template, data, allowShorts, language = 'fr') {
|