Embedded video not getting rendered correctly by @atlaskit/renderer

[SpandanRoy]

Hi, I am using ReactRenderer from @atlaskit/renderer to render HTML inside my react app from adf document.

However, one thing I have noticed is that video is not getting rendered properly, instead the api call to fetch resources fails with auth.

How to we provide auth credentials for rendering embedded videos?
Couldn’t find a proper documentation for this.

Any help is highly appreciated!!!

Thanks!

[bentley]

What type of video are you trying to embed?

Does it work with a video that doesn’t require auth?

[SpandanRoy]

Hi Bentley,

This is the code for renderer:
Its an embedded video on a confluence page.
Say, a youtube video url so, I guess it does not require auth. Its kind of like a smart card with video preview generated when we enter a video url on a confluence page.

Document.js:

import React from “react”;
import { ReactRenderer } from “@atlaskit/renderer”;
import { Provider as SmartCardProvider, Client } from “@atlaskit/smart-card”;
import { ProviderFactory } from “@atlaskit/editor-common”;
import {
storyMediaProviderFactory,
storyContextIdentifierProviderFactory,
} from “@atlaskit/editor-test-helpers”;
import {
defaultCollectionName
} from “@atlaskit/media-test-helpers”;
import “./Document.css”;

function Document({ title, content }) {
const extensionHandlers = {
“com.atlassian.confluence.macro.core”: (ext) => {
const { extensionKey } = ext;
console.log(“ext: “, ext);
switch (extensionKey) {
case “anchor”:
return (
<span id={${ext.parameters.macroParams[""].value}}>{””}
);
default:
return null;
}
},
};
// const mediaProvider = createStorybookMediaClientConfig({ authType: ‘asap’});
const mediaProvider = storyMediaProviderFactory({
includeUserAuthProvider: true,
useMediaPickerAuthProvider: false,
defaultCollectionName: defaultCollectionName,
includeUploadMediaClientConfig: true,
});
const providerFactory = ProviderFactory.create({
mediaProvider,
contextIdentifierProvider: storyContextIdentifierProviderFactory({
includeUserAuthProvider: true,
useMediaPickerAuthProvider: true,
defaultCollectionName: defaultCollectionName,
}),
});
return (
<React.Fragment>

{title}

<SmartCardProvider client={new Client()}>
<ReactRenderer
document={content}
dataProviders={providerFactory}
extensionHandlers={extensionHandlers}
allowHeadingAnchorLinks
shouldOpenMediaViewer
appearance=“full-page”
eventHandlers={{
smartCard: {
onClick: (e, url) => {
window.open(url, “_blank”);
},
},
}}
defaultCollectionName={defaultCollectionName}
media={{
featureFlags: {
newCardExperience: true,
mediaInline: true,
},
}}
/>

</React.Fragment>
);
}

export default Document;

When I am trying to load a video on my site using renderer, this is what I am seeing:

And in dev tools, this API seems to fail, here are some screenshots of the same:

This is exactly where I need help.
Please let me know if I need to provide more info.

Thanks!