Skip to content
This repository has been archived by the owner on Mar 31, 2024. It is now read-only.

Commit

Permalink
Bug Fixes, Changed How Anime and Episode Page Urls Works
Browse files Browse the repository at this point in the history
  • Loading branch information
@TechShreyash
TechShreyash committed Mar 4, 2024
1 parent de80894 commit e436230
Show file tree
Hide file tree
Showing 6 changed files with 138 additions and 111 deletions.
16 changes: 9 additions & 7 deletions anime.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
</style>
</head>

<body>
<body id="body">
<header id="head-div">
<div id="title1">
<a href="./index.html"><img width="150" height="40" src="./static/header.png" alt="AnimeDex"></a>
Expand All @@ -57,6 +57,7 @@
</form>
</div>
</header>

<div id="load">
<img src="./static/loading2.gif" alt="Loading..." />
</div>
Expand All @@ -71,15 +72,15 @@ <h6>Oops! Something Went Wrong</h6>
</div>
<!-- Error Page -->

<div id="main-content" style="display: none">
<div id="main-content" style="display: none;">
<section>
<div id="background">
<div id="cover"></div>
</div>

<div class="anime row">
<div class="poster col-3">
<img src="IMG" />
<img id="poster-img" class="lzy_img" src="./static/loading1.gif" data-src="IMG" style="display: none;" />
</div>
<div class="details col-6">
<h1 class="anime-title">TITLE</h1>
Expand Down Expand Up @@ -141,12 +142,13 @@ <h1 class="anime-title">TITLE</h1>
<a class="next" onclick="plusSlides(+1)">❯</a>
</div>
<!-- Episode Slider End -->

<!-- Episode List Start -->
<div class="ep-divo-outer">
<div id="ep-divo-outer" class="ep-divo-outer" style="display: none;">
<section>
<h2>List Of Episodes:</h2>
<select id="ep-upper-div" class="ep-divo-upper divo2" onchange="episodeSelectChange(this)"></select>
<select id="ep-upper-div" class="ep-divo-upper divo2"
onchange="episodeSelectChange(this)"></select>
</section>
<hr>
<div id="ep-lower-div" class="ep-divo-lower divo2"></div>
Expand Down Expand Up @@ -182,4 +184,4 @@ <h2 id="latest">Similar Animes</h2>
<script>window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-BHQX4066ZV');</script>
</body>

</html>
</html>
4 changes: 4 additions & 0 deletions css/episode.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1977,4 +1977,8 @@ h2 {

.ep-btn-playing {
background-color: #eb001f;
}

* {
transition: opacity 0.5s ease;
}
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,4 +95,4 @@ <h2 id="latest">Recent Release</h2>
</script>
</body>

</html>
</html>
132 changes: 72 additions & 60 deletions js/anime.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
// Api urls

const ProxyApi = "https://proxy.techzbots1.workers.dev/?u="
const ProxyApi = "https://proxy.techzbots1.workers.dev/?u=";
const animeapi = "/anime/";
const recommendationsapi = "/recommendations/";

// Api Server Manager

const AvailableServers = ['https://api1.anime-dex.workers.dev', 'https://api2.anime-dex.workers.dev', 'https://api3.anime-dex.workers.dev']
const AvailableServers = [
"https://api1.anime-dex.workers.dev",
"https://api2.anime-dex.workers.dev",
"https://api3.anime-dex.workers.dev",
];

function getApiServer() {
return AvailableServers[Math.floor(Math.random() * AvailableServers.length)]
return AvailableServers[Math.floor(Math.random() * AvailableServers.length)];
}

// Usefull functions
Expand All @@ -18,7 +22,6 @@ async function getJson(path, errCount = 0) {
const ApiServer = getApiServer();
let url = ApiServer + path;


if (errCount > 2) {
throw `Too many errors while fetching ${url}`;
}
Expand Down Expand Up @@ -106,19 +109,22 @@ async function loadAnimeFromGogo(data) {

document.getElementById("main-content").style.display = "block";
document.getElementById("load").style.display = "none";
setTimeout(() => {
document.getElementById("poster-img").style.display = "block";
}, 100);

document.getElementById("watch-btn").href =
"./episode.html?anime=" +
data["episodes"][0][1].split("-episode-")[0] +
"&episode=" +
data["episodes"][0][0];
const anime_title = data["name"];
"./episode.html?anime_id=" +
AnimeID +
"&episode_id=" +
data["episodes"][0][1];

console.log("Anime Info loaded");
RefreshLazyLoader();

await getEpSlider(data["episodes"])
await getEpList(data["episodes"])
await getRecommendations(anime_title)
getEpSlider(data["episodes"]);
getEpList(data["episodes"]);
getRecommendations(data["name"]);
}

// Function to get anime info from anilist search
Expand Down Expand Up @@ -149,7 +155,7 @@ async function loadAnimeFromAnilist(data) {
for (i = 0; i < recommendations.length; i++) {
let anime = recommendations[i];
let title = anime["title"]["userPreferred"];
rechtml += `<a href="./anime.html?anime=${title}"><div class="poster la-anime"> <div id="shadow1" class="shadow"> <div class="dubb">${anime["meanScore"]} / 100</div><div class="dubb dubb2">${anime["format"]}</div></div><div id="shadow2" class="shadow"> <img class="lzy_img" src="./static/loading1.gif" data-src="${anime["coverImage"]["large"]}"> </div><div class="la-details"> <h3>${title}</h3> <div id="extra"> <span>${anime["status"]}</span> <span class="dot"></span> <span>EP ${anime["episodes"]}</span> </div></div></div></a>`;
rechtml += `<a href="./anime.html?anime_id=${title}"><div class="poster la-anime"> <div id="shadow1" class="shadow"> <div class="dubb">${anime["meanScore"]} / 100</div><div class="dubb dubb2">${anime["format"]}</div></div><div id="shadow2" class="shadow"> <img class="lzy_img" src="./static/loading1.gif" data-src="${anime["coverImage"]["large"]}"> </div><div class="la-details"> <h3>${title}</h3> <div id="extra"> <span>${anime["status"]}</span> <span class="dot"></span> <span>EP ${anime["episodes"]}</span> </div></div></div></a>`;
}
document.getElementById("latest2").innerHTML = rechtml;

Expand All @@ -164,43 +170,42 @@ async function loadAnimeFromAnilist(data) {
async function getEpSlider(total) {
let ephtml = "";

for (let i = 0; i < total.length; i++) {
let episodeId = total[i][1]
let epNum = total[i][0]
if (Number(epNum.replaceAll('-', '.')) > 0) {
let x = episodeId.split("-episode-");
ephtml += `<div class=ep-slide><a href="./episode.html?anime=${x[0]}&episode=${x[1]}"><img onerror="retryImageLoad(this)" class="lzy_img" src="./static/loading1.gif" data-src=https://thumb.anime-dex.workers.dev/thumb/${episodeId}><div class=ep-title><span>Episode ${epNum}</span></div></a></div>`;
try {
for (let i = 0; i < total.length; i++) {
const episodeId = total[i][1];
const epNum = total[i][0].replaceAll("-", ".");
if (Number(epNum) > 0) {
ephtml += `<div class=ep-slide><a href="./episode.html?anime_id=${AnimeID}&episode_id=${episodeId}"><img onerror="retryImageLoad(this)" class="lzy_img" src="./static/loading1.gif" data-src=https://thumb.anime-dex.workers.dev/thumb/${episodeId}><div class=ep-title><span>Episode ${epNum}</span></div></a></div>`;
}
}
document.getElementById("ep-slider").innerHTML = ephtml;
document.getElementById("slider-main").style.display = "block";
RefreshLazyLoader();
console.log("Episode Slider loaded");
} catch (err) {
console.error(err);
}
document.getElementById("ep-slider").innerHTML = ephtml;
document.getElementById("slider-main").style.display = "block";
RefreshLazyLoader();
console.log("Episode Slider loaded");
}

// Retry image load
function retryImageLoad(img) {
const ImageUrl = img.src
const ImageUrl = img.src;
img.src = "./static/loading1.gif";

// load after 3 second
// retry loading after 3 second

setTimeout(() => {

if (ImageUrl.includes("?t=")) {
const t = Number(ImageUrl.split("?t=")[1]) + 1;

// Retry 10 times
if (t < 5) {
img.src = ImageUrl.split("?t=")[0] + "?t=" + String(t);
}
}
else {
} else {
img.src = ImageUrl + "?t=1";
}

}, 3000);

}

// Function to get episode list
Expand All @@ -213,32 +218,35 @@ async function getEpList(total) {
let loadedFirst = false;

for (let i = 0; i < total.length; i++) {
const x = total[i][1].split("-episode-");
const animeid = x[0];
const epnum = Number(x[1].replaceAll('-', '.'));
const epnum = Number(total[i][0].replaceAll("-", "."));

if (((epnum - 1) % 100) === 0) {
if ((epnum - 1) % 100 === 0) {
let epUpperBtnText;
if ((TotalEp - epnum) < 100) {

if (TotalEp - epnum < 100) {
epUpperBtnText = `${epnum} - ${TotalEp}`;
html += `<option class="ep-btn" data-from=${epnum} data-to=${TotalEp}>${epUpperBtnText}</option>`;

if (!loadedFirst) {
// load first episode list
getEpLowerList(epnum, TotalEp);
loadedFirst = true;
}
} else {
epUpperBtnText = `${epnum} - ${epnum + 99}`;
html += `<option class="ep-btn" data-from=${epnum} data-to=${epnum + 99}>${epUpperBtnText}</option>`;
html += `<option class="ep-btn" data-from=${epnum} data-to=${epnum + 99
}>${epUpperBtnText}</option>`;

if (!loadedFirst) {
// load first episode list
getEpLowerList(epnum, epnum + 99);
loadedFirst = true;
}
}
}
}
document.getElementById('ep-upper-div').innerHTML = html;
document.getElementById("ep-upper-div").innerHTML = html;
document.getElementById("ep-divo-outer").style.display = "block";
console.log("Episode list loaded");
}

Expand All @@ -247,37 +255,37 @@ async function getEpLowerList(start, end) {
const eplist = Episode_List.slice(start - 1, end);

for (let i = 0; i < eplist.length; i++) {
const episode_id = eplist[i][1];
const x = eplist[i][1].split("-episode-");
const animeid = x[0];
let epnum = Number(x[1].replaceAll('-', '.'));
let epnum = Number(x[1].replaceAll("-", "."));

let epLowerBtnText;
epLowerBtnText = `${epnum}`;
let epLowerBtnText = `${epnum}`;

epnum = String(epnum).replaceAll('.', '-');
html += `<a class="ep-btn" href="./episode.html?anime=${animeid}&episode=${epnum}">${epLowerBtnText}</a>`;
html += `<a class="ep-btn" href="./episode.html?anime_id=${AnimeID}&episode_id=${episode_id}">${epLowerBtnText}</a>`;
}
document.getElementById('ep-lower-div').innerHTML = html;
document.getElementById("ep-lower-div").innerHTML = html;
}

async function episodeSelectChange(elem) {
var option = elem.options[elem.selectedIndex];
getEpLowerList(parseInt(option.getAttribute('data-from')), parseInt(option.getAttribute('data-to')))
getEpLowerList(
parseInt(option.getAttribute("data-from")),
parseInt(option.getAttribute("data-to"))
);
}

// Function to get anime recommendations
async function getRecommendations(anime_title) {
document.getElementsByClassName("sload")[0].style.display = 'block';
document.getElementsByClassName("sload")[0].style.display = "block";

anime_title = anime_title.replaceAll(" ", "+");

let data;
try {
data = await getJson(recommendationsapi + anime_title);
}
catch (err) {
document.getElementById('similar-div').style.display = 'none';
return
} catch (err) {
document.getElementById("similar-div").style.display = "none";
return;
}

const recommendations = data["results"];
Expand All @@ -286,47 +294,51 @@ async function getRecommendations(anime_title) {
for (i = 0; i < recommendations.length; i++) {
let anime = recommendations[i];
let title = anime["title"]["userPreferred"];
rechtml += `<a href="./anime.html?anime=${title}"><div class="poster la-anime"> <div id="shadow1" class="shadow"> <div class="dubb">${anime["meanScore"]} / 100</div><div class="dubb dubb2">${anime["format"]}</div></div><div id="shadow2" class="shadow"> <img class="lzy_img" src="./static/loading1.gif" data-src="${anime["coverImage"]["large"]}"> </div><div class="la-details"> <h3>${title}</h3> <div id="extra"> <span>${anime["status"]}</span> <span class="dot"></span> <span>EP ${anime["episodes"]}</span> </div></div></div></a>`;
rechtml += `<a href="./anime.html?anime_id=${title}"><div class="poster la-anime"> <div id="shadow1" class="shadow"> <div class="dubb">${anime["meanScore"]} / 100</div><div class="dubb dubb2">${anime["format"]}</div></div><div id="shadow2" class="shadow"> <img class="lzy_img" src="./static/loading1.gif" data-src="${anime["coverImage"]["large"]}"> </div><div class="la-details"> <h3>${title}</h3> <div id="extra"> <span>${anime["status"]}</span> <span class="dot"></span> <span>EP ${anime["episodes"]}</span> </div></div></div></a>`;
}
document.getElementById("latest2").innerHTML = rechtml;
document.getElementsByClassName("sload")[0].style.display = 'none';
document.getElementsByClassName("sload")[0].style.display = "none";
console.log("Anime Recommendations loaded");
RefreshLazyLoader();
}

// Function to scroll episode slider
const windowWidth = window.innerWidth;

function plusSlides(n) {
if (n === 1) {
document.getElementById("slider-carousel").scrollLeft += 600;
document.getElementById("slider-carousel").scrollLeft += windowWidth / 2;
}
else if (n === -1) {
document.getElementById("slider-carousel").scrollLeft -= 600;
document.getElementById("slider-carousel").scrollLeft -= windowWidth / 2;
}
}

//Running functions

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);

if (urlParams.get("anime") == null) {
const AnimeID = urlParams.get("anime_id");
if (AnimeID == null) {
window.location = "./index.html";
}

//Running functions

async function loadData() {
try {
let data = await getJson(animeapi + urlParams.get("anime"));
let data = await getJson(animeapi + AnimeID);
data = data["results"];

if (data.source == "gogoanime") {
loadAnimeFromGogo(data);
await loadAnimeFromGogo(data);
} else if (data.source == "anilist") {
loadAnimeFromAnilist(data);
await loadAnimeFromAnilist(data);
}
RefreshLazyLoader();
} catch (err) {
document.getElementById("error-page").style.display = "block";
document.getElementById("load").style.display = "none";
document.getElementById("main-content").style.display = "none";
document.getElementById("error-desc").innerHTML = err;
console.error(err);
}
Expand Down
Loading

0 comments on commit e436230

Please sign in to comment.