kirche-im-netz.Startodon-Hub/src/components/postwall.js

import { checkConsent, showConsentPopup, setUserConsent } from '../components/consentManager.js';

export async function loadPostwall() {
    const container = document.getElementById('postswall-container');

    // Überprüfe, ob Consent erteilt wurde
    if (!checkConsent()) {
        // Consent nicht erteilt – alternative Kachel anzeigen
        renderConsentRequest();
        return; // Beende die Funktion, kein weiterer Datenabruf
    }

    // Mastodon API-URL für Hashtag-Suche
    const apiUrl = 'https://libori.social/api/v1/timelines/tag/fedikirche?limit=20';

    // Posts laden
    async function fetchPosts() {
        try {
            const response = await fetch(apiUrl);
            if (!response.ok) {
                throw new Error('Fehler beim Laden der Posts');
            }
    
            const posts = await response.json();
            renderPosts(posts);
    
            // Button hinzufügen
            addReadMoreButton();
        } catch (error) {
            console.error('Fehler:', error);
            container.innerHTML = '<p>Fehler beim Laden der Posts.</p>';
        }
    }

    // Posts rendern
    function renderPosts(posts) {
        container.innerHTML = ''; // Vorherige Inhalte leeren
        posts.forEach(post => {
            const postElement = document.createElement('a');
            postElement.classList.add('post');
            postElement.href = post.url; // Link zum Originalpost
            postElement.target = '_blank';
            postElement.rel = 'noopener noreferrer';
            postElement.setAttribute('aria-label', 'Zum Originalpost auf Mastodon');
        
            // Zeitstempel berechnen
            const postDate = new Date(post.created_at);
            const timeAgo = getTimeAgo(postDate);
    
            let content = post.content || 'Kein Inhalt verfügbar.';
            const author = post.account.display_name || post.account.username;
            const username = `@${post.account.acct}`;
            const avatar = post.account.avatar || 'src/assets/default-avatar.png';
        
            // Links deaktivieren
            const tempContainer = document.createElement('div');
            tempContainer.innerHTML = content;
    
            const links = tempContainer.querySelectorAll('a');
            links.forEach(link => {
                link.removeAttribute('href');
                link.style.pointerEvents = 'none';
                link.style.color = 'blue';
                link.style.textDecoration = 'underline';
            });
    
            // Bilder bearbeiten
            const images = tempContainer.querySelectorAll('img');
            images.forEach(img => {
                img.style.maxHeight = '200px';
                img.style.width = 'auto';
                img.style.display = 'block';
                img.style.margin = '10px 0';
            });
    
            content = tempContainer.innerHTML;
    
            const mediaAttachments = post.media_attachments || [];
            let mediaHTML = '';
            mediaAttachments.forEach(media => {
                if (media.type === 'image') {
                    mediaHTML += `
                        <img src="${media.url}" alt="Medienanhang" style="max-height: 200px; width: auto; display: block; margin: 10px 0;">
                    `;
                }
            });
    
            postElement.innerHTML = `
                <div class="post-header">
                    <img src="${avatar}" alt="${author}" class="avatar">
                    <div class="post-author">
                        <span class="post-authorname">${author}</span>
                        <span class="post-username">${username}</span>
                    </div>
                    <span class="post-timestamp">${timeAgo}</span>
                </div>
                <div class="post-content">${content}</div>
                <div class="post-media">${mediaHTML}</div>
                <div class="post-footer">…</div>
            `;
            container.appendChild(postElement);
        });
    }

    // Lade die Posts
    fetchPosts();
}

// Alternative Kachel anzeigen, wenn kein Consent erteilt wurde
function renderConsentRequest() {
    const container = document.getElementById('postswall-container');
    container.innerHTML = ''; // Vorherige Inhalte leeren

    const consentCard = document.createElement('div');
    consentCard.classList.add('post'); // Verwendet die Post-Klasse für Konsistenz

    consentCard.innerHTML = `
        <div class="post-header">
            <!-- Skeleton-Loader für Avatar -->
            <div class="skeleton avatar-skeleton"></div>

            <!-- Skeleton-Loader für Autor und Username -->
            <div class="post-author">
                <div class="skeleton skeleton-text skeleton-text-name"></div>
                <div class="skeleton skeleton-text skeleton-text-username"></div>
            </div>
        </div>

        <div class="post-content">
            <p>Du musst zuerst zustimmen, um Inhalte anzuzeigen.</p>
            <div class="consent-buttons">
                <button id="open-consent-popup" class="btn">Datenschutzeinstellungen öffnen</button>
                <a href="https://libori.social/tags/fedikirche" target="_blank" rel="noopener noreferrer">
                    <button class="btn">Beiträge auf Mastodon ansehen</button>
                </a>
            </div>
        </div>
    `;

    container.appendChild(consentCard);

    // Event-Listener für Button zum erneuten Anzeigen des Consent-Popups
    document.getElementById('open-consent-popup').addEventListener('click', () => {
        showConsentPopup(
            () => {
                setUserConsent(true); // Zustimmung speichern
                loadPostwall(); // Nachträglich Posts laden
            },
            () => {
                setUserConsent(false); // Ablehnung speichern
                console.log('Consent abgelehnt');
            }
        );
    });
}

// Zeitberechnung für Posts
function getTimeAgo(date) {
    const now = new Date();
    const secondsAgo = Math.floor((now - date) / 1000);

    if (secondsAgo < 60) {
        return `${secondsAgo} Sek.`;
    } else if (secondsAgo < 3600) {
        const minutes = Math.floor(secondsAgo / 60);
        return `${minutes} Min.`;
    } else if (secondsAgo < 86400) {
        const hours = Math.floor(secondsAgo / 3600);
        return `${hours} Std.`;
    } else {
        const days = Math.floor(secondsAgo / 86400);
        return `${days} T.`;
    }
}

// "Lese weiter"-Button hinzufügen
function addReadMoreButton() {
    const container = document.getElementById('postswall-container');
    const readMoreButton = document.createElement('a');
    readMoreButton.href = 'https://libori.social/tags/fedikirche';
    readMoreButton.target = '_blank';
    readMoreButton.rel = 'noopener noreferrer';
    readMoreButton.classList.add('read-more-button');
    readMoreButton.innerText = 'weiterlesen';
    container.appendChild(readMoreButton);
}