Render files in the Atlaskit Media Viewer component

Atlassian Developer Tools
, ,
1

In my app, I use the Media Viewer component from Atlaskit UI.

I can only render images with the mediaItemType property with the value “external-image”.

See the code 
import React, {useState} from 'react';
import {IntlProvider} from 'react-intl';
import {MediaViewer} from '@atlaskit/media-viewer';
import './App.css';

const imageUri = 'https://war.ukraine.ua/wp-content/uploads/2022/03/shutterstock_2029545419-2.png';
const pdfUri = 'https://www.buds.com.ua/images/Lorem_ipsum.pdf';

function App() {
  const [imageDisplayed, setImageDisplayed] = useState(false);
  const [pdfDisplayed, setPdfDisplayed] = useState(false);

  const toggleImageMediaViewer = () => setImageDisplayed(prevState => !prevState);
  const togglePdfMediaViewer = () => setPdfDisplayed(prevState => !prevState);

  let mediaViewer = null;

  if (imageDisplayed) {
    const mediaIdentifier = {
      mediaItemType: 'external-image',
      name: 'Some image',
      dataURI: imageUri
    };
    mediaViewer = (
      <MediaViewer mediaClientConfig={{}}
                   selectedItem={mediaIdentifier}
                   dataSource={{list: [mediaIdentifier]}}
                   collectionName={''}
                   onClose={toggleImageMediaViewer}/>
    );
  } else if (pdfDisplayed) {
    const mediaIdentifier = {
      mediaItemType: 'file',
      name: 'Some PDF',
      dataURI: pdfUri
    };
    mediaViewer = (
      <MediaViewer mediaClientConfig={{}}
                   selectedItem={mediaIdentifier}
                   dataSource={{list: [mediaIdentifier]}}
                   collectionName={''}
                   onClose={togglePdfMediaViewer}/>
    );
  }

  return (
    <div className="App">
      <h3>Hello Atlassian Community</h3>

      <button onClick={toggleImageMediaViewer}>Show Image</button>
      <button onClick={togglePdfMediaViewer}>Show PDF</button>

      <IntlProvider locale="en">
        <>
          {mediaViewer}
        </>
      </IntlProvider>
    </div>
  );
}

export default App;

or GitHub project.

How can I render documents (plain texts, pdf, etc), play video & audio files in Media Viewer?

3 Likes
2

Hi @Alexey.Sapon

Were you able to figure this out? Is the Media Viewer component capable of playing videos?

3

Hi @RhysDiab,

I meant previews for video, text, and other types. Sorry for not clarifying it right away.

4

@Alexey.Sapon,

Long story short: you can’t. The Media Viewer is closely tied to the Media API, but the specifications of that API have not been shared by Atlassian with the Atlassian Marketplace Partners. It’s a closed source system.

You could try and reverse engineer the workings of the Media API by looking at the front-end code and by inspecting the requests made by the Media Viewer (& media card) components within the context of how they are used in the host products. But given that there is also a lot of authentication handshakes involved, I would not advice you to go down that path.

We’ve been using the Media Viewer for 2+ years now and have recently decided to move away from it as it gives more headaches both in terms of UX as well as DX (specifically compilation time).

5

@remie, thank you