@weavy/uikit-react 12.1.0 → 13.0.0

package/src/components/PdfViewer.tsx

@@ -1,23 +1,45 @@
-import React, { useEffect, useRef, useCallback, useState } from "react";
-import pdfjsLib from 'pdfjs-dist';
-import pdfjsViewer from 'pdfjs-dist/web/pdf_viewer';
+import React, { useContext, useEffect, useRef, useCallback, useState } from "react";
+import pdfjsLib, { PDFDocumentLoadingTask } from 'pdfjs-dist';
+import { PDFViewer, EventBus, PDFFindController, PDFLinkService } from 'pdfjs-dist/web/pdf_viewer';
 import Icon from "../ui/Icon";
 
 type Props = {
-    src: string
+    src: string,
+    pdfCMapsUrl: string,
+    pdfWorkerUrl: string
 }
 
-const PdfViewer = ({ src }: Props) => {
-    //const viewerRef = useRef(null);
+const PdfViewer = ({ src, pdfCMapsUrl, pdfWorkerUrl }: Props) => {
+
     const pageNumberRef = useRef<HTMLInputElement>(null);
     const totalPagesRef = useRef<HTMLSpanElement>(null);
     const zoomLevelRef = useRef<HTMLInputElement>(null);
 
-    const [pdfEventBus, setPdfEventBus] = useState<pdfjsViewer.EventBus>();
-
-    const [pdfViewer, setPdfViewer] = useState<pdfjsViewer.PDFViewer>();
-    const [pdfLinkService, setPdfLinkService] = useState<pdfjsViewer.PDFLinkService>();
-    const [pdfFindController, setPdfFindController] = useState<pdfjsViewer.PDFFindController>();
+    const [pdfEventBus, setPdfEventBus] = useState<EventBus>(() => {
+        //console.debug("new pdf event bus")
+        return new EventBus();
+    });
+
+    const [pdfLinkService, setPdfLinkService] = useState<PDFLinkService>(() => {
+        // (Optionally) enable hyperlinks within PDF files.
+        //console.debug("new pdf link service")
+        
+        return new PDFLinkService({
+            eventBus: pdfEventBus!
+        })
+    });
+
+    const [pdfFindController, setPdfFindController] = useState<PDFFindController>(() => {
+        // (Optionally) enable find controller.
+        //console.debug("new pdf find controller")
+        
+        return new PDFFindController({
+            eventBus: pdfEventBus!,
+            linkService: pdfLinkService!,
+        })
+    });
+
+    const [pdfViewer, setPdfViewer] = useState<PDFViewer | null>();
 
     const DEFAULT_SCALE_DELTA = 1.1;
     const MAX_SCALE = 3.0;
@@ -27,70 +49,57 @@ const PdfViewer = ({ src }: Props) => {
     const ENABLE_XFA = true;
 
     // Some PDFs need external cmaps.
-    const CMAP_URL = "/cmaps/";
+    const CMAP_URL = pdfCMapsUrl || '';
     const CMAP_PACKED = true;
 
+    const WORKER_URL = pdfWorkerUrl || '';
+
     // Setting worker path to worker bundle.
-    pdfjsLib.GlobalWorkerOptions.workerSrc = "/js/pdf.worker.min.js";
+    pdfjsLib.GlobalWorkerOptions.workerSrc = WORKER_URL;
 
+    // Save container in state after being available
+    const [viewerContainer, setViewerContainer] = useState<HTMLDivElement>();
     const viewerRef = useCallback((container: any) => {
-        if (container !== null) {
+        setViewerContainer(container);
+    }, [])
 
-            let linkService = pdfLinkService;
-            let findController = pdfFindController;
-            let viewer = pdfViewer;
-            let eventBus = pdfEventBus;
-
-            if (!pdfEventBus) {
-                eventBus = new pdfjsViewer.EventBus();
-                setPdfEventBus(eventBus);
-            }
+    useEffect(() => {
+        let viewer = pdfViewer;
 
-            // (Optionally) enable hyperlinks within PDF files.
-            if (!pdfLinkService) {
-                linkService = new pdfjsViewer.PDFLinkService({
-                    eventBus: eventBus!,
-                })
-                setPdfLinkService(linkService);
-            }
+        if (viewerContainer) {
 
-            // (Optionally) enable find controller.
-            if (!pdfFindController) {
-                findController = new pdfjsViewer.PDFFindController({
-                    eventBus: eventBus!,
-                    linkService: linkService!,
-                })
-                setPdfFindController(findController);
-            }
+            if (!pdfViewer && pdfEventBus) {
+                // INIT PDF VIEWER
+                //console.debug("new pdf viewer")
 
-            if (!pdfViewer && eventBus) {
                 // @ts-ignore due to incorrect type def
-                viewer = new pdfjsViewer.PDFViewer({
-                    container: container,
-                    eventBus: eventBus,
-                    linkService: linkService!,
-                    findController: findController,
+                viewer = new PDFViewer({
+                    container: viewerContainer!,
+                    eventBus: pdfEventBus,
+                    linkService: pdfLinkService!,
+                    findController: pdfFindController,
                     //defaultZoomValue: 1.0,
                     //scriptingManager: pdfScriptingManager,
                     //enableScripting: true, // Only necessary in PDF.js version 2.10.377 and below.
                 })
                 //pdfViewer!.MAX_AUTO_SCALE = 1.0;
-                linkService!.setViewer(viewer);
+
+                pdfLinkService!.setViewer(viewer);
                 setPdfViewer(viewer);
 
-                eventBus.on("scalechanging", function () {
-                    console.debug("scalechanging")
+                pdfEventBus.on("scalechanging", function () {
+                    //console.debug("scalechanging")
                     zoomLevelRef.current!.value = (Math.round(viewer!.currentScale * 100)).toFixed(0) + "%";
                 });
 
-                eventBus.on("pagechanging", function () {
-                    console.debug("pagechanging")
+                pdfEventBus.on("pagechanging", function () {
+                    //console.debug("pagechanging")
                     if (pageNumberRef.current) {
                         pageNumberRef.current.value = viewer!.currentPageNumber.toFixed(0);
                     }
                 });
 
-                eventBus.on("pagesinit", function () {
+                pdfEventBus.on("pagesinit", function () {
                     // We can use pdfViewer now, e.g. let's change default scale.
                     viewer!.currentScaleValue = "auto";
                     pageNumberRef.current!.value = "1";
@@ -98,77 +107,73 @@ const PdfViewer = ({ src }: Props) => {
 
                     // We can try searching for things.
                     if (SEARCH_FOR) {
-                        if (findController && !("_onFind" in findController)) {
+                        if (pdfFindController && !("_onFind" in pdfFindController)) {
                             // @ts-ignore due to missing type def
-                            findController.executeCommand("find", { query: SEARCH_FOR });
+                            pdfFindController.executeCommand("find", { query: SEARCH_FOR });
                         } else {
-                            eventBus!.dispatch("find", { type: "", query: SEARCH_FOR });
+                            pdfEventBus!.dispatch("find", { type: "", query: SEARCH_FOR });
                         }
                     }
                 });
             }
 
-        } else {
-            console.warn("pdf viewer dismounted")
+            return () => {
+                if (viewer) {
+                    //console.debug("pdf viewer dismount cleanup")
+                    viewer.cleanup();
+                    setPdfViewer(null);
+                }
+            }
         }
-    }, []);
 
-    useEffect(() => {
-        if (src && pdfViewer && pdfLinkService) {
-            let loadingTask: pdfjsLib.PDFDocumentLoadingTask;
-            let loadedDoc: pdfjsLib.PDFDocumentProxy;
+    }, [viewerContainer]);
 
-            loadingTask = pdfjsLib.getDocument({
+
+    useEffect(() => {
+        if (src && pdfViewer) {
+            let loadingTask: PDFDocumentLoadingTask | null = pdfjsLib.getDocument({
                 url: src,
                 enableXfa: ENABLE_XFA,
                 cMapUrl: CMAP_URL,
                 cMapPacked: CMAP_PACKED,
             });
 
-            // Re-use the worker?
-            //pdfjsLib.GlobalWorkerOptions.workerPort = loadingTask._worker.port
+            loadingTask.promise.then((doc) => {
+                //console.log("LOADED PDF", src);
 
-            loadingTask.promise.then(function (doc) {
-                loadedDoc = doc;
-                //console.log("LOADED PDF");
                 pdfViewer.setDocument(doc);
                 pdfLinkService.setDocument(doc, null);
             });
 
             return () => {
                 if (loadingTask) {
-                    console.log("resetting pdf viewer");
-                    if(loadingTask._transport){
-                        loadingTask._transport.destroy();
-                    }
+                    loadingTask.destroy(); 
+                    //console.debug("loadingtask cleanup", loadingTask);
                     
-                    if (loadedDoc) {
-                        loadedDoc.destroy();
-                    }
-
-                    //loadingTask.destroy();
-                    pdfViewer.cleanup();
+                    // @ts-ignore due to incorrect param type def
+                    pdfViewer.setDocument(null);
+                    pdfLinkService.setDocument(null, null);
                 }
             }
         }
     }, [src, pdfViewer])
 
     function setScale(scale: number | string) {
-        console.debug("setScale:", scale)
+        //console.debug("setScale:", scale)
         if (pdfViewer) {
             pdfViewer.currentScaleValue = typeof scale === "number" ? scale.toFixed(2) : scale;
         }
     }
 
     function setPage(pageNumber: number) {
-        console.debug("setPage:", pageNumber)
+        //console.debug("setPage:", pageNumber)
         if (pdfViewer) {
             pdfViewer.currentPageNumber = pageNumber;
         }
     }
 
     function updatePage() {
-        console.debug("updatePage");
+        //console.debug("updatePage");
         if (pdfViewer && pageNumberRef.current) {
             let pageNumber = parseInt(pageNumberRef.current.value);
 
@@ -186,7 +191,7 @@ const PdfViewer = ({ src }: Props) => {
     }
 
     function select(e: any) {
-        console.debug("select");
+        //console.debug("select");
         e.target.setSelectionRange(0, e.target.value.length);
     }
 
@@ -215,7 +220,7 @@ const PdfViewer = ({ src }: Props) => {
     }
 
     function zoomOut() {
-        console.debug("zoomOut");
+        //console.debug("zoomOut");
         if (pdfViewer) {
             let newScale = pdfViewer.currentScale;
             let steps = 1;
@@ -230,7 +235,7 @@ const PdfViewer = ({ src }: Props) => {
     }
 
     function updateZoom() {
-        console.debug("updateZoom");
+        //console.debug("updateZoom");
         if (pdfViewer && zoomLevelRef.current) {
             let zoomValue = parseFloat(zoomLevelRef.current.value.replace("%", ""));
             if (isNaN(zoomValue)) {
@@ -268,4 +273,4 @@ const PdfViewer = ({ src }: Props) => {
     )
 }
 
-export default PdfViewer;   
+export default PdfViewer;

package/src/components/Preview.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState, useCallback } from "react";
 import Icon from "../ui/Icon";
+import Spinner from "../ui/Spinner";
 import classNames from "classnames";
 import PdfViewer from "./PdfViewer";
 import { checkImageLoad, imageLoaded } from "./Image";
@@ -45,8 +46,8 @@ export const PreviewImage = ({ src, width, height }: ImageProps) => {
         <>
             {width && height ?
                 <div className="wy-content-image wy-responsive-image" style={{ ["--width" as any]: width, ["--height" as any]: height }}>
-                    <img ref={imageRef} src={src} onLoad={imageLoaded} width={width} height={height} decoding="async" />
-                    {/* TODO: spinner here */}
+                    <img className="wy-loading-transition" ref={imageRef} src={src} onLoad={imageLoaded} width={width} height={height} decoding="async" />
+                    <Spinner.UI />
                 </div>
                 :
                 <div className="wy-content-image wy-responsive-image wy-intrinsic-image">
@@ -58,12 +59,16 @@ export const PreviewImage = ({ src, width, height }: ImageProps) => {
 }
 
 type DocumentProps = {
-    src: string
+    src: string,
+    client: any 
 }
 
-export const PreviewDocument = ({ src }: DocumentProps) => {
+export const PreviewDocument = ({ src, client }: DocumentProps) => {
+    let pdfWorkerUrl = (new URL("/js/preview.worker.js", client.url)).toString();
+    let pdfCMapsUrl = (new URL("/js/cmaps/", client.url)).toString();
+    
     return (
-        <PdfViewer src={src} />
+        <PdfViewer src={src} pdfWorkerUrl={pdfWorkerUrl} pdfCMapsUrl={pdfCMapsUrl} />
     );
 }
 
@@ -111,38 +116,56 @@ function codecError(event: any) {
     }
 }
 
-type VideoProps = {
+type MediaProps = {
+    format: string,
     src: string,
     name: string,
     mediaType?: string
 }
 
-export const PreviewVideo = ({ src, name, mediaType }: VideoProps) => {
-    /* TODO: loading, error handling and stopping */
+export const PreviewMedia = ({ format, src, name, mediaType }: MediaProps) => {
 
-    return (
+    const [mediaElement, setMediaElement] = useState<HTMLVideoElement|HTMLAudioElement>();
+    const mediaRef = useCallback((element: any) => {
+        if (element) {
+            element.classList.add("wy-loading");
+            setMediaElement(element);
+        }
+    }, [])
+
+    useEffect(() => {
+        if (mediaElement) {
+
+            mediaElement.addEventListener('error', mediaError, true); // needs capturing
+            mediaElement.addEventListener('loadedmetadata', mediaLoaded, true); // needs capturing
+            mediaElement.addEventListener('loadedmetadata', codecError, true); // needs capturing
+            
+            return () => {
+                // cleanup
+                mediaElement.pause();
+                mediaElement.removeAttribute("autoplay");
+                mediaElement.setAttribute("preload", "none");
+
+                mediaElement.removeEventListener('error', mediaError, true); // needs capturing
+                mediaElement.removeEventListener('loadedmetadata', mediaLoaded, true); // needs capturing
+                mediaElement.removeEventListener('loadedmetadata', codecError, true); // needs capturing    
+            }
+        }
+
+    }, [mediaElement])
+
+    return (format === "video" ?
         <>
-            <video className="wy-content-video" controls crossOrigin="use-credentials" autoPlay>
+            <video ref={mediaRef} className="wy-content-video" controls crossOrigin="use-credentials" autoPlay>
                 <source src={src} type={mediaType} />
                 <PreviewIcon src={src} name={name} icon="file-video" download />
             </video>
-            {/* TODO: spinner here */}
+            <Spinner.UI />
         </>
-    );
-}
-
-type AudioProps = {
-    src: string,
-    name: string,
-    mediaType?: string
-}
-
-export const PreviewAudio = ({ src, name, mediaType }: AudioProps) => {
-    /* TODO: loading, error handling and stopping */
-    return (
+    :
         <>
             <PreviewIcon src={src} name={name} icon="file-music" download>
-                <audio className="wy-content-audio" controls crossOrigin="use-credentials" autoPlay>
+                <audio ref={mediaRef} className="wy-content-audio" controls crossOrigin="use-credentials" autoPlay>
                     <source src={src} type={mediaType} />
                 </audio>
             </PreviewIcon>
@@ -175,23 +198,24 @@ export const PreviewText = ({ src, html = false, code = false }: TextProps) => {
         <>
             {html ?
                 code ?
-                    <div className="wy-content-code" dangerouslySetInnerHTML={{ __html: textContent }}></div>
+                    <div className="wy-content-code wy-code" dangerouslySetInnerHTML={{ __html: textContent }}></div>
                     :
-                    <div className="wy-content-text">
-                        <pre className="wy-document" dangerouslySetInnerHTML={{ __html: textContent }}></pre>
+                    <div className="wy-document">
+                        <div className="wy-content-html" dangerouslySetInnerHTML={{ __html: textContent }}></div>
                     </div>
                 :
                 code ?
                     <div className="wy-content-code">{textContent}</div>
                     :
-                    <div className="wy-content-text">
-                        <pre className="wy-document">{textContent}</pre>
+                    <div className="wy-document">
+                        <pre className="wy-content-text">{textContent}</pre>
                     </div>
             }
         </>
     );
 }
 
+
 type EmbedProps = {
     src: string,
     name: string,
@@ -200,13 +224,47 @@ type EmbedProps = {
 }
 
 export const PreviewEmbed = ({ src, name, icon, provider }: EmbedProps) => {
-    /* TODO: add loading and error handling */
+    const [embedElement, setEmbedElement] = useState<HTMLObjectElement>();
+    const embedRef = useCallback((element: any) => {
+        if (element) {
+            element.classList.add("wy-loading");
+            setEmbedElement(element);
+        }
+    }, [])
+
+    useEffect(() => {
+        if (embedElement) {
+            let embedFallbackTimeout = setTimeout(function () {
+                console.log("fallback");
+                embedElement.classList.add("wy-fallback");
+              }, 2500)
+
+            let embedLoaded = (event: any) => {
+                var obj = event.target;
+                if (obj.tagName === 'OBJECT' && obj.classList.contains("wy-loading") && !obj.classList.contains("wy-loaded")) {
+                  console.log("loaded");
+                  obj.classList.add("wy-loaded");
+                  clearTimeout(embedFallbackTimeout);
+                }
+            }
+
+            embedElement.addEventListener('load', embedLoaded, true); // needs capturing
+            
+            return () => {
+                // cleanup
+                embedElement.removeEventListener('load', embedLoaded, true); // needs capturing
+                clearTimeout(embedFallbackTimeout);
+            }
+        }
+
+    }, [embedElement])
+
     return (
         <>
             {/* iframe needs to be object to not render error pages when content is blocked */}
-            <object className="wy-content-iframe" data={src}></object>
+            <object ref={embedRef} className="wy-content-iframe" data={src}></object>
 
-            {/* TODO: add spinner here */}
+            <Spinner.UI />
 
             <PreviewIcon src={src} name={name} icon={icon} provider={provider} className="wy-content-iframe-fallback" />
         </>
@@ -225,13 +283,16 @@ type IconProps = {
 
 export const PreviewIcon = ({ children, src, icon, name, provider, download = false, className }: IconProps) => {
     return (
-        <div className={classNames("wy-content-media", className)}>
+        <div className={classNames("wy-content-icon", className)}>
             <div className="wy-content-icon">
                 <Icon.UI name={icon} />
             </div>
             <div className="wy-content-name">
                 {provider ?
-                    <a href={src} target="_blank" title={`Open in ${provider}`}>{name} <Icon.UI name="open-in-new" size={1} /></a>
+                    <>
+                        <span>No preview available. </span> 
+                        <a href={src} target="_blank" title={name}>{`Open in ${provider}?`}</a>
+                    </>
                     : download ?
                         <a href={src} target="_top" download>{name}</a>
                         :
@@ -244,7 +305,9 @@ export const PreviewIcon = ({ children, src, icon, name, provider, download = fa
 }
 
 type PreviewProps = {
+    client: any,
     src: string,
+    link?: string,
     format: PreviewFormatType,
     name: string,
     icon: string,
@@ -254,39 +317,37 @@ type PreviewProps = {
     provider?: string
 }
 
-export const Preview = ({ src, format, name, icon, width, height, mediaType, provider }: PreviewProps) => {
+export const Preview = ({ client, src, link, format, name, icon, width, height, mediaType, provider }: PreviewProps) => {
     return (
         <>
             {format === "image" &&
-                <PreviewImage src={src} width={width} height={height} />
-            }
-            {format === "document" &&
-                <PreviewDocument src={src} />
+                <PreviewImage key={src} src={src} width={width} height={height} />
             }
-            {format === "video" &&
-                <PreviewVideo src={src} name={name} mediaType={mediaType} />
+            {format === "pdf" &&
+                /* Key not needed since component is reused and handles cleanup */
+                <PreviewDocument src={src} client={client} />
             }
-            {format === "audio" &&
-                <PreviewAudio src={src} name={name} mediaType={mediaType} />
+            {(format === "video" || format === "audio") &&
+                <PreviewMedia key={src} format={format} src={src} name={name} mediaType={mediaType} />
             }
             {format === "text" &&
-                <PreviewText src={src} />
+                <PreviewText key={src} src={src} />
             }
             {format === "code" &&
-                <PreviewText src={src} html code />
+                <PreviewText key={src} src={src} html code />
             }
-            {format === "markup" &&
-                <PreviewText src={src} html />
+            {format === "html" &&
+                <PreviewText key={src} src={src} html />
             }
             {format === "embed" &&
-                <PreviewEmbed src={src} name={name} icon={icon} provider={provider} />
-            }
-            {format === "link" &&
-                <PreviewIcon src={src} name={name} icon={icon} provider={provider} />
-            }
-            {format === "download" &&
-                <PreviewIcon src={src} name={name} icon={icon} download />
+                <PreviewEmbed key={src} src={src} name={name} icon={icon} provider={provider} />
             }
+            {format === "none" && (
+                link ?
+                    <PreviewIcon src={src} name={name} icon={icon} provider={provider} />
+                :
+                    <PreviewIcon src={src} name={name} icon={icon} download />
+            )}
         </>
     )
 }

package/src/components/SearchUsers.tsx

@@ -48,12 +48,12 @@ const SearchUsers = ({handleSubmit, buttonTitle}: SearchUsersProps) => {
             </div>
 
             <div className="wy-pane-group">
-                {data && data.data.length === 0 &&
+                {data && (!data.data || data.data.length === 0) &&
                     <div className="wy-search-no-result">Your search did not match any people.</div>
                 }
                 <table className="wy-search-result-table">
                     <tbody>
-                        {data && data.data.length > 0 && data.data.map((user: MemberType) => {
+                        {data && data.data && data.data.length > 0 && data.data.map((user: MemberType) => {
                             return (
                                 <tr key={user.id} className="wy-search-result-table-checkbox">
                                     <td className="wy-search-result-table-icon">