<commit_before>import React, { useState, useEffect, useRef, useContext } from 'react'
import { Box, Flex } from 'blockstack-ui'
import { transition } from '@common/theme'
import ReactPlayer from 'react-player'
import CloseIcon from 'mdi-react/CloseIcon'
import { useLockBodyScroll } from 'react-use'
import { useClickOutside } from 'use-events'
export const ModalContext = React.createContext()

const useModalHooks = () => {
  const { open, handleClose, ...rest } = useContext(ModalContext)
  const ref = useRef(null)
  const [isActive] = useClickOutside([ref], () => null)
  useEffect(() => {
    if (isActive && open) {
      handleClose()
    }
  }, [isActive])

  return { ref, open, handleClose, ...rest }
}

export const ModalContextProvider = ({ children }) => {
  const [state, setState] = useState({
    src: null,
    open: false
  })
  const handleClose = () =>
    setState({
      src: null,
      open: false
    })
  const handleOpen = (src) =>
    setState({
      src,
      open: true
    })

  return (
    <ModalContext.Provider value={{ ...state, handleClose, handleOpen }}>
      {children}
    </ModalContext.Provider>
  )
}

const Modal = ({ ...rest }) => {
  const { src, open, ref, handleClose } = useModalHooks()
  useLockBodyScroll(open)
  return (
    <Flex
      flexDirection="column"
      position="fixed"
      alignItems="center"
      justifyContent="center"
      width="100%"
      height="100vh"
      top={0}
      left={0}
      bg="rgba(0,0,0,0.8)"
      zIndex={99999999999}
      p={[5, 5, 8]}
      opacity={open ? 1 : 0}
      transition={transition}
      style={{
        pointerEvents: open ? 'unset' : 'none'
      }}
      {...rest}
    >
      <Box width={1} maxWidth="1176px" mx="auto">
        <Flex pb={2} justifyContent="flex-end">
          <Box onClick={handleClose}>
            <CloseIcon size={32} color="white" />
          </Box>
        </Flex>
        <Box width={1} position="relative">
          <div ref={ref}>
            <Box width={1} height={'0px'} pb="56.25%" />
            <Box position="absolute" top={0} size="100%">
              {src ? (
                <ReactPlayer
                  controls
                  width="100%"
                  height="100%"
                  playsinline
                  url={src}
                />
              ) : null}
            </Box>
          </div>
        </Box>
      </Box>
    </Flex>
  )
}

export { Modal }
<commit_msg>add autoplay when modal is open for videos<commit_after>import React, { useState, useEffect, useRef, useContext } from 'react'
import { Box, Flex } from 'blockstack-ui'
import { transition } from '@common/theme'
import ReactPlayer from 'react-player'
import CloseIcon from 'mdi-react/CloseIcon'
import { useLockBodyScroll } from 'react-use'
import { useClickOutside } from 'use-events'
export const ModalContext = React.createContext()

const useModalHooks = () => {
  const { open, handleClose, ...rest } = useContext(ModalContext)
  const ref = useRef(null)
  const [isActive] = useClickOutside([ref], () => null)
  useEffect(() => {
    if (isActive && open) {
      handleClose()
    }
  }, [isActive])

  return { ref, open, handleClose, ...rest }
}

export const ModalContextProvider = ({ children }) => {
  const [state, setState] = useState({
    src: null,
    open: false
  })
  const handleClose = () =>
    setState({
      src: null,
      open: false
    })
  const handleOpen = (src) =>
    setState({
      src,
      open: true
    })

  return (
    <ModalContext.Provider value={{ ...state, handleClose, handleOpen }}>
      {children}
    </ModalContext.Provider>
  )
}

const Modal = ({ ...rest }) => {
  const { src, open, ref, handleClose } = useModalHooks()
  useLockBodyScroll(open)
  return (
    <Flex
      flexDirection="column"
      position="fixed"
      alignItems="center"
      justifyContent="center"
      width="100%"
      height="100vh"
      top={0}
      left={0}
      bg="rgba(0,0,0,0.8)"
      zIndex={99999999999}
      p={[5, 5, 8]}
      opacity={open ? 1 : 0}
      transition={transition}
      style={{
        pointerEvents: open ? 'unset' : 'none'
      }}
      {...rest}
    >
      <Box width={1} maxWidth="1176px" mx="auto">
        <Flex pb={2} justifyContent="flex-end">
          <Box onClick={handleClose}>
            <CloseIcon size={32} color="white" />
          </Box>
        </Flex>
        <Box width={1} position="relative">
          <div ref={ref}>
            <Box width={1} height={'0px'} pb="56.25%" />
            <Box position="absolute" top={0} size="100%">
              {src ? (
                <ReactPlayer
                  controls
                  width="100%"
                  height="100%"
                  playsinline
                  url={src}
                  playing={open}
                />
              ) : null}
            </Box>
          </div>
        </Box>
      </Box>
    </Flex>
  )
}

export { Modal }

{'fraction_non_alphanumeric': 0.15376864167674326, 'fraction_numerical': 0.02176541717049577, 'mean_word_length': 2.054153846153846, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 55, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 2, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4864447', 'n_tokens_mistral': 1607, 'n_tokens_neox': 1527, 'n_words': 354}