@dao42/d42paas-front 0.4.8 → 0.4.9

package/src/components/LiveContent/video.tsx

@@ -1,213 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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);
-  //   ;
-  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

@@ -1,64 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,180 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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;