Feature/#5 openvidu

README.md

@@ -6,7 +6,7 @@ https://github.com/mooyaho-webrtc/mooyaho
 
 
 https://github.com/mqttjs/MQTT.js/#mqttclientstreambuilder-options
-
+https://github.com/OpenVidu/openvidu-call-react/blob/dea85b34254e8540c0c9ca6874bb90f60603101c/openvidu-call-react/src/components/VideoRoomComponent.js
 
 ## TODO
 

apps/client/codegen.ts

@@ -2,14 +2,19 @@ import type { CodegenConfig } from '@graphql-codegen/cli'
 
 const config: CodegenConfig = {
   overwrite: true,
-  schema: 'http://localhost:4337/graphql',
-  documents: ['src/**/*.tsx'],
+  schema: 'http://192.168.0.137:4337/graphql',
+  documents: ['src/**/*.{tsx,ts}'],
   ignoreNoDocuments: true,
   generates: {
-    './src/__api__/types.ts': {
+    // './src/__api__/types.ts': {
+    // plugins: ['typescript', 'typescript-operations'],
+    // },
+    './src/gql/': {
       plugins: ['typescript', 'typescript-operations'],
+      preset: 'client',
     },
   },
 }
 
 export default config
+

apps/client/package.json

@@ -7,13 +7,16 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "codegen": "graphql-codegen --config codegen.ts"
+    "codegen": "graphql-codegen --config codegen.ts",
+    "codegen:watch": "graphql-codegen --config codegen.ts --watch"
   },
   "dependencies": {
     "@apollo/client": "^3.7.7",
     "@types/js-cookie": "^3.0.2",
     "graphql": "^16.6.0",
     "js-cookie": "^3.0.1",
+    "openvidu-browser": "^2.26.0",
+    "openvidu-react": "^2.26.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.0",

apps/client/src/components/VideoArea.tsx

@@ -0,0 +1,24 @@
+import UserModel from 'model/UserModel'
+import React, { FC, useEffect, useRef } from 'react'
+
+interface VideoAreaProps {
+  user: UserModel
+}
+
+const VideoArea: FC<VideoAreaProps> = ({ user }) => {
+  const videoRef = useRef<HTMLVideoElement>(null)
+  useEffect(() => {
+    if (user.getStreamManager()) {
+      user.getStreamManager()?.addVideoElement(videoRef.current!)
+    }
+  }, [user])
+  return (
+    <div>
+      <video ref={videoRef} autoPlay>
+        <source />
+      </video>
+    </div>
+  )
+}
+
+export default VideoArea

apps/client/src/gql/fragment-masking.ts

@@ -0,0 +1,48 @@
+import { ResultOf, TypedDocumentNode as DocumentNode,  } from '@graphql-typed-document-node/core';
+
+
+export type FragmentType<TDocumentType extends DocumentNode<any, any>> = TDocumentType extends DocumentNode<
+  infer TType,
+  any
+>
+  ? TType extends { ' $fragmentName'?: infer TKey }
+    ? TKey extends string
+      ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
+      : never
+    : never
+  : never;
+
+// return non-nullable if `fragmentType` is non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentNode<TType, any>,
+  fragmentType: FragmentType<DocumentNode<TType, any>>
+): TType;
+// return nullable if `fragmentType` is nullable
+export function useFragment<TType>(
+  _documentNode: DocumentNode<TType, any>,
+  fragmentType: FragmentType<DocumentNode<TType, any>> | null | undefined
+): TType | null | undefined;
+// return array of non-nullable if `fragmentType` is array of non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentNode<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentNode<TType, any>>>
+): ReadonlyArray<TType>;
+// return array of nullable if `fragmentType` is array of nullable
+export function useFragment<TType>(
+  _documentNode: DocumentNode<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentNode<TType, any>>> | null | undefined
+): ReadonlyArray<TType> | null | undefined;
+export function useFragment<TType>(
+  _documentNode: DocumentNode<TType, any>,
+  fragmentType: FragmentType<DocumentNode<TType, any>> | ReadonlyArray<FragmentType<DocumentNode<TType, any>>> | null | undefined
+): TType | ReadonlyArray<TType> | null | undefined {
+  return fragmentType as any;
+}
+
+
+export function makeFragmentData<
+  F extends DocumentNode,
+  FT extends ResultOf<F>
+>(data: FT, _fragment: F): FragmentType<F> {
+  return data as FragmentType<F>;
+}

apps/client/src/gql/gql.ts

@@ -0,0 +1,62 @@
+/* eslint-disable */
+import * as types from './graphql';
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+/**
+ * Map of all GraphQL operations in the project.
+ *
+ * This map has several performance disadvantages:
+ * 1. It is not tree-shakeable, so it will include all operations in the project.
+ * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
+ * 3. It does not support dead code elimination, so it will add unused operations.
+ *
+ * Therefore it is highly recommended to use the babel-plugin for production.
+ */
+const documents = {
+    "\n  query getToken($sessionId: String!) {\n    getToken(sessionId: $sessionId) {\n      ok\n      token\n    }\n  }\n": types.GetTokenDocument,
+    "\n  query getSession($sessionId: String!) {\n    getSession(sessionId: $sessionId) {\n      ok\n      session {\n        sessionId\n        createdAt\n      }\n      error\n    }\n  }\n": types.GetSessionDocument,
+    "\n  query getTokenConnection($sessionId: String!) {\n    getTokenConnection(sessionId: $sessionId) {\n      ok\n      token\n      error\n    }\n  }\n": types.GetTokenConnectionDocument,
+    "\n  query getMe {\n    getMe {\n      ok\n      user {\n        id\n        nickname\n        createdAt\n        updatedAt\n        role\n        sessionId\n      }\n      error\n    }\n  }\n": types.GetMeDocument,
+    "\n  mutation login($LoginInput: LoginInput!) {\n    login(input: $LoginInput) {\n      ok\n      token\n      error\n      user {\n        id\n        nickname\n        updatedAt\n        createdAt\n        role\n      }\n    }\n  }\n": types.LoginDocument,
+};
+
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ *
+ *
+ * @example
+ * ```ts
+ * const query = gql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
+ * ```
+ *
+ * The query argument is unknown!
+ * Please regenerate the types.
+ */
+export function graphql(source: string): unknown;
+
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query getToken($sessionId: String!) {\n    getToken(sessionId: $sessionId) {\n      ok\n      token\n    }\n  }\n"): (typeof documents)["\n  query getToken($sessionId: String!) {\n    getToken(sessionId: $sessionId) {\n      ok\n      token\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query getSession($sessionId: String!) {\n    getSession(sessionId: $sessionId) {\n      ok\n      session {\n        sessionId\n        createdAt\n      }\n      error\n    }\n  }\n"): (typeof documents)["\n  query getSession($sessionId: String!) {\n    getSession(sessionId: $sessionId) {\n      ok\n      session {\n        sessionId\n        createdAt\n      }\n      error\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query getTokenConnection($sessionId: String!) {\n    getTokenConnection(sessionId: $sessionId) {\n      ok\n      token\n      error\n    }\n  }\n"): (typeof documents)["\n  query getTokenConnection($sessionId: String!) {\n    getTokenConnection(sessionId: $sessionId) {\n      ok\n      token\n      error\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query getMe {\n    getMe {\n      ok\n      user {\n        id\n        nickname\n        createdAt\n        updatedAt\n        role\n        sessionId\n      }\n      error\n    }\n  }\n"): (typeof documents)["\n  query getMe {\n    getMe {\n      ok\n      user {\n        id\n        nickname\n        createdAt\n        updatedAt\n        role\n        sessionId\n      }\n      error\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  mutation login($LoginInput: LoginInput!) {\n    login(input: $LoginInput) {\n      ok\n      token\n      error\n      user {\n        id\n        nickname\n        updatedAt\n        createdAt\n        role\n      }\n    }\n  }\n"): (typeof documents)["\n  mutation login($LoginInput: LoginInput!) {\n    login(input: $LoginInput) {\n      ok\n      token\n      error\n      user {\n        id\n        nickname\n        updatedAt\n        createdAt\n        role\n      }\n    }\n  }\n"];
+
+export function graphql(source: string) {
+  return (documents as any)[source] ?? {};
+}
+
+export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<  infer TType,  any>  ? TType  : never;