MyAnimeList Support, Profiles, and List Editor.

capacitor/src/capacitor.js

@@ -85,6 +85,7 @@ IPC.on('dialog', async () => {
 // schema: miru://key/value
 const protocolMap = {
   auth: token => sendToken(token),
+  malauth: token => sendMalToken(token),
   anime: id => IPC.emit('open-anime', id),
   w2g: link => IPC.emit('w2glink', link),
   schedule: () => IPC.emit('schedule'),
@@ -106,6 +107,17 @@ function sendToken (line) {
   }
 }
 
+function sendMalToken (line) {
+  let code = line.split('code=')[1].split('&state')[0]
+  let state = line.split('&state=')[1]
+  if (code && state) {
+    if (code.endsWith('/')) code = code.slice(0, -1)
+    if (state.endsWith('/')) state = state.slice(0, -1)
+    if (state.includes('%')) state = decodeURIComponent(state)
+    IPC.emit('maltoken', code, state)
+  } 
+}
+
 App.getLaunchUrl().then(res => {
   if (location.hash !== '#skipAlLogin') {
     location.hash = '#skipAlLogin'

common/App.svelte

@@ -6,6 +6,7 @@
   import { rss } from './views/TorrentSearch/TorrentModal.svelte'
 
   export const page = writable('home')
+  export const overlay = writable('none')
   export const view = writable(null)
   export async function handleAnime (anime) {
     view.set(null)
@@ -55,28 +56,29 @@
   import TorrentModal from './views/TorrentSearch/TorrentModal.svelte'
   import Menubar from './components/Menubar.svelte'
   import { Toaster } from 'svelte-sonner'
-  import Logout from './components/Logout.svelte'
+  import Profiles from './components/Profiles.svelte'
   import Navbar from './components/Navbar.svelte'
 
   setContext('view', view)
 </script>
 
 <div class='page-wrapper with-transitions bg-dark position-relative' data-sidebar-type='overlayed-all'>
   <Menubar bind:page={$page} />
-  <ViewAnime />
-  <Logout />
   <Sidebar bind:page={$page} />
-  <Toaster visibleToasts={6} position='top-right' theme='dark' richColors duration={10000} closeButton />
-  <div class='overflow-hidden content-wrapper h-full z-10'>
-    <TorrentModal />
-    <Router bind:page={$page} />
+  <div class='overflow-hidden content-wrapper h-full'>
+    <Toaster visibleToasts={6} position='top-right' theme='dark' richColors duration={10000} closeButton />
+    <Profiles />
+    <ViewAnime bind:overlay={$overlay} />
+    <TorrentModal bind:overlay={$overlay} />
+    <Router bind:page={$page} bind:overlay={$overlay} />
   </div>
   <Navbar bind:page={$page} />
 </div>
 
 <style>
   .content-wrapper {
     will-change: width;
+    white-space: pre-line;
     top: 0 !important;
   }
 

common/Router.svelte

@@ -1,4 +1,6 @@
 <script context='module'>
+  import { readable } from 'simple-store-svelte'
+
   const mql = matchMedia('(min-width: 769px)')
   const isMobile = readable(!mql.matches, set => {
     const check = ({ matches }) => set(!matches)
@@ -15,17 +17,17 @@
   import Miniplayer from 'svelte-miniplayer'
   import Search from './views/Search.svelte'
   import AiringSchedule from './views/AiringSchedule.svelte'
-  import { readable } from 'simple-store-svelte'
 
   export let page = 'home'
+  export let overlay = 'none'
 
   $: minwidth = $isMobile ? '200px' : '35rem'
   $: maxwidth = $isMobile ? '200px' : '60rem'
 </script>
 
 <div class='w-full h-full position-absolute overflow-hidden'>
-  <Miniplayer active={page !== 'player'} class='bg-dark-light z-10 {page === 'player' ? 'h-full' : ''}' {minwidth} {maxwidth} width='300px' padding='2rem' resize={!$isMobile}>
-    <MediaHandler miniplayer={page !== 'player'} bind:page />
+  <Miniplayer active={(page !== 'player' && overlay !== 'torrent') || overlay === 'viewanime'} class='bg-dark-light z-100 {(page === "player" && overlay !== "viewanime") ? "h-full" : ""}' {minwidth} {maxwidth} width='300px' padding='2rem' resize={!$isMobile}>
+    <MediaHandler miniplayer={page !== 'player' || overlay === 'viewanime'} bind:page bind:overlay />
   </Miniplayer>
 </div>
 {#if page === 'settings'}

common/components/Navbar.svelte

@@ -1,6 +1,8 @@
 <script>
   import { getContext } from 'svelte'
-  import { media } from '../views/Player/MediaHandler.svelte'
+  import { rss } from '@/views/TorrentSearch/TorrentModal.svelte'
+  import { media } from '@/views/Player/MediaHandler.svelte'
+  import { profileView } from './Profiles.svelte'
   import { click } from '@/modules/click.js'
   import IPC from '@/modules/ipc.js'
   import NavbarLink from './NavbarLink.svelte'
@@ -17,25 +19,27 @@
 <nav class='navbar navbar-fixed-bottom d-block d-md-none border-0 bg-dark'>
   <div class='navbar-menu h-full d-flex flex-row justify-content-center align-items-center m-0 pb-5' class:animate={page !== 'player'}>
     <img src='./logo_filled.png' class='w-50 h-50 m-10 pointer p-5' alt='ico' use:click={close} />
-    <NavbarLink click={() => { page = 'search' }} _page='search' css='ml-auto' icon='search' {page} let:active>
-      <MagnifyingGlass size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' stroke-width={active ? '2' : '0'} stroke='currentColor' />
+    <NavbarLink click={() => { page = 'search'; if ($view) $view = null }} _page='search' css='ml-auto' icon='search' {page} overlay={($view || $profileView || $rss) && 'active'} let:active>
+      <MagnifyingGlass size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' stroke-width={active ? '1' : '0'} stroke='currentColor' />
     </NavbarLink>
-    <NavbarLink click={() => { page = 'schedule' }} _page='schedule' icon='schedule' {page} let:active>
-      <Clock size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
+    <NavbarLink click={() => { page = 'schedule' }} _page='schedule' icon='schedule' {page} overlay={($view || $profileView || $rss) && 'active'} let:active>
+      <Clock size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3' : '2'} />
     </NavbarLink>
     {#if $media?.media}
-      <NavbarLink click={() => { $view = $media.media }} icon='queue_music' {page} let:active>
-        <ListVideo size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
+      {@const currentMedia = $view}
+      {@const active = $view && !$profileView && 'active'}
+      <NavbarLink click={() => { $view = (currentMedia?.id === $media.media.id && active ? null : $media.media) }} icon='queue_music' {page} overlay={active} nowPlaying={$view === $media.media} let:active>
+        <ListVideo size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3' : '2'} />
       </NavbarLink>
     {/if}
-    <NavbarLink click={() => { page = 'watchtogether' }} _page='watchtogether' icon='groups' {page} let:active>
-      <Users size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
+    <NavbarLink click={() => { page = 'watchtogether' }} _page='watchtogether' icon='groups' {page} overlay={($view || $profileView || $rss) && 'active'} let:active>
+      <Users size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3' : '2'} />
     </NavbarLink>
     <NavbarLink click={() => { IPC.emit('open', 'https://github.com/sponsors/ThaUnknown/') }} icon='favorite' css='ml-auto donate' {page} let:active>
-      <Heart size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded donate' strokeWidth={active ? '3.5' : '2'} fill='currentColor' />
+      <Heart size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded donate' strokeWidth={active ? '3' : '2'} fill='currentColor' />
     </NavbarLink>
-    <NavbarLink click={() => { page = 'settings' }} _page='settings' icon='settings' {page} let:active>
-      <Settings size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
+    <NavbarLink click={() => { page = 'settings' }} _page='settings' icon='settings' {page} overlay={($view || $profileView || $rss) && 'active'} let:active>
+      <Settings size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3' : '2'} />
     </NavbarLink>
   </div>
 </nav>

common/components/NavbarLink.svelte

@@ -7,14 +7,16 @@
   export let _page = ''
   export let css = ''
   export let icon = ''
+  export let nowPlaying = false
+  export let overlay = ''
 </script>
 
 <div
   class='navbar-link navbar-link-with-icon pointer overflow-hidden {css}'
-  use:click={_click}>
+  use:click={() => { if (!icon.includes("favorite")) { window.dispatchEvent(new Event('overlay-check')) }  _click() } }>
 
   <span class='rounded d-flex'>
-    <slot active={page === _page}>{icon}</slot>
+    <slot active={(page === _page && overlay !== 'active') || (overlay === 'active' && nowPlaying)}>{icon}</slot>
   </span>
 </div>