miru/app/index.html
2020-12-19 04:09:01 +01:00

502 lines
No EOL
30 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" class="auto-scaling-disabled">
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Miru">
<meta name="description" content="Anime torrent streaming, ad free in a simple solution.">
<meta name="theme-color" content="#11141700" />
<link rel="icon" href="logo.png">
<link rel="apple-touch-icon" href="logo.png">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<title>Miru</title>
<link href="https://cdn.jsdelivr.net/npm/halfmoon@1.1.1/css/halfmoon-variables.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/misc.css" rel="stylesheet">
<link href="css/player.css" rel="stylesheet">
<style id="substyles">
</style>
</head>
<body class="dark-mode with-custom-webkit-scrollbars with-custom-css-scrollbars">
<div class="modal" id="tsearch" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content w-auto">
<button class="close pointer" data-dismiss="modal" type="button" aria-label="Close">
<span>&times;</span>
</button>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Size</th>
<th scope="col">Seed</th>
<th scope="col">Leech</th>
<th scope="col">Downloads</th>
<th scope="col">Play</th>
</tr>
</thead>
<tbody class="results">
</tbody>
</table>
</div>
</div>
</div>
<div class="modal modal-full bg-dark-light" id="view" tabindex="-1" role="dialog">
<div class="modal-dialog bg-transparent" role="document">
<div class="view modal-content bg-transparent">
<button class="close pointer" data-dismiss="modal" type="button" aria-label="Close">
<span>×</span>
</button>
<div class="row">
<div class="col-md-2">
<img class="contain-img rounded w-full mb-15" src="" id="viewImg">
<div class="d-flex flex-column flex-wrap">
<button class="btn btn-primary d-flex align-items-end mb-5" type="button" id="viewPlay">
<span class="material-icons mr-10 font-size-20">
play_arrow
</span>
Play
</button>
<button class="btn d-flex align-items-end mb-5" type="button" id="viewTrailer">
<span class="material-icons mr-10 font-size-20">
theaters
</span>
Trailer
</button>
</button>
<button class="btn d-flex align-items-end mb-20" type="button" id="viewEpisodes">
<span class="material-icons mr-10 font-size-20">
video_library
</span>
Episodes
</button>
</div>
</div>
<div class="col-md-7">
<div class="px-20 ml-20 d-flex flex-column font-size-12 text-muted">
<span class="title font-weight-bold font-size-24 text-white pb-5" id="viewTitle"></span>
<span id="viewSeason" class="text-capitalize"></span>
<span id="viewMediaInfo" class="text-capitalize"></span>
<p class="text-muted desc overflow-y-auto my-0 font-size-12 pt-20" id="viewDesc">
</p>
</div>
</div>
<div class="col-md-3">
<div class="card m-0 py-5 font-size-12" id="viewDetails">
</div>
<div class="input-group mt-5" data-toggle="tooltip" data-placement="top"
data-title="Manually Add A Synonym To The Media, Case Sensitive">
<input type="text" class="form-control" placeholder="Add Synonym" id="viewSynonymText">
<div class="input-group-append">
<button class="btn btn-primary btn-square" type="button"
id="viewSynonym">&plus;</button>
</div>
</div>
</div>
</div>
<div id="viewRelations" class="pt-20">
<span class="font-weight-bold font-size-22 text-white">Relations</span>
<div class="gallery gallery-sm" id="viewRelationsGallery">
</div>
</div>
<div class="hidden pt-20" id="viewEpisodesWrapper">
<span class="font-weight-bold font-size-22 text-white">Episodes</span>
<div id="episodes" class="pt-10 d-flex overflow-x-auto justify-content-start">
</div>
</div>
</div>
</div>
</div>
<div class="modal" id="trailer" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content w-three-quarter h-full bg-transparent d-flex justify-content-center flex-column">
<button class="close pointer" data-dismiss="modal" type="button" aria-label="Close">
<span>&times;</span>
</button>
<div class="trailer w-full position-relative">
<iframe id="trailerVideo" src="" frameborder="0" allowfullscreen="allowfullscreen"
class="w-full h-full position-absolute rounded top-0 left-0"></iframe>
</div>
</div>
</div>
</div>
<div id="pageWrapper" class="page-wrapper with-navbar">
<div class="sticky-alerts"></div>
<nav class="navbar bg-dark">
<a href="#player" class="navbar-brand mt-5 ml-10">
<img src="logo_cut.png" alt="logo">
</a>
<a href="#browse" class="navbar-brand pointer ml-auto" data-toggle="tooltip" data-placement="bottom"
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>
</a>
<a href="#browse" class="navbar-brand pointer" data-toggle="tooltip" data-placement="bottom"
data-title="Currently Trending Anime" id="navTrending">
<span class="material-icons font-size-20">trending_up</span>
</a>
</a>
<a class="navbar-brand pointer d-none" data-toggle="tooltip" data-placement="bottom"
data-title="Currently Playing Anime" id="navNowPlaying">
<span class="material-icons font-size-20">queue_music</span>
</a>
<form class="form-inline d-flex" action="javascript:searchBox()">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text d-flex material-icons bg-dark-light pr-0">search</span>
</div>
<input id="search" type="text" class="form-control bg-dark-light border-left-0" placeholder="Search"
autocomplete="off">
</div>
</form>
<a id="oauth" class="navbar-brand pointer font-size-20 mr-5" data-toggle="tooltip" data-placement="bottom"
data-title="Login With AniList"
href="https://anilist.co/api/v2/oauth/authorize?client_id=4254&response_type=token">
<span class="material-icons font-size-20">login</span>
</a>
<a href="#settingsTab" class="navbar-brand pointer font-size-20 mr-5">
<span class="material-icons font-size-20">settings</span>
</a>
</nav>
<div class="overflow-y-hidden content-wrapper">
<section id="player" class="overflow-hidden">
<video id="video" src="">
</video>
<a href="#player" class="w-full h-full"></a>
<div class="player d-none flex-column justify-content-between w-full h-full">
<div class="stats row">
<div id="nowPlayingDisplay" class="col-4 ts text-truncate">
</div>
<div class="d-flex col-4 justify-content-center">
<span class="material-icons">
people
</span>
<span class="ts" id="peers">0</span>
<span class="material-icons">
arrow_downward
</span>
<span class="ts" id="downSpeed">0 B/s</span>
<span class="material-icons">
arrow_upward
</span>
<span class="ts" id="upSpeed">0 B/s</span>
</div>
<div class="col-4 d-flex justify-content-end">
<span id="dl" class="material-icons pointer"
title="Wait For File To Fully Download Before Saving To Drive" disabled>
get_app
</span>
</div>
</div>
<div id="ptoggle" class="h-full d-flex justify-content-center align-items-center">
<div id="buffering" class="hidden">
</div>
</div>
<div class="controls d-flex">
<span class="material-icons ctrl" title="Play/Pause [Space]" id="bpp" data-name="btnpp">
play_arrow
</span>
<span class="material-icons ctrl" title="Next [N]" id="bnext" data-name="btnnext">
skip_next
</span>
<div class="playlist dropdown dropup">
<span class="material-icons ctrl" title="Playlist [P]" id="bpl" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" data-name="btnpl" disabled>
playlist_play
</span>
<div class="dropdown-menu" aria-labelledby="bpl" id="playlistMenu">
</div>
</div>
<div class="volume">
<span class="material-icons ctrl" title="Mute [M]" id="bmute" data-name="btnmute">
volume_up
</span>
<input type="range" value="100" id="volume">
</div>
<div class="audio-tracks dropdown dropup">
<span class="material-icons ctrl" title="Audio Tracks [T]" id="baudio"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-name="btnaudio"
disabled>
queue_music
</span>
<div class="dropdown-menu" aria-labelledby="baudio" id="audioTracksMenu">
</div>
</div>
<span class="ts" id="elapsed">00:00</span>
<div class="prog">
<input type="range" min="0" max="1000" value="0" id="progress">
<img id="thumb">
</div>
<span class="ts" id="remaining">00:00</span>
<div class="subtitles dropdown dropup with-arrow">
<span class="material-icons ctrl" title="Subtitles [C]" id="bcap" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" data-name="btncap" disabled>
subtitles
</span>
<div class="dropdown-menu dropdown-menu-center" aria-labelledby="bcap" id="subMenu">
</div>
</div>
<span class="material-icons ctrl" title="Popout Window [P]" id="bpip" data-name="btnpip">
picture_in_picture
</span>
<span class="material-icons ctrl" title="Theatre Mode [T]" id="btheatre" data-name="btntheatre">
crop_16_9
</span>
<span class="material-icons ctrl" title="Fullscreen [F]" id="bfull" data-name="btnfull">
fullscreen
</span>
</div>
</div>
</section>
<section id="browse" class="flex-column border-top">
<div class="gallery browse h-full overflow-y-scroll">
</div>
</section>
<section id="releases" class="flex-column border-top">
<div class="gallery releases 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">
<div class="d-flex flex-row">
<div class="p-5">
<h1 class="content-title font-size-22">
Player Settings
</h1>
<div class="input-group w-200 mb-10" data-toggle="tooltip" data-placement="top"
data-title="Volume Set When Launching The App">
<div class="input-group-prepend">
<span class="input-group-text">Volume</span>
</div>
<input id="player1" type="number" value="100" min="0" max="100"
class="form-control text-right">
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
</div>
<div class="input-group w-200 mb-10" data-toggle="tooltip" data-placement="top"
data-title="Time For Player Controls To Hide">
<div class="input-group-prepend">
<span class="input-group-text">Immerse After</span>
</div>
<input id="player2" type="number" value="3" min="1" max="30"
class="form-control text-right">
<div class="input-group-append">
<span class="input-group-text">sec</span>
</div>
</div>
<div class="input-group w-200 mb-10" data-toggle="tooltip" data-placement="top"
data-title="How Much To Seek Video">
<div class="input-group-prepend">
<span class="input-group-text">Seek</span>
</div>
<input id="player3" type="number" value="2" min="1" max="30"
class="form-control text-right">
<div class="input-group-append">
<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>
<label for="player5">Seek Bar Previews</label>
</div>
<div class="custom-switch mb-10" data-toggle="tooltip" data-placement="top"
data-title="Automatically Starts Playing Next Episode When A Video Ends">
<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>
<label for="player8">Post-Download Processing</label>
</div>
<div class="custom-switch mb-10" data-toggle="tooltip" data-placement="top"
data-title="Renders The Video As A Blob When Available, Greatly Improves Playback Performance, DOUBLES RAM Usage.">
<input type="checkbox" id="player9">
<label for="player9">Render As Blob</label>
</div>
<div class="custom-switch mb-20" data-toggle="tooltip" data-placement="top"
data-title="Pauses/Resumes Video Playback When Tabbing In/Out Of The App.">
<input type="checkbox" id="player10" checked>
<label for="player10">Pause When Tabbing Out</label>
</div>
</div>
<div class="p-5">
<h1 class="content-title font-size-22">
Subtitle Settings
</h1>
<div class="input-group w-200 mb-10" data-toggle="tooltip" data-placement="top"
data-title="Fallback Font For When One Isn't Detected">
<div class="input-group-prepend">
<span class="input-group-text">Font Fallback</span>
</div>
<select class="form-control" id="subtitle1">
<option value="'Open Sans', sans-serif">Open Sans</option>
<option value="Roboto,Arial,Helvetica,sans-serif" selected>Roboto</option>
</select>
</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>
<label for="subtitle3">Burn In Subtitles</label>
</div>
</div>
<div class="p-5">
<h1 class="content-title font-size-22">
Torrent Settings
</h1>
<div class="input-group mb-10 w-200" data-toggle="tooltip" data-placement="top"
data-title="What Quality To Find Torrents In">
<div class="input-group-prepend">
<span class="input-group-text">Quality</span>
</div>
<select class="form-control" id="torrent1">
<option value="1080" selected>1080p</option>
<option value="720">720p</option>
<option value="480">480p</option>
</select>
</div>
<div class="input-group mb-10 w-200" data-toggle="tooltip" data-placement="top"
data-title="What RSS Feed To Fetch Torrents From, Allows For Custom CORS Enabled Feeds, URL Is Automatically Followed By Resolution">
<div class="input-group-prepend">
<span class="input-group-text">Feed</span>
</div>
<input id="torrent4" type="text" list="torrent4list" class="form-control"
autocomplete="off" value="SubsPlease">
<datalist id="torrent4list">
<option value="SubsPlease">https://subsplease.org/rss/?r=</option>
<option value="Erai-raws">
https://miru.kirdow.com/request/?url=https://www.erai-raws.info/rss-</option>
</datalist>
</div>
<div class="input-group w-200 mb-10" data-toggle="tooltip" data-placement="top"
data-title="How Many Max Peers To Connect To, Higher Numbers Mean Higher Speeds And More CPU Usage">
<div class="input-group-prepend">
<span class="input-group-text">Max Connections</span>
</div>
<input id="torrent6" type="number" value="55" min="10" step="5" max="255"
class="form-control text-right">
</div>
<div class="custom-switch mb-10" data-toggle="tooltip" data-placement="top" data-title="Skips The Torrent Selection Popup, Might Lead To Unwanted Videos Being
Played">
<input type="checkbox" id="torrent2">
<label for="torrent2">Auto-Play Torrents</label>
</div>
<div class="custom-switch mb-10" data-toggle="tooltip" data-placement="top"
data-title="Finds Only Trusted Torrents, Gives Less Results But Higher Quality And With More Seeders">
<input type="checkbox" id="torrent3" checked>
<label for="torrent3">Trusted Only</label>
</div>
<div class="custom-switch mb-10" data-toggle="tooltip" data-placement="top" data-title="Greatly Reduces RAM Usage By Caching Torrents On Drive, Increases CPU And Drive Usage,
Bad For SSDs, Disables Downloading">
<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>
<label for="torrent7">Resolve Names</label>
</div>
<div class="custom-switch mb-20" data-toggle="tooltip" data-placement="top"
data-title="Tries To Find Batches For Finished Shows Instead Of Downloading 1 Episode At A Time">
<input type="checkbox" id="torrent9" checked>
<label for="torrent9">Batch Lookup</label>
</div>
</div>
<div class="p-5">
<h1 class="content-title font-size-22">
Other Settings
</h1>
<div class="input-group w-200 mb-10" data-toggle="tooltip" data-placement="top"
data-title="Change The UI Scale Of The App">
<div class="input-group-prepend">
<span class="input-group-text">UI Scale</span>
</div>
<input id="other1" type="number" value="75" min="1" max="1000"
class="form-control text-right">
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
</div>
<div class="custom-switch mb-20" data-toggle="tooltip" data-placement="top"
data-title="Automatically Marks Episodes As Complete On AniList When You Finish Watching Them, Requires AniList Login">
<input type="checkbox" id="other2">
<label for="other2">Autocomplete Episodes</label>
</div>
</div>
</div>
<div>
<button class="btn btn-danger" type="button" id="setRes" data-toggle="tooltip"
data-placement="top"
data-title="Restores All Settings Back To Their Recommended Defaults">Restore
Defaults
</button>
<button class="btn btn-danger" type="button" id="clearRelCache" data-toggle="tooltip"
data-placement="top" data-title="Clears Anime Names Data Cache">Clear Name Cache
</button>
<button class="btn btn-success" type="button" id="regProtButton" data-toggle="tooltip"
data-placement="top"
data-title="Sets The App As The Default Program To Launch When Opening Magnet Links On Other Sites, Automatically Downloads And Plays The Torrent">Set
As Default For Magnet Links
</button>
</div>
<p class="text-muted mb-15">
Restart may be required for some settings to take effect.
</p>
</div>
</section>
</div>
</div>
<script src="https://cdn.jsdelivr.net/gh/halfmoonui/halfmoon@1.1.1/js/halfmoon.min.js"></script>
<script src="js/settingsHandler.js"></script>
<script src="js/util.js"></script>
<script src="js/animeHandler.js"></script>
<script src="js/playerHandler.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mathiasvr/webtorrent@dev/webtorrent.min.js"></script>
<script src="js/rangeParser.js"></script>
<script src="js/idbkv-chunk-store.js"></script>
<script src="js/torrentHandler.js"></script>
<script src="https://cdn.jsdelivr.net/npm/matroska-subtitles@latest/dist/matroska-subtitles.min.js"></script>
<script src="js/subtitles-octopus.js"></script>
<script src="js/subtitleOctopus.js"></script>
</body>
</html>