Add new context menu option and add sub/dub button

Layendan · Jan 4, 2024 · 82fe09a · 82fe09a
1 parent 3048a6f
commit 82fe09a
Show file tree

Hide file tree

Showing 21 changed files with 733 additions and 611 deletions.
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -12,7 +12,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        platform: [macos-latest, ubuntu-20.04, windows-latest]
+        platform: [macos-latest, windows-latest]
 
     runs-on: ${{ matrix.platform }}
     steps:

diff --git a/package.json b/package.json
@@ -28,12 +28,12 @@
     "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "@tauri-apps/cli": "^1.5.9",
     "@types/culori": "^2.0.4",
-    "@types/node": "^20.10.5",
+    "@types/node": "^20.10.6",
     "@types/nprogress": "^0.2.3",
-    "@typescript-eslint/eslint-plugin": "^6.16.0",
-    "@typescript-eslint/parser": "^6.16.0",
+    "@typescript-eslint/eslint-plugin": "^6.17.0",
+    "@typescript-eslint/parser": "^6.17.0",
     "autoprefixer": "^10.4.16",
-    "daisyui": "^4.4.24",
+    "daisyui": "^4.5.0",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte3": "^4.0.0",
@@ -43,7 +43,7 @@
     "postcss": "^8.4.32",
     "prettier": "^3.1.1",
     "prettier-plugin-svelte": "^3.1.2",
-    "prettier-plugin-tailwindcss": "^0.5.9",
+    "prettier-plugin-tailwindcss": "^0.5.10",
     "svelte": "^4.2.8",
     "svelte-fa": "^3.0.4",
     "svelte-infinite-scroll": "^2.0.1",
@@ -63,7 +63,7 @@
     "tauri-plugin-clipboard-api": "^0.5.5",
     "tauri-plugin-context-menu": "^0.7.0",
     "tauri-plugin-store-api": "https://github.com/tauri-apps/tauri-plugin-store",
-    "vidstack": "^1.1.11"
+    "vidstack": "^1.9.8"
   },
   "engines": {
     "yarn": ">=1.22.19",

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
diff --git a/src-tauri/tauri.macos.conf.json b/src-tauri/tauri.macos.conf.json
@@ -8,7 +8,7 @@
 	},
 	"package": {
 		"productName": "Layendanimator",
-		"version": "0.1.48"
+		"version": "0.1.49"
 	},
 	"tauri": {
 		"allowlist": {

diff --git a/src-tauri/tauri.windows.conf.json b/src-tauri/tauri.windows.conf.json
@@ -8,7 +8,7 @@
     },
     "package": {
         "productName": "Layendanimator",
-        "version": "0.1.48"
+        "version": "0.1.49"
     },
     "tauri": {
         "allowlist": {

diff --git a/src/lib/components/AnimeCard.svelte b/src/lib/components/AnimeCard.svelte
@@ -38,7 +38,7 @@
     id={anime.id}
     style:--anime-color={anime.color ?? 'oklch(var(--a))'}
     class="group indicator flex w-[168px] flex-col gap-2 focus-visible:outline-transparent lg:w-[210px]"
-    on:contextmenu={contextMenu}
+    on:contextmenu|stopPropagation|preventDefault={contextMenu}
   >
     <div
       class="group-one card relative m-0 aspect-[0.7/1] h-[240px] w-[168px] rounded-md bg-base-300 p-0 ring ring-transparent ring-offset-2 ring-offset-transparent transition-all duration-200 hover:-translate3d-y-1 group-focus-visible:ring-[--anime-color] group-focus-visible:ring-offset-base-200 lg:h-[300px] lg:w-[210px]"

diff --git a/src/lib/components/AnimePage.svelte b/src/lib/components/AnimePage.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
+  import { invalidate } from '$app/navigation';
   import AnimeCard from '$lib/components/AnimeCard.svelte';
   import CharacterCard from '$lib/components/CharacterCard.svelte';
   import EpisodeCarousel from '$lib/components/EpisodeCarousel.svelte';
   import PlayNextButton from '$lib/components/PlayNextButton.svelte';
   import ScrollCarousel from '$lib/components/ScrollCarousel.svelte';
   import ScrollHeader from '$lib/components/ScrollHeader.svelte';
   import TotalAnimeInfo from '$lib/components/TotalAnimeInfo.svelte';
+  import { animeCache } from '$lib/model/cache';
   import type { Anime } from '$lib/model/classes/Anime';
   import { downloading } from '$lib/model/downloads';
   import { settings } from '$lib/model/settings';
@@ -20,7 +22,8 @@
     faClock,
     faCloudDownload,
     faDownload,
-    faFilter
+    faFilter,
+    faLanguage
   } from '@fortawesome/free-solid-svg-icons';
   import Fa from 'svelte-fa';
 
@@ -36,6 +39,11 @@
     a => a.type !== 'MANGA' && a.type !== 'NOVEL' && a.type !== 'ONE_SHOT'
   );
   $: lastWatched = $watching[`${data.source.id}/${data.id}`];
+  $: filteredEpisodes = sortedEpisodes.filter(({ id }) => {
+    return (
+      (lastWatched?.watchedEpisodes[id]?.percentage ?? 0) < watchPercentage
+    );
+  });
 
   const maxRelations = 15;
   const watchPercentage = 0.8;
@@ -51,14 +59,7 @@
   <!-- EPISODES -->
   <EpisodeCarousel
     anime={data}
-    episodes={$settings.showWatchedEpisodes
-      ? sortedEpisodes
-      : sortedEpisodes.filter(({ id }) => {
-          return (
-            (lastWatched?.watchedEpisodes[id]?.percentage ?? 0) <
-            watchPercentage
-          );
-        })}
+    episodes={$settings.showWatchedEpisodes ? sortedEpisodes : filteredEpisodes}
     href={showDownload
       ? undefined
       : `/library/downloads/${data.source.id}/${data.id}`}
@@ -70,15 +71,15 @@
         >
           Episodes
         </h1>
-        {#if data.episodes.length > 0}
+        {#if sortedEpisodes.length > 0}
           <PlayNextButton
             anime={data}
             {watchPercentage}
             preHref={showDownload ? '' : '/library/downloads'}
           />
         {/if}
       </div>
-      {#if data.episodes.length > 0}
+      {#if sortedEpisodes.length > 0}
         <div class="mb-4 flex items-center gap-1">
           {#if showDownload && window?.__TAURI__}
             <div
@@ -148,6 +149,8 @@
                 <li class="m-1">
                   <button
                     class="btn btn-outline flex w-full flex-row items-center gap-1 text-base-content"
+                    class:hidden={!$settings.showWatchedEpisodes &&
+                      filteredEpisodes.length === 0}
                     on:click={() =>
                       ($settings.isEpisodeAscending =
                         !$settings.isEpisodeAscending)}
@@ -181,6 +184,8 @@
                     class="btn btn-outline flex w-full flex-row items-center gap-2 text-base-content"
                     on:click={() =>
                       ($settings.showThumbnail = !$settings.showThumbnail)}
+                    class:hidden={!$settings.showWatchedEpisodes &&
+                      filteredEpisodes.length === 0}
                   >
                     <input
                       type="checkbox"
@@ -191,6 +196,22 @@
                     Thumbnails
                   </button>
                 </li>
+                {#if showDownload}
+                  <li class="m-1">
+                    <button
+                      class="btn btn-outline flex w-full flex-row items-center gap-2 text-base-content"
+                      on:click={() => {
+                        $settings.isSubtitles = !$settings.isSubtitles;
+                        data.episodes = [];
+                        animeCache.delete(`${data.source.id}/${data.id}`);
+                        invalidate(`${data.source.id}:${data.id}`);
+                      }}
+                    >
+                      <Fa icon={faLanguage} />
+                      {$settings.isSubtitles ? 'Subbed' : 'Dubbed'} Episodes
+                    </button>
+                  </li>
+                {/if}
               </ul>
             </div>
           </div>

diff --git a/src/lib/components/Carousel.svelte b/src/lib/components/Carousel.svelte
@@ -103,7 +103,7 @@
   class="relative h-[60vh] w-full overflow-hidden bg-base-100/30 will-change-transform motion-reduce:!translate3d-y-0"
   class:!translate3d-y-0={!$settings.parallax}
   style="transform: translate3d(0, {$scrollY / 1.5}px, 0);"
-  on:contextmenu={contextMenu}
+  on:contextmenu|stopPropagation|preventDefault={contextMenu}
 >
   {#key animeIdx}
     <img

diff --git a/src/lib/components/EpisodeCard.svelte b/src/lib/components/EpisodeCard.svelte
@@ -87,7 +87,7 @@
   class="group-one indicator flex w-[168px] select-none flex-col gap-2 focus-visible:outline-transparent lg:w-[210px]"
   class:w-[210px]={!$settings.showThumbnail}
   data-sveltekit-replacestate={replaceState ? '' : 'off'}
-  on:contextmenu={contextMenu}
+  on:contextmenu|stopPropagation|preventDefault={contextMenu}
 >
   {#if $settings.showThumbnail}
     <div

diff --git a/src/lib/components/ExternalAnimeCard.svelte b/src/lib/components/ExternalAnimeCard.svelte
@@ -34,7 +34,7 @@
   target="_blank"
   rel="noopener noreferrer nofollow"
   class="group"
-  on:contextmenu={contextMenu}
+  on:contextmenu|stopPropagation|preventDefault={contextMenu}
 >
   <img
     src={imageLoaded ? anime.image : '/assets/loading_failure.jpeg'}

diff --git a/src/lib/components/NavBar.svelte b/src/lib/components/NavBar.svelte
@@ -125,7 +125,8 @@
         class:transparent-base={id === $page.params.source}
         aria-label="Change Source"
         on:click={() => source.set(provider)}
-        on:contextmenu={() => contextMenu(provider)}
+        on:contextmenu|stopPropagation|preventDefault={() =>
+          contextMenu(provider)}
       >
         <img
           src={provider.logo}