feat(web): add apps in whiteboard (#994)

* feat(web): add app Countdown - feat(renderer-app): add app Countdown * feat(web): add app GeoGebra - feat(renderer-app): add app GeoGebra * feat(web): add app IframeBridge * style(style): padding app buttons
netless-io · Oct 18, 2021 · a87b1e5 · a87b1e5
1 parent de6fe8a
commit a87b1e5
Show file tree

Hide file tree

Showing 10 changed files with 116 additions and 8 deletions.
diff --git a/cspell.config.js b/cspell.config.js
@@ -88,6 +88,7 @@ module.exports = {
         "telebox", // @netless/widnow-manager
         "Buildin", // @netless/widnow-manager
         "zindex", // antd
+        "geogebra", // @netless/app-geogebra
 
         // misc
         "npmrc",

diff --git a/desktop/renderer-app/package.json b/desktop/renderer-app/package.json
@@ -5,6 +5,9 @@
   "homepage": ".",
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
+    "@netless/app-countdown": "^0.0.1",
+    "@netless/app-geogebra": "^0.0.1",
+    "@netless/app-iframe-bridge": "^0.0.2",
     "@netless/app-monaco": "^0.1.8",
     "@netless/combine-player": "^1.1.4",
     "@netless/cursor-tool": "^0.1.0",

diff --git a/desktop/renderer-app/src/components/AppStoreButton/AppButton.tsx b/desktop/renderer-app/src/components/AppStoreButton/AppButton.tsx
@@ -15,6 +15,7 @@ export const AppButton = observer<AppButtonProps>(function AppButton({ kind, nam
 
     return (
         <Button
+            style={{ marginRight: 12, marginBottom: 12 }}
             key={kind}
             loading={loading}
             onClick={async () => {

diff --git a/desktop/renderer-app/src/components/AppStoreButton/index.tsx b/desktop/renderer-app/src/components/AppStoreButton/index.tsx
@@ -20,6 +20,27 @@ const apps: AddAppParams[] = [
             title: "Code Editor",
         },
     },
+    {
+        kind: "Countdown",
+        options: {
+            title: "Countdown",
+        },
+    },
+    {
+        kind: "GeoGebra",
+        options: {
+            title: "GeoGebra",
+        },
+    },
+    {
+        kind: "IframeBridge",
+        options: {
+            title: "IframeBridge",
+        },
+        attributes: {
+            src: "https://demo-edu.cocos.com/agora-demo/index.html",
+        },
+    },
 ];
 
 export const AppStoreButton = observer<AppStoreButtonProps>(function AppStoreButton({ addApp }) {

diff --git a/desktop/renderer-app/src/tasks/init-register-apps.ts b/desktop/renderer-app/src/tasks/init-register-apps.ts
@@ -1,8 +1,8 @@
 import { WindowManager } from "@netless/window-manager";
 import path from "path";
 
-const registerApps = async (): Promise<void> => {
-    await WindowManager.register({
+const registerApps = (): void => {
+    void WindowManager.register({
         kind: "Monaco",
         appOptions: {
             loader: {
@@ -16,10 +16,31 @@ const registerApps = async (): Promise<void> => {
             return app.default ?? app;
         },
     });
+    void WindowManager.register({
+        kind: "Countdown",
+        src: async () => {
+            const app = await import("@netless/app-countdown");
+            return app.default ?? app;
+        },
+    });
+    void WindowManager.register({
+        kind: "GeoGebra",
+        src: async () => {
+            const app = await import("@netless/app-geogebra");
+            return app.default ?? app;
+        },
+    });
+    void WindowManager.register({
+        kind: "IframeBridge",
+        src: async () => {
+            const app = await import("@netless/app-iframe-bridge");
+            return app.default ?? app;
+        },
+    });
 };
 
-export const initRegisterApps = async (): Promise<void> => {
-    await registerApps();
+export const initRegisterApps = (): void => {
+    registerApps();
 };
 
 const getVSPath = (): string => {

diff --git a/web/flat-web/package.json b/web/flat-web/package.json
@@ -34,6 +34,9 @@
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
     "@loadable/component": "^5.15.0",
+    "@netless/app-countdown": "^0.0.1",
+    "@netless/app-geogebra": "^0.0.1",
+    "@netless/app-iframe-bridge": "^0.0.2",
     "@netless/app-monaco": "^0.1.8",
     "@netless/combine-player": "^1.1.6",
     "@netless/cursor-tool": "^0.1.0",

diff --git a/web/flat-web/src/components/AppStoreButton/AppButton.tsx b/web/flat-web/src/components/AppStoreButton/AppButton.tsx
@@ -15,6 +15,7 @@ export const AppButton = observer<AppButtonProps>(function AppButton({ kind, nam
 
     return (
         <Button
+            style={{ marginRight: 12, marginBottom: 12 }}
             key={kind}
             loading={loading}
             onClick={async () => {

diff --git a/web/flat-web/src/components/AppStoreButton/index.tsx b/web/flat-web/src/components/AppStoreButton/index.tsx
@@ -19,6 +19,27 @@ const apps: AddAppParams[] = [
             title: "Code Editor",
         },
     },
+    {
+        kind: "Countdown",
+        options: {
+            title: "Countdown",
+        },
+    },
+    {
+        kind: "GeoGebra",
+        options: {
+            title: "GeoGebra",
+        },
+    },
+    {
+        kind: "IframeBridge",
+        options: {
+            title: "IframeBridge",
+        },
+        attributes: {
+            src: "https://demo-edu.cocos.com/agora-demo/index.html",
+        },
+    },
 ];
 
 export const AppStoreButton = observer<AppStoreButtonProps>(function AppStoreButton({ addApp }) {

diff --git a/web/flat-web/src/tasks/init-register-apps.ts b/web/flat-web/src/tasks/init-register-apps.ts
@@ -1,15 +1,36 @@
 import { WindowManager } from "@netless/window-manager";
 
-const registerApps = async (): Promise<void> => {
-    await WindowManager.register({
+const registerApps = (): void => {
+    void WindowManager.register({
         kind: "Monaco",
         src: async () => {
             const app = await import("@netless/app-monaco");
             return app.default ?? app;
         },
     });
+    void WindowManager.register({
+        kind: "Countdown",
+        src: async () => {
+            const app = await import("@netless/app-countdown");
+            return app.default ?? app;
+        },
+    });
+    void WindowManager.register({
+        kind: "GeoGebra",
+        src: async () => {
+            const app = await import("@netless/app-geogebra");
+            return app.default ?? app;
+        },
+    });
+    void WindowManager.register({
+        kind: "IframeBridge",
+        src: async () => {
+            const app = await import("@netless/app-iframe-bridge");
+            return app.default ?? app;
+        },
+    });
 };
 
-export const initRegisterApps = async (): Promise<void> => {
-    await registerApps();
+export const initRegisterApps = (): void => {
+    registerApps();
 };
diff --git a/yarn.lock b/yarn.lock
@@ -1862,6 +1862,11 @@
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
+"@netless/app-countdown@^0.0.1":
+  version "0.0.1"
+  resolved "https://registry.npmjs.org/@netless/app-countdown/-/app-countdown-0.0.1.tgz#97772577008ead43c10812600a121e89fc18c8e3"
+  integrity sha512-pOJLEQEHoSujAN+Q0kB257XKo3D6+J5Lz7s57OMc0/clhgaciOidBvNoTpsN70mOGRGpGiWpMovaoSYTihuU4Q==
+
 "@netless/app-docs-viewer@^0.1.21":
   version "0.1.21"
   resolved "https://registry.npmjs.org/@netless/app-docs-viewer/-/app-docs-viewer-0.1.21.tgz#781f74070ae9b6a98f60f2935be1d4e0409bad1f"
@@ -1870,6 +1875,16 @@
     debounce-fn "^5.0.0"
     vanilla-lazyload "^17.4.0"
 
+"@netless/app-geogebra@^0.0.1":
+  version "0.0.1"
+  resolved "https://registry.npmjs.org/@netless/app-geogebra/-/app-geogebra-0.0.1.tgz#177396773c587d9cd45e66219b531c5f0e43fe9b"
+  integrity sha512-6yHisNwgxGN4TLrD80rQ1KtoBuPJkw6YOV/SdEDcgZwdIRaEKQ5N3p1Jj1ICAcdFxfb0yp7Ee1ecQVTRmadr4w==
+
+"@netless/app-iframe-bridge@^0.0.2":
+  version "0.0.2"
+  resolved "https://registry.npmjs.org/@netless/app-iframe-bridge/-/app-iframe-bridge-0.0.2.tgz#308ea74220b83abf077395d6c819778ffa63b4ad"
+  integrity sha512-G7wZoX0CjqVBGeP0eYp8e7OYxRIN+vNwZJPxO45Gv4e8Nb/i3hF82F8FALaiLgWC89HG74XGNa98DJ3R+wSz2g==
+
 "@netless/app-media-player@0.1.0-beta.5":
   version "0.1.0-beta.5"
   resolved "https://registry.npmjs.org/@netless/app-media-player/-/app-media-player-0.1.0-beta.5.tgz#13ad8680be81503f5dc48c4c4e9848ba15b76e5a"