@dao42/d42paas-front 0.4.1 → 0.4.6

package/src/components/LiveContent/video.tsx

@@ -0,0 +1,213 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { D42RTC, ID, Events } from '@dao42/d42paas_rtc';
+import styled from '@emotion/styled';
+import { useOT } from '~/hooks';
+import { pick } from 'lodash';
+import { userStore } from '~/stores/oTStore';
+import { UserMedia } from '~/components/LiveContent/index';
+
+interface VideoComponentProps {
+  userMedia: UserMedia;
+  rtc: D42RTC;
+  isRemote?: boolean;
+  rtcID?: ID;
+  currentId?: string;
+  closeVideoWindow?: (uuid: string) => void;
+  replaying?: boolean;
+  segmentId?: string;
+}
+
+const VideoWrapper = styled.div`
+  position: relative;
+  min-width: 300px;
+  min-height: 225px;
+`;
+
+const ToolMask = styled.span`
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 30px;
+  display: flex;
+  align-items: center;
+
+  i {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 18px;
+    color: white;
+    margin-left: 8px;
+    cursor: pointer;
+    border-radius: 50%;
+
+    &.phone-down {
+      color: red;
+    }
+
+    &:hover {
+      background-color: rgba(108, 108, 108, 0.7);
+    }
+  }
+`;
+
+const MicroPhoneComponent: React.FC<{
+  audioOpening: boolean;
+  onCloseAudio: () => void;
+  onOpenAudio: () => void;
+}> = ({ audioOpening, onCloseAudio, onOpenAudio }) => {
+  return audioOpening ? (
+    <i className="d42 microphone" onClick={onCloseAudio} />
+  ) : (
+    <i className="d42 microphone-off" onClick={onOpenAudio} />
+  );
+};
+
+const VideoPlayingComponent: React.FC<{
+  videoPlaying: boolean;
+  onCloseVideo: () => void;
+  onOpenVideo: () => void;
+}> = ({ videoPlaying, onCloseVideo, onOpenVideo }) => {
+  return videoPlaying ? (
+    <i className="d42 video-off" onClick={onCloseVideo} />
+  ) : (
+    <i className="d42 video" onClick={onOpenVideo} />
+  );
+};
+
+const RecordComponent: React.FC<{
+  recording: boolean;
+  onStopRecord: () => void;
+  onStartRecord: () => void;
+}> = ({ recording, onStopRecord, onStartRecord }) => {
+  return recording ? (
+    <i className="d42 stop text-red-600" onClick={onStopRecord} />
+  ) : (
+    <i className="d42 record text-red-600" onClick={onStartRecord} />
+  );
+};
+
+const VideoComponent: React.FC<VideoComponentProps> = ({
+  userMedia,
+  rtc,
+  isRemote,
+  rtcID,
+  currentId,
+  closeVideoWindow,
+  replaying,
+  segmentId,
+}) => {
+  const io = useOT.getState().socket;
+  const [audioOpening, setAudioOpening] = useState<boolean>(false);
+  const [videoPlaying, setVideoPlaying] = useState<boolean>(true);
+  const [recording, setRecording] = useState<boolean>(false);
+
+  const onOpenAudio = () => {
+    setAudioOpening(true);
+    rtc.startAudio();
+  };
+  const onCloseAudio = () => {
+    setAudioOpening(false);
+    rtc.closeAudio(rtcID);
+  };
+  const closeWindow = () => {
+    closeVideoWindow(currentId);
+  };
+
+  const onStartRecord = async () => {
+    setRecording(true);
+    const segmentId = await rtc.startRecord();
+    const crdt: D42_FrontType.CRDT = {
+      timestamp: Date.now().toString(),
+      userInfo: pick(userStore.getState().userInfo, 'uuid'),
+      media: {
+        extraInfo: {
+          segmentId: segmentId,
+        },
+      },
+    };
+    io.emit('mediaRecord', JSON.stringify(crdt));
+  };
+  const onStopRecord = () => {
+    setRecording(false);
+  };
+
+  const onOpenVideo = async () => {
+    setVideoPlaying(true);
+    rtc.startVideo();
+  };
+  const onCloseVideo = () => {
+    setVideoPlaying(false);
+    rtc.closeVideo(rtcID);
+  };
+
+  useEffect(() => {
+    if (!rtc) return;
+    const video = document.querySelector(
+      `#video-${currentId}`,
+    ) as HTMLVideoElement;
+    video.autoplay = true;
+    video.muted = true;
+    video.srcObject = userMedia.videoStream;
+
+    const audio = document.querySelector(
+      `#audio-${currentId}`,
+    ) as HTMLVideoElement;
+    audio.srcObject = userMedia.audioStream;
+    audio.play();
+  }, [rtc, userMedia]);
+
+  useEffect(() => {
+    if (!rtc) return;
+    if (replaying) {
+      if (!segmentId) return;
+      const video = document.querySelector(
+        `#video-${currentId}`,
+      ) as HTMLVideoElement;
+      video.autoplay = true;
+      video.muted = true;
+      rtc.playbackSegment(segmentId, video);
+      return;
+    }
+  }, [rtc, segmentId]);
+
+  return (
+    <VideoWrapper>
+      <div
+        className="absolute text-red-600 top-1 right-3 z-10 cursor-pointer"
+        onClick={closeWindow}
+      >
+        x
+      </div>
+      <video id={'video-' + currentId} />
+      <audio id={'audio-' + currentId} />
+      <ToolMask>
+        {isRemote ? (
+          '音量'
+        ) : (
+          <>
+            <MicroPhoneComponent
+              audioOpening={audioOpening}
+              onOpenAudio={onOpenAudio}
+              onCloseAudio={onCloseAudio}
+            />
+            <VideoPlayingComponent
+              videoPlaying={videoPlaying}
+              onOpenVideo={onOpenVideo}
+              onCloseVideo={onCloseVideo}
+            />
+            <RecordComponent
+              recording={recording}
+              onStartRecord={onStartRecord}
+              onStopRecord={onStopRecord}
+            />
+          </>
+        )}
+      </ToolMask>
+    </VideoWrapper>
+  );
+};
+
+export default VideoComponent;

package/src/components/LottieAnim/index.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect, useRef } from 'react';
+import Lottie from 'lottie-web';
+import styled from '@emotion/styled';
+
+// https://assets10.lottiefiles.com/packages/lf20_fydpgJ.json
+// https://assets10.lottiefiles.com/packages/lf20_n2b0ZQ.json
+// https://assets10.lottiefiles.com/packages/lf20_2OWTcY.json
+// https://assets10.lottiefiles.com/private_files/lf30_iuxli0di.json
+
+const LottieAnimLayout = styled.div`
+  width: 100%;
+  height: 100%;
+`;
+
+interface LottieType {
+  src?: string;
+}
+
+const LottieAnim: React.FC<LottieType> = ({ src }) => {
+  const SkeletonRef = useRef<HTMLDivElement>(null);
+  //   debugger;
+  useEffect(() => {
+    Lottie.loadAnimation({
+      container: SkeletonRef.current, // the dom element that will contain the animation
+      renderer: 'svg',
+      loop: true,
+      autoplay: true,
+      path: src,
+    });
+  }, []);
+
+  return (
+    // <div ref={SkeletonRef} style={{ width: '100%', height: '100%' }}></div>
+    <LottieAnimLayout
+      ref={SkeletonRef}
+      //   style={{ width: '100%', height: '100%' }}
+    />
+  );
+};
+
+export { LottieAnim };

package/src/components/Message/index.tsx

@@ -0,0 +1,64 @@
+import React, { useEffect } from 'react';
+import { Message as MessageComponent, toaster, Notification } from 'rsuite';
+import create from 'zustand';
+
+export type MsgType = {
+  type: 'info' | 'success' | 'warning' | 'error';
+  content?: string | number;
+  setMessage?: ({
+    type,
+    content,
+  }: {
+    type: MsgType['type'];
+    content: MsgType['content'];
+  }) => void;
+  closable?: boolean;
+  setClosable?: (bol: boolean) => void;
+};
+// Omit<MsgType, 'setMessage'>
+export const messageStore = create<MsgType>((set) => ({
+  type: 'info',
+  content: '',
+  setMessage: ({ type, content }) =>
+    set(() => ({
+      type,
+      content,
+    })),
+  closable: true,
+  setClosable: (bol) => set(() => ({ closable: bol })),
+}));
+
+export const Message = ({ type, content }) => {
+  // const { type, content, closable, setClosable } = messageStore.getState();
+
+  // useEffect(() => {
+  //   setClosable(false);
+  // }, [type, content]);
+  // useEffect(() => {
+  //   setTimeout(() => {
+  //     // setClosable(false);
+  //     // toaster.push(<MessageComponent>MessageComponent</MessageComponent>);
+  //     toaster.push(<Notification>message</Notification>, {
+  //       placement: 'topEnd',
+  //     });
+  //   }, 2000);
+  // }, []);
+
+  return (
+    <>
+      <MessageComponent
+        // full
+        showIcon
+        type={type}
+        // closable={closable}
+        closable={false}
+        // duration={0}
+        // onClose={() => {
+        //   setClosable(true);
+        // }}
+      >
+        {content}
+      </MessageComponent>
+    </>
+  );
+};

package/src/components/Model/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Button, ButtonToolbar, Modal as ModalContent } from 'rsuite';
+
+export const Modal = ({ open, onCancel, text }) => {
+  // const [, setOpen] = React.useState(false);
+  // const handleOpen = () => setOpen(true);
+  // const handleClose = () => setOpen(false);
+
+  return (
+    <div className="modal-container">
+      <ButtonToolbar>
+        <Button onClick={onCancel}>Disable</Button>
+      </ButtonToolbar>
+
+      <ModalContent
+        backdrop="static"
+        role="alertdialog"
+        open={open}
+        onClose={onCancel}
+        size="xs"
+      >
+        <ModalContent.Body>
+          {/* <RemindIcon
+            style={{
+              color: '#ffb300',
+              fontSize: 24,
+            }}
+          /> */}
+          {text}
+        </ModalContent.Body>
+        <ModalContent.Footer>
+          <Button onClick={onCancel} appearance="primary">
+            Ok
+          </Button>
+          <Button onClick={onCancel} appearance="subtle">
+            Cancel
+          </Button>
+        </ModalContent.Footer>
+      </ModalContent>
+    </div>
+  );
+};

package/src/components/OutputBrowser/index.tsx

@@ -0,0 +1,180 @@
+import React, { useEffect, useRef, useState } from 'react';
+import styled from '@emotion/styled';
+import { oTStore } from '~/stores/oTStore';
+
+const PROTOCOL = process.env.NODE_ENV === 'production' ? 'https://' : 'http://';
+
+export interface OutputBrowserProp {
+  url: string;
+}
+
+const NavBar = styled.div`
+  background-color: white;
+  height: 30px;
+  display: flex;
+  align-items: center;
+
+  i {
+    margin: 0 10px;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &.disabled {
+      color: #f2fffe;
+      &:hover {
+        background-color: white;
+      }
+    }
+
+    &:hover {
+      background-color: #e0e0e0;
+    }
+  }
+
+  input {
+    flex: 1;
+    display: inline-block;
+    height: 26px;
+    line-height: 26px;
+    padding: 0 8px;
+    border: 1px solid #adacac;
+    border-radius: 5px;
+  }
+`;
+
+const StopMask = styled.div`
+  width: 100%;
+  height: calc(100% - 30px);
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 18px;
+  color: #ffffff;
+  background-color: #5a5a5a;
+  opacity: 0.6;
+`;
+
+const OutputBrowser: React.FC<OutputBrowserProp> = ({ url, ...props }) => {
+  const pStatus = oTStore((state) => state.playgroundStatus);
+  const dStatus = oTStore((state) => state.dockerStatus);
+
+  const [playgroundStatus, setPlaygroundStatus] = useState('EMPTY');
+  const [dockerStatus, setDockerStatus] = useState('STOP');
+
+  const urlWithProtocol = (url): string => {
+    // TODO 解除循环渲染page组件
+    if (!url) return `${PROTOCOL}showmebug.com`;
+    if (url.indexOf('http://') !== 0 && url.indexOf('https://') !== 0) {
+      url = `${PROTOCOL}${url}`;
+    }
+    return url;
+  };
+
+  useEffect(() => {
+    setPlaygroundStatus(pStatus);
+  }, [pStatus]);
+  useEffect(() => {
+    setDockerStatus(dStatus);
+    setTimeout(() => {
+      onRefresh();
+    }, 800);
+  }, [dStatus]);
+
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const [iframeSrc, setIframeSrc] = useState(urlWithProtocol(url));
+  useEffect(() => {
+    setIframeSrc(urlWithProtocol(url));
+  }, [url]);
+
+  useEffect(() => {
+    // iframeRef.current.contentWindow.addEventListener('message', (e) => {
+    //   console.log(`post message from parent`, e.data);
+    //   switch (e.data) {
+    //     case 'forward':
+    //       iframeRef.current.contentWindow.history.forward();
+    //       return;
+    //     case 'backward':
+    //       iframeRef.current.contentWindow.history.back();
+    //       return;
+    //     case 'refresh':
+    //       console.log(`???????`);
+    //       iframeRef.current.contentWindow.location.reload();
+    //       return;
+    //   }
+    // });
+  }, [iframeRef]);
+
+  const onEnterKey = (e) => {
+    if (e.keyCode !== 13) return;
+    const url = urlWithProtocol(e.target.value);
+    setIframeSrc(url);
+    iframeRef.current.contentWindow.location.replace(url);
+  };
+
+  const onBackward = () => {
+    iframeRef.current.contentWindow.history.back();
+  };
+
+  const onForward = () => {
+    iframeRef.current.contentWindow.history.back();
+  };
+
+  const onRefresh = () => {
+    // iframeRef.current.contentWindow.location.reload();
+    iframeRef.current.contentWindow.location.replace(iframeSrc);
+  };
+
+  const onOpenInNewTab = () => {
+    window.open(iframeSrc);
+  };
+  useEffect(() => {
+    if (playgroundStatus === 'EMPTY') return;
+    if (playgroundStatus === 'ACTIVE' && dockerStatus === 'RUNNING') {
+      if (iframeSrc !== 'http://' && iframeSrc !== 'https://') {
+        iframeRef.current.contentWindow.location.replace(iframeSrc);
+      }
+    }
+  }, [playgroundStatus, dockerStatus]);
+  return (
+    <>
+      <NavBar>
+        {/*<i*/}
+        {/*  className="d42 text-2xl arrow-left cursor-pointer"*/}
+        {/*  onClick={onBackward}*/}
+        {/*/>*/}
+        {/*<i*/}
+        {/*  className="d42 text-2xl arrow-right cursor-pointer"*/}
+        {/*  onClick={onForward}*/}
+        {/*/>*/}
+        <i className="d42 text-xl reload cursor-pointer" onClick={onRefresh} />
+        <input
+          type="text"
+          value={iframeSrc}
+          onChange={(e) => setIframeSrc(e.target.value)}
+          onKeyDown={onEnterKey}
+        />
+        <i
+          className="d42 text-xl file-copy cursor-pointer"
+          onClick={onOpenInNewTab}
+        />
+      </NavBar>
+      {dockerStatus === 'STOP' && (
+        <StopMask>
+          <span>点击“运行”，启动应用</span>
+        </StopMask>
+      )}
+      <iframe
+        ref={iframeRef}
+        src={iframeSrc}
+        style={{ width: '100%', height: 'calc(100% - 30px)' }}
+      />
+    </>
+  );
+};
+
+export default OutputBrowser;

package/src/components/Skeleton/index.tsx

@@ -0,0 +1,41 @@
+import React, { PropsWithChildren, useEffect } from 'react';
+// import SkeletonComponent as  skeleton from 'react-loading-skeleton';
+import * as SkeletonComponent from 'react-loading-skeleton';
+import 'react-loading-skeleton/dist/skeleton.css';
+
+const Skeleton: React.FC<{
+  count?: number;
+}> = ({ count }) => {
+  // useEffect(() => {}, []);
+
+  return (
+    <SkeletonComponent.SkeletonTheme baseColor="#202020" highlightColor="#444">
+      <SkeletonComponent.default
+        wrapper={Box}
+        height={15}
+        count={count ? count : 5}
+      />
+      ;
+    </SkeletonComponent.SkeletonTheme>
+  );
+};
+
+function Box({ children }: PropsWithChildren<unknown>) {
+  return (
+    <div
+      style={{
+        // border: '1px solid #ccc',
+        display: 'block',
+        lineHeight: 1,
+        padding: '1rem',
+        marginTop: '0.5rem',
+        marginBottom: '0.5rem',
+        width: '100%',
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default Skeleton;

package/src/components/Tabs/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Nav, NavProps } from 'rsuite';
+
+interface TabsProps extends NavProps {
+  tabItems?: Array<{
+    eventKey: string;
+    itemName: string;
+  }>;
+}
+
+const Tabs = ({ activeKey, onSelect, tabItems, ...props }: TabsProps) => {
+  return (
+    <Nav {...props} activeKey={activeKey} onSelect={onSelect}>
+      {tabItems.map((item) => (
+        <Nav.Item eventKey={item.eventKey} key={item.eventKey}>
+          {item.itemName}
+        </Nav.Item>
+      ))}
+    </Nav>
+  );
+};
+
+export default Tabs;