<commit_before>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import StarMark from 'components/StarMark';
import { URL } from 'constants/URL';
import { auth } from 'helpers/requestHelpers';
import request from 'axios';
import { connect } from 'react-redux';
import { Color } from 'constants/css';

const API_URL = `${URL}/video`;

class VideoThumbImage extends Component {
  static propTypes = {
    height: PropTypes.string,
    isStarred: PropTypes.bool,
    src: PropTypes.string.isRequired,
    userId: PropTypes.number,
    videoId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
  };

  state = {
    xpEarned: false
  };

  mounted = false;

  componentDidMount() {
    const { userId, isStarred } = this.props;
    this.mounted = true;
    if (isStarred && userId) {
      this.checkXpStatus();
    }
  }

  componentDidUpdate(prevProps) {
    const { videoId, isStarred, userId } = this.props;
    const isNewVideo = prevProps.videoId !== videoId;
    const isDifferentUser = userId && userId !== prevProps.userId;
    const isUnstarred = prevProps.isStarred && !isStarred;
    const isLoggedOut = prevProps.userId && !userId;
    if (isStarred) {
      if (isNewVideo || isDifferentUser) {
        this.checkXpStatus();
      }
    }
    if (isUnstarred || isLoggedOut) {
      this.setState({ xpEarned: false });
    }
  }

  componentWillUnmount() {
    this.mounted = false;
  }

  render() {
    const { src, height = '55%', isStarred } = this.props;
    const { xpEarned } = this.state;
    return (
      <div
        style={{
          display: 'block',
          width: '100%',
          height: 'auto',
          overFlow: 'hidden',
          paddingBottom: height,
          position: 'relative'
        }}
      >
        <img
          alt="Thumbnail"
          src={src}
          style={{
            display: 'block',
            width: '100%',
            height: '100%',
            position: 'absolute',
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
            margin: 'auto',
            borderBottom: !!xpEarned && `0.8rem solid ${Color.lightBlue}`
          }}
        />
        {isStarred && <StarMark style={{ top: 1, left: 1 }} size={3.5} />}
      </div>
    );
  }

  checkXpStatus = async() => {
    const { videoId } = this.props;
    const authorization = auth();
    const authExists = !!authorization.headers.authorization;
    if (authExists) {
      try {
        const {
          data: { xpEarned }<commit_msg>light blue bar below watched video thumbs issue fix<commit_after>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import StarMark from 'components/StarMark';
import { URL } from 'constants/URL';
import { auth } from 'helpers/requestHelpers';
import request from 'axios';
import { connect } from 'react-redux';
import { Color } from 'constants/css';

const API_URL = `${URL}/video`;

class VideoThumbImage extends Component {
  static propTypes = {
    height: PropTypes.string,
    isStarred: PropTypes.bool,
    src: PropTypes.string.isRequired,
    userId: PropTypes.number,
    videoId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
  };

  state = {
    xpEarned: false
  };

  mounted = false;

  componentDidMount() {
    const { userId, isStarred } = this.props;
    this.mounted = true;
    if (isStarred && userId) {
      this.checkXpStatus();
    }
  }

  componentDidUpdate(prevProps) {
    const { videoId, isStarred, userId } = this.props;
    const isNewVideo = prevProps.videoId !== videoId;
    const isDifferentUser = userId && userId !== prevProps.userId;
    const isUnstarred = prevProps.isStarred && !isStarred;
    const isLoggedOut = prevProps.userId && !userId;
    if (isStarred) {
      if (isNewVideo || isDifferentUser) {
        this.checkXpStatus();
      }
    }
    if (isUnstarred || isLoggedOut) {
      this.setState({ xpEarned: false });
    }
  }

  componentWillUnmount() {
    this.mounted = false;
  }

  render() {
    const { src, height = '55%', isStarred } = this.props;
    const { xpEarned } = this.state;
    return (
      <div
        style={{
          display: 'block',
          width: '100%',
          height: 'auto',
          overFlow: 'hidden',
          paddingBottom: height,
          position: 'relative'
        }}
      >
        <img
          alt="Thumbnail"
          src={src}
          style={{
            display: 'block',
            width: '100%',
            height: '100%',
            position: 'absolute',
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
            margin: 'auto',
            borderBottom: !!xpEarned && `0.8rem solid ${Color.lightBlue()}`
          }}
        />
        {isStarred && <StarMark style={{ top: 1, left: 1 }} size={3.5} />}
      </div>
    );
  }

  checkXpStatus = async() => {
    const { videoId } = this.props;
    const authorization = auth();
    const authExists = !!authorization.headers.authorization;
    if (authExists) {
      try {
        const {
          data: { xpEarned }
{'fraction_non_alphanumeric': 0.13286440015631107, 'fraction_numerical': 0.008206330597889801, 'mean_word_length': 2.221522970421649, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 13, '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': '2348009', 'n_tokens_mistral': 1609, 'n_tokens_neox': 1607, 'n_words': 378}