From 134c2580c901c54a3e5a774c53fe6cd5dbe96a2f Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sun, 30 Jun 2024 16:46:54 -0500
Subject: [PATCH] Update:Custom error page for nuxt

---
 client/layouts/error.vue     | 45 ++++++++++++++++++++++++++++++++++++
 client/pages/share/_slug.vue |  2 +-
 2 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 client/layouts/error.vue

diff --git a/client/layouts/error.vue b/client/layouts/error.vue
new file mode 100644
index 00000000..513b51aa
--- /dev/null
+++ b/client/layouts/error.vue
@@ -0,0 +1,45 @@
+<template>
+  <div id="page-wrapper" class="text-white max-h-screen h-screen overflow-hidden">
+    <div class="absolute z-0 top-0 left-0 px-6 py-3">
+      <div class="flex items-center">
+        <nuxt-link to="/">
+          <img src="~static/icon.svg" alt="Audiobookshelf Logo" class="w-10 min-w-10 h-10" />
+        </nuxt-link>
+        <nuxt-link to="/">
+          <h1 class="text-xl ml-4 hover:underline">audiobookshelf</h1>
+        </nuxt-link>
+      </div>
+    </div>
+
+    <div class="w-full h-full flex items-center justify-center">
+      <div class="w-full p-2 sm:p-4 md:p-8">
+        <div class="w-full p-4">
+          <div class="text-center">
+            <h1 class="text-4xl font-semibold text-red-500 mb-4">{{ statusCode }}</h1>
+            <p class="text-xl font-semibold">{{ message }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  layout: 'blank',
+  props: {
+    error: {
+      type: Object,
+      default: null
+    }
+  },
+  computed: {
+    statusCode() {
+      return (this.error && this.error.statusCode) || 500
+    },
+    message() {
+      return this.error.message || 'Unknown error'
+    }
+  }
+}
+</script>
diff --git a/client/pages/share/_slug.vue b/client/pages/share/_slug.vue
index 14d98c3f..acc099eb 100644
--- a/client/pages/share/_slug.vue
+++ b/client/pages/share/_slug.vue
@@ -31,7 +31,7 @@ export default {
       return null
     })
     if (!mediaItemShare) {
-      return error({ statusCode: 404, message: 'Not found' })
+      return error({ statusCode: 404, message: 'Media item not found or expired' })
     }
 
     return {