Total And Remaning Duration Of Any Animes On MAL

Now you can know how much time you will need to finish watching any animes on mal. If you use the MAL episode tracking tool you can also know how much time you still have to spend to finish watching all the remaining episodes.

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         Total And Remaning Duration Of Any Animes On MAL
// @namespace    Total duration
// @version      3
// @description  Now you can know how much time you will need to finish watching any animes on mal. If you use the MAL episode tracking tool you can also know how much time you still have to spend to finish watching all the remaining episodes.
// @author       Only_Brad
// @include      /^https:\/\/myanimelist\.net\/anime\/[\d]+(\/.*)?/
// @icon         https://www.google.com/s2/favicons?domain=myanimelist.net
// @run-at       document-end
// ==/UserScript==
(function() {
  let totalEps = document.getElementById("curEps").textContent;
  if (totalEps === "?" || totalEps === "1") return;
  totalEps = parseInt(totalEps);

  const informationHeader = findInformation(),
    durationNode = findDuration(),
    durationText = durationNode.querySelector("span"),
    durationValueNode = durationText.nextSibling,
    durationValue = durationValueNode.textContent.trim();

  const epDuration = extractDuration();
  const totalDurationNode = durationNode.cloneNode(true);
  const remainingTimeNode = durationNode.cloneNode(true);

  showTotalDuration();
  showRemainingDuration();

  function findInformation() {
    const headers = [...document.querySelectorAll("h2")];
    return headers.find(h2 => h2.textContent === "Information");
  }

  function findDuration() {
    const allInfo = [...informationHeader.parentNode.querySelectorAll("div")];
    return allInfo.find(info => info.innerText.includes("Duration"));
  }

  function extractDuration() {
    const DURATION_REGEX = /(?:(\d+) hr\. )?(\d+) min\./
    const match = durationValue.match(DURATION_REGEX);
    let hours, mins;

    if (match)[, hours, mins] = match;
    else hours = mins = 0;
    if (!hours) hours = 0;
    if (!mins) mins = 0;

    return {
      hours: parseInt(hours),
      mins: parseInt(mins)
    };
  }

  function getTotalDuration(epCount, {
    hours,
    mins
  }) {
    const
      totalMinutes = mins + hours * 60,
      totalDuration = epCount * totalMinutes,
      totalDurationHours = Math.floor(totalDuration / 60),
      totalDurationMins = totalDuration % 60;

    return {
      hours: totalDurationHours,
      mins: totalDurationMins
    };
  }

  function showDuration({
    epCount,
    durationNode,
    siblingNode,
    text
  }) {
    const {
      hours,
      mins
    } = getTotalDuration(epCount, epDuration);
    const durationText = durationNode.querySelector("span");
    const durationValue = durationText.nextSibling;

    durationText.textContent = text;
    durationValue.textContent = ` ${hours?hours+" hr." : ""} ${mins?mins+" min." : ""}`;
    siblingNode.insertAdjacentElement("afterend", durationNode);
  }

  function showTotalDuration() {
    showDuration({
      epCount: totalEps,
      durationNode: totalDurationNode,
      siblingNode: durationNode,
      text: "Total Duration:"
    });
  }

  function showRemainingDuration() {
    let epWatched = document.getElementById("myinfo_watchedeps");
    if (isNaN(epWatched.value)) return;

    epWatched = parseInt(epWatched.value);
    const epRemaining = totalEps - epWatched;
    showDuration({
      epCount: epRemaining,
      durationNode: remainingTimeNode,
      siblingNode: totalDurationNode,
      text: "Remaining time:"
    });
  }
})();