miru/app/index.html
2020-10-31 16:28:26 +01:00

446 lines
No EOL
25 KiB
HTML

<!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="#111417" />
<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 ie-scroll-fix" id="view" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="view modal-content m-0 p-0">
<button class="close bg-dark-light pointer" data-dismiss="modal" type="button" aria-label="Close">
<span>&times;</span>
</button>
<div class="banner">
<img class="cover-img w-full h-full">
</div>
<div class="bg-dark">
<div class="container row">
<div
class="col-md-3 mt-10 mt-nc pb-20 d-flex flex-column justify-content-between align-items-center cover-wrapper">
<img class="contain-img rounded w-full">
<div class="input-group pt-10">
<div class="input-group-prepend flex-grow-1">
<button class="btn bg-primary pr-5 pl-10 w-full" type="button" id="play">Play
Episode</button>
</div>
<input type="number" id="ep"
class="form-control flex-reset w-60 bg-primary px-5 text-right" placeholder="#"
value="1" min="1">
</div>
</div>
<div class="col-md-9 p-20 d-flex flex-column">
<h4 class="title font-weight-bold">
</h4>
<p class="text-muted desc overflow-y-scroll my-0">
</p>
</div>
</div>
</div>
<div class="bg-very-dark">
<div class="container">
<div class="row py-20">
<div class="col-md-3">
<div class="card m-0 py-5 details">
</div>
</div>
<div class="col-9 px-20">
<div class="pb-20">
<span class="font-weight-bold font-size-22">Episodes</span>
<div id="episodes" class="pt-10 d-flex overflow-x-scroll justify-content-between">
</div>
</div>
<div class="d-flex flex-column">
<span class="font-weight-bold font-size-22 pb-10">Trailer</span>
<div class="trailer w-full position-relative">
<iframe id="trailer" src="https://www.youtube.com/embed/vtBy-KHATR0"
frameborder="0" allowfullscreen="allowfullscreen"
class="w-full h-full position-absolute rounded top-0 left-0"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page-wrapper with-sidebar" data-sidebar-type="full-height">
<div class="sticky-alerts"></div>
<div class="sidebar-overlay" onclick="halfmoon.toggleSidebar()"></div>
<div class="sidebar d-flex border-0">
<div class="sidebar-menu d-flex flex-column justify-content-end flex-grow-1">
<a href="#player" class="sidebar-brand">
<img src="logo.png" alt="logo">
Miru
</a>
<div class="sidebar-divider"></div>
<a href="#releases" class="sidebar-link sidebar-link-with-icon">
<span class="sidebar-icon bg-transparent justify-content-start mr-0">
<i class="material-icons" aria-hidden="true">schedule</i>
</span>
Latest Releases
</a>
<a href="#browse" class="sidebar-link sidebar-link-with-icon">
<span class="sidebar-icon bg-transparent justify-content-start mr-0">
<i class="material-icons" aria-hidden="true">list</i>
</span>
Browse
</a>
<a href="#settingsTab" class="sidebar-link sidebar-link-with-icon mt-auto">
<span class="sidebar-icon bg-transparent justify-content-start mr-0">
<i class="material-icons" aria-hidden="true">settings</i>
</span>
Settings
</a>
</div>
</div>
<div class="overflow-y-hidden content-wrapper">
<section id="player" class="overflow-hidden">
<video id="video">
</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 ts">
</div>
<div class="d-flex col 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 d-flex justify-content-end">
<a id="dl" class="material-icons"
title="Wait For File To Fully Download Before Saving To Drive">
<span class="material-icons">
get_app
</span>
</a>
</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="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>
<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"
id="subtitle-popover" aria-haspopup="true" aria-expanded="false" data-name="btncap">
subtitles
</span>
<div class="dropdown-menu dropdown-menu-center" aria-labelledby="subtitle-popover"
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">
<div class="bg-dark">
<div class="text-center content my-15">
<form class="input-group" action="javascript:searchBox()">
<div class="input-group-prepend">
<button class="btn btn-primary material-icons px-10" type="submit">search</button>
</div>
<input type="text" class="form-control search"
placeholder="Anime Name, Image Link or Direct Magnet Link, Torrent File, Hash"
id="search">
</form>
</div>
</div>
<div class="gallery browse h-full overflow-y-scroll border-left border-top">
</div>
</section>
<section id="releases" class="flex-column">
<div class="bg-dark">
<div class="content my-15 d-flex">
<button class="btn btn-primary px-10 d-flex align-items-center" id="refRel">
<div class="material-icons">refresh</div>&nbsp;Refresh
</button>
<button class="btn btn-danger px-10 d-flex align-items-center ml-10" id="clearRelCache">
<div class="material-icons">delete_forever</div>&nbsp;Clear Cache
</button>
<div class="input-group w-150 ml-10">
<div class="input-group-prepend">
<span class="input-group-text">Quality</span>
</div>
<input type="text" class="form-control" disabled id="relQual">
</div>
<div class="input-group w-150 ml-10">
<div class="input-group-prepend">
<span class="input-group-text">Feed</span>
</div>
<input type="text" class="form-control" disabled id="relFeed">
</div>
<div class="input-group w-200 ml-10">
<div class="input-group-prepend">
<span class="input-group-text">Updated</span>
</div>
<input type="time" class="form-control" id="relTime" disabled>
</div>
</div>
</div>
<div class="gallery releases h-full overflow-y-scroll border-left border-top">
</div>
</section>
<section id="settingsTab" class="overflow-y-scroll border-left">
<div class="content d-flex flex-column align-items-start">
<h1 class="content-title font-size-22">
Player Settings
</h1>
<div class="input-group w-200 mb-10" data-toggle="tooltip" data-placement="right"
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="right"
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="right"
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="right"
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="right"
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="right"
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="right"
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-20" data-toggle="tooltip" data-placement="right" data-title="Improves UX And Performance After A Download
Finishes, Initially CPU Intensive">
<input type="checkbox" id="player8" checked>
<label for="player8">Post-Download Processing</label>
</div>
<h1 class="content-title font-size-22">
Subtitle Settings
</h1>
<div class="input-group w-200 mb-10" data-toggle="tooltip" data-placement="right"
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="right"
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="right" 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">Video Canvas Merging</label>
</div>
<h1 class="content-title font-size-22">
Torrent Settings
</h1>
<div class="input-group mb-10 w-200" data-toggle="tooltip" data-placement="right"
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="right"
data-title="What Feed To Fetch Torrents From">
<div class="input-group-prepend">
<span class="input-group-text">Feed</span>
</div>
<select class="form-control" id="torrent4">
<option value="https://subsplease.org/rss/?r=" selected>SubsPlease</option>
<option value="https://miru.kirdow.com/request/?url=https://www.erai-raws.info/rss-">
Erai-raws</option>
</select>
</div>
<div class="custom-switch mb-10" data-toggle="tooltip" data-placement="right" 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="right"
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-20" data-toggle="tooltip" data-placement="right" data-title="Greatly Reduces RAM Usage By Caching Torrents On Drive, Increases CPU And Drive Usage,
Bad For SSDs, Experimental">
<input type="checkbox" id="torrent5">
<label for="torrent5">Drive Caching</label>
</div>
<h1 class="content-title font-size-22">
Other Settings
</h1>
<div class="input-group w-200 mb-10" data-toggle="tooltip" data-placement="right"
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="100" 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="right"
data-title="Automatically Marks Episodes As Complete On AniList When You Complete Watching Them, Requires AniList Login">
<input type="checkbox" id="other2">
<label for="other2">AniList Sync [Requires <a
href="https://anilist.co/api/v2/oauth/authorize?client_id=4254&response_type=token"
target="_top">OAuth2 Login</a>]</label>
</div>
<div><button class="btn btn-danger" type="button" id="setRes" data-toggle="tooltip" data-placement="right"
data-title="Restores All Settings Back To Their Recommended Defaults">Restore Defaults</button>
<button class="btn btn-success" type="button" id="regProtButton" data-toggle="tooltip" data-placement="right"
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">
Restart may be required for some settings to take effect.
</p>
</div>
</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/npm/webtorrent@latest/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@3.2.0/dist/matroska-subtitles.min.js"></script>
<script src="js/subtitles-octopus.js"></script>
<script src="js/subtitleOctopus.js"></script>
</body>
</html>