feat(core): add error message to error page

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>
     );

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}>

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 {