The video editor is broken fix it and other bugs, write the full code though with the fix code: <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enhanced Video Editor</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            background-color: #191919;
            color: #e0e0e0;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
        }
        h1 {
            text-align: center;
            margin-bottom: 30px;
        }
        #videoContainer {
            width: 100%;
            background-color: #2c2c2c;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 20px;
            position: relative;
        }
        #videoPlayer {
            width: 100%;
            display: block;
        }
        #playButton {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 48px;
            background: rgba(0,0,0,0.5);
            border: none;
            color: white;
            padding: 20px;
            border-radius: 50%;
            cursor: pointer;
        }
        #timeline {
            height: 100px;
            background-color: #2c2c2c;
            border-radius: 8px;
            margin-bottom: 20px;
            position: relative;
            overflow-x: auto;
            white-space: nowrap;
        }
        .clip {
            display: inline-block;
            height: 80px;
            background-color: #3a3a3a;
            margin: 10px 5px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
            position: relative;
        }
        .clip:hover {
            background-color: #4a4a4a;
        }
        .clip.fade {
            box-shadow: 0 0 0 2px #007bff;
        }
        .clip img, .clip video {
            height: 100%;
            width: auto;
            border-radius: 4px;
        }
        .clipDuration {
            position: absolute;
            bottom: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.7);
            padding: 2px 5px;
            font-size: 12px;
            border-radius: 0 0 4px 0;
        }
        #uploadButton {
            display: block;
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: #ffffff;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            margin-bottom: 20px;
        }
        #uploadButton:hover {
            background-color: #0056b3;
        }
        #timelineProgress {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 2px;
            background-color: #ff0000;
            z-index: 10;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Enhanced Video Editor</h1>
        <div id="videoContainer">
            <video id="videoPlayer"></video>
            <button id="playButton">▶</button>
        </div>
        <input type="file" id="fileInput" accept="video/*,image/*" multiple style="display: none;">
        <button id="uploadButton">Upload Clips/Photos</button>
        <div id="timeline">
            <div id="timelineProgress"></div>
        </div>
    </div>

    <script>
        const fileInput = document.getElementById('fileInput');
        const uploadButton = document.getElementById('uploadButton');
        const timeline = document.getElementById('timeline');
        const videoPlayer = document.getElementById('videoPlayer');
        const timelineProgress = document.getElementById('timelineProgress');
        const playButton = document.getElementById('playButton');

        let clips = [];
        let totalDuration = 0;
        let isPlaying = false;

        uploadButton.addEventListener('click', () => fileInput.click());

        fileInput.addEventListener('change', (e) => {
            const files = e.target.files;
            for (let file of files) {
                const clip = document.createElement('div');
                clip.className = 'clip';
                if (file.type.startsWith('video/')) {
                    const video = document.createElement('video');
                    video.src = URL.createObjectURL(file);
                    video.onloadedmetadata = () => {
                        clip.style.width = `${video.duration * 20}px`;
                        clip.innerHTML += `<div class="clipDuration">${video.duration.toFixed(1)}s</div>`;
                        totalDuration += video.duration;
                        updateTimelineWidth();
                    };
                    clip.appendChild(video);
                } else if (file.type.startsWith('image/')) {
                    const img = document.createElement('img');
                    img.src = URL.createObjectURL(file);
                    clip.style.width = '100px';
                    clip.innerHTML += '<div class="clipDuration">3.0s</div>';
                    clip.appendChild(img);
                    totalDuration += 3;
                    updateTimelineWidth();
                }
                clip.addEventListener('dblclick', toggleFade);
                timeline.appendChild(clip);
                clips.push(clip);
            }
            updateVideo();
        });

        function toggleFade() {
            this.classList.toggle('fade');
            updateVideo();
        }

        function updateTimelineWidth() {
            timeline.style.width = `${totalDuration * 20}px`;
        }

        function updateVideo() {
            const videoSources = clips.map(clip => ({
                src: clip.querySelector('video, img').src,
                type: clip.querySelector('video') ? 'video' : 'image',
                fade: clip.classList.contains('fade'),
                duration: clip.querySelector('video') ? 
                    parseFloat(clip.querySelector('.clipDuration').textContent) :
                    3
            }));

            if (videoSources.length > 0) {
                createVideoFromSources(videoSources);
            }
        }

        async function createVideoFromSources(sources) {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            const tempVideo = document.createElement('video');

            canvas.width = 640;
            canvas.height = 360;

            const stream = canvas.captureStream();
            const mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
            const chunks = [];

            mediaRecorder.ondataavailable = (e) => chunks.push(e.data);
            mediaRecorder.onstop = () => {
                const blob = new Blob(chunks, { type: 'video/webm' });
                videoPlayer.src = URL.createObjectURL(blob);
            };

            mediaRecorder.start();

            let currentTime = 0;
            for (let source of sources) {
                await new Promise((resolve) => {
                    if (source.type === 'video') {
                        tempVideo.src = source.src;
                        tempVideo.onloadedmetadata = () => {
                            tempVideo.currentTime = 0;
                            tempVideo.play();
                            const drawFrame = () => {
                                if (tempVideo.currentTime < tempVideo.duration) {
                                    ctx.drawImage(tempVideo, 0, 0, canvas.width, canvas.height);
                                    if (source.fade) {
                                        const alpha = tempVideo.currentTime < 1 ? tempVideo.currentTime :
                                                     tempVideo.duration - tempVideo.currentTime < 1 ? tempVideo.duration - tempVideo.currentTime :
                                                     1;
                                        ctx.fillStyle = `rgba(0, 0, 0, ${1 - alpha})`;
                                        ctx.fillRect(0, 0, canvas.width, canvas.height);
                                    }
                                    currentTime += 1/60;
                                    requestAnimationFrame(drawFrame);
                                } else {
                                    resolve();
                                }
                            };
                            drawFrame();
                        };
                    } else {
                        const img = new Image();
                        img.onload = () => {
                            let startTime = performance.now();
                            const drawFrame = () => {
                                const elapsed = (performance.now() - startTime) / 1000;
                                if (elapsed < source.duration) {
                                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                                    if (source.fade) {
                                        const alpha = elapsed < 1 ? elapsed :
                                                     source.duration - elapsed < 1 ? source.duration - elapsed :
                                                     1;
                                        ctx.fillStyle = `rgba(0, 0, 0, ${1 - alpha})`;
                                        ctx.fillRect(0, 0, canvas.width, canvas.height);
                                    }
                                    currentTime += 1/60;
                                    requestAnimationFrame(drawFrame);
                                } else {
                                    resolve();
                                }
                            };
                            drawFrame();
                        };
                        img.src = source.src;
                    }
                });
            }

            mediaRecorder.stop();
        }

        function updateTimelineProgress(currentTime) {
            const progress = (currentTime / totalDuration) * timeline.offsetWidth;
            timelineProgress.style.left = `${progress}px`;
        }

        videoPlayer.addEventListener('timeupdate', () => {
            updateTimelineProgress(videoPlayer.currentTime);
        });

        playButton.addEventListener('click', () => {
            if (isPlaying) {
                videoPlayer.pause();
                playButton.textContent = '▶';
            } else {
                videoPlayer.play();
                playButton.textContent = '⏸';
            }
            isPlaying = !isPlaying;
        });

        timeline.addEventListener('click', (e) => {
            const rect = timeline.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const clickedTime = (x / timeline.offsetWidth) * totalDuration;
            videoPlayer.currentTime = clickedTime;
            updateTimelineProgress(clickedTime);
        });

        timelineProgress.addEventListener('mousedown', (e) => {
            e.stopPropagation();
            const move = (moveEvent) => {
                const rect = timeline.getBoundingClientRect();
                const x = moveEvent.clientX - rect.left;
                const clickedTime = (x / timeline.offsetWidth) * totalDuration;
                videoPlayer.currentTime = clickedTime;
                updateTimelineProgress(clickedTime);
            };
            
            const up = () => {
                document.removeEventListener('mousemove', move);
                document.removeEventListener('mouseup', up);
            };
            
            document.addEventListener('mousemove', move);
            document.addEventListener('mouseup', up);
        });
    </script>
</body>
</html>