Como criei o MediaFinder com Electron

O MediaFinder nasceu de uma necessidade pessoal: organizar minha coleção de vídeos locais de forma visual e intuitiva, algo que o explorador de arquivos padrão do Windows não oferecia com a qualidade que eu desejava.

Neste artigo, vou compartilhar os desafios técnicos e as soluções que encontrei ao desenvolver essa aplicação desktop usando Electron, React e FFmpeg.

O Problema

Eu tinha centenas de vídeos espalhados em pastas. Encontrar um vídeo específico ou apenas navegar pela coleção era uma tarefa árdua. Eu queria uma interface estilo "Netflix", com capas automáticas, busca rápida e reprodução integrada.

A Stack Tecnológica

Para resolver isso, escolhi as seguintes tecnologias:

• Electron: Para criar a aplicação desktop cross-platform.
• React: Para construir uma interface de usuário dinâmica e responsiva.
• Node.js: Para acesso ao sistema de arquivos (FileSystem).
• FFmpeg: Para gerar thumbnails dos vídeos automaticamente.

Desafio 1: Gerando Thumbnails

A parte mais crítica foi gerar as capas dos vídeos. Ler arquivos de vídeo pesados em tempo real travaria a interface. A solução foi usar o fluent-ffmpeg para extrair um frame do vídeo em segundo plano.

const ffmpeg = require('fluent-ffmpeg');

function generateThumbnail(videoPath, outputPath) {
  return new Promise((resolve, reject) => {
    ffmpeg(videoPath)
      .screenshots({
        count: 1,
        folder: outputPath,
        filename: 'thumbnail.png',
        size: '320x180'
      })
      .on('end', resolve)
      .on('error', reject);
  });
}

Essa função é chamada quando o aplicativo indexa uma nova pasta. Os thumbnails são salvos em cache para carregamento instantâneo nas próximas execuções.

Desafio 2: Performance com Listas Grandes

Renderizar milhares de componentes React de uma vez causava lentidão. Implementei Virtualização (usando react-window) para renderizar apenas os itens visíveis na tela, melhorando drasticamente a performance de scroll.

"A otimização prematura é a raiz de todo o mal, mas a virtualização em listas grandes é essencial."

Conclusão

O MediaFinder se tornou uma ferramenta indispensável no meu dia a dia. O projeto é open source e você pode conferir o código completo no meu GitHub.

Se você tem interesse em desenvolvimento desktop com tecnologias web, o Electron é uma porta de entrada fantástica.