script.js

// Общие функции для всего сайта

// Функция для надежной загрузки изображений через data URL
function loadImageWithRetry(imgElement, url, maxRetries = 3) {
    let retryCount = 0;
    
    function attemptLoad() {
        if (retryCount >= maxRetries) {
            console.log(`Не удалось загрузить изображение после ${maxRetries} попыток: ${url}`);
            imgElement.onerror = null;
            if (imgElement.classList.contains('img-loading')) {
                imgElement.classList.remove('img-loading');
            }
            imgElement.src = 'no-poster.png';
            return;
        }
        
        retryCount++;
        
        const tempImg = new Image();
        tempImg.crossOrigin = 'anonymous';
        
        tempImg.onload = function() {
            try {
                const canvas = document.createElement('canvas');
                canvas.width = tempImg.naturalWidth;
                canvas.height = tempImg.naturalHeight;
                
                const ctx = canvas.getContext('2d');
                ctx.drawImage(tempImg, 0, 0);
                
                const dataUrl = canvas.toDataURL('image/jpeg', 0.9);
                imgElement.src = dataUrl;
                imgElement.onerror = null;
                if (imgElement.classList.contains('img-loading')) {
                    imgElement.classList.remove('img-loading');
                }
                console.log(`Изображение успешно загружено через data URL (попытка ${retryCount})`);
            } catch (error) {
                console.log(`Ошибка конвертации в data URL, попытка ${retryCount}:`, error);
                if (retryCount < maxRetries) {
                    setTimeout(attemptLoad, 1000 * retryCount);
                } else {
                    if (imgElement.classList.contains('img-loading')) {
                        imgElement.classList.remove('img-loading');
                    }
                    imgElement.src = 'no-poster.png';
                }
            }
        };
        
        tempImg.onerror = function() {
            console.log(`Ошибка загрузки временного изображения, попытка ${retryCount}: ${url}`);
            if (retryCount < maxRetries) {
                setTimeout(attemptLoad, 1000 * retryCount);
            } else {
                if (imgElement.classList.contains('img-loading')) {
                    imgElement.classList.remove('img-loading');
                }
                imgElement.src = 'no-poster.png';
            }
        };
        
        tempImg.src = url + (url.includes('?') ? '&' : '?') + 'retry=' + Date.now();
    }
    
    attemptLoad();
}

// Функция для создания img элемента с надежной загрузкой
function createReliableImage(url, alt, className = '') {
    const img = document.createElement('img');
    img.alt = alt || '';
    if (className) img.className = className;
    
    // Устанавливаем прозрачный пиксель как заглушку
    img.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PC9zdmc+';
    img.style.backgroundColor = '#2a2a2a';
    img.classList.add('img-loading');
    
    // Загружаем изображение через data URL если URL валидный
    if (url && url !== 'no-poster.png' && url.startsWith('http')) {
        loadImageWithRetry(img, url);
    } else {
        img.src = 'no-poster.png';
        img.classList.remove('img-loading');
    }
    
    return img;
}

// Функция для форматирования времени из секунд
function formatRuntime(seconds) {
    if (!seconds) return '';
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    return `${hours}ч ${minutes}м`;
}

// Функция для получения параметра из URL
function getUrlParam(name) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(name);
}

// Функция для показа уведомления
function showNotification(message, type = 'info') {
    // Создаем контейнер для уведомлений если его нет
    let notificationContainer = document.getElementById('notification-container');
    if (!notificationContainer) {
        notificationContainer = document.createElement('div');
        notificationContainer.id = 'notification-container';
        notificationContainer.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
        `;
        document.body.appendChild(notificationContainer);
    }
    
    // Создаем уведомление
    const notification = document.createElement('div');
    notification.className = `notification notification-${type}`;
    notification.innerHTML = `
        <div class="notification-content">${message}</div>
        <button class="notification-close">&times;</button>
    `;
    
    // Стили для уведомления
    notification.style.cssText = `
        background-color: ${type === 'error' ? '#4a0000' : type === 'success' ? '#004a00' : '#222'};
        color: #eee;
        padding: 15px 20px;
        margin-bottom: 10px;
        border-radius: 8px;
        border: 2px solid ${type === 'error' ? '#ff4444' : type === 'success' ? '#44ff44' : '#4B0082'};
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-width: 300px;
        max-width: 400px;
        animation: slideIn 0.3s ease;
    `;
    
    // Стили для кнопки закрытия
    const closeBtn = notification.querySelector('.notification-close');
    closeBtn.style.cssText = `
        background: none;
        border: none;
        color: #eee;
        font-size: 20px;
        cursor: pointer;
        padding: 0;
        margin-left: 15px;
    `;
    
    closeBtn.addEventListener('click', () => {
        notification.style.animation = 'slideOut 0.3s ease';
        setTimeout(() => notification.remove(), 300);
    });
    
    // Автоматическое удаление через 5 секунд
    setTimeout(() => {
        if (notification.parentNode) {
            notification.style.animation = 'slideOut 0.3s ease';
            setTimeout(() => notification.remove(), 300);
        }
    }, 5000);
    
    notificationContainer.appendChild(notification);
    
    // Добавляем CSS анимации
    if (!document.querySelector('#notification-styles')) {
        const style = document.createElement('style');
        style.id = 'notification-styles';
        style.textContent = `
            @keyframes slideIn {
                from { transform: translateX(100%); opacity: 0; }
                to { transform: translateX(0); opacity: 1; }
            }
            @keyframes slideOut {
                from { transform: translateX(0); opacity: 1; }
                to { transform: translateX(100%); opacity: 0; }
            }
        `;
        document.head.appendChild(style);
    }
}