Merge pull request #35 from dyte-in/staging

chore: release

Author: ishita1805

package-lock.json

@@ -5,25 +5,30 @@
   "main": "index.js",
   "scripts": {
     "dev": "vite",
+    "preview": "vite preview",
     "build": "tsc && vite build",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "publish": "npm run build && cp dyte-config.json ./dist/dyte-config.json && cd dist && dyte plugins publish -l",
+    "publish-devel": "npm run build && cp dyte-config-staging.json ./dist/dyte-config.json && cd dist && dyte plugins publish -l"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dytesdk/plugin-sdk": "^2.2.0",
-    "@tldraw/tldraw": "^1.29.2",
+    "@dytesdk/plugin-sdk": "2.4.0",
+    "@tldraw/tldraw": "^1.20.0",
     "axios": "^1.4.0",
     "core-js": "^3.30.2",
+    "jspdf": "^2.5.1",
     "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
+    "@types/uuid": "^9.0.8",
     "@typescript-eslint/eslint-plugin": "^5.59.0",
     "@typescript-eslint/parser": "^5.59.0",
     "@vitejs/plugin-react": "^4.0.0",

package.json

@@ -1,11 +1,12 @@
 import './index.css';
-import { useContext } from 'react';
+import { useContext, useEffect } from 'react';
 import { MainContext } from './context';
 import logo from '../src/assets/icon.png';
+import logoWhite from '../src/assets/logo-white.png';
 import Canvas from './pages/canvas/Canvas';
 
 const App = () => {
-  const { plugin, meetingId, self } = useContext(MainContext);
+  const { plugin, meetingId, self, config } = useContext(MainContext);
 
   return (
     <div className='container'>
@@ -14,7 +15,15 @@ const App = () => {
           ?  (
            <Canvas />
           )
-          : <div className="loading-page"><img src={logo} /> <p>Whiteboard</p></div>
+          : (
+            config?.darkMode
+            ? <div className='loading-page-dark'>
+              <img src={logoWhite} /> <p>Whiteboard</p>
+            </div>
+            : <div className="loading-page">
+              <img src={logo} /> <p>Whiteboard</p>
+            </div>
+          )
       }
     </div>
   )

src/App.tsx

@@ -0,0 +1,71 @@
+import React, { useEffect } from 'react'
+import { TDExportType, TldrawApp } from '@tldraw/tldraw'
+import DytePlugin from '@dytesdk/plugin-sdk'
+
+
+interface Props {
+    app: TldrawApp | undefined,
+    plugin: DytePlugin | undefined,
+    pageHistory: Set<string>,
+    setLoading: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const blobToBase64 = (blob: Blob): Promise<string> => {
+    const reader = new FileReader();
+    reader.readAsDataURL(blob);
+    return new Promise(resolve => {
+      reader.onloadend = () => {
+        resolve(reader.result as string);
+      };
+    });
+  };
+
+const summary = ({ app, plugin, pageHistory, setLoading }: Props) => {
+    useEffect(() => {
+        if (!app || !plugin) return;
+
+        plugin.room.on('get-summary', async () => {
+            let image: string | undefined;
+            try {
+                const preview = await app.getImage(TDExportType.JPG, {
+                    transparentBackground: true,
+                });
+                if (preview) {
+                    image = await blobToBase64(preview)
+                }
+            } catch (e) {}
+        
+            plugin.room.emitEvent('board-summary', {
+                document: app.document,
+                pageIds: pageHistory,
+                preview: image,
+            });
+        })
+
+        plugin.room.on('load-app', ({payload}) => {
+            const document = payload.document;
+            setLoading(true);
+            (app as TldrawApp).updateDocument(document);
+            plugin.emit('load-app-remote', { document });
+            setLoading(false);
+        })
+
+        plugin.on('load-app-remote', ({ document }) => {
+            setLoading(true);
+            (app as TldrawApp).updateDocument(document);
+            setLoading(false);
+        })
+
+        plugin.room.on('set-page', ({ payload }) => {
+            const page = payload.pageId;
+            (app as TldrawApp).changePage(page);
+        })
+
+        plugin.room.on('add-page', ({ payload }) => {
+            const pageName = payload.page;
+            (app as TldrawApp).createPage(undefined, pageName);
+        })
+    }, [app, plugin])
+}
+
+export default summary

src/api/summary.tsx

@@ -0,0 +1,146 @@
+import { useContext, useEffect, useState } from 'react'
+import './pagination.css'
+import Icon from '../icon/Icon'
+import { MainContext } from '../../context';
+import { TldrawApp } from '@tldraw/tldraw';
+import { INDEX, setIndex, storeConf } from '../../utils/constants';
+import { v4 } from 'uuid';
+
+const index = () => {
+    const [showDropdown, setShowDropdown] = useState<boolean>(false);
+    const { activeTool, config, pages, setPages, page, setPage, loading, plugin, app, following } = useContext(MainContext);
+
+    const addPage = async () => {
+        setIndex(INDEX + 1);
+        const pageObject = {
+            name: `Page ${INDEX}`,
+            id: v4(),
+        };
+
+        // create new page to dyte stores
+        const PageStore = plugin.stores.get('page');
+        await PageStore.bulkSet([
+            { key: 'currentPage', payload: pageObject },
+            { key: pageObject.id, payload: pageObject.name },
+        ])
+
+        // create new page state
+        setPages((p: any) => [...p, pageObject]);
+        setPage(pageObject);
+
+        // create new page in tldraw
+        (app as TldrawApp).createPage(pageObject.id, pageObject.name);
+        setShowDropdown((d) => !d);
+    }
+    const deletePage = (id: string) => {
+        // delete page from tldraw
+        app.deletePage(id);
+        const pageId = app.appState.currentPageId;
+        const { name } = (app as TldrawApp).document.pages[pageId];
+
+        // update page state
+        setPages((p: any) => p.filter((x: any) => x.id !== id));
+        setPage({ name, id: pageId });
+
+        // delete page from dyte stores
+        const PageStore = plugin.stores.get('page');
+        PageStore.bulkDelete([{key: id}]);
+        PageStore.set('currentPage', { name, id: pageId });
+        setShowDropdown((d) => !d);
+    }
+    const switchPage = (pageObject: { name: string; id: string }) => {
+        // change page state
+        setPage(pageObject);
+        // change tldraw page
+        app.changePage(pageObject.id);
+        // change dyte store page
+        const PageStore = plugin.stores.get('page');
+        PageStore.set('currentPage', pageObject)   
+    }
+
+    // update pages when store changes come
+    useEffect(() => {
+        if (!plugin || !app) return;
+
+        const PageStore = plugin.stores.create('page', storeConf);
+        PageStore.subscribe('*', (data: any) => {
+            const pId = Object.keys(data)[0];
+            if (!data[pId]) {
+                setPages((p: any) => p.filter((x: any) => x.id !== pId));
+                app.deletePage(pId); 
+            }
+            const currentPage = data.currentPage;
+            if (!currentPage) return;
+            if (!loading) {
+                const p = app.getPage(currentPage.id);
+                if (!p) {
+                    setPages((p: any) => [...p, currentPage]);
+                    app.createPage(currentPage.id, currentPage.name);
+                    setIndex(INDEX + 1);
+                } else {
+                    app.changePage(currentPage.id);
+                }
+            }
+            setPage(currentPage);
+        })
+        return () => {
+            PageStore.unsubscribe('*');
+        }
+    }, [loading, app, plugin])
+
+   // closes pagination when following someone
+   useEffect(() => {
+    if (following?.length) {
+        setShowDropdown(false);
+    }
+   }, [following])
+
+   // closes pagination while drawing (IMP so that user does not end up creating a page while drawing)
+   useEffect(() => {
+    if (activeTool !== 'select') {
+        setShowDropdown(false);
+    }
+   }, [activeTool])
+
+    return (
+        <div className={ config?.darkMode ? "pagination-dark" : "pagination"}>
+            <div className="pagination-header" onClick={() => {
+                setShowDropdown((s) => !s);
+            }}>
+                <div>{page?.name}</div>
+                <Icon
+                    icon={showDropdown ? 'less' : 'more'} className="pagination-icon"
+                />
+            </div>
+            {
+                showDropdown && (
+                <div className={config?.darkMode ? "pagination-dropdown-dark" : "pagination-dropdown"}>
+                    {
+                        pages.map((p: any) => (
+                            <div
+                                key={p.id} 
+                                className="pagination-element"
+                            >
+                                    <div className="page-label" onClick={() => switchPage(p)} >{p.name}</div>
+                                    {pages.length > 1 && (
+                                        <Icon 
+                                            icon="delete" 
+                                            onClick={() => deletePage(p.id)}
+                                            className="pagination-icon" 
+                                        />
+                                    )}
+                            </div>
+                        ))
+                    }
+                    <div className={config?.darkMode ? "pagination-create-dark" : "pagination-create"} onClick={addPage}>
+                        Create Page
+                        <Icon icon="add" className="pagination-icon" />
+                    </div>
+                </div>
+                )
+            }
+        </div>
+    )
+}
+
+export default index

src/assets/logo-white.png

@@ -0,0 +1,36 @@
+.pagination {
+    @apply flex flex-col cursor-pointer;
+}
+.pagination-dark {
+    @apply flex flex-col cursor-pointer text-white;
+}
+.pagination-header {
+    @apply flex flex-row items-center;
+}
+.pagination-icon {
+    @apply h-6 w-6;
+}
+.pagination-dropdown {
+    @apply absolute left-0 top-11 bg-[#f8f8f8] rounded-md shadow-[0_8px_30px_rgb(0,0,0,0.12)];
+    max-height: 80vh;
+    overflow-y: auto;
+    min-width: 130px;
+}
+.pagination-dropdown-dark {
+    @apply absolute left-0 top-11 rounded-md shadow-[0_8px_30px_rgb(0,0,0,0.12)] text-white bg-[#353D43];
+    max-height: 80vh;
+    overflow-y: auto;
+    min-width: 130px;
+}
+.pagination-element {
+    @apply flex flex-row items-center justify-between px-2 h-10;
+}
+.pagination-create {
+    @apply flex flex-row items-center justify-between p-1 border-solid border-gray-300 border-0 border-t-[1px] h-10;
+}
+.pagination-create-dark {
+    @apply flex flex-row items-center justify-between p-1 border-solid border-gray-600 border-0 border-t-[1px] h-10;
+}
+.page-label {
+    @apply flex-grow;
+}

src/components/pagination/index.tsx

@@ -37,7 +37,7 @@ const Presence = () => {
         const n = name.split(' ');
         let initials = '';
         n.map((x, index) => {
-            if (index < 2) initials += x[0].toUpperCase();
+            if (index < 2) initials += x[0]?.toUpperCase();
         })
         return initials ?? 'P';
     }
@@ -89,6 +89,15 @@ const Presence = () => {
         }
     }, [followers]);
 
+    /**
+     * Do not show presence icons if you are following someone.
+     * Do not show presence icons if you are followed by everyone 
+     */
+    if (
+        following[0]
+        || followers?.size === Object.keys(users)?.length
+    ) return null;
+
     return (
     <div>
         {(() => {