Creepso/migu
1
0
Fork 0
mirror of https://github.com/NoCrypt/migu.git synced 2026-08-16 12:24:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

get rid of halfmoonjs

Browse source
This commit is contained in:
ThaUnknown 2022-03-11 19:13:07 +01:00
parent 49cc6bb956
commit cc57808a05
6 changed files with 49 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/renderer/index.html
View file

@ -11,7 +11,6 @@
<link href='/lib/halfmoon.css' rel='stylesheet'>
<link href="/lib/Material-Icons.css" rel="stylesheet">
<script defer src='/lib/halfmoon.js'></script>
<script defer type="module" src="/src/main.js"></script>
</head>

11
src/renderer/public/lib/halfmoon.js
View file

File diff suppressed because one or more lines are too long

26
src/renderer/src/App.svelte
View file

@ -2,18 +2,26 @@
import Sidebar from './lib/Sidebar.svelte'
import Router from './lib/Router.svelte'
import ViewAnime from './lib/ViewAnime.svelte'
import { setContext } from 'svelte'
import { writable } from 'svelte/store'
let view = writable(null)
setContext('view', view)
let page = 'home'
let sidebar = writable(true)
setContext('sidebar', sidebar)
</script>
<ViewAnime>
<div class="page-wrapper with-sidebar" data-sidebar-type="full-height overlayed-sm-and-down" data-sidebar-hidden="hidden">
<div class="sticky-alerts" />
<!-- svelte-ignore missing-declaration -->
<div class="sidebar-overlay" on:click={halfmoon.toggleSidebar.bind(halfmoon)} />
<Sidebar bind:page />
<Router bind:page />
</div>
</ViewAnime>
<ViewAnime />
<div class="page-wrapper with-sidebar" data-sidebar-type="full-height overlayed-sm-and-down" data-sidebar-hidden={$sidebar || null}>
<div class="sticky-alerts" />
<!-- svelte-ignore missing-declaration -->
<div class="sidebar-overlay" on:click={() => ($sidebar = !$sidebar)} />
<Sidebar bind:page />
<Router bind:page />
</div>
<style>
:root {

6
src/renderer/src/lib/Sidebar.svelte
View file

@ -1,9 +1,13 @@
<script>
import { getContext } from 'svelte'
import { alID } from '@/modules/anilist.js'
const sidebar = getContext('sidebar')
export let page
const links = [
{
click: halfmoon.toggleSidebar.bind(halfmoon),
click: ()=>{
$sidebar = !$sidebar
},
image: 'logo_cut.png',
icon: 'menu',
text: 'Open Menu'

91
src/renderer/src/lib/ViewAnime.svelte
View file

@ -1,9 +1,8 @@
<script>
import { setContext } from 'svelte'
import { writable } from 'svelte/store'
import { getContext } from 'svelte'
import { countdown } from '@/modules/util.js'
let view = writable(null)
setContext('view', view)
let view = getContext('view')
$: console.log($view)
function close() {
$view = null
@ -13,7 +12,7 @@
{ property: 'genres', label: 'Genres', icon: 'theater_comedy' },
{ property: 'season', label: 'Season', icon: 'spa', custom: 'property' },
{ property: 'episodes', label: 'Episodes', icon: 'theaters', custom: 'property' },
{ property: 'duration', label: 'Duration', icon: 'timer' },
{ property: 'duration', label: 'Duration', icon: 'timer', custom: 'property' },
{ property: 'format', label: 'Format', icon: 'monitor' },
{ property: 'status', label: 'Status', icon: 'live_tv' },
{ property: 'nodes', label: 'Studio', icon: 'business' },
@ -24,10 +23,15 @@
{ property: 'native', label: 'Native', icon: '語', custom: 'icon' }
]
function getCustomProperty(detail, media) {
if (detail.property === 'episodes' && media.progress) {
return `Watched <b>${media.progress}</b> of <b>${media.episodes}</b>`
if (detail.property === 'episodes') {
if (media.progress) {
return `Watched <b>${media.progress}</b> of <b>${media.episodes}</b>`
}
return `${media.episodes} Episodes`
} else if (detail.property === 'averageScore') {
return media.averageScore + '%'
} else if (detail.property === 'duration') {
return `${media.duration} minutes`
} else if (detail.property === 'season') {
return [media.season?.toLowerCase(), media.seasonYear].filter(f => f).join(' ')
} else if (detail.property === 'episode') {
@ -36,6 +40,14 @@
return media[detail.property]
}
}
function getProperty(property, media) {
if (property === 'episode') {
return media.nextAiringEpisode?.episode
} else if (property === 'english' || property === 'romaji' || property === 'native') {
return media.title[property]
}
return media[property]
}
</script>
<div class="modal modal-full" class:show={$view} id="viewAnime" tabindex="-1" role="dialog">
@ -45,7 +57,7 @@
<span>×</span>
</button>
<div class="h-md-half w-full position-relative z-20">
<div class="h-full w-full position-absolute bg-dark-light banner" style:--bannerurl={`url('${$view.bannerImage||''}')`}/>
<div class="h-full w-full position-absolute bg-dark-light banner" style:--bannerurl={`url('${$view.bannerImage || ''}')`} />
<div class="d-flex h-full top w-full">
<div class="container-xl w-full">
<div class="row d-flex justify-content-end flex-row h-full px-20 pt-20 px-xl-0">
@ -94,58 +106,10 @@
</div>
<div class="col-md-4 d-flex justify-content-end flex-column">
<div class="d-flex flex-column flex-wrap">
<div class="btn-group mb-5" role="group">
<button class="btn btn-primary d-flex align-items-center font-weight-bold font-size-24 h-50" type="button">
<span class="material-icons mr-10 font-size-24 w-30"> play_arrow </span>
<span>Play</span>
</button>
<div class="btn-group dropdown with-arrow" role="group">
<button
class="btn btn-square btn-primary d-flex h-50 w-50 justify-content-center"
data-toggle="dropdown"
type="button"
aria-haspopup="true"
id="dropdown-play"
aria-expanded="false">
<span class="material-icons">expand_more</span>
<span class="sr-only">Open dropdown</span>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-play">
<div class="input-group w-250 form-control-lg p-0">
<div class="input-group-prepend">
<span class="input-group-text">Episode</span>
</div>
<input type="number" value="1" min="1" max="30" class="form-control text-right form-control-lg" />
</div>
</div>
</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">
<span class="material-icons mr-10 font-size-18 w-30"> get_app </span>
Download
</button>
<div class="btn-group dropdown with-arrow" role="group">
<button
class="btn btn-square d-flex w-50 justify-content-center border-0"
data-toggle="dropdown"
type="button"
id="dropdown-download"
aria-haspopup="true"
aria-expanded="false">
<span class="material-icons">expand_more</span>
<span class="sr-only">Open dropdown</span>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-download">
<div class="input-group w-250 form-control-lg p-0">
<div class="input-group-prepend">
<span class="input-group-text">Episode</span>
</div>
<input type="number" value="1" min="1" max="30" class="form-control text-right form-control-lg" />
</div>
</div>
</div>
</div>
<button class="btn btn-primary d-flex align-items-center font-weight-bold font-size-24 h-50 mb-5" type="button">
<span class="material-icons mr-10 font-size-24 w-30"> play_arrow </span>
<span>Play</span>
</button>
<button class="btn d-flex align-items-center mb-5 font-weight-bold font-size-16">
<span class="material-icons mr-10 font-size-18 w-30"> live_tv </span>
Trailer
@ -179,10 +143,10 @@
<h1 class="title font-weight-bold text-white">Details</h1>
<div class="card m-0 px-20 py-10 d-flex flex-md-column flex-row overflow-x-auto text-capitalize" id="viewDetails">
{#each detailsMap as detail}
{@const property = $view[detail.property]}
{@const property = getProperty(detail.property, $view)}
{#if property}
<div class="d-flex flex-row px-10 py-5">
<div class={detail.custom === 'icon' ? 'd-flex align-items-center text-nowrap font-size-12 font-weight-bold' : 'material-icons mr-10 font-size-24'}>
<div class={'mr-10 ' + (detail.custom === 'icon' ? 'd-flex align-items-center text-nowrap font-size-20 font-weight-bold' : 'material-icons font-size-24')}>
{detail.icon}
</div>
<div class="d-flex flex-column justify-content-center text-nowrap">
@ -207,13 +171,12 @@
</div>
{/if}
</div>
<slot />
<style>
.banner {
background: no-repeat center center;
background-size: cover;
background-image: linear-gradient(0deg, rgba(17,20,23,1) 0%, rgba(17,20,23,0.80) 25%, rgba(17,20,23,0.40) 50%, rgba(37,40,44,0) 100%), var(--bannerurl) !important
background-image: linear-gradient(0deg, rgba(17, 20, 23, 1) 0%, rgba(17, 20, 23, 0.8) 25%, rgba(17, 20, 23, 0.4) 50%, rgba(37, 40, 44, 0) 100%), var(--bannerurl) !important;
}
.top {

11
src/renderer/src/modules/util.js
View file

@ -1,14 +1,3 @@
/* global halfmoon */
halfmoon.showModal = id => {
const t = document.getElementById(id)
t && t.classList.add('show')
}
halfmoon.hideModal = id => {
const t = document.getElementById(id)
t && t.classList.remove('show')
}
export function countdown (s) {
const d = Math.floor(s / (3600 * 24))
s -= d * 3600 * 24