fix: open pdf in new tab on mobile devices

components/core/SlateMediaObject.js

@@ -55,25 +55,44 @@ const typeMap = {
 };
 
 export default class SlateMediaObject extends React.Component {
+  openLink = (url) => {
+    let { isMobile } = this.props;
+
+    if (isMobile) {
+      window.open(url, "_blank");
+    }
+  };
+
+  componentDidMount() {
+    const url = this.props.data.url;
+    this.openLink(url);
+  }
+
   render() {
     const url = this.props.data.url;
     const type = this.props.data.type ? this.props.data.type : "LEGACY_NO_TYPE";
     const playType = typeMap[type] ? typeMap[type] : type;
 
+    let { isMobile } = this.props;
+
     let element = <div css={STYLES_FAILURE}>No Preview</div>;
 
     if (type.startsWith("application/pdf")) {
       return (
-        <object
-          css={STYLES_OBJECT}
-          style={{ width: "calc(100% - 64px)" }}
-          data={url}
-          type={type}
-          key={url}
-          onClick={(e) => {
-            e.stopPropagation();
-          }}
-        />
+        <>
+          {!isMobile && (
+            <object
+              css={STYLES_OBJECT}
+              style={{ width: "calc(100% - 64px)" }}
+              data={url}
+              type={type}
+              key={url}
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+            />
+          )}
+        </>
       );
     }
 

components/system/components/GlobalCarousel.js

@@ -260,7 +260,10 @@ export class GlobalCarousel extends React.Component {
     } else if (this.props.carouselType === "DATA") {
       data.url = Strings.getCIDGatewayURL(data.cid);
     }
-    let slide = <SlateMediaObject data={data} />;
+
+    let { mobile } = this.props;
+    let slide = <SlateMediaObject data={data} isMobile={mobile} />;
+
     return (
       <div css={STYLES_ROOT}>
         <Alert