script.js

function addStream() {
    const username = document.getElementById('kickUsername').value;
    if (username) {
        const streamsContainer = document.getElementById('streamsContainer');
        const streamDiv = document.createElement('div');
        streamDiv.classList.add('stream');
        streamDiv.innerHTML = `
            <iframe src="https://player.kick.com/${username}" frameborder="0" scrolling="no" allowfullscreen="true"></iframe>
            <button class="remove-button" onclick="removeStream(this, '${username}')">Remove</button>
        `;
        streamsContainer.appendChild(streamDiv);
        document.getElementById('kickUsername').value = '';
        //showNotification(`${username} added successfully!`, 'success');
    } else {
       // showNotification('Please enter a Kick username', 'error');
    }
}

function removeStream(button) {
    const streamDiv = button.parentElement;
    streamDiv.remove();
}

function handleKeyPress(event) {
    if (event.key === 'Enter') {
        addStream();
    }
}

function showNotification(message, type) {
    const notification = document.getElementById('notification');
    notification.textContent = message;
    notification.className = 'notification ' + type;
    notification.style.display = 'block';
    notification.style.opacity = '1';
    setTimeout(() => {
        notification.style.opacity = '0';
        setTimeout(() => {
            notification.style.display = 'none';
        }, 500);
    }, 3000);
}

function toggleMode() {
    const body = document.body;
    body.classList.toggle('light-mode');
    const settingsPanel = document.getElementById('settingsPanel');
    settingsPanel.classList.toggle('light-mode');
    const modeText = document.getElementById('modeText');
    modeText.textContent = body.classList.contains('light-mode') ? 'Light Mode' : 'Dark Mode';
}

function updateStreamSize() {
    const size = document.getElementById('streamSize').value;
    const streamsContainer = document.getElementById('streamsContainer');
    streamsContainer.style.gridTemplateColumns = `repeat(auto-fit, minmax(${size}, 1fr))`;
}

function removeStream(button, username) {
    const streamDiv = button.parentElement;
    streamDiv.remove();
    showNotification(`${username} removed successfully!`, 'error');
}

function updateStreamQuality() {
    const quality = document.getElementById('streamQuality').value;
    // Update stream quality logic here
    console.log(`Stream quality set to ${quality}`);
}

function updateThemeColor() {
    const color = document.getElementById('themeColor').value;
    document.documentElement.style.setProperty('--theme-color', color);
}

function updateAutoPlay() {
    const autoPlay = document.getElementById('autoPlay').checked;
    // Update auto play logic here
    console.log(`Auto Play set to ${autoPlay}`);
}

function toggleSettings() {
    const settingsPanel = document.getElementById('settingsPanel');
    const mainContent = document.querySelector('.main-content');
    settingsPanel.classList.toggle('closed');
    mainContent.classList.toggle('closed');
}