Creepso/miru
1
0
Fork 0
mirror of https://github.com/ThaUnknown/miru.git synced 2026-03-31 06:38:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui rework progress

Browse source
This commit is contained in:
ThaUnknown 2020-11-01 17:50:29 +01:00
parent c779643175
commit e99cd0a61d
4 changed files with 136 additions and 134 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
app/char.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 29 KiB

79
app/css/misc.css
View file

@ -3,40 +3,11 @@
border-color: var(--color) !important;
}
.cover-img {
object-fit: cover;
height: 400px;
}
.cover-img[src=""] {
display: none;
}
.contain-img {
object-fit: contain
}
.banner {
opacity: 0.85
}
.cover-wrapper:not(.mt-nc)+div {
justify-content: flex-end;
}
.mt-nc {
margin-top: -150px !important
}
.view {
min-height: 100%;
}
.desc {
max-height: 250px
}
.desc>p {
.desc p {
margin-bottom: 0;
margin-top: 0;
}
@ -50,7 +21,8 @@
margin: 0
}
.gallery .details span+span::before {
.gallery .details span+span::before,
#viewMediaInfo span+span::before{
content: " • "
}
@ -86,21 +58,6 @@ section:target {
height: 100%
}
.w-60 {
width: 6rem;
}
#ep::-webkit-inner-spin-button {
margin-right: 0 !important
}
::-webkit-inner-spin-button {
opacity: 1;
margin-left: .4rem;
margin-right: -.5rem;
filter: invert(.84);
}
.material-icons {
font-size: 18px;
align-self: center
@ -136,10 +93,6 @@ section:target {
padding-bottom: 56.25%;
}
#episodes img {
max-height: 150px;
}
#episodes>div {
flex: none
}
@ -169,7 +122,31 @@ section:target {
nav {
transition: top .4s cubic-bezier(.25,.8,.25,1);
}
#view {
background: no-repeat center center fixed;
background-size: cover;
}
#view > div{
backdrop-filter: blur(10px) brightness(0.5);
}
#viewEpisodesWrapper.hidden{
opacity: 0;
height: 0
}
#viewEpisodesWrapper{
opacity: 1;
height: auto;
transition: opacity .2s cubic-bezier(.25,.8,.25,1);
overflow: hidden;
}
#view .details{
background-color: var(--dm-button-bg-color) !important;
background-image: var(--dm-button-bg-image) !important;
box-shadow: var(--dm-button-box-shadow) !important;
}
.modal-dialog {
top: 0 !important
}
@keyframes load {
from {
left: -150px;

123
app/index.html
View file

@ -48,60 +48,59 @@
</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>
<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="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 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 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">
</div>
<div class="col-md-8">
<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">Fall 2020</span>
<span id="viewMediaInfo" class="text-capitalize"><span>TV Show</span> • 24 Episodes • 24 min</span>
<p class="text-muted desc overflow-y-scroll my-0 font-size-12 pt-20" id="viewDesc">
</p>
</div>
</div>
<div class="col-md-2">
<div class="card m-0 py-5 details font-size-12" id="viewDetails">
</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 class="row py-20">
<div class="col-12 px-20">
<div class="pb-20 hidden" id="viewEpisodesWrapper">
<span class="font-weight-bold font-size-22">Episodes</span>
<div id="episodes" class="pt-10 d-flex overflow-x-auto justify-content-between">
</div>
</div>
</div>
@ -109,23 +108,37 @@
</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">
<a href="#player" class="navbar-brand mt-5 ml-10">
<img src="logo_cut.png" alt="logo">
</a>
<a href="#list" class="navbar-brand pointer ml-auto" data-toggle="tooltip" data-placement="bottom"
data-title="Anime Watch List">
<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">
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">
data-title="Currently Trending Anime" id="navTrending">
<span class="material-icons font-size-20">trending_up</span>
</a>
<form class="form-inline d-flex" action="javascript:searchBox()">
@ -133,8 +146,8 @@
<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">
<input id="search" type="text" class="form-control bg-dark-light border-left-0" placeholder="Search"
autocomplete="off">
</div>
</form>
<a href="#settingsTab" class="navbar-brand pointer font-size-20 mr-5">

68
app/js/animeHandler.js
View file

@ -4,6 +4,9 @@ function searchBox() {
search.value = ""
document.location.hash = "#browse"
}
navNew.onclick = () => {hsRss()}
navTrending.onclick = () =>{searchAnime()}
navList.onclick = () =>{searchAnime()}
async function alRequest(a, b) {
let query,
variables = {
@ -219,12 +222,12 @@ async function searchAnime(a) {
let detailsfrag = document.createDocumentFragment()
let details = {
averageScore: "Average Score",
duration: "Episode Duration",
episodes: "Episodes",
format: "Format",
// duration: "Episode Duration",
// episodes: "Episodes",
// format: "Format",
genres: "Genres",
season: "Season",
seasonYear: "Year",
// season: "Season",
// seasonYear: "Year",
status: "Status",
english: "English",
romaji: "Romaji",
@ -234,51 +237,60 @@ let details = {
const episodeRx = /Episode (\d+) - (.*)/;
function viewAnime(media) {
halfmoon.toggleModal("view")
if (media.bannerImage != null) {
document.querySelector(".view .banner img").src = media.bannerImage
document.querySelector(".view .cover-wrapper").classList.add("mt-nc")
} else {
document.querySelector(".view .banner img").src = ""
document.querySelector(".view .cover-wrapper").classList.remove("mt-nc")
}
document.querySelector(".view .contain-img").src = media.coverImage.extraLarge
document.querySelector(".view .title").textContent = media.title.userPreferred
document.querySelector(".view .desc").innerHTML = media.description || ""
document.querySelector(".view .details").innerHTML = ""
view.setAttribute("style", `background-image: url(${media.bannerImage}) !important`)
viewImg.src = media.coverImage.extraLarge
viewTitle.textContent = media.title.userPreferred
viewDesc.innerHTML = media.description || ""
viewDetails.innerHTML = ""
detailsCreator(media)
document.querySelector(".view .details").appendChild(detailsfrag)
viewDetails.appendChild(detailsfrag)
if (media.nextAiringEpisode) {
let temp = document.createElement("p")
temp.innerHTML = `<span class="font-weight-bold">Airing</span><br><span class="text-muted"> Episode ${media.nextAiringEpisode.episode}: ${toTS(media.nextAiringEpisode.timeUntilAiring)}</span>`
document.querySelector(".view .details").prepend(temp)
viewDetails.prepend(temp)
}
trailer.src = ""
viewSeason.innerHTML = `${(media.season ? media.season.toLowerCase() + " " : "") + (media.seasonYear ? media.seasonYear : "")}`
viewMediaInfo.innerHTML = `${media.format ? "<span>" + media.format + "</span>" : ""}${media.episodes ? "<span>" + media.episodes + " Episodes</span>" : ""}${media.duration ? "<span>" + media.duration + " Minutes</span>" : ""}`
viewPlay.onclick = () => { nyaaSearch(media, 1); halfmoon.toggleModal("view") }
if (media.trailer) {
switch (media.trailer.site) {
case "youtube":
trailer.src = "https://www.youtube.com/embed/" + media.trailer.id
break;
}
viewTrailer.removeAttribute("disabled", "")
viewTrailer.onclick = () =>
trailerPopup(media.trailer)
} else {
viewTrailer.setAttribute("disabled", "")
}
viewEpisodes.onclick = () => {
viewEpisodesWrapper.classList.toggle("hidden")
}
episodes.innerHTML = ""
if (media.streamingEpisodes) {
viewEpisodes.removeAttribute("disabled", "")
let frag = document.createDocumentFragment()
media.streamingEpisodes.forEach(episode => {
let temp = document.createElement("div")
temp.classList.add("position-relative", "w-250", "rounded", "mr-10", "overflow-hidden", "pointer")
temp.innerHTML = `
<img src="${episode.thumbnail}" class="w-full">
<img src="${episode.thumbnail}" class="w-full h-full">
<div class="position-absolute ep-title w-full p-10 text-truncate bottom-0">${episode.title}</div>`
temp.onclick = () => { nyaaSearch(media, episodeRx.exec(episode.title)[1]); halfmoon.toggleModal("view") }
frag.appendChild(temp)
})
episodes.appendChild(frag)
} else {
viewEpisodes.setAttribute("disabled", "")
}
play.onclick = () => { nyaaSearch(media, ep.value); halfmoon.toggleModal("view") }
ep.value = 1
ep.max = media.episodes || 999
}
function trailerPopup(trailer) {
trailerVideo.src = ""
halfmoon.toggleModal("trailer")
switch (trailer.site) {
case "youtube":
trailerVideo.src = "https://www.youtube.com/embed/" + trailer.id
break;
}
}
function detailsCreator(entry) {
if (entry) {
Object.entries(entry).forEach(value => {