Ideone.com

fork download

copy

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>MelindaAI AutoVideo - Advanced Video Creator</title>
  <!-- Include GSAP from CDN -->
  <script src="https://c...content-available-to-author-only...e.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
  <!-- Include CCapture.js from CDN -->
  <script src="https://c...content-available-to-author-only...r.net/npm/ccapture.js@1.1.10/build/CCapture.all.min.js"></script>
  <!-- Include ffmpeg.wasm from CDN -->
  <script src="https://c...content-available-to-author-only...r.net/npm/@ffmpeg/ffmpeg@0.11.5/dist/ffmpeg.min.js"></script>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #f9fafb;
    }
    #app {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    header {
      background-color: #2d3748;
      color: #edf2f7;
      padding: 20px;
      text-align: center;
    }
    main {
      flex: 1;
      display: flex;
      overflow: hidden;
    }
    #editor {
      width: 300px;
      background-color: #edf2f7;
      padding: 20px;
      overflow-y: auto;
    }
    #media-section, #slide-section, #audio-section {
      margin-bottom: 20px;
    }
    h2 {
      margin-top: 0;
    }
    #media-gallery, #slide-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .media-item, .slide-item {
      width: 80px;
      height: 80px;
      background-size: cover;
      background-position: center;
      border: 2px solid #cbd5e0;
      cursor: pointer;
      position: relative;
    }
    .slide-item .remove-btn {
      position: absolute;
      top: -10px;
      right: -10px;
      background-color: #e53e3e;
      color: #fff;
      border: none;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
    #preview {
      flex: 1;
      padding: 20px;
      display: flex;
      flex-direction: column;
    }
    #canvas {
      flex: 1;
      background-color: #000;
    }
    #controls {
      margin-top: 10px;
      text-align: center;
    }
    #controls button {
      padding: 10px 20px;
      margin: 0 5px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div id="app">
    <header>
      <h1>MelindaAI AutoVideo - Advanced Video Creator</h1>
    </header>
    <main>
      <section id="editor">
        <div id="media-section">
          <h2>Media Library</h2>
          <input type="file" id="media-input" accept="image/*,video/*" multiple>
          <div id="media-gallery"></div>
        </div>
        <div id="slide-section">
          <h2>Slides</h2>
          <button id="new-slide-btn">Add Slide</button>
          <div id="slide-list"></div>
        </div>
        <div id="audio-section">
          <h2>Audio Settings</h2>
          <label>Background Music:</label>
          <input type="file" id="background-music-input" accept="audio/*"><br><br>
          <label>Voiceover:</label>
          <input type="file" id="voiceover-input" accept="audio/*">
        </div>
      </section>
      <section id="preview">
        <h2>Preview</h2>
        <canvas id="canvas"></canvas>
        <div id="controls">
          <button id="play-btn">Play</button>
          <button id="stop-btn" disabled>Stop</button>
          <button id="download-btn" disabled>Download Video</button>
        </div>
      </section>
    </main>
  </div>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      // Elements
      const mediaInput = document.getElementById('media-input');
      const mediaGallery = document.getElementById('media-gallery');
      const slideList = document.getElementById('slide-list');
      const newSlideBtn = document.getElementById('new-slide-btn');
      const playBtn = document.getElementById('play-btn');
      const stopBtn = document.getElementById('stop-btn');
      const downloadBtn = document.getElementById('download-btn');
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      const canvasWidth = 1280;
      const canvasHeight = 720;
      canvas.width = canvasWidth;
      canvas.height = canvasHeight;
 
      const backgroundMusicInput = document.getElementById('background-music-input');
      const voiceoverInput = document.getElementById('voiceover-input');
 
      // Variables
      let mediaItems = [];
      let slides = [];
      let isPlaying = false;
      let currentSlideIndex = 0;
      let capturer = null;
      let recording = false;
      const frameRate = 30;
      let mediaRecorder;
      let recordedChunks = [];
      let backgroundMusic = null;
      let voiceover = null;
 
      // Event Listeners
      mediaInput.addEventListener('change', handleMediaInput);
      newSlideBtn.addEventListener('click', () => addSlide(null));
      playBtn.addEventListener('click', startPresentation);
      stopBtn.addEventListener('click', stopPresentation);
      downloadBtn.addEventListener('click', downloadVideo);
 
      backgroundMusicInput.addEventListener('change', handleBackgroundMusicInput);
      voiceoverInput.addEventListener('change', handleVoiceoverInput);
 
      function handleMediaInput(event) {
        const files = event.target.files;
        for (let file of files) {
          const url = URL.createObjectURL(file);
          const mediaItem = {
            file,
            url,
            type: file.type.startsWith('video/') ? 'video' : 'image',
          };
          mediaItems.push(mediaItem);
          displayMediaItem(mediaItem);
        }
      }
 
      function displayMediaItem(mediaItem) {
        const div = document.createElement('div');
        div.classList.add('media-item');
        div.style.backgroundImage = `url(${mediaItem.url})`;
        div.addEventListener('click', () => addSlide(mediaItem));
        mediaGallery.appendChild(div);
      }
 
      function addSlide(mediaItem) {
        const slide = {
          mediaItem,
          duration: 5,
          title: 'Title Here',
          subtitle: 'Subtitle Here',
          kenBurns: true,
        };
        slides.push(slide);
        displaySlideItem(slide);
      }
 
      function displaySlideItem(slide) {
        const div = document.createElement('div');
        div.classList.add('slide-item');
        if (slide.mediaItem) {
          div.style.backgroundImage = `url(${slide.mediaItem.url})`;
        } else {
          div.style.backgroundColor = '#cbd5e0';
        }
 
        const removeBtn = document.createElement('button');
        removeBtn.classList.add('remove-btn');
        removeBtn.textContent = '×';
        removeBtn.addEventListener('click', (e) => {
          e.stopPropagation();
          removeSlide(slide);
        });
        div.appendChild(removeBtn);
 
        div.addEventListener('click', () => editSlide(slide));
 
        slideList.appendChild(div);
      }
 
      function removeSlide(slide) {
        const index = slides.indexOf(slide);
        if (index > -1) {
          slides.splice(index, 1);
          renderSlideList();
        }
      }
 
      function renderSlideList() {
        slideList.innerHTML = '';
        slides.forEach((slide) => displaySlideItem(slide));
      }
 
      function editSlide(slide) {
        const title = prompt('Enter title:', slide.title);
        const subtitle = prompt('Enter subtitle:', slide.subtitle);
        const duration = prompt('Enter duration (seconds):', slide.duration);
        const kenBurns = confirm('Apply Ken Burns effect?');
 
        if (title !== null) slide.title = title;
        if (subtitle !== null) slide.subtitle = subtitle;
        if (duration !== null) slide.duration = parseFloat(duration) || 5;
        slide.kenBurns = kenBurns;
      }
 
      function handleBackgroundMusicInput(event) {
        const file = event.target.files[0];
        if (file) {
          const url = URL.createObjectURL(file);
          backgroundMusic = new Audio(url);
          backgroundMusic.loop = true;
          backgroundMusic.crossOrigin = 'anonymous';
        }
      }
 
      function handleVoiceoverInput(event) {
        const file = event.target.files[0];
        if (file) {
          const url = URL.createObjectURL(file);
          voiceover = new Audio(url);
          voiceover.crossOrigin = 'anonymous';
        }
      }
 
      function startPresentation() {
        if (isPlaying || slides.length === 0) return;
        isPlaying = true;
        playBtn.disabled = true;
        stopBtn.disabled = false;
        downloadBtn.disabled = true;
 
        // Play audio
        if (backgroundMusic) backgroundMusic.play();
        if (voiceover) voiceover.play();
 
        // Capture streams
        const canvasStream = canvas.captureStream(frameRate);
        const audioTracks = [];
 
        if (backgroundMusic && backgroundMusic.captureStream) {
          const bgMusicStream = backgroundMusic.captureStream();
          audioTracks.push(...bgMusicStream.getAudioTracks());
        }
 
        if (voiceover && voiceover.captureStream) {
          const voiceoverStream = voiceover.captureStream();
          audioTracks.push(...voiceoverStream.getAudioTracks());
        }
 
        const combinedStream = new MediaStream([...canvasStream.getVideoTracks(), ...audioTracks]);
        mediaRecorder = new MediaRecorder(combinedStream, { mimeType: 'video/webm; codecs=vp9' });
        recordedChunks = [];
 
        mediaRecorder.ondataavailable = (event) => {
          if (event.data.size > 0) {
            recordedChunks.push(event.data);
          }
        };
 
        mediaRecorder.onstop = () => {
          const blob = new Blob(recordedChunks, { type: 'video/webm' });
          const url = URL.createObjectURL(blob);
          downloadBtn.href = url;
          downloadBtn.download = 'presentation.webm';
          downloadBtn.disabled = false;
          alert('Your video is ready to download.');
        };
 
        mediaRecorder.start();
        recording = true;
 
        currentSlideIndex = 0;
        renderFrame();
      }
 
      function stopPresentation() {
        if (!isPlaying) return;
        isPlaying = false;
        playBtn.disabled = false;
        stopBtn.disabled = true;
 
        if (backgroundMusic) backgroundMusic.pause();
        if (voiceover) voiceover.pause();
 
        mediaRecorder.stop();
        recording = false;
      }
 
      function renderFrame() {
        if (!isPlaying) return;
        const slide = slides[currentSlideIndex];
        const totalFrames = slide.duration * frameRate;
        const frameIndex = (slide.frameIndex || 0) + 1;
        slide.frameIndex = frameIndex;
 
        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
 
        if (slide.mediaItem && slide.mediaItem.type === 'image') {
          renderImageSlide(slide, frameIndex / totalFrames);
        } else if (slide.mediaItem && slide.mediaItem.type === 'video') {
          renderVideoSlide(slide);
        } else {
          ctx.fillStyle = '#000';
          ctx.fillRect(0, 0, canvasWidth, canvasHeight);
        }
 
        drawText(slide);
 
        if (recording) {
          capturer.capture(canvas);
        }
 
        if (frameIndex >= totalFrames) {
          slide.frameIndex = 0;
          currentSlideIndex++;
          if (currentSlideIndex >= slides.length) {
            stopPresentation();
            return;
          }
        }
 
        requestAnimationFrame(renderFrame);
      }
 
      function renderImageSlide(slide, progress) {
        const img = new Image();
        img.src = slide.mediaItem.url;
        img.onload = () => {
          let scale = 1;
          let x = 0;
          let y = 0;
          if (slide.kenBurns) {
            scale = 1 + 0.2 * progress;
            x = (canvasWidth - img.width * scale) / 2;
            y = (canvasHeight - img.height * scale) / 2;
          }
          ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
        };
      }
 
      function renderVideoSlide(slide) {
        if (!slide.videoElement) {
          const video = document.createElement('video');
          video.src = slide.mediaItem.url;
          video.crossOrigin = 'anonymous';
          video.load();
          video.play();
          slide.videoElement = video;
        }
        const video = slide.videoElement;
        ctx.drawImage(video, 0, 0, canvasWidth, canvasHeight);
      }
 
      function drawText(slide) {
        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
        ctx.fillRect(0, canvasHeight - 150, canvasWidth, 150);
        ctx.fillStyle = '#fff';
        ctx.font = 'bold 48px Arial';
        ctx.textAlign = 'center';
        ctx.fillText(slide.title, canvasWidth / 2, canvasHeight - 100);
        ctx.font = '32px Arial';
        ctx.fillText(slide.subtitle, canvasWidth / 2, canvasHeight - 50);
      }
 
      function downloadVideo() {
        alert('Your video is ready for download.');
      }
    });
  </script>
</body>
</html>

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgPG1ldGEgY2hhcnNldD0iVVRGLTgiPgogIDx0aXRsZT5NZWxpbmRhQUkgQXV0b1ZpZGVvIC0gQWR2YW5jZWQgVmlkZW8gQ3JlYXRvcjwvdGl0bGU+CiAgPCEtLSBJbmNsdWRlIEdTQVAgZnJvbSBDRE4gLS0+CiAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vYy4uLmNvbnRlbnQtYXZhaWxhYmxlLXRvLWF1dGhvci1vbmx5Li4uZS5jb20vYWpheC9saWJzL2dzYXAvMy4xMS41L2dzYXAubWluLmpzIj48L3NjcmlwdD4KICA8IS0tIEluY2x1ZGUgQ0NhcHR1cmUuanMgZnJvbSBDRE4gLS0+CiAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vYy4uLmNvbnRlbnQtYXZhaWxhYmxlLXRvLWF1dGhvci1vbmx5Li4uci5uZXQvbnBtL2NjYXB0dXJlLmpzQDEuMS4xMC9idWlsZC9DQ2FwdHVyZS5hbGwubWluLmpzIj48L3NjcmlwdD4KICA8IS0tIEluY2x1ZGUgZmZtcGVnLndhc20gZnJvbSBDRE4gLS0+CiAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vYy4uLmNvbnRlbnQtYXZhaWxhYmxlLXRvLWF1dGhvci1vbmx5Li4uci5uZXQvbnBtL0BmZm1wZWcvZmZtcGVnQDAuMTEuNS9kaXN0L2ZmbXBlZy5taW4uanMiPjwvc2NyaXB0PgogIDxzdHlsZT4KICAgIGJvZHkgewogICAgICBtYXJnaW46IDA7CiAgICAgIGZvbnQtZmFtaWx5OiBBcmlhbCwgc2Fucy1zZXJpZjsKICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2Y5ZmFmYjsKICAgIH0KICAgICNhcHAgewogICAgICBkaXNwbGF5OiBmbGV4OwogICAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwogICAgICBoZWlnaHQ6IDEwMHZoOwogICAgfQogICAgaGVhZGVyIHsKICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzJkMzc0ODsKICAgICAgY29sb3I6ICNlZGYyZjc7CiAgICAgIHBhZGRpbmc6IDIwcHg7CiAgICAgIHRleHQtYWxpZ246IGNlbnRlcjsKICAgIH0KICAgIG1haW4gewogICAgICBmbGV4OiAxOwogICAgICBkaXNwbGF5OiBmbGV4OwogICAgICBvdmVyZmxvdzogaGlkZGVuOwogICAgfQogICAgI2VkaXRvciB7CiAgICAgIHdpZHRoOiAzMDBweDsKICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2VkZjJmNzsKICAgICAgcGFkZGluZzogMjBweDsKICAgICAgb3ZlcmZsb3cteTogYXV0bzsKICAgIH0KICAgICNtZWRpYS1zZWN0aW9uLCAjc2xpZGUtc2VjdGlvbiwgI2F1ZGlvLXNlY3Rpb24gewogICAgICBtYXJnaW4tYm90dG9tOiAyMHB4OwogICAgfQogICAgaDIgewogICAgICBtYXJnaW4tdG9wOiAwOwogICAgfQogICAgI21lZGlhLWdhbGxlcnksICNzbGlkZS1saXN0IHsKICAgICAgZGlzcGxheTogZmxleDsKICAgICAgZmxleC13cmFwOiB3cmFwOwogICAgICBnYXA6IDEwcHg7CiAgICB9CiAgICAubWVkaWEtaXRlbSwgLnNsaWRlLWl0ZW0gewogICAgICB3aWR0aDogODBweDsKICAgICAgaGVpZ2h0OiA4MHB4OwogICAgICBiYWNrZ3JvdW5kLXNpemU6IGNvdmVyOwogICAgICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiBjZW50ZXI7CiAgICAgIGJvcmRlcjogMnB4IHNvbGlkICNjYmQ1ZTA7CiAgICAgIGN1cnNvcjogcG9pbnRlcjsKICAgICAgcG9zaXRpb246IHJlbGF0aXZlOwogICAgfQogICAgLnNsaWRlLWl0ZW0gLnJlbW92ZS1idG4gewogICAgICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgICAgIHRvcDogLTEwcHg7CiAgICAgIHJpZ2h0OiAtMTBweDsKICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2U1M2UzZTsKICAgICAgY29sb3I6ICNmZmY7CiAgICAgIGJvcmRlcjogbm9uZTsKICAgICAgYm9yZGVyLXJhZGl1czogNTAlOwogICAgICB3aWR0aDogMjBweDsKICAgICAgaGVpZ2h0OiAyMHB4OwogICAgICBjdXJzb3I6IHBvaW50ZXI7CiAgICB9CiAgICAjcHJldmlldyB7CiAgICAgIGZsZXg6IDE7CiAgICAgIHBhZGRpbmc6IDIwcHg7CiAgICAgIGRpc3BsYXk6IGZsZXg7CiAgICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgICB9CiAgICAjY2FudmFzIHsKICAgICAgZmxleDogMTsKICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzAwMDsKICAgIH0KICAgICNjb250cm9scyB7CiAgICAgIG1hcmdpbi10b3A6IDEwcHg7CiAgICAgIHRleHQtYWxpZ246IGNlbnRlcjsKICAgIH0KICAgICNjb250cm9scyBidXR0b24gewogICAgICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgICAgIG1hcmdpbjogMCA1cHg7CiAgICAgIGZvbnQtc2l6ZTogMTZweDsKICAgIH0KICA8L3N0eWxlPgo8L2hlYWQ+Cjxib2R5PgogIDxkaXYgaWQ9ImFwcCI+CiAgICA8aGVhZGVyPgogICAgICA8aDE+TWVsaW5kYUFJIEF1dG9WaWRlbyAtIEFkdmFuY2VkIFZpZGVvIENyZWF0b3I8L2gxPgogICAgPC9oZWFkZXI+CiAgICA8bWFpbj4KICAgICAgPHNlY3Rpb24gaWQ9ImVkaXRvciI+CiAgICAgICAgPGRpdiBpZD0ibWVkaWEtc2VjdGlvbiI+CiAgICAgICAgICA8aDI+TWVkaWEgTGlicmFyeTwvaDI+CiAgICAgICAgICA8aW5wdXQgdHlwZT0iZmlsZSIgaWQ9Im1lZGlhLWlucHV0IiBhY2NlcHQ9ImltYWdlLyosdmlkZW8vKiIgbXVsdGlwbGU+CiAgICAgICAgICA8ZGl2IGlkPSJtZWRpYS1nYWxsZXJ5Ij48L2Rpdj4KICAgICAgICA8L2Rpdj4KICAgICAgICA8ZGl2IGlkPSJzbGlkZS1zZWN0aW9uIj4KICAgICAgICAgIDxoMj5TbGlkZXM8L2gyPgogICAgICAgICAgPGJ1dHRvbiBpZD0ibmV3LXNsaWRlLWJ0biI+QWRkIFNsaWRlPC9idXR0b24+CiAgICAgICAgICA8ZGl2IGlkPSJzbGlkZS1saXN0Ij48L2Rpdj4KICAgICAgICA8L2Rpdj4KICAgICAgICA8ZGl2IGlkPSJhdWRpby1zZWN0aW9uIj4KICAgICAgICAgIDxoMj5BdWRpbyBTZXR0aW5nczwvaDI+CiAgICAgICAgICA8bGFiZWw+QmFja2dyb3VuZCBNdXNpYzo8L2xhYmVsPgogICAgICAgICAgPGlucHV0IHR5cGU9ImZpbGUiIGlkPSJiYWNrZ3JvdW5kLW11c2ljLWlucHV0IiBhY2NlcHQ9ImF1ZGlvLyoiPjxicj48YnI+CiAgICAgICAgICA8bGFiZWw+Vm9pY2VvdmVyOjwvbGFiZWw+CiAgICAgICAgICA8aW5wdXQgdHlwZT0iZmlsZSIgaWQ9InZvaWNlb3Zlci1pbnB1dCIgYWNjZXB0PSJhdWRpby8qIj4KICAgICAgICA8L2Rpdj4KICAgICAgPC9zZWN0aW9uPgogICAgICA8c2VjdGlvbiBpZD0icHJldmlldyI+CiAgICAgICAgPGgyPlByZXZpZXc8L2gyPgogICAgICAgIDxjYW52YXMgaWQ9ImNhbnZhcyI+PC9jYW52YXM+CiAgICAgICAgPGRpdiBpZD0iY29udHJvbHMiPgogICAgICAgICAgPGJ1dHRvbiBpZD0icGxheS1idG4iPlBsYXk8L2J1dHRvbj4KICAgICAgICAgIDxidXR0b24gaWQ9InN0b3AtYnRuIiBkaXNhYmxlZD5TdG9wPC9idXR0b24+CiAgICAgICAgICA8YnV0dG9uIGlkPSJkb3dubG9hZC1idG4iIGRpc2FibGVkPkRvd25sb2FkIFZpZGVvPC9idXR0b24+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvc2VjdGlvbj4KICAgIDwvbWFpbj4KICA8L2Rpdj4KICA8c2NyaXB0PgogICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignRE9NQ29udGVudExvYWRlZCcsICgpID0+IHsKICAgICAgLy8gRWxlbWVudHMKICAgICAgY29uc3QgbWVkaWFJbnB1dCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdtZWRpYS1pbnB1dCcpOwogICAgICBjb25zdCBtZWRpYUdhbGxlcnkgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWVkaWEtZ2FsbGVyeScpOwogICAgICBjb25zdCBzbGlkZUxpc3QgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnc2xpZGUtbGlzdCcpOwogICAgICBjb25zdCBuZXdTbGlkZUJ0biA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCduZXctc2xpZGUtYnRuJyk7CiAgICAgIGNvbnN0IHBsYXlCdG4gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgncGxheS1idG4nKTsKICAgICAgY29uc3Qgc3RvcEJ0biA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdzdG9wLWJ0bicpOwogICAgICBjb25zdCBkb3dubG9hZEJ0biA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdkb3dubG9hZC1idG4nKTsKICAgICAgY29uc3QgY2FudmFzID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2NhbnZhcycpOwogICAgICBjb25zdCBjdHggPSBjYW52YXMuZ2V0Q29udGV4dCgnMmQnKTsKICAgICAgY29uc3QgY2FudmFzV2lkdGggPSAxMjgwOwogICAgICBjb25zdCBjYW52YXNIZWlnaHQgPSA3MjA7CiAgICAgIGNhbnZhcy53aWR0aCA9IGNhbnZhc1dpZHRoOwogICAgICBjYW52YXMuaGVpZ2h0ID0gY2FudmFzSGVpZ2h0OwoKICAgICAgY29uc3QgYmFja2dyb3VuZE11c2ljSW5wdXQgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnYmFja2dyb3VuZC1tdXNpYy1pbnB1dCcpOwogICAgICBjb25zdCB2b2ljZW92ZXJJbnB1dCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd2b2ljZW92ZXItaW5wdXQnKTsKCiAgICAgIC8vIFZhcmlhYmxlcwogICAgICBsZXQgbWVkaWFJdGVtcyA9IFtdOwogICAgICBsZXQgc2xpZGVzID0gW107CiAgICAgIGxldCBpc1BsYXlpbmcgPSBmYWxzZTsKICAgICAgbGV0IGN1cnJlbnRTbGlkZUluZGV4ID0gMDsKICAgICAgbGV0IGNhcHR1cmVyID0gbnVsbDsKICAgICAgbGV0IHJlY29yZGluZyA9IGZhbHNlOwogICAgICBjb25zdCBmcmFtZVJhdGUgPSAzMDsKICAgICAgbGV0IG1lZGlhUmVjb3JkZXI7CiAgICAgIGxldCByZWNvcmRlZENodW5rcyA9IFtdOwogICAgICBsZXQgYmFja2dyb3VuZE11c2ljID0gbnVsbDsKICAgICAgbGV0IHZvaWNlb3ZlciA9IG51bGw7CgogICAgICAvLyBFdmVudCBMaXN0ZW5lcnMKICAgICAgbWVkaWFJbnB1dC5hZGRFdmVudExpc3RlbmVyKCdjaGFuZ2UnLCBoYW5kbGVNZWRpYUlucHV0KTsKICAgICAgbmV3U2xpZGVCdG4uYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCAoKSA9PiBhZGRTbGlkZShudWxsKSk7CiAgICAgIHBsYXlCdG4uYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBzdGFydFByZXNlbnRhdGlvbik7CiAgICAgIHN0b3BCdG4uYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBzdG9wUHJlc2VudGF0aW9uKTsKICAgICAgZG93bmxvYWRCdG4uYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBkb3dubG9hZFZpZGVvKTsKCiAgICAgIGJhY2tncm91bmRNdXNpY0lucHV0LmFkZEV2ZW50TGlzdGVuZXIoJ2NoYW5nZScsIGhhbmRsZUJhY2tncm91bmRNdXNpY0lucHV0KTsKICAgICAgdm9pY2VvdmVySW5wdXQuYWRkRXZlbnRMaXN0ZW5lcignY2hhbmdlJywgaGFuZGxlVm9pY2VvdmVySW5wdXQpOwoKICAgICAgZnVuY3Rpb24gaGFuZGxlTWVkaWFJbnB1dChldmVudCkgewogICAgICAgIGNvbnN0IGZpbGVzID0gZXZlbnQudGFyZ2V0LmZpbGVzOwogICAgICAgIGZvciAobGV0IGZpbGUgb2YgZmlsZXMpIHsKICAgICAgICAgIGNvbnN0IHVybCA9IFVSTC5jcmVhdGVPYmplY3RVUkwoZmlsZSk7CiAgICAgICAgICBjb25zdCBtZWRpYUl0ZW0gPSB7CiAgICAgICAgICAgIGZpbGUsCiAgICAgICAgICAgIHVybCwKICAgICAgICAgICAgdHlwZTogZmlsZS50eXBlLnN0YXJ0c1dpdGgoJ3ZpZGVvLycpID8gJ3ZpZGVvJyA6ICdpbWFnZScsCiAgICAgICAgICB9OwogICAgICAgICAgbWVkaWFJdGVtcy5wdXNoKG1lZGlhSXRlbSk7CiAgICAgICAgICBkaXNwbGF5TWVkaWFJdGVtKG1lZGlhSXRlbSk7CiAgICAgICAgfQogICAgICB9CgogICAgICBmdW5jdGlvbiBkaXNwbGF5TWVkaWFJdGVtKG1lZGlhSXRlbSkgewogICAgICAgIGNvbnN0IGRpdiA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2RpdicpOwogICAgICAgIGRpdi5jbGFzc0xpc3QuYWRkKCdtZWRpYS1pdGVtJyk7CiAgICAgICAgZGl2LnN0eWxlLmJhY2tncm91bmRJbWFnZSA9IGB1cmwoJHttZWRpYUl0ZW0udXJsfSlgOwogICAgICAgIGRpdi5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsICgpID0+IGFkZFNsaWRlKG1lZGlhSXRlbSkpOwogICAgICAgIG1lZGlhR2FsbGVyeS5hcHBlbmRDaGlsZChkaXYpOwogICAgICB9CgogICAgICBmdW5jdGlvbiBhZGRTbGlkZShtZWRpYUl0ZW0pIHsKICAgICAgICBjb25zdCBzbGlkZSA9IHsKICAgICAgICAgIG1lZGlhSXRlbSwKICAgICAgICAgIGR1cmF0aW9uOiA1LAogICAgICAgICAgdGl0bGU6ICdUaXRsZSBIZXJlJywKICAgICAgICAgIHN1YnRpdGxlOiAnU3VidGl0bGUgSGVyZScsCiAgICAgICAgICBrZW5CdXJuczogdHJ1ZSwKICAgICAgICB9OwogICAgICAgIHNsaWRlcy5wdXNoKHNsaWRlKTsKICAgICAgICBkaXNwbGF5U2xpZGVJdGVtKHNsaWRlKTsKICAgICAgfQoKICAgICAgZnVuY3Rpb24gZGlzcGxheVNsaWRlSXRlbShzbGlkZSkgewogICAgICAgIGNvbnN0IGRpdiA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2RpdicpOwogICAgICAgIGRpdi5jbGFzc0xpc3QuYWRkKCdzbGlkZS1pdGVtJyk7CiAgICAgICAgaWYgKHNsaWRlLm1lZGlhSXRlbSkgewogICAgICAgICAgZGl2LnN0eWxlLmJhY2tncm91bmRJbWFnZSA9IGB1cmwoJHtzbGlkZS5tZWRpYUl0ZW0udXJsfSlgOwogICAgICAgIH0gZWxzZSB7CiAgICAgICAgICBkaXYuc3R5bGUuYmFja2dyb3VuZENvbG9yID0gJyNjYmQ1ZTAnOwogICAgICAgIH0KCiAgICAgICAgY29uc3QgcmVtb3ZlQnRuID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnYnV0dG9uJyk7CiAgICAgICAgcmVtb3ZlQnRuLmNsYXNzTGlzdC5hZGQoJ3JlbW92ZS1idG4nKTsKICAgICAgICByZW1vdmVCdG4udGV4dENvbnRlbnQgPSAnw5cnOwogICAgICAgIHJlbW92ZUJ0bi5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIChlKSA9PiB7CiAgICAgICAgICBlLnN0b3BQcm9wYWdhdGlvbigpOwogICAgICAgICAgcmVtb3ZlU2xpZGUoc2xpZGUpOwogICAgICAgIH0pOwogICAgICAgIGRpdi5hcHBlbmRDaGlsZChyZW1vdmVCdG4pOwoKICAgICAgICBkaXYuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCAoKSA9PiBlZGl0U2xpZGUoc2xpZGUpKTsKCiAgICAgICAgc2xpZGVMaXN0LmFwcGVuZENoaWxkKGRpdik7CiAgICAgIH0KCiAgICAgIGZ1bmN0aW9uIHJlbW92ZVNsaWRlKHNsaWRlKSB7CiAgICAgICAgY29uc3QgaW5kZXggPSBzbGlkZXMuaW5kZXhPZihzbGlkZSk7CiAgICAgICAgaWYgKGluZGV4ID4gLTEpIHsKICAgICAgICAgIHNsaWRlcy5zcGxpY2UoaW5kZXgsIDEpOwogICAgICAgICAgcmVuZGVyU2xpZGVMaXN0KCk7CiAgICAgICAgfQogICAgICB9CgogICAgICBmdW5jdGlvbiByZW5kZXJTbGlkZUxpc3QoKSB7CiAgICAgICAgc2xpZGVMaXN0LmlubmVySFRNTCA9ICcnOwogICAgICAgIHNsaWRlcy5mb3JFYWNoKChzbGlkZSkgPT4gZGlzcGxheVNsaWRlSXRlbShzbGlkZSkpOwogICAgICB9CgogICAgICBmdW5jdGlvbiBlZGl0U2xpZGUoc2xpZGUpIHsKICAgICAgICBjb25zdCB0aXRsZSA9IHByb21wdCgnRW50ZXIgdGl0bGU6Jywgc2xpZGUudGl0bGUpOwogICAgICAgIGNvbnN0IHN1YnRpdGxlID0gcHJvbXB0KCdFbnRlciBzdWJ0aXRsZTonLCBzbGlkZS5zdWJ0aXRsZSk7CiAgICAgICAgY29uc3QgZHVyYXRpb24gPSBwcm9tcHQoJ0VudGVyIGR1cmF0aW9uIChzZWNvbmRzKTonLCBzbGlkZS5kdXJhdGlvbik7CiAgICAgICAgY29uc3Qga2VuQnVybnMgPSBjb25maXJtKCdBcHBseSBLZW4gQnVybnMgZWZmZWN0PycpOwoKICAgICAgICBpZiAodGl0bGUgIT09IG51bGwpIHNsaWRlLnRpdGxlID0gdGl0bGU7CiAgICAgICAgaWYgKHN1YnRpdGxlICE9PSBudWxsKSBzbGlkZS5zdWJ0aXRsZSA9IHN1YnRpdGxlOwogICAgICAgIGlmIChkdXJhdGlvbiAhPT0gbnVsbCkgc2xpZGUuZHVyYXRpb24gPSBwYXJzZUZsb2F0KGR1cmF0aW9uKSB8fCA1OwogICAgICAgIHNsaWRlLmtlbkJ1cm5zID0ga2VuQnVybnM7CiAgICAgIH0KCiAgICAgIGZ1bmN0aW9uIGhhbmRsZUJhY2tncm91bmRNdXNpY0lucHV0KGV2ZW50KSB7CiAgICAgICAgY29uc3QgZmlsZSA9IGV2ZW50LnRhcmdldC5maWxlc1swXTsKICAgICAgICBpZiAoZmlsZSkgewogICAgICAgICAgY29uc3QgdXJsID0gVVJMLmNyZWF0ZU9iamVjdFVSTChmaWxlKTsKICAgICAgICAgIGJhY2tncm91bmRNdXNpYyA9IG5ldyBBdWRpbyh1cmwpOwogICAgICAgICAgYmFja2dyb3VuZE11c2ljLmxvb3AgPSB0cnVlOwogICAgICAgICAgYmFja2dyb3VuZE11c2ljLmNyb3NzT3JpZ2luID0gJ2Fub255bW91cyc7CiAgICAgICAgfQogICAgICB9CgogICAgICBmdW5jdGlvbiBoYW5kbGVWb2ljZW92ZXJJbnB1dChldmVudCkgewogICAgICAgIGNvbnN0IGZpbGUgPSBldmVudC50YXJnZXQuZmlsZXNbMF07CiAgICAgICAgaWYgKGZpbGUpIHsKICAgICAgICAgIGNvbnN0IHVybCA9IFVSTC5jcmVhdGVPYmplY3RVUkwoZmlsZSk7CiAgICAgICAgICB2b2ljZW92ZXIgPSBuZXcgQXVkaW8odXJsKTsKICAgICAgICAgIHZvaWNlb3Zlci5jcm9zc09yaWdpbiA9ICdhbm9ueW1vdXMnOwogICAgICAgIH0KICAgICAgfQoKICAgICAgZnVuY3Rpb24gc3RhcnRQcmVzZW50YXRpb24oKSB7CiAgICAgICAgaWYgKGlzUGxheWluZyB8fCBzbGlkZXMubGVuZ3RoID09PSAwKSByZXR1cm47CiAgICAgICAgaXNQbGF5aW5nID0gdHJ1ZTsKICAgICAgICBwbGF5QnRuLmRpc2FibGVkID0gdHJ1ZTsKICAgICAgICBzdG9wQnRuLmRpc2FibGVkID0gZmFsc2U7CiAgICAgICAgZG93bmxvYWRCdG4uZGlzYWJsZWQgPSB0cnVlOwoKICAgICAgICAvLyBQbGF5IGF1ZGlvCiAgICAgICAgaWYgKGJhY2tncm91bmRNdXNpYykgYmFja2dyb3VuZE11c2ljLnBsYXkoKTsKICAgICAgICBpZiAodm9pY2VvdmVyKSB2b2ljZW92ZXIucGxheSgpOwoKICAgICAgICAvLyBDYXB0dXJlIHN0cmVhbXMKICAgICAgICBjb25zdCBjYW52YXNTdHJlYW0gPSBjYW52YXMuY2FwdHVyZVN0cmVhbShmcmFtZVJhdGUpOwogICAgICAgIGNvbnN0IGF1ZGlvVHJhY2tzID0gW107CgogICAgICAgIGlmIChiYWNrZ3JvdW5kTXVzaWMgJiYgYmFja2dyb3VuZE11c2ljLmNhcHR1cmVTdHJlYW0pIHsKICAgICAgICAgIGNvbnN0IGJnTXVzaWNTdHJlYW0gPSBiYWNrZ3JvdW5kTXVzaWMuY2FwdHVyZVN0cmVhbSgpOwogICAgICAgICAgYXVkaW9UcmFja3MucHVzaCguLi5iZ011c2ljU3RyZWFtLmdldEF1ZGlvVHJhY2tzKCkpOwogICAgICAgIH0KCiAgICAgICAgaWYgKHZvaWNlb3ZlciAmJiB2b2ljZW92ZXIuY2FwdHVyZVN0cmVhbSkgewogICAgICAgICAgY29uc3Qgdm9pY2VvdmVyU3RyZWFtID0gdm9pY2VvdmVyLmNhcHR1cmVTdHJlYW0oKTsKICAgICAgICAgIGF1ZGlvVHJhY2tzLnB1c2goLi4udm9pY2VvdmVyU3RyZWFtLmdldEF1ZGlvVHJhY2tzKCkpOwogICAgICAgIH0KCiAgICAgICAgY29uc3QgY29tYmluZWRTdHJlYW0gPSBuZXcgTWVkaWFTdHJlYW0oWy4uLmNhbnZhc1N0cmVhbS5nZXRWaWRlb1RyYWNrcygpLCAuLi5hdWRpb1RyYWNrc10pOwogICAgICAgIG1lZGlhUmVjb3JkZXIgPSBuZXcgTWVkaWFSZWNvcmRlcihjb21iaW5lZFN0cmVhbSwgeyBtaW1lVHlwZTogJ3ZpZGVvL3dlYm07IGNvZGVjcz12cDknIH0pOwogICAgICAgIHJlY29yZGVkQ2h1bmtzID0gW107CgogICAgICAgIG1lZGlhUmVjb3JkZXIub25kYXRhYXZhaWxhYmxlID0gKGV2ZW50KSA9PiB7CiAgICAgICAgICBpZiAoZXZlbnQuZGF0YS5zaXplID4gMCkgewogICAgICAgICAgICByZWNvcmRlZENodW5rcy5wdXNoKGV2ZW50LmRhdGEpOwogICAgICAgICAgfQogICAgICAgIH07CgogICAgICAgIG1lZGlhUmVjb3JkZXIub25zdG9wID0gKCkgPT4gewogICAgICAgICAgY29uc3QgYmxvYiA9IG5ldyBCbG9iKHJlY29yZGVkQ2h1bmtzLCB7IHR5cGU6ICd2aWRlby93ZWJtJyB9KTsKICAgICAgICAgIGNvbnN0IHVybCA9IFVSTC5jcmVhdGVPYmplY3RVUkwoYmxvYik7CiAgICAgICAgICBkb3dubG9hZEJ0bi5ocmVmID0gdXJsOwogICAgICAgICAgZG93bmxvYWRCdG4uZG93bmxvYWQgPSAncHJlc2VudGF0aW9uLndlYm0nOwogICAgICAgICAgZG93bmxvYWRCdG4uZGlzYWJsZWQgPSBmYWxzZTsKICAgICAgICAgIGFsZXJ0KCdZb3VyIHZpZGVvIGlzIHJlYWR5IHRvIGRvd25sb2FkLicpOwogICAgICAgIH07CgogICAgICAgIG1lZGlhUmVjb3JkZXIuc3RhcnQoKTsKICAgICAgICByZWNvcmRpbmcgPSB0cnVlOwoKICAgICAgICBjdXJyZW50U2xpZGVJbmRleCA9IDA7CiAgICAgICAgcmVuZGVyRnJhbWUoKTsKICAgICAgfQoKICAgICAgZnVuY3Rpb24gc3RvcFByZXNlbnRhdGlvbigpIHsKICAgICAgICBpZiAoIWlzUGxheWluZykgcmV0dXJuOwogICAgICAgIGlzUGxheWluZyA9IGZhbHNlOwogICAgICAgIHBsYXlCdG4uZGlzYWJsZWQgPSBmYWxzZTsKICAgICAgICBzdG9wQnRuLmRpc2FibGVkID0gdHJ1ZTsKCiAgICAgICAgaWYgKGJhY2tncm91bmRNdXNpYykgYmFja2dyb3VuZE11c2ljLnBhdXNlKCk7CiAgICAgICAgaWYgKHZvaWNlb3Zlcikgdm9pY2VvdmVyLnBhdXNlKCk7CgogICAgICAgIG1lZGlhUmVjb3JkZXIuc3RvcCgpOwogICAgICAgIHJlY29yZGluZyA9IGZhbHNlOwogICAgICB9CgogICAgICBmdW5jdGlvbiByZW5kZXJGcmFtZSgpIHsKICAgICAgICBpZiAoIWlzUGxheWluZykgcmV0dXJuOwogICAgICAgIGNvbnN0IHNsaWRlID0gc2xpZGVzW2N1cnJlbnRTbGlkZUluZGV4XTsKICAgICAgICBjb25zdCB0b3RhbEZyYW1lcyA9IHNsaWRlLmR1cmF0aW9uICogZnJhbWVSYXRlOwogICAgICAgIGNvbnN0IGZyYW1lSW5kZXggPSAoc2xpZGUuZnJhbWVJbmRleCB8fCAwKSArIDE7CiAgICAgICAgc2xpZGUuZnJhbWVJbmRleCA9IGZyYW1lSW5kZXg7CgogICAgICAgIGN0eC5jbGVhclJlY3QoMCwgMCwgY2FudmFzV2lkdGgsIGNhbnZhc0hlaWdodCk7CgogICAgICAgIGlmIChzbGlkZS5tZWRpYUl0ZW0gJiYgc2xpZGUubWVkaWFJdGVtLnR5cGUgPT09ICdpbWFnZScpIHsKICAgICAgICAgIHJlbmRlckltYWdlU2xpZGUoc2xpZGUsIGZyYW1lSW5kZXggLyB0b3RhbEZyYW1lcyk7CiAgICAgICAgfSBlbHNlIGlmIChzbGlkZS5tZWRpYUl0ZW0gJiYgc2xpZGUubWVkaWFJdGVtLnR5cGUgPT09ICd2aWRlbycpIHsKICAgICAgICAgIHJlbmRlclZpZGVvU2xpZGUoc2xpZGUpOwogICAgICAgIH0gZWxzZSB7CiAgICAgICAgICBjdHguZmlsbFN0eWxlID0gJyMwMDAnOwogICAgICAgICAgY3R4LmZpbGxSZWN0KDAsIDAsIGNhbnZhc1dpZHRoLCBjYW52YXNIZWlnaHQpOwogICAgICAgIH0KCiAgICAgICAgZHJhd1RleHQoc2xpZGUpOwoKICAgICAgICBpZiAocmVjb3JkaW5nKSB7CiAgICAgICAgICBjYXB0dXJlci5jYXB0dXJlKGNhbnZhcyk7CiAgICAgICAgfQoKICAgICAgICBpZiAoZnJhbWVJbmRleCA+PSB0b3RhbEZyYW1lcykgewogICAgICAgICAgc2xpZGUuZnJhbWVJbmRleCA9IDA7CiAgICAgICAgICBjdXJyZW50U2xpZGVJbmRleCsrOwogICAgICAgICAgaWYgKGN1cnJlbnRTbGlkZUluZGV4ID49IHNsaWRlcy5sZW5ndGgpIHsKICAgICAgICAgICAgc3RvcFByZXNlbnRhdGlvbigpOwogICAgICAgICAgICByZXR1cm47CiAgICAgICAgICB9CiAgICAgICAgfQoKICAgICAgICByZXF1ZXN0QW5pbWF0aW9uRnJhbWUocmVuZGVyRnJhbWUpOwogICAgICB9CgogICAgICBmdW5jdGlvbiByZW5kZXJJbWFnZVNsaWRlKHNsaWRlLCBwcm9ncmVzcykgewogICAgICAgIGNvbnN0IGltZyA9IG5ldyBJbWFnZSgpOwogICAgICAgIGltZy5zcmMgPSBzbGlkZS5tZWRpYUl0ZW0udXJsOwogICAgICAgIGltZy5vbmxvYWQgPSAoKSA9PiB7CiAgICAgICAgICBsZXQgc2NhbGUgPSAxOwogICAgICAgICAgbGV0IHggPSAwOwogICAgICAgICAgbGV0IHkgPSAwOwogICAgICAgICAgaWYgKHNsaWRlLmtlbkJ1cm5zKSB7CiAgICAgICAgICAgIHNjYWxlID0gMSArIDAuMiAqIHByb2dyZXNzOwogICAgICAgICAgICB4ID0gKGNhbnZhc1dpZHRoIC0gaW1nLndpZHRoICogc2NhbGUpIC8gMjsKICAgICAgICAgICAgeSA9IChjYW52YXNIZWlnaHQgLSBpbWcuaGVpZ2h0ICogc2NhbGUpIC8gMjsKICAgICAgICAgIH0KICAgICAgICAgIGN0eC5kcmF3SW1hZ2UoaW1nLCB4LCB5LCBpbWcud2lkdGggKiBzY2FsZSwgaW1nLmhlaWdodCAqIHNjYWxlKTsKICAgICAgICB9OwogICAgICB9CgogICAgICBmdW5jdGlvbiByZW5kZXJWaWRlb1NsaWRlKHNsaWRlKSB7CiAgICAgICAgaWYgKCFzbGlkZS52aWRlb0VsZW1lbnQpIHsKICAgICAgICAgIGNvbnN0IHZpZGVvID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgndmlkZW8nKTsKICAgICAgICAgIHZpZGVvLnNyYyA9IHNsaWRlLm1lZGlhSXRlbS51cmw7CiAgICAgICAgICB2aWRlby5jcm9zc09yaWdpbiA9ICdhbm9ueW1vdXMnOwogICAgICAgICAgdmlkZW8ubG9hZCgpOwogICAgICAgICAgdmlkZW8ucGxheSgpOwogICAgICAgICAgc2xpZGUudmlkZW9FbGVtZW50ID0gdmlkZW87CiAgICAgICAgfQogICAgICAgIGNvbnN0IHZpZGVvID0gc2xpZGUudmlkZW9FbGVtZW50OwogICAgICAgIGN0eC5kcmF3SW1hZ2UodmlkZW8sIDAsIDAsIGNhbnZhc1dpZHRoLCBjYW52YXNIZWlnaHQpOwogICAgICB9CgogICAgICBmdW5jdGlvbiBkcmF3VGV4dChzbGlkZSkgewogICAgICAgIGN0eC5maWxsU3R5bGUgPSAncmdiYSgwLCAwLCAwLCAwLjUpJzsKICAgICAgICBjdHguZmlsbFJlY3QoMCwgY2FudmFzSGVpZ2h0IC0gMTUwLCBjYW52YXNXaWR0aCwgMTUwKTsKICAgICAgICBjdHguZmlsbFN0eWxlID0gJyNmZmYnOwogICAgICAgIGN0eC5mb250ID0gJ2JvbGQgNDhweCBBcmlhbCc7CiAgICAgICAgY3R4LnRleHRBbGlnbiA9ICdjZW50ZXInOwogICAgICAgIGN0eC5maWxsVGV4dChzbGlkZS50aXRsZSwgY2FudmFzV2lkdGggLyAyLCBjYW52YXNIZWlnaHQgLSAxMDApOwogICAgICAgIGN0eC5mb250ID0gJzMycHggQXJpYWwnOwogICAgICAgIGN0eC5maWxsVGV4dChzbGlkZS5zdWJ0aXRsZSwgY2FudmFzV2lkdGggLyAyLCBjYW52YXNIZWlnaHQgLSA1MCk7CiAgICAgIH0KCiAgICAgIGZ1bmN0aW9uIGRvd25sb2FkVmlkZW8oKSB7CiAgICAgICAgYWxlcnQoJ1lvdXIgdmlkZW8gaXMgcmVhZHkgZm9yIGRvd25sb2FkLicpOwogICAgICB9CiAgICB9KTsKICA8L3NjcmlwdD4KPC9ib2R5Pgo8L2h0bWw+

Success #stdin #stdout 0.04s 25556KB

stdin

copy

Standard input is empty

stdout

copy

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>MelindaAI AutoVideo - Advanced Video Creator</title>
  <!-- Include GSAP from CDN -->
  <script src="https://c...content-available-to-author-only...e.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
  <!-- Include CCapture.js from CDN -->
  <script src="https://c...content-available-to-author-only...r.net/npm/ccapture.js@1.1.10/build/CCapture.all.min.js"></script>
  <!-- Include ffmpeg.wasm from CDN -->
  <script src="https://c...content-available-to-author-only...r.net/npm/@ffmpeg/ffmpeg@0.11.5/dist/ffmpeg.min.js"></script>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #f9fafb;
    }
    #app {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    header {
      background-color: #2d3748;
      color: #edf2f7;
      padding: 20px;
      text-align: center;
    }
    main {
      flex: 1;
      display: flex;
      overflow: hidden;
    }
    #editor {
      width: 300px;
      background-color: #edf2f7;
      padding: 20px;
      overflow-y: auto;
    }
    #media-section, #slide-section, #audio-section {
      margin-bottom: 20px;
    }
    h2 {
      margin-top: 0;
    }
    #media-gallery, #slide-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .media-item, .slide-item {
      width: 80px;
      height: 80px;
      background-size: cover;
      background-position: center;
      border: 2px solid #cbd5e0;
      cursor: pointer;
      position: relative;
    }
    .slide-item .remove-btn {
      position: absolute;
      top: -10px;
      right: -10px;
      background-color: #e53e3e;
      color: #fff;
      border: none;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
    #preview {
      flex: 1;
      padding: 20px;
      display: flex;
      flex-direction: column;
    }
    #canvas {
      flex: 1;
      background-color: #000;
    }
    #controls {
      margin-top: 10px;
      text-align: center;
    }
    #controls button {
      padding: 10px 20px;
      margin: 0 5px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div id="app">
    <header>
      <h1>MelindaAI AutoVideo - Advanced Video Creator</h1>
    </header>
    <main>
      <section id="editor">
        <div id="media-section">
          <h2>Media Library</h2>
          <input type="file" id="media-input" accept="image/*,video/*" multiple>
          <div id="media-gallery"></div>
        </div>
        <div id="slide-section">
          <h2>Slides</h2>
          <button id="new-slide-btn">Add Slide</button>
          <div id="slide-list"></div>
        </div>
        <div id="audio-section">
          <h2>Audio Settings</h2>
          <label>Background Music:</label>
          <input type="file" id="background-music-input" accept="audio/*"><br><br>
          <label>Voiceover:</label>
          <input type="file" id="voiceover-input" accept="audio/*">
        </div>
      </section>
      <section id="preview">
        <h2>Preview</h2>
        <canvas id="canvas"></canvas>
        <div id="controls">
          <button id="play-btn">Play</button>
          <button id="stop-btn" disabled>Stop</button>
          <button id="download-btn" disabled>Download Video</button>
        </div>
      </section>
    </main>
  </div>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      // Elements
      const mediaInput = document.getElementById('media-input');
      const mediaGallery = document.getElementById('media-gallery');
      const slideList = document.getElementById('slide-list');
      const newSlideBtn = document.getElementById('new-slide-btn');
      const playBtn = document.getElementById('play-btn');
      const stopBtn = document.getElementById('stop-btn');
      const downloadBtn = document.getElementById('download-btn');
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      const canvasWidth = 1280;
      const canvasHeight = 720;
      canvas.width = canvasWidth;
      canvas.height = canvasHeight;

      const backgroundMusicInput = document.getElementById('background-music-input');
      const voiceoverInput = document.getElementById('voiceover-input');

      // Variables
      let mediaItems = [];
      let slides = [];
      let isPlaying = false;
      let currentSlideIndex = 0;
      let capturer = null;
      let recording = false;
      const frameRate = 30;
      let mediaRecorder;
      let recordedChunks = [];
      let backgroundMusic = null;
      let voiceover = null;

      // Event Listeners
      mediaInput.addEventListener('change', handleMediaInput);
      newSlideBtn.addEventListener('click', () => addSlide(null));
      playBtn.addEventListener('click', startPresentation);
      stopBtn.addEventListener('click', stopPresentation);
      downloadBtn.addEventListener('click', downloadVideo);

      backgroundMusicInput.addEventListener('change', handleBackgroundMusicInput);
      voiceoverInput.addEventListener('change', handleVoiceoverInput);

      function handleMediaInput(event) {
        const files = event.target.files;
        for (let file of files) {
          const url = URL.createObjectURL(file);
          const mediaItem = {
            file,
            url,
            type: file.type.startsWith('video/') ? 'video' : 'image',
          };
          mediaItems.push(mediaItem);
          displayMediaItem(mediaItem);
        }
      }

      function displayMediaItem(mediaItem) {
        const div = document.createElement('div');
        div.classList.add('media-item');
        div.style.backgroundImage = `url(${mediaItem.url})`;
        div.addEventListener('click', () => addSlide(mediaItem));
        mediaGallery.appendChild(div);
      }

      function addSlide(mediaItem) {
        const slide = {
          mediaItem,
          duration: 5,
          title: 'Title Here',
          subtitle: 'Subtitle Here',
          kenBurns: true,
        };
        slides.push(slide);
        displaySlideItem(slide);
      }

      function displaySlideItem(slide) {
        const div = document.createElement('div');
        div.classList.add('slide-item');
        if (slide.mediaItem) {
          div.style.backgroundImage = `url(${slide.mediaItem.url})`;
        } else {
          div.style.backgroundColor = '#cbd5e0';
        }

        const removeBtn = document.createElement('button');
        removeBtn.classList.add('remove-btn');
        removeBtn.textContent = '×';
        removeBtn.addEventListener('click', (e) => {
          e.stopPropagation();
          removeSlide(slide);
        });
        div.appendChild(removeBtn);

        div.addEventListener('click', () => editSlide(slide));

        slideList.appendChild(div);
      }

      function removeSlide(slide) {
        const index = slides.indexOf(slide);
        if (index > -1) {
          slides.splice(index, 1);
          renderSlideList();
        }
      }

      function renderSlideList() {
        slideList.innerHTML = '';
        slides.forEach((slide) => displaySlideItem(slide));
      }

      function editSlide(slide) {
        const title = prompt('Enter title:', slide.title);
        const subtitle = prompt('Enter subtitle:', slide.subtitle);
        const duration = prompt('Enter duration (seconds):', slide.duration);
        const kenBurns = confirm('Apply Ken Burns effect?');

        if (title !== null) slide.title = title;
        if (subtitle !== null) slide.subtitle = subtitle;
        if (duration !== null) slide.duration = parseFloat(duration) || 5;
        slide.kenBurns = kenBurns;
      }

      function handleBackgroundMusicInput(event) {
        const file = event.target.files[0];
        if (file) {
          const url = URL.createObjectURL(file);
          backgroundMusic = new Audio(url);
          backgroundMusic.loop = true;
          backgroundMusic.crossOrigin = 'anonymous';
        }
      }

      function handleVoiceoverInput(event) {
        const file = event.target.files[0];
        if (file) {
          const url = URL.createObjectURL(file);
          voiceover = new Audio(url);
          voiceover.crossOrigin = 'anonymous';
        }
      }

      function startPresentation() {
        if (isPlaying || slides.length === 0) return;
        isPlaying = true;
        playBtn.disabled = true;
        stopBtn.disabled = false;
        downloadBtn.disabled = true;

        // Play audio
        if (backgroundMusic) backgroundMusic.play();
        if (voiceover) voiceover.play();

        // Capture streams
        const canvasStream = canvas.captureStream(frameRate);
        const audioTracks = [];

        if (backgroundMusic && backgroundMusic.captureStream) {
          const bgMusicStream = backgroundMusic.captureStream();
          audioTracks.push(...bgMusicStream.getAudioTracks());
        }

        if (voiceover && voiceover.captureStream) {
          const voiceoverStream = voiceover.captureStream();
          audioTracks.push(...voiceoverStream.getAudioTracks());
        }

        const combinedStream = new MediaStream([...canvasStream.getVideoTracks(), ...audioTracks]);
        mediaRecorder = new MediaRecorder(combinedStream, { mimeType: 'video/webm; codecs=vp9' });
        recordedChunks = [];

        mediaRecorder.ondataavailable = (event) => {
          if (event.data.size > 0) {
            recordedChunks.push(event.data);
          }
        };

        mediaRecorder.onstop = () => {
          const blob = new Blob(recordedChunks, { type: 'video/webm' });
          const url = URL.createObjectURL(blob);
          downloadBtn.href = url;
          downloadBtn.download = 'presentation.webm';
          downloadBtn.disabled = false;
          alert('Your video is ready to download.');
        };

        mediaRecorder.start();
        recording = true;

        currentSlideIndex = 0;
        renderFrame();
      }

      function stopPresentation() {
        if (!isPlaying) return;
        isPlaying = false;
        playBtn.disabled = false;
        stopBtn.disabled = true;

        if (backgroundMusic) backgroundMusic.pause();
        if (voiceover) voiceover.pause();

        mediaRecorder.stop();
        recording = false;
      }

      function renderFrame() {
        if (!isPlaying) return;
        const slide = slides[currentSlideIndex];
        const totalFrames = slide.duration * frameRate;
        const frameIndex = (slide.frameIndex || 0) + 1;
        slide.frameIndex = frameIndex;

        ctx.clearRect(0, 0, canvasWidth, canvasHeight);

        if (slide.mediaItem && slide.mediaItem.type === 'image') {
          renderImageSlide(slide, frameIndex / totalFrames);
        } else if (slide.mediaItem && slide.mediaItem.type === 'video') {
          renderVideoSlide(slide);
        } else {
          ctx.fillStyle = '#000';
          ctx.fillRect(0, 0, canvasWidth, canvasHeight);
        }

        drawText(slide);

        if (recording) {
          capturer.capture(canvas);
        }

        if (frameIndex >= totalFrames) {
          slide.frameIndex = 0;
          currentSlideIndex++;
          if (currentSlideIndex >= slides.length) {
            stopPresentation();
            return;
          }
        }

        requestAnimationFrame(renderFrame);
      }

      function renderImageSlide(slide, progress) {
        const img = new Image();
        img.src = slide.mediaItem.url;
        img.onload = () => {
          let scale = 1;
          let x = 0;
          let y = 0;
          if (slide.kenBurns) {
            scale = 1 + 0.2 * progress;
            x = (canvasWidth - img.width * scale) / 2;
            y = (canvasHeight - img.height * scale) / 2;
          }
          ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
        };
      }

      function renderVideoSlide(slide) {
        if (!slide.videoElement) {
          const video = document.createElement('video');
          video.src = slide.mediaItem.url;
          video.crossOrigin = 'anonymous';
          video.load();
          video.play();
          slide.videoElement = video;
        }
        const video = slide.videoElement;
        ctx.drawImage(video, 0, 0, canvasWidth, canvasHeight);
      }

      function drawText(slide) {
        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
        ctx.fillRect(0, canvasHeight - 150, canvasWidth, 150);
        ctx.fillStyle = '#fff';
        ctx.font = 'bold 48px Arial';
        ctx.textAlign = 'center';
        ctx.fillText(slide.title, canvasWidth / 2, canvasHeight - 100);
        ctx.font = '32px Arial';
        ctx.fillText(slide.subtitle, canvasWidth / 2, canvasHeight - 50);
      }

      function downloadVideo() {
        alert('Your video is ready for download.');
      }
    });
  </script>
</body>
</html>

https://ideone.com/01sV3Y

language:

PHP (php 7.3.5)

created:

visibility:

public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!

Discover > Sphere Engine API

Discover > IDE Widget

Choose your language