box-content-preview icon indicating copy to clipboard operation
box-content-preview copied to clipboard

.bcpr-content empty

Open jacobmischka opened this issue 6 years ago • 8 comments

The content preview component seems to be working correctly, in all ways except that it's not actually loading the preview. The header loads and is responsive, but no matter what I try to do the content itself is just blank.

I see no errors or failed network requests, any points in the right direction would be greatly appreciated.

I'm using an enterprise account, might that have something to do with it?

Screenshot_2019-11-18 Storybook

jacobmischka avatar Nov 18 '19 17:11 jacobmischka

Hi @jacobmischka. It would be very helpful if you could fill out our issue template so we can assist you better. Thanks.

jstoffan avatar Nov 18 '19 18:11 jstoffan

Environment:

  • Preview version: Whatever box-ui-elements loads, looks like 2.16.0

Desktop (please complete the following information):

  • OS: Linux
  • Browser: Chrome, Firefox
  • Version: Latest

Steps to reproduce the problem:

  1. Try to load preview using developer token and File ID
  2. Header shows up, metadata is successfully fetched, preview doesn't show

What is the expected behavior? (Screenshots can be helpful here)

Preview shows up.

What went wrong? (Screenshots, console logs, or HAR files can be helpful here)

Preview doesn't show up.

Link to application or sample code:

File ID and developer token redacted below.


import React, { Fragment } from 'react';
import { IntlProvider } from 'react-intl';

import { ContentPreview } from 'box-ui-elements';
import messages from 'box-ui-elements/i18n/en-US.js';

export default {
	title: 'Video'
};

export function basic() {
	return (
		<IntlProvider locale="en-US" textComponent={Fragment}>
			<ContentPreview
				token={DEVELOPER_TOKEN}
				fileId={id}
				language="en-US"
				hasHeader
				fixDependencies
				messages={messages}
				onViewer={() => {
					console.log('viewer');
				}}
				onLoad={data => {
					console.log(data);
				}}
			/>
		</IntlProvider>
	);
}


If relevant, link to file (or attach file here)

Same happens with any file.

Expected behavior The content is previewed.

Screenshots Screenshot_2019-11-18 Storybook(1)

Additional context Using an enterprise account with a developer token and the box-ui-elements ContentPreview react component.

jacobmischka avatar Nov 18 '19 20:11 jacobmischka

Thanks for providing that additional information. Unfortunately, I'm not able to recreate this issue using either the latest or prior full versions of Elements (11.0.0, 10.1.0). I'm also able to see preview loading via the ContentPreview page on our examples site, which uses 2.26.0 of the Preview SDK.

Do you see any error messages in the developer console? Can you provide a HAR file of the page load?

jstoffan avatar Nov 18 '19 21:11 jstoffan

No errors. Using version 11.0.0 for box-ui-elements.

Slightly simplified code:

/** @format */

import React, { Fragment } from 'react';
import ReactDOM from 'react-dom';
import { IntlProvider } from 'react-intl';

import { ContentPreview } from 'box-ui-elements';

import messages from 'box-ui-elements/i18n/en-US.js';

const id = ******;

const DEVELOPER_TOKEN = '*****';

function App() {
	return (
		<IntlProvider locale="en-US" textComponent={Fragment}>
			<ContentPreview
				token={DEVELOPER_TOKEN}
				fileId={id}
				language="en-US"
				hasHeader
				fixDependencies
				messages={messages}
				onViewer={() => {
					console.log('viewer');
				}}
				onLoad={data => {
					console.log(data);
				}}
			/>
		</IntlProvider>
	);
}

ReactDOM.render(<App />, document.getElementById('root'));

Har file: https://send.firefox.com/download/3c1a19b8578a35e5/#bOfpNaxg0chFZJxSxwVAMQ

jacobmischka avatar Nov 18 '19 21:11 jacobmischka

I don't see anything obviously wrong from looking at the HAR file. Can you add the following prop and see if anything pops out?

onError={error => console.log(error)}

jstoffan avatar Nov 18 '19 21:11 jstoffan

Nothing. None of the callbacks are being called, which is pretty strange.

jacobmischka avatar Nov 19 '19 14:11 jacobmischka

I can provide my developer token and an ID of the file if it'll help, just let me know when you're ready so that there's enough time before the token expires.

jacobmischka avatar Nov 19 '19 14:11 jacobmischka

Also, here are the app settings I have configured right now:

1 2 3

jacobmischka avatar Nov 19 '19 14:11 jacobmischka