Creepso/miru
1
0
Fork 0
mirror of https://github.com/ThaUnknown/miru.git synced 2026-04-04 15:59:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

UX, better looking miniplayer, cleaner detail generation

Browse source
This commit is contained in:
ThaUnknown 2021-08-16 13:37:17 +02:00
parent 32222e94cb
commit 668e5fc2b0
6 changed files with 73 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
app/css/misc.css
View file

@ -260,10 +260,6 @@ section:target:not(#player),
background: rgba(31, 38, 49, 0.7);
}
#search:focus {
box-shadow: none
}
#pageWrapper {
transition: top .4s cubic-bezier(.25, .8, .25, 1);
}
@ -281,6 +277,20 @@ section:target:not(#player),
white-space: pre !important
}
#searchWrapper>div> :nth-child(2),
#searchWrapper button {
transition: transform .2s ease;
will-change: transform;
}
#searchWrapper>div> :nth-child(2):hover {
transform: scale(1.05)
}
#searchWrapper button:hover {
transform: scale(1.15)
}
/* sidebar */
:root {
--sidebar-minimised: 7rem;
@ -387,7 +397,6 @@ section:target:not(#player),
overflow: visible;
}
.nav-hidden>.sidebar {
left: calc(-1* var(--sidebar-width)) !important;
}

15
app/css/torrent-player.css
View file

@ -39,10 +39,13 @@
z-index: -1;
width: 100%;
height: 100%;
background: #191c209d;
backdrop-filter: blur(10px);
}
.torrent-player:target video {
position: absolute;
background: none;
}
.torrent-player a.miniplayer {
@ -87,7 +90,6 @@
.torrent-player:target a.miniplayer,
.torrent-player .bottom input[type='range'][data-name='setProgress']+img[src=' '],
.torrent-player video[src='']:not([poster]),
.torrent-player.pip video,
.torrent-player .ctrl[disabled],
.torrent-player .ctrl[href=''],
.torrent-player:fullscreen .ctrl[data-name='toggleTheatre'],
@ -96,6 +98,10 @@
display: none !important;
}
.torrent-player.pip video {
visibility: hidden;
}
.torrent-player .top {
background: linear-gradient(to bottom,
rgba(0, 0, 0, 0.8),
@ -396,12 +402,15 @@
.torrent-player .bottom .popup {
position: relative;
}
.torrent-player .bottom .popup input {
display: none;
}
.torrent-player .bottom .popup input:checked+label {
color: white
}
.torrent-player .bottom .popup label {
cursor: pointer;
color: rgba(255, 255, 255, 0.6);
@ -421,10 +430,10 @@
background: #191c20;
padding: .8rem;
border-radius: 3px;
font-size: 1.2rem
font-size: 1.6rem
}
.torrent-player .bottom .popup:hover .popup-menu{
.torrent-player .bottom .popup:hover .popup-menu {
visibility: visible;
}

14
app/index.html
View file

@ -111,7 +111,8 @@
</div>
</div>
<div class="btn-group mb-5 border-0" role="group">
<button class="btn d-flex align-items-center font-weight-bold font-size-16 border-0" type="button">
<button class="btn d-flex align-items-center font-weight-bold font-size-16 border-0"
type="button">
<span class="material-icons mr-10 font-size-18 w-30">
get_app
</span>
@ -329,7 +330,7 @@
</div>
</div>
<div class="overflow-y-hidden content-wrapper">
<section id="player" class="torrent-player">
<section id="player" class="torrent-player shadow-lg">
<video id="video" src=""></video>
<a href="#player" class="miniplayer"></a>
<div class="top">
@ -1122,6 +1123,15 @@ wss://hub.bugout.link:443/announce</textarea>
</div>
</div>
</template>
<template id="detailTemplate">
<div class="d-flex flex-row px-10 py-5">
<div class="material-icons mr-10 font-size-24"></div>
<div class="d-flex flex-column justify-content-center text-nowrap">
<div class="font-weight-bold"></div>
<div></div>
</div>
</div>
</template>
<script src="https://cdn.jsdelivr.net/gh/halfmoonui/halfmoon@1.1.1/js/halfmoon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/anitomyscript@2.0.4/dist/anitomyscript.bundle.min.js"></script>
<script src="js/bundle.js"></script>

43
app/js/bundle.js
View file

@ -565,7 +565,6 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _util_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./util.js */ "./app/js/util.js");
/* harmony import */ var halfmoon__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! halfmoon */ "halfmoon");
/* harmony import */ var halfmoon__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(halfmoon__WEBPACK_IMPORTED_MODULE_6__);
/* provided dependency */ var console = __webpack_require__(/*! ./node_modules/console-browserify/index.js */ "./node_modules/console-browserify/index.js");
/* eslint-env browser */
/* global navHome, searchClear, searchWrapper, skeletonCardTemplate, bareCardTemplate, fullCardTemplate, home, searchText, searchGenre, searchYear, searchSeason, searchFormat, searchStatus, searchSort, navSchedule, homeContinueMore, homeReleasesMore, homePlanningMore, homeTrendingMore, homeRomanceMore, homeActionMore, homeContinue, homeReleases, homePlanning, homeTrending, homeRomance, homeAction */
@ -876,59 +875,52 @@ const detailsMap = [
{ property: 'romaji', label: 'Romaji', icon: 'translate' },
{ property: 'native', label: 'Native', icon: '日本', custom: 'icon' }
]
/* global detailTemplate */
const detailTemp = detailTemplate.cloneNode(true).content
function mediaDetails (media) {
const details = []
for (const detail of detailsMap) {
if (media[detail.property]) {
const wrap = document.createElement('div')
const icon = document.createElement('div')
const info = document.createElement('div')
const label = document.createElement('div')
const value = document.createElement('div')
wrap.append(icon, info)
info.append(label, value)
wrap.classList.add('d-flex', 'flex-row', 'px-10', 'py-5')
icon.classList.add('material-icons', 'mr-10', 'font-size-24')
info.classList.add('d-flex', 'flex-column', 'justify-content-center', 'text-nowrap')
label.classList.add('font-weight-bold')
const clone = detailTemp.cloneNode(true)
const nodes = clone.querySelectorAll('*')
switch (media[detail.property].constructor) {
case String: {
value.textContent = media[detail.property].replace(/_/g, ' ').toLowerCase()
nodes[4].textContent = media[detail.property].replace(/_/g, ' ').toLowerCase()
break
}
case Number: {
value.textContent = media[detail.property]
nodes[4].textContent = media[detail.property]
break
}
case Array: {
if (detail.property === 'nodes') {
value.textContent = media[detail.property][0] && media[detail.property][0].name
nodes[4].textContent = media[detail.property][0] && media[detail.property][0].name
} else {
value.textContent = media[detail.property].join(', ').replace(/_/g, ' ').toLowerCase()
nodes[4].textContent = media[detail.property].join(', ').replace(/_/g, ' ').toLowerCase()
}
}
}
icon.textContent = detail.icon
label.textContent = detail.label
nodes[1].textContent = detail.icon
nodes[3].textContent = detail.label
switch (detail.custom) {
case 'icon': {
icon.classList.remove('material-icons', 'font-size-24')
icon.classList.add('d-flex', 'align-items-center', 'text-nowrap', 'font-size-12', 'font-weight-bold')
nodes[1].classList.remove('material-icons', 'font-size-24')
nodes[1].classList.add('d-flex', 'align-items-center', 'text-nowrap', 'font-size-12', 'font-weight-bold')
break
}
case 'property': {
if (detail.property === 'episodes' && media.progress) {
value.innerHTML = `Watched <b>${media.progress}</b> of <b>${media.episodes}</b>`
nodes[4].innerHTML = `Watched <b>${media.progress}</b> of <b>${media.episodes}</b>`
} else if (detail.property === 'averageScore') {
value.textContent = media.averageScore + '%'
nodes[4].textContent = media.averageScore + '%'
} else if (detail.property === 'season') {
value.textContent = [media.season?.toLowerCase(), media.seasonYear].filter(f => f).join(' ')
nodes[4].textContent = [media.season?.toLowerCase(), media.seasonYear].filter(f => f).join(' ')
} else {
value.textContent = media[detail.property]
nodes[4].textContent = media[detail.property]
}
}
}
details.push(wrap)
details.push(clone)
}
}
return details
@ -950,7 +942,6 @@ trailerClose.onclick = () => {
navNowPlaying.onclick = () => viewMedia(_main_js__WEBPACK_IMPORTED_MODULE_4__.client.nowPlaying.media)
/* global trailerVideo, viewAnime, trailerClose, navNowPlaying */
const viewNodes = viewAnime.querySelectorAll('*')
console.log(viewNodes)
function viewMedia (input) {
halfmoon__WEBPACK_IMPORTED_MODULE_6___default().showModal('viewAnime')
const media = (0,_util_js__WEBPACK_IMPORTED_MODULE_5__.flattenObj)(input)

2
app/js/bundle.js.map
View file

File diff suppressed because one or more lines are too long

42
app/js/interface.js
View file

@ -308,59 +308,52 @@ const detailsMap = [
{ property: 'romaji', label: 'Romaji', icon: 'translate' },
{ property: 'native', label: 'Native', icon: '日本', custom: 'icon' }
]
/* global detailTemplate */
const detailTemp = detailTemplate.cloneNode(true).content
function mediaDetails (media) {
const details = []
for (const detail of detailsMap) {
if (media[detail.property]) {
const wrap = document.createElement('div')
const icon = document.createElement('div')
const info = document.createElement('div')
const label = document.createElement('div')
const value = document.createElement('div')
wrap.append(icon, info)
info.append(label, value)
wrap.classList.add('d-flex', 'flex-row', 'px-10', 'py-5')
icon.classList.add('material-icons', 'mr-10', 'font-size-24')
info.classList.add('d-flex', 'flex-column', 'justify-content-center', 'text-nowrap')
label.classList.add('font-weight-bold')
const clone = detailTemp.cloneNode(true)
const nodes = clone.querySelectorAll('*')
switch (media[detail.property].constructor) {
case String: {
value.textContent = media[detail.property].replace(/_/g, ' ').toLowerCase()
nodes[4].textContent = media[detail.property].replace(/_/g, ' ').toLowerCase()
break
}
case Number: {
value.textContent = media[detail.property]
nodes[4].textContent = media[detail.property]
break
}
case Array: {
if (detail.property === 'nodes') {
value.textContent = media[detail.property][0] && media[detail.property][0].name
nodes[4].textContent = media[detail.property][0] && media[detail.property][0].name
} else {
value.textContent = media[detail.property].join(', ').replace(/_/g, ' ').toLowerCase()
nodes[4].textContent = media[detail.property].join(', ').replace(/_/g, ' ').toLowerCase()
}
}
}
icon.textContent = detail.icon
label.textContent = detail.label
nodes[1].textContent = detail.icon
nodes[3].textContent = detail.label
switch (detail.custom) {
case 'icon': {
icon.classList.remove('material-icons', 'font-size-24')
icon.classList.add('d-flex', 'align-items-center', 'text-nowrap', 'font-size-12', 'font-weight-bold')
nodes[1].classList.remove('material-icons', 'font-size-24')
nodes[1].classList.add('d-flex', 'align-items-center', 'text-nowrap', 'font-size-12', 'font-weight-bold')
break
}
case 'property': {
if (detail.property === 'episodes' && media.progress) {
value.innerHTML = `Watched <b>${media.progress}</b> of <b>${media.episodes}</b>`
nodes[4].innerHTML = `Watched <b>${media.progress}</b> of <b>${media.episodes}</b>`
} else if (detail.property === 'averageScore') {
value.textContent = media.averageScore + '%'
nodes[4].textContent = media.averageScore + '%'
} else if (detail.property === 'season') {
value.textContent = [media.season?.toLowerCase(), media.seasonYear].filter(f => f).join(' ')
nodes[4].textContent = [media.season?.toLowerCase(), media.seasonYear].filter(f => f).join(' ')
} else {
value.textContent = media[detail.property]
nodes[4].textContent = media[detail.property]
}
}
}
details.push(wrap)
details.push(clone)
}
}
return details
@ -382,7 +375,6 @@ trailerClose.onclick = () => {
navNowPlaying.onclick = () => viewMedia(client.nowPlaying?.media)
/* global trailerVideo, viewAnime, trailerClose, navNowPlaying */
const viewNodes = viewAnime.querySelectorAll('*')
console.log(viewNodes)
export function viewMedia (input) {
halfmoon.showModal('viewAnime')
const media = flattenObj(input)