// ==UserScript==
// @name         SmoothRoll
// @namespace    https://bengrant.dev
// @version      0.4
// @description  Clean crunchyroll viewing experience
// @author       Ben Grant
// @match        https://www.crunchyroll.com/*/*
// @icon         https://www.google.com/s2/favicons?domain=crunchyroll.com
// @grant        none
// @downloadURL none
// ==/UserScript==

const styles = `
:root {
  --bg-color: #f2f2f2;
  --main-color: #FFF;
  --text-color: #000;
  --link-color: #0676d6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #222;
    --main-color: #000;
    --text-color: #DDD;
    --link-color: #55b0ff;
  }

  .collection-carousel-arrow {
    filter: invert(1);
  }
}

body.smoothroll_light {
  --bg-color: #f2f2f2;
  --main-color: #FFF;
  --text-color: #000;
  --link-color: #0676d6;
}
body.smoothroll_light .collection-carousel-arrow {
  filter: invert(0);
}
body.smoothroll_dark {
  --bg-color: #222;
  --main-color: #000;
  --text-color: #DDD;
  --link-color: #55b0ff;
}
body.smoothroll_dark .collection-carousel-arrow {
  filter: invert(1);
}

body.main-page {
  background-color: var(--bg-color);
}
.site-header {
  background: var(--main-color);
  box-shadow: none;
}
.header-menubar li a {
  color: var(--text-color);
}
.games, .store {
  display: none !important;
}
#template_container.template-container {
  background: none;
}
#marketing_banner {
  display: none;
}
#message_box {
  display: none;
}
#showmedia_video_player {
  border-radius: 8px;
  overflow: hidden;
}
.showmedia-submenu {
  display: none;
}
#main_content_white, .white-wrapper {
  border-radius: 8px;
  background: var(--main-color);
}
.guestbook {
  display: none;
}
.new-template-body {
  color: var(--text-color);
}
.new-template-body h3 {
  display: none;
}
.new-template-body a.block-link, .old-template-body a.block-link, a.block-link {
  color: var(--text-color);
}
.showmedia-related {
  display: none;
}
#footer {
  display: none;
}
#showmedia_about_info .rating {
  display: none;
}
.new-template-body .block-link:hover, .new-template-body .pagination a, .new-template-body .para-div a, .new-template-body .sub-tabs .selectors a.text-link, .new-template-body .text-link, .new-template-body .wrapper a:hover a, .new-template-body a:hover h4, .new-template-body li a, .new-template-body p a, .new-template-body span a {
  color: var(--link-color);
}
img {
  border: none;
}
.episode-progress-bar {
  background: var(--bg-color);
}
#showmedia_about_info_details span {
  color: inherit;
}
.header-search-form {
  border: 0;
}
.header-search-form .header-searchbox {
  background: var(--bg-color);
  color: var(--text-color);
  border-radius: 4px;
}
.description .more {
  display: inline !important;
}
.description .more-dots {
  display: none;
}
.description a[href="#"] {
  display: none;
}
#showmedia_about_info_details > div:first-child,
#showmedia_about_info_details > div:last-child {
  display: none;
}
.game-banner-wrapper {
  display: none;
}
#showmedia_about_info_avail {
  display: none;
}

#smoothroll_settings_button {
  border: 0;
  background: var(--bg-color);
  color: var(--text-color);
  cursor: pointer;
  margin: 0;
  padding: 0;
  font: inherit;
}

#smoothroll_settings_modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  max-height: 90vh;
  max-width: 90vw;
  transform: translate(-50%, -50%);
  z-index: 10000;
  background: var(--bg-color);
  border-radius: 10px;
  box-shadow: 0 0 0 200vw rgba(0,0,0,.5);
  box-sizing: border-box;
  padding: 20px;
  color: var(--text-color);
}
body.smoothroll_settings_open #smoothroll_settings_modal {
  display: block;
}
#smoothroll_settings_modal h2 {
  margin: 0;
  padding: 0 0 10px;
  font-size: 1.2em;
}
#smoothroll_settings_modal label {
  display: block;
  padding: 6px 0 2px;
}
#smoothroll_settings_modal button,
#smoothroll_settings_modal select {
  font: inherit;
  background: inherit;
  color: inherit;
  padding: 2px 4px;
  border-radius: 3px;
  border: 1px solid currentColor;
  box-sizing: border-box;
}
#smoothroll_settings_close {
  margin-top: 20px;
  display: block;
  color: var(--link-color) !important;
  width: 100%;
  cursor: pointer;
}
`;

let setting_theme = undefined;

function loadSettings() {
  // Load settings
  setting_theme = localStorage.getItem('smoothroll_setting_theme');
  if (setting_theme && setting_theme === 'light') {
    document.body.classList.add('smoothroll_light');
    document.body.classList.remove('smoothroll_dark');
  } else if (setting_theme && setting_theme === 'dark') {
    document.body.classList.add('smoothroll_dark');
    document.body.classList.remove('smoothroll_light');
  } else {
    document.body.classList.remove('smoothroll_dark');
    document.body.classList.remove('smoothroll_light');
  }
}

const player = document.getElementById('showmedia_video_player');

if (player) {
  loadSettings();

  // Styles
  let styleSheet = document.createElement("style");
  styleSheet.type = "text/css";
  styleSheet.innerText = styles;
  document.head.appendChild(styleSheet);

  // Settings button
  const settings_button = document.createElement('button');
  settings_button.type = 'button';
  settings_button.id = 'smoothroll_settings_button';
  settings_button.appendChild(document.createTextNode('Smoothroll settings'));
  settings_button.addEventListener('click', () => {
    document.body.classList.toggle('smoothroll_settings_open');
  });
  document.getElementById('header_container').appendChild(settings_button);

  // Settings modal
  const modal = document.createElement('div');
  modal.id = 'smoothroll_settings_modal';
  const modal_heading = document.createElement('h2');
  modal_heading.appendChild(document.createTextNode('Smoothroll Settings'));
  modal.appendChild(modal_heading);
  const smoothroll_setting_theme_label = document.createElement('label');
  smoothroll_setting_theme_label.for = 'smoothroll_setting_theme';
  smoothroll_setting_theme_label.appendChild(document.createTextNode('Color theme'));
  modal.appendChild(smoothroll_setting_theme_label);
  const smoothroll_setting_theme_input = document.createElement('select');
  smoothroll_setting_theme_input.id = 'smoothroll_setting_theme';
  ['System', 'Light', 'Dark'].forEach(op => {
    const option = document.createElement('option');
    option.value = op.toLowerCase();
    if (setting_theme && setting_theme === op.toLowerCase()) {
      option.selected = 'selected';
    }
    option.appendChild(document.createTextNode(op));
    smoothroll_setting_theme_input.appendChild(option);
  });
  smoothroll_setting_theme_input.addEventListener('change', () => {
    localStorage.setItem('smoothroll_setting_theme', smoothroll_setting_theme_input.value);
    loadSettings();
  });
  modal.appendChild(smoothroll_setting_theme_input);
  const modal_close_button = document.createElement('button');
  modal_close_button.type = 'button';
  modal_close_button.id = 'smoothroll_settings_close';
  modal_close_button.appendChild(document.createTextNode('Close settings'));
  modal_close_button.addEventListener('click', () => document.body.classList.remove('smoothroll_settings_open'));
  modal.appendChild(modal_close_button);
  document.body.appendChild(modal);
}