<commit_before>// const Lightbox = require('./lib/react-images/react-images'); import Lightbox
// from './lib/react-images/lib/Lightbox';

const jsonFileList = [];
jsonFileList.push("./images.json");



const TABLE_SIZE = 4 * 4;
const MAX_PATH_LENGTH = 50;

class ImageBox extends React.Component {
  constructor(props) {
    super(props);
    let length = 1;
    this.state = {
      jsonFile: jsonFileList[jsonFileList.length - 1],
      showControl: true,
      style: {
        maxWidth: this.computeMaxWidth(length),
        maxHeight: this.computeMaxHeight(length)
      },
      index: 0,
      length: length,
      images: []
    };

    document.addEventListener('keypress', (event) => {
      const keyName = event.key;

      if (keyName === 'Control') {
        return;
      }

      if (event.ctrlKey) {} else {
        console.log(`Key pressed ${keyName}`);
        if (keyName === 's' || keyName === 'S' || keyName === 'h' || keyName === 'H') {
          if (this.state.showControl) {
            this.setState({showControl: false});
          } else {
            this.setState({showControl: true});
          }
        } else if (keyName === 'ArrowUp') {
          this.explorer({images: this.state.images, index: this.state.index});
        } else if (keyName === 'ArrowLeft' || keyName === 'Backspace' || keyName === 'Delete' || keyName === 'b' || keyName === 'B') {
          this.setPrevImage(1 * this.state.length);
        } else {
          this.setNextImage(1 * this.state.length);
        }
      }
    }, false);
  }

  componentDidMount() {
    this.setJsonFile(this.state.jsonFile);
  }

  setJsonFile(jsonFile) {
    console.log('JSON file: ' + jsonFile);
    let xhr = new XMLHttpRequest();
    xhr.open("GET", jsonFile, true);
    xhr.onload = function (e) {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          // console.log(xhr.responseText);
          let directories = JSON.parse(xhr.responseText);
          directories = directories.sort(function (aa, bb) {
            return aa.directory > bb.directory
              ? 1
              : -1;
          });
          for (let directory of directories) {
            directory.directory = directory
              .directory
              .replace(/\\\\/g, '/')
              .replace(/\\/g, '/');
            for (let image of directory.images) {
              image.directory = image
                .directory
                .replace(/\\\\/g, '/')
                .replace(/\\/g, '/');
            }
          }

          let extList = {
            '': 0
          };
          let maxWidth = 0;
          let maxHeight = 0;
          let fids = {}
          for (let directory of directories) {
            for (let image of directory.images) {
              if (extList[image.ext]) {
                extList[image.ext] -= 0;
                extList[image.ext] += 1;
              } else {
                extList[image.ext] = 1;
              }
              if (image.width > maxWidth) {
                maxWidth = image.width;
              }
              if (image.height > maxHeight) {
                maxHeight = image.height;
              }
              fids[image.fid] = image;
            }
          }
          console.log('extList ' + JSON.stringify(extList, null, 2))
          this.setState({
            jsonFile: jsonFile,
            directories: directories,
            extList: extList,
            maxWidth: maxWidth,
            maxHeight: maxHeight,
            fids: fids,
            images: [],
            directory: '',
            index: 0
          });
        } else {
          console.error(xhr.status + ': ' + xhr.statusText);
        }
      }
    }.bind(this);
    xhr.onerror = function (e) {
      console.error(xhr.status + ': ' + xhr.statusText);
    };
    xhr.send(null);
  }

  setNextImage(step) {
    if (this.state) {
      let index = this.state.index + step;
      if (this.state.images.length && this.state.images.length < index) {
        index = this.state.images.length - 1;
      }
      console.log('index ' + index);
      this.setState({index: index});
    }
  }

  setPrevImage(step) {
    if (this.state) {
      let index = this.state.index - step;
      if (index < 0) {
        index = 0;
      }
      console.log('index ' + index);
      this.setState({index: index});
    }
  }

  setMaxWidth(newState) {
    let length = this.state.length;
    if (newState.length) {
      length = newState.length;
    }
    if (length > 1) {
      this.setMaxSize();
      return;
    }
    let style = this.state.style;
    delete style.maxWidth;
    delete style.maxHeight;
    style.maxWidth = this.computeMaxWidth(length);
    let _newState = Object.assign({
      style: style
    }, newState);
    this.setState(_newState);
  }

  computeMaxWidth(length) {
    return (window.innerWidth - 5) * 0.95 / Math.ceil(Math.sqrt(length));
  }

  setMaxHeight(newState) {
    let length = this.state.length;
    if (newState.length) {
      length = newState.length;
    }
    if (length > 1) {
      this.setMaxSize();
      return;
    }
    let style = this.state.style;
    delete style.maxWidth;
    delete style.maxHeight;
    style.maxHeight = this.computeMaxHeight(length);
    let _newState = Object.assign({
      style: style
    }, newState);
    this.setState(_newState);
  }

  computeMaxHeight(length) {
    return (window.innerHeight - 5) * 0.95 / Math.ceil(Math.sqrt(length));
  }

  setMaxSize(newState) {
    let length = this.state.length;
    if (newState.length) {
      length = newState.length;
    }
    let style = this.state.style;
    delete style.maxWidth;
    delete style.maxHeight;
    style.maxWidth = this.computeMaxWidth(length);
    style.maxHeight = this.computeMaxHeight(length);
    let _newState = Object.assign({
      style: style
    }, newState);
    console.log('#setMaxSize ' + JSON.stringify(style, null, 2));
    this.setState(_newState);
  }

  resetMaxSize(newState) {
    let length = this.state.length;
    if (newState.length) {
      length = newState.length;
    }
    if (length > 1) {
      this.setMaxSize();
      return;
    }
    let style = this.state.style;
    delete style.maxWidth;
    delete style.maxHeight;
    let _newState = Object.assign({
      style: style
    }, newState);
    this.setState(_newState);
  }

  render() {
    let images = this.getFilteredImages();
    let image = '';
    let directory = '';
    if (this.state.directories) {
      if (images.length) {
        image = images[0];
        directory = image.directory;
        console.log('images ' + images.length);
        let _image = Object.assign({}, image);
        delete _image.similarities;
        console.log('image ' + JSON.stringify(_image, null, 2));
      } else {
        let state = {};
        state = Object.assign(state, this.state);
        delete state.directories;
        delete state.fids;
        console.log('state ' + JSON.stringify(state, null, 2));
      }
    }

    let imgClassName = '';
    let imageStyle = {};
    if (this.state.length == 1 && this.state.style.maxWidth && !this.state.style.maxHeight) {
      imgClassName = "img-responsive";
      console.log('responsive style');
    }
    if (!imgClassName) {
      imageStyle = Object.assign(imageStyle, this.state.style);
      console.log('not responsive style ' + JSON.stringify(imageStyle, null, 2));
    }

    let media;
    if (images.length) {
      media = this.renderMedia(imgClassName, imageStyle, images);
    }
    let controller = this.renderController(image, directory);

    let styleDiv1 = {};
    styleDiv1.position = 'absolute';
    styleDiv1.zIndex = 1;
    styleDiv1.align = 'center';
    styleDiv1.textAlign = 'center';
    let styleDiv2 = {};
    styleDiv2.position = 'fixed';
    styleDiv2.bottom = 0;
    styleDiv2.right = 0;
    styleDiv2.zIndex = 10;
    styleDiv2.opacity = 0.9;

    // this.state.lightboxIsOpen = false; this.gotoPrevious = this.previousImage;
    // this.gotoNext = this.nextImage; this.closeLightbox = this.nextImage;

    return (
      <div className="imageBox">
        <div style={styleDiv1} ref='div1'>
          {media}
        </div>
        <div style={styleDiv2} ref='div2'>
          {controller}
        </div>
        {/*<Lightbox
        images={[{ src: imagePath }, { src: imagePath }]}
        isOpen={this.state.lightboxIsOpen}
        onClickPrev={this.gotoPrevious}
        onClickNext={this.gotoNext}
        onClose={this.closeLightbox}
      />*/}
      </div>
    );
  }

  renderMedia(imgClassName, imageStyle, images) {
    let imagePathes = [];
    for (let _image of images) {
      let _imagePath = '';
      _imagePath += 'file:///';
      _imagePath += _image.directory + '/' + _image.name;
      _imagePath = _imagePath.replace(/\\/g, '/');

      //      _imagePath = encodeURI(_imagePath);      _imagePath =
      // encodeURIComponent(_imagePath);
      _imagePath = _imagePath.replace(/\#/g, escape('#'));
      _imagePath = _imagePath.replace(/\%/g, escape('%'));

      imagePathes.push(_imagePath);
    }

    if (this.state.length == 1) {
      let _image = images[0];
      let _imagePath = imagePathes[0];
      let mediaTag = this.renderImage(imgClassName, imageStyle, _imagePath);
      if (_image.ext == '.mp4' || _image.ext == '.flv' || _image.ext == '.swf') {
        mediaTag = this.renderVideo(imgClassName, imageStyle, _imagePath, _image.ext);
      }
      return (
        <div ref='images' onClick={() => this.setNextImage(1 * this.state.length)}>
          {mediaTag}
        </div>
      );
    }

    let sqrtLength = Math.ceil(Math.sqrt(this.state.length));
    let imageRows = [];
    for (let ii = 0; ii < sqrtLength; ii++) {
      let imageCols = [];
      imageRows.push(imageCols);
      for (let jj = 0; jj < sqrtLength; jj++) {
        const index = ii * sqrtLength + jj;
        if (index < images.length) {
          let _image = {};
          _image = Object.assign(_image, images[index]);
          _image.imagePath = imagePathes[index];
          _image.index = this.state.index + index;
          imageCols.push(_image);
          //          console.log('table ' + JSON.stringify(_image, null, 2));
        }
      }
    }
    let tableStyle = {};
    tableStyle.display = 'table-cell';
    tableStyle.textAlign = 'center';
    tableStyle.verticalAlign = 'middle';
    tableStyle.width = imageStyle.maxWidth;
    tableStyle.height = imageStyle.maxHeight;
    let imageTags = imageRows.map((imageCols, ii) => <tr key={ii}>{imageCols
        .map(function (_image, jj) {
          let _imagePath = _image.imagePath;
          let mediaTag = this.renderImage(imgClassName, imageStyle, _imagePath);
          if (_image.ext == '.mp4' || _image.ext == '.flv' || _image.ext == '.swf') {
            mediaTag = this.renderVideo(imgClassName, imageStyle, _imagePath);
          }
          return (
            <td
              key={jj}
              style={tableStyle}
              className="img-thumbnail"
              onClick={(event) => this.setMaxSize({index: _image.index, length: 1})}>
              {mediaTag}
            </td><commit_msg>Add some file extensions to the target of video tag rendering.<commit_after>// const Lightbox = require('./lib/react-images/react-images'); import Lightbox
// from './lib/react-images/lib/Lightbox';

const jsonFileList = [];
jsonFileList.push("./images.json");



const TABLE_SIZE = 4 * 4;
const MAX_PATH_LENGTH = 50;

class ImageBox extends React.Component {
  constructor(props) {
    super(props);
    let length = 1;
    this.state = {
      jsonFile: jsonFileList[jsonFileList.length - 1],
      showControl: true,
      style: {
        maxWidth: this.computeMaxWidth(length),
        maxHeight: this.computeMaxHeight(length)
      },
      index: 0,
      length: length,
      images: []
    };

    document.addEventListener('keypress', (event) => {
      const keyName = event.key;

      if (keyName === 'Control') {
        return;
      }

      if (event.ctrlKey) {} else {
        console.log(`Key pressed ${keyName}`);
        if (keyName === 's' || keyName === 'S' || keyName === 'h' || keyName === 'H') {
          if (this.state.showControl) {
            this.setState({showControl: false});
          } else {
            this.setState({showControl: true});
          }
        } else if (keyName === 'ArrowUp') {
          this.explorer({images: this.state.images, index: this.state.index});
        } else if (keyName === 'ArrowLeft' || keyName === 'Backspace' || keyName === 'Delete' || keyName === 'b' || keyName === 'B') {
          this.setPrevImage(1 * this.state.length);
        } else {
          this.setNextImage(1 * this.state.length);
        }
      }
    }, false);
  }

  componentDidMount() {
    this.setJsonFile(this.state.jsonFile);
  }

  setJsonFile(jsonFile) {
    console.log('JSON file: ' + jsonFile);
    let xhr = new XMLHttpRequest();
    xhr.open("GET", jsonFile, true);
    xhr.onload = function (e) {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          // console.log(xhr.responseText);
          let directories = JSON.parse(xhr.responseText);
          directories = directories.sort(function (aa, bb) {
            return aa.directory > bb.directory
              ? 1
              : -1;
          });
          for (let directory of directories) {
            directory.directory = directory
              .directory
              .replace(/\\\\/g, '/')
              .replace(/\\/g, '/');
            for (let image of directory.images) {
              image.directory = image
                .directory
                .replace(/\\\\/g, '/')
                .replace(/\\/g, '/');
            }
          }

          let extList = {
            '': 0
          };
          let maxWidth = 0;
          let maxHeight = 0;
          let fids = {}
          for (let directory of directories) {
            for (let image of directory.images) {
              if (extList[image.ext]) {
                extList[image.ext] -= 0;
                extList[image.ext] += 1;
              } else {
                extList[image.ext] = 1;
              }
              if (image.width > maxWidth) {
                maxWidth = image.width;
              }
              if (image.height > maxHeight) {
                maxHeight = image.height;
              }
              fids[image.fid] = image;
            }
          }
          console.log('extList ' + JSON.stringify(extList, null, 2))
          this.setState({
            jsonFile: jsonFile,
            directories: directories,
            extList: extList,
            maxWidth: maxWidth,
            maxHeight: maxHeight,
            fids: fids,
            images: [],
            directory: '',
            index: 0
          });
        } else {
          console.error(xhr.status + ': ' + xhr.statusText);
        }
      }
    }.bind(this);
    xhr.onerror = function (e) {
      console.error(xhr.status + ': ' + xhr.statusText);
    };
    xhr.send(null);
  }

  setNextImage(step) {
    if (this.state) {
      let index = this.state.index + step;
      if (this.state.images.length && this.state.images.length < index) {
        index = this.state.images.length - 1;
      }
      console.log('index ' + index);
      this.setState({index: index});
    }
  }

  setPrevImage(step) {
    if (this.state) {
      let index = this.state.index - step;
      if (index < 0) {
        index = 0;
      }
      console.log('index ' + index);
      this.setState({index: index});
    }
  }

  setMaxWidth(newState) {
    let length = this.state.length;
    if (newState.length) {
      length = newState.length;
    }
    if (length > 1) {
      this.setMaxSize();
      return;
    }
    let style = this.state.style;
    delete style.maxWidth;
    delete style.maxHeight;
    style.maxWidth = this.computeMaxWidth(length);
    let _newState = Object.assign({
      style: style
    }, newState);
    this.setState(_newState);
  }

  computeMaxWidth(length) {
    return (window.innerWidth - 5) * 0.95 / Math.ceil(Math.sqrt(length));
  }

  setMaxHeight(newState) {
    let length = this.state.length;
    if (newState.length) {
      length = newState.length;
    }
    if (length > 1) {
      this.setMaxSize();
      return;
    }
    let style = this.state.style;
    delete style.maxWidth;
    delete style.maxHeight;
    style.maxHeight = this.computeMaxHeight(length);
    let _newState = Object.assign({
      style: style
    }, newState);
    this.setState(_newState);
  }

  computeMaxHeight(length) {
    return (window.innerHeight - 5) * 0.95 / Math.ceil(Math.sqrt(length));
  }

  setMaxSize(newState) {
    let length = this.state.length;
    if (newState.length) {
      length = newState.length;
    }
    let style = this.state.style;
    delete style.maxWidth;
    delete style.maxHeight;
    style.maxWidth = this.computeMaxWidth(length);
    style.maxHeight = this.computeMaxHeight(length);
    let _newState = Object.assign({
      style: style
    }, newState);
    console.log('#setMaxSize ' + JSON.stringify(style, null, 2));
    this.setState(_newState);
  }

  resetMaxSize(newState) {
    let length = this.state.length;
    if (newState.length) {
      length = newState.length;
    }
    if (length > 1) {
      this.setMaxSize();
      return;
    }
    let style = this.state.style;
    delete style.maxWidth;
    delete style.maxHeight;
    let _newState = Object.assign({
      style: style
    }, newState);
    this.setState(_newState);
  }

  render() {
    let images = this.getFilteredImages();
    let image = '';
    let directory = '';
    if (this.state.directories) {
      if (images.length) {
        image = images[0];
        directory = image.directory;
        console.log('images ' + images.length);
        let _image = Object.assign({}, image);
        delete _image.similarities;
        console.log('image ' + JSON.stringify(_image, null, 2));
      } else {
        let state = {};
        state = Object.assign(state, this.state);
        delete state.directories;
        delete state.fids;
        console.log('state ' + JSON.stringify(state, null, 2));
      }
    }

    let imgClassName = '';
    let imageStyle = {};
    if (this.state.length == 1 && this.state.style.maxWidth && !this.state.style.maxHeight) {
      imgClassName = "img-responsive";
      console.log('responsive style');
    }
    if (!imgClassName) {
      imageStyle = Object.assign(imageStyle, this.state.style);
      console.log('not responsive style ' + JSON.stringify(imageStyle, null, 2));
    }

    let media;
    if (images.length) {
      media = this.renderMedia(imgClassName, imageStyle, images);
    }
    let controller = this.renderController(image, directory);

    let styleDiv1 = {};
    styleDiv1.position = 'absolute';
    styleDiv1.zIndex = 1;
    styleDiv1.align = 'center';
    styleDiv1.textAlign = 'center';
    let styleDiv2 = {};
    styleDiv2.position = 'fixed';
    styleDiv2.bottom = 0;
    styleDiv2.right = 0;
    styleDiv2.zIndex = 10;
    styleDiv2.opacity = 0.9;

    // this.state.lightboxIsOpen = false; this.gotoPrevious = this.previousImage;
    // this.gotoNext = this.nextImage; this.closeLightbox = this.nextImage;

    return (
      <div className="imageBox">
        <div style={styleDiv1} ref='div1'>
          {media}
        </div>
        <div style={styleDiv2} ref='div2'>
          {controller}
        </div>
        {/*<Lightbox
        images={[{ src: imagePath }, { src: imagePath }]}
        isOpen={this.state.lightboxIsOpen}
        onClickPrev={this.gotoPrevious}
        onClickNext={this.gotoNext}
        onClose={this.closeLightbox}
      />*/}
      </div>
    );
  }

  renderMedia(imgClassName, imageStyle, images) {
    let imagePathes = [];
    for (let _image of images) {
      let _imagePath = '';
      _imagePath += 'file:///';
      _imagePath += _image.directory + '/' + _image.name;
      _imagePath = _imagePath.replace(/\\/g, '/');

      //      _imagePath = encodeURI(_imagePath);      _imagePath =
      // encodeURIComponent(_imagePath);
      _imagePath = _imagePath.replace(/\#/g, escape('#'));
      _imagePath = _imagePath.replace(/\%/g, escape('%'));

      imagePathes.push(_imagePath);
    }

    if (this.state.length == 1) {
      let _image = images[0];
      let _imagePath = imagePathes[0];
      let mediaTag = this.renderImage(imgClassName, imageStyle, _imagePath);
      if (_image.ext == '.mp4' || _image.ext == '.flv' || _image.ext == '.swf' || _image.ext == '.wmv' || _image.ext == '.avi' || _image.ext == 'mpeg' || _image.ext == '.mpg' || _image.ext == '.aac' || _image.ext == '.h264' || _image.ext == '.wave' || _image.ext == '.wav' || _image.ext == '.mp3' || _image.ext == '.flac' || _image.ext == '.opus' || _image.ext == '.spx' || _image.ext == '.ogx' || _image.ext == '.ogv' || _image.ext == '.oga' || _image.ext == '.ogg' || _image.ext == '.webm') {
        mediaTag = this.renderVideo(imgClassName, imageStyle, _imagePath, _image.ext);
      }
      return (
        <div ref='images' onClick={() => this.setNextImage(1 * this.state.length)}>
          {mediaTag}
        </div>
      );
    }

    let sqrtLength = Math.ceil(Math.sqrt(this.state.length));
    let imageRows = [];
    for (let ii = 0; ii < sqrtLength; ii++) {
      let imageCols = [];
      imageRows.push(imageCols);
      for (let jj = 0; jj < sqrtLength; jj++) {
        const index = ii * sqrtLength + jj;
        if (index < images.length) {
          let _image = {};
          _image = Object.assign(_image, images[index]);
          _image.imagePath = imagePathes[index];
          _image.index = this.state.index + index;
          imageCols.push(_image);
          //          console.log('table ' + JSON.stringify(_image, null, 2));
        }
      }
    }
    let tableStyle = {};
    tableStyle.display = 'table-cell';
    tableStyle.textAlign = 'center';
    tableStyle.verticalAlign = 'middle';
    tableStyle.width = imageStyle.maxWidth;
    tableStyle.height = imageStyle.maxHeight;
    let imageTags = imageRows.map((imageCols, ii) => <tr key={ii}>{imageCols
        .map(function (_image, jj) {
          let _imagePath = _image.imagePath;
          let mediaTag = this.renderImage(imgClassName, imageStyle, _imagePath);
          if (_image.ext == '.mp4' || _image.ext == '.flv' || _image.ext == '.swf' || _image.ext == '.wmv' || _image.ext == '.avi' || _image.ext == 'mpeg' || _image.ext == '.mpg' || _image.ext == '.aac' || _image.ext == '.h264' || _image.ext == '.wave' || _image.ext == '.wav' || _image.ext == '.mp3' || _image.ext == '.flac' || _image.ext == '.opus' || _image.ext == '.spx' || _image.ext == '.ogx' || _image.ext == '.ogv' || _image.ext == '.oga' || _image.ext == '.ogg' || _image.ext == '.webm') {
            mediaTag = this.renderVideo(imgClassName, imageStyle, _imagePath);
          }
          return (
            <td
              key={jj}
              style={tableStyle}
              className="img-thumbnail"
              onClick={(event) => this.setMaxSize({index: _image.index, length: 1})}>
              {mediaTag}
            </td>
{'fraction_non_alphanumeric': 0.15006250808294175, 'fraction_numerical': 0.0068112255895158855, 'mean_word_length': 2.0135100025980774, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '192246', 'n_tokens_mistral': 7334, 'n_tokens_neox': 7153, 'n_words': 1441}