☰

BS Simply

BS Simply inklusive Favoriten Modul

// ==UserScript==
// @name         BS Simply
// @namespace    http://bs.to/
// @version      0.1.2
// @description  BS Simply inklusive Favoriten Modul
// @author       Seker61
// @match        https://bs.to/*
// @icon         https://www.google.com/s2/favicons?domain=bs.to
// @grant        none
// @license      MIT
// ==/UserScript==

(function () {
  // load extra CSS and JS
  insertJSCSS();
  // path
  const path = window.location.pathname;

  if (path === '/' || path === '/serie/') {
    window.location = 'https://www.bs.to/andere-serien';
  }

  if (path === '/andere-serien') {
    removeFunctions();
    loadFavoritenModul();
    addListenerToSearch();
  }

  if (path === '/' || path === '/serie/') {
    window.location = 'https://www.bs.to/andere-serien';
  }

  if (path.split('/')[1] === 'serie') {
    removeFunctions();
    loadSeriesModul();
  }

  function loadDataFromLink(url, element, fetchOject, e) {
    (e || window.event).preventDefault();

    return fetch(url, { credentials: 'same-origin', redirect: 'follow' })
      .then((response) => response.text())
      .then((html) => {
        const parser = new DOMParser();
        const htmlDocument = parser.parseFromString(html, 'text/html');
        const episodes = htmlDocument.querySelectorAll('.episodes > tbody > tr');
        const episodesWatched = htmlDocument.querySelectorAll('.episodes > tbody > tr.watched');
        const urlOfSeries = htmlDocument.querySelector('meta[property="og:url"]').content.split('/');
        const firstSeason = (urlOfSeries[5] ? `s${urlOfSeries[5]}` : 's1');
        const star = document.createElement('i');
        star.classList.add('fas', 'fa-star');

        lStorage.prioList.forEach((prioItem) => {
          if (prioItem === element.childNodes[0].href) {
            star.classList.add('prio');
          }
        });

        star.onclick = function () {
          changePrio(this);
        };
        element.appendChild(htmlDocument.querySelector('#seasons'));
        element.insertBefore(star, element.childNodes[0]);
        if (episodes.length === episodesWatched.length) {
          element.getElementsByClassName(firstSeason)[0].classList.add('watched');
        }
      })
      .catch((error) => {
        console.warn(error);
      });
  }

  function insertJSCSS() {
    // Insert CSS Block
    const css = document.createElement('style');
    css.innerHTML = `
    /* CSS for BS Favoriten Modul */
    @media only screen and (max-width: 900px) {

        .andere-serien ul,
        .vorgeschlagene-serien ul {
            -moz-column-count: 1;
            -webkit-column-count: 1;
        }
    }
    .hamburger-container {
        display: none !important;
    }
    .serie .episode .slider {
        float: none;
        max-width: none;
    }

    .unfold {
        height: auto !important;
    }

    .serie .frame {
        overflow: auto;
        height: 27px;
        min-height: 27px;
    }

    .serie .frame ul li {
        margin: 1px;
    }

    body>#root {
        max-width: none;
    }

    ul#menu {
        display: block !important;
    }

    nav {
        display: block !important;
    }
    nav>ul {
        height: 35px !important;
        line-height: 35px !important;
    }
    nav>ul>li{
        width: 135px !important;
    }
    nav>ul>li>a{
        font-size: 16px !important;
    }
    #favoritesLinks>li {
        padding: 2px 2px 2px 8px;
        display: grid;
        grid-template-columns: 25px 1fr 50%;
        align-items: center;
    }

    #filter {
        float: right;
        width: 50%;
        display: flex;
        justify-content: space-between;
    }

    #filter>div>label {
        display: inline-block;
        width: auto;
    }

    #filter>div:hover>label,
    #filter>div:hover>input {
        text-decoration: underline;
        cursor: pointer;
    }

    .hideSpecial,
    .hideWatched {
        display: none;
    }

    #columnFavorites {
        width: 100%;
    }

    .prio {
        color: gold;
    }

    a:focus {
        outline: 2px solid !important;
        outline-color: red !important;
    }

    .banner,
    #other-series-nav {
        display: none !important;
    }

    .navigation {
        top: 4px !important;
    }

    .navigation>a {
        display: none !important;
    }

    .navigation:hover>a {
        display: block !important;
    }
  `;
    document.getElementsByTagName('head')[0].appendChild(css);

    // Insert JS Block
    const js = document.createElement('script');
    js.innerHTML = `
  // JS for BS Favoriten Modul
  let lStorage = JSON.parse(localStorage.getItem('bs_favorite_modul'));
  function unfold() {
    const classFrame = document.getElementsByClassName('frame');
    const classUnfold = document.getElementsByClassName('frame unfold');
    if (classUnfold.length === 0) {
      for (const e of classFrame) {
        e.classList.add('unfold');
      }
      store('unfold', 'checked');
    } else {
      for (const e of classFrame) {
        e.classList.remove('unfold');
      }
      store('unfold', '');
    }
  }

  function hideWatched() {
    const classWatched = document.getElementsByClassName('watched');
    const classHidden = document.getElementsByClassName('watched hideWatched');
    if (classHidden.length === 0) {
      for (const e of classWatched) {
        e.classList.add('hideWatched');
      }
      store('hideWatched', 'checked');
    } else {
      for (const e of classWatched) {
        e.classList.remove('hideWatched');
      }
      store('hideWatched', '');
    }
    setDataToLinks();
  }

  function hideSpecials() {
    const classS0 = document.getElementsByClassName('s0');
    const classS0Hide = document.getElementsByClassName('s0 hideSpecial');
    if (classS0Hide.length === 0) {
      for (const e of classS0) {
        if (e.children[0].innerHTML === 'Specials') {
          e.classList.add('hideSpecial');
        }
      }
      store('hideSpecial', 'checked');
    } else {
      for (const e of classS0) {
        e.classList.remove('hideSpecial');
      }
      store('hideSpecial', '');
    }
    setDataToLinks();
  }

  function setDataToLinks(){


  const dataSetElements = document.querySelectorAll('a[data-row], a[data-column]');
  for(const element of dataSetElements) {
    delete element.dataset.row;
    delete element.dataset.column;
  }

  let menuLinks = document.querySelectorAll('#menu > li > a');
  let row = 1;
  let column = 1;

  for(const link of menuLinks){
    link.dataset.row = "1";
    link.dataset.column = column.toString();
    column = column + 1;
  }

  let favorites = document.querySelectorAll('.episodes tr, #favoritesLinks > li, .seasons > #seasons > ul, #episodes > ul, .hoster-tabs.top');
  //console.log(favorites);
  for (const favorite of favorites){
    let links = favorite.querySelectorAll('li:not(.hideWatched):not(.hideSpecial) > a, td > a');
    column = 1;
    row = row + 1;
    for(const link of links){
      link.dataset.row = row.toString();
      link.dataset.column = column.toString();
      column = column + 1;
    }
  }
}

  function changePrio(element) {
    const link = element.parentElement.querySelector('a').href;
    if (lStorage.prioList.filter((word) => word === link).length > 0) {
      element.classList.remove('prio');
      lStorage.prioList = lStorage.prioList.filter((word) => word !== link);
      save(lStorage);
      movePrios();
      return;
    }
    element.classList.add('prio');
    lStorage.prioList.push(link);
    save(lStorage);
    movePrios();
  }

  function store(key, value) {
    lStorage[key] = value;
    save(lStorage);
  }

  function save(data) {
    localStorage.setItem('bs_favorite_modul', JSON.stringify(data));
  }

  function movePrios() {
    const prios = document.getElementsByClassName('prio');
    const nonPrios = document.querySelectorAll('.fa-star:not(.prio)');
    const favoritesLinks = document.getElementById('favoritesLinks');

    const names = {
      prio: [],
      nonPrio: [],
    };

    if (prios !== 0) {
      for (const element of prios) {
        names.prio.push(element.parentElement.children[1].innerText);
      }
      for (const element of nonPrios) {
        names.nonPrio.push(element.parentElement.children[1].innerText);
      }

      names.prio.sort((a, b) => {
        if (a < b) {
          return -1;
        }
        if (a > b) {
          return 1;
        }
        return 0;
      });
      names.nonPrio.sort((a, b) => {
        if (a < b) {
          return -1;
        }
        if (a > b) {
          return 1;
        }
        return 0;
      });

      names.prio.forEach((e) => {
        const parentOfElement = getElementByText(
          '#favoritesLinks > li > a',
          e,
        ).parentElement;
        favoritesLinks.appendChild(parentOfElement);
      });

      names.nonPrio.forEach((e) => {
        const parentOfElement = getElementByText(
          '#favoritesLinks > li > a',
          e,
        ).parentElement;
        favoritesLinks.appendChild(parentOfElement);
      });
    }
  }

  function getElementByText(selector, text) {
    const selectedElements = document.querySelectorAll(selector);

    for (const element of selectedElements) {
      if (element.innerText === text) {
        return element;
      }
    }
  }
  `;
    document.getElementsByTagName('head')[0].appendChild(js);
  }

  function removeFunctions() {
    const removeMenu = document.querySelectorAll('#menu>li>a');
    const removeSort = document.querySelectorAll("a[href='serie-alphabet']");
    const removeList = document.getElementById('seriesContainer');

    Array.from(removeMenu).forEach((element) => {
      if (element.innerHTML === 'Alle Serien') {
        element.innerHTML = 'Home';
      } else {
        element.style.display = 'none';
      }
    });
    if (removeSort.length > 0) { removeSort[0].parentNode.style.display = 'none'; }
    if (removeList !== null) { removeList.style.display = 'none'; }
  }

  function loadFavoritenModul() {
    // read localStorage
    let lStorage = JSON.parse(localStorage.getItem('bs_favorite_modul'));

    // Init localStorage
    if (lStorage === null || lStorage === 'null') {
      lStorage = {
        unfold: '',
        hideWatched: '',
        hideSpecial: '',
        prioList: [],
      };
      save(lStorage);
    }

    // Insert Table Favorite
    const sectionMain = document.getElementsByClassName('andere-serien')[0];
    sectionMain.classList.add('home');
    const sectionContainer = document.getElementById('seriesContainer');
    const listOfFavorite = document.getElementById('other-series-nav').getElementsByTagName('ul');
    const counter = listOfFavorite[0].children.length - 1;
    const favorites = document.createElement('div');
    favorites.id = 'columnFavorites';
    favorites.classList.add('column');
    const favoritesInnerHTML = `
  <section>
    <header>
        <h3>Favoriten (${counter})</h3>
        <div id='filter'>
            <div>
                <input type='checkbox' id='hideSpecials' onclick='hideSpecials()' ${lStorage.hideSpecial}>
                <label for='hideSpecials'> Specials</label>
            </div>
            <div>
                <input type='checkbox' id='hideWatched' onclick='hideWatched()' ${lStorage.hideWatched}>
                <label for='hideWatched'> Watched</label>
            </div>
            <div>
                <input type='checkbox' id='unfold' onclick='unfold()' ${lStorage.unfold}>
                <label for='unfold'> Unfold</label>
            </div>
    </header>
    <div>
        <ul class='serie' id='favoritesLinks'>${listOfFavorite[0].innerHTML}</ul>
    </div>
  </section>
  </div>
  `;
    favorites.innerHTML = favoritesInnerHTML;

    // Delete Serienvorschläge and fetch Data
    const fetchedObjects = [];
    const favoriteListItems = favorites.querySelectorAll('#favoritesLinks')[0].children;

    Array.from(favoriteListItems).forEach((element) => {
      if (element.innerText === 'Serienvorschläge') {
        element.remove();
      } else {
        fetchedObjects.push(loadDataFromLink(element.children[0].href, element));
      }
    });

    Promise.all(fetchedObjects).then((e) => {
      sectionMain.insertBefore(favorites, sectionContainer);
      if (lStorage.unfold === 'checked') {
        unfold();
      }
      if (lStorage.hideWatched === 'checked') {
        hideWatched();
      }
      if (lStorage.hideSpecial === 'checked') {
        hideSpecials();
      }
      movePrios();
      setDataToLinks();
    });
  }

  function loadSeriesModul() {
    // add class
    const gselector = document.getElementsByClassName('selectors')[0];
    const gepisodes = document.getElementsByClassName('episodes')[0];
    const gepisode = document.getElementsByClassName('episode')[0];
    const gimage = document.getElementById('sp_right');
    const gtext = document.getElementById('sp_left');

    gselector.classList.add('gselector');
    if (gepisodes) { gepisodes.classList.add('gepisodes'); }
    if (gepisode) { gepisode.classList.add('gepisodes'); }
    gimage.classList.add('gimage');
    gtext.classList.add('gtext');
  }

  function addListenerToSearch() {
    const searchBox = document.getElementById('serInput');

    searchBox.addEventListener('input', function (event) {
      const container = document.getElementById('seriesContainer');
      const favorites = document.getElementById('columnFavorites');
      if (this.value === '') {
        favorites.style.display = 'block';
        container.style.display = 'none';
      } else {
        favorites.style.display = 'none';
        container.style.display = 'block';
      }
    });
  }

  function addFireTV() {
    let row = 1;
    let column = 1;
    let currentLink = null;
    window.addEventListener('keydown', (e) => {
      if (e.key === 'ArrowDown') {
        e.preventDefault();
        currentLink = document.querySelector(`a[data-row="${row + 1}"][data-column="1"]`);
        if (currentLink !== null) {
          column = 1;
          row += 1;
          document.querySelector(`a[data-row="${row}"][data-column="${column}"]`).focus();
        }
      }

      if (e.key === 'ArrowUp') {
        e.preventDefault();
        currentLink = document.querySelector(`a[data-row="${row - 1}"][data-column="1"]`);
        if (currentLink !== null) {
          column = 1;
          row -= 1;
          document.querySelector(`a[data-row="${row}"][data-column="${column}"]`).focus();
        }
      }

      if (e.key === 'ArrowRight') {
        e.preventDefault();
        currentLink = document.querySelector(`a[data-row="${row}"][data-column="${column + 1}"]`);
        if (currentLink !== null) {
          column += 1;
          document.querySelector(`a[data-row="${row}"][data-column="${column}"]`).focus();
        }
      }

      if (e.key === 'ArrowLeft') {
        e.preventDefault();
        currentLink = document.querySelector(`a[data-row="${row}"][data-column="${column - 1}"]`);
        if (currentLink !== null) {
          column -= 1;
          document.querySelector(`a[data-row="${row}"][data-column="${column}"]`).focus();
        }
      }

      console.log(currentLink);
    }, false);
  }

  setDataToLinks();
}());