<commit_before>import React from 'react';
import { connect } from 'react-redux';
import Linkify from 'react-linkify';

import { LinkButton, SimpleButton, RefButton, SimpleButtonLI, LinkButtonLI } from './buttons.jsx';
import { place_question } from './question.jsx';

import { api_connect, loadData } from './loading-api.jsx';
import { sdef, getSubmitFunction, LOADING_IN_PROCESS, LOADING_FAILED, LOADING_SUCCESSED } from './utils.jsx';

import { resetModalMode, dispatchModalMode } from './main-reducer.jsx'

import YouTube from 'react-youtube';

export class AnswerForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            player : null,
            full_len : 0,
            start : this.parse_time(this.props.answerText),
            end : 0,
            cur_time : 0,
            timer : null
        };
    }
    setAnswerText(text) {
        this.props.dispatch({
            type: 'SET_ANSWER_TEXT',
            text: text
        });
    }
    render() {
        const question_id = this.props.question_id;
        const answerText = this.props.answerText;
        const video_id = this.search_youtube(answerText);

        return <div>
            <h2>Предложите ваш ответ</h2>
            <input
                type="text"
                placeholder="youtube url"
                onChange={(event) => {
                    this.setAnswerText(event.target.value);
                    this.setState({start : this.parse_time(event.target.value)});
                }}
                value={answerText}
            />
            <br/>
            <button onClick={() => video_id &&
                this.props.submit(
                    'NEW_YOUTUBE_ANSWER',
                    { question_id: question_id, video_id : video_id, start : this.state.start, end : this.state.end },//TODO!
                    () => { this.setAnswerText(''); resetModalMode(this); }
                )
            }>Предложить ответ</button>
            { video_id && this.render_youtube(video_id) }
            <button onClick={() => resetModalMode(this)}>отмена</button>
        </div>;
    }

    update_time(player) {
        this.setState({cur_time : player.getCurrentTime()});
    }

    update_start_time(video, new_val) {
        this.state.timer && clearTimeout(this.state.timer);
        this.setState({start : new_val, timer : null});
        const p = {
            videoId : video,
            startSeconds : new_val,
            endSeconds : this.state.end
        };
        this.state.player.loadVideoById(p);
    }

    update_end_time(video, new_val) {
        this.state.timer && clearTimeout(this.state.timer);
        this.setState({end : new_val, timer : null});
        const p = {
            videoId : video,
            startSeconds : this.state.start,
            endSeconds : new_val
        };
        this.state.player.loadVideoById(p);
    }

    render_youtube(video) {
        const url_start = this.parse_time(this.props.answerText);
        const opts = {
            height: '390',
            width: '640',
            playerVars: { // https://developers.google.com/youtube/player_parameters
                start : url_start,
                autoplay: 0
            }
        };

        return <div>
            <br/>
            <YouTube
                videoId={video}
                opts={opts}
                onReady={(e) => {
                    this.setState({ player : e.target });
                    if (this.state.full_len == 0) {
                        const duration = e.target.getDuration();
                        this.setState({ full_len : duration, end : duration })
                    }
                }}
                onPlay={(e) => {
                    this.setState({ cur_time : e.target.getCurrentTime() });
                    this.setState({ timer : setInterval(() => this.update_time(e.target), 1000) });
                }}
                onPause={(e) => {
                    this.state.timer && clearTimeout(this.state.timer);
                    this.setState({ timer : null });
                }}
            />
            <br/>
            <table>
              <tr>
                <th></th>
                <th><button onClick={() => this.update_start_time(video, this.state.cur_time)}>{this.state.cur_time}</button></th>
                <th></th>
                <th><button onClick={() => this.update_end_time(video, this.state.cur_time)}>{this.state.cur_time}</button></th>
              </tr>
              <tr>
                <th>С</th>
                <th><input
                    type='text'
                    value={this.state.start}
                    onChange={(e) => this.update_start_time(video, e.target.value)}
                /></th>
                <th>секунды по</th>
                <th><input<commit_msg>Fixed time buttons in answer dialog<commit_after>import React from 'react';
import { connect } from 'react-redux';
import Linkify from 'react-linkify';

import { LinkButton, SimpleButton, RefButton, SimpleButtonLI, LinkButtonLI } from './buttons.jsx';
import { place_question } from './question.jsx';

import { api_connect, loadData } from './loading-api.jsx';
import { sdef, getSubmitFunction, LOADING_IN_PROCESS, LOADING_FAILED, LOADING_SUCCESSED } from './utils.jsx';

import { resetModalMode, dispatchModalMode } from './main-reducer.jsx'

import YouTube from 'react-youtube';

export class AnswerForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            player : null,
            full_len : 0,
            start : this.parse_time(this.props.answerText),
            end : 0,
            cur_time : 0,
            timer : null
        };
    }
    setAnswerText(text) {
        this.props.dispatch({
            type: 'SET_ANSWER_TEXT',
            text: text
        });
    }
    render() {
        const question_id = this.props.question_id;
        const answerText = this.props.answerText;
        const video_id = this.search_youtube(answerText);

        return <div>
            <h2>Предложите ваш ответ</h2>
            <input
                type="text"
                placeholder="youtube url"
                onChange={(event) => {
                    this.setAnswerText(event.target.value);
                    this.setState({start : this.parse_time(event.target.value)});
                }}
                value={answerText}
            />
            <br/>
            <button onClick={() => video_id &&
                this.props.submit(
                    'NEW_YOUTUBE_ANSWER',
                    { question_id: question_id, video_id : video_id, start : this.state.start, end : this.state.end },//TODO!
                    () => { this.setAnswerText(''); resetModalMode(this); }
                )
            }>Предложить ответ</button>
            { video_id && this.render_youtube(video_id) }
            <button onClick={() => resetModalMode(this)}>отмена</button>
        </div>;
    }

    update_time(player) {
        this.setState({cur_time : Math.round(player.getCurrentTime())});
    }

    update_start_time(video, new_val) {
        this.state.timer && clearTimeout(this.state.timer);
        this.setState({start : new_val, timer : null});
        const p = {
            videoId : video,
            startSeconds : new_val,
            endSeconds : this.state.end
        };
        this.state.player.loadVideoById(p);
    }

    update_end_time(video, new_val) {
        this.state.timer && clearTimeout(this.state.timer);
        this.setState({end : new_val, timer : null});
        const p = {
            videoId : video,
            startSeconds : this.state.start,
            endSeconds : new_val
        };
        this.state.player.loadVideoById(p);
    }

    render_youtube(video) {
        const url_start = this.parse_time(this.props.answerText);
        const opts = {
            height: '390',
            width: '640',
            playerVars: { // https://developers.google.com/youtube/player_parameters
                start : url_start,
                autoplay: 0
            }
        };

        return <div>
            <br/>
            <YouTube
                videoId={video}
                opts={opts}
                onReady={(e) => {
                    this.setState({ player : e.target });
                    if (this.state.full_len == 0) {
                        const duration = e.target.getDuration();
                        this.setState({ full_len : duration, end : duration })
                    }
                }}
                onPlay={(e) => {
                    this.update_time(e.target);
                    this.setState({ timer : setInterval(() => this.update_time(e.target), 1000) });
                }}
                onPause={(e) => {
                    this.state.timer && clearTimeout(this.state.timer);
                    this.setState({ timer : null });
                }}
            />
            <br/>
            <table>
              <tr>
                <th></th>
                <th><button onClick={() => this.update_start_time(video, this.state.cur_time)}>{this.state.cur_time}</button></th>
                <th></th>
                <th><button onClick={() => this.update_end_time(video, this.state.cur_time)}>{this.state.cur_time}</button></th>
              </tr>
              <tr>
                <th>С</th>
                <th><input
                    type='text'
                    value={this.state.start}
                    onChange={(e) => this.update_start_time(video, e.target.value)}
                /></th>
                <th>секунды по</th>
                <th><input
{'fraction_non_alphanumeric': 0.12864352662478112, 'fraction_numerical': 0.003501905448552889, 'mean_word_length': 1.5181535269709543, 'pattern_counts': {'":': 0, '<': 81, '<?xml version=': 0, '>': 101, 'https://': 2, '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': '1862908', 'n_tokens_mistral': 2784, 'n_tokens_neox': 2688, 'n_words': 474}