{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/x50KvBxDjJJvbUwuCEoN/n6yIvD7P1eabodJq22ig/Sequence.js"],
  "sourcesContent": ["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { useRef, useState, useEffect } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { addPropertyControls, ControlType } from \"framer\";\nimport SequencePlayer from \"react-sequence-player\";\nexport default function Sequence(props) {\n  const {\n    style,\n    frames,\n    size,\n    fps,\n    columns,\n    rows,\n    sprite,\n    scale,\n    delay\n  } = props;\n  const playerRef = useRef(null);\n  const [active, setActive] = useState(false);\n  const [didRunOnce, setDidRunOnce] = useState(false);\n  const handleControl = action => () => {\n    switch (action) {\n      case \"play\":\n        playerRef.current.play();\n        break;\n      case \"pause\":\n        playerRef.current.pause();\n        break;\n      case \"resume\":\n        playerRef.current.resume();\n        break;\n      case \"reverse\":\n        playerRef.current.reverse();\n        break;\n    }\n  };\n  useEffect(() => {\n    if (playerRef.current) {\n      if (active) playerRef.current.play();else playerRef.current.reverse();\n    }\n  }, [active, playerRef]);\n  const data = [...Array(frames).keys()].map(index => {\n    return {\n      x: -size * (index % columns) * scale,\n      y: -size * Math.floor(index / columns) * scale\n    };\n  });\n  return /*#__PURE__*/_jsx(motion.div, {\n    onTap: () => didRunOnce && setActive(!active),\n    whileHover: {\n      scale: 1.05\n    },\n    whileTap: {\n      scale: 0.95\n    },\n    style: {\n      cursor: \"pointer\"\n    },\n    children: /*#__PURE__*/_jsx(SequencePlayer, {\n      image: sprite,\n      data: data,\n      playerSize: {\n        width: size * scale,\n        height: size * scale\n      },\n      imageSize: {\n        width: size * columns * scale,\n        height: size * rows * scale\n      },\n      delay: 1 / fps * 1000,\n      ref: playerRef,\n      onLoad: () => setTimeout(() => setActive(!active), delay),\n      onComplete: () => {\n        if (!didRunOnce) {\n          handleControl(\"reverse\");\n          setDidRunOnce(true);\n        }\n      }\n    })\n  });\n}\n;\nSequence.defaultProps = {\n  frames: 95,\n  size: 570,\n  columns: 19,\n  rows: 5,\n  fps: 24,\n  delay: 0,\n  scale: 0.5\n};\naddPropertyControls(Sequence, {\n  sprite: {\n    title: \"Sprite\",\n    type: ControlType.Image\n  },\n  frames: {\n    type: ControlType.Number\n  },\n  size: {\n    type: ControlType.Number,\n    min: 10,\n    max: 640,\n    step: 1\n  },\n  columns: {\n    type: ControlType.Number\n  },\n  rows: {\n    type: ControlType.Number\n  },\n  fps: {\n    type: ControlType.Number,\n    min: 8,\n    max: 120\n  },\n  delay: {\n    type: ControlType.Number,\n    min: 0,\n    max: 1000,\n    step: 50\n  },\n  scale: {\n    type: ControlType.Number,\n    step: 0.01,\n    min: 0.01,\n    max: 8\n  }\n});\nconst containerStyle = {\n  display: \"flex\",\n  justifyContent: \"center\",\n  alignItems: \"center\",\n  overflow: \"hidden\"\n};\nexport const __FramerMetadata__ = {\n  \"exports\": {\n    \"default\": {\n      \"type\": \"reactComponent\",\n      \"name\": \"Sequence\",\n      \"slots\": [],\n      \"annotations\": {\n        \"framerContractVersion\": \"1\"\n      }\n    },\n    \"__FramerMetadata__\": {\n      \"type\": \"variable\"\n    }\n  }\n};\n//# sourceMappingURL=./Sequence.map"],
  "mappings": "8JAKe,SAARA,EAA0BC,EAAO,CACtC,GAAM,CACJ,MAAAC,EACA,OAAAC,EACA,KAAAC,EACA,IAAAC,EACA,QAAAC,EACA,KAAAC,EACA,OAAAC,EACA,MAAAC,EACA,MAAAC,CACF,EAAIT,EACEU,EAAYC,EAAO,IAAI,EACvB,CAACC,EAAQC,CAAS,EAAIC,EAAS,EAAK,EACpC,CAACC,EAAYC,CAAa,EAAIF,EAAS,EAAK,EAC5CG,EAAgBC,GAAU,IAAM,CACpC,OAAQA,EAAQ,CACd,IAAK,OACHR,EAAU,QAAQ,KAAK,EACvB,MACF,IAAK,QACHA,EAAU,QAAQ,MAAM,EACxB,MACF,IAAK,SACHA,EAAU,QAAQ,OAAO,EACzB,MACF,IAAK,UACHA,EAAU,QAAQ,QAAQ,EAC1B,KACJ,CACF,EACAS,EAAU,IAAM,CACVT,EAAU,UACRE,EAAQF,EAAU,QAAQ,KAAK,EAAOA,EAAU,QAAQ,QAAQ,EAExE,EAAG,CAACE,EAAQF,CAAS,CAAC,EACtB,IAAMU,EAAO,CAAC,GAAG,MAAMlB,CAAM,EAAE,KAAK,CAAC,EAAE,IAAImB,IAClC,CACL,EAAG,CAAClB,GAAQkB,EAAQhB,GAAWG,EAC/B,EAAG,CAACL,EAAO,KAAK,MAAMkB,EAAQhB,CAAO,EAAIG,CAC3C,EACD,EACD,OAAoBc,EAAKC,EAAO,IAAK,CACnC,MAAO,IAAMR,GAAcF,EAAU,CAACD,CAAM,EAC5C,WAAY,CACV,MAAO,IACT,EACA,SAAU,CACR,MAAO,GACT,EACA,MAAO,CACL,OAAQ,SACV,EACA,SAAuBU,EAAKE,EAAgB,CAC1C,MAAOjB,EACP,KAAMa,EACN,WAAY,CACV,MAAOjB,EAAOK,EACd,OAAQL,EAAOK,CACjB,EACA,UAAW,CACT,MAAOL,EAAOE,EAAUG,EACxB,OAAQL,EAAOG,EAAOE,CACxB,EACA,MAAO,EAAIJ,EAAM,IACjB,IAAKM,EACL,OAAQ,IAAM,WAAW,IAAMG,EAAU,CAACD,CAAM,EAAGH,CAAK,EACxD,WAAY,IAAM,CACXM,IACHE,EAAc,SAAS,EACvBD,EAAc,EAAI,EAEtB,CACF,CAAC,CACH,CAAC,CACH,CAEAjB,EAAS,aAAe,CACtB,OAAQ,GACR,KAAM,IACN,QAAS,GACT,KAAM,EACN,IAAK,GACL,MAAO,EACP,MAAO,EACT,EACA0B,EAAoB1B,EAAU,CAC5B,OAAQ,CACN,MAAO,SACP,KAAM2B,EAAY,KACpB,EACA,OAAQ,CACN,KAAMA,EAAY,MACpB,EACA,KAAM,CACJ,KAAMA,EAAY,OAClB,IAAK,GACL,IAAK,IACL,KAAM,CACR,EACA,QAAS,CACP,KAAMA,EAAY,MACpB,EACA,KAAM,CACJ,KAAMA,EAAY,MACpB,EACA,IAAK,CACH,KAAMA,EAAY,OAClB,IAAK,EACL,IAAK,GACP,EACA,MAAO,CACL,KAAMA,EAAY,OAClB,IAAK,EACL,IAAK,IACL,KAAM,EACR,EACA,MAAO,CACL,KAAMA,EAAY,OAClB,KAAM,IACN,IAAK,IACL,IAAK,CACP,CACF,CAAC",
  "names": ["Sequence", "props", "style", "frames", "size", "fps", "columns", "rows", "sprite", "scale", "delay", "playerRef", "pe", "active", "setActive", "ye", "didRunOnce", "setDidRunOnce", "handleControl", "action", "ue", "data", "index", "p", "motion", "dist_default", "addPropertyControls", "ControlType"]
}