1import React, {
2 useRef,
3 useEffect,
4 useCallback,
5 useState,
6} from 'react';
7import WebViewer from '@pdftron/webviewer';
8import { initializeAudioViewer } from '@pdftron/webviewer-audio';
9import './App.css';
10
11const App = () => {
12 const viewer = useRef(null);
13 const inputFile = useRef(null);
14
15 const [audioInstance, setAudioInstance] = useState(null);
16
17 const initializeHeader = useCallback(instance => {
18 const { UI: { setHeaderItems } } = instance;
19
20 setHeaderItems(header => {
21 // Add upload file button
22 header.push({
23 type: 'actionButton',
24 img: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
25 <path d="M11 15H13V9H16L12 4L8 9H11V15Z" fill="currentColor"/>
26 <path d="M20 18H4V11H2V18C2 19.103 2.897 20 4 20H20C21.103 20 22 19.103 22 18V11H20V18Z" fill="currentColor"/>
27 </svg>`,
28 title: 'Load file',
29 dataElement: 'audio-loadFileButton',
30 onClick: () => {
31 inputFile.current.click();
32 }
33 });
34 });
35 }, []);
36
37 // if using a class, equivalent of componentDidMount
38 useEffect(() => {
39 WebViewer.Iframe(
40 {
41 path: '/webviewer/lib',
42 },
43 viewer.current,
44 ).then(async instance => {
45 instance.UI.setTheme('dark');
46 instance.UI.openElements(['notesPanel']);
47
48 const license = `---- Insert commercial license key here after purchase ----`;
49 // Extends WebViewer to allow loading media files (.mp3, .mp4, ogg, webm, etc.)
50 const audioInstance = await initializeAudioViewer(
51 instance,
52 { license, isDemoMode: process.env.DEMO },
53 );
54
55 setAudioInstance(audioInstance);
56
57 // Load a media element at a specific url. Can be a local or public link
58 // If local it needs to be relative to lib/ui/index.html.
59 // Or at the root. (eg '/audio.mp3')
60 const audioUrl = 'https://pdftron.s3.amazonaws.com/downloads/pl/video/audio.mp3';
61
62 audioInstance.loadAudio(audioUrl);
63 initializeHeader(instance);
64 });
65 }, [initializeHeader]);
66
67 const onFileChange = async event => {
68 const file = event.target.files[0];
69
70 // There won't be file if the file dialog is canceled
71 if (file) {
72 audioInstance.loadAudio(file, { fileName: file.name });
73 }
74 };
75
76 return (
77 <div className="App">
78 <input type="file" hidden ref={inputFile} onChange={onFileChange} value=""/>
79 <div className="webviewer" ref={viewer}/>
80 </div>
81 );
82};
83
84export default App;
85