From 801e5f315b85ad468ca1593974383d545e5f6b0f Mon Sep 17 00:00:00 2001
From: ysr9029 <56439343+Nich87@users.noreply.github.com>
Date: Tue, 26 Sep 2023 21:07:10 +0900
Subject: [PATCH] feat:show Modal if can't download videos for region

https://github.com/Nich87/ytd-kit/issues/1#issuecomment-1734031543
---
 src/lib/components/Modals/RegionError.svelte | 23 ++++++++++++++++++++
 src/lib/store.ts                             |  5 +++++
 src/routes/+page.svelte                      |  5 +++--
 3 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/components/Modals/RegionError.svelte

diff --git a/src/lib/components/Modals/RegionError.svelte b/src/lib/components/Modals/RegionError.svelte
new file mode 100644
index 0000000..4990c77
--- /dev/null
+++ b/src/lib/components/Modals/RegionError.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Modal, Button } from 'flowbite-svelte';
+	import { ExclamationCircleOutline } from 'flowbite-svelte-icons';
+	import { popupRegionErrorModal, togglepopupRegionErrorModal } from '$lib/store';
+</script>
+
+{#if popupRegionErrorModal}
+	<Modal
+		bind:open={$popupRegionErrorModal}
+		on:close={() => togglepopupRegionErrorModal()}
+		size="xs"
+		autoclose
+		outsideclose
+	>
+		<div class="text-center">
+			<ExclamationCircleOutline class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" />
+			<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
+				この動画はあなたの地域では利用出来ません。
+			</h3>
+			<Button color="red" class="mr-2">OK</Button>
+		</div>
+	</Modal>
+{/if}
diff --git a/src/lib/store.ts b/src/lib/store.ts
index 51acfc5..85a90c6 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -3,6 +3,7 @@ import { writable } from 'svelte/store';
 export const isLoading = writable(false);
 export const popupFetchErrorModal = writable(false);
 export const popupUrlErrorModal = writable(false);
+export const popupRegionErrorModal = writable(false);
 
 export const toggleLoadingState = () => {
 	isLoading.update((value) => !value);
@@ -15,3 +16,7 @@ export const togglepopupFetchModal = () => {
 export const togglepopupUrlErrorModal = () => {
 	popupUrlErrorModal.update((value) => !value);
 };
+
+export const togglepopupRegionErrorModal = () => {
+	popupRegionErrorModal.update((value) => !value);
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index bc861cb..e82f9e3 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -11,7 +11,7 @@
 		Card
 	} from 'flowbite-svelte';
 	import { VideoSolid, FileMusicSolid, SearchOutline } from 'flowbite-svelte-icons';
-	import { toggleLoadingState, togglepopupUrlErrorModal, togglepopupFetchModal } from '$lib/store';
+	import { toggleLoadingState, togglepopupUrlErrorModal, togglepopupFetchModal,togglepopupRegionErrorModal } from '$lib/store';
 	import { parseVideoUrl } from '$lib/parseURL';
 	import type { VideoInfo, PlaylistInfo, SearchInfo } from '$lib/types/index';
 	import Header from 'components/Header.svelte';
@@ -91,7 +91,8 @@
 		});
 		toggleLoadingState();
 		if (response.status !== 200) {
-			togglepopupFetchModal();
+			let json = await response.json();
+			json.errorobj.info.error_type === "UNPLAYABLE" ? togglepopupRegionErrorModal() : togglepopupFetchModal();
 			return console.error(response.status, response);
 		}