mirror of
https://github.com/ThaUnknown/miru.git
synced 2026-08-20 04:25:38 +00:00
making my code fucking unreadable XD, minor optimizations, removed some settings, UI rework progress, offline storing progress, fixes
This commit is contained in:
ThaUnknown
parent
915ec8511a
commit
318cee4190
5 changed files with 86 additions and 128 deletions
|
|
@ -143,7 +143,6 @@
|
|||
data-title="Anime Watch List" id="navList">
|
||||
<span class="material-icons font-size-20">list_alt</span>
|
||||
</a>
|
||||
</a>
|
||||
<a href="#releases" class="navbar-brand pointer" data-toggle="tooltip" data-placement="bottom"
|
||||
data-title="Latest Releases Feed" id="navNew">
|
||||
<span class="material-icons font-size-20">fiber_new</span>
|
||||
|
|
@ -152,6 +151,13 @@
|
|||
data-title="Currently Trending Anime" id="navTrending">
|
||||
<span class="material-icons font-size-20">trending_up</span>
|
||||
</a>
|
||||
<a href="#downloads" class="navbar-brand pointer" data-toggle="tooltip" data-placement="bottom"
|
||||
data-title="Your Downloads" id="navDownloads">
|
||||
<span class="material-icons font-size-20">get_app</span>
|
||||
</a>
|
||||
<a href="#home" class="navbar-brand pointer" data-toggle="tooltip" data-placement="bottom"
|
||||
data-title="Home Page" id="navHome">
|
||||
<span class="material-icons font-size-20">home</span>
|
||||
</a>
|
||||
<a class="navbar-brand pointer d-none" data-toggle="tooltip" data-placement="bottom"
|
||||
data-title="Currently Playing Anime" id="navNowPlaying">
|
||||
|
|
@ -273,6 +279,10 @@
|
|||
<div class="gallery releases h-full overflow-y-scroll">
|
||||
</div>
|
||||
</section>
|
||||
<section id="downloads" class="flex-column border-top">
|
||||
<div class="gallery downloads h-full overflow-y-scroll">
|
||||
</div>
|
||||
</section>
|
||||
<section id="settingsTab" class="overflow-y-auto">
|
||||
<div class="content d-flex flex-column align-items-start mt-15">
|
||||
|
||||
|
|
@ -303,11 +313,6 @@
|
|||
<span class="input-group-text">sec</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-switch mb-10" data-toggle="tooltip" data-placement="top"
|
||||
data-title="Shows Miniplayer When Browsing">
|
||||
<input type="checkbox" id="player4" checked>
|
||||
<label for="player4">Miniplayer</label>
|
||||
</div>
|
||||
<div class="custom-switch mb-10" data-toggle="tooltip" data-placement="top"
|
||||
data-title="Shows Small Thumbnail Images When Using The Seek Bar">
|
||||
<input type="checkbox" id="player5" checked>
|
||||
|
|
@ -318,11 +323,6 @@
|
|||
<input type="checkbox" id="player6">
|
||||
<label for="player6">Autoplay Next Episode</label>
|
||||
</div>
|
||||
<div class="custom-switch mb-10" data-toggle="tooltip" data-placement="top"
|
||||
data-title="Enables Picture In Picture If Your Device Supports It">
|
||||
<input type="checkbox" id="player7" checked>
|
||||
<label for="player7">Picture In Picture</label>
|
||||
</div>
|
||||
<div class="custom-switch mb-10" data-toggle="tooltip" data-placement="top" data-title="Improves UX And Performance After A Download
|
||||
Finishes, Small Spike In CPU And RAM Usage For A Few Seconds">
|
||||
<input type="checkbox" id="player8" checked>
|
||||
|
|
@ -351,11 +351,6 @@
|
|||
<option value="Erai-raws">Open Sans Semibold,45,&H00FFFFFF,&H000000FF,&H00020713,&H00000000,-1,0,0,0,100,100,0,0,1,1.7,0,2,10,10,25,1</option>
|
||||
</datalist>
|
||||
</div>
|
||||
<div class="custom-switch mb-10" data-toggle="tooltip" data-placement="top"
|
||||
data-title="Greatly Improves Performance, Might Cause Desync On Very Low-End Devices">
|
||||
<input type="checkbox" id="subtitle2" checked>
|
||||
<label for="subtitle2">Async Rendering</label>
|
||||
</div>
|
||||
<div class="custom-switch mb-20" data-toggle="tooltip" data-placement="top" data-title="Displays Subtitles In PiP And ChromeCast, Requires chrome://flags/#disable-accelerated-2d-canvas Set To
|
||||
Disabled, Very CPU Intensive">
|
||||
<input type="checkbox" id="subtitle3" checked>
|
||||
|
|
@ -414,11 +409,6 @@
|
|||
<input type="checkbox" id="torrent5">
|
||||
<label for="torrent5">Drive Caching</label>
|
||||
</div>
|
||||
<div class="custom-switch mb-10" data-toggle="tooltip" data-placement="top"
|
||||
data-title="Stores Torrent Data On Drive Across Sessions Allowing To Re-Play Torrents Without Re-Downloading Them, Uses A LOT Of Drive Space">
|
||||
<input type="checkbox" id="torrent8">
|
||||
<label for="torrent8">Persistent Storing</label>
|
||||
</div>
|
||||
<div class="custom-switch mb-10" data-toggle="tooltip" data-placement="top"
|
||||
data-title="Tries To Resolve Anime Names From Manually Added Torrent Names, Might Lead To Wrong Anime Being Detected">
|
||||
<input type="checkbox" id="torrent7" checked>
|
||||
|
|
|
|||
|
|
@ -7,60 +7,39 @@ for (let item of controls) {
|
|||
})
|
||||
}
|
||||
|
||||
// event listeners
|
||||
volume.addEventListener("input", () => updateVolume());
|
||||
progress.addEventListener("input", dragBar);
|
||||
progress.addEventListener("mouseup", dragBarEnd);
|
||||
progress.addEventListener("touchend", dragBarEnd);
|
||||
progress.addEventListener("click", dragBarEnd);
|
||||
progress.addEventListener("mousedown", dragBarStart);
|
||||
ptoggle.addEventListener("click", btnpp);
|
||||
ptoggle.addEventListener("dblclick", btnfull);
|
||||
player.addEventListener("fullscreenchange", updateFullscreen)
|
||||
|
||||
// video element shit
|
||||
video.addEventListener("playing", resetBuffer);
|
||||
video.addEventListener("canplay", resetBuffer);
|
||||
video.addEventListener("loadeddata", initThumbnail);
|
||||
video.addEventListener("loadedmetadata", updateDisplay);
|
||||
video.onloadedmetadata = () => {
|
||||
updateDisplay();
|
||||
(video.audioTracks && video.audioTracks.length > 1) ? baudio.removeAttribute("disabled") : baudio.setAttribute("disablePictureInPicture", "")
|
||||
}
|
||||
video.onended = () => {
|
||||
updateBar(video.currentTime / video.duration * 100)
|
||||
if (settings.player6 && !parseInt(playerData.nowPlaying[1]) >= playerData.nowPlaying[0].episodes) btnnext()
|
||||
if (settings.player6 && parseInt(playerData.nowPlaying[1]) <= playerData.nowPlaying[0].episodes) btnnext()
|
||||
}
|
||||
video.addEventListener("waiting", isBuffering);
|
||||
video.addEventListener("timeupdate", updateDisplay);
|
||||
if ('setPositionState' in navigator.mediaSession)
|
||||
video.addEventListener("timeupdate", updatePositionState);
|
||||
video.addEventListener("timeupdate", checkCompletion);
|
||||
if (!settings.player7 || !'pictureInPictureEnabled' in document) {
|
||||
video.ontimeupdate = () => {
|
||||
updateDisplay();
|
||||
checkCompletion();
|
||||
if ('setPositionState' in navigator.mediaSession) updatePositionState();
|
||||
}
|
||||
|
||||
if (!'pictureInPictureEnabled' in document) {
|
||||
video.setAttribute("disablePictureInPicture", "")
|
||||
bpip.setAttribute("disabled", "")
|
||||
} else {
|
||||
bpip.removeAttribute("disabled")
|
||||
video.addEventListener("enterpictureinpicture", () => {
|
||||
if (playerData.octopusInstance)
|
||||
btnpip()
|
||||
})
|
||||
video.addEventListener("enterpictureinpicture", () => { if (playerData.octopusInstance) btnpip() })
|
||||
}
|
||||
|
||||
let playerData = {
|
||||
}
|
||||
let playerData = {}
|
||||
|
||||
function cleanupVideo() { // cleans up objects, attemps to clear as much video caching as possible
|
||||
if (playerData.octopusInstance) {
|
||||
playerData.octopusInstance.dispose()
|
||||
}
|
||||
if (playerData.fonts) {
|
||||
playerData.fonts.forEach(file => {
|
||||
URL.revokeObjectURL(file)
|
||||
})
|
||||
}
|
||||
if (dl.href) {
|
||||
URL.revokeObjectURL(dl.href)
|
||||
}
|
||||
if (playerData.octopusInstance) playerData.octopusInstance.dispose()
|
||||
if (playerData.fonts) playerData.fonts.forEach(file => URL.revokeObjectURL(file))
|
||||
if (dl.href) URL.revokeObjectURL(dl.href)
|
||||
dl.setAttribute("disabled", "")
|
||||
dl.onclick = undefined
|
||||
video.poster = ""
|
||||
|
|
@ -69,9 +48,7 @@ function cleanupVideo() { // cleans up objects, attemps to clear as much video c
|
|||
video.src = "";
|
||||
video.load()
|
||||
if (typeof client !== 'undefined' && client.torrents[0] && client.torrents[0].files.length > 1) {
|
||||
client.torrents[0].files.forEach(file => {
|
||||
file.deselect()
|
||||
});
|
||||
client.torrents[0].files.forEach(file => file.deselect());
|
||||
client.torrents[0].deselect(0, client.torrents[0].pieces.length - 1, false);
|
||||
// console.log(videoFiles.filter(file => `${scope}webtorrent/${client.torrents[0].infoHash}/${encodeURI(file.path)}` == video.src))
|
||||
// look for file and delete its store
|
||||
|
|
@ -85,11 +62,10 @@ function cleanupVideo() { // cleans up objects, attemps to clear as much video c
|
|||
bcap.setAttribute("disabled", "")
|
||||
bnext.removeAttribute("disabled")
|
||||
navNowPlaying.classList.add("d-none")
|
||||
if ('mediaSession' in navigator)
|
||||
navigator.mediaSession.metadata = null
|
||||
if ('mediaSession' in navigator) navigator.mediaSession.metadata = null
|
||||
}
|
||||
|
||||
async function buildVideo(file, nowPlaying) { //creates a new video element and adds listeners... this needs to go
|
||||
async function buildVideo(file, nowPlaying) { // sets video source and creates a bunch of other media stuff
|
||||
video.src = `${scope}webtorrent/${client.torrents[0].infoHash}/${encodeURI(file.path)}`
|
||||
video.load();
|
||||
playVideo();
|
||||
|
|
@ -111,14 +87,10 @@ async function buildVideo(file, nowPlaying) { //creates a new video element and
|
|||
fillType: ""
|
||||
});
|
||||
if (settings.player8) {
|
||||
if (!settings.torrent5) {
|
||||
finishThumbnails(file);
|
||||
}
|
||||
if (!settings.torrent5) finishThumbnails(file);
|
||||
postDownload(file)
|
||||
}
|
||||
if (!settings.torrent5) {
|
||||
downloadFile(file)
|
||||
}
|
||||
if (!settings.torrent5) downloadFile(file)
|
||||
}
|
||||
}
|
||||
setTimeout(onProgress, 100)
|
||||
|
|
@ -170,19 +142,22 @@ async function buildVideo(file, nowPlaying) { //creates a new video element and
|
|||
let onProgress
|
||||
|
||||
// visibility loss pause
|
||||
document.addEventListener("visibilitychange", () => {
|
||||
if (settings.player10 && !video.ended)
|
||||
document.visibilityState === "hidden" ? video.pause() : playVideo();
|
||||
if (settings.player10) document.addEventListener("visibilitychange", () => {
|
||||
if (!video.ended) document.visibilityState === "hidden" ? video.pause() : playVideo();
|
||||
})
|
||||
|
||||
// progress seek bar and display
|
||||
|
||||
progress.addEventListener("input", dragBar);
|
||||
progress.addEventListener("mouseup", dragBarEnd);
|
||||
progress.addEventListener("touchend", dragBarEnd);
|
||||
progress.addEventListener("click", dragBarEnd);
|
||||
progress.addEventListener("mousedown", dragBarStart);
|
||||
|
||||
function updateDisplay() {
|
||||
if (!player.classList.contains('immersed') && document.location.hash == "#player") {
|
||||
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);
|
||||
progress.style.setProperty("--buffer", video.buffered.length == 0 ? 0 : video.buffered.end(video.buffered.length - 1) / video.duration * 100 + "%");
|
||||
updateBar((video.currentTime / video.duration * 100) || progress.value / 10);
|
||||
}
|
||||
createThumbnail(video);
|
||||
}
|
||||
|
|
@ -190,8 +165,7 @@ function updateDisplay() {
|
|||
function dragBar() {
|
||||
updateBar(progress.value / 10)
|
||||
video.pause()
|
||||
let bg = playerData.thumbnails[Math.floor(currentTime / 5)]
|
||||
thumb.src = bg || " "
|
||||
thumb.src = playerData.thumbnails[Math.floor(currentTime / 5)] || " "
|
||||
}
|
||||
|
||||
function dragBarEnd() {
|
||||
|
|
@ -352,6 +326,7 @@ function toTS(sec) {
|
|||
}
|
||||
|
||||
// play/pause button
|
||||
ptoggle.addEventListener("click", btnpp);
|
||||
async function playVideo() {
|
||||
try {
|
||||
await video.play();
|
||||
|
|
@ -395,7 +370,7 @@ function btnnext() {
|
|||
}, 200)
|
||||
}
|
||||
// volume shit
|
||||
|
||||
volume.addEventListener("input", () => updateVolume());
|
||||
let oldlevel;
|
||||
|
||||
function btnmute() {
|
||||
|
|
@ -472,10 +447,7 @@ async function btnpip() {
|
|||
}
|
||||
}
|
||||
}
|
||||
//miniplayer
|
||||
if (!settings.player4) {
|
||||
player.style.setProperty("--miniplayer-display", "none");
|
||||
}
|
||||
|
||||
// theathe mode
|
||||
|
||||
function btntheatre() {
|
||||
|
|
@ -483,7 +455,8 @@ function btntheatre() {
|
|||
}
|
||||
|
||||
// fullscreen
|
||||
|
||||
player.addEventListener("fullscreenchange", updateFullscreen)
|
||||
ptoggle.addEventListener("dblclick", btnfull);
|
||||
function btnfull() {
|
||||
document.fullscreenElement ? document.exitFullscreen() : player.requestFullscreen();
|
||||
}
|
||||
|
|
@ -585,7 +558,7 @@ function selectAudio(id) {
|
|||
}
|
||||
// keybinds
|
||||
|
||||
document.onkeydown = (a) => {
|
||||
document.onkeydown = a => {
|
||||
if (a.key == "F5") {
|
||||
a.preventDefault();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
const settingsElements = [
|
||||
volume, player2, player3, player4, player5, player6, player7, player8, player10, subtitle1, subtitle2, subtitle3, torrent1, torrent2, torrent3, torrent4, torrent5, torrent6, torrent7, torrent8, torrent9, other1, other2
|
||||
volume, player2, player3, player5, player6, player8, player10, subtitle1, subtitle3, torrent1, torrent2, torrent3, torrent4, torrent5, torrent6, torrent7, torrent9, other1, other2
|
||||
]
|
||||
setRes.addEventListener("click", restoreDefaults)
|
||||
settingsTab.addEventListener("click", applySettingsTimeout)
|
||||
|
|
@ -17,11 +17,7 @@ function applySettingsTimeout() {
|
|||
}
|
||||
function saveSettings() {
|
||||
settingsElements.forEach(element => {
|
||||
if (element.type == "checkbox") {
|
||||
settings[element.id] = element.checked
|
||||
} else {
|
||||
settings[element.id] = element.value
|
||||
}
|
||||
element.type == "checkbox" ? settings[element.id] = element.checked : settings[element.id] = element.value
|
||||
})
|
||||
localStorage.setItem("settings", JSON.stringify(settings))
|
||||
}
|
||||
|
|
@ -29,11 +25,7 @@ function saveSettings() {
|
|||
function renderSettings() {
|
||||
Object.entries(settings).forEach(setting => {
|
||||
let settingElement = settingsElements.filter(e => e.id == setting[0])[0]
|
||||
if (settingElement.type == "checkbox") {
|
||||
settingElement.checked = setting[1]
|
||||
} else {
|
||||
settingElement.value = setting[1]
|
||||
}
|
||||
settingElement.type == "checkbox" ? settingElement.checked = setting[1] : settingElement.value = setting[1]
|
||||
})
|
||||
}
|
||||
function registerProtocol() {
|
||||
|
|
@ -64,14 +56,4 @@ if (searchParams.get("access_token")) {
|
|||
window.location = "/app/#settingsTab"
|
||||
}
|
||||
|
||||
torrent5.onclick = e => {
|
||||
if (!e.srcElement.checked)
|
||||
torrent8.checked = false
|
||||
|
||||
}
|
||||
torrent8.onclick = e => {
|
||||
if (e.srcElement.checked)
|
||||
torrent5.checked = true
|
||||
}
|
||||
|
||||
document.documentElement.style.setProperty("font-size", settings.other1 + "%")
|
||||
|
|
@ -60,7 +60,7 @@ function renderSubs(trackNumber) {
|
|||
let options = {
|
||||
video: video,
|
||||
subContent: trackNumber ? playerData.headers[trackNumber].header.slice(0, -1) + Array.from(playerData.subtitles[trackNumber]).join("\n") : playerData.headers[3].header.slice(0, -1),
|
||||
lossyRender: settings.subtitle2,
|
||||
lossyRender: true,
|
||||
fonts: playerData.fonts.length == 0 ? ["https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4.woff2"] : playerData.fonts,
|
||||
workerUrl: 'js/subtitles-octopus-worker.js'
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,16 +1,12 @@
|
|||
let client = new WebTorrent({ maxConns: settings.torrent6 }),
|
||||
mystore = class extends IdbkvChunkStore {
|
||||
IDBStore = class extends IdbkvChunkStore {
|
||||
constructor(len, opts) {
|
||||
super(len, { ...opts, batchInterval: 1000 });
|
||||
}
|
||||
}
|
||||
window.onbeforeunload = () => { //cleanup shit before unloading to free RAM/drive
|
||||
if (!settings.torrent8) {
|
||||
if (client.torrents[0]) client.torrents[0].store.destroy()
|
||||
}
|
||||
if (client.torrents[0]) client.torrents[0].destroy()
|
||||
client.destroy()
|
||||
cleanupVideo()
|
||||
cleanupTorrents()
|
||||
if (playerData.fonts) {
|
||||
playerData.fonts.forEach(file => {
|
||||
URL.revokeObjectURL(file)
|
||||
|
|
@ -56,7 +52,7 @@ const announceList = [
|
|||
}
|
||||
})
|
||||
|
||||
//for debugging
|
||||
// for debugging
|
||||
function t(a) {
|
||||
switch (a) {
|
||||
case 1:
|
||||
|
|
@ -70,26 +66,44 @@ function t(a) {
|
|||
break;
|
||||
}
|
||||
}
|
||||
// offline storage initial load
|
||||
let offlineTorrents
|
||||
async function loadOfflineStorage() {
|
||||
offlineTorrents = new Set(await indexedDB.databases());
|
||||
[...offlineTorrents].forEach(object => client.add(object.name)) // adds all offline store torrents to the client
|
||||
}
|
||||
loadOfflineStorage()
|
||||
|
||||
// add torrent for offline download
|
||||
function offlineDownload(torrent) {
|
||||
client.add(torrent, { store: IDBStore }, function (torrent) {
|
||||
offlineTorrents.add(torrent.infoHash)
|
||||
})
|
||||
}
|
||||
|
||||
// cleanup torrent and store
|
||||
function cleanupTorrents() {
|
||||
client.torrents.filter(torrent => {
|
||||
return !(offlineTorrents.has(torrent.infoHash)) // creates an array of all non-offline store torrents and removes them
|
||||
}).forEach(torrent => {
|
||||
torrent.destroy({ destroyStore: true })
|
||||
})
|
||||
}
|
||||
|
||||
// manually add trackers
|
||||
WEBTORRENT_ANNOUNCE = announceList.map(arr => { return arr[0] }).filter(url => { return url.indexOf('wss://') === 0 })
|
||||
|
||||
|
||||
let videoFiles
|
||||
async function addTorrent(magnet, media, episode) {
|
||||
if (client.torrents.length) { // remove old torrents
|
||||
if (settings.torrent8 && settings.torrent5) {
|
||||
client.remove(client.torrents[0].infoHash)
|
||||
} else {
|
||||
if (client.torrents[0].store) client.torrents[0].store.destroy()
|
||||
client.torrents[0].destroy()
|
||||
}
|
||||
}
|
||||
halfmoon.hideModal("tsearch")
|
||||
document.location.hash = "#player"
|
||||
let store
|
||||
cleanupVideo()
|
||||
cleanupTorrents()
|
||||
await sw
|
||||
settings.torrent5 ? store = { store: mystore } : store = {}
|
||||
client.add(magnet, store, function (torrent) {
|
||||
client.add(magnet, settings.torrent5 ? { store: IDBStore } : {}, function (torrent) {
|
||||
torrent.on('noPeers', () => {
|
||||
if (client.torrents[0].progress != 1) {
|
||||
if (torrent.progress != 1) {
|
||||
halfmoon.initStickyAlert({
|
||||
content: `Couldn't find peers for <span class="text-break">${torrent.infoHash}</span>! Try a torrent with more seeders.`,
|
||||
title: "Search Failed",
|
||||
|
|
@ -105,7 +119,7 @@ async function addTorrent(magnet, media, episode) {
|
|||
torrent.files.forEach(file => file.deselect());
|
||||
torrent.deselect(0, torrent.pieces.length - 1, false);
|
||||
bpl.removeAttribute("disabled")
|
||||
buildVideo(videoFiles.filter(file => parseInt(nameParseRegex.simple.exec(file.name)[4]) == parseInt(episode))[0], [media, episode])
|
||||
buildVideo(videoFiles.filter(file => parseInt(nameParseRegex.simple.exec(file.name)[4]) == parseInt(episode || "1"))[0], [media, episode])
|
||||
} else {
|
||||
bpl.setAttribute("disabled", "")//playlist button hiding
|
||||
buildVideo(videoFiles[0], [media, episode])
|
||||
|
|
@ -117,8 +131,7 @@ async function addTorrent(magnet, media, episode) {
|
|||
alertType: "alert-danger",
|
||||
fillType: ""
|
||||
});
|
||||
if (client.torrents[0].store) client.torrents[0].store.destroy()
|
||||
client.torrents[0].destroy()
|
||||
cleanupTorrents()
|
||||
}
|
||||
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in a new issue