From 69dd62561ea927ff7c028139e838cc777b0f8296 Mon Sep 17 00:00:00 2001
From: miko <sauce47@posteo.net>
Date: Tue, 19 Nov 2024 19:24:32 +0200
Subject: [PATCH] Show nicer error if pdf fails to load

---
 static/app-strings.json           |  2 ++
 ui/component/IframeReact/view.jsx | 27 +++++++++++++++++++++++++--
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/static/app-strings.json b/static/app-strings.json
index d348557f5b..9d348b82e9 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -2965,6 +2965,8 @@
   "Default action when clicking a playlist.": "Default action when clicking a playlist.",
   "Default playlist action": "Default playlist action",
   "Optionally the email change can be requested using \"Submit Feedback\" button below.": "Optionally the email change can be requested using \"Submit Feedback\" button below.",
+  "Failed to load": "Failed to load",
+  "This file failed to load. Some browser extension may be blocking it. If the issue persists, please reach out to help@odysee.com": "This file failed to load. Some browser extension may be blocking it. If the issue persists, please reach out to help@odysee.com",
   
   "--end--": "--end--"
 }
diff --git a/ui/component/IframeReact/view.jsx b/ui/component/IframeReact/view.jsx
index 49c755fcbc..0a5b3770e4 100644
--- a/ui/component/IframeReact/view.jsx
+++ b/ui/component/IframeReact/view.jsx
@@ -1,5 +1,6 @@
 // @flow
 import React from 'react';
+import Card from 'component/common/card';
 
 type Props = {
   fullHeight: boolean,
@@ -10,11 +11,20 @@ type Props = {
 export default function I18nMessage(props: Props) {
   const { src, title } = props;
 
-  // const iframeRef = useRef();
+  const [failedToLoadSrc, setFailedToLoadSrc] = React.useState(false);
+  // const iframeRef = React.useRef();
 
   // const [iframeHeight, setIframeHeight] = useState('80vh');
 
   function onLoad() {
+    const checkIfSrcCanBeLoaded = async () => {
+      const response = await fetch(src);
+      if (response.status !== 200) {
+        setFailedToLoadSrc(true);
+      }
+    };
+    checkIfSrcCanBeLoaded();
+
     /*
 
     iframe domain restrictions prevent naive design :-(
@@ -30,6 +40,19 @@ export default function I18nMessage(props: Props) {
   return (
     // style={{height: iframeHeight}}
     // ref={iframeRef}
-    <iframe src={src} title={title} onLoad={onLoad} sandbox={!IS_WEB} />
+    !failedToLoadSrc ? (
+      <iframe src={src} title={title} onLoad={onLoad} sandbox={!IS_WEB} />
+    ) : (
+      <Card
+        title={__('Failed to load')}
+        subtitle={
+          <p>
+            {__(
+              'This file failed to load. Some browser extension may be blocking it. If the issue persists, please reach out to help@odysee.com'
+            )}
+          </p>
+        }
+      />
+    )
   );
 }