Cómo usar
tu portal.

Introducción

Qué es este manual y cómo usarlo.

Este manual cubre las herramientas del Admin Portal en el orden en que se usan durante un proyecto típico: desde generar un review para el cliente, pasando por la edición con los comentarios, hasta la entrega final y la factura.

Usa la tabla de contenidos a la izquierda para saltar a cualquier sección. Las instrucciones incluyen capturas conceptuales, atajos de teclado y pasos numerados.

Flujo general

Cómo se conectan las herramientas de principio a fin.

1. Subir video y generar review. En Generador de Review cargas el video (o pegas URL de Bunny Stream / Vimeo / YouTube) y escribes el nombre del cliente. El generador sube el archivo, crea un HTML único y te devuelve el link público.
2. Enviar link al cliente. Le pasas el link por email, WhatsApp o la vía que uses. El cliente no necesita crear cuenta — solo abrir el link.
3. Cliente revisa y comenta. El cliente pausa el video donde quiera, dibuja sobre el frame y deja notas escritas. Cada nota queda fijada al timecode exacto. Al terminar oprime ✓ Terminado y cierra la ventana.
4. Recibir los comentarios. Las notas se guardan automáticamente en Firebase — las ves al abrir el mismo link o en tiempo real si lo dejas abierto.
5. Exportar para edición. Dentro del review, el botón 🎬 Edición genera archivos para DaVinci, Final Cut, Premiere y EDL. Los marcadores aparecen en el timeline del editor al TC exacto.
6. Entregar archivos finales. Usas Entregas & Archivos para subir los masters al cliente y Email de Entrega para generar el correo de notificación.
7. Cobrar. Facturas genera el PDF listo para enviar.

Generador de Review

Crear un portal de revisión personalizado para un cliente.

Pasos

1. Abre Generador de Review desde el Admin Portal.
2. Escribe el nombre del cliente (ej: Empresa XYZ — Corte 2). Esto aparece en el portal del cliente y se usa para generar el nombre del archivo.
3. Carga el video: arrastra un archivo local (MP4, MOV, WebM) o pega una URL de Bunny Stream, Vimeo o YouTube.
4. Oprime Generar. Si es archivo local, se sube a Bunny Stream y se convierte automáticamente.
5. Copia el link público que aparece al terminar. Ese es el link que envías al cliente.

Formatos aceptados

• Video: MP4, MOV, WebM (archivo local o URL embed)
• Imagen: JPG, PNG, GIF, WebP, TIFF (para revisión de piezas gráficas)
• Plataformas soportadas: Bunny Stream, Vimeo, YouTube

Portal de Revisión

Qué ve el cliente y cómo funciona.

Cuando el cliente abre el link, ve el video a la izquierda y un panel de notas a la derecha. No necesita instalar nada.

Funciones clave

• Botón + Nota aquí — pausa el video en el frame actual y abre el formulario de nota.
• Lápiz ✏️ — activa el modo dibujo para marcar sobre el frame. Al guardar la nota se adjunta el sketch.
• Espacio (Space) — play/pause.
• Click en una nota guardada — salta al TC de esa nota y muestra el sketch si existe.
• 📄 PDF — exporta todas las notas en PDF para compartir.
• 🎬 Edición — exporta los marcadores para el editor de video (ver sección siguiente).
• ✓ Terminado — señal visual que la revisión está completa. No envía nada; solo da cierre al cliente.

Exportar para edición

Llevar los comentarios del cliente al editor de video como marcadores.

El botón 🎬 Edición genera archivos listos para importar a DaVinci Resolve, Final Cut Pro, Premiere Pro o cualquier editor compatible con EDL. Los marcadores llegan al timeline en el TC exacto donde el cliente dejó la nota.

Flujo general en el editor

1. Importa el archivo al editor. Se crea un timeline vacío con los marcadores colocados al TC correcto.
2. Ve a tu secuencia original, selecciona todo y copia.
3. Pega en el timeline nuevo al 00:00:00:00. Los marcadores quedan alineados con tu edición.

🎨 DaVinci Resolve — Archivo .py

DaVinci Resolve no lee bien los FCPXML con marcadores sueltos, así que usamos su API de scripting Python. Es más confiable: los marcadores se agregan al timeline activo sin depender de importar un archivo.

Método 1 — Copiar y pegar en el console (recomendado)

1. Desde el portal de revisión, oprime 🎬 Edición y luego DaVinci Resolve. Se descarga un archivo nombre-cliente-davinci.py.
2. Abre DaVinci Resolve y el proyecto donde quieres los marcadores.
3. Abre el timeline donde se van a colocar los marcadores (ej: la secuencia del corte actual).
4. En el menú superior ve a: Workspace → Console.
5. En la barra superior del console verás pestañas. Cambia a Py3.
6. Abre el archivo .py descargado con cualquier editor de texto (TextEdit, VS Code, etc). Selecciona todo el contenido (⌘A), copia (⌘C).
7. Regresa al console de DaVinci, haz click dentro, pega (⌘V) y presiona Enter.
8. Verás un mensaje: ✅ N marcadores agregados al timeline 'XYZ'. Listo.

Método 2 — Como script del menú (para uso recurrente)

Si vas a usar la misma importación varias veces, guarda el .py en la carpeta de scripts de DaVinci:

• macOS: ~/Library/Application Support/Blackmagic Design/DaVinci Resolve/Fusion/Scripts/Edit/
• Windows: %APPDATA%\Blackmagic Design\DaVinci Resolve\Support\Fusion\Scripts\Edit\

Luego córrelo desde Workspace → Scripts → Edit → nombre del archivo.

🍏 Final Cut Pro — Archivo .fcpxml

1. Descarga el .fcpxml desde el botón Final Cut Pro.
2. En Final Cut Pro: File → Import → XML…
3. Selecciona el archivo descargado. FCP crea un nuevo Event y Project con un timeline vacío que ya tiene los marcadores.
4. Abre ese timeline. Pega tu secuencia original encima al 00:00:00:00.

🟣 Adobe Premiere Pro — Archivo .xml

1. Descarga el .xml desde el botón Premiere Pro.
2. En Premiere: File → Import… y selecciona el archivo.
3. Premiere crea una secuencia vacía con los marcadores como timeline markers nativos.
4. Abre la secuencia, pega tu edición original al inicio.

📼 EDL universal — Archivo .edl

El EDL es un formato universal de texto plano que leen casi todos los editores profesionales. Útil como fallback cuando algún otro formato falla.

1. Descarga el .edl desde el botón correspondiente.
2. En DaVinci: File → Import → Timeline… y selecciona el EDL. Los marcadores se importan como timeline markers amarillos.
3. En Avid Media Composer, Vegas Pro, etc: buscar "Import EDL" en el menú. Varía por software.

Entregas & Archivos

Subir los archivos finales al cliente.

La herramienta Entregas & Archivos sirve para dos cosas: entregar los masters finales al cliente y navegar los archivos que el cliente subió durante el proyecto.

Entregar un proyecto

1. Abre Entregas & Archivos desde el Admin.
2. Crea una nueva entrega con el nombre del cliente.
3. Sube los archivos finales (video, audio, piezas gráficas).
4. El sistema genera un link de descarga público que le envías al cliente.

Upload Portal (Cliente)

Portal público para que el cliente te envíe archivos.

Cuando el cliente necesita enviarte archivos grandes (brief, logos, metraje bruto) le pasas el link del Upload Portal. El cliente arrastra los archivos al portal y tú los ves aparecer en Entregas & Archivos.

Email de Entrega

Genera el email HTML de notificación para el cliente.

1. Abre Email de Entrega.
2. Pega el código/link de la entrega.
3. Descarga el HTML y pégalo como firma/contenido en tu cliente de correo (Gmail, Apple Mail).

Facturas

Cotizaciones y facturas para clientes.

La herramienta Facturas genera cotizaciones y facturas con el branding de J+MEDIA. Los datos del cliente se guardan localmente en el navegador, así que puedes regenerar o modificar facturas previas.

• Crear cotización → convertir en factura cuando el cliente apruebe.
• Exportar a PDF listo para enviar.
• Los campos de servicios son editables — agrega líneas según el proyecto.

Sincronizar template (técnico)

Cómo propagar cambios del review al generador.

El archivo jmedia-review.html es el template que el cliente ve. El jmedia-generator.html tiene una copia embebida en base64 de ese template. Cuando editas el review, debes re-sincronizar o el generador seguirá creando la versión vieja.

Re-sincronizar manualmente

Corre este comando de Python desde la carpeta del proyecto:

# Desde /Users/joelcruz/Documents/WEB PROD/J+MEDIA
python3 -c "
import base64, re, pathlib
review = pathlib.Path('jmedia-review.html').read_bytes()
b64 = base64.b64encode(review).decode('ascii')
gen = pathlib.Path('jmedia-generator.html')
txt = gen.read_text(encoding='utf-8')
txt = re.sub(r'const TEMPLATE_B64 = \"[^\"]*\";', f'const TEMPLATE_B64 = \"{b64}\";', txt, count=1)
gen.write_text(txt, encoding='utf-8')
print('Template sincronizado.')
"

Troubleshooting

Problemas comunes y cómo resolverlos.