renderer.js

const { ipcRenderer } = require('electron');
const path = require('path');

const selectFolderBtn = document.getElementById('selectFolderBtn');
const fileList = document.getElementById('fileList');
const videoPlayer = document.getElementById('videoPlayer');
const videoContainer = document.getElementById('videoContainer');
const placeholder = document.getElementById('placeholder');
const videoTitle = document.getElementById('videoTitle');

let rootPath = '';
let currentPath = '';

selectFolderBtn.addEventListener('click', async () => {
    const result = await ipcRenderer.invoke('select-folder');
    if (result) {
        rootPath = result;
        currentPath = result;
        loadFiles(result);
    }
});

async function loadFiles(dirPath) {
    const files = await ipcRenderer.invoke('read-dir', dirPath);
    fileList.innerHTML = '';

    // Add back button if not in root
    if (dirPath !== rootPath) {
        const backBtn = createFileElement({
            name: '..',
            isDirectory: true,
            path: path.dirname(dirPath)
        });
        fileList.appendChild(backBtn);
    }

    files.sort((a, b) => {
        if (a.isDirectory === b.isDirectory) {
            return a.name.localeCompare(b.name);
        }
        return a.isDirectory ? -1 : 1;
    });

    files.forEach(file => {
        const el = createFileElement(file);
        fileList.appendChild(el);
    });
}

function createFileElement(file) {
    const div = document.createElement('div');
    div.className = 'file-item';
    
    const icon = document.createElement('span');
    icon.className = 'material-icons';
    icon.textContent = file.isDirectory ? 'folder' : 'movie';
    
    const name = document.createElement('span');
    name.textContent = file.name;
    
    div.appendChild(icon);
    div.appendChild(name);
    
    div.addEventListener('click', () => {
        if (file.isDirectory) {
            currentPath = file.path;
            loadFiles(file.path);
        } else {
            playVideo(file);
            
            // Update active state
            document.querySelectorAll('.file-item').forEach(el => el.classList.remove('active'));
            div.classList.add('active');
        }
    });
    
    return div;
}

function playVideo(file) {
    videoPlayer.src = file.path;
    videoTitle.textContent = file.name;
    
    videoContainer.classList.remove('hidden');
    placeholder.style.display = 'none';
    
    videoPlayer.play();
}