@weavy/uikit-react 12.1.0 → 14.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)) {
@@ -243,19 +248,19 @@ const PdfViewer = ({ src }: Props) => {
 
     return (
         <div className="wy-content-pdf" data-controller="pdf" data-pdf-url-value="">
-            <div className="wy-toolbar">
-                <nav className="wy-tools">
-                    <div className="wy-tool">
+            <div className="wy-toolbars-bottom">
+                <nav className="wy-toolbar">
+                    <div className="wy-toolbar-buttons">
                         <input type="text" className="wy-input" ref={pageNumberRef} onChange={updatePage} onClick={select} data-pdf-target="pageNumber"/>
                         <span>/</span>
                         <span ref={totalPagesRef}>1</span>
                     </div>
-                    <div className="wy-tool">
+                    <div className="wy-toolbar-buttons">
                         <button className="wy-button wy-button-icon btn-zoom-out" onClick={zoomOut} title="Zoom out"><Icon.UI name="minus" /></button>
                         <input type="text" className="wy-input" ref={zoomLevelRef} onChange={updateZoom} onClick={select} value="100%" data-pdf-target="zoomLevel"/>
                         <button className="wy-button wy-button-icon btn-zoom-in" onClick={zoomIn} title="Zoom in"><Icon.UI name="plus" /></button>
                     </div>
-                    <div className="wy-tool">
+                    <div className="wy-toolbar-buttons">
                         <button className="wy-button wy-button-icon btn-fit-page" onClick={fitToWidth} title="Fit to width"><Icon.UI name="fit-width" /></button>
                         <button className="wy-button wy-button-icon" onClick={fitToPage} title="Fit to screen"><Icon.UI name="fit-screen" /></button>
                     </div>
@@ -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 wy-light">
+                        <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 wy-light">
+                        <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/Reactions.tsx

@@ -50,7 +50,7 @@ export const ReactionsMenu = ({ id, reactions }: ReactionMenuProps) => {
     }
 
     const handleReaction = async (e: any) => {
-        // check if the reaction already exists for the user
+        // check if the reaction already exists for the user        
         const existing = reactionsList.find((r) => r.has_reacted)
         const emoji = e.target.dataset.emoji;
 
@@ -69,7 +69,7 @@ export const ReactionsMenu = ({ id, reactions }: ReactionMenuProps) => {
 
     return (
         <div className={classNames({ "wy-active": visible })} style={{ position: 'relative' }}>
-            <Button.UI onClick={toggleReactionMenu}><Icon.UI name="emoticon-plus" size={1} /></Button.UI>
+            <Button.UI className="wy-reaction-menu-button" onClick={toggleReactionMenu}><Icon.UI name="emoticon-plus" size={1.25/1.5} /></Button.UI>
             <div className="wy-reaction-menu wy-dropdown-menu" style={{ display: visible ? 'block' : 'none', position: 'absolute', top: '-3.25rem' }}>
                 <div className="wy-reaction-picker">
                     {emojis?.map((r: string, i: number) => {
@@ -83,13 +83,19 @@ export const ReactionsMenu = ({ id, reactions }: ReactionMenuProps) => {
 }
 
 export const ReactionsList = ({ id, reactions }: ReactionsProps) => {
-    const { reactionsList } = useReactions(id, reactions);
-
+    const { reactionsList } = useReactions(id, reactions);  
+    
+    let reactionCount = reactionsList.reduce(
+        (previousValue, currentItem) => previousValue + currentItem.count,
+        0,
+    );
+    
     return (
         <>
-            {reactionsList && reactionsList.map((r: ReactionGroup, i: number) => {
+            {!!reactionsList && reactionsList.map((r: ReactionGroup, i: number) => {
                 return <span key={i} className="wy-reaction" title={r.count.toString()}>{r.content}</span> //r.has_reacted
             })}
+            {reactionCount > 1 && <span className="wy-reaction-count">{reactionCount}</span>}
         </>
     )
 }