import React, { useState, useRef } from 'react'; import { Image, Download, AlertCircle, CheckCircle, Loader2, Play } from 'lucide-react'; const DEFAULT_URLS = `https://static1.squarespace.com/static/67fe6263177965472e25bc12/t/6a1d7d5539722178e677a92a/1780317528116/OTS_shots_with_chatbot_mascots_202606011426.mp4 https://static1.squarespace.com/static/67fe6263177965472e25bc12/t/6a1d7eda39722178e6786899/1780317937978/Hero+video_v4.mp4 https://static1.squarespace.com/static/67fe6263177965472e25bc12/t/6a1eb2262df35c08ea748e05/1780396584936/2_jap+problem.mp4 https://static1.squarespace.com/static/67fe6263177965472e25bc12/t/6a1ef470b971ee3cd8d5ba21/1780413555189/2_solution_v2.mp4 https://static1.squarespace.com/static/67fe6263177965472e25bc12/t/6a1c38ad3aa0431ee4e4d005/1780234419680/Card_1_0_Hero.mp4 https://static1.squarespace.com/static/67fe6263177965472e25bc12/t/6a1cbbfd9c41d54b8f779225/1780268030454/Card+1_1_Fully+Animated+3D+Characters.mp4 https://static1.squarespace.com/static/67fe6263177965472e25bc12/t/6a1c383712c80708b0d2d04b/1780234301939/Card+1_2_Tone+of+voice.mp4 https://static1.squarespace.com/static/67fe6263177965472e25bc12/t/6a1c383733cd2d796d5cef59/1780234302285/Card+1_3+Quik+reskin.mp4 https://static1.squarespace.com/static/67fe6263177965472e25bc12/t/6a1c38ad780b2d06b8c373e6/1780234420843/Card_2_0_hero.mp4 https://static1.squarespace.com/static/67fe6263177965472e25bc12/t/6a1c38376af2ef7ddd6492ea/1780234303901/Card+2_1_Map+Every+Journey.mp4 https://static1.squarespace.com/static/67fe6263177965472e25bc12/t/6a1c3837bddf62635f2de1e9/1780234301476/Card+2_2_Powered+by+Your+Raw+Data.mp4 https://static1.squarespace.com/static/67fe6263177965472e25bc12/t/6a1c38374a7eaf7926d66b77/1780234304980/Card+2_3_Omnichannel+Deployment.mp4 https://static1.squarespace.com/static/67fe6263177965472e25bc12/t/6a1c3837a2b5ad6d4183e5d3/1780234304368/Card+3_0_hero.mp4 https://static1.squarespace.com/static/67fe6263177965472e25bc12/t/6a1c38ad3ce62272d156b791/1780234419716/Card_3_1+Real-Time+Insights.mp4 https://static1.squarespace.com/static/67fe6263177965472e25bc12/t/6a1c398a7e38353bd63a596b/1780234637751/Card+3_2+Emotional+Intelligence.mp4 https://static1.squarespace.com/static/67fe6263177965472e25bc12/t/6a1c38ad12c80708b0d2f520/1780234418972/Card_3_3_Track+Your+ROI.mp4 https://static1.squarespace.com/static/67fe6263177965472e25bc12/t/6a1c398a0bd25a1db0a69660/1780234638209/Card+4_0_Hero.mp4 https://static1.squarespace.com/static/67fe6263177965472e25bc12/t/6a1c398a3aa0431ee4e4f888/1780234638077/Card+4_1.mp4 https://static1.squarespace.com/static/67fe6263177965472e25bc12/t/6a1c38ad1eaa0b5d789061a5/1780234420750/Card+4_2.mp4 https://static1.squarespace.com/static/67fe6263177965472e25bc12/t/6a1c38adac56b001da72d9a0/1780234420005/Card+4_3.mp4 https://static1.squarespace.com/static/67fe6263177965472e25bc12/t/69d47b4aab856a27e86bd40b/1775532907808/Willy.mp4 https://static1.squarespace.com/static/67fe6263177965472e25bc12/t/69d47b4a5ec75b0f31bbec33/1775532907808/Biek_1.mp4 https://static1.squarespace.com/static/67fe6263177965472e25bc12/t/69d47b4a4a1bc73ee1ec1cd9/1775532895446/Liza.mp4 https://static1.squarespace.com/static/67fe6263177965472e25bc12/t/69d47b4a960144044bf3569e/1775532902828/Fin.mp4 https://static1.squarespace.com/static/67fe6263177965472e25bc12/t/69d47b4a0465de355013688f/1775532907904/Woof.mp4`; export default function App() { const [urlsInput, setUrlsInput] = useState(DEFAULT_URLS); const [results, setResults] = useState([]); const [isProcessing, setIsProcessing] = useState(false); const [progress, setProgress] = useState({ current: 0, total: 0 }); const getFilenameFromUrl = (url) => { try { const parts = url.split('?')[0].split('/'); let filename = parts[parts.length - 1] || 'frame'; // Decode URI components (e.g., %20 to space, + to space) filename = decodeURIComponent(filename.replace(/\+/g, ' ')); // Replace .mp4 or .webm with .png if (filename.toLowerCase().endsWith('.mp4')) { filename = filename.slice(0, -4) + '.png'; } else if (filename.toLowerCase().endsWith('.webm')) { filename = filename.slice(0, -5) + '.png'; } else { filename += '.png'; } return filename; } catch (e) { return `frame_${Date.now()}.png`; } }; const extractFrame = (url) => { return new Promise((resolve, reject) => { const video = document.createElement('video'); video.crossOrigin = 'anonymous'; // Important to avoid Canvas Tainting video.muted = true; video.playsInline = true; video.src = url; let timeoutId = setTimeout(() => { reject(new Error("Timeout loading video")); }, 15000); // 15 second timeout const handleLoadedData = () => { // Seek to 0.1 seconds to guarantee a frame is drawn (frame 0 is sometimes blank on the web) video.currentTime = 0.1; }; const handleSeeked = () => { try { const canvas = document.createElement('canvas'); canvas.width = video.videoWidth || 1920; // Fallbacks just in case canvas.height = video.videoHeight || 1080; const ctx = canvas.getContext('2d'); ctx.drawImage(video, 0, 0, canvas.width, canvas.height); const dataUrl = canvas.toDataURL('image/png'); clearTimeout(timeoutId); resolve(dataUrl); } catch (err) { clearTimeout(timeoutId); reject(new Error("Canvas tainted by CORS or draw error.")); } }; const handleError = () => { clearTimeout(timeoutId); reject(new Error("Failed to load video or CORS error.")); }; video.addEventListener('loadeddata', handleLoadedData); video.addEventListener('seeked', handleSeeked); video.addEventListener('error', handleError); // Trigger load video.load(); }); }; const processVideos = async () => { const urls = urlsInput .split('\n') .map(u => u.trim()) .filter(u => u.length > 0); if (urls.length === 0) return; setIsProcessing(true); setResults([]); setProgress({ current: 0, total: urls.length }); const newResults = []; // Process sequentially to prevent browser overload/crashes for (let i = 0; i < urls.length; i++) { const url = urls[i]; const filename = getFilenameFromUrl(url); setProgress({ current: i + 1, total: urls.length }); try { const dataUrl = await extractFrame(url); newResults.push({ id: i, url, filename, dataUrl, status: 'success' }); } catch (error) { newResults.push({ id: i, url, filename, error: error.message, status: 'error' }); } // Update state incrementally so user sees progress setResults([...newResults]); } setIsProcessing(false); }; const downloadImage = (dataUrl, filename) => { const a = document.createElement('a'); a.href = dataUrl; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); }; const downloadAll = () => { // Triggers downloads with a slight delay to bypass popup blockers const successful = results.filter(r => r.status === 'success'); successful.forEach((result, idx) => { setTimeout(() => { downloadImage(result.dataUrl, result.filename); }, idx * 300); }); }; return (

{/* Header */}

Video Frame Extractor

Automatically capture the first frame of a list of videos and download them as PNGs.

{/* Controls Column */}

Video URLs (One per line)

setUrlsInput(e.target.value)}
                className="w-full h-96 p-3 bg-gray-50 border border-gray-200 rounded-xl text-xs font-mono leading-relaxed focus:ring-2 focus:ring-blue-500 focus:outline-none resize-none"
                placeholder="https://example.com/video1.mp4
https://example.com/video2.mp4"
                disabled={isProcessing}
              />
              
              <button
                onClick={processVideos}
                disabled={isProcessing || !urlsInput.trim()}
                className="w-full mt-4 bg-gray-900 hover:bg-black disabled:bg-gray-300 text-white font-semibold py-3 px-4 rounded-xl flex items-center justify-center gap-2 transition-colors"
              >
                {isProcessing ? (
                  <>
                    <Loader2 size={18} className="animate-spin" />
                    Processing ({progress.current}/{progress.total})...
                  </>
                ) : (
                  <>
                    <Play size={18} fill="currentColor" />
                    Extract Frames
                  </>
                )}
              </button>

<div className="mt-4 p-4 bg-blue-50 text-blue-800 text-xs rounded-xl leading-relaxed">
                <strong className="block mb-1">Note on CORS:</strong>
                If the video host does not allow cross-origin requests (CORS), the browser will block frame extraction for security reasons. (Squarespace typically allows it, but if you see errors, this is why).
              </div>
            </div>
          </div>

{/* Results Column */}
          <div className="lg:col-span-2">
            <div className="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 min-h-full flex flex-col">
              
              <div className="flex items-center justify-between mb-6 pb-4 border-b border-gray-100">
                <h2 className="text-lg font-bold text-gray-900">
                  Extracted Frames {results.length > 0 && `(${results.filter(r => r.status === 'success').length})`}
                </h2>
                
                {results.filter(r => r.status === 'success').length > 0 && (
                  <button
                    onClick={downloadAll}
                    className="bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold py-2 px-4 rounded-lg flex items-center gap-2 transition-colors"
                  >
                    <Download size={16} />
                    Download All Extracted
                  </button>
                )}
              </div>

{results.length === 0 ? (
                <div className="flex-1 flex flex-col items-center justify-center text-gray-400 py-12">
                  <Image size={48} className="mb-4 opacity-20" />
                  <p>No frames extracted yet. Click "Extract Frames" to begin.</p>
                </div>
              ) : (
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  {results.map((result) => (
                    <div key={result.id} className="border border-gray-200 rounded-xl overflow-hidden bg-gray-50 flex flex-col">
                      
                      {/* Image Preview / Error State */}
                      <div className="aspect-video bg-gray-200 relative flex items-center justify-center">
                        {result.status === 'success' ? (
                          <img 
                            src={result.dataUrl} 
                            alt={result.filename} 
                            className="w-full h-full object-cover"
                          />
                        ) : (
                          <div className="text-red-500 flex flex-col items-center p-4 text-center">
                            <AlertCircle size={24} className="mb-2" />
                            <span className="text-xs font-semibold">Extraction Failed</span>
                            <span className="text-[10px] text-red-400 mt-1">{result.error}</span>
                          </div>
                        )}
                        
                        {/* Status Badge */}
                        <div className="absolute top-2 left-2 flex gap-2">
                          {result.status === 'success' ? (
                            <span className="bg-green-500 text-white text-[10px] font-bold px-2 py-1 rounded-md flex items-center gap-1 shadow-sm">
                              <CheckCircle size={10} /> Success
                            </span>
                          ) : (
                            <span className="bg-red-500 text-white text-[10px] font-bold px-2 py-1 rounded-md flex items-center gap-1 shadow-sm">
                              <AlertCircle size={10} /> Failed
                            </span>
                          )}
                        </div>
                      </div>

{/* Info & Actions */}
                      <div className="p-3 flex items-center justify-between bg-white border-t border-gray-100 flex-1">
                        <div className="overflow-hidden mr-2">
                          <p className="text-xs font-semibold text-gray-900 truncate" title={result.filename}>
                            {result.filename}
                          </p>
                        </div>
                        
                        {result.status === 'success' && (
                          <button
                            onClick={() => downloadImage(result.dataUrl, result.filename)}
                            className="text-blue-600 hover:text-blue-800 bg-blue-50 hover:bg-blue-100 p-2 rounded-lg transition-colors flex-shrink-0"
                            title="Download Frame"
                          >
                            <Download size={16} />
                          </button>
                        )}
                      </div>

</div>
                  ))}
                </div>
              )}

</div>
          </div>

</div>
      </div>
    </div>
  );
}
  
  
</div>

</div></div></div></div></div>
    </div>
  
  </div>
  
</section>

</article>

</main>
      
        <footer class="sections" id="footer-sections" data-footer-sections>

<section
  data-test="page-section"
  
  data-section-theme="bright-inverse"
  class='page-section 
    
      full-bleed-section
      layout-engine-section
    
    background-width--full-bleed
    
      
        section-height--custom
      
    
    
      content-width--wide
    
    horizontal-alignment--center
    vertical-alignment--middle
    
      
    
    
    bright-inverse'
  
  data-section-id="685cea8bef25f24587077a02"
  
  data-controller="SectionWrapperController"
  data-current-styles="{
"imageOverlayOpacity": 0.15,
"backgroundWidth": "background-width--full-bleed",
"sectionHeight": "section-height--custom",
"customSectionHeight": 10,
"horizontalAlignment": "horizontal-alignment--center",
"verticalAlignment": "vertical-alignment--middle",
"contentWidth": "content-width--wide",
"customContentWidth": 50,
"sectionTheme": "bright-inverse",
"sectionAnimation": "none",
"backgroundMode": "image"
}"
  data-current-context="{
"video": {
"playbackSpeed": 0.5,
"filter": 1,
"filterStrength": 0,
"zoom": 0,
"videoSourceProvider": "none"
},
"backgroundImageId": null,
"backgroundMediaEffect": {
"type": "none"
},
"divider": {
"enabled": false
},
"typeName": "page"
}"
  data-animation="none"
  data-fluid-engine-section
   
  
     style="min-height: 10vh;"

data-sqsp-section="fluid-engine"

>
  <div
    class="section-border"
    
  >
    <div class="section-background">
    
      
    
    </div>
  </div>
  <div
    class='content-wrapper'
    style='
      
        
          
          padding-top: calc(10vmax / 10); padding-bottom: calc(10vmax / 10);
        
      
    '
  >
    <div
      class="content"
      
    >
      
      
      
      
      
      
      
      
      
      
      <div data-fluid-engine="true"><style>

.fe-685cea8bef25f24587077a01 {
  --grid-gutter: calc(var(--sqs-mobile-site-gutter, 6vw) - 11.0px);
  --cell-max-width: calc( ( var(--sqs-site-max-width, 1500px) - (11.0px * (8 - 1)) ) / 8 );

display: grid;
  position: relative;
  grid-area: 1/1/-1/-1;
  grid-template-rows: repeat(21,minmax(24px, auto));
  grid-template-columns:
    minmax(var(--grid-gutter), 1fr)
    repeat(8, minmax(0, var(--cell-max-width)))
    minmax(var(--grid-gutter), 1fr);
  row-gap: 11.0px;
  column-gap: 11.0px;
  overflow-x: hidden;
  overflow-x: clip;
}

@media (min-width: 768px) {
  .background-width--inset .fe-685cea8bef25f24587077a01 {
    --inset-padding: calc(var(--sqs-site-gutter) * 2);
  }

.fe-685cea8bef25f24587077a01 {
    --grid-gutter: calc(var(--sqs-site-gutter, 4vw) - 11.0px);
    --cell-max-width: calc( ( var(--sqs-site-max-width, 1500px) - (11.0px * (24 - 1)) ) / 24 );
    --inset-padding: 0vw;

--row-height-scaling-factor: 0.0215;
    --container-width: min(var(--sqs-site-max-width, 1500px), calc(100vw - var(--sqs-site-gutter, 4vw) * 2 - var(--inset-padding) ));

grid-template-rows: repeat(10,minmax(calc(var(--container-width) * var(--row-height-scaling-factor)), auto));
    grid-template-columns:
      minmax(var(--grid-gutter), 1fr)
      repeat(24, minmax(0, var(--cell-max-width)))
      minmax(var(--grid-gutter), 1fr);
  }
}

.fe-block-b5fe345a93a0ad44cfbb {
    grid-area: 2/2/12/10;
    z-index: 0;

@media (max-width: 767px) {
      
      
    }
  }

.fe-block-b5fe345a93a0ad44cfbb .sqs-block {
    justify-content: flex-start;
  }

.fe-block-b5fe345a93a0ad44cfbb .sqs-block-alignment-wrapper {
    align-items: flex-start;
  }

@media (min-width: 768px) {
    .fe-block-b5fe345a93a0ad44cfbb {
      grid-area: 2/2/11/16;
      z-index: 0;

}

.fe-block-b5fe345a93a0ad44cfbb .sqs-block {
      justify-content: flex-start;
    }

.fe-block-b5fe345a93a0ad44cfbb .sqs-block-alignment-wrapper {
      align-items: flex-start;
    }
  }

.fe-block-d17a277d38c65c03102f {
    grid-area: 12/2/20/10;
    z-index: 1;

@media (max-width: 767px) {
      
      
    }
  }

.fe-block-d17a277d38c65c03102f .sqs-block {
    justify-content: flex-start;
  }

.fe-block-d17a277d38c65c03102f .sqs-block-alignment-wrapper {
    align-items: flex-start;
  }

@media (min-width: 768px) {
    .fe-block-d17a277d38c65c03102f {
      grid-area: 2/19/10/26;
      z-index: 1;

}

.fe-block-d17a277d38c65c03102f .sqs-block {
      justify-content: flex-start;
    }

.fe-block-d17a277d38c65c03102f .sqs-block-alignment-wrapper {
      align-items: flex-start;
    }
  }

</style><div class="fluid-engine fe-685cea8bef25f24587077a01"><div class="fe-block fe-block-b5fe345a93a0ad44cfbb"><div class="sqs-block newsletter-block sqs-block-newsletter" data-blend-mode="normal" data-block-type="51" data-border-radii="{"topLeft":{"unit":"px","value":0.0},"topRight":{"unit":"px","value":0.0},"bottomLeft":{"unit":"px","value":0.0},"bottomRight":{"unit":"px","value":0.0}}" id="block-b5fe345a93a0ad44cfbb"><div class="sqs-block-content">

<div class="newsletter-form-wrapper
  
  newsletter-form-wrapper--layoutFloat
  newsletter-form-wrapper--alignLeft
  
  "
  >
  <form
     class="newsletter-form"
     data-form-id="685cea8bef25f245870779ff"
     
     autocomplete="on"
     method="POST"
     novalidate
     onsubmit="return (function (form) {
    Y.use('squarespace-form-submit', 'node', function usingFormSubmit(Y) {
      (new Y.Squarespace.FormSubmit(form)).submit({
        formId: '685cea8bef25f245870779ff',
        collectionId: '69cd1cd1e6d45b621aece6a0',
        objectName: 'b5fe345a93a0ad44cfbb'
      });
    });
    return false;
  })(this);">
    <header class="newsletter-form-header">
      <h2 class="newsletter-form-header-title">Stay in the loop</h2>
      <div class="newsletter-form-header-description"><p>Sign up with your email address to receive news and updates.</p></div>
    </header>
    <div class="newsletter-form-body">
      <div class="newsletter-form-fields-wrapper form-fields" style="vertical-align: middle;">
        
        
          
            <div id="email-yui_3_17_2_1_1561059871607_37975" class="newsletter-form-field-wrapper form-item field email required" style="vertical-align: bottom;">
              <label class="newsletter-form-field-label title" for="email-yui_3_17_2_1_1561059871607_37975-field">Email Address</label>
              <input id="email-yui_3_17_2_1_1561059871607_37975-field" class="newsletter-form-field-element field-element" name="email" x-autocompletetype="email" autocomplete="email" type="email" spellcheck="false" placeholder="Email Address" />
            </div>
          
        
          
        
      </div>
      <div data-animation-role="button" class="newsletter-form-button-wrapper submit-wrapper" style="vertical-align: middle;">
        <button
          class="
            newsletter-form-button
            sqs-system-button
            sqs-editable-button-layout
            sqs-editable-button-style
            sqs-editable-button-shape
            sqs-button-element--primary
          "
          type="submit"
          value="Sign Up"
        >
          <span class="newsletter-form-spinner sqs-spin light large"></span>
          <span class="newsletter-form-button-label">Sign Up</span>
          <span class="newsletter-form-button-icon"></span>
        </button>
      </div>
      
        
        <div class="captcha-container sqs-form-rendered
          align-left
          
          
          "
          data-theme="light"
        ></div>
        
      
    </div>
    <div class="newsletter-form-footnote"></div>
    <div class="hidden form-submission-text">Thank you!</div>
    <div class="hidden form-submission-html" data-submission-html=""></div>
  </form>
</div>
</div></div></div><div class="fe-block fe-block-d17a277d38c65c03102f"><div class="sqs-block website-component-block sqs-block-website-component sqs-block-html html-block" data-block-css="["https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.html/543513b2-a2cc-43a0-a9e3-b06fadbdf938_713/website.components.html.styles.css"]" data-block-scripts="["https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.html/543513b2-a2cc-43a0-a9e3-b06fadbdf938_713/website.components.html.visitor.js"]" data-block-type="1337" data-definition-name="website.components.html" data-sqsp-block="text" data-website-component-id="d17a277d38c65c03102f" id="block-d17a277d38c65c03102f"><div class="sqs-block-content"><div class="sqs-text-block-container">
  
  <div class="sqs-html-content" data-sqsp-text-block-content><h3 style="white-space:pre-wrap;">Notso BV</h3><p class="" style="white-space:pre-wrap;"><strong>Ortler 17, 1060PH Amsterdam<br></strong>Chamber of Commerce (KvK) number: 95131124<br>RSIN: 867013916<br>VAT number: NL867013316B01<br><br>hello@notso.ai<br></p></div>

--tweak-text-block-background-color: initial;

}

#block-d17a277d38c65c03102f .sqs-html-content {
    
    --tweak-text-block-padding: 6% 6% 6% 6%;
  --tweak-text-block-padding: initial;
}

.fe-block-d17a277d38c65c03102f {
      mix-blend-mode: var(--tweak-text-block-blend
  );
      border-radius: var(--tweak-text-block-radius);
  }

.fe-block-d17a277d38c65c03102f {
      --tweak-text-block-radius: 0px 0px 0px 0px;
    }

.fe-block-d17a277d38c65c03102f {
      --tweak-text-block-blend
  : normal;
    }

.fe-block-d17a277d38c65c03102f {
    --blur-value: blur(15px);}

</style>

#block-d17a277d38c65c03102f {
            
            }
        }
    
  
    @media screen and (max-width: 767px) {
          #block-d17a277d38c65c03102f .sqs-html-content {
            
            }
        }
    
  @media screen and (max-width: 767px) {

}</style>

</div>
</div></div></div></div></div>
    </div>
  
  </div>
  
</section>

</footer>

</div>

</body>
</html>