mirror of
https://github.com/ThaUnknown/miru.git
synced 2026-04-20 12:22:04 +00:00
single window capture, search UI UX work, scrolltop fixes
This commit is contained in:
ThaUnknown
parent
d665d15a86
commit
7f49989446
8 changed files with 160 additions and 61 deletions
|
|
@ -35,6 +35,19 @@ img {
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
.w-30 {
|
||||
width: 3rem
|
||||
}
|
||||
|
||||
.font-size-30 {
|
||||
font-size: 3rem !important
|
||||
}
|
||||
|
||||
.border-right-dark {
|
||||
border-right: var(--base-border-width) solid var(--dm-border-color) !important;
|
||||
border-color: rgba(255, 255, 255, 0.08) !important
|
||||
}
|
||||
|
||||
input:invalid {
|
||||
box-shadow: 0 0 0 0.2rem var(--danger-color) !important
|
||||
}
|
||||
|
|
@ -146,15 +159,13 @@ input:invalid {
|
|||
}
|
||||
|
||||
#home.loading {
|
||||
height: 50rem !important;
|
||||
position: relative;
|
||||
overflow-y: hidden !important;
|
||||
height: 50rem !important
|
||||
}
|
||||
|
||||
#home.loading:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
top: 40rem;
|
||||
height: 10rem;
|
||||
width: 100%;
|
||||
background: linear-gradient(0deg, rgba(37, 40, 44, 1) 0%, rgba(37, 40, 44, 1) 15%, rgba(37, 40, 44, .45) 70%, rgba(37, 40, 44, 0) 100%);
|
||||
|
|
@ -446,12 +457,4 @@ section:target:not(#player),
|
|||
font-size: 1.4rem;
|
||||
border: none;
|
||||
margin-right: 0.6rem;
|
||||
}
|
||||
|
||||
.w-30 {
|
||||
width: 3rem
|
||||
}
|
||||
|
||||
.font-size-30 {
|
||||
font-size: 3rem
|
||||
}
|
||||
105
app/index.html
105
app/index.html
|
|
@ -189,6 +189,15 @@
|
|||
<div>Action, Drama, Fantasy, Mystery</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-row px-10 py-5">
|
||||
<div class="material-icons mr-10 font-size-24">
|
||||
spa
|
||||
</div>
|
||||
<div class="d-flex flex-column justify-content-center text-nowrap">
|
||||
<div class="font-weight-bold">Season</div>
|
||||
<div>Spring 2013</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-row px-10 py-5">
|
||||
<div class="material-icons mr-10 font-size-24">
|
||||
theaters
|
||||
|
|
@ -243,15 +252,6 @@
|
|||
<div>Manga</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-row px-10 py-5">
|
||||
<div class="material-icons mr-10 font-size-24">
|
||||
spa
|
||||
</div>
|
||||
<div class="d-flex flex-column justify-content-center text-nowrap">
|
||||
<div class="font-weight-bold">Season</div>
|
||||
<div>Spring 2013</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-row px-10 py-5">
|
||||
<div class="material-icons mr-10 font-size-24">
|
||||
trending_up
|
||||
|
|
@ -520,20 +520,30 @@
|
|||
<section id="home" class="flex-column overflow-y-scroll">
|
||||
<div class="h-full py-10">
|
||||
<div class="container-fluid row p-20" id="searchWrapper">
|
||||
<div class="col-lg col-3 p-10 d-flex flex-column justify-content-end">
|
||||
<div class="pb-10 font-size-24 font-weight-semi-bold">Title</div>
|
||||
<div class="input-group">
|
||||
<div class="col-lg col-4 p-10 d-flex flex-column justify-content-end">
|
||||
<div class="pb-10 font-size-24 font-weight-semi-bold d-flex">
|
||||
<div class="material-icons mr-10 font-size-30">
|
||||
title
|
||||
</div>
|
||||
Title
|
||||
</div>
|
||||
<div class="input-group shadow-lg">
|
||||
<div class="input-group-prepend">
|
||||
<span
|
||||
class="input-group-text d-flex material-icons bg-dark text-muted pr-0 font-size-18">search</span>
|
||||
</div>
|
||||
<input type="text" class="form-control bg-dark border-left-0" autocomplete="off" id="searchText"
|
||||
data-option="search" placeholder="Any">
|
||||
<input type="text" class="form-control bg-dark border-left-0 shadow-none" autocomplete="off"
|
||||
id="searchText" data-option="search" placeholder="Any">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg col-3 p-10 d-flex flex-column justify-content-end">
|
||||
<div class="pb-10 font-size-24 font-weight-semi-bold">Genre</div>
|
||||
<select class="form-control bg-dark" required id="searchGenre" data-option="genre">
|
||||
<div class="col-lg col-4 p-10 d-flex flex-column justify-content-end">
|
||||
<div class="pb-10 font-size-24 font-weight-semi-bold d-flex">
|
||||
<div class="material-icons mr-10 font-size-30">
|
||||
theater_comedy
|
||||
</div>
|
||||
Genre
|
||||
</div>
|
||||
<select class="form-control bg-dark shadow-lg" required id="searchGenre" data-option="genre">
|
||||
<option value selected disabled hidden>Any</option>
|
||||
<option value="action">Action</option>
|
||||
<option value="adventure">Adventure</option>
|
||||
|
|
@ -555,24 +565,33 @@
|
|||
<option value="thriller">Thriller</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-lg col-3 p-10 d-flex flex-column justify-content-end">
|
||||
<div class="pb-10 font-size-24 font-weight-semi-bold">Year</div>
|
||||
<input type="number" placeholder="Any" min="1940" max="2100" class="form-control bg-dark" id="searchYear"
|
||||
data-option="year">
|
||||
</div>
|
||||
<div class="col-lg col-3 p-10 d-flex flex-column justify-content-end">
|
||||
<div class="pb-10 font-size-24 font-weight-semi-bold">Season</div>
|
||||
<select class="form-control bg-dark" required id="searchSeason" data-option="season">
|
||||
<option value selected disabled hidden>Any</option>
|
||||
<option value="WINTER">Winter</option>
|
||||
<option value="SPRING">Spring</option>
|
||||
<option value="SUMMER">Summer</option>
|
||||
<option value="FALL">Fall</option>
|
||||
</select>
|
||||
<div class="col-lg col-4 p-10 d-flex flex-column justify-content-end">
|
||||
<div class="pb-10 font-size-24 font-weight-semi-bold d-flex">
|
||||
<div class="material-icons mr-10 font-size-30">
|
||||
spa
|
||||
</div>
|
||||
Season
|
||||
</div>
|
||||
<div class="input-group shadow-lg">
|
||||
<select class="form-control bg-dark shadow-none border-right-dark" required id="searchSeason" data-option="season">
|
||||
<option value selected disabled hidden>Any</option>
|
||||
<option value="WINTER">Winter</option>
|
||||
<option value="SPRING">Spring</option>
|
||||
<option value="SUMMER">Summer</option>
|
||||
<option value="FALL">Fall</option>
|
||||
</select>
|
||||
<input type="number" placeholder="Any" min="1940" max="2100" class="form-control bg-dark shadow-none"
|
||||
id="searchYear" data-option="year">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col p-10 d-flex flex-column justify-content-end">
|
||||
<div class="pb-10 font-size-24 font-weight-semi-bold">Format</div>
|
||||
<select class="form-control bg-dark" required id="searchFormat" data-option="format">
|
||||
<div class="pb-10 font-size-24 font-weight-semi-bold d-flex">
|
||||
<div class="material-icons mr-10 font-size-30">
|
||||
monitor
|
||||
</div>
|
||||
Format
|
||||
</div>
|
||||
<select class="form-control bg-dark shadow-lg" required id="searchFormat" data-option="format">
|
||||
<option value selected disabled hidden>Any</option>
|
||||
<option value="TV">TV Show</option>
|
||||
<option value="MOVIE">Movie</option>
|
||||
|
|
@ -582,8 +601,13 @@
|
|||
</select>
|
||||
</div>
|
||||
<div class="col p-10 d-flex flex-column justify-content-end">
|
||||
<div class="pb-10 font-size-24 font-weight-semi-bold">Status</div>
|
||||
<select class="form-control bg-dark" required id="searchStatus" data-option="status">
|
||||
<div class="pb-10 font-size-24 font-weight-semi-bold d-flex">
|
||||
<div class="material-icons mr-10 font-size-30">
|
||||
live_tv
|
||||
</div>
|
||||
Status
|
||||
</div>
|
||||
<select class="form-control bg-dark shadow-lg" required id="searchStatus" data-option="status">
|
||||
<option value selected disabled hidden>Any</option>
|
||||
<option value="RELEASING">Airing</option>
|
||||
<option value="FINISHED">Finished</option>
|
||||
|
|
@ -592,8 +616,13 @@
|
|||
</select>
|
||||
</div>
|
||||
<div class="col p-10 d-flex flex-column justify-content-end">
|
||||
<div class="pb-10 font-size-24 font-weight-semi-bold">Sort</div>
|
||||
<select class="form-control bg-dark" required id="searchSort" data-option="sort">
|
||||
<div class="pb-10 font-size-24 font-weight-semi-bold d-flex">
|
||||
<div class="material-icons mr-10 font-size-30">
|
||||
sort
|
||||
</div>
|
||||
Sort
|
||||
</div>
|
||||
<select class="form-control bg-dark shadow-lg" required id="searchSort" data-option="sort">
|
||||
<option value selected disabled hidden>Name</option>
|
||||
<option value="START_DATE_DESC">Release Date</option>
|
||||
<option value="SCORE_DESC">Score</option>
|
||||
|
|
@ -602,7 +631,7 @@
|
|||
</select>
|
||||
</div>
|
||||
<div class="col-auto p-10 d-flex">
|
||||
<button class="btn bg-dark material-icons font-size-18 px-5 align-self-end" type="button"
|
||||
<button class="btn bg-dark material-icons font-size-18 px-5 align-self-end shadow-lg border-0" type="button"
|
||||
id="searchClear">delete</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -122,6 +122,9 @@ streamingEpisodes {
|
|||
title,
|
||||
thumbnail
|
||||
},
|
||||
mediaListEntry {
|
||||
progress
|
||||
},
|
||||
relations {
|
||||
edges {
|
||||
relationType(version:2)
|
||||
|
|
|
|||
|
|
@ -141,6 +141,9 @@ streamingEpisodes {
|
|||
title,
|
||||
thumbnail
|
||||
},
|
||||
mediaListEntry {
|
||||
progress
|
||||
},
|
||||
relations {
|
||||
edges {
|
||||
relationType(version:2)
|
||||
|
|
@ -761,15 +764,23 @@ function loadHomePage () {
|
|||
galleryAppend({ media: mediaList.filter(entry => entry.media.countryOfOrigin !== 'CN' && entry.media.isAdult === false), gallery: browseGallery, method: 'schedule', page: page || 1, schedule: true })
|
||||
},
|
||||
search: async function (page) {
|
||||
const opts = {
|
||||
const def = {
|
||||
method: 'Search',
|
||||
page: page || 1
|
||||
}
|
||||
const opts = {}
|
||||
Object.assign(opts, def)
|
||||
for (const element of homeSearchElements) {
|
||||
if (element.value) opts[element.dataset.option] = element.value
|
||||
}
|
||||
const mediaList = (await (0,_anilist_js__WEBPACK_IMPORTED_MODULE_0__.alRequest)(opts)).data.Page.media
|
||||
galleryAppend({ media: mediaList, gallery: browseGallery, method: 'search', page: page || 1 })
|
||||
if (Object.keys(def).length !== Object.keys(opts).length) {
|
||||
const mediaList = (await (0,_anilist_js__WEBPACK_IMPORTED_MODULE_0__.alRequest)(opts)).data.Page.media
|
||||
galleryAppend({ media: mediaList, gallery: browseGallery, method: 'search', page: page || 1 })
|
||||
} else {
|
||||
searchClear.classList.remove('text-primary')
|
||||
home.classList.remove('loading')
|
||||
reloadHome()
|
||||
}
|
||||
}
|
||||
}
|
||||
const homePreviewFunctions = {
|
||||
|
|
@ -803,7 +814,6 @@ function loadHomePage () {
|
|||
homeReleases.textContent = ''
|
||||
homeReleases.append(...cards)
|
||||
}
|
||||
setTimeout(homePreviewFunctions.releases, 30000)
|
||||
},
|
||||
planning: function () {
|
||||
(0,_anilist_js__WEBPACK_IMPORTED_MODULE_0__.alRequest)({ method: 'UserLists', status_in: 'PLANNING', id: alID, perPage: 5 }).then(res => {
|
||||
|
|
@ -882,18 +892,22 @@ function loadHomePage () {
|
|||
for (const item of homePreviewElements) {
|
||||
homePreviewFunctions[item.dataset.function]()
|
||||
}
|
||||
setInterval(homePreviewFunctions.releases, 30000)
|
||||
for (const item of homeLoadElements) {
|
||||
item.onclick = function () {
|
||||
home.scrollTop = 0
|
||||
home.classList.add('browsing')
|
||||
searchClear.classList.add('text-primary')
|
||||
homeLoadFunctions[item.dataset.function]()
|
||||
}
|
||||
}
|
||||
function reloadHome () {
|
||||
clearSearch()
|
||||
searchClear.classList.remove('text-primary')
|
||||
home.classList.remove('browsing')
|
||||
lastRSSDate = undefined
|
||||
home.onscroll = undefined
|
||||
home.scrollTop = 0
|
||||
for (const item of homePreviewElements) {
|
||||
item.textContent = ''
|
||||
item.append(...gallerySkeletonFrag(5))
|
||||
|
|
@ -913,9 +927,11 @@ function loadHomePage () {
|
|||
if (!searchTimeout) {
|
||||
home.classList.add('browsing')
|
||||
gallerySkeleton(browseGallery)
|
||||
home.scrollTop = 0
|
||||
} else {
|
||||
clearTimeout(searchTimeout)
|
||||
}
|
||||
searchClear.classList.add('text-primary')
|
||||
searchTimeout = setTimeout(() => {
|
||||
homeLoadFunctions.search()
|
||||
searchTimeout = undefined
|
||||
|
|
@ -1386,6 +1402,7 @@ __webpack_require__.r(__webpack_exports__);
|
|||
/* harmony export */ "searchParams": () => (/* binding */ searchParams),
|
||||
/* harmony export */ "userBrowser": () => (/* binding */ userBrowser),
|
||||
/* harmony export */ "countdown": () => (/* binding */ countdown),
|
||||
/* harmony export */ "flattenObj": () => (/* binding */ flattenObj),
|
||||
/* harmony export */ "DOMPARSER": () => (/* binding */ DOMPARSER)
|
||||
/* harmony export */ });
|
||||
/* harmony import */ var halfmoon__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! halfmoon */ "halfmoon");
|
||||
|
|
@ -1425,6 +1442,23 @@ function countdown (s) {
|
|||
return tmp.join(' ')
|
||||
}
|
||||
|
||||
function flattenObj (obj) {
|
||||
const result = {}
|
||||
|
||||
for (const key in obj) {
|
||||
if (typeof obj[key] === 'object') {
|
||||
const childObj = flattenObj(obj[key])
|
||||
|
||||
for (const childObjKey in childObj) {
|
||||
result[childObjKey] = childObj[childObjKey]
|
||||
}
|
||||
} else {
|
||||
result[key] = obj[key]
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
const DOMPARSER = new DOMParser().parseFromString.bind(new DOMParser())
|
||||
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -6,7 +6,7 @@ import { resolveFileMedia, viewAnime, relations } from './anime.js'
|
|||
import { getRSSurl, releasesRSS, getRSSContent } from './rss.js'
|
||||
import { settings } from './settings.js'
|
||||
import { client } from './main.js'
|
||||
import { countdown } from './util.js'
|
||||
import { countdown, flattenObj } from './util.js'
|
||||
export function loadHomePage () {
|
||||
const homeLoadElements = [navSchedule, homeContinueMore, homeReleasesMore, homePlanningMore, homeTrendingMore, homeRomanceMore, homeActionMore]
|
||||
const homePreviewElements = [homeContinue, homeReleases, homePlanning, homeTrending, homeRomance, homeAction]
|
||||
|
|
@ -57,15 +57,23 @@ export function loadHomePage () {
|
|||
galleryAppend({ media: mediaList.filter(entry => entry.media.countryOfOrigin !== 'CN' && entry.media.isAdult === false), gallery: browseGallery, method: 'schedule', page: page || 1, schedule: true })
|
||||
},
|
||||
search: async function (page) {
|
||||
const opts = {
|
||||
const def = {
|
||||
method: 'Search',
|
||||
page: page || 1
|
||||
}
|
||||
const opts = {}
|
||||
Object.assign(opts, def)
|
||||
for (const element of homeSearchElements) {
|
||||
if (element.value) opts[element.dataset.option] = element.value
|
||||
}
|
||||
const mediaList = (await alRequest(opts)).data.Page.media
|
||||
galleryAppend({ media: mediaList, gallery: browseGallery, method: 'search', page: page || 1 })
|
||||
if (Object.keys(def).length !== Object.keys(opts).length) {
|
||||
const mediaList = (await alRequest(opts)).data.Page.media
|
||||
galleryAppend({ media: mediaList, gallery: browseGallery, method: 'search', page: page || 1 })
|
||||
} else {
|
||||
searchClear.classList.remove('text-primary')
|
||||
home.classList.remove('loading')
|
||||
reloadHome()
|
||||
}
|
||||
}
|
||||
}
|
||||
const homePreviewFunctions = {
|
||||
|
|
@ -99,7 +107,6 @@ export function loadHomePage () {
|
|||
homeReleases.textContent = ''
|
||||
homeReleases.append(...cards)
|
||||
}
|
||||
setTimeout(homePreviewFunctions.releases, 30000)
|
||||
},
|
||||
planning: function () {
|
||||
alRequest({ method: 'UserLists', status_in: 'PLANNING', id: alID, perPage: 5 }).then(res => {
|
||||
|
|
@ -178,18 +185,22 @@ export function loadHomePage () {
|
|||
for (const item of homePreviewElements) {
|
||||
homePreviewFunctions[item.dataset.function]()
|
||||
}
|
||||
setInterval(homePreviewFunctions.releases, 30000)
|
||||
for (const item of homeLoadElements) {
|
||||
item.onclick = function () {
|
||||
home.scrollTop = 0
|
||||
home.classList.add('browsing')
|
||||
searchClear.classList.add('text-primary')
|
||||
homeLoadFunctions[item.dataset.function]()
|
||||
}
|
||||
}
|
||||
function reloadHome () {
|
||||
clearSearch()
|
||||
searchClear.classList.remove('text-primary')
|
||||
home.classList.remove('browsing')
|
||||
lastRSSDate = undefined
|
||||
home.onscroll = undefined
|
||||
home.scrollTop = 0
|
||||
for (const item of homePreviewElements) {
|
||||
item.textContent = ''
|
||||
item.append(...gallerySkeletonFrag(5))
|
||||
|
|
@ -209,9 +220,11 @@ export function loadHomePage () {
|
|||
if (!searchTimeout) {
|
||||
home.classList.add('browsing')
|
||||
gallerySkeleton(browseGallery)
|
||||
home.scrollTop = 0
|
||||
} else {
|
||||
clearTimeout(searchTimeout)
|
||||
}
|
||||
searchClear.classList.add('text-primary')
|
||||
searchTimeout = setTimeout(() => {
|
||||
homeLoadFunctions.search()
|
||||
searchTimeout = undefined
|
||||
|
|
|
|||
|
|
@ -33,4 +33,21 @@ export function countdown (s) {
|
|||
return tmp.join(' ')
|
||||
}
|
||||
|
||||
export function flattenObj (obj) {
|
||||
const result = {}
|
||||
|
||||
for (const key in obj) {
|
||||
if (typeof obj[key] === 'object') {
|
||||
const childObj = flattenObj(obj[key])
|
||||
|
||||
for (const childObjKey in childObj) {
|
||||
result[childObjKey] = childObj[childObjKey]
|
||||
}
|
||||
} else {
|
||||
result[key] = obj[key]
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
export const DOMPARSER = new DOMParser().parseFromString.bind(new DOMParser())
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
"scope_url_host": "localhost",
|
||||
"scope_url_path": "/app/"
|
||||
},
|
||||
"capture_links": "new-client",
|
||||
"capture_links": "existing-client-navigate",
|
||||
"url_handlers": [
|
||||
{
|
||||
"origin": "https://localhost:5500"
|
||||
|
|
|
|||
Loading…
Reference in a new issue