<commit_before>import React, { Component } from "react"
import styled from "styled-components"
import {
  addFSEventListener,
  exitFullscreen,
  fullscreenEnabled,
  isFullscreen,
  removeFSEventListener,
  requestFullscreen
} from "./FullscreenHelpers"
import { VideoControls, VideoControlsContainer } from "./VideoControls"

interface Props extends React.HTMLProps<HTMLDivElement> {
  url: string,
  title?: string,
  notifyIsPaused?: () => void,
  forcePlay?: boolean
}

interface State {
  isMuted: boolean,
  isPlaying: boolean,
  currentTime: number,
  duration: number
}

export class VideoPlayer extends Component<Props, State> {
  public video: HTMLVideoElement
  public videoPlayer: HTMLDivElement

  state = {
    isMuted: false,
    isPlaying: this.props.forcePlay,
    currentTime: 0,
    duration: 0
  }

  componentDidMount() {
    if (this.video) {
      if (fullscreenEnabled()){
        addFSEventListener(this.video)
      }
      this.video.addEventListener("timeupdate", this.updateTime)
      this.video.addEventListener("loadedmetadata", this.setDuration)
    }
  }

  componentWillUnmount() {
    if (fullscreenEnabled()) {
      removeFSEventListener(this.video)
    }
    this.video.removeEventListener("timeupdate", this.updateTime)
  }

  componentWillReceiveProps (nextProps) {
    if (nextProps.forcePlay){
      this.forcePlay()
    }
  }

  setDuration = (e) => {
    this.setState({
      duration: e.target.duration
    })
  }

  updateTime = (e) => {
    this.setState({
      currentTime: e.target.currentTime
    })
  }

  togglePlay = () => {
    if (this.state.isPlaying) {
      this.video.pause()
      if (this.props.notifyIsPaused) {
        this.props.notifyIsPaused()
      }
    } else {
      this.video.play()
    }

    this.setState({
      isPlaying: !this.state.isPlaying
    })
  }

  toggleMute = () => {
    this.setState({
      isMuted: !this.state.isMuted
    })
  }

  forcePlay = () => {
    this.video.play()
    this.setState({
      isPlaying: true
    })
  }

  toggleFullscreen = () => {
    if (fullscreenEnabled()) {
      if (isFullscreen()) {
        exitFullscreen()
      } else {
        requestFullscreen(this.videoPlayer)
      }
    }
  }

  seekTo = (value) => {
    this.video.currentTime = value
    this.setState({
      currentTime: value
    })
  }

  pause = () => {
    this.video.pause()
    this.setState({
      isPlaying: false
    })
  }

  play = () => {
    this.video.play()
    this.setState({
      isPlaying: true
    })
  }

  render() {
    const {
      url,
      title
    } = this.props

    return (
      <VideoContainer
        innerRef={container => (this.videoPlayer = container)}
      >
        <video playsInline<commit_msg>Start on video analytics<commit_after>import React, { Component } from "react"
import styled from "styled-components"
import { track } from "../../../../Utils/track"
import {
  addFSEventListener,
  exitFullscreen,
  fullscreenEnabled,
  isFullscreen,
  removeFSEventListener,
  requestFullscreen
} from "./FullscreenHelpers"
import { VideoControls, VideoControlsContainer } from "./VideoControls"

interface Props extends React.HTMLProps<HTMLDivElement> {
  url: string,
  title?: string,
  notifyIsPaused?: () => void,
  forcePlay?: boolean
  tracking?: any
}

interface State {
  isMuted: boolean,
  isPlaying: boolean,
  currentTime: number,
  duration: number
}

@track()
export class VideoPlayer extends Component<Props, State> {
  public video: HTMLVideoElement
  public videoPlayer: HTMLDivElement

  state = {
    isMuted: false,
    isPlaying: this.props.forcePlay,
    currentTime: 0,
    duration: 0
  }

  componentDidMount() {
    if (this.video) {
      if (fullscreenEnabled()){
        addFSEventListener(this.video)
      }
      this.video.addEventListener("timeupdate", this.updateTime)
      this.video.addEventListener("loadedmetadata", this.setDuration)
    }
  }

  componentWillUnmount() {
    if (fullscreenEnabled()) {
      removeFSEventListener(this.video)
    }
    this.video.removeEventListener("timeupdate", this.updateTime)
  }

  componentWillReceiveProps (nextProps) {
    if (nextProps.forcePlay){
      this.forcePlay()
    }
  }

  setDuration = (e) => {
    this.setState({
      duration: e.target.duration
    })
  }

  updateTime = (e) => {
    this.setState({
      currentTime: e.target.currentTime
    })
  }

  togglePlay = () => {
    if (this.state.isPlaying) {
      this.video.pause()
      if (this.props.notifyIsPaused) {
        this.props.notifyIsPaused()
      }
    } else {
      this.video.play()
    }

    this.setState({
      isPlaying: !this.state.isPlaying
    })
  }

  toggleMute = () => {
    this.setState({
      isMuted: !this.state.isMuted
    })
  }

  forcePlay = () => {
    this.video.play()
    this.setState({
      isPlaying: true
    })
  }

  toggleFullscreen = () => {
    if (fullscreenEnabled()) {
      if (isFullscreen()) {
        exitFullscreen()
      } else {
        requestFullscreen(this.videoPlayer)
      }
    }
  }

  seekTo = (value) => {
    this.video.currentTime = value
    this.setState({
      currentTime: value
    })
  }

  pause = () => {
    this.video.pause()
    this.setState({
      isPlaying: false
    })
  }

  play = () => {
    this.video.play()
    this.setState({
      isPlaying: true
    })
  }

  trackDuration = (percentComplete) => {
    this.props.tracking.trackEvent({
      action: "Video duration",
      label: "Display ad video duration",
      percent_complete: percentComplete,
      unit_layout: "canvas_standard"
    })
  }

  trackSeconds = (secondsComplete) => {
    this.props.tracking.trackEvent({
      action: "Video seconds",
      label: "Display ad video seconds",
      seconds_complete: secondsComplete,
      unit_layout: "canvas_standard"
    })
  }

  render() {
    const {
      url,
      title
    } = this.props

    return (
      <VideoContainer
        innerRef={container => (this.videoPlayer = container)}
      >
        <video playsInline
{'fraction_non_alphanumeric': 0.126657824933687, 'fraction_numerical': 0.000663129973474801, 'mean_word_length': 2.5698224852071005, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 33, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, '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': '7387614', 'n_tokens_mistral': 1933, 'n_tokens_neox': 1889, 'n_words': 349}