adding yjs to frontend

app/backend-v2/src/index.ts

@@ -1,6 +1,7 @@
 import { serve } from "@hono/node-server"
 import { getOrCreateDocAndToken } from "@y-sweet/sdk"
 import { Hono } from "hono"
+import { cors } from "hono/cors"
 import winston from "winston"
 import { env } from "@/env"
 import { paths } from "@/openapi/nutsh"
@@ -11,6 +12,7 @@ const logger = winston.createLogger({
 })
 
 const app = new Hono()
+app.use("/yjs-client-token", cors())
 
 app.get("/config", (ctx) => {
   type Resp = paths["/config"]["get"]["responses"]["200"]["content"]["application/json"]
@@ -25,11 +27,12 @@ app.get("/config", (ctx) => {
 
 app.get("/yjs-client-token", async (ctx) => {
   const docId = ctx.req.query("doc")
-  if (docId) {
-    logger.info("requested yjs client token for an existing doc", { docId })
-  } else {
-    logger.info("requested yjs client token for a new doc")
+  if (!docId) {
+    ctx.status(400)
+    return ctx.text("missing doc id")
   }
+  logger.info("requested yjs client token for doc", { docId })
+
   const clientToken = await getOrCreateDocAndToken(env.YJS_SWEET_URI, docId)
   return ctx.json(clientToken)
 })

app/frontend/package.json

@@ -17,6 +17,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@react-hook/window-size": "^3.1.1",
     "@tanstack/react-query": "^4.14.1",
+    "@y-sweet/client": "^0.1.0",
     "antd": "^5.7.3",
     "crypto-js": "^4.1.1",
     "deep-equal": "^2.1.0",
@@ -41,6 +42,7 @@
     "ts-key-enum": "^2.0.12",
     "typescript": "^5.1.6",
     "uuid": "^9.0.0",
+    "yjs": "^13.6.10",
     "zundo": "^2.0.0-beta.5",
     "zustand": "^4.1.4"
   },

app/frontend/src/state/server/annotation.ts

@@ -1,3 +1,5 @@
+import * as Y from 'yjs';
+import {createYjsProvider} from '@y-sweet/client';
 import {useQuery, useMutation} from '@tanstack/react-query';
 
 import type {NutshClient, DefaultService, Video} from 'openapi/nutsh';
@@ -14,3 +16,32 @@ export const usePatchVideoAnnotation = (client: NutshClient) => {
       client.default.patchVideoAnnotation(req),
   });
 };
+
+export const useGetVideoAnnotationV2 = (client: NutshClient, id: Video['id']) =>
+  useQuery({
+    queryKey: ['getVideoAnnotationV2', id],
+    queryFn: async () => {
+      // TODO(xu): remove host hard coding
+      const url = new URL('http://localhost:3030/yjs-client-token');
+      url.searchParams.set('doc', id);
+      const res = await fetch(url.toString());
+      const clientToken = await res.json();
+
+      // create a Yjs document and connect it to the Y-Sweet server
+      const doc = new Y.Doc();
+      createYjsProvider(doc, clientToken, {disableBc: true});
+      const annoMap = doc.getMap('annotation');
+
+      // TODO(xu): no need to serialize back to a string after the transition to node is completed
+      let annotation_json = '';
+      let annotation_version = '';
+      if (annoMap.size === 0) {
+        return {annotation_json, annotation_version};
+      }
+
+      annotation_json = JSON.stringify(annoMap.toJSON());
+      annotation_version = doc.getText('version').toString();
+
+      return {annotation_json, annotation_version};
+    },
+  });