scriptVideo.js

// JavaScript source code

// Model DATE canvas si video
let videoElement, canvas, context, W, H;
let playlist = []; // stocare fisiere video playlist
let indexCurent = -1; // indicele din playlist al clipului care este redat
let efectCurent = 'none'; // efectul curent aplicat
let elementTragere = null; // clipul selectat pentru drag and drop => schimbare pozitie in playlist
let mx = 0, my = 0; // coordonate mouse canvas
let mouseInCanvas = false; // var booleana mouse este sau nu in canvas pentru pause/resume clip
let previewCanvas = null;  // preview cadru temporar in canvas
let timeoutPreview = null;

// dimensiunile butoanele desenate manual pe canvas => pornire/oprire clip,next,preview,volum
let controale = {
    butonPrevious: { x: 0, y: 0, w: 50, h: 50 },
    butonPlay: { x: 0, y: 0, w: 60, h: 60 },
    butonNext: { x: 0, y: 0, w: 50, h: 50 },
    progressBar: { x: 0, y: 0, w: 0, h: 30 },
    volumBar: { x: 0, y: 0, w: 100, h: 30 }
};

// calculez pozitiile controalelor desenate pe canvas
function calculeazaPozitiiControale() {
    let bottomY = H - 120; // pozitii butoanele de jos
    let totalButoane = 160; // latime totala
    let startX = (W - totalButoane) / 2; // start X pentru a centra butoanele

    controale.butonPrevious.x = startX;
    controale.butonPrevious.y = bottomY;
    controale.butonPrevious.w = 50;
    controale.butonPrevious.h = 50;

    controale.butonPlay.x = startX + 50;
    controale.butonPlay.y = bottomY - 5;
    controale.butonPlay.w = 60;
    controale.butonPlay.h = 60;

    controale.butonNext.x = startX + 110;
    controale.butonNext.y = bottomY;
    controale.butonNext.w = 50;
    controale.butonNext.h = 50;

    let padding = 20;
    controale.progressBar.x = padding;
    controale.progressBar.y = H - 60;
    controale.progressBar.w = W - 2 * padding - 120;
    controale.progressBar.h = 30;

    controale.volumBar.x = W - padding - 100;
    controale.volumBar.y = H - 60;
    controale.volumBar.w = 100;
    controale.volumBar.h = 30;
}

// func desenare apelata la fiecare interval de 30ms
function desenare() {
    if (!videoElement.src) { // verifica existenta unui clip incarcat 
        return;
    }

    context.drawImage(videoElement, 0, 0, W, H); // deseneaza cadrul curent al clipului video
    let imageData = context.getImageData(0, 0, W, H); // date pixeli din canvas
    aplicareEfect(imageData); // apel func de aplicare efect

    if (mouseInCanvas) { // daca mouse este in canvas
        desenareControaleSiPreview(imageData); // desenare controale si preview
    }

    context.putImageData(imageData, 0, 0); // pune inapoi in canvas pixelii modificati
}

// aplicare efecte pe canvas 
function aplicareEfect(imageData) {
    let v = imageData.data; // datele pixelilor 
    if (efectCurent === 'none') { // nu e selectat niciun efect - nu face nimic
        return;
    }
    for (let i = 0; i < W * H * 4; i += 4) { // parcurgere pixeli RGBA
        let r = v[i + 0]; // rosu
        let g = v[i + 1]; // verde
        let b = v[i + 2]; // albastru

        // pentru cele 3 tipuri de efecte 
        if (efectCurent === 'grayscale') {
            let gri = Math.round((r + g + b) / 3);
            v[i + 0] = v[i + 1] = v[i + 2] = gri; // toti pixelii setati cu gri dupa calcularea mediei
        }
        else if (efectCurent === 'sepia') { // formulele pentru a transforma cei 3 rgb => sepia
            v[i + 0] = Math.min(255, (r * 0.393) + (g * 0.769) + (b * 0.189));
            v[i + 1] = Math.min(255, (r * 0.349) + (g * 0.686) + (b * 0.168));
            v[i + 2] = Math.min(255, (r * 0.272) + (g * 0.534) + (b * 0.131));
        }
        else if (efectCurent === 'inversat') { // pentru inversare se scade efectiv din val maxima 255 val pixelilor
            v[i + 0] = 255 - r;
            v[i + 1] = 255 - g;
            v[i + 2] = 255 - b;
        }
    }
}

// desenare controale si preview pe pixelii canvasului
function desenareControaleSiPreview(imageData) {
    let v = imageData.data;

    // desenez bara semitransparenta de sus 0-50 px
    for (let y = 0; y < 50; y++) { // primele 50 de linii 
        for (let x = 0; x < W; x++) { // parcurge fiecare latime 
            let i = y * W * 4 + x * 4; // index pixel in vectorul v de pixeli extrasi
            // efect intunecare RGB
            v[i + 0] = Math.round(v[i + 0] * 0.3);
            v[i + 1] = Math.round(v[i + 1] * 0.3);
            v[i + 2] = Math.round(v[i + 2] * 0.3);
            v[i + 3] = 200; // setez transparenta la 200
        }
    }

    // desenez bara semitransparenta de jos sub 130 px
    for (let y = H - 130; y < H; y++) { // ultimele 130 de linii
        for (let x = 0; x < W; x++) { // fiecare latime
            let i = y * W * 4 + x * 4; // index pixel
            // intunecare si transparenta
            v[i + 0] = Math.round(v[i + 0] * 0.2);
            v[i + 1] = Math.round(v[i + 1] * 0.2);
            v[i + 2] = Math.round(v[i + 2] * 0.2);
            v[i + 3] = 220;
        }
    }

    // desenare butoane Preview,Play,Next
    desenareButon(v, controale.butonPrevious.x, controale.butonPrevious.y, controale.butonPrevious.w, controale.butonPrevious.h, 'prev');
    desenareButon(v, controale.butonPlay.x, controale.butonPlay.y, controale.butonPlay.w, controale.butonPlay.h, videoElement.paused ? 'play' : 'pause');
    desenareButon(v, controale.butonNext.x, controale.butonNext.y, controale.butonNext.w, controale.butonNext.h, 'next');

    // desenez progress bar - fundal gri
    for (let y = controale.progressBar.y; y < controale.progressBar.y + controale.progressBar.h; y++) { // inaltime prog -bar
        for (let x = controale.progressBar.x; x < controale.progressBar.x + controale.progressBar.w; x++) { // latime
            if (x >= 0 && x < W && y >= 0 && y < H) { // pixel in limita canvasului
                let i = y * W * 4 + x * 4; // calculare index
                // culoare gri si transparenta
                v[i + 0] = 100;
                v[i + 1] = 100;
                v[i + 2] = 100;
                v[i + 3] = 180;
            }
        }
    }

    // aceeasi logica de sus doar ca desenez umplerea cu verde a progress bar ului pentru a specifica derularea clipului
    let progres = videoElement.currentTime / videoElement.duration; // procent video redat
    if (!isNaN(progres)) { // verificare progres e nr valid
        let progressW = Math.round(controale.progressBar.w * progres);
        for (let y = controale.progressBar.y; y < controale.progressBar.y + controale.progressBar.h; y++) {
            for (let x = controale.progressBar.x; x < controale.progressBar.x + progressW; x++) {
                if (x >= 0 && x < W && y >= 0 && y < H) {
                    let i = y * W * 4 + x * 4;
                    v[i + 0] = 52;
                    v[i + 1] = 211;
                    v[i + 2] = 153;
                    v[i + 3] = 255;
                }
            }
        }
    }

    // desenez volum bar fundal gri parte neumpluta
    for (let y = controale.volumBar.y; y < controale.volumBar.y + controale.volumBar.h; y++) {
        for (let x = controale.volumBar.x; x < controale.volumBar.x + controale.volumBar.w; x++) {
            if (x >= 0 && x < W && y >= 0 && y < H) {
                let i = y * W * 4 + x * 4;
                v[i + 0] = 100;
                v[i + 1] = 100;
                v[i + 2] = 100;
                v[i + 3] = 180;
            }
        }
    }

    // desenez partea umpluta cu verde a volum bar ului
    let volumW = Math.round(controale.volumBar.w * videoElement.volume); // latime calculata in func de volum
    for (let y = controale.volumBar.y; y < controale.volumBar.y + controale.volumBar.h; y++) {
        for (let x = controale.volumBar.x; x < controale.volumBar.x + volumW; x++) {
            if (x >= 0 && x < W && y >= 0 && y < H) {
                let i = y * W * 4 + x * 4;
                v[i + 0] = 52;
                v[i + 1] = 211;
                v[i + 2] = 153;
                v[i + 3] = 255;
            }
        }
    }

    desenareEmojiVolum(v, controale.volumBar.x + 10, controale.volumBar.y + 15); // desenez emoji de speaker pt volum

    // verific daca mouse ul este pe progress bar pentru a afisa clipul anterior
    if (mx >= controale.progressBar.x && mx <= controale.progressBar.x + controale.progressBar.w &&
        my >= controale.progressBar.y && my <= controale.progressBar.y + controale.progressBar.h) {
        desenarePreview(v);
    }
}

// desenez emoji de speaker pentru volum 
function desenareEmojiVolum(v, cx, cy) { // pixeli si coordonate centrale
    // parcurg o zona in jurul centrului
    for (let dy = -8; dy <= 8; dy++) {
        for (let dx = -6; dx <= 6; dx++) {
            let x = cx + dx; // coordonata x
            let y = cy + dy; // coordonata y
            if (x >= 0 && x < W && y >= 0 && y < H) { // verific daca este in canvas
                let i = y * W * 4 + x * 4;
                // dreptunghi in stanga speakerului
                if (dx >= -6 && dx <= -3 && dy >= -4 && dy <= 4) {
                    v[i + 0] = 255;
                    v[i + 1] = 255;
                    v[i + 2] = 255;
                    v[i + 3] = 255;
                }
                // trapez pentru conul speakerului 
                if (dx >= -3 && dx <= 0) {
                    if ((dy >= -8 && dy <= -4) || (dy >= 4 && dy <= 8)) {
                        v[i + 0] = 255;
                        v[i + 1] = 255;
                        v[i + 2] = 255;
                        v[i + 3] = 255;
                    }
                }
                // arcuri pentru "undele sonore"
                let d = Math.sqrt(dx * dx + dy * dy);
                if (dx > 0 && d < 9 && d > 6) {
                    v[i + 0] = 255;
                    v[i + 1] = 255;
                    v[i + 2] = 255;
                    v[i + 3] = 255;
                }
            }
        }
    }
}

// desenez butoanele pentru clip
// primeste pixelii,pozitie,dimesniuni,tip
function desenareButon(v, bx, by, bw, bh, tip) {
    // centrul butoanelor
    let cx = bx + bw / 2;
    let cy = by + bh / 2;

    for (let y = by; y < by + bh; y++) { // inaltime buton
        for (let x = bx; x < bx + bw; x++) { // latime buton
            if (x >= 0 && x < W && y >= 0 && y < H) {
                let i = y * W * 4 + x * 4;
                let dx = x - cx;
                let dy = y - cy;
                let d = Math.sqrt(dx * dx + dy * dy);

                // fundal circular gri pentru buton
                if (d < bw / 2 - 2) { // raza e jumatate din latime - 2
                    // culoarea gri
                    v[i + 0] = 70;
                    v[i + 1] = 70;
                    v[i + 2] = 70;
                    v[i + 3] = 200;
                }
                 
                if (tip === 'prev') { // buton pentru clip anterior
                    // bara verticala din dreapta 
                    if (x >= cx + 8 && x <= cx + 12 && y >= cy - 10 && y <= cy + 10) {
                        v[i + 0] = 255;
                        v[i + 1] = 255;
                        v[i + 2] = 255;
                        v[i + 3] = 255;
                    }
                    // sageata spre stanga
                    let px = x - (cx - 5); // transalatez pentru a pozitiona sageata
                    let py = y - cy;
                    if (px >= -8 && px <= 8 && py >= -10 && py <= 10) {
                        if (px <= 0 && Math.abs(py) <= -px * 1.3) {
                            v[i + 0] = 255;
                            v[i + 1] = 255;
                            v[i + 2] = 255;
                            v[i + 3] = 255;
                        }
                    }
                }
                else if (tip === 'play') { // buton de pornire clip
                    let px = x - (cx - 3); // transalatie centrare triunghi
                    let py = y - cy;
                    if (px >= -5 && px <= 15 && py >= -13 && py <= 13) {
                        if (px >= 0 && Math.abs(py) <= 13 - px * 0.85) { // conditie forma triunghiulara
                            // culoare alb si opac
                            v[i + 0] = 255;
                            v[i + 1] = 255;
                            v[i + 2] = 255;
                            v[i + 3] = 255;
                        }
                    }
                }
                else if (tip === 'pause') { // buton pauza
                    // bara din stanga
                    if (x >= cx - 10 && x <= cx - 3 && y >= cy - 12 && y <= cy + 12) {
                        v[i + 0] = 255;
                        v[i + 1] = 255;
                        v[i + 2] = 255;
                        v[i + 3] = 255;
                    }
                    // bara dreapta
                    if (x >= cx + 3 && x <= cx + 10 && y >= cy - 12 && y <= cy + 12) {
                        v[i + 0] = 255;
                        v[i + 1] = 255;
                        v[i + 2] = 255;
                        v[i + 3] = 255;
                    }
                } 
                else if (tip === 'next') { // buton clip urmator ca la anterior doar sageata e invers
                    if (x >= cx - 12 && x <= cx - 8 && y >= cy - 10 && y <= cy + 10) {
                        v[i + 0] = 255;
                        v[i + 1] = 255;
                        v[i + 2] = 255;
                        v[i + 3] = 255;
                    }
                    let px = x - (cx + 5);
                    let py = y - cy;
                    if (px >= -8 && px <= 8 && py >= -10 && py <= 10) {
                        if (px >= 0 && Math.abs(py) <= px * 1.3) {
                            v[i + 0] = 255;
                            v[i + 1] = 255;
                            v[i + 2] = 255;
                            v[i + 3] = 255;
                        }
                    }
                }
            }
        }
    }
}

// desenez preview pentru urmarire clip cand se difuzeaza
function desenarePreview(v) {
    if (!previewCanvas) { // daca nu exista canvas cu previewul
        return;
    }

    let previewW = 160; // latime
    let previewH = 90; // inaltime
    let previewX = mx - previewW / 2; // pozitia x centrata pe mouse
    previewX = Math.max(10, Math.min(W - previewW - 10, previewX)); // limitez sa nu iasa din canvas
    let previewY = controale.progressBar.y - previewH - 40; // pozitie deasupra progress bar ului

    let tempContext = previewCanvas.getContext('2d'); // centrul canvasului de preview
    let previewData = tempContext.getImageData(0, 0, previewW, previewH); // extrag pixeli
    let pv = previewData.data;

    // copiez pixelii din preview pe canvasul principal
    for (let py = 0; py < previewH; py++) { // inaltime 
        for (let px = 0; px < previewW; px++) { // latime
            let pi = py * previewW * 4 + px * 4; // indicele pozitiei in vectorul de preview
            let x = Math.round(previewX + px); // x in canvas principal
            let y = Math.round(previewY + py); // y in canvas principal
            if (x >= 0 && x < W && y >= 0 && y < H) { // verific limitele
                let i = y * W * 4 + x * 4; // indicele de poz in canvas princ
                v[i + 0] = pv[pi + 0];
                v[i + 1] = pv[pi + 1];
                v[i + 2] = pv[pi + 2];
                v[i + 3] = 255;
            }
        }
    }

    // desenez chenar negru in jurul de cadrului de previzualizare
    for (let py = -5; py < previewH + 5; py++) { // extind zona cu 5px
        for (let px = -5; px < previewW + 5; px++) {
            let x = Math.round(previewX + px);
            let y = Math.round(previewY + py);
            if (x >= 0 && x < W && y >= 0 && y < H) {
                if (px < 0 || px >= previewW || py < 0 || py >= previewH) {
                    let i = y * W * 4 + x * 4;
                    // schimbare pixeli in negru si semi-transparent
                    v[i + 0] = 0;
                    v[i + 1] = 0;
                    v[i + 2] = 0;
                    v[i + 3] = 230;
                }
            }
        }
    }

    // progres in functie de unde se afla mouse-ul
    let progres = (mx - controale.progressBar.x) / controale.progressBar.w;
    let previewTime = progres * videoElement.duration; // timpul video la pozitia mouse-ului
    let timeText = formatTime(previewTime); // formatez timpul (min:sec)

    let textY = Math.round(previewY + previewH + 20); // y pentru text sub preview
    let textX = Math.round(previewX + previewW / 2); // x pentru text centrat
}

// formatare timp => min:sec
function formatTime(seconds) {
    if (isNaN(seconds)) return '0:00'; // daca nu e nr returnez 0:00
    let min = Math.floor(seconds / 60); // calcuelz minutele 
    let sec = Math.floor(seconds % 60); // calc secunde
    return min + ':' + (sec < 10 ? '0' : '') + sec; // returnez cele doua concatenate, 0 in fata daca sec < 10
}

// actualizez previzualizarea daca mouse-ul se misca pe progress bar
function actualizeazaPreview() {
    // verific pozitii mouse x si y
    if (mx >= controale.progressBar.x && mx <= controale.progressBar.x + controale.progressBar.w &&
        my >= controale.progressBar.y && my <= controale.progressBar.y + controale.progressBar.h) {
        let progres = (mx - controale.progressBar.x) / controale.progressBar.w; // procentul de progres
        let previewTime = progres * videoElement.duration; // calcul timp video

        if (timeoutPreview) { // daca exista deja timeout => anulez (debounce)
            clearTimeout(timeoutPreview);
        }

        timeoutPreview = setTimeout(() => { // timeout nou de 100ms
            // creez element video temporar si setez sursa ca video princ
            let tempVideo = document.createElement('video');
            tempVideo.src = videoElement.src;
            tempVideo.currentTime = previewTime; // timpul dorit 
            // eveniment cand clipul a ajuns la timpul setat 
            tempVideo.addEventListener('seeked', function () { 
                // canvas nou pt preview
                previewCanvas = document.createElement('canvas');
                previewCanvas.width = 160;
                previewCanvas.height = 90;
                let tempContext = previewCanvas.getContext('2d');
                tempContext.drawImage(tempVideo, 0, 0, 160, 90);
            }, { once: true }); // ascult o singura data 
        }, 100); // delay 100ms
    }
}

// verific daca s-a dat click pe un control
function verificaClickControale(x, y) {
    let cx = controale.butonPrevious.x + controale.butonPrevious.w / 2;
    let cy = controale.butonPrevious.y + controale.butonPrevious.h / 2;
    let d = Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy)); // distanta de la click la centru
    if (d < controale.butonPrevious.w / 2) {
        if (indexCurent > 0) { // daca nu e primul video 
            redareVideo(indexCurent - 1); // reda anteriorul
        } else {
            redareVideo(playlist.length - 1); // ultimul
        }
        return true;
    }

    // verific play / pause 
    cx = controale.butonPlay.x + controale.butonPlay.w / 2;
    cy = controale.butonPlay.y + controale.butonPlay.h / 2;
    d = Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy));
    if (d < controale.butonPlay.w / 2) {
        if (videoElement.paused) {
            videoElement.play();
        } else {
            videoElement.pause();
        }
        return true;
    }

    // verific next logica schimbata fata de previous
    cx = controale.butonNext.x + controale.butonNext.w / 2;
    cy = controale.butonNext.y + controale.butonNext.h / 2;
    d = Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy));
    if (d < controale.butonNext.w / 2) {
        if (indexCurent < playlist.length - 1) {
            redareVideo(indexCurent + 1);
        } else {
            redareVideo(0);
        }
        return true;
    }

    // verific click pe progress bar 
    if (x >= controale.progressBar.x && x <= controale.progressBar.x + controale.progressBar.w &&
        y >= controale.progressBar.y && y <= controale.progressBar.y + controale.progressBar.h) {
        let progres = (x - controale.progressBar.x) / controale.progressBar.w;
        videoElement.currentTime = progres * videoElement.duration; // sare la momenttull din clip
        return true;
    }

    // verific pentur volumm
    if (x >= controale.volumBar.x && x <= controale.volumBar.x + controale.volumBar.w &&
        y >= controale.volumBar.y && y <= controale.volumBar.y + controale.volumBar.h) {
        let volum = (x - controale.volumBar.x) / controale.volumBar.w;
        videoElement.volume = Math.max(0, Math.min(1, volum)); // setez volum
        return true;
    }

    return false;
}

// cu ajutorul func se reda un clip
function redareVideo(index) {
    if (index < 0 || index >= playlist.length) { // verific index valid de pozitie
        return;
    }
    indexCurent = index; // actualizez pozitia
    let fisier = playlist[index]; // obtin fisierul de pe poz index
    let url = URL.createObjectURL(fisier); // creare url tremporara pentru fisier
    videoElement.src = url; // setez sursa clipului
    videoElement.load(); // incarc
    videoElement.play(); // pornesc
    actualizarePlaylist(); // actualizez interfata
}

// se actualizeaza lista din dreapta jos cu clipurri
function actualizarePlaylist() {
    // selectez playlistul si pentru fiecare element fac modificari
    let container = document.querySelector('#playlist-container');
    container.innerHTML = '';
    playlist.forEach((fisier, index) => {
        // creez 2 spanuri pentru a separa titlul(continutul) de buton(actiuni)
        let item = document.createElement('span');
        item.className = 'playlist-item';
        item.draggable = true;
        item.dataset.index = index;
        if (index === indexCurent) {
            item.classList.add('active');
        }

        let titlu = document.createElement('span');
        titlu.className = 'video-title';
        titlu.textContent = fisier.name;

        // adaug buton stergere pentru fiecare clip din playlist
        let butonStergere = document.createElement('button');
        butonStergere.className = 'delete-btn';
        butonStergere.textContent = 'Sterge';
        butonStergere.style.backgroundColor = '#ef4444';
        butonStergere.style.color = 'white';
        butonStergere.style.border = 'none';
        butonStergere.style.padding = '6px 12px';
        butonStergere.style.borderRadius = '4px';
        butonStergere.style.cursor = 'pointer';
        butonStergere.style.fontSize = '14px';

        // la intrarea mouse ului pe buton se face rosu inchis
        butonStergere.addEventListener('mouseenter', e => {
            butonStergere.style.backgroundColor = '#dc2626';
        });
        // la iesire revine la original
        butonStergere.addEventListener('mouseleave', e => {
            butonStergere.style.backgroundColor = '#ef4444';
        });

        // adaug titlul si butonul
        item.appendChild(titlu);
        item.appendChild(butonStergere);
        container.appendChild(item);

        // tratare eveniment click
        item.addEventListener('click', e => {
            if (e.target.closest('.delete-btn')) {
                stergereFisier(index);
            } else {
                redareVideo(index);
            }
        });

        // evenimente pentru drag and drop : inceput,sfarsit,peste item
        item.addEventListener('dragstart', e => {
            elementTragere = item;
            item.classList.add('opacity-50');
            e.dataTransfer.effectAllowed = 'move';
        });

        item.addEventListener('dragend', e => {
            item.classList.remove('opacity-50');
            document.querySelectorAll('.playlist-item').forEach(el => {
                el.classList.remove('drag-over-target');
            });
        });

        item.addEventListener('dragover', e => {
            e.preventDefault();
            e.dataTransfer.dropEffect = 'move';
            if (elementTragere && elementTragere !== item) {
                item.classList.add('drag-over-target');
            }
        });

        item.addEventListener('dragleave', e => {
            item.classList.remove('drag-over-target');
        });

        item.addEventListener('drop', e => {
            e.preventDefault();
            item.classList.remove('drag-over-target');
            if (elementTragere && elementTragere !== item) {
                let indexVechi = parseInt(elementTragere.dataset.index);
                let indexNou = parseInt(item.dataset.index);
                let fisierMutat = playlist[indexVechi];
                playlist.splice(indexVechi, 1);
                playlist.splice(indexNou, 0, fisierMutat);
                if (indexCurent === indexVechi) {
                    indexCurent = indexNou;
                } else if (indexVechi < indexCurent && indexNou >= indexCurent) {
                    indexCurent--;
                } else if (indexVechi > indexCurent && indexNou <= indexCurent) {
                    indexCurent++;
                }
                actualizarePlaylist();
            }
        });
    });
}

// stergerea fisierului din playlist
function stergereFisier(index) {
    playlist.splice(index, 1);
    if (index === indexCurent) {
        if (playlist.length > 0) {
            redareVideo(Math.min(index, playlist.length - 1));
        } else {
            indexCurent = -1;
            videoElement.pause();
            videoElement.src = '';
            context.clearRect(0, 0, W, H);
            context.fillStyle = '#1f2937';
            context.fillRect(0, 0, W, H);
            context.fillStyle = '#34d399';
            context.font = '24px Arial';
            context.textAlign = 'center';
            context.fillText('Adauga fisiere video pentru a incepe', W / 2, H / 2);
        }
    } else if (index < indexCurent) {
        indexCurent--;
    }
    actualizarePlaylist();
}

// adauga fisier in playlist din file explorer 
function adaugareFisiere(fisiere) {
    for (let fisier of fisiere) { // parcurg lista fisiere
        if (fisier.type.startsWith('video/')) { // verific ca e fisier video
            playlist.push(fisier);
        }
    }
    actualizarePlaylist(); // actualizez playlist
    if (playlist.length > 0 && indexCurent === -1) { // daca sunt clipuri in playlist si nu se reda nimic
        redareVideo(0); // redau primul clip
    }
}

// func principala
function aplicatie() {
    canvas = document.querySelector('#video-canvas');
    context = canvas.getContext('2d');
    videoElement = document.querySelector('video');
    videoElement.style.display = 'none';
    // elementul canvas din html
    W = canvas.width;
    H = canvas.height;

    //pozitii controale si butoane
    calculeazaPozitiiControale();
    // culori fundal si dreptunghi
    context.fillStyle = '#1f2937';
    context.fillRect(0, 0, W, H);
    context.fillStyle = '#34d399';
    context.font = '24px Arial';
    context.textAlign = 'center';
    context.fillText('Adauga fisiere video pentru a incepe', W / 2, H / 2);

    // miscarea mouseului pe pagina html obtin pozitiile si actualizez daca e pe progress bar
    document.addEventListener('mousemove', e => {
        let rect = canvas.getBoundingClientRect();
        mx = Math.round((e.clientX - rect.left) * (W / rect.width));
        my = Math.round((e.clientY - rect.top) * (H / rect.height));
        actualizeazaPreview();
    });

    // mouse intra in canvas, paraseste setez acele var booleene
    canvas.addEventListener('mouseenter', e => {
        mouseInCanvas = true;
    });

    canvas.addEventListener('mouseleave', e => {
        mouseInCanvas = false;
        previewCanvas = null;
    });

    // eveniment schimbare efecte
    let selectEfect = document.querySelector('#efect-select');
    selectEfect.addEventListener('change', e => {
        efectCurent = e.target.value;
    });

    let zonaAdaugare = document.querySelector('#drag-and-drop');
    let inputFisier = document.querySelector('#file-input');

    // deschid dialogul de selectare a fisierelor 
    zonaAdaugare.addEventListener('click', function (e) {
        inputFisier.click();
    });

    inputFisier.addEventListener('change', e => {
        if (e.target.files.length > 0) { // selectez fisierele si le adaug in playlist
            adaugareFisiere(e.target.files);
            inputFisier.value = '';
        }
    });

    zonaAdaugare.addEventListener('dragover', e => {
        e.preventDefault();
        zonaAdaugare.style.borderColor = '#34d399';
        zonaAdaugare.style.backgroundColor = '#1f2937';
    });

    zonaAdaugare.addEventListener('dragleave', e => {
        zonaAdaugare.style.borderColor = '#4b5563';
        zonaAdaugare.style.backgroundColor = '#273041';
    });

    zonaAdaugare.addEventListener('drop', e => {
        e.preventDefault();
        zonaAdaugare.style.borderColor = '#4b5563';
        zonaAdaugare.style.backgroundColor = '#273041';
        adaugareFisiere(e.dataTransfer.files);
    });

    // incarc metadatele clipului
    videoElement.addEventListener('loadedmetadata', e => {
        W = canvas.width = videoElement.videoWidth;
        H = canvas.height = videoElement.videoHeight;
        calculeazaPozitiiControale();
    });

    // se termina clipul
    videoElement.addEventListener('ended', e => {
        if (indexCurent < playlist.length - 1) {
            redareVideo(indexCurent + 1);
        } else {
            redareVideo(0);
        }
    });

    // oprire si pornire clip la click pe cadrul canvas
    canvas.addEventListener('click', e => {
        if (playlist.length === 0) {
            return;
        }
        let rect = canvas.getBoundingClientRect();
        let x = Math.round((e.clientX - rect.left) * (W / rect.width));
        let y = Math.round((e.clientY - rect.top) * (H / rect.height));

        if (!verificaClickControale(x, y)) {
            if (videoElement.paused) {
                videoElement.play();
            } else {
                videoElement.pause();
            }
        }
    });

    setInterval(desenare, 30); // porneste bucla de desenare la interval de 30ms pentru fiecare cadru din video astfel incat sa nu fie o simpla imagine inghetata
}

document.addEventListener('DOMContentLoaded', aplicatie); // initializez la incarcarea paginii