@weavy/uikit-react 11.1.0 → 13.0.0

package/src/components/Preview.tsx

@@ -0,0 +1,355 @@
+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";
+
+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 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">
+                    <img ref={imageRef} src={src} onLoad={imageLoaded} decoding="async" />
+                </div>
+            }
+        </>
+    );
+}
+
+type DocumentProps = {
+    src: string,
+    client: any 
+}
+
+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} pdfWorkerUrl={pdfWorkerUrl} pdfCMapsUrl={pdfCMapsUrl} />
+    );
+}
+
+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 MediaProps = {
+    format: string,
+    src: string,
+    name: string,
+    mediaType?: string
+}
+
+export const PreviewMedia = ({ format, src, name, mediaType }: MediaProps) => {
+
+    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 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>
+            <Spinner.UI />
+        </>
+    :
+        <>
+            <PreviewIcon src={src} name={name} icon="file-music" download>
+                <audio ref={mediaRef} 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 wy-code" dangerouslySetInnerHTML={{ __html: textContent }}></div>
+                    :
+                    <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-document">
+                        <pre className="wy-content-text">{textContent}</pre>
+                    </div>
+            }
+        </>
+    );
+}
+
+
+type EmbedProps = {
+    src: string,
+    name: string,
+    icon: string,
+    provider?: string
+}
+
+export const PreviewEmbed = ({ src, name, icon, provider }: EmbedProps) => {
+    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 ref={embedRef} className="wy-content-iframe" data={src}></object>
+
+            <Spinner.UI />
+
+            <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-icon", className)}>
+            <div className="wy-content-icon">
+                <Icon.UI name={icon} />
+            </div>
+            <div className="wy-content-name">
+                {provider ?
+                    <>
+                        <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>
+                        :
+                        <a href={src} target="_blank">{name} <Icon.UI name="open-in-new" size={1} /></a>
+                }
+            </div>
+            {children}
+        </div>
+    );
+}
+
+type PreviewProps = {
+    client: any,
+    src: string,
+    link?: string,
+    format: PreviewFormatType,
+    name: string,
+    icon: string,
+    width?: number,
+    height?: number,
+    mediaType?: string,
+    provider?: string
+}
+
+export const Preview = ({ client, src, link, format, name, icon, width, height, mediaType, provider }: PreviewProps) => {
+    return (
+        <>
+            {format === "image" &&
+                <PreviewImage key={src} src={src} width={width} height={height} />
+            }
+            {format === "pdf" &&
+                /* Key not needed since component is reused and handles cleanup */
+                <PreviewDocument src={src} client={client} />
+            }
+            {(format === "video" || format === "audio") &&
+                <PreviewMedia key={src} format={format} src={src} name={name} mediaType={mediaType} />
+            }
+            {format === "text" &&
+                <PreviewText key={src} src={src} />
+            }
+            {format === "code" &&
+                <PreviewText key={src} src={src} html code />
+            }
+            {format === "html" &&
+                <PreviewText key={src} src={src} html />
+            }
+            {format === "embed" &&
+                <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 />
+            )}
+        </>
+    )
+}
+
+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
             })}
         </>
     )

package/src/components/SearchUsers.tsx

@@ -4,7 +4,6 @@ import useSearchUsers from "../hooks/useSearchUsers";
 import Avatar from './Avatar';
 import Button from '../ui/Button';
 import Icon from '../ui/Icon';
-import { prefix as wy } from "../utils/styles";
 
 type SearchUsersProps = {
     handleSubmit: any,
@@ -42,33 +41,33 @@ const SearchUsers = ({handleSubmit, buttonTitle}: SearchUsersProps) => {
     }
 
     return (
-        <div className={wy('search scroll-y')}>
-            <div className={wy('search-form pane-group')}>
+        <div className="wy-search wy-scroll-y">
+            <div className="wy-search-form wy-pane-group">
                 <Button.UI><Icon.UI name="magnify" /></Button.UI>
-                <input className={wy('search-input')} value={text} onChange={(e) => setText(e.target.value)} name="text" placeholder='Search...' />
+                <input className="wy-search-input" value={text} onChange={(e) => setText(e.target.value)} name="text" placeholder='Search...' />
             </div>
 
-            <div className={wy('pane-group')}>
-                {data && data.data.length === 0 &&
-                    <div className={wy('search-no-result')}>Your search did not match any people.</div>
+            <div className="wy-pane-group">
+                {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')}>
+                <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')}>
+                                <tr key={user.id} className="wy-search-result-table-checkbox">
+                                    <td className="wy-search-result-table-icon">
                                         <Avatar src={user.avatar_url} size={24} id={user.id} presence={user.presence} name={user.display_name} />
                                     </td>
                                     <td><label htmlFor={'chk' + user.id}>{user.display_name}</label></td>
-                                    <td className={wy('search-result-table-icon')}><input type="checkbox" id={'chk' + user.id} checked={isChecked(user.id)} onChange={(e) => handleSelected(e, user)} /></td>
+                                    <td className="wy-search-result-table-icon"><input type="checkbox" id={'chk' + user.id} checked={isChecked(user.id)} onChange={(e) => handleSelected(e, user)} /></td>
                                 </tr>
                             )
                         })}
-                    </tbody>
+                    </tbody> 
                 </table>
             </div>
-            {/*<div className={wy('search-group')}>
+            {/*<div className="wy-search-group">
                 <h2>Selected people</h2>
                 <ul>
                     {selected && selected.length > 0 && selected.map((user: UserType) => {
@@ -76,10 +75,12 @@ const SearchUsers = ({handleSubmit, buttonTitle}: SearchUsersProps) => {
                     })}
                 </ul>
                 </div>*/}
-            <div className={wy('footerbars')}>
-                <div className={wy('footerbar')}>
-                    <div className={wy('pane-group')}>
-                        <button className={wy('button-primary')} type="button" onClick={() => {handleSubmit(selected); clear();}} disabled={selected.length === 0}>{buttonTitle}</button>
+            <div className="wy-footerbars">
+                <div className="wy-footerbar">
+                    <div className="wy-pane-group">
+                        <div className="wy-buttons">
+                            <button className="wy-button wy-button-primary" type="button" onClick={() => {handleSubmit(selected); clear();}} disabled={selected.length === 0}>{buttonTitle}</button>
+                        </div>
                     </div>
                 </div>
             </div>

package/src/components/SeenBy.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import Avatar from "./Avatar";
 import dayjs  from 'dayjs';
-import { prefix as wy } from "../utils/styles";
 
 type Props = {
     id: number,
@@ -13,7 +12,7 @@ type Props = {
 const SeenBy = ({ seenBy }: Props) => {
    
     return (
-        <div className={wy('readby-status')}>
+        <div className="wy-readby-status">
             {seenBy && seenBy.length > 0 && seenBy.map((member: MemberType) => {
                 const date = dayjs.utc(member.read_at).tz(dayjs.tz.guess());
                 return (<Avatar name={`Seen by ${member.name} at ${date.format('LLLL')}`} src={member.avatar_url} size={16} key={member.id}/>)})

package/src/contexts/MessengerContext.tsx

@@ -3,22 +3,14 @@ import usePresence from "../hooks/usePresence";
 
 export const MessengerContext = createContext<MessengerContextProps>({
     selectedConversationId: null,
-    setSelectedConversationId: (id: any) => { },
-    options: {}
+    setSelectedConversationId: (id: any) => { }    
 });
 
 type Props = {
-    children: React.ReactNode,
-    options?: MessengerContextOptions
+    children: React.ReactNode    
 }
 
-const MessengerProvider = ({ children, options }: Props) => {
-
-    let defaultOptions: MessengerContextOptions = {
-        reactions: ['😍', '😎', '😉', '😜', '👍']
-    };
-
-    let opts = { ...defaultOptions, ...options };
+const MessengerProvider = ({ children }: Props) => {
 
     const [selectedConversationId, setSelectedConversation] = useState(null);
 
@@ -31,7 +23,7 @@ const MessengerProvider = ({ children, options }: Props) => {
 
     return (
         <>
-            <MessengerContext.Provider value={{ options: opts, selectedConversationId, setSelectedConversationId }}>
+            <MessengerContext.Provider value={{ selectedConversationId, setSelectedConversationId }}>
                 {children}
             </MessengerContext.Provider>
         </>