Shared:Components:MediaViewer Added error handler

packages/client/src/pages/PublicPreview/PublicPreview.helpers.ts

@@ -23,6 +23,7 @@
 // All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+import { AxiosError } from "axios";
 import { isMobile } from "react-device-detect";
 import { useState, useEffect, useCallback } from "react";
 import { getDeviceTypeByWidth } from "@docspace/shared/utils";
@@ -57,3 +58,13 @@ export const useDeviceType = () => {
 
   return currentDeviceType;
 };
+
+export const isAxiosError = (error: unknown): error is AxiosError => {
+  return (
+    error !== null &&
+    typeof error === "object" &&
+    "isAxiosError" in error &&
+    typeof error.isAxiosError === "boolean" &&
+    error.isAxiosError
+  );
+};

packages/client/src/pages/PublicPreview/PublicPreview.tsx

@@ -8,6 +8,7 @@ import { UrlActionType } from "@docspace/shared/enums";
 import { toastr } from "@docspace/shared/components/toast";
 import MediaViewer from "@docspace/shared/components/media-viewer/MediaViewer";
 import { ViewerLoader } from "@docspace/shared/components/media-viewer/sub-components/ViewerLoader";
+import Error403 from "@docspace/shared/components/errors/Error403";
 
 import type { TFile } from "@docspace/shared/api/files/types";
 import type {
@@ -17,7 +18,7 @@ import type {
 
 import type { PublicPreviewProps } from "./PublicPreview.types";
 import { DEFAULT_EXTS_IMAGE } from "./PublicPreview.constants";
-import { useDeviceType } from "./PublicPreview.helpers";
+import { isAxiosError, useDeviceType } from "./PublicPreview.helpers";
 
 const PublicPreview = ({
   getIcon,
@@ -32,6 +33,7 @@ const PublicPreview = ({
   const [files, setFiles] = useState<TFile[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [searchParams] = useSearchParams();
+  const [errorStatus, setErrorStatus] = useState<number>();
 
   const init = useCallback(async () => {
     const key = searchParams.get("share");
@@ -50,7 +52,15 @@ const PublicPreview = ({
 
       setFiles([fileInfo]);
     } catch (error) {
-      if (error instanceof Error) toastr.error(error);
+      if (isAxiosError(error)) {
+        const status = error.response?.status;
+
+        if (status !== undefined && status === 403) {
+          return setErrorStatus(status);
+        }
+
+        toastr.error(error);
+      }
 
       // eslint-disable-next-line no-console
       console.error(error);
@@ -79,7 +89,7 @@ const PublicPreview = ({
     fileStatus: file.fileStatus,
     canShare: file.canShare,
     version: file.version,
-    thumbnailUrl: "",
+    thumbnailUrl: file.thumbnailUrl ?? "",
   }));
 
   const onDownloadMediaFile = useCallback(
@@ -97,6 +107,8 @@ const PublicPreview = ({
     [playlist, openUrl],
   );
 
+  if (errorStatus === 403) return <Error403 />;
+
   if (isLoading) return <ViewerLoader isLoading />;
 
   return (

packages/shared/api/files/types.ts

@@ -112,6 +112,7 @@ export type TFile = {
   providerId?: number;
   providerKey?: string;
   providerItem?: boolean;
+  thumbnailUrl?: string;
 };
 
 export type TOpenEditRequest = {

packages/shared/components/media-viewer/sub-components/ImageViewer/index.tsx

@@ -40,7 +40,6 @@ import React, {
 // import indexedDBHelper from "@docspace/shared/utils/indexedDBHelper";
 import { checkDialogsOpen } from "@docspace/shared/utils/checkDialogsOpen";
 import { LOADER_TIMEOUT } from "@docspace/shared/constants";
-import { isPublicPreview } from "@docspace/shared/utils/common";
 
 import {
   calculateAdjustBoundsUtils,