feat: fullscreen nyaa block

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Miru",
-  "version": "2.10.3",
+  "version": "2.10.4",
   "author": "ThaUnknown_ <ThaUnknown@users.noreply.github.com>",
   "main": "src/index.js",
   "homepage": "https://github.com/ThaUnknown/miru#readme",

src/renderer/src/App.svelte

@@ -1,45 +1,46 @@
-<script context="module">
-  import { setContext } from 'svelte'
-  import { writable } from 'svelte/store'
-  import { alRequest } from '@/modules/anilist.js'
+<script context='module'>
+import { setContext } from 'svelte'
+import { writable } from 'svelte/store'
+import { alRequest } from '@/modules/anilist.js'
 
-  export const page = writable('home')
-  export const view = writable(null)
-  export async function handleAnime (anime) {
-    view.set(null)
-    view.set((await alRequest({ method: 'SearchIDSingle', id: anime })).data.Media)
-  }
-  window.IPC.on('open-anime', handleAnime)
+export const page = writable('home')
+export const view = writable(null)
+export async function handleAnime (anime) {
+  view.set(null)
+  view.set((await alRequest({ method: 'SearchIDSingle', id: anime })).data.Media)
+}
+window.IPC.on('open-anime', handleAnime)
 </script>
 
 <script>
-  import Sidebar from './lib/Sidebar.svelte'
-  import Router from './lib/Router.svelte'
-  import ViewAnime from './lib/ViewAnime.svelte'
-  import ViewTrailer from './lib/ViewTrailer.svelte'
-  import RSSView from './lib/RSSView.svelte'
-  import Menubar from './lib/Menubar.svelte'
-  import Toasts from './lib/Toasts.svelte'
-  import 'quartermoon/css/quartermoon-variables.css'
+import Sidebar from './lib/Sidebar.svelte'
+import Router from './lib/Router.svelte'
+import ViewAnime from './lib/ViewAnime.svelte'
+import ViewTrailer from './lib/ViewTrailer.svelte'
+import RSSView from './lib/RSSView.svelte'
+import Menubar from './lib/Menubar.svelte'
+import Toasts from './lib/Toasts.svelte'
+import 'quartermoon/css/quartermoon-variables.css'
+import NyaaBlock from './lib/NyaaBlock.svelte'
 
-  setContext('view', view)
+setContext('view', view)
 
-  const sidebar = writable(true)
-  setContext('sidebar', sidebar)
+const sidebar = writable(true)
+setContext('sidebar', sidebar)
 
-  setContext('gallery', writable(null))
+setContext('gallery', writable(null))
 
-  setContext('trailer', writable(null))
+setContext('trailer', writable(null))
 </script>
 
 <Toasts />
 <ViewAnime />
 <ViewTrailer />
 <RSSView />
-<div class="page-wrapper with-navbar with-sidebar with-transitions" data-sidebar-type="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)} />
+<div class='page-wrapper with-navbar with-sidebar with-transitions' data-sidebar-type='overlayed-sm-and-down' data-sidebar-hidden={$sidebar || null}>
+  <div class='sticky-alerts' />
+  <div class='sidebar-overlay' on:click={() => ($sidebar = !$sidebar)} />
+  <NyaaBlock />
   <Menubar />
   <Sidebar bind:page={$page} />
   <Router bind:page={$page} />

src/renderer/src/lib/NyaaBlock.svelte

@@ -0,0 +1,36 @@
+<script>
+let block = true
+
+async function testConnection () {
+  try {
+    for (let i = 0; i < 2; ++i) {
+      // fetch nyaa twice, sometimes it will go tru once if ISP is shitty
+      await fetch('https://nyaa.si')
+    }
+    block = false
+  } catch (e) {
+    console.error(e)
+    block = true
+  }
+}
+testConnection()
+
+</script>
+
+{#if block}
+  <div class='w-full left-0 z-50 position-absolute content-wrapper bg-dark-light d-flex align-items-center justify-content-center flex-column'>
+    <div>
+      <h1 class='font-weight-bold'>Could not connect to Nyaa!</h1>
+      <div class='font-size-16'>This happens either because Nyaa is down, or because your ISP blocks Nyaa, the latter being more likely.</div>
+      <div class='font-size-16'>Most features of Miru will not function correctly without being able to connect to Nyaa.</div>
+      <div class='font-size-16'>If you enable a VPN a restart might be required for it to take effect.</div>
+      <!-- eslint-disable-next-line svelte/valid-compile -->
+      <div class='font-size-16'>Visit <a class='text-primary pointer' on:click={() => { window.IPC.emit('open', 'https://thewiki.moe/en/tutorials/unblock') }}>this guide</a> for a tutorial on how to bypass ISP blocks.</div>
+      <div class='d-flex w-full mt-20 pt-20'>
+        <button class='btn ml-auto mr-5' type='button' on:click={() => { block = false }}>I Understand</button>
+        <button class='btn btn-primary mr-5' type='button' on:click={() => { window.IPC.emit('open', 'https://thewiki.moe/en/tutorials/unblock') }}>Open Guide</button>
+        <button class='btn btn-primary' type='button' on:click={testConnection}>Reconnect</button>
+      </div>
+    </div>
+  </div>
+{/if}

src/renderer/src/modules/anime.js

@@ -9,14 +9,6 @@ import { view } from '@/App.svelte'
 const torrentRx = /(^magnet:){1}|(^[A-F\d]{8,40}$){1}|(.*\.torrent$){1}/i
 const imageRx = /\.(jpeg|jpg|gif|png|webp)/i
 
-fetch('https://nyaa.si').catch(() => {
-  addToast({
-    text: 'Failed connecting to Nyaa! Visit<br><a href="https://thewiki.moe/en/tutorials/unblock">thewiki.moe/en/tutorials/unblock</a><br>for a guide on how to bypass ISP blocks.',
-    title: 'Nyaa Blocked',
-    type: 'danger'
-  })
-})
-
 window.addEventListener('paste', async e => { // WAIT image lookup on paste, or add torrent on paste
   const item = e.clipboardData.items[0]
   if (item?.type.indexOf('image') === 0) {