@dao42/d42paas-front 0.4.5 → 0.4.6

package/src/components/FileTree/index.tsx

@@ -0,0 +1,477 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+import { Tree, ControlledTreeEnvironment } from 'react-complex-tree';
+import { TreeItem, TreeItemIndex } from 'react-complex-tree/lib/esm/types';
+import { oTStore } from '~/stores';
+import { useOT } from '~/hooks';
+import { IsMe } from '~/helpers';
+import { userListStore, userStore } from '~/stores/oTStore';
+
+export type FileSystemData = {
+  type: 'DIRECTORY' | 'FILE';
+  name: string;
+  children: FileSystemData[];
+};
+
+export type UploadFile = {
+  path: string;
+  content: string;
+};
+
+export type AddedFiles = {
+  target: string;
+  files: UploadFile[];
+};
+
+interface FileTreeProps {
+  onCustomSelect?: (items: TreeItemIndex[], treeId?: string) => void | null;
+  onCustomExpand?: (fileData: AddedFiles) => void | null;
+  onCustomFocus?: (fileData: AddedFiles) => void | null;
+  onCustomCollapse?: (fileData: AddedFiles) => void | null;
+  onCustomUpload?: (fileData: AddedFiles) => void | null;
+}
+
+function addChildrenArray(children, parent) {
+  for (let i = 0; i < children.length; i++) {
+    if (children[i].type === 'DIRECTORY') {
+      parent.children.push(`${parent.index}${children[i].name}/`);
+    } else {
+      parent.children.push(`${parent.index}${children[i].name}`);
+    }
+  }
+}
+
+function formatFileToTree(
+  data: FileSystemData,
+): Record<TreeItemIndex, TreeItem<string>> {
+  if (!data) return;
+  const formatData: Record<TreeItemIndex, TreeItem<string>> = {};
+  const root = data.name;
+
+  formatData[root] = {
+    index: root,
+    children: [],
+    hasChildren: true,
+    data: root,
+  };
+  addChildrenArray(data.children, formatData[root]);
+
+  let nodeChildren = [...data.children];
+  let pathChildren = [...formatData[root].children];
+
+  while (nodeChildren.length) {
+    const size = nodeChildren.length;
+    for (let i = 0; i < size; i++) {
+      const child = nodeChildren.shift();
+      const path = pathChildren.shift();
+      nodeChildren = nodeChildren.concat(child.children);
+
+      switch (child.type) {
+        case 'DIRECTORY':
+          const dirPath = path;
+          formatData[dirPath] = {
+            index: dirPath,
+            hasChildren: true,
+            children: [],
+            data: child.name,
+          };
+          addChildrenArray(child.children, formatData[dirPath]);
+          pathChildren = pathChildren.concat(formatData[dirPath].children);
+          break;
+        case 'FILE':
+          const filePath = path;
+          formatData[filePath] = {
+            index: filePath,
+            hasChildren: false,
+            data: child.name,
+          };
+          break;
+        default:
+          break;
+      }
+    }
+  }
+  return formatData;
+}
+
+// FileTreeProps
+const FileTree: React.FC<FileTreeProps> = ({
+  onCustomSelect,
+  onCustomUpload,
+  // ...props
+}) => {
+  const addedFolder: AddedFiles = { target: '', files: [] };
+  const io = useOT((state) => state.socket);
+
+  const [focusedItem, setFocusedItem] = useState<string>();
+  const [expandedItems, setExpandedItems] = useState([]);
+  const [selectedItems, setSelectedItems] = useState([]);
+  const [remoteUserList, setRemoteUserList] = useState({});
+  const treeRef = useRef(null);
+  const { CRDTInfo, dockerInfo } = oTStore((state) => state);
+
+  /**
+   * @description initial tree structure area
+   * */
+  const { fileTree } = oTStore((state) => state);
+  const [treeData, setTreeData] = useState<
+    Record<TreeItemIndex, TreeItem<string>>
+  >({});
+  useEffect(() => {
+    if (oTStore.getState().appStatus === 'replay') {
+      setSelectedItems([]);
+      setExpandedItems([]);
+    }
+    const newData = formatFileToTree(fileTree.data);
+    setSelectedItems(selectedItems.filter((item) => newData[item]));
+    setExpandedItems(expandedItems.filter((item) => newData[item]));
+    setTreeData(newData);
+  }, [fileTree]);
+
+  /* 切换dockerInfo时候清空选项缓存 */
+  useEffect(() => {
+    setSelectedItems([]);
+    setExpandedItems([]);
+  }, [dockerInfo]);
+
+  /**
+   * @description fundamental event listener: onSelect, onExpand, onCollapse, onFocus...
+   * */
+  const onSelect = (items: TreeItemIndex[]) => {
+    if (items.length === 1) {
+      setSelectedItems(items);
+      if (oTStore.getState().appStatus === 'code') {
+        const crdt: D42_FrontType.CRDT = {
+          timestamp: Date.now().toString(),
+          userInfo: userStore.getState().userInfo,
+          editor: {
+            extraInfo: {
+              messageId: '1',
+              playgroundId: oTStore.getState().playgroundInfo.playgroundId,
+            },
+            evtType: 'File',
+          },
+          file: {
+            action: 'Get',
+            path: items[0],
+            // redisKey: ''
+          },
+        };
+        io.emit('fileContent', JSON.stringify(crdt));
+      }
+    }
+  };
+  const onExpand = (item: string) => {
+    setExpandedItems([...expandedItems, item]);
+  };
+  const onCollapse = (item: string) => {
+    setExpandedItems(
+      expandedItems.filter((expandedItemIndex) => expandedItemIndex !== item),
+    );
+  };
+
+  /**
+   * @description logic of upload area
+   * @description function getStringFromFile => for getting base64 String from file Object
+   * @description function traverseFileTree => for flatten web outer transferData to file Array
+   * @description function onOriginDrop => for listening web origin drop event, getting web outer transferData, uploading file list
+   * @description useEffect => add origin event listener for uploading files
+   * @description function onUploadFile => io interface for uploading
+   * */
+  const getStringFromFile = async (file: File): Promise<string> => {
+    const base64String: string = await new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = (e) => {
+        resolve(e.target.result as string);
+      };
+    });
+    return base64String;
+  };
+
+  const traverseFileTree = async (item, path = '/'): Promise<UploadFile[]> => {
+    const data: UploadFile[] = await new Promise((resolve) => {
+      if (item.isFile) {
+        // Get file
+        item.file(async (file) => {
+          resolve([
+            {
+              path: `${path}${file.name}`,
+              content: await getStringFromFile(file),
+            },
+          ]);
+        });
+      } else if (item.isDirectory) {
+        // Get folder contents
+        let result = [
+          {
+            path: `${path}${item.name}/`,
+            content: '',
+          },
+        ];
+        const dirReader = item.createReader();
+        dirReader.readEntries(async (entries) => {
+          for (let i = 0; i < entries.length; i++) {
+            result = result.concat(
+              await traverseFileTree(entries[i], `${path}${item.name}/`),
+            );
+          }
+          resolve(result);
+        });
+      }
+    });
+    return data;
+  };
+
+  const onOriginDrop = async (event) => {
+    event.preventDefault();
+
+    let buttonElement = event.target;
+    while (buttonElement && buttonElement.tagName?.toLowerCase() !== 'button') {
+      buttonElement = buttonElement.lastChild;
+    }
+    const node = buttonElement ? buttonElement.dataset['rctItemId'] : '/';
+    if (node[node.length - 1] !== '/') {
+      addedFolder.target = `${node.split('/').slice(0, -1).join('/')}/`;
+    } else {
+      addedFolder.target = node;
+    }
+    const items = event.dataTransfer.items;
+    if (items.length === 0) return;
+    for (let i = 0; i < items.length; i++) {
+      // webkitGetAsEntry is where the magic happens
+      const item = items[i].webkitGetAsEntry();
+      if (item) {
+        addedFolder.files = addedFolder.files.concat(
+          await traverseFileTree(item),
+        );
+      }
+    }
+    buttonElement?.parentNode.classList.remove(
+      'rct-tree-item-title-container-selected',
+    );
+    buttonElement?.parentNode.parentNode.classList.remove(
+      'rct-tree-item-li-selected',
+    );
+    if (onCustomUpload) {
+      onCustomUpload({ ...addedFolder });
+    } else {
+      onUploadFile(JSON.stringify(addedFolder));
+    }
+    addedFolder.target = '';
+    addedFolder.files = [];
+  };
+
+  useEffect(() => {
+    if (treeRef.current) {
+      treeRef.current.removeEventListener('drop', onOriginDrop);
+      treeRef.current.addEventListener('drop', onOriginDrop, false);
+      treeRef.current.addEventListener(
+        'dragover',
+        (e) => {
+          if (e.dataTransfer.items.length === 0) return;
+          e.preventDefault();
+          e.stopPropagation();
+        },
+        false,
+      );
+      treeRef.current.addEventListener(
+        'dragenter',
+        (e) => {
+          if (e.dataTransfer.items.length === 0) return;
+          e.preventDefault();
+          e.stopPropagation();
+          if (e.target.tagName.toLowerCase() === 'button') {
+            e.target.parentNode.classList.add(
+              'rct-tree-item-title-container-selected',
+            );
+            e.target.parentNode.parentNode.classList.add(
+              'rct-tree-item-li-selected',
+            );
+          }
+        },
+        false,
+      );
+      treeRef.current.addEventListener(
+        'dragleave',
+        (e) => {
+          if (e.dataTransfer.items.length === 0) return;
+          e.preventDefault();
+          e.stopPropagation();
+          if (e.target.tagName.toLowerCase() === 'button') {
+            e.target.parentNode.classList.remove(
+              'rct-tree-item-title-container-selected',
+            );
+            e.target.parentNode.parentNode.classList.remove(
+              'rct-tree-item-li-selected',
+            );
+          }
+        },
+        false,
+      );
+    }
+  }, [treeRef]);
+
+  const onUploadFile = (payload: string) => {
+    io.emit('upload', payload);
+  };
+
+  /**
+   * @description remote user operation will be synchronized in other or local view
+   * */
+  useEffect(() => {
+    const user = userListStore
+      .getState()
+      .userList.find((item) => item.uuid === CRDTInfo.userInfo.uuid);
+    if (CRDTInfo?.editor?.evtType === 'File' && user) {
+      const path = CRDTInfo.file.path as string;
+      if (!IsMe(CRDTInfo.userInfo)) {
+        setRemoteUserList((oldUserListItem) => {
+          const userListItem = { ...oldUserListItem };
+          // clear old data
+          const remoteUserListObj = Object.entries(userListItem);
+          for (const iteratorItem of remoteUserListObj) {
+            const [key, value] = iteratorItem as [string, any[]];
+            const index = value.findIndex((item) => item.uuid === user.uuid);
+            if (index > -1) {
+              userListItem[key].splice(index, 1);
+              if (userListItem[key].length === 0) {
+                delete userListItem[key];
+              }
+              break;
+            }
+          }
+          //append new data
+          if (userListItem[path]) {
+            userListItem[path].push({
+              uuid: user.uuid,
+              color: user.color,
+              avatar: user.avatar,
+            });
+          } else {
+            userListItem[path] = [
+              {
+                uuid: user.uuid,
+                color: user.color,
+                avatar: user.avatar,
+              },
+            ];
+          }
+          return userListItem;
+        });
+        if (path[path.length - 1] === '/') {
+          const index = expandedItems.indexOf(path);
+          if (index === -1) {
+            onExpand(path);
+          } else {
+            onCollapse(path);
+          }
+        }
+      } else if (oTStore.getState().appStatus === 'replay') {
+        onSelect([path]);
+        if (path[path.length - 1] === '/') {
+          const index = expandedItems.indexOf(path);
+          if (index === -1) {
+            onExpand(path);
+          } else {
+            onCollapse(path);
+          }
+        }
+      }
+    }
+  }, [CRDTInfo]);
+
+  return (
+    <div ref={treeRef} style={{ height: '100%', overflow: 'auto' }}>
+      <ControlledTreeEnvironment
+        canDragAndDrop={true}
+        items={treeData}
+        onFocusItem={(item) => setFocusedItem(item.index as string)}
+        onExpandItem={(item) => {
+          onExpand(item.index as string);
+        }}
+        onCollapseItem={(item) => {
+          onCollapse(item.index as string);
+        }}
+        getItemTitle={(item) => item.data}
+        viewState={{
+          ['tree-1']: {
+            focusedItem,
+            expandedItems,
+            selectedItems,
+          },
+        }}
+        onSelectItems={(items) => {
+          onSelect(items);
+          onCustomSelect?.(items);
+        }}
+        renderItem={({ title, arrow, depth, context, children }) => {
+          return (
+            <div
+              {...context.itemContainerWithChildrenProps}
+              className={[
+                'rct-tree-item-li',
+                context.isSelected ? 'rct-tree-item-li-selected' : '',
+                context.isExpanded ? 'rct-tree-item-li-expanded' : '',
+                context.isFocused ? 'rct-tree-item-li-focused' : '',
+                children ? 'rct-tree-item-li-hasChildren' : '',
+              ].join(' ')}
+            >
+              <div
+                className={[
+                  'rct-tree-item-title-container',
+                  context.isSelected
+                    ? 'rct-tree-item-title-container-selected'
+                    : '',
+                  context.isExpanded
+                    ? 'rct-tree-item-title-container-expanded'
+                    : '',
+                  context.isFocused
+                    ? 'rct-tree-item-title-container-focused'
+                    : '',
+                  children ? 'rct-tree-item-title-container-hasChildren' : '',
+                ].join(' ')}
+                style={{ paddingLeft: `${depth}0px` }}
+              >
+                {arrow}
+                <button
+                  {...context.itemContainerWithoutChildrenProps}
+                  {...context.interactiveElementProps}
+                  className={[
+                    'rct-tree-item-button',
+                    context.isSelected ? 'rct-tree-item-button-selected' : '',
+                    context.isExpanded ? 'rct-tree-item-button-expanded' : '',
+                    context.isFocused ? 'rct-tree-item-button-focused' : '',
+                    children ? 'rct-tree-item-button-hasChildren' : '',
+                  ].join(' ')}
+                >
+                  {title}
+                </button>
+                {remoteUserList[
+                  context.interactiveElementProps['data-rct-item-id']
+                ] &&
+                  remoteUserList[
+                    context.interactiveElementProps['data-rct-item-id']
+                  ].map((remoteUser) => (
+                    <div
+                      className="rct-tree-item-avatar rounded-full absolute border"
+                      key={remoteUser.uuid}
+                      style={{
+                        borderColor: remoteUser.color,
+                        backgroundImage: `url(${remoteUser.avatar})`,
+                      }}
+                    ></div>
+                  ))}
+              </div>
+              {children}
+            </div>
+          );
+        }}
+      >
+        <Tree treeId="tree-1" rootItem="/" treeLabel="File Tree" />
+      </ControlledTreeEnvironment>
+    </div>
+  );
+};
+
+export { FileTree };

package/src/components/LiveContent/index.tsx

@@ -0,0 +1,221 @@
+import styled from '@emotion/styled';
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { Conn, D42RTC, ID, Events } from '@dao42/d42paas_rtc';
+import VideoComponent from '~/components/LiveContent/video';
+import { IsMe } from '~/helpers';
+import { oTStore, userStore } from '~/stores/oTStore';
+import { getLocalMedia } from '~/helpers/collections/idb';
+
+const LiveLayout = styled.div`
+  button {
+    color: #fff;
+    margin: 3px;
+    background: #374151;
+    padding: 3px;
+    border-radius: 3px;
+  }
+`;
+
+const VideoLayout = styled.div`
+  position: fixed;
+  right: 20px;
+  top: 20px;
+  width: 300px;
+  min-height: 225px;
+  z-index: 10;
+  border: 1px solid #d4d4d4;
+  border-radius: 4px;
+  background-color: #d4d4d4;
+`;
+
+const currentUserId = userStore.getState().userInfo.uuid;
+
+export interface UserMedia {
+  id: string;
+  videoStream?: MediaStream | null;
+  audioStream?: MediaStream | null;
+  segmentId?: string;
+}
+
+const LiveContent: React.FC<{
+  count?: number;
+}> = ({}) => {
+  const [callingUserMedias, setCallingUserMedias] = useState<UserMedia[]>([]);
+  const [d42rtc, setD42RTC] = useState<D42RTC>(null);
+  const [joining, setJoining] = useState<boolean>(false);
+  const [visible, setVisible] = useState<boolean>(false);
+  const [replaying, setReplaying] = useState<boolean>(false);
+  const [segmentId, setSegmentId] = useState<string[]>(['']);
+
+  const [currentID] = useState<ID>({
+    // TODO: this need change
+    uid: currentUserId,
+    cid: oTStore.getState().playgroundInfo.playgroundId,
+    sid: '0',
+  });
+
+  const initRTC = (): void => {
+    setD42RTC((d42rtc) => {
+      if (d42rtc) return d42rtc;
+      // TODO delete Conn
+      const conn = new Conn({
+        send: () => {},
+      });
+
+      const rtc = new D42RTC(
+        'https://develop.1024paas.com',
+        currentID,
+        ['agora'],
+        conn,
+      );
+      if (localStorage.getItem('d42rtc')) {
+        rollBackRTCState(rtc);
+      }
+      rtc.onVideoStream = (id: ID, stream: MediaStream) => {
+        setVisible(true);
+        maintainUserMediaList({
+          id: id.uid,
+          videoStream: stream,
+        });
+      };
+      rtc.onAudioStream = (id: ID, stream: MediaStream) => {
+        setVisible(true);
+        maintainUserMediaList({
+          id: id.uid,
+          audioStream: stream,
+        });
+      };
+
+      rtc.on(Events.userAudioClose, (id: ID) => {
+        const audio = document.querySelector(
+          `#audio-${id.uid}`,
+        ) as HTMLAudioElement;
+        audio.srcObject = null;
+        audio.pause();
+      });
+      rtc.on(Events.userVideoClose, (id: ID) => {
+        closeVideoWindow(id.uid);
+      });
+      return rtc;
+    });
+  };
+
+  const maintainUserMediaList = (userMedia: UserMedia) => {
+    setCallingUserMedias((callingUserMedias) => {
+      const existIndex = callingUserMedias.findIndex(
+        (item) => item.id === userMedia.id,
+      );
+      if (existIndex === -1) {
+        if (userMedia.id === currentUserId) {
+          return [userMedia, ...callingUserMedias];
+        } else {
+          return [...callingUserMedias, userMedia];
+        }
+      }
+      if (existIndex > -1) {
+        const existCallingUserMedia = callingUserMedias[existIndex];
+        const newCallingUserMedia = { ...existCallingUserMedia, ...userMedia };
+        callingUserMedias.splice(existIndex, 1, newCallingUserMedia);
+        return [...callingUserMedias];
+      }
+    });
+  };
+
+  const rollBackRTCState = (rtc: D42RTC) => {
+    rtc.setState(JSON.parse(localStorage.getItem('d42rtc')));
+  };
+
+  const joinOrLeaveHome = (rtc, joining) => {
+    setJoining(joining);
+    if (joining) {
+      rtc.join();
+    } else {
+      rtc.leave();
+      localStorage.removeItem('d42rtc');
+    }
+  };
+
+  const startVideo = (rtc: D42RTC) => {
+    setReplaying(false);
+    setVisible(true);
+    rtc.startVideo();
+  };
+
+  const closeVideoWindow = (uuid) => {
+    setCallingUserMedias((callingUserMedias) => {
+      return callingUserMedias.filter((item) => item.id !== uuid);
+    });
+  };
+
+  const replayMedia = async () => {
+    const media = await getLocalMedia();
+    setReplaying(true);
+    setCallingUserMedias([media[0].userInfo.uuid]);
+    setSegmentId([media[0].media.extraInfo.segmentId]);
+    setVisible(true);
+  };
+
+  const handleLocalAction = () => {};
+
+  useEffect(() => {
+    if (d42rtc) {
+      localStorage.setItem('d42rtc', JSON.stringify(d42rtc.getState()));
+    }
+    if (callingUserMedias.length === 0) {
+      setVisible(false);
+    }
+  }, [callingUserMedias]);
+
+  useEffect(() => {
+    initRTC();
+  }, []);
+
+  return (
+    <LiveLayout className="flex items-center">
+      {joining ? (
+        <>
+          <button
+            className="button"
+            onClick={() => joinOrLeaveHome(d42rtc, false)}
+          >
+            离开房间
+          </button>
+          <button className="button" onClick={() => startVideo(d42rtc)}>
+            发起视频
+          </button>
+        </>
+      ) : (
+        <button
+          className="button"
+          onClick={() => joinOrLeaveHome(d42rtc, true)}
+        >
+          加入房间
+        </button>
+      )}
+      <button className="button" onClick={replayMedia}>
+        视频回放
+      </button>
+      {ReactDOM.createPortal(
+        <VideoLayout style={{ display: visible ? 'block' : 'none' }}>
+          {callingUserMedias.map((item, index) => (
+            <VideoComponent
+              key={item.id}
+              userMedia={item}
+              isRemote={!IsMe({ uuid: item.id })}
+              rtc={d42rtc}
+              rtcID={currentID}
+              currentId={item.id}
+              closeVideoWindow={closeVideoWindow}
+              replaying={replaying}
+              segmentId={segmentId[index]}
+            />
+          ))}
+        </VideoLayout>,
+        document.body,
+      )}
+    </LiveLayout>
+  );
+};
+
+export default LiveContent;