Script and styling to create better UX on 9anime.to; removes unnecesary items & displays watched series.

script.js

function addSeriesToStorage(series, episode) {
  if (series && episode) {

    let items = localStorage.getItem('w-'+series);
    if (!items) {
      localStorage.setItem('w-'+series, JSON.stringify([episode]));
    } else {
      items = JSON.parse(items);
      if (items.indexOf(episode) === -1) {
        items.push(episode);
        localStorage.setItem('w-'+series, JSON.stringify(items))
      }
    }
  } 
}

function updateCurrentEpToStroage(series, episode) {
  if (!series || !episode) return;

  const epNo = document.querySelector('.episodes a[data-id="'+episode+'"]').textContent;
  if (epNo)  
    localStorage.setItem('ep-'+series, epNo);
}

window.addEventListener('load', function() {
  const path = location.pathname;
  
  if (path === '/') {
    const recentSub = document.querySelector('[data-name="updated-sub"]');
                    
    if (recentSub) {
      recentSub.click();
    }

    const items = document.querySelectorAll('.list-film .active .item .poster');
    items.forEach(item => {
      const href = item.href.match(/watch\/(.*)\/?/i);
      if (href) {
        let currentEp = localStorage.getItem('ep-'+href[1]);
        if (currentEp) {
          const node = item;
          const div = document.createElement('div');
          div.classList.add('current');
          div.textContent = currentEp;
          node.appendChild(div);
        }
      }
    });
  }

  if (path.includes('/watch/')) {
    const series = path.match(/watch\/(.*)\//i);
    const episode = path.match(/watch\/.*\/(.*)\/?/i);
    if (series && episode) {
      addSeriesToStorage(series[1], episode[1]);
      updateCurrentEpToStroage(series[1], episode[1]);

      let items = localStorage.getItem('w-'+series[1]);
      if (items) {
        items = JSON.parse(items);

        items.forEach(id => {
          document.querySelector('.episodes a[data-id="'+id+'"]')
            .classList.add('visited');
        })      
      }
      
    }
  }



  document.querySelectorAll('.episodes a')
    .forEach(item => item.addEventListener('click', () => {
      const path = item.getAttribute('href');
      const series = path.match(/watch\/(.*)\//i);
      const episode = path.match(/watch\/.*\/(.*)\/?/i);
      
      if (series && episode) {
        addSeriesToStorage(series[1], episode[1]);
        updateCurrentEpToStroage(series[1], episode[1]);
        item.classList.add('visited');
      }
    }));
});

style.css

.widget.container, #comment, #disqus_thread,
.widget .container .row.mt20 > .col-lg-7,
#hotest,
.alert.alert-primary.notice,
.home-socials,
.filters.mt20 {
  display: none;
}

.widget .container .row.mt20 > .col-lg-17 {
  margin: 0 auto;
  width: 100%;
}

.watchpage #servers .server ul.episodes li a:visited,
.watchpage #servers .server ul.episodes li a.visited {
  background: #3c3a44;
  color: #717171;
}

.watchpage #servers .server ul.episodes li a.active,
.watchpage #servers .server ul.episodes li a:hover {
  background: #723F8C!important;
  color: #b4b4b4!important;
}