<commit_before>import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';

import { Col, Input, Row, Spin } from 'antd';
import MovieInfoModal from './MovieInfoModal';

import { emitAPIRequest } from '../../actions/api.actions';

class MoviesList extends Component {

    constructor(props){
        super(props);

        this.state = {
            currentSearchString: "",
            infomodalIsVisible: false,
            infomodalMovie: {},
            isLoadingMovies: false,
            movies: []
        };
    }

    componentWillMount(){
        this._getShows();
    }

    _getShows(){
        const { emitAPIRequest } = this.props;

        this.setState({
            isLoadingMovies: true
        });

        emitAPIRequest("movies.movies.get_all", {}, this._moviesReceived.bind(this), false);
    }

    _moviesReceived(movies){
        let processedMovies = [];
        movies.forEach((movie)=>{
            movie['is_visible'] = true;
            movie['searchable_text'] = this._prepStringForFilter(movie.title);
            processedMovies.push(movie);
        });
        this.setState({
            isLoadingMovies: false,
            movies: processedMovies
        });
    }

    _handleClickMovie(movie){
        this.setState({
            infomodalIsVisible: true,
            infomodalMovie: movie,
        });
    }

    _handleCloseModal(shouldReload = false){

        this.setState({
            infomodalIsVisible: false,
            infomodalMovie: {}
        });

        if(shouldReload){
            this._getShows();
        }
    }

    _handleChangeFilter(evt){
        const { movies } = this.state;

        const currentSearchString = evt.currentTarget.value;
        const filterText = this._prepStringForFilter(currentSearchString);

        let filteredMovies = [];
        movies.forEach((movie)=>{
            if(filterText === ""){
                movie.is_visible = true;
            } else {
                movie.is_visible = true;
                if(movie.searchable_text.search(filterText) === -1){
                    movie.is_visible = false;
                }
            }
            filteredMovies.push(movie);
        });

        this.setState({
            currentSearchString,
            movies: filteredMovies
        });
    }

    _prepStringForFilter(title){
        const lowerTitle = title.toLowerCase();
        return lowerTitle.replace(/[^a-z0-9]/g, "");
    }

    _buildMovieList(){
        const { movies } = this.state;

        let movieList = [];
        movies.forEach((movie)=>{
            if(movie.is_visible){
                const details = <Col 
                                    key={movie.id}
                                    className="ib-movies-thumbnail-box"
                                    span={4}>
                                    <div >
                                        <a  href="javascript:void(0)"
                                            onClick={this._handleClickMovie.bind(this, movie)}>
                                            <img
                                                className="ib-movies-thumbnail" 
                                                src={"/images/movies/" + movie.image_filename}/>
                                            <span dangerouslySetInnerHTML={{__html: movie.title}}></span>
                                        </a>
                                    </div>
                                </Col>;
                movieList.push(details);
            }
        });

        return movieList;
    }

    render() {
        const {
            currentSearchString,
            infomodalIsVisible,
            infomodalMovie,
            isLoadingMovies
        } = this.state;

        let content = "";
        if(isLoadingMovies){
            content = <Spin />;
        } else {
            content = this._buildMovieList();
        }

        return (
            <div>
                <Row>
                    <h2>Movies</h2>
                    <Input.Search
                        autoFocus
                        value={currentSearchString}
                        onChange={this._handleChangeFilter.bind(this)}
                        style={{ width: 400 }}
                        onSearch={this._handleChangeFilter.bind(this)}
                    />
                </Row>
                <Row>
                    {content}
                </Row>
                <MovieInfoModal
                    onClose={this._handleCloseModal.bind(this)}
                    movie={infomodalMovie}
                    isVisible={infomodalIsVisible}
                />
            </div>
        );
    }
}

const mapStateToProps = (state)=>{
    return {};<commit_msg>Added play button to the movie list.<commit_after>import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';

import { Col, Input, Row, Spin } from 'antd';
import MovieInfoModal from './MovieInfoModal';

import { emitAPIRequest } from '../../actions/api.actions';

import PlayButton from '../PlayButton';
class MoviesList extends Component {

    constructor(props){
        super(props);

        this.state = {
            currentSearchString: "",
            infomodalIsVisible: false,
            infomodalMovie: {},
            isLoadingMovies: false,
            movies: []
        };
    }

    componentWillMount(){
        this._getShows();
    }

    _getShows(){
        const { emitAPIRequest } = this.props;

        this.setState({
            isLoadingMovies: true
        });

        emitAPIRequest("movies.movies.get_all_with_file_info", {}, this._moviesReceived.bind(this), false);
    }

    _moviesReceived(movies){
        let processedMovies = [];
        movies.forEach((movie)=>{
            movie['is_visible'] = true;
            movie['searchable_text'] = this._prepStringForFilter(movie.title);
            processedMovies.push(movie);
        });
        this.setState({
            isLoadingMovies: false,
            movies: processedMovies
        });
    }

    _handleClickMovie(movie){
        this.setState({
            infomodalIsVisible: true,
            infomodalMovie: movie,
        });
    }

    _handleCloseModal(shouldReload = false){

        this.setState({
            infomodalIsVisible: false,
            infomodalMovie: {}
        });

        if(shouldReload){
            this._getShows();
        }
    }

    _handleChangeFilter(evt){
        const { movies } = this.state;

        const currentSearchString = evt.currentTarget.value;
        const filterText = this._prepStringForFilter(currentSearchString);

        let filteredMovies = [];
        movies.forEach((movie)=>{
            if(filterText === ""){
                movie.is_visible = true;
            } else {
                movie.is_visible = true;
                if(movie.searchable_text.search(filterText) === -1){
                    movie.is_visible = false;
                }
            }
            filteredMovies.push(movie);
        });

        this.setState({
            currentSearchString,
            movies: filteredMovies
        });
    }

    _prepStringForFilter(title){
        const lowerTitle = title.toLowerCase();
        return lowerTitle.replace(/[^a-z0-9]/g, "");
    }

    _buildMovieList(){
        const { movies } = this.state;

        let movieList = [];
        movies.forEach((movie)=>{
            if(movie.is_visible){
                console.log(movie);
                const playButton = this._buildPlayButton(movie);
                const details = <Col 
                                    key={movie.id}
                                    className="ib-movies-thumbnail-box"
                                    span={4}>
                                    <div >
                                        <a  href="javascript:void(0)"
                                            onClick={this._handleClickMovie.bind(this, movie)}>
                                            <img
                                                className="ib-movies-thumbnail" 
                                                src={"/images/movies/" + movie.image_filename}/>
                                        </a>
                                        {playButton}
                                        <a  href="javascript:void(0)"
                                            onClick={this._handleClickMovie.bind(this, movie)}>
                                            <span dangerouslySetInnerHTML={{__html: movie.title}}></span>
                                        </a>
                                    </div>
                                </Col>;
                movieList.push(details);
            }
        });

        return movieList;
    }

    _buildPlayButton(movie){
        const { directories } = this.props;
        if(movie.file_info.hasOwnProperty('id')){
            const fullPath = directories.Movies + "/" + movie.file_info.subpath;
            return <PlayButton filename={movie.file_info.filename} fullPath={fullPath} />;
        }
        return "";
    }

    render() {
        const {
            currentSearchString,
            infomodalIsVisible,
            infomodalMovie,
            isLoadingMovies
        } = this.state;

        let content = "";
        if(isLoadingMovies){
            content = <Spin />;
        } else {
            content = this._buildMovieList();
        }

        return (
            <div>
                <Row>
                    <h2>Movies</h2>
                    <Input.Search
                        autoFocus
                        value={currentSearchString}
                        onChange={this._handleChangeFilter.bind(this)}
                        style={{ width: 400 }}
                        onSearch={this._handleChangeFilter.bind(this)}
                    />
                </Row>
                <Row>
                    {content}
                </Row>
                <MovieInfoModal
                    onClose={this._handleCloseModal.bind(this)}
                    movie={infomodalMovie}
                    isVisible={infomodalIsVisible}
                />
            </div>
        );
    }
}

const mapStateToProps = (state)=>{
    const { settings } = state;
    return {
        directories: settings.settings.directories
    }
{'fraction_non_alphanumeric': 0.1065252698958632, 'fraction_numerical': 0.002006305531670966, 'mean_word_length': 1.211705049651384, 'pattern_counts': {'":': 0, '<': 46, '<?xml version=': 0, '>': 54, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 42, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '516419', 'n_tokens_mistral': 2693, 'n_tokens_neox': 2501, 'n_words': 415}