<commit_before>'use babel';

import React from 'react';
import ReactBaseComponent from '../scripts/reactBaseComponent.jsx'
import { firebaseApp, firebaseDb, base } from '../scripts/firebaseApp.js'
import { YOUTUBE_API_KEY } from '../../secret.js'
// import SwipeToRevealOptions from 'react-swipe-to-reveal-options';
import YouTube from 'react-youtube';

const BindStates = ['que', 'users', 'comments'];
const SyncStates = ['que', 'users', 'comments'];

const PlayerOpts = { height: '390', width: '640', playerVars: { autoplay: 1 } };

export default class Index extends ReactBaseComponent {
  constructor(props) {
    super(props);
    this.state = {
      playingVideo: '',
      searchText: '',
      commentText: '',
      userName: '',
      searchResult: [],
      searchResultNum: '',
      que: [],
      comments: [],
      users: []
    };

    this.bind('onChangeText', 'videoSearch', 'setPlayingVideo', 'notification');
    this.bind('onKeyPressForSearch', 'onKeyPressForComment');
    this.bind('onClickSetQue', 'onClickDeleteQue');
    // For YouTube Player
    this.bind('onReady', 'onPause', 'onEnd', 'onPlay');
  }

  componentWillMount() {
    SyncStates.map((state) => (
      base.bindToState(state, { context: this, state, asArray: true })
    ))
    base.bindToState('playingVideo', { context: this, state: 'playingVideo', asArray: false })
  }

  componentDidMount(){
    SyncStates.map((state) => (
      base.syncState(state, { context: this, state, asArray: true })
    ))
    base.syncState('playingVideo', { context: this, state: 'playingVideo', asArray: false })
  }

  notification(title, option) {
    new Notification(
      `${title} (${this.state.que.length + 1} remained)`,
      { body: option.body,  icon: option.icon, silent: true }
    );
  }

  setPlayingVideo(video){
    this.setState({
      playingVideo: video,
      que: this.state.que.filter((item) => item.key !== video.key),
      comments: [...this.state.comments, `play ${video.title}`]
    });
    this.notification('Now Playing♪', { body: video.title, icon: video.thumbnail.url });
  }

  onPlay() {
    console.log('playing');
  }

  onEnd() {
    if (this.state.que.length > 0) {
      this.setPlayingVideo(this.state.que[0]);
    } else {
      this.setState({ playingVideo: '' })
    }
  }

  onPause() {
    console.log(`pausing...${this.state.playingVideo.title}`)
  }

  onReady() {
    console.log(`ready...${this.state.playingVideo.title}`)
  }

  onClickSetPlayingVideo(video) {
    this.setPlayingVideo(video);
  }

  onKeyPressForSearch(e) {
    if (e.which !== 13) return false;
    e.preventDefault();
    this.videoSearch();
    return true;
  }

  onKeyPressForComment(e) {
    if (e.which !== 13) return false;
    e.preventDefault();
    this.setState({ comments: [...this.state.comments, e.target.value], commentText: '' });
    return true;
  }

  onClickSetQue(video) {
    const { que } = this.state;
    const { title, thumbnail } = video;
    if (que.length === 0 && this.state.playingVideo === ''){
      this.setState({ playingVideo: video })
    }else{
      this.setState({
        que: [...que, video],
        comments: [...this.state.comments, `add ${title}`]
      })
      this.notification('New Video Added!', { body: title, icon: thumbnail.url });<commit_msg>一旦コミット<commit_after>'use babel';

import React from 'react';
import ReactBaseComponent from '../scripts/reactBaseComponent.jsx'
import { firebaseApp, firebaseDb, base } from '../scripts/firebaseApp.js'
import { YOUTUBE_API_KEY } from '../../secret.js'
// import SwipeToRevealOptions from 'react-swipe-to-reveal-options';
import YouTube from 'react-youtube';

const SyncStates = [
  { state: 'que', asArray: true },
  { state: 'users', asArray: true },
  { state: 'comments', asArray: true },
  { state: 'playingVideo', asArray: false },
  { state: 'notificationActive', asArray: false },
];

const PlayerOpts = { height: '390', width: '640', playerVars: { autoplay: 1 } };

export default class Index extends ReactBaseComponent {
  constructor(props) {
    super(props);
    this.state = {
      playingVideo: '',
      searchText: '',
      commentText: '',
      userName: '',
      searchResult: [],
      searchResultNum: '',
      que: [],
      comments: [],
      users: [],
      notificationActive: false
    };

    this.bind('onChangeText', 'videoSearch', 'setPlayingVideo', 'notification');
    this.bind('onKeyPressForSearch', 'onKeyPressForComment');
    this.bind('onClickSetQue', 'onClickDeleteQue');
    // For YouTube Player
    this.bind('onReady', 'onPause', 'onEnd', 'onPlay');
  }

  componentWillMount() {
    SyncStates.map((obj) => {
      const { state, asArray } = obj;
      base.bindToState(state, { context: this, state, asArray });
    });
  }

  componentDidMount(){
    SyncStates.map((obj) => {
      const { state, asArray } = obj;
      base.syncState(state, { context: this, state, asArray });
    });
  }

  notification(title, option) {
    new Notification(
      `${title} (${this.state.que.length + 1} remained)`,
      { body: option.body,  icon: option.icon, silent: true }
    );
  }

  setPlayingVideo(video){
    this.setState({
      playingVideo: video,
      que: this.state.que.filter((item) => item.key !== video.key),
      comments: [...this.state.comments, `play ${video.title}`]
    });
  }

  onPlay() {
    this.notification('Now Playing♪', { body: video.title, icon: video.thumbnail.url });
  }

  onEnd() {
    if (this.state.que.length > 0) {
      this.setPlayingVideo(this.state.que[0]);
    } else {
      this.setState({ playingVideo: '' })
    }
  }

  onPause() {
    console.log(`pausing...${this.state.playingVideo.title}`)
  }

  onReady() {
    console.log(`ready...${this.state.playingVideo.title}`)
  }

  onClickSetPlayingVideo(video) {
    this.setPlayingVideo(video);
  }

  onKeyPressForSearch(e) {
    if (e.which !== 13) return false;
    e.preventDefault();
    this.videoSearch();
    return true;
  }

  onKeyPressForComment(e) {
    if (e.which !== 13) return false;
    e.preventDefault();
    this.setState({ comments: [...this.state.comments, e.target.value], commentText: '' });
    return true;
  }

  onClickSetQue(video) {
    const { que } = this.state;
    const { title, thumbnail } = video;
    if (que.length === 0 && this.state.playingVideo === ''){
      this.setState({ playingVideo: video })
    }else{
      this.setState({ que: [...que, video] })
      this.notification('New Video Added!', { body: title, icon: thumbnail.url });
{'fraction_non_alphanumeric': 0.17361323935029113, 'fraction_numerical': 0.004596996628869139, 'mean_word_length': 3.1441269841269843, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 11, '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': '1504556', 'n_tokens_mistral': 2150, 'n_tokens_neox': 2097, 'n_words': 427}