VideoForSlides-WhLe.js

// 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