<commit_before>'use strict';

import React from 'react';
import TransitionGroup from "react-addons-css-transition-group";
import Clipboard from 'clipboard';
import highlight from 'highlight.js'
import Highlight from 'components/plugins/highlight';
import { getHumanReadableBytes } from '../utils/utils.js';
import ChannelActions from 'actions/ChannelActions';
import MessageStore from 'stores/MessageStore';
import 'styles/File.scss';

import Logger from 'logplease';
const logger = Logger.create('Clipboard', { color: Logger.Colors.Magenta });

class File extends React.Component {

  constructor(props) {
    super(props);
    this.ext = /(?:\.([^.]+))?$/.exec(props.name)[1];
    this.state = {
      showPreview: false,
      previewContent: "Loading...",
    };
    this.clipboard = new Clipboard('.clipboard-' + props.hash, {
      text: function(trigger) {
        logger.info(props.hash + " copied to clipboard!");
        return props.hash;
      }
    });
  }

  get isVideo() {
    return this.ext === 'mp4' || this.ext === 'webm' || this.ext === 'ogv';
  }

  get isAudio() {
    return this.ext === 'mp3' || this.ext === 'ogg';
  }

  get isImage() {
    return this.ext === 'png' || this.ext === 'jpg' || this.ext === 'gif';
  }

  get isHighlightable() {
    return highlight.getLanguage(this.ext);
  }

  handleClick(name) {
    this.setState({
      showPreview: !this.state.showPreview,
      previewContent: 'Loading...',
    }, () => {
      if (this.state.showPreview) {
        ChannelActions.loadFile(this.props.hash, blob => {
          let previewContent = 'Unable to display file.';
          if (blob) {
            const url = window.URL.createObjectURL(blob);
            if (this.isAudio) {
              previewContent = <audio height={200} src={url} controls autoPlay={true} />;
            } else if (this.isImage) {
              previewContent = <img height={200} src={url} />;
            } else if (this.isVideo) {
              previewContent = <video height={200} src={url} controls autoPlay={false} />;;
            // } else if (this.isHighlightable) {
            //   previewContent = <Highlight>{blob}</Highlight>;
            // } else {
            }
          }
          this.setState({ previewContent });
        });
      }<commit_msg>Make preview for text files work<commit_after>'use strict';

import React from 'react';
import TransitionGroup from "react-addons-css-transition-group";
import Clipboard from 'clipboard';
import highlight from 'highlight.js'
import Highlight from 'components/plugins/highlight';
import { getHumanReadableBytes } from '../utils/utils.js';
import ChannelActions from 'actions/ChannelActions';
import MessageStore from 'stores/MessageStore';
import 'styles/File.scss';

import Logger from 'logplease';
const logger = Logger.create('Clipboard', { color: Logger.Colors.Magenta });

function readUTF8String(bytes) {
  let i = 0;
  let string = '';
  if (bytes.slice(0, 3) == '\xEF\xBB\xBF') {
    i = 3;
  }
  for (; i < bytes.byteLength; i++) {
    const byte1 = bytes[i];
    if (byte1 < 0x80) {
      string += String.fromCharCode(byte1);
    } else if (byte1 >= 0xc2 && byte1 < 0xe0) {
      const byte2 = bytes[++i];
      string += String.fromCharCode(((byte1 & 0x1f) << 6) + (byte2 & 0x3f));
    } else if (byte1 >= 0xe0 && byte1 < 0xf0) {
      const byte2 = bytes[++i];
      const byte3 = bytes[++i];
      string += String.fromCharCode(((byte1 & 0xff) << 12) + ((byte2 & 0x3f) << 6) + (byte3 & 0x3f));
    } else if (byte1 >= 0xf0 && byte1 < 0xf5) {
      const byte2 = bytes[++i];
      const byte3 = bytes[++i];
      const byte4 = bytes[++i];
      const codepoint = (((byte1 & 0x07) << 18) + ((byte2 & 0x3f) << 12) + ((byte3 & 0x3f) << 6) + (byte4 & 0x3f)) - 0x10000;
      string += String.fromCharCode((codepoint >> 10) + 0xd800, (codepoint & 0x3ff) + 0xdc00);
    }
  }
  return string;
}

class File extends React.Component {

  constructor(props) {
    super(props);
    this.ext = /(?:\.([^.]+))?$/.exec(props.name)[1];
    this.state = {
      showPreview: false,
      previewContent: "Loading...",
    };
    this.clipboard = new Clipboard('.clipboard-' + props.hash, {
      text: function(trigger) {
        logger.info(props.hash + " copied to clipboard!");
        return props.hash;
      }
    });
  }

  get isVideo() {
    return this.ext === 'mp4' || this.ext === 'webm' || this.ext === 'ogv';
  }

  get isAudio() {
    return this.ext === 'mp3' || this.ext === 'ogg';
  }

  get isImage() {
    return this.ext === 'png' || this.ext === 'jpg' || this.ext === 'gif';
  }

  get isHighlightable() {
    return highlight.getLanguage(this.ext);
  }

  handleClick(name) {
    this.setState({
      showPreview: !this.state.showPreview,
      previewContent: 'Loading...',
    }, () => {
      if (this.state.showPreview) {
        ChannelActions.loadFile(this.props.hash, blob => {
          let previewContent = 'Unable to display file.';
          if (blob) {
            const url = window.URL.createObjectURL(blob);
            if (this.isAudio) {
              previewContent = <audio height={200} src={url} controls autoPlay={true} />;
            } else if (this.isImage) {
              previewContent = <img height={200} src={url} />;
            } else if (this.isVideo) {
              previewContent = <video height={200} src={url} controls autoPlay={false} />;;
            } else {
              var fileReader = new FileReader();
              fileReader.onload = (event) => {
                const text = readUTF8String(new Uint8Array(event.target.result));
                if (this.isHighlightable) {
                  previewContent = <Highlight>{text}</Highlight>;
                } else {
                  previewContent = text;
                }
                this.setState({ previewContent });
              };
              fileReader.readAsArrayBuffer(blob);
              return;
            }
          }
          this.setState({ previewContent });
        });
      }
{'fraction_non_alphanumeric': 0.1614513981358189, 'fraction_numerical': 0.018974700399467376, 'mean_word_length': 2.408394781622235, 'pattern_counts': {'":': 0, '<': 30, '<?xml version=': 0, '>': 23, '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': '6513188', 'n_tokens_mistral': 1933, 'n_tokens_neox': 1844, 'n_words': 424}