mirror of
https://github.com/skylanix/MamieHenriette.git
synced 2026-02-06 06:40:35 +01:00
246 lines
12 KiB
HTML
246 lines
12 KiB
HTML
{% extends "template.html" %}
|
|
|
|
{% block content %}
|
|
<h1>Notifications YouTube</h1>
|
|
|
|
{% if msg %}
|
|
<div id="alert-msg" class="alert alert-{{ msg_type }}" style="padding: 10px; margin: 10px 0; border: 1px solid {{ '#f00' if msg_type == 'error' else '#0f0' }}; background-color: {{ '#ffe0e0' if msg_type == 'error' else '#e0ffe0' }};">
|
|
{{ msg }}
|
|
</div>
|
|
<script>
|
|
setTimeout(function() {
|
|
var el = document.getElementById('alert-msg');
|
|
if (el) el.style.display = 'none';
|
|
}, 5000);
|
|
</script>
|
|
{% endif %}
|
|
|
|
<p>
|
|
Liste des chaînes YouTube surveillées pour les notifications de nouvelles vidéos.
|
|
|
|
Le bot vérifie toutes les 5 minutes les nouvelles vidéos des chaînes en dessous.
|
|
Quand une nouvelle vidéo est détectée, le bot enverra une notification sur Discord.
|
|
</p>
|
|
|
|
{% if not notification %}
|
|
<h2>Notifications</h2>
|
|
<table class="live-alert">
|
|
<thead>
|
|
<tr>
|
|
<th>Chaîne YouTube</th>
|
|
<th>Canal Discord</th>
|
|
<th>Type</th>
|
|
<th>Message</th>
|
|
<th>#</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for notification in notifications %}
|
|
<tr>
|
|
<td>{{notification.channel_id}}</td>
|
|
<td>{{notification.notify_channel_name}}</td>
|
|
<td>
|
|
{% if notification.video_type == 'all' %}
|
|
Toutes
|
|
{% elif notification.video_type == 'video' %}
|
|
Vidéos uniquement
|
|
{% elif notification.video_type == 'short' %}
|
|
Shorts uniquement
|
|
{% endif %}
|
|
</td>
|
|
<td>{{notification.message}}</td>
|
|
<td>
|
|
<a href="{{ url_for('toggleYouTube', id = notification.id) }}" class="icon">{{ '✅' if notification.enable else '❌' }}</a>
|
|
<a href="{{ url_for('openEditYouTube', id = notification.id) }}" class="icon">✐</a>
|
|
<a href="{{ url_for('delYouTube', id = notification.id) }}"
|
|
onclick="return confirm('Êtes-vous sûr de vouloir supprimer cette notification ?')" class="icon">🗑</a>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
{% endif %}
|
|
|
|
<h2>{{ 'Editer une notification' if notification else 'Ajouter une notification YouTube' }}</h2>
|
|
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
|
|
<div>
|
|
<form id="youtube-form" action="{{ url_for('submitEditYouTube', id = notification.id) if notification else url_for('addYouTube') }}" method="POST">
|
|
<fieldset>
|
|
<legend>Configuration de base</legend>
|
|
<label for="channel_id">Lien ou ID de la chaîne YouTube</label>
|
|
<input name="channel_id" id="channel_id" type="text" maxlength="256" required="required" value="{{notification.channel_id if notification}}" placeholder="https://www.youtube.com/@513v3 ou https://www.youtube.com/channel/UC... ou UC..."/>
|
|
|
|
<label for="notify_channel">Canal de Notification Discord</label>
|
|
<select name="notify_channel" id="notify_channel">
|
|
{% for channel in channels %}
|
|
<option value="{{channel.id}}"{% if notification and notification.notify_channel == channel.id %}
|
|
selected="selected" {% endif %}>{{channel.name}}</option>
|
|
{% endfor %}
|
|
</select>
|
|
|
|
<label for="video_type">Type de vidéo à notifier</label>
|
|
<select name="video_type" id="video_type">
|
|
<option value="all"{% if notification and notification.video_type == 'all' %} selected="selected" {% endif %}>Toutes (vidéos + shorts)</option>
|
|
<option value="video"{% if notification and notification.video_type == 'video' %} selected="selected" {% endif %}>Vidéos uniquement</option>
|
|
<option value="short"{% if notification and notification.video_type == 'short' %} selected="selected" {% endif %}>Shorts uniquement</option>
|
|
</select>
|
|
|
|
<label for="message">Message (optionnel, envoyé avant l'embed)</label>
|
|
<textarea name="message" id="message" rows="3" cols="50">{{notification.message if notification}}</textarea>
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<legend>Personnalisation de l'embed Discord</legend>
|
|
|
|
<label for="embed_title">Titre de l'embed</label>
|
|
<input name="embed_title" id="embed_title" type="text" maxlength="256" value="{{notification.embed_title if notification}}" placeholder="{video_title} (par défaut: titre de la vidéo)"/>
|
|
<small>Variables: {video_title}, {channel_name}, {video_url}, {video_id}</small>
|
|
|
|
<label for="embed_description">Description de l'embed</label>
|
|
<textarea name="embed_description" id="embed_description" rows="4" cols="50" placeholder="Description optionnelle de l'embed">{{notification.embed_description if notification}}</textarea>
|
|
<small>Variables: {video_title}, {channel_name}, {video_url}, {published_at}, {is_short}</small>
|
|
|
|
<label for="embed_color">Couleur de l'embed (hexadécimal)</label>
|
|
<input name="embed_color" id="embed_color" type="color" value="#{{notification.embed_color if notification else 'FF0000'}}" style="width: 100px; height: 40px;"/>
|
|
<input type="text" id="embed_color_text" value="{{notification.embed_color if notification else 'FF0000'}}" placeholder="FF0000" style="width: 100px; margin-left: 10px;" maxlength="6"/>
|
|
<small>Format: FF0000 (rouge YouTube par défaut)</small>
|
|
|
|
<label for="embed_author_name">Nom de l'auteur</label>
|
|
<input name="embed_author_name" id="embed_author_name" type="text" maxlength="256" value="{{notification.embed_author_name if notification}}" placeholder="{channel_name} (par défaut: nom de la chaîne)"/>
|
|
|
|
<label for="embed_author_icon">Icône de l'auteur (URL)</label>
|
|
<input name="embed_author_icon" id="embed_author_icon" type="text" maxlength="512" value="{{notification.embed_author_icon if notification}}" placeholder="https://www.youtube.com/img/desktop/yt_1200.png"/>
|
|
|
|
<label for="embed_footer">Pied de page</label>
|
|
<input name="embed_footer" id="embed_footer" type="text" maxlength="2048" value="{{notification.embed_footer if notification}}" placeholder="Texte optionnel en bas de l'embed"/>
|
|
|
|
<label>
|
|
<input type="checkbox" name="embed_thumbnail" id="embed_thumbnail" {% if not notification or notification.embed_thumbnail %}checked="checked"{% endif %}>
|
|
Afficher la miniature (thumbnail) en haut à droite
|
|
</label>
|
|
|
|
<label>
|
|
<input type="checkbox" name="embed_image" id="embed_image" {% if not notification or notification.embed_image %}checked="checked"{% endif %}>
|
|
Afficher l'image principale (image de la vidéo)
|
|
</label>
|
|
</fieldset>
|
|
|
|
<input type="Submit" value="{{ 'Modifier' if notification else 'Ajouter' }}">
|
|
</form>
|
|
</div>
|
|
|
|
<div>
|
|
<h3>Prévisualisation de l'embed Discord</h3>
|
|
<div id="embed-preview" style="background-color: #2f3136; border-radius: 4px; padding: 16px; font-family: 'Whitney', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #dcddde; max-width: 520px; border-left: 4px solid #FF0000;">
|
|
<div id="embed-author" style="display: flex; align-items: center; margin-bottom: 8px; font-size: 14px;">
|
|
<img id="embed-author-icon" src="https://www.youtube.com/img/desktop/yt_1200.png" style="width: 20px; height: 20px; border-radius: 50%; margin-right: 8px;" onerror="this.style.display='none'"/>
|
|
<span id="embed-author-name" style="font-weight: 600;">Nom de la chaîne</span>
|
|
</div>
|
|
<a id="embed-title" href="#" style="color: #00aff4; text-decoration: none; font-size: 16px; font-weight: 600; display: block; margin-bottom: 8px;">Titre de la vidéo</a>
|
|
<div id="embed-description" style="font-size: 14px; line-height: 1.375; margin-bottom: 8px; color: #dcddde;"></div>
|
|
<div id="embed-thumbnail-container" style="margin: 8px 0;">
|
|
<img id="embed-thumbnail" src="" style="max-width: 80px; max-height: 80px; border-radius: 4px; float: right; margin-left: 16px; display: none;"/>
|
|
</div>
|
|
<div id="embed-image-container" style="margin-top: 16px;">
|
|
<img id="embed-image" src="https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg" style="max-width: 100%; border-radius: 4px; display: none;"/>
|
|
</div>
|
|
<div id="embed-footer" style="margin-top: 8px; font-size: 12px; color: #72767d;"></div>
|
|
</div>
|
|
<small style="color: #666;">Cette prévisualisation est approximative. L'apparence réelle sur Discord peut varier légèrement.</small>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function formatText(text, vars) {
|
|
if (!text) return '';
|
|
return text.replace(/\{(\w+)\}/g, function(match, key) {
|
|
return vars[key] || match;
|
|
});
|
|
}
|
|
|
|
function updatePreview() {
|
|
const embedTitle = document.getElementById('embed_title').value || '{video_title}';
|
|
const embedDescription = document.getElementById('embed_description').value || '';
|
|
const embedColor = document.getElementById('embed_color_text').value || 'FF0000';
|
|
const embedAuthorName = document.getElementById('embed_author_name').value || '{channel_name}';
|
|
const embedAuthorIcon = document.getElementById('embed_author_icon').value || 'https://www.youtube.com/img/desktop/yt_1200.png';
|
|
const embedFooter = document.getElementById('embed_footer').value || '';
|
|
const embedThumbnail = document.getElementById('embed_thumbnail').checked;
|
|
const embedImage = document.getElementById('embed_image').checked;
|
|
|
|
const vars = {
|
|
video_title: 'Nouvelle vidéo de test',
|
|
channel_name: 'Ma Chaîne YouTube',
|
|
video_url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
|
video_id: 'dQw4w9WgXcQ',
|
|
thumbnail: 'https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg',
|
|
published_at: '2026-01-25T12:00:00Z',
|
|
is_short: false
|
|
};
|
|
|
|
document.getElementById('embed-title').textContent = formatText(embedTitle, vars);
|
|
document.getElementById('embed-title').href = vars.video_url;
|
|
document.getElementById('embed-description').textContent = formatText(embedDescription, vars);
|
|
document.getElementById('embed-author-name').textContent = formatText(embedAuthorName, vars);
|
|
document.getElementById('embed-author-icon').src = embedAuthorIcon;
|
|
document.getElementById('embed-footer').textContent = formatText(embedFooter, vars);
|
|
|
|
document.getElementById('embed-preview').style.borderLeftColor = '#' + embedColor;
|
|
|
|
if (embedThumbnail) {
|
|
document.getElementById('embed-thumbnail').src = vars.thumbnail;
|
|
document.getElementById('embed-thumbnail').style.display = 'block';
|
|
} else {
|
|
document.getElementById('embed-thumbnail').style.display = 'none';
|
|
}
|
|
|
|
if (embedImage) {
|
|
document.getElementById('embed-image').src = vars.thumbnail;
|
|
document.getElementById('embed-image').style.display = 'block';
|
|
} else {
|
|
document.getElementById('embed-image').style.display = 'none';
|
|
}
|
|
}
|
|
|
|
document.getElementById('embed_color').addEventListener('input', function(e) {
|
|
document.getElementById('embed_color_text').value = e.target.value.substring(1).toUpperCase();
|
|
updatePreview();
|
|
});
|
|
|
|
document.getElementById('embed_color_text').addEventListener('input', function(e) {
|
|
const val = e.target.value.replace(/[^0-9A-Fa-f]/g, '').substring(0, 6);
|
|
e.target.value = val;
|
|
if (val.length === 6) {
|
|
document.getElementById('embed_color').value = '#' + val;
|
|
updatePreview();
|
|
}
|
|
});
|
|
|
|
const formFields = ['embed_title', 'embed_description', 'embed_author_name', 'embed_author_icon', 'embed_footer', 'embed_thumbnail', 'embed_image'];
|
|
formFields.forEach(field => {
|
|
const el = document.getElementById(field);
|
|
if (el) {
|
|
el.addEventListener('input', updatePreview);
|
|
el.addEventListener('change', updatePreview);
|
|
}
|
|
});
|
|
|
|
updatePreview();
|
|
</script>
|
|
|
|
<p>
|
|
<strong>Variables disponibles pour l'embed :</strong>
|
|
<ul>
|
|
<li><code>{channel_name}</code> : nom de la chaîne YouTube</li>
|
|
<li><code>{video_title}</code> : titre de la vidéo</li>
|
|
<li><code>{video_url}</code> : lien vers la vidéo</li>
|
|
<li><code>{video_id}</code> : ID de la vidéo</li>
|
|
<li><code>{thumbnail}</code> : URL de la miniature</li>
|
|
<li><code>{published_at}</code> : date de publication</li>
|
|
<li><code>{is_short}</code> : True si c'est un short, False sinon</li>
|
|
</ul>
|
|
</p>
|
|
|
|
{% endblock %}
|