@bebranded/bb-contents 1.0.6-beta → 1.0.8-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 +85 -50
- package/package.json +1 -1
package/bb-contents.js
CHANGED
|
@@ -428,6 +428,7 @@
|
|
|
428
428
|
|
|
429
429
|
const channelId = bbContents._getAttr(element, 'bb-youtube-channel');
|
|
430
430
|
const videoCount = bbContents._getAttr(element, 'bb-youtube-video-count') || '10';
|
|
431
|
+
const allowShorts = bbContents._getAttr(element, 'bb-youtube-allow-shorts') === 'true';
|
|
431
432
|
const endpoint = bbContents.config.youtubeEndpoint;
|
|
432
433
|
|
|
433
434
|
if (!channelId) {
|
|
@@ -441,8 +442,27 @@
|
|
|
441
442
|
return;
|
|
442
443
|
}
|
|
443
444
|
|
|
445
|
+
// Chercher le conteneur pour les vidéos
|
|
446
|
+
const container = element.querySelector('[bb-youtube-container]');
|
|
447
|
+
if (!container) {
|
|
448
|
+
bbContents.utils.log('Erreur: élément [bb-youtube-container] manquant');
|
|
449
|
+
element.innerHTML = '<div style="padding: 20px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; color: #dc2626;"><strong>Structure manquante</strong><br>Ajoutez un élément avec l\'attribut bb-youtube-container</div>';
|
|
450
|
+
return;
|
|
451
|
+
}
|
|
452
|
+
|
|
453
|
+
// Chercher le template pour une vidéo
|
|
454
|
+
const template = container.querySelector('[bb-youtube-item]');
|
|
455
|
+
if (!template) {
|
|
456
|
+
bbContents.utils.log('Erreur: élément [bb-youtube-item] manquant');
|
|
457
|
+
container.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>';
|
|
458
|
+
return;
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
// Cacher le template original
|
|
462
|
+
template.style.display = 'none';
|
|
463
|
+
|
|
444
464
|
// Afficher un loader
|
|
445
|
-
|
|
465
|
+
container.innerHTML = '<div style="padding: 20px; text-align: center; color: #6b7280;">Chargement des vidéos YouTube...</div>';
|
|
446
466
|
|
|
447
467
|
// Appeler l'API via le Worker
|
|
448
468
|
fetch(`${endpoint}?channelId=${channelId}&maxResults=${videoCount}`)
|
|
@@ -456,78 +476,93 @@
|
|
|
456
476
|
if (data.error) {
|
|
457
477
|
throw new Error(data.error.message || 'Erreur API YouTube');
|
|
458
478
|
}
|
|
459
|
-
this.generateYouTubeFeed(
|
|
479
|
+
this.generateYouTubeFeed(container, template, data, allowShorts);
|
|
460
480
|
})
|
|
461
481
|
.catch(error => {
|
|
462
482
|
bbContents.utils.log('Erreur dans le module youtube:', error);
|
|
463
|
-
|
|
483
|
+
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>`;
|
|
464
484
|
});
|
|
465
485
|
});
|
|
466
486
|
},
|
|
467
487
|
|
|
468
|
-
generateYouTubeFeed: function(container, data) {
|
|
488
|
+
generateYouTubeFeed: function(container, template, data, allowShorts) {
|
|
469
489
|
if (!data.items || data.items.length === 0) {
|
|
470
490
|
container.innerHTML = '<div style="padding: 20px; text-align: center; color: #6b7280;">Aucune vidéo trouvée</div>';
|
|
471
491
|
return;
|
|
472
492
|
}
|
|
473
493
|
|
|
474
|
-
//
|
|
475
|
-
let
|
|
494
|
+
// Filtrer les shorts si nécessaire
|
|
495
|
+
let videos = data.items;
|
|
496
|
+
if (!allowShorts) {
|
|
497
|
+
videos = videos.filter(item => {
|
|
498
|
+
// Filtrer les shorts (vidéos de moins de 60 secondes ou avec #shorts dans le titre)
|
|
499
|
+
const title = item.snippet.title.toLowerCase();
|
|
500
|
+
const description = item.snippet.description.toLowerCase();
|
|
501
|
+
return !title.includes('#shorts') && !description.includes('#shorts');
|
|
502
|
+
});
|
|
503
|
+
bbContents.utils.log(`Filtrage des shorts: ${data.items.length} → ${videos.length} vidéos`);
|
|
504
|
+
}
|
|
476
505
|
|
|
477
|
-
|
|
506
|
+
// Vider le conteneur
|
|
507
|
+
container.innerHTML = '';
|
|
508
|
+
|
|
509
|
+
// Cloner le template pour chaque vidéo
|
|
510
|
+
videos.forEach(item => {
|
|
478
511
|
const videoId = item.id.videoId;
|
|
479
512
|
const snippet = item.snippet;
|
|
480
513
|
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
<div class="bb-youtube-date" style="color: #9ca3af; font-size: 12px;">${this.formatDate(snippet.publishedAt)}</div>
|
|
491
|
-
</div>
|
|
492
|
-
</div>
|
|
493
|
-
`;
|
|
514
|
+
// Cloner le template
|
|
515
|
+
const clone = template.cloneNode(true);
|
|
516
|
+
clone.style.display = ''; // Rendre visible
|
|
517
|
+
|
|
518
|
+
// Remplir les données
|
|
519
|
+
this.fillVideoData(clone, videoId, snippet);
|
|
520
|
+
|
|
521
|
+
// Ajouter au conteneur
|
|
522
|
+
container.appendChild(clone);
|
|
494
523
|
});
|
|
495
524
|
|
|
496
|
-
|
|
497
|
-
container.innerHTML = html;
|
|
498
|
-
|
|
499
|
-
// Traiter les éléments avec des attributes spécifiques
|
|
500
|
-
this.processYouTubeElements(container, data);
|
|
525
|
+
bbContents.utils.log(`YouTube Feed généré: ${videos.length} vidéos`);
|
|
501
526
|
},
|
|
502
527
|
|
|
503
|
-
|
|
504
|
-
//
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
}
|
|
528
|
+
fillVideoData: function(element, videoId, snippet) {
|
|
529
|
+
// Remplir le lien directement sur l'élément (link block)
|
|
530
|
+
if (element.tagName === 'A' || element.hasAttribute('bb-youtube-item')) {
|
|
531
|
+
element.href = `https://www.youtube.com/watch?v=${videoId}`;
|
|
532
|
+
element.target = '_blank';
|
|
533
|
+
element.rel = 'noopener noreferrer';
|
|
534
|
+
}
|
|
510
535
|
|
|
511
|
-
//
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
}
|
|
536
|
+
// Remplir la thumbnail
|
|
537
|
+
const thumbnail = element.querySelector('[bb-youtube-thumbnail]');
|
|
538
|
+
if (thumbnail) {
|
|
539
|
+
thumbnail.src = snippet.thumbnails.medium.url;
|
|
540
|
+
thumbnail.alt = snippet.title;
|
|
541
|
+
}
|
|
517
542
|
|
|
518
|
-
//
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
});
|
|
543
|
+
// Remplir le titre
|
|
544
|
+
const title = element.querySelector('[bb-youtube-title]');
|
|
545
|
+
if (title) {
|
|
546
|
+
title.textContent = snippet.title;
|
|
547
|
+
}
|
|
524
548
|
|
|
525
|
-
//
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
549
|
+
// Remplir la description
|
|
550
|
+
const description = element.querySelector('[bb-youtube-description]');
|
|
551
|
+
if (description) {
|
|
552
|
+
description.textContent = snippet.description;
|
|
553
|
+
}
|
|
554
|
+
|
|
555
|
+
// Remplir la date
|
|
556
|
+
const date = element.querySelector('[bb-youtube-date]');
|
|
557
|
+
if (date) {
|
|
558
|
+
date.textContent = this.formatDate(snippet.publishedAt);
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
// Remplir le nom de la chaîne
|
|
562
|
+
const channel = element.querySelector('[bb-youtube-channel]');
|
|
563
|
+
if (channel) {
|
|
564
|
+
channel.textContent = snippet.channelTitle;
|
|
565
|
+
}
|
|
531
566
|
},
|
|
532
567
|
|
|
533
568
|
formatDate: function(dateString) {
|