Jesús Castillejo nos cuenta como ha lanzado un MVP de su side-project en muy poco tiempo con un resultado realmente cuidado, usando Framer.
Dejo por aquí el override de la barra de carga del video :) Por si le es útil a alguien:
import React, { useEffect, useState } from "react"
import { addPropertyControls, ControlType } from "framer"
export default function ProgressAnimation(props) {
const { backgroundColor, progressColor, file } = props
const [width, setWidth] = useState(0)
const [duration, setDuration] = useState(0)
useEffect(() => {
// Obtener la duración del archivo .mp4
if (file) {
const video = document.createElement("video")
video.src = file
video.addEventListener("loadedmetadata", () => {
setDuration(video.duration * 1000) // Convertir a milisegundos
})
}
}, [file])
// Actualizar la barra de progreso
const interval = setInterval(() => {
setWidth((prevWidth) =>
prevWidth >= 100 ? 0 : prevWidth + 100 / (duration / 100)
)
}, 100)
return () => clearInterval(interval)
}, [duration])
const styles = {
container: {
width: "100%",
height: "100%",
position: "relative",
overflow: "hidden",
},
background: {
position: "absolute",
top: 0,
left: 0,
background: backgroundColor,
progress: {
width: `${width}%`,
background: progressColor,
return (
<div style={styles.container}>
<div style={styles.background}></div>
<div style={styles.progress}></div>
</div>
addPropertyControls(ProgressAnimation, {
backgroundColor: {
title: "Background Color",
type: ControlType.Color,
defaultValue: "rgba(0, 0, 0, 0.12)",
progressColor: {
title: "Progress Color",
defaultValue: "black",
file: {
title: "Video File",
type: ControlType.File,
allowedFileTypes: ["mp4"],
Dejo por aquí el override de la barra de carga del video :) Por si le es útil a alguien:
import React, { useEffect, useState } from "react"
import { addPropertyControls, ControlType } from "framer"
export default function ProgressAnimation(props) {
const { backgroundColor, progressColor, file } = props
const [width, setWidth] = useState(0)
const [duration, setDuration] = useState(0)
useEffect(() => {
// Obtener la duración del archivo .mp4
if (file) {
const video = document.createElement("video")
video.src = file
video.addEventListener("loadedmetadata", () => {
setDuration(video.duration * 1000) // Convertir a milisegundos
})
}
}, [file])
useEffect(() => {
// Actualizar la barra de progreso
const interval = setInterval(() => {
setWidth((prevWidth) =>
prevWidth >= 100 ? 0 : prevWidth + 100 / (duration / 100)
)
}, 100)
return () => clearInterval(interval)
}, [duration])
const styles = {
container: {
width: "100%",
height: "100%",
position: "relative",
overflow: "hidden",
},
background: {
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
background: backgroundColor,
},
progress: {
position: "absolute",
top: 0,
left: 0,
height: "100%",
width: `${width}%`,
background: progressColor,
},
}
return (
<div style={styles.container}>
<div style={styles.background}></div>
<div style={styles.progress}></div>
</div>
)
}
addPropertyControls(ProgressAnimation, {
backgroundColor: {
title: "Background Color",
type: ControlType.Color,
defaultValue: "rgba(0, 0, 0, 0.12)",
},
progressColor: {
title: "Progress Color",
type: ControlType.Color,
defaultValue: "black",
},
file: {
title: "Video File",
type: ControlType.File,
allowedFileTypes: ["mp4"],
},
})