Created
January 25, 2024 17:03
-
-
Save davidfurlong/acb416abf751e05e9cf467ff0fcc8419 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Welcome to Code in Framer | |
// Get Started: https://www.framer.com/developers/ | |
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; | |
import { addPropertyControls, ControlType } from "framer"; | |
import { useInView, motion } from "framer-motion"; | |
import { useRef, useEffect, useState } from "react"; | |
/** | |
* These annotations control how your component sizes | |
* Learn more: https://www.framer.com/developers/#code-components-auto-sizing | |
/** | |
* @framerSupportedLayoutWidth fixed | |
* @framerSupportedLayoutHeight fixed | |
* @framerIntrinsicHeight 200 | |
* @framerIntrinsicWidth 200 | |
*/ export default function VideoForSlides(props) { | |
const [play, setPlay] = useState(false); | |
const [video, setVideo] = useState(null); | |
const ref = useRef(null); | |
const videoRef = useRef(null); | |
const isInView = useInView(ref, { | |
amount: 0, | |
margin: "100px 100px 100px 100px", | |
}); | |
useEffect(() => { | |
// console.log(videoRef.current.paused) | |
if (isInView === true && props.play === "autoplay") { | |
setPlay(true); | |
videoRef.current.play(); | |
} else { | |
setPlay(false); | |
videoRef.current.pause(); | |
videoRef.current.currentTime = 0; | |
} | |
}, [isInView]); | |
return /*#__PURE__*/ _jsxs("div", { | |
style: { | |
width: "100%", | |
height: "100%", | |
transformStyle: "preserve-3d", | |
transform: "translate3d(0,0,0)", | |
WebkitTransformStyle: "preserve-3d", | |
WebkitTransform: "translate3d(0,0,0)", | |
}, | |
ref: ref, | |
onClick: () => { | |
if (props.play === "onClick" && videoRef.current.paused === true) { | |
// console.log(videoRef.current.paused) | |
setPlay(true); | |
videoRef.current.play(); | |
} else if ( | |
props.play === "onClick" && | |
videoRef.current.paused === false | |
) { | |
// console.log(videoRef.current.paused) | |
setPlay(false); | |
videoRef.current.pause(); | |
} | |
}, | |
children: [ | |
/*#__PURE__*/ _jsx("video", { | |
ref: videoRef, | |
src: props.sourceType === "url" ? props.srcUrl : props.srcFile, | |
loop: props.loop, | |
muted: props.muted, | |
playsInline: true, | |
controls: props.control, | |
style: { | |
cursor: "auto", | |
width: "100%", | |
height: "100%", | |
display: "block", | |
objectFit: "cover", | |
position: "fixed", | |
zIndex: 0, | |
transformStyle: "preserve-3d", | |
transform: "translate3d(0,0,0)", | |
WebkitTransformStyle: "preserve-3d", | |
WebkitTransform: "translate3d(0,0,0)", | |
borderRadius: props.borderRadius, | |
overflow: "hidden", | |
}, | |
}), | |
props.play === "onClick" && | |
/*#__PURE__*/ _jsx(motion.button, { | |
style: { | |
width: "100%", | |
height: "100%", | |
background: props.playBackground, | |
color: "white", | |
display: "flex", | |
justifyContent: "center", | |
alignItems: "center", | |
position: "absolute", | |
borderRadius: props.borderRadius, | |
border: "none", | |
cursor: "pointer", | |
}, | |
animate: { opacity: play === false ? 1 : 0 }, | |
children: /*#__PURE__*/ _jsx("svg", { | |
xmlns: "http://www.w3.org/2000/svg", | |
width: props.playIconSize, | |
height: props.playIconSize, | |
fill: props.playIconColor, | |
viewBox: "0 0 256 256", | |
preserveAspectRatio: "none", | |
style: { pointerEvents: "none" }, | |
children: /*#__PURE__*/ _jsx("path", { | |
d: "M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z", | |
}), | |
}), | |
}), | |
], | |
}); | |
} // Styles are written in object syntax | |
// Learn more: https://reactjs.org/docs/dom-elements.html#style | |
addPropertyControls(VideoForSlides, { | |
sourceType: { | |
type: ControlType.SegmentedEnum, | |
options: ["url", "upload"], | |
optionTitles: ["URL", "Upload"], | |
defaultValue: "url", | |
}, | |
srcUrl: { | |
type: ControlType.String, | |
description: | |
"Hosted video file URL. For Youtube/Vimeo, use player components from Framer", | |
hidden(props) { | |
return props.sourceType === "upload"; | |
}, | |
}, | |
srcFile: { | |
type: ControlType.File, | |
allowedFileTypes: ["mov", "mp4", "avi"], | |
description: "The size of the file is limited by Framer", | |
hidden(props) { | |
return props.sourceType === "url"; | |
}, | |
}, | |
play: { | |
type: ControlType.SegmentedEnum, | |
options: ["autoplay", "onClick"], | |
defaultValue: "autoplay", | |
}, | |
playIconSize: { | |
type: ControlType.Number, | |
defaultValue: 32, | |
hidden(props) { | |
return props.play === "autoplay"; | |
}, | |
}, | |
playIconColor: { | |
type: ControlType.Color, | |
defaultValue: "white", | |
hidden(props) { | |
return props.play === "autoplay"; | |
}, | |
}, | |
playBackground: { | |
type: ControlType.Color, | |
defaultValue: "rgba(0,0,0,0.4)", | |
hidden(props) { | |
return props.play === "autoplay"; | |
}, | |
}, | |
loop: { type: ControlType.Boolean, defaultValue: true }, | |
muted: { type: ControlType.Boolean, defaultValue: true }, | |
control: { type: ControlType.Boolean, defaultValue: false }, | |
borderRadius: { type: ControlType.Number, defaultValue: 0 }, | |
}); | |
export const __FramerMetadata__ = { | |
exports: { | |
default: { | |
type: "reactComponent", | |
name: "VideoForSlides", | |
slots: [], | |
annotations: { | |
framerIntrinsicHeight: "200", | |
framerIntrinsicWidth: "200", | |
framerSupportedLayoutWidth: "fixed", | |
framerContractVersion: "1", | |
framerSupportedLayoutHeight: "fixed", | |
}, | |
}, | |
__FramerMetadata__: { type: "variable" }, | |
}, | |
}; | |
//# sourceMappingURL=./VideoForSlides.map |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment