@weavy/uikit-react 11.0.1 → 12.1.0

package/src/components/PdfViewer.tsx

@@ -0,0 +1,271 @@
+import React, { useEffect, useRef, useCallback, useState } from "react";
+import pdfjsLib from 'pdfjs-dist';
+import pdfjsViewer from 'pdfjs-dist/web/pdf_viewer';
+import Icon from "../ui/Icon";
+
+type Props = {
+    src: string
+}
+
+const PdfViewer = ({ src }: Props) => {
+    //const viewerRef = useRef(null);
+    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 DEFAULT_SCALE_DELTA = 1.1;
+    const MAX_SCALE = 3.0;
+    const MIN_SCALE = 0.2;
+
+    const SEARCH_FOR = "";
+    const ENABLE_XFA = true;
+
+    // Some PDFs need external cmaps.
+    const CMAP_URL = "/cmaps/";
+    const CMAP_PACKED = true;
+
+    // Setting worker path to worker bundle.
+    pdfjsLib.GlobalWorkerOptions.workerSrc = "/js/pdf.worker.min.js";
+
+    const viewerRef = useCallback((container: any) => {
+        if (container !== null) {
+
+            let linkService = pdfLinkService;
+            let findController = pdfFindController;
+            let viewer = pdfViewer;
+            let eventBus = pdfEventBus;
+
+            if (!pdfEventBus) {
+                eventBus = new pdfjsViewer.EventBus();
+                setPdfEventBus(eventBus);
+            }
+
+            // (Optionally) enable hyperlinks within PDF files.
+            if (!pdfLinkService) {
+                linkService = new pdfjsViewer.PDFLinkService({
+                    eventBus: eventBus!,
+                })
+                setPdfLinkService(linkService);
+            }
+
+            // (Optionally) enable find controller.
+            if (!pdfFindController) {
+                findController = new pdfjsViewer.PDFFindController({
+                    eventBus: eventBus!,
+                    linkService: linkService!,
+                })
+                setPdfFindController(findController);
+            }
+
+            if (!pdfViewer && eventBus) {
+                // @ts-ignore due to incorrect type def
+                viewer = new pdfjsViewer.PDFViewer({
+                    container: container,
+                    eventBus: eventBus,
+                    linkService: linkService!,
+                    findController: findController,
+                    //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);
+                setPdfViewer(viewer);
+
+                eventBus.on("scalechanging", function () {
+                    console.debug("scalechanging")
+                    zoomLevelRef.current!.value = (Math.round(viewer!.currentScale * 100)).toFixed(0) + "%";
+                });
+
+                eventBus.on("pagechanging", function () {
+                    console.debug("pagechanging")
+                    if (pageNumberRef.current) {
+                        pageNumberRef.current.value = viewer!.currentPageNumber.toFixed(0);
+                    }
+                });
+
+                eventBus.on("pagesinit", function () {
+                    // We can use pdfViewer now, e.g. let's change default scale.
+                    viewer!.currentScaleValue = "auto";
+                    pageNumberRef.current!.value = "1";
+                    totalPagesRef.current!.innerText = viewer!.pagesCount.toFixed(0);
+
+                    // We can try searching for things.
+                    if (SEARCH_FOR) {
+                        if (findController && !("_onFind" in findController)) {
+                            // @ts-ignore due to missing type def
+                            findController.executeCommand("find", { query: SEARCH_FOR });
+                        } else {
+                            eventBus!.dispatch("find", { type: "", query: SEARCH_FOR });
+                        }
+                    }
+                });
+            }
+
+        } else {
+            console.warn("pdf viewer dismounted")
+        }
+    }, []);
+
+    useEffect(() => {
+        if (src && pdfViewer && pdfLinkService) {
+            let loadingTask: pdfjsLib.PDFDocumentLoadingTask;
+            let loadedDoc: pdfjsLib.PDFDocumentProxy;
+
+            loadingTask = 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(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();
+                    }
+                    
+                    if (loadedDoc) {
+                        loadedDoc.destroy();
+                    }
+
+                    //loadingTask.destroy();
+                    pdfViewer.cleanup();
+                }
+            }
+        }
+    }, [src, pdfViewer])
+
+    function setScale(scale: number | string) {
+        console.debug("setScale:", scale)
+        if (pdfViewer) {
+            pdfViewer.currentScaleValue = typeof scale === "number" ? scale.toFixed(2) : scale;
+        }
+    }
+
+    function setPage(pageNumber: number) {
+        console.debug("setPage:", pageNumber)
+        if (pdfViewer) {
+            pdfViewer.currentPageNumber = pageNumber;
+        }
+    }
+
+    function updatePage() {
+        console.debug("updatePage");
+        if (pdfViewer && pageNumberRef.current) {
+            let pageNumber = parseInt(pageNumberRef.current.value);
+
+            if (isNaN(pageNumber)) {
+                setPage(pdfViewer.currentPageNumber);
+            } else if (pageNumber > pdfViewer.pagesCount) {
+                setPage(pdfViewer.pagesCount);
+            } else if (pageNumber <= 0) {
+                setPage(1);
+            } else {
+                setPage(pageNumber);
+            }
+
+        }
+    }
+
+    function select(e: any) {
+        console.debug("select");
+        e.target.setSelectionRange(0, e.target.value.length);
+    }
+
+    function fitToPage() {
+        setScale("page-fit");
+    }
+
+    function fitToWidth() {
+        setScale("page-width");
+    }
+
+    function zoomIn() {
+        console.debug("zoomIn");
+
+        if (pdfViewer) {
+            let newScale = pdfViewer.currentScale;
+            let steps = 1;
+            do {
+                newScale = newScale * DEFAULT_SCALE_DELTA;
+                newScale = Math.floor(newScale * 10) / 10;
+                newScale = Math.min(MAX_SCALE, newScale);
+            } while (--steps > 0 && newScale < MAX_SCALE);
+
+            setScale(newScale);
+        }
+    }
+
+    function zoomOut() {
+        console.debug("zoomOut");
+        if (pdfViewer) {
+            let newScale = pdfViewer.currentScale;
+            let steps = 1;
+            do {
+                newScale = newScale / DEFAULT_SCALE_DELTA;
+                newScale = Math.floor(newScale * 10) / 10;
+                newScale = Math.max(MIN_SCALE, newScale);
+            } while (--steps > 0 && newScale > MIN_SCALE);
+
+            setScale(newScale);
+        }
+    }
+
+    function updateZoom() {
+        console.debug("updateZoom");
+        if (pdfViewer && zoomLevelRef.current) {
+            let zoomValue = parseFloat(zoomLevelRef.current.value.replace("%", ""));
+            if (isNaN(zoomValue)) {
+                setScale(pdfViewer.currentScale + 0.0001);
+            } else {
+                setScale(zoomValue / 100);
+            }
+        }
+    }
+
+    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">
+                        <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">
+                        <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">
+                        <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>
+                </nav>
+            </div>
+            <div ref={viewerRef} className="wy-pdf-container">
+                <div id="viewer" className="pdfViewer"></div>
+            </div>
+        </div>
+    )
+}
+
+export default PdfViewer;   

package/src/components/Presence.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { prefix as wy } from "../utils/styles";
+import classNames from "classnames";
 
 type Props = {
     id: number,
@@ -8,7 +8,7 @@ type Props = {
 
 const Presence = ({ id, status }: Props) => {
     return (
-        <span className={wy(`presence ${status === "active" ? "presence-active" : ""}`)} data-presence-id={id}></span>
+        <span className={classNames("wy-presence", { "wy-presence-active": status === "active" })} data-presence-id={id}></span>
     )
 } 
 

package/src/components/Preview.tsx

@@ -0,0 +1,294 @@
+import React, { useEffect, useState, useCallback } from "react";
+import Icon from "../ui/Icon";
+import classNames from "classnames";
+import PdfViewer from "./PdfViewer";
+import { checkImageLoad, imageLoaded } from "./Image";
+
+const getStream = (response: Response) => {
+    if (response && response.ok && response.body) {
+        const reader = response.body.getReader();
+        return new ReadableStream({
+            start(controller) {
+                let pump: any = () => {
+                    return reader.read().then(({ done, value }) => {
+                        // When no more data needs to be consumed, close the stream
+                        if (done) {
+                            controller.close();
+                            return;
+                        }
+                        // Enqueue the next data chunk into our target stream
+                        controller.enqueue(value);
+                        return pump();
+                    });
+                }
+
+                return pump();
+            }
+        })
+    }
+};
+
+type ImageProps = {
+    src: string,
+    width?: number,
+    height?: number
+}
+
+export const PreviewImage = ({ src, width, height }: ImageProps) => {
+    const imageRef = useCallback((element: HTMLImageElement) => {
+        if (element) {
+            checkImageLoad(element);
+        }
+    }, [])
+
+    return (
+        <>
+            {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 */}
+                </div>
+                :
+                <div className="wy-content-image wy-responsive-image wy-intrinsic-image">
+                    <img ref={imageRef} src={src} onLoad={imageLoaded} decoding="async" />
+                </div>
+            }
+        </>
+    );
+}
+
+type DocumentProps = {
+    src: string
+}
+
+export const PreviewDocument = ({ src }: DocumentProps) => {
+    return (
+        <PdfViewer src={src} />
+    );
+}
+
+function mediaFallback(media: HTMLVideoElement | HTMLAudioElement) {
+    if (media.classList.contains("wy-loading")) {
+        media.classList.add("wy-loaded");
+    }
+    media.classList.add("wy-error");
+    // TODO: replace with react way
+    media.outerHTML = media.outerHTML.replace(/<(video|audio)/, "<div").replace(/(video|audio)>/, "div>");
+}
+
+function mediaLoaded(event: any) {
+    var src = event.target;
+    if (src.tagName === 'VIDEO' || src.tagName === 'AUDIO') {
+        if (src.classList.contains("wy-loading")) {
+            console.log("loaded")
+            src.classList.add("wy-loaded");
+        }
+    }
+}
+
+function mediaError(event: any) {
+    var src = event.target;
+    var media;
+    if (src.tagName === 'SOURCE') {
+        media = src.parentNode;
+        media.dataset.errors = (media.dataset.errors || 0) + 1;
+
+        if (media.querySelectorAll("source").length >= media.dataset.errors) {
+            console.warn(media.tagName.toLowerCase() + " source error, switching to fallback");
+            mediaFallback(media);
+        }
+    }
+}
+
+function codecError(event: any) {
+    var src = event.target;
+    if (src.tagName === 'VIDEO' || src.tagName === 'AUDIO') {
+        // Capture codec-error for video in firefox
+        if (src.tagName === 'VIDEO' && !src.videoWidth || src.tagName === 'AUDIO' && !src.duration) {
+            console.warn(src.tagName.toLowerCase() + " track not available, switching to fallback");
+            mediaFallback(src);
+        }
+    }
+}
+
+type VideoProps = {
+    src: string,
+    name: string,
+    mediaType?: string
+}
+
+export const PreviewVideo = ({ src, name, mediaType }: VideoProps) => {
+    /* TODO: loading, error handling and stopping */
+
+    return (
+        <>
+            <video 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 */}
+        </>
+    );
+}
+
+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>
+                    <source src={src} type={mediaType} />
+                </audio>
+            </PreviewIcon>
+        </>
+    );
+}
+
+type TextProps = {
+    src: string,
+    html?: boolean,
+    code?: boolean
+}
+
+export const PreviewText = ({ src, html = false, code = false }: TextProps) => {
+    const [textContent, setTextContent] = useState("");
+
+    useEffect(() => {
+        fetch(src)
+            .then(getStream)
+            // Create a new response out of the stream
+            .then(stream => new Response(stream))
+            // Create an object URL for the response
+            .then(response => response.text())
+            .then(text => {
+                setTextContent(text)
+            })
+    }, [src]);
+
+    return (
+        <>
+            {html ?
+                code ?
+                    <div className="wy-content-code" dangerouslySetInnerHTML={{ __html: textContent }}></div>
+                    :
+                    <div className="wy-content-text">
+                        <pre className="wy-document" dangerouslySetInnerHTML={{ __html: textContent }}></pre>
+                    </div>
+                :
+                code ?
+                    <div className="wy-content-code">{textContent}</div>
+                    :
+                    <div className="wy-content-text">
+                        <pre className="wy-document">{textContent}</pre>
+                    </div>
+            }
+        </>
+    );
+}
+
+type EmbedProps = {
+    src: string,
+    name: string,
+    icon: string,
+    provider?: string
+}
+
+export const PreviewEmbed = ({ src, name, icon, provider }: EmbedProps) => {
+    /* TODO: add loading and error handling */
+    return (
+        <>
+            {/* iframe needs to be object to not render error pages when content is blocked */}
+            <object className="wy-content-iframe" data={src}></object>
+
+            {/* TODO: add spinner here */}
+
+            <PreviewIcon src={src} name={name} icon={icon} provider={provider} className="wy-content-iframe-fallback" />
+        </>
+    );
+}
+
+type IconProps = {
+    children?: React.ReactNode,
+    src: string,
+    icon: string,
+    name: string,
+    provider?: string,
+    download?: boolean,
+    className?: string
+}
+
+export const PreviewIcon = ({ children, src, icon, name, provider, download = false, className }: IconProps) => {
+    return (
+        <div className={classNames("wy-content-media", 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>
+                    : download ?
+                        <a href={src} target="_top" download>{name}</a>
+                        :
+                        <a href={src} target="_blank">{name} <Icon.UI name="open-in-new" size={1} /></a>
+                }
+            </div>
+            {children}
+        </div>
+    );
+}
+
+type PreviewProps = {
+    src: string,
+    format: PreviewFormatType,
+    name: string,
+    icon: string,
+    width?: number,
+    height?: number,
+    mediaType?: string,
+    provider?: string
+}
+
+export const Preview = ({ src, format, name, icon, width, height, mediaType, provider }: PreviewProps) => {
+    return (
+        <>
+            {format === "image" &&
+                <PreviewImage src={src} width={width} height={height} />
+            }
+            {format === "document" &&
+                <PreviewDocument src={src} />
+            }
+            {format === "video" &&
+                <PreviewVideo src={src} name={name} mediaType={mediaType} />
+            }
+            {format === "audio" &&
+                <PreviewAudio src={src} name={name} mediaType={mediaType} />
+            }
+            {format === "text" &&
+                <PreviewText src={src} />
+            }
+            {format === "code" &&
+                <PreviewText src={src} html code />
+            }
+            {format === "markup" &&
+                <PreviewText 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 />
+            }
+        </>
+    )
+}
+
+export default Preview;

package/src/components/Reactions.tsx

@@ -5,9 +5,9 @@ import Button from "../ui/Button";
 import { MessengerContext } from "../contexts/MessengerContext";
 import classNames from "classnames";
 
-import { prefix as wy } from "../utils/styles";
 import useReactions from "../hooks/useReactions";
 import useMutateDeleteReaction from "../hooks/useMutateDeleteReaction";
+import { WeavyContext } from "../contexts/WeavyContext";
 
 type ReactionMenuProps = {
     id: number,
@@ -25,7 +25,7 @@ export const ReactionsMenu = ({ id, reactions }: ReactionMenuProps) => {
     const reactionMutation = useMutateReaction();
     const reactionDeleteMutation = useMutateDeleteReaction();
     const [visible, setVisible] = useState<boolean>(false);
-    const { options } = useContext(MessengerContext);
+    const { options } = useContext(WeavyContext);
     const [reactedEmoji, setReactedEmoji] = useState<string>('');
 
     const emojis = options?.reactions;
@@ -68,12 +68,12 @@ export const ReactionsMenu = ({ id, reactions }: ReactionMenuProps) => {
     }
 
     return (
-        <div className={wy(classNames("", { "active": visible }))} style={{ position: 'relative' }}>
-            <Button.UI onClick={toggleReactionMenu}><Icon.UI name="emoticon-outline" size={1} /></Button.UI>
-            <div className={wy('reaction-menu dropdown-menu')} style={{ display: visible ? 'block' : 'none', position: 'absolute', top: '-3.25rem' }}>
-                <div className={wy('reaction-picker')}>
+        <div className={classNames({ "wy-active": visible })} style={{ position: 'relative' }}>
+            <Button.UI onClick={toggleReactionMenu}><Icon.UI name="emoticon-plus" size={1} /></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) => {
-                        return <Button.UI key={i} onClick={handleReaction} className={wy(classNames("button-icon reaction-button", { "active": reactedEmoji === r }))} data-emoji={r}>{r}</Button.UI> //reactedEmoji
+                        return <Button.UI key={i} onClick={handleReaction} className={classNames("wy-button-icon wy-reaction-button", { "wy-active": reactedEmoji === r })} data-emoji={r}>{r}</Button.UI> //reactedEmoji
                     })}
                 </div>
             </div>
@@ -88,7 +88,7 @@ export const ReactionsList = ({ id, reactions }: ReactionsProps) => {
     return (
         <>
             {reactionsList && reactionsList.map((r: ReactionGroup, i: number) => {
-                return <span key={i} className={wy('reaction')} title={r.count.toString()}>{r.content}</span> //r.has_reacted
+                return <span key={i} className="wy-reaction" title={r.count.toString()}>{r.content}</span> //r.has_reacted
             })}
         </>
     )