<commit_before>/* globals controller */
const React = require("react");
const ReactDOM = require("react-dom");
const { Footer } = require("../../footer-view");
const sendEvent = require("../../browser-send-event.js");
const { ShareButton } = require("./share-buttons");
const { TimeDiff, intervalDescription } = require("./time-diff");
const reactruntime = require("../../reactruntime");


class Clip extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      imageDisplay: "none"
    };
  }

  componentDidMount() {
    let image = ReactDOM.findDOMNode(this.refs.clipImage);
    if (image.complete) {
      this.setState({ 
        loading: false,
        imageDisplay: "inline"
      });
    }
    let onResize = () => {
      let windowHeight = window.innerHeight;
      let paddingTop = Math.floor((windowHeight - image.height - 35) / 2);
      if (paddingTop < 66) {
        paddingTop = 66;
      }
      this.setState({paddingTop});
    };
    window.addEventListener("resize", onResize, true);

    onResize();
    // FIXME: need to remove event listener on unmount
  }

  render() {
    let clip = this.props.clip;
    if (! clip.image) {
      console.warn("Somehow there's a shot without an image");
      return null;
    }
    let node = <img style={{height: "auto", width: clip.image.dimensions.x + "px", maxWidth: "100%", display: this.state.imageDisplay}} ref="clipImage" src={ clip.image.url } alt={ clip.image.text } />;
    return <div ref="clipContainer" className="clip-container">
      <menu type="context" id="clip-image-context">
        <menuitem label="Copy Image Text" onClick={this.copyImageText.bind(this)} ></menuitem>
      </menu>
      { this.renderLoader() } 
      <a href={ clip.image.url } onClick={ this.onClickClip.bind(this) } contextMenu="clip-image-context">
        { node }
      </a>
    </div>;
  }

  renderLoader() {
  if (!this.state.loading) {
    return null;
  }
  return (
    <div className="spinner">
      <img src = {this.props.staticLink("/static/img/spinner.svg")} />
    </div>
  );
  }

  onClickClip() {
    sendEvent("goto-clip", "content", {useBeacon: true});
    // Allow default action to continue
  }

  copyImageText() {
    sendEvent("copy-image-text", "context-menu");
    let text = this.props.clip.image.text;
    let el = document.createElement("textarea");
    el.value = text;
    document.body.appendChild(el);
    el.select();
    document.execCommand("copy");
    document.body.removeChild(el);
  }
}


class Head extends React.Component {
  render() {
    let expired = this.props.expireTime !== null && Date.now() > this.props.expireTime;<commit_msg>added onLoad event handler<commit_after>/* globals controller */
const React = require("react");
const ReactDOM = require("react-dom");
const { Footer } = require("../../footer-view");
const sendEvent = require("../../browser-send-event.js");
const { ShareButton } = require("./share-buttons");
const { TimeDiff, intervalDescription } = require("./time-diff");
const reactruntime = require("../../reactruntime");


class Clip extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      imageDisplay: "none"
    };
  }

  componentDidMount() {
    let image = ReactDOM.findDOMNode(this.refs.clipImage);
    if (image.complete) {
      this.onImageLoaded();
    }
    let onResize = () => {
      let windowHeight = window.innerHeight;
      let paddingTop = Math.floor((windowHeight - image.height - 35) / 2);
      if (paddingTop < 66) {
        paddingTop = 66;
      }
      this.setState({paddingTop});
    };
    window.addEventListener("resize", onResize, true);

    onResize();
    // FIXME: need to remove event listener on unmount
  }

  render() {
    let clip = this.props.clip;
    if (! clip.image) {
      console.warn("Somehow there's a shot without an image");
      return null;
    }
    let node = <img style={{height: "auto", width: clip.image.dimensions.x + "px", maxWidth: "100%", display: this.state.imageDisplay}} ref="clipImage" src={ clip.image.url } alt={ clip.image.text } onLoad = { this.onImageLoaded.bind(this) } />;
    return <div ref="clipContainer" className="clip-container">
      <menu type="context" id="clip-image-context">
        <menuitem label="Copy Image Text" onClick={this.copyImageText.bind(this)} ></menuitem>
      </menu>
      { this.renderLoader() }
      <a href={ clip.image.url } onClick={ this.onClickClip.bind(this) } contextMenu="clip-image-context">
        { node }
      </a>
    </div>;
  }

  onImageLoaded() {
    this.setState({
      loading: false,
      imageDisplay: "inline"
    });
  }

  renderLoader() {
    if (!this.state.loading) {
      return null;
    }
    return (
      <div className="spinner">
        <img src = {this.props.staticLink("/static/img/spinner.svg")} />
      </div>
    );
  }

  onClickClip() {
    sendEvent("goto-clip", "content", {useBeacon: true});
    // Allow default action to continue
  }

  copyImageText() {
    sendEvent("copy-image-text", "context-menu");
    let text = this.props.clip.image.text;
    let el = document.createElement("textarea");
    el.value = text;
    document.body.appendChild(el);
    el.select();
    document.execCommand("copy");
    document.body.removeChild(el);
  }
}


class Head extends React.Component {
  render() {
    let expired = this.props.expireTime !== null && Date.now() > this.props.expireTime;
{'fraction_non_alphanumeric': 0.1649954421148587, 'fraction_numerical': 0.0036463081130355514, 'mean_word_length': 2.9157744468236975, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 31, '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': '3841245', 'n_tokens_mistral': 1713, 'n_tokens_neox': 1686, 'n_words': 366}