- Minor formatting and QoL changes

This commit is contained in:
Dennis Rönn 2020-09-12 14:30:45 +02:00
parent 7a1fdd9032
commit 4ced5ff9fe
2 changed files with 195 additions and 173 deletions

View file

@ -1,23 +1,23 @@
var query,
variables = {
type: "ANIME",
page: 1,
perPage: 50
},
request;
var query;
var variables = {
type: "ANIME",
page: 1,
perPage: 50
}
var request;
var url = 'https://graphql.anilist.co',
options = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify({
query: query,
variables: variables
})
};
var url = 'https://graphql.anilist.co'
var options = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify({
query: query,
variables: variables
})
}
function search() {
let search = document.querySelector("#search").value
@ -33,92 +33,92 @@ function alRequest(a) {
variables.sort = "TRENDING_DESC"
delete variables.search
query = `
query ($page: Int, $perPage: Int, $sort: [MediaSort], $type: MediaType) {
Page (page: $page, perPage: $perPage) {
pageInfo {
total
currentPage
lastPage
hasNextPage
perPage
}
media(type: $type, sort: $sort) {
id
title {
romaji
english
native
}
description(
asHtml: true
)
season
seasonYear
format
status
episodes
duration
averageScore
genres
coverImage {
extraLarge
medium
}
bannerImage
synonyms
nextAiringEpisode {
timeUntilAiring
episode
query ($page: Int, $perPage: Int, $sort: [MediaSort], $type: MediaType) {
Page (page: $page, perPage: $perPage) {
pageInfo {
total
currentPage
lastPage
hasNextPage
perPage
}
media(type: $type, sort: $sort) {
id
title {
romaji
english
native
}
description(
asHtml: true
)
season
seasonYear
format
status
episodes
duration
averageScore
genres
coverImage {
extraLarge
medium
}
bannerImage
synonyms
nextAiringEpisode {
timeUntilAiring
episode
}
}
}
}
}
}
`
`
} else {
variables.search = a
delete variables.sort
query = `
query ($page: Int, $perPage: Int, $search: String, $type: MediaType) {
Page (page: $page, perPage: $perPage) {
pageInfo {
total
currentPage
lastPage
hasNextPage
perPage
}
media (type: $type, search: $search) {
id
title {
romaji
english
native
}
description(
asHtml: true
)
season
seasonYear
format
status
episodes
duration
averageScore
genres
coverImage {
extraLarge
medium
}
bannerImage
synonyms
nextAiringEpisode {
timeUntilAiring
episode
query ($page: Int, $perPage: Int, $search: String, $type: MediaType) {
Page (page: $page, perPage: $perPage) {
pageInfo {
total
currentPage
lastPage
hasNextPage
perPage
}
media (type: $type, search: $search) {
id
title {
romaji
english
native
}
description(
asHtml: true
)
season
seasonYear
format
status
episodes
duration
averageScore
genres
coverImage {
extraLarge
medium
}
bannerImage
synonyms
nextAiringEpisode {
timeUntilAiring
episode
}
}
}
}
}
}
`
`
}
options.body = JSON.stringify({
query: query,
@ -138,37 +138,37 @@ function alRequest(a) {
function handleData(data) {
request = data
console.log(request);
let frag = document.createDocumentFragment(),
hasBegun = true
let frag = document.createDocumentFragment()
let hasBegun = true
try {
data.data.Page.media.forEach((media, index) => {
let template = document.createElement("div")
template.classList.add("card", "m-0", "p-0")
template.innerHTML = `
<div class="row h-full">
<div class="col-4">
<img src="${media.coverImage.extraLarge}"
class="cover-img w-full h-full">
</div>
<div class="col-8 h-full card-grid">
<div class="px-15 py-10">
<h5 class="m-0 text-capitalize font-weight-bold">${!!media.title.english ? media.title.english : media.title.romaji}</h5>
<p class="text-muted m-0 text-capitalize details">
${(!!media.format ? (media.format == "TV" ? "<span>" + media.format + " Show" : "<span>" + media.format) : "") + "</span>"}
${!!media.episodes ? "<span>" + media.episodes + " Episodes</span>" : (!!media.duration ? "<span>" + media.duration + " Minutes</span>" : "")}
${!!media.status ? "<span>" + media.status.toLowerCase() + "</span>" : ""}
${"<span>" + (!!media.season ? media.season.toLowerCase() + " " : "") + (!!media.seasonYear ? media.seasonYear : "") + "</span>"}
</p>
<div class="row h-full">
<div class="col-4">
<img src="${media.coverImage.extraLarge}"
class="cover-img w-full h-full">
</div>
<div class="col-8 h-full card-grid">
<div class="px-15 py-10">
<h5 class="m-0 text-capitalize font-weight-bold">${!!media.title.english ? media.title.english : media.title.romaji}</h5>
<p class="text-muted m-0 text-capitalize details">
${(!!media.format ? (media.format == "TV" ? "<span>" + media.format + " Show" : "<span>" + media.format) : "") + "</span>"}
${!!media.episodes ? "<span>" + media.episodes + " Episodes</span>" : (!!media.duration ? "<span>" + media.duration + " Minutes</span>" : "")}
${!!media.status ? "<span>" + media.status.toLowerCase() + "</span>" : ""}
${"<span>" + (!!media.season ? media.season.toLowerCase() + " " : "") + (!!media.seasonYear ? media.seasonYear : "") + "</span>"}
</p>
</div>
<div class="overflow-y-scroll px-15 py-10 bg-very-dark card-desc">
${media.description}
</div>
<div class="px-15 pb-10 pt-5">
${media.genres.map(key => (`<span class="badge badge-pill badge-primary mt-5">${key}</span> `)).join('')}
</div>
</div>
</div>
<div class="overflow-y-scroll px-15 py-10 bg-very-dark card-desc">
${media.description}
</div>
<div class="px-15 pb-10 pt-5">
${media.genres.map(key => (`<span class="badge badge-pill badge-primary mt-5">${key}</span> `)).join('')}
</div>
</div>
</div>
`
template.onclick = function () {
@ -185,23 +185,24 @@ function handleData(data) {
}
document.querySelector(".gallery").appendChild(frag)
}
let detailsfrag = document.createDocumentFragment(),
details = {
averageScore: "Average Score",
duration: "Episode Duration",
episodes: "Episodes",
format: "Format",
genres: "Genres",
season: "Season",
seasonYear: "Year",
status: "Status",
english: "English",
romaji: "Romaji",
native: "Native",
synonyms: "Synonyms"
}
function viewAnime(media) {
let detailsfrag = document.createDocumentFragment()
let details = {
averageScore: "Average Score",
duration: "Episode Duration",
episodes: "Episodes",
format: "Format",
genres: "Genres",
season: "Season",
seasonYear: "Year",
status: "Status",
english: "English",
romaji: "Romaji",
native: "Native",
synonyms: "Synonyms"
}
function viewAnime(media) {
halfmoon.toggleModal("view")
document.querySelector(".view .banner img").src = ""
document.querySelector(".view .banner img").src = media.bannerImage
@ -213,6 +214,7 @@ function viewAnime(media) {
detailsCreator(media)
document.querySelector(".view .details").appendChild(detailsfrag)
}
function detailsCreator(entry) {
if (entry != undefined) {
Object.entries(entry).forEach(value => {
@ -235,33 +237,37 @@ function detailsCreator(entry) {
})
}
}
const DOMPARSER = new DOMParser().parseFromString.bind(new DOMParser()),
searchTitle = document.querySelector("#title"),
searchEpisode = document.querySelector("#ep")
var selected
const DOMPARSER = new DOMParser().parseFromString.bind(new DOMParser())
const searchTitle = document.querySelector("#title")
const searchEpisode = document.querySelector("#ep")
var selected;
async function nyaaSearch(media, episode) {
if (parseInt(episode) < 10) {
episode = `0${episode}`
}
let titles = Object.values(media.title).concat(media.synonyms).filter(name => name != null),
table = document.querySelector("tbody.results"),
results = document.createDocumentFragment()
let titles = Object.values(media.title).concat(media.synonyms).filter(name => name != null)
let table = document.querySelector("tbody.results")
let results = document.createDocumentFragment()
for (let title of titles) {
if (results.children.length == 0) {
title = title.replace(/ /g, "+")
let url = new URL(`https://nyaa.si/?page=rss&c=1_2&f=2&s=seeders&o=desc&q=${title}"+${episode}+"`)
results = await rssFetch(url)
}
};
}
if (results.children.length == 0) {
halfmoon.initStickyAlert({
content: `Couldn't find torrent for ${!!media.title.english ? media.title.english : media.title.romaji} Episode ${parseInt(episode)}! Try specifying a torrent manually.`,
title: "Search Failed",
alertType: "alert-danger",
fillType: ""
});
})
} else {
table.textContent = ""
table.appendChild(results)
@ -272,13 +278,14 @@ async function nyaaSearch(media, episode) {
async function rssFetch(url) {
let frag = document.createDocumentFragment()
res = await fetch(url)
await res.text().then((xmlTxt) => {
try {
let doc = DOMPARSER(xmlTxt, "text/xml")
doc.querySelectorAll("item").forEach((item, index) => {
let i = item.querySelector.bind(item),
template = document.createElement("tr")
let i = item.querySelector.bind(item)
let template = document.createElement("tr")
template.innerHTML += `
<th>${(index + 1)}</th>
<td>${i("title").textContent}</td>
@ -293,6 +300,7 @@ async function rssFetch(url) {
console.error(e)
}
})
return frag
}

View file

@ -16,7 +16,7 @@ const controls = document.getElementsByClassName('ctrl'),
thumbnail = document.querySelector("#dThumb")
//event listeners
// event listeners
volume.addEventListener("input", function () {
updateVolume()
});
@ -45,25 +45,29 @@ for (let i = 0; i < controls.length; i++) {
// progress bar and display
function updateDisplay() {
let progressPercent = (video.currentTime / video.duration * 100),
bufferPercent = video.buffered.length == 0 ? 0 : video.buffered.end(video.buffered.length - 1) / video.duration * 100
let progressPercent = (video.currentTime / video.duration * 100)
let bufferPercent = video.buffered.length == 0 ? 0 : video.buffered.end(video.buffered.length - 1) / video.duration * 100
progress.style.setProperty("--buffer", bufferPercent + "%");
updateBar(progressPercent || progress.value / 10);
createThumbnail(video);
}
function dragBar() {
video.pause()
updateBar(progress.value / 10)
}
function dragBarEnd() {
video.currentTime = currentTime || 0
playVideo()
}
async function dragBarStart() {
await video.pause()
updateBar(progress.value / 10)
}
let currentTime
let currentTime;
function updateBar(progressPercent) {
currentTime = video.duration * progressPercent / 100
progress.style.setProperty("--progress", progressPercent + "%");
@ -77,12 +81,11 @@ function updateBar(progressPercent) {
}
// dynamic thumbnails
let thumbnails = [],
ratio,
canvas = document.createElement("canvas"),
context = canvas.getContext('2d'),
w = 150,
h
let thumbnails = []
let ratio
let canvas = document.createElement("canvas")
let context = canvas.getContext('2d')
let w = 150, h
function initThumbnail() {
thumbnails = []
@ -92,6 +95,7 @@ function initThumbnail() {
canvas.height = h;
progress.style.setProperty("--height", h + "px");
}
function createThumbnail(vid) {
let index = Math.floor(vid.currentTime / 5)
if (!thumbnails[index] && h) {
@ -100,6 +104,7 @@ function createThumbnail(vid) {
thumbnails[index] = canvas.toDataURL("image/jpeg")
}
}
function finishThumbnails() {
let thumbVid = document.createElement("video")
thumbVid.src = video.src
@ -122,7 +127,7 @@ function finishThumbnails() {
}
//bufering spinner
// bufering spinner
let buffer;
function resetBuffer() {
@ -136,13 +141,14 @@ function resetBuffer() {
function isBuffering() {
buffer = setTimeout(displayBuffer, 150)
}
function displayBuffer() {
buffering.classList.remove('hidden')
resetTimer()
}
//immerse timeout
let immerseTime;
// immerse timeout
let immerseTime;
document.onmousemove = resetTimer;
document.onkeypress = resetTimer;
@ -155,22 +161,26 @@ function resetTimer() {
player.classList.remove('immersed')
immerseTime = setTimeout(immersePlayer, 3000)
}
let islooped;
let islooped;
function toTS(sec) {
if (Number.isNaN(sec)) {
return "--:--";
}
let hours = Math.floor(sec / 3600),
minutes = Math.floor((sec - (hours * 3600)) / 60),
seconds = Math.floor(sec - (hours * 3600) - (minutes * 60));
let hours = Math.floor(sec / 3600)
let minutes = Math.floor((sec - (hours * 3600)) / 60)
let seconds = Math.floor(sec - (hours * 3600) - (minutes * 60));
if (minutes < 10) {
minutes = `0${minutes}`;
}
if (seconds < 10) {
seconds = `0${seconds}`;
}
if (hours > 0) {
return `${hours}:${minutes}:${seconds}`;
} else {
@ -178,7 +188,7 @@ function toTS(sec) {
}
}
//play/pause button
// play/pause button
async function playVideo() {
try {
await video.play();
@ -187,6 +197,7 @@ async function playVideo() {
btnpp.innerHTML = "play_arrow";
}
}
function bpp() {
if (video.paused) {
playVideo();
@ -200,7 +211,7 @@ function bnext() {
nyaaSearch(nowPlaying[0], nowPlaying[1] + 1)
}
//volume shit
// volume shit
let oldlevel;
@ -228,7 +239,7 @@ function updateVolume(a) {
}
//PiP
// PiP
async function bpip() {
if (video !== document.pictureInPictureElement) {
@ -238,13 +249,13 @@ async function bpip() {
}
}
//theathe mode
// theathe mode
function btheatre() {
halfmoon.toggleSidebar();
}
//fullscreen
// fullscreen
function bfull() {
if (!document.fullscreenElement) {
@ -261,7 +272,7 @@ function seek(a) {
video.currentTime += a;
updateDisplay()
}
//subtitles button, generates content every single time its opened because fuck knows when the parser will find new shit
// subtitles button, generates content every single time its opened because fuck knows when the parser will find new shit
let off
function bcap() {
let frag = document.createDocumentFragment()
@ -304,7 +315,7 @@ function selectLang(lang) {
}
bcap()
}
//keybinds
// keybinds
document.onkeydown = function (a) {
if (document.location.href.endsWith("#player")) {
@ -341,7 +352,8 @@ document.onkeydown = function (a) {
}
}
}
//media session
// media session
function nowPlaying(sel) {
nowPlaying = sel
if ('mediaSession' in navigator) {
@ -359,6 +371,7 @@ function nowPlaying(sel) {
});
}
}
function updatePositionState() {
if ('setPositionState' in navigator.mediaSession) {
navigator.mediaSession.setPositionState({
@ -368,6 +381,7 @@ function updatePositionState() {
});
}
}
if ('mediaSession' in navigator) {
navigator.mediaSession.setActionHandler('play', bpp);
navigator.mediaSession.setActionHandler('pause', bpp);