// ==UserScript==
// @name         Udemy - Improved Course Library
// @namespace    https://github.com/TadWohlrapp/UserScripts
// @description  Shows rating, number of reviews and number of students enrolled for all courses in your library
// @icon         https://github.com/TadWohlrapp/UserScripts/raw/master/udemy-improved-course-library/icon.png
// @icon64       https://github.com/TadWohlrapp/UserScripts/raw/master/udemy-improved-course-library/icon64.png
// @author       Tad Wohlrapp <tadwohlrapp@gmail.com>
// @homepageURL  https://github.com/TadWohlrapp/UserScripts/tree/master/udemy-improved-course-library
// @version      0.5.0
// @supportURL   https://github.com/TadWohlrapp/UserScripts/issues
// @match        https://www.udemy.com/home/my-courses/*
// @compatible   chrome Tested with Tampermonkey v4.9 and Violentmonkey v2.12.7
// @compatible   firefox Tested with Greasemonkey v4.9
// @copyright    2020, Tad Wohlrapp (https://github.com/TadWohlrapp/UserScripts)
// @license      MIT
// @downloadURL none
// ==/UserScript==

// ==OpenUserJS==
// @author Taddiboy
// ==/OpenUserJS==

(function () {
  const i18n = loadTranslations();
  function fetchCourses() {
    listenForArchiveToggle();
    const lang = getLang(document.documentElement.lang);
    const courseContainers = document.querySelectorAll('[data-purpose="enrolled-course-card"]:not(.details-done)');
    if (courseContainers.length == 0) { return; }
    [...courseContainers].forEach((courseContainer) => {
      const courseId = courseContainer.querySelector('.card--learning__image').href.replace('https://www.udemy.com/course-dashboard-redirect/?course_id=', '');

      const courseCustomDiv = document.createElement('div');
      courseCustomDiv.classList.add('card__custom');

      const courseLinkDiv = document.createElement('div');
      courseLinkDiv.innerHTML = '<a href="https://www.udemy.com/course/'
        + courseId
        + '/" target="_blank" rel="noopener" class="card__course-link">'
        + i18n[lang].overview
        + '<svg fill="#686f7a" width="12" height="16" viewBox="0 0 24 24" style="vertical-align: text-bottom;margin-left: 4px;" xmlns="http://www.w3.org/2000/svg">'
        + '<path d="M19 19H5V5h7V3H5a2 2 0 00-2 2v14c0 1.1.9 2 2 2h14a2 2 0 002-2v-7h-2v7zM14 3v2h3.6l-9.8 9.8 1.4 1.4L19 6.4V10h2V3h-7z"></path>'
        + '</svg></a>'
      courseLinkDiv.classList.add('card__custom-row');
      courseCustomDiv.appendChild(courseLinkDiv);

      const courseStatsDiv = document.createElement('div');
      courseStatsDiv.classList.add('card__custom-row', 'card__course-stats-ct');
      courseCustomDiv.appendChild(courseStatsDiv);

      const ratingStripDiv = document.createElement('div');
      ratingStripDiv.style.height = '4px';
      courseCustomDiv.appendChild(ratingStripDiv);

      courseContainer.appendChild(courseCustomDiv);
      courseContainer.classList.add('details-done');

      const notAvailable = courseContainer.querySelector('.card--learning__details').href.includes('/draft/');
      if (notAvailable) {
        courseStatsDiv.innerHTML += '<div class="card__nodata">' + i18n[lang].notavailable + '</div>';
        ratingStripDiv.style.backgroundColor = '#faebeb';
        return;
      }

      const fetchUrl = 'https://www.udemy.com/api-2.0/courses/' + courseId + '?fields[course]=rating,num_reviews,num_subscribers';
      fetch(fetchUrl)
        .then(response => {
          if (response.ok) {
            return response.json();
          } else if (response.status === 403) {
            throw new Error('This course is no longer accepting enrollments.');
          } else {
            throw new Error(response.status);
          }
        })
        .then(json => {
          if (typeof json === 'undefined') { return; }
          const rating = json.rating.toFixed(1);
          const reviews = json.num_reviews;
          const enrolled = json.num_subscribers;
          const ratingPercentage = Math.round((rating / 5) * 100);
          const ratingStars = `
            <svg class="card__stars" width="100%" height="100%" viewBox="0 0 70 14" fill="none" xmlns="http://www.w3.org/2000/svg">
              <mask id="card__star-mask--` + courseId + `">
                <rect x="0" y="0" width="` + ratingPercentage + `%" height="100%" fill="white"></rect>
              </mask>
              <g fill="#dedfe0">
                <use xlink:href="#icon-rating-star" width="14" height="14" x="0"></use>
                <use xlink:href="#icon-rating-star" width="14" height="14" x="14"></use>
                <use xlink:href="#icon-rating-star" width="14" height="14" x="28"></use>
                <use xlink:href="#icon-rating-star" width="14" height="14" x="42"></use>
                <use xlink:href="#icon-rating-star" width="14" height="14" x="56"></use>
              </g>
              <g fill="#f4c150" mask="url(#card__star-mask--` + courseId + `)">
                <use xlink:href="#icon-rating-star" width="14" height="14" x="0"></use>
                <use xlink:href="#icon-rating-star" width="14" height="14" x="14"></use>
                <use xlink:href="#icon-rating-star" width="14" height="14" x="28"></use>
                <use xlink:href="#icon-rating-star" width="14" height="14" x="42"></use>
                <use xlink:href="#icon-rating-star" width="14" height="14" x="56"></use>
              </g>
            </svg>
            `;
          courseStatsDiv.innerHTML = '<div class="card__course-stats">'
            + ratingStars
            + '<span class="card__rating-text">'
            + setDecimal(rating, lang)
            + '</span><span class="card__reviews-text">('
            + setSeparator(reviews, lang)
            + ')</span><br>'
            + setSeparator(enrolled, lang)
            + ' '
            + i18n[lang].enrolled
            + '</div>';
          const getColor = v => `hsl(${((1 - v) * 120)},100%,50%)`;
          const colorValue = Math.min(Math.max((5 - rating) / 2, 0), 1);
          ratingStripDiv.style.backgroundColor = getColor(colorValue);
        })
        .catch(error => {
          courseStatsDiv.innerHTML += '<div class="card__nodata">' + i18n[lang].notavailable + '</div>';
          ratingStripDiv.style.backgroundColor = '#faebeb';
          console.info('Could not fetch stats for course ' + courseId + '.', error);
        });
    });
  }

  fetchCourses();

  const mutationObserver = new MutationObserver(fetchCourses);

  const targetNode = document.querySelector('div[data-module-id="my-courses-v3"]');

  const observerConfig = {
    childList: true,
    subtree: true
  };

  mutationObserver.observe(targetNode, observerConfig);

  function listenForArchiveToggle() {
    document.querySelectorAll('[data-purpose="toggle-archived"]').forEach(item => {
      item.addEventListener('click', event => {
        mutationObserver.disconnect();

        const doneContainers = document.querySelectorAll('.details-done');
        [...doneContainers].forEach((doneContainer) => {
          doneContainer.classList.remove('details-done');
          doneContainer.removeChild(doneContainer.querySelector('.card__custom'));
        });
        mutationObserver.observe(targetNode, observerConfig);
      });
    });
  }

  function setSeparator(int, lang) {
    return int.toString().replace(/\B(?=(\d{3})+(?!\d))/g, i18n[lang].separator);
  }

  function setDecimal(rating, lang) {
    return rating.toString().replace('.', i18n[lang].decimal);
  }

  function getLang(lang) {
    return i18n.hasOwnProperty(lang) ? lang : 'en-us';
  }

  function addGlobalStyle(css) {
    const style = document.createElement('style');
    style.innerHTML = css;
    document.head.appendChild(style);
  }

  function loadTranslations() {
    return {
      'en-us': {
        'overview': 'Course overview',
        'enrolled': 'students',
        'notavailable': 'Course stats not available',
        'separator': ',',
        'decimal': '.'
      },
      'de-de': {
        'overview': 'Kursübersicht',
        'enrolled': 'Teilnehmer',
        'notavailable': 'Kursstatistiken nicht verfügbar',
        'separator': '.',
        'decimal': ','
      },
      'es-es': {
        'overview': 'Descripción del curso',
        'enrolled': 'estudiantes',
        'notavailable': 'Las estadísticas del curso no están disponibles',
        'separator': '.',
        'decimal': ','
      },
      'fr-fr': {
        'overview': 'Aperçu du cours',
        'enrolled': 'participants',
        'notavailable': 'Statistiques sur les cours non disponibles',
        'separator': ' ',
        'decimal': ','
      },
      'it-it': {
        'overview': 'Panoramica del corso',
        'enrolled': 'studenti',
        'notavailable': 'Statistiche del corso non disponibili',
        'separator': '.',
        'decimal': ','
      }
    };
  }

  addGlobalStyle(`
    span[class^="leave-rating--helper-text"] {
      font-size: 10px;
      white-space: nowrap;
    }
    .card__custom-row {
      color: #29303b;
      font-size: 13px;
      padding: 0 15px;
    }
    .card__course-link {
      color: #007791 !important;
      display: inline-block !important;
    }
    .card__course-link:hover {
      color: #003845 !important;
    }
    .card__course-stats-ct {
      height: 48px;
      display: flex;
      align-items: center;
    }
    .card__course-stats {
      font-size: 12px;
      font-weight: 400;
      color: #686f7a;
    }
    .card__stars {
      display: inline-block;
      width: 7rem;
      height: 1.6rem;
      vertical-align: text-bottom;
    }
    .card__star--bordered {
      stroke: #eb8a2f;
    }
    .card__star--filled {
      fill: #eb8a2f;
    }
    .card__rating-text {
      font-weight: 700;
      color: #505763;
      margin-left: 2px;
      margin-right: 6px;
    }
    .card__nodata {
      color: #73726c;
      font-weight: 500;
    }
  `);
})();