From b9f3042e1f953bc4d5c2ca581957ff1c5c65ae61 Mon Sep 17 00:00:00 2001
From: ThaUnknown <6506529+ThaUnknown@users.noreply.github.com>
Date: Sat, 24 Feb 2024 18:26:35 +0100
Subject: [PATCH] feat: mobile, reduce icons, make miniplayer smaller

---
 capacitor/package.json                     |  2 +-
 common/Router.svelte                       | 11 +++++-
 common/components/Navbar.svelte            | 39 +------------------
 common/components/{banner => }/Tabs.svelte |  0
 common/views/Player/Player.svelte          | 10 ++---
 common/views/Settings/Settings.svelte      | 45 +++++++++++++++++++++-
 6 files changed, 61 insertions(+), 46 deletions(-)
 rename common/components/{banner => }/Tabs.svelte (100%)

diff --git a/capacitor/package.json b/capacitor/package.json
index e526cf4..6b5c828 100644
--- a/capacitor/package.json
+++ b/capacitor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "capacitor",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "private": true,
   "scripts": {
     "build:native": "cd public/nodejs/ && npm install && docker build -t android-build:latest . && docker run -v ${PWD}:/app/ -it android-build:latest /bin/bash /app/setup-deps.sh",
diff --git a/common/Router.svelte b/common/Router.svelte
index a482bf4..4e4e557 100644
--- a/common/Router.svelte
+++ b/common/Router.svelte
@@ -6,12 +6,21 @@
   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'
+
+  const mql = matchMedia('(min-width: 769px)')
+  const isMobile = readable(!mql.matches, set => {
+    mql.addEventListener('change', ({ matches }) => set(!matches))
+  })
+
+  $: 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='35rem' maxwidth='60rem' width='300px' padding='2rem'>
+  <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>
 </div>
diff --git a/common/components/Navbar.svelte b/common/components/Navbar.svelte
index 1fa7327..ae87840 100644
--- a/common/components/Navbar.svelte
+++ b/common/components/Navbar.svelte
@@ -1,45 +1,16 @@
 <script>
   import { getContext } from 'svelte'
-  import { anilistClient } from '@/modules/anilist.js'
   import { media } from '../views/Player/MediaHandler.svelte'
-  import { platformMap } from '@/views/Settings/Settings.svelte'
-  import { toast } from 'svelte-sonner'
   import { click } from '@/modules/click.js'
-  import { logout } from './Logout.svelte'
   import IPC from '@/modules/ipc.js'
   const view = getContext('view')
   export let page
   const links = [
-    {
-      click: () => {
-        if (anilistClient.userID) {
-          $logout = true
-        } else {
-          IPC.emit('open', 'https://anilist.co/api/v2/oauth/authorize?client_id=4254&response_type=token') // Change redirect_url to miru://auth
-          if (platformMap[window.version.platform] === 'Linux') {
-            toast('Support Notification', {
-              description: "If your linux distribution doesn't support custom protocol handlers, you can simply paste the full URL into the app.",
-              duration: 300000
-            })
-          }
-        }
-      },
-      icon: 'login',
-      text: 'Login With AniList',
-      css: 'ml-auto'
-    },
-    {
-      click: () => {
-        page = 'home'
-      },
-      page: 'home',
-      icon: 'home',
-      text: 'Home'
-    },
     {
       click: () => {
         page = 'search'
       },
+      css: 'ml-auto',
       page: 'search',
       icon: 'search',
       text: 'Search'
@@ -84,14 +55,6 @@
       text: 'Settings'
     }
   ]
-  if (anilistClient.userID) {
-    anilistClient.userID.then(result => {
-      if (result?.data?.Viewer) {
-        links[0].image = result.data.Viewer.avatar.medium
-        links[0].text = 'Logout'
-      }
-    })
-  }
   function close () {
     $view = null
     page = 'home'
diff --git a/common/components/banner/Tabs.svelte b/common/components/Tabs.svelte
similarity index 100%
rename from common/components/banner/Tabs.svelte
rename to common/components/Tabs.svelte
diff --git a/common/views/Player/Player.svelte b/common/views/Player/Player.svelte
index b0f1107..f660c50 100644
--- a/common/views/Player/Player.svelte
+++ b/common/views/Player/Player.svelte
@@ -1036,11 +1036,11 @@
     <!-- eslint-disable-next-line svelte/valid-compile -->
     <div class='w-full h-full position-absolute toggle-immerse d-none' on:dblclick={toggleFullscreen} on:click|self={toggleImmerse} />
     <div class='w-full h-full position-absolute mobile-focus-target d-none' use:click={() => { page = 'player' }} />
-    <span class='material-symbols-outlined ctrl' class:text-muted={!hasLast} class:disabled={!hasLast} use:click={playLast}> skip_previous </span>
-    <span class='material-symbols-outlined ctrl' use:click={rewind}> fast_rewind </span>
-    <span class='material-symbols-outlined ctrl' data-name='playPause' use:click={playPause}> {ended ? 'replay' : paused ? 'play_arrow' : 'pause'} </span>
-    <span class='material-symbols-outlined ctrl' use:click={forward}> fast_forward </span>
-    <span class='material-symbols-outlined ctrl' class:text-muted={!hasNext} class:disabled={!hasNext} use:click={playNext}> skip_next </span>
+    <span class='d-none d-md-block material-symbols-outlined ctrl' class:text-muted={!hasLast} class:disabled={!hasLast} use:click={playLast}> skip_previous </span>
+    <span class='d-none d-md-block material-symbols-outlined ctrl' use:click={rewind}> fast_rewind </span>
+    <span class='d-none d-md-block material-symbols-outlined ctrl' data-name='playPause' use:click={playPause}> {ended ? 'replay' : paused ? 'play_arrow' : 'pause'} </span>
+    <span class='d-none d-md-block material-symbols-outlined ctrl' use:click={forward}> fast_forward </span>
+    <span class='d-none d-md-block material-symbols-outlined ctrl' class:text-muted={!hasNext} class:disabled={!hasNext} use:click={playNext}> skip_next </span>
     <div class='position-absolute bufferingDisplay' />
     {#if currentSkippable}
       <button class='skip btn text-dark position-absolute bottom-0 right-0 mr-20 mb-5 font-weight-bold' use:click={skip}>
diff --git a/common/views/Settings/Settings.svelte b/common/views/Settings/Settings.svelte
index bd1b765..6fc7c97 100644
--- a/common/views/Settings/Settings.svelte
+++ b/common/views/Settings/Settings.svelte
@@ -50,6 +50,8 @@
   import TorrentSettings from './TorrentSettings.svelte'
   import InterfaceSettings from './InterfaceSettings.svelte'
   import AppSettings from './AppSettings.svelte'
+  import { anilistClient } from '@/modules/anilist.js'
+  import { logout } from '@/components/Logout.svelte'
   import smoothScroll from '@/modules/scroll.js'
 
   const groups = {
@@ -77,6 +79,20 @@
   function pathListener (data) {
     $settings.torrentPath = data
   }
+
+  function loginButton () {
+    if (anilistClient.userID) {
+      $logout = true
+    } else {
+      IPC.emit('open', 'https://anilist.co/api/v2/oauth/authorize?client_id=4254&response_type=token') // Change redirect_url to miru://auth
+      if (platformMap[window.version.platform] === 'Linux') {
+        toast('Support Notification', {
+          description: "If your linux distribution doesn't support custom protocol handlers, you can simply paste the full URL into the app.",
+          duration: 300000
+        })
+      }
+    }
+  }
   onDestroy(() => {
     IPC.off('path', pathListener)
   })
@@ -99,7 +115,25 @@
       <div class='pointer my-5 rounded' tabindex='0' role='button' use:click={() => IPC.emit('open', 'https://github.com/sponsors/ThaUnknown/')}>
         <div class='px-20 py-10 d-flex'>
           <span class='material-symbols-outlined font-size-24 pr-10 d-inline-flex justify-content-center align-items-center'>favorite</span>
-          <div class='font-weight-bold font-size-16'>Donate</div>
+          <div class='font-size-16'>Donate</div>
+        </div>
+      </div>
+      <div class='pointer my-5 rounded' use:click={loginButton}>
+        <div class='px-20 py-10 d-flex'>
+          {#if anilistClient.userID}
+            {#await anilistClient.userID}
+              <span class='material-symbols-outlined font-size-24 pr-10 d-inline-flex justify-content-center align-items-center'>login</span>
+              <div class='font-size-16'>Login With AniList</div>
+            {:then result}
+              <span class='material-symbols-outlined rounded mr-10'>
+                <img src={result.data.Viewer.avatar.medium} class='h-30 rounded' alt='logo' />
+              </span>
+              <div class='font-size-16 login-image-text'>Logout</div>
+            {/await}
+          {:else}
+            <span class='material-symbols-outlined font-size-24 pr-10 d-inline-flex justify-content-center align-items-center'>login</span>
+            <div class='font-size-16'>Login With AniList</div>
+          {/if}
         </div>
       </div>
       <p class='text-muted px-20 py-10 m-0 mt-md-auto'>Restart may be required for some settings to take effect.</p>
@@ -208,6 +242,15 @@
   .settings :global(select.form-control:invalid) {
     color: var(--dm-input-placeholder-text-color);
   }
+  .login-image-text {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .h-30 {
+    width: 3rem;
+    height: 3rem;
+  }
   .settings :global(input:not(:focus):invalid) {
     box-shadow: 0 0 0 0.2rem var(--danger-color) !important;
   }