From bab4b44133b3abed585e2b3357e9c745c9ff3cd9 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Tue, 16 Jun 2026 08:39:19 +0200
Subject: [PATCH] feat(core): add error message to error page

---
 src/core/CoreProvider.tsx  |  2 +-
 src/core/Error/Error.tsx   | 15 ++++++++++++---
 src/core/Error/styles.less | 31 ++++++++++++++++++++++++-------
 3 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/src/core/CoreProvider.tsx b/src/core/CoreProvider.tsx
index 5fea324cb..061ac4339 100644
--- a/src/core/CoreProvider.tsx
+++ b/src/core/CoreProvider.tsx
@@ -89,7 +89,7 @@ const Core = (props: Props) => {
 
     return (
         <CoreContext.Provider value={{ transport, on, off }}>
-            { error && !ready && <Error /> }
+            { error && !ready && <Error message={error.message} /> }
             { ready && !error && props.children }
         </CoreContext.Provider>
     );
diff --git a/src/core/Error/Error.tsx b/src/core/Error/Error.tsx
index fecfafc45..dd46968ba 100644
--- a/src/core/Error/Error.tsx
+++ b/src/core/Error/Error.tsx
@@ -6,7 +6,11 @@ import Image from 'stremio/components/Image';
 import Button from 'stremio/components/Button';
 import styles from './styles.less';
 
-const Error = () => {
+type Props = {
+    message: string,
+};
+
+const Error = ({ message }: Props) => {
     const { t } = useTranslation();
 
     const clearData = React.useCallback(() => {
@@ -21,8 +25,13 @@ const Error = () => {
                 src={require('/assets/images/empty.png')}
                 alt={' '}
             />
-            <div className={styles['error-message']}>
-                { t('GENERIC_ERROR_MESSAGE') }
+            <div className={styles['info']}>
+                <div className={styles['title']}>
+                    {t('GENERIC_ERROR_MESSAGE')}
+                </div>
+                <div className={styles['message']}>
+                    {message}
+                </div>
             </div>
             <div className={styles['buttons-container']}>
                 <Button className={styles['button-container']} title={t('CLEAR_DATA')} onClick={clearData}>
diff --git a/src/core/Error/styles.less b/src/core/Error/styles.less
index a3932533b..8cfb4aa25 100644
--- a/src/core/Error/styles.less
+++ b/src/core/Error/styles.less
@@ -21,13 +21,30 @@
         opacity: 0.9;
     }
 
-    .error-message {
-        flex: none;
-        padding: 0 3rem;
-        font-size: 2rem;
-        max-height: 3.6em;
-        text-align: center;
-        color: var(--primary-foreground-color);
+    .info {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+
+        .title {
+            font-size: 2rem;
+            color: var(--primary-foreground-color);
+        }
+
+        .message {
+            position: relative;
+            max-width: 40rem;
+            display: -webkit-box;
+            font-size: 1.5rem;
+            color: var(--primary-foreground-color);
+            opacity: 0.6;
+            text-align: center;
+            text-overflow: ellipsis;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 5;
+        }
     }
 
     .buttons-container {