<commit_before>import React, { useState, useEffect } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import SkipPreviousIcon from '@material-ui/icons/SkipPrevious';
import SkipNextIcon from '@material-ui/icons/SkipNext';
import PlayArrowIcon from '@material-ui/icons/PlayArrow';
import Typography from '@material-ui/core/Typography';
import logo from '../../assets/icon.svg';
import Box from '@material-ui/core/Box';
import Slider from '@material-ui/core/Slider';
import VolumeDown from '@material-ui/icons/VolumeDown';
import VolumeUp from '@material-ui/icons/VolumeUp';
import Grid from '@material-ui/core/Grid';

const useStyles = makeStyles((theme) => ({
  text: {
    padding: theme.spacing(2, 2, 0),
  },
  paper: {
    paddingBottom: 50,
  },
  list: {
    marginBottom: theme.spacing(2),
  },
  subheader: {
    backgroundColor: '#6E7480',
  },
  appBar: {
    top: 'auto',
    bottom: 0,
    backgroundColor: '#6E7480',
  },
  grow: {
    flexGrow: 1,
  },
  fabButton: {
    position: 'absolute',
    zIndex: 1,
    top: -30,
    left: 0,
    right: 0,
    margin: '0 auto',
  },
  imgIcon: {
    height: 50,
    marginRight: theme.spacing(2),
  },
  volume: {
    width: 200,
    color: '#FFFFFF',
  },
  volumeSlider: {
    color: '#FFFFFF',
  },
  playbackTimeSlider: {
    width: 500,
    color: '#FFFFFF',
  },
}));

function Controls({ media }) {
  const classes = useStyles();
  const [volume, setVolume] = useState<number>(30);
  const [playbackTime, setPlaybackTime] = useState(0);

  useEffect(() => {}, []);

  // TODO(Oskar): Perhaps use debounce or similar for this, if user drags
  // the slider then the request will happen too many times.
  const handleVolumeChange = (event: any, newValue: number | number[]) => {
    setVolume(newValue as number);
  };

  const handlePlaybackTimeChange = (
    event: any,
    newValue: number | number[]
  ) => {
    setPlaybackTime(newValue as number);
  };

  const handlePlayClicked = (event: any) => {};

  return (
    <AppBar position="fixed" className={classes.appBar}><commit_msg>Added prop types to the Controls component.<commit_after>import React, { useState, useEffect } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import SkipPreviousIcon from '@material-ui/icons/SkipPrevious';
import SkipNextIcon from '@material-ui/icons/SkipNext';
import PlayArrowIcon from '@material-ui/icons/PlayArrow';
import Typography from '@material-ui/core/Typography';
import logo from '../../assets/icon.svg';
import Box from '@material-ui/core/Box';
import Slider from '@material-ui/core/Slider';
import VolumeDown from '@material-ui/icons/VolumeDown';
import VolumeUp from '@material-ui/icons/VolumeUp';
import Grid from '@material-ui/core/Grid';
import { PlaybackMedia } from '../types';

const useStyles = makeStyles((theme) => ({
  text: {
    padding: theme.spacing(2, 2, 0),
  },
  paper: {
    paddingBottom: 50,
  },
  list: {
    marginBottom: theme.spacing(2),
  },
  subheader: {
    backgroundColor: '#6E7480',
  },
  appBar: {
    top: 'auto',
    bottom: 0,
    backgroundColor: '#6E7480',
  },
  grow: {
    flexGrow: 1,
  },
  fabButton: {
    position: 'absolute',
    zIndex: 1,
    top: -30,
    left: 0,
    right: 0,
    margin: '0 auto',
  },
  imgIcon: {
    height: 50,
    marginRight: theme.spacing(2),
  },
  volume: {
    width: 200,
    color: '#FFFFFF',
  },
  volumeSlider: {
    color: '#FFFFFF',
  },
  playbackTimeSlider: {
    width: 500,
    color: '#FFFFFF',
  },
}));

interface Props {
  media: PlaybackMedia;
}

function Controls({ media }: Props) {
  const classes = useStyles();
  const [volume, setVolume] = useState<number>(30);
  const [playbackTime, setPlaybackTime] = useState(0);

  useEffect(() => {}, []);

  // TODO(Oskar): Perhaps use debounce or similar for this, if user drags
  // the slider then the request will happen too many times.
  const handleVolumeChange = (event: any, newValue: number | number[]) => {
    setVolume(newValue as number);
  };

  const handlePlaybackTimeChange = (
    event: any,
    newValue: number | number[]
  ) => {
    setPlaybackTime(newValue as number);
  };

  const handlePlayClicked = (event: any) => {};

  return (
    <AppBar position="fixed" className={classes.appBar}>
{'fraction_non_alphanumeric': 0.1536105032822757, 'fraction_numerical': 0.01575492341356674, 'mean_word_length': 3.650050864699898, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 17, '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': '3278428', 'n_tokens_mistral': 1535, 'n_tokens_neox': 1495, 'n_words': 384}