' }, { bbcode: /\[color=(.*?)\](.*?)\[\/color\]/g, html: '$2' }, { bbcode: /\[size=(.*?)\](.*?)\[\/size\]/g, html: '$2' }, { bbcode: /\[center\](.*?)\[\/center\]/g, html: '$1 Said:
' }, { bbcode: /\[\/quote\]/g, html: '
$1
' },
{ bbcode: /\[list\](.*?)\[\/list\]/g, html: "- $1
- $2
' },
{ bbcode: /\[spoiler=(.*?)\]([\s\S]*?)\[\/spoiler\]/g, html: '
' },
{ bbcode: /@(\S+)/g, html: '@$1' },
];
let html = bbcode;
for (const mapping of mappings) { html = html.replace(mapping.bbcode, mapping.html); }
return html;
}
},
{
name: "Reddit",
icon: "https://www.redditstatic.com/desktop2x/img/favicon/apple-icon-57x57.png",
url: "https://www.reddit.com/",
_clientId: "dbe5cec5a2f33fdda148a6014384b984",
async getDiscussion(animeTitle, epNum) {
let animeId, topic, url, response, posts;
let headers = {headers: {'x-requested-with': 'XMLHttpRequest', 'origin': window.location.origin}};
// get the anime's MAL id
try {
url = `https://api.jikan.moe/v4/anime?q=${animeTitle}&limit=1`;
animeId = GM_getValue('cachedId_'+url, '');
if (animeId == '') {
response = await GM_fetch(url, headers);
data = await response.json();
if (data.data.length > 0) {
animeId = data.data[0].mal_id;
GM_setValue('cachedId_'+url, animeId);
}
}
} catch (e) {
throw new Error(`Couldn't find the anime id. Retry after a while or switch to another service.\n${e.code} : ${e.message}`);
}
// Get the discussion
try {
url = `https://api.reddit.com/r/anime/search.json?q=${animeTitle}+-+Episode+${epNum}+discussion+author:AutoLovepon&restrict_sr=on&include_over_18=on&sort=relevance&limit=50`;
response = await axios.get(url);
topic = response.data.data.children.find(it => it.data.title.includes(` - Episode ${epNum} discussion`) && it.data.selftext.includes(`[MyAnimeList](https://myanimelist.net/anime/${animeId}`))?.data;
} catch (e) {
throw new Error(`No discussion found. Retry after a while or switch to another service.\n${e.code} : ${e.message}`);
}
// get the comments in the discussion
try {
url = topic.url.replace('www.reddit.com', 'api.reddit.com');
response = await axios.get(url);
posts = response.data[1].data.children;
if (posts[0].data.author == "AutoModerator") posts.shift(); // skip the first bot post
} catch (e) {
throw new Error(`Error getting the discusssion. Retry after a while or switch to another service.\n${e.code} : ${e.message}`);
}
let chats = [];
for (let post of posts) chats.push(this._processPost(post));
const discussion = new Discussion(topic.title, topic.url, chats);
return discussion;
},
_processPost(post) {
const user = post.data.author;
const userLink = "https://www.reddit.com/user/" + user;
// const about = axios.get(`https://api.reddit.com/user/${user}/about`);
const avatar = axios.get(`https://api.reddit.com/user/${user}/about`).then(r=>r.data.data.icon_img.split('?')[0]);
const msg = ((el) => { el.innerHTML = post.data.body_html; return el.value; })(document.createElement('textarea'));
const timestamp = post.data.created_utc * 1000;
let replies = [];
if (post.data.replies && post.data.replies.data)
for (let reply of post.data.replies.data.children)
replies.push(this._processPost(reply));
return new Chat(user, userLink, avatar, msg, timestamp, replies);
}
},
];
/***************************************************************
* Classes for handling various data like settings & discussions
***************************************************************/
// User settings
class UserSettings {
constructor(usernames = {}) {
this.usernames = usernames;
}
static load() {
return GM_getValue("userSettings", new UserSettings());
}
}
// Class to hold each row of a discussion
class Chat {
constructor(user, userLink, avatar, msg, timestamp, replies) {
this.user = user;
this.userLink = userLink;
this.avatar = avatar;
this.msg = msg;
this.timestamp = timestamp;
this.replies = replies;
}
getRelativeTime() {
const now = new Date().getTime();
const diff = now - this.timestamp;
const seconds = Math.floor(diff / 1000);
const minutes = Math.floor(seconds / 60);
const hours = Math.floor(minutes / 60);
const days = Math.floor(hours / 24);
const weeks = Math.floor(days / 7);
const months = Math.floor(days / 30);
const years = Math.floor(days / 365);
if (years > 0) {
return `${years} ${years === 1 ? "year" : "years"} ago`;
} else if (months > 0) {
return `${months} ${months === 1 ? "month" : "months"} ago`;
} else if (weeks > 0) {
return `${weeks} ${weeks === 1 ? "week" : "weeks"} ago`;
} else if (days > 0) {
return `${days} ${days === 1 ? "day" : "days"} ago`;
} else if (hours > 0) {
return `${hours} ${hours === 1 ? "hour" : "hours"} ago`;
} else if (minutes > 0) {
return `${minutes} ${minutes === 1 ? "minute" : "minutes"} ago`;
} else {
return `${seconds} ${seconds === 1 ? "second" : "seconds"} ago`;
}
}
}
// Class to hold the complete discussions
class Discussion {
constructor(title, link, chats) {
this.title = title;
this.link = link;
this.chats = chats;
}
}
/***************************************************************
* The UI elements
***************************************************************/
// generate the discussion area
async function generateDiscussionArea() {
const discussionArea = document.createElement("div");
discussionArea.id = "AniCHAT";
discussionArea.className = "discussion-area";
const discussionTitle = document.createElement("h3");
discussionTitle.className = "discussion-title";
const discussionTitleText = document.createElement("a");
discussionTitleText.textContent = `${await site.getAnimeTitle()} Episode ${await site.getEpNum()} Discussion`;
discussionTitleText.title = "Click to view the original discussion";
discussionTitleText.target = "_blank";
discussionTitle.appendChild(discussionTitleText);
const serviceSwitcher = buildServiceSwitcher();
discussionTitle.appendChild(serviceSwitcher);
const discussionList = document.createElement("ul");
discussionList.className = "discussion-list";
discussionArea.appendChild(discussionTitle);
discussionArea.appendChild(discussionList);
return discussionArea;
}
function buildServiceSwitcher() {
const servicesArea = document.createElement('div');
servicesArea.id = 'service-switcher';
servicesArea.innerHTML = `
`;
loadingElement.style.cssText = `display: flex; align-items: center;`;
const progressBar = document.createElement("div");
progressBar.className = "progress-bar";
progressBar.style.cssText = `width: "100%"; height: 10px; background-color: #ccc; position: relative;`;
const progressFill = document.createElement("div");
progressFill.className = "progress-fill";
progressFill.style.cssText = `width: 0%; height: 100%; background-color: #4CAF50; position: absolute; top: 0; left: 0;`;
const message = document.createElement("span");
message.textContent = `This ${
timeout / 1000
} secs timeout is set to reduce the load on the service and you can configure the TIMEOUT by editing the script (line 21)`;
message.style.cssText = "font-size: 14px; color: darkgrey;";
progressBar.appendChild(progressFill);
loadingElement.appendChild(message);
loadingArea.appendChild(loadingElement);
loadingArea.appendChild(progressBar);
console.log("Countdown started: " + countdown + "ms");
const countdownInterval = setInterval(() => {
countdown -= 100;
const progressWidth = 100 - (countdown / timeout) * 100;
progressFill.style.width = `${progressWidth}%`;
if (countdown <= 0) {
message.remove();
loadingElement.remove();
clearInterval(countdownInterval);
}
}, 100);
return loadingArea;
}
// Add CSS styles to the page
const styles = `
.discussion-area {
border-radius: 10px;
padding: 10px;
}
.discussion-title {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.discussion-title > a {
margin-right: 20px;
}
.service-icon {
height: 25px;
padding-right: 10px;
}
#service-switcher {
width: 7%;
transition: width 0.3s ease-in-out;
overflow: hidden;
display: flex;
}
#service-switcher:hover {
width: ${8+5*services.length}%;
}
ul.discussion-list {
overflow: auto;
max-height: 90vh;
}
.chat-row {
display: flex;
flex-direction: column;
padding: 10px 0;
border-top: 1px solid #eee;
}
.chat-content {
display: flex;
flex-direction: row;
}
.chat-row > .reply {
display: flex;
flex-direction: column;
padding-left: 55px;
border-left: 0.7px solid #eee;
}
.user-avatar {
width: 55px;
height: 55px;
margin-right: 10px;
}
.user-avatar > img {
width: 55px;
height: 55px;
object-fit: cover;
border-radius: 15px;
}
.user-msg {
display: flex;
flex-direction: column;
}
.chat-name {
font-weight: bold;
font-size: 15px;
}
.chat-time {
font-size: 12px;
font-weight: bold;
padding-top: 5px;
color: darkgrey;
}
.chat-msg {
padding: 10px 0;
}
.chat-msg img {
max-width: 100%;
}
.error-message {
color: red;
white-space: pre-wrap;
}
`;
/***************************************************************
* Initialize all data and setup menu commands
***************************************************************/
// User settings
let userSettings = UserSettings.load();
// Site instance
let site = getCurrentSite();
// Service instance
let service = services[GM_getValue("service", 0)];
/***************************************************************
* Functions for working of the script
***************************************************************/
// Returns a promise of the given element. Resolves when the element is found in the DOM.
function waitForElm(selector) {
return new Promise(resolve => {
if (document.querySelector(selector)) {
let elm = document.querySelector(selector);
// console.log(`Element Found!!: ${elm.textContent}`);
return resolve(elm);
}
const observer = new MutationObserver(mutations => {
if (document.querySelector(selector)) {
let elm = document.querySelector(selector);
// console.log(`Element Detected!: ${elm.textContent}`);
resolve(elm);
observer.disconnect();
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
});
}
// Get the current website based on the URL
function getCurrentSite() {
const currentUrl = window.location.href.toLowerCase();
return animeSites.find((website) => website.url.some((site) => currentUrl.includes(site)));
}
// Run the script
async function run(timeout=TIMEOUT) {
console.info(`Running AniCHAT on ${site.name}...`);
// initialize the discussionArea
const discussionArea = await generateDiscussionArea();
// Fallback techniques to use when chatArea cant be detected
const selectors = [
{ selector: () => site.chatArea && typeof site.chatArea === "string" ? document.querySelector(site.chatArea) : site.chatArea(), prepend: false },
{ selector: () => document.querySelector('#main > .container'), prepend: false },
{ selector: () => document.querySelector('#footer'), prepend: true },
{ selector: () => document.querySelector('footer'), prepend: true },
{ selector: () => document.body, prepend: false },
];
for (let i = 0; i < selectors.length; i++) {
try {
const element = selectors[i].selector();
if (selectors[i].prepend) {
element.prepend(discussionArea);
} else {
element.appendChild(discussionArea);
}
break;
} catch (error) {
continue;
}
}
// Add custom css styles to the page
const styleElement = document.createElement("style");
styleElement.textContent = styles + (site.styles || '');
discussionArea.append(styleElement);
// Attach the loading element to the page
discussionArea.appendChild(setLoadingTimeout(timeout));
// Load the discussion after a set timeout
setTimeout(async () => {
try {
const discussion = await service.getDiscussion(await site.getAnimeTitle(), await site.getEpNum());
console.log(discussion);
discussion.chats.forEach(async (chat) => {
discussionArea.querySelector("ul").appendChild(await buildChatRow(chat));
});
discussionArea.querySelector(".discussion-title a").href = discussion.link;
discussionArea.querySelector(".discussion-title a").textContent = discussion.title;
} catch (error) {
console.error(`${error.message}\n\n${error.stack}`);
const errorElement = document.createElement("span");
errorElement.className = "error-message";
errorElement.textContent = `AniCHAT:\n${error.stack}\n\nCheck the console logs for more detail.`;
discussionArea.appendChild(errorElement);
}
}, timeout);
}
// Workaround for SPA sites like Miruro for which the script doesn't auto reload on navigation
function initScript() {
const initDelay = site.initDelay || 0;
setTimeout(run, initDelay);
// Handle SPA navigation
let lastUrl = location.href;
new MutationObserver(() => {
const url = location.href;
if (url !== lastUrl) {
lastUrl = url;
console.log('URL changed, re-running AniCHAT');
setTimeout(run, initDelay);
}
}).observe(document.querySelector('body'), { subtree: true, childList: true });
}
try {
initScript();
} catch (e) {
console.error(`${e.message}\n\n${e.stack}`);
}