21 | {Array(maxLength)
22 | .fill('agora')
23 | .map((item, index) => (
24 |
= index + 1 ? 1 : 0.1})`,
30 | transition: 'all 0.3s ease-in'
31 | }}
32 | key={`${item}-${index}`}
33 | />
34 | ))}
35 |
36 | );
37 | };
38 |
39 |
--------------------------------------------------------------------------------
/src/ui-kit/components/svg-img/paths/clear.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { PathOptions } from '../svg-dict';
4 |
5 | export const path = (props: PathOptions) =>
6 |
7 |
8 |
9 |
10 |
11 | export const viewBox = '0 0 24 24';
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es6",
4 | "experimentalDecorators": true,
5 | "module": "esnext",
6 | "lib": [
7 | "dom",
8 | "dom.iterable",
9 | "esnext",
10 | "webworker"
11 | ],
12 | "outDir": "lib",
13 | "noImplicitAny": true,
14 | "noImplicitThis": true,
15 | "strictNullChecks": true,
16 | "allowJs": true,
17 | "skipLibCheck": true,
18 | "declaration": true,
19 | "esModuleInterop": true,
20 | "allowSyntheticDefaultImports": true,
21 | "strict": true,
22 | "forceConsistentCasingInFileNames": true,
23 | "noEmitHelpers": true,
24 | "noEmitOnError": false,
25 | "emitDeclarationOnly": true,
26 | "moduleResolution": "node",
27 | "resolveJsonModule": true,
28 | "isolatedModules": true,
29 | "jsx": "react-jsx",
30 | "noFallthroughCasesInSwitch": true,
31 | "baseUrl": ".",
32 | "paths": {
33 | "@classroom/*": ["src/*"],
34 | "agora-classroom-sdk": ["src/infra/api"]
35 | }
36 | },
37 | "include": [
38 | "src"
39 | ],
40 | "exclude": [
41 | "node_modules",
42 | "**/*/*.stories.tsx"
43 | ],
44 | }
45 |
--------------------------------------------------------------------------------
/src/ui-kit/components/input-number/index.css:
--------------------------------------------------------------------------------
1 | .fcr-input-number-wrapper {
2 | @apply fcr-text-level1 fcr-border fcr-border-solid fcr-border-divider;
3 | position: relative;
4 | width: 100%;
5 | height: 100%;
6 | min-width: 0;
7 | padding-left: 15px;
8 | font-size: 14px;
9 | line-height: 1.5715;
10 | border-radius: 4px;
11 | transition: all 0.3s;
12 | display: inline-flex;
13 | align-items: center;
14 | width: 150px;
15 | }
16 | .fcr-input-number-wrapper:hover,
17 | .fcr-input-number-focus {
18 | border-color: #357bf6;
19 | }
20 |
21 | .fcr-input-number-wrapper input {
22 | padding: 0;
23 | border: none;
24 | outline: none;
25 | background-color: transparent;
26 | width: 100%;
27 | }
28 |
29 | .fcr-input-number-wrapper input::-webkit-input-placeholder {
30 | /* WebKit browsers */
31 | color: #7b88a0;
32 | font-size: 14px;
33 | }
34 |
35 | .fcr-input-number-tail {
36 | padding-right: 6px;
37 | }
38 |
39 | .fcr-input-number-add:hover,
40 | .fcr-input-number-sub:hover {
41 | cursor: pointer;
42 | }
43 |
44 | .fcr-input-number-add.disabled polyline,
45 | .fcr-input-number-sub.disabled polyline {
46 | stroke: #a5adbb !important;
47 | }
48 |
--------------------------------------------------------------------------------
/src/ui-kit/components/roster/hooks.tsx:
--------------------------------------------------------------------------------
1 | import { useMemo } from 'react';
2 | import {
3 | defaultColumns,
4 | kickOutColumn,
5 | podiumColumn,
6 | grantBoardColumn,
7 | starsColumn,
8 | superviseColumn,
9 | } from './columns';
10 | import { Column } from './';
11 | import { SupportedFunction } from '..';
12 | import { sortBy } from 'lodash';
13 |
14 | export const useColumns = (functions: SupportedFunction[]) => {
15 | const showKickOut = functions.includes('kick');
16 |
17 | const cols = useMemo(() => {
18 | const cols = ([] as Column[]).concat(defaultColumns);
19 | if (functions.includes('kick')) {
20 | cols.push(kickOutColumn);
21 | }
22 | if (functions.includes('podium')) {
23 | cols.push(podiumColumn);
24 | }
25 |
26 | if (functions.includes('grant-board')) {
27 | cols.push(grantBoardColumn);
28 | }
29 |
30 | if (functions.includes('stars')) {
31 | cols.push(starsColumn);
32 | }
33 |
34 | // if (functions.includes('supervise-student')) {
35 | // cols.push(superviseColumn);
36 | // }
37 |
38 | return sortBy(cols, ['order']);
39 | }, [showKickOut]);
40 |
41 | return cols;
42 | };
43 |
--------------------------------------------------------------------------------
/src/ui-kit/components/svg-img/paths/normal-signal.tsx:
--------------------------------------------------------------------------------
1 |
2 | import React from 'react';
3 |
4 | import { PathOptions } from '../svg-dict';
5 |
6 | export const path = (props: PathOptions) =>
10 |
11 | export const viewBox = '0 0 1024 1024'
--------------------------------------------------------------------------------
/src/ui-kit/components/svg-img/paths/triangle.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { PathOptions } from '../svg-dict';
4 |
5 | export const path = (props: PathOptions) =>
6 |
9 |
10 |
11 |
15 |
16 |
17 |
18 |
19 | export const viewBox = '0 0 26 26';
--------------------------------------------------------------------------------
/src/ui-kit/components/svg-img/paths/emoji.tsx:
--------------------------------------------------------------------------------
1 |
2 |
3 | import React from 'react';
4 |
5 | import { PathOptions } from '../svg-dict';
6 |
7 | export const path = (props: PathOptions) =>
8 |
9 |
10 |
11 |
12 |
13 |
14 | export const viewBox = '0 0 24 24';
15 |
16 |
--------------------------------------------------------------------------------
/src/ui-kit/components/tabs/index.tsx:
--------------------------------------------------------------------------------
1 | import Tabs, { TabPaneProps, TabsProps } from 'antd/lib/tabs';
2 | import classNames from 'classnames';
3 | import React, { FC, PropsWithChildren } from 'react';
4 | import { SvgIconEnum, SvgImg } from '../svg-img';
5 | import './index.css';
6 |
7 | export type ATabsProps = Pick<
8 | TabsProps,
9 | | 'className'
10 | | 'activeKey'
11 | | 'centered'
12 | | 'type'
13 | | 'onChange'
14 | | 'onEdit'
15 | | 'onTabClick'
16 | | 'animated'
17 | | 'moreIcon'
18 | | 'renderTabBar'
19 | | 'items'
20 | >;
21 |
22 | export const ATabs: FC
> = ({
23 | type,
24 | className,
25 | onEdit,
26 | centered,
27 | ...props
28 | }) => {
29 | const { moreIcon = } = props;
30 |
31 | return (
32 |
33 | );
34 | };
35 |
36 | export type ATabPaneProps = Pick;
37 |
38 | export const ATabPane: FC> = ({ className, ...props }) => {
39 | return ;
40 | };
41 |
--------------------------------------------------------------------------------
/src/ui-kit/components/modal/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import { Meta } from '@storybook/react';
2 | import React, { useState } from 'react';
3 | import { Button } from '../button';
4 | import { Modal } from '../modal';
5 |
6 | const meta: Meta = {
7 | title: 'Components/Modal',
8 | component: Modal,
9 | };
10 |
11 | type DocsProps = {
12 | title: string;
13 | };
14 |
15 |
16 | export const Docs = ({ title }: DocsProps) => (
17 | <>
18 |
19 |
test, ]}>
20 | 你确定要下课吗？
21 |
22 |
24 |
test]}>
25 | 试用时间到，教室已解散！
26 |
27 |
29 |
test, ]}>
33 | 课件未能加载成功，您可以点击重新加载重试，或者从云盘中播放课件
34 |
35 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 | );
39 |
40 | Docs.args = {
41 | placeholderDesc: '',
42 | };
43 |
44 | export default meta;
45 |
--------------------------------------------------------------------------------
/src/ui-kit/components/svg-img/paths/vote.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { PathOptions } from '../svg-dict';
4 |
5 | export const path = (props: PathOptions) =>
6 |
7 |
8 |
9 |
10 |
11 | export const viewBox = '0 0 24 24';
--------------------------------------------------------------------------------
/src/ui-kit/components/svg-img/paths/stage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { PathOptions } from '../svg-dict';
4 |
5 | export const path = (props: PathOptions) => (
6 |
11 | );
12 |
13 | export const viewBox = '0 0 28 28';
14 |
--------------------------------------------------------------------------------
/src/ui-kit/components/svg-img/paths/pen-rhombus.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { PathOptions } from '../svg-dict';
4 |
5 | export const path = ({ iconPrimary, penColor }: PathOptions) =>
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | export const viewBox = '0 0 22 24';
14 |
--------------------------------------------------------------------------------
/src/infra/capabilities/containers/toast/index.tsx:
--------------------------------------------------------------------------------
1 | import { observer } from 'mobx-react';
2 | import { Toast } from '@classroom/ui-kit';
3 | import { useStore } from '@classroom/infra/hooks/ui-store';
4 | import { TransitionGroup, CSSTransition } from 'react-transition-group';
5 | import './index.css';
6 | import { ToastType } from '@classroom/infra/stores/common/share';
7 |
8 | export const ToastContainer = observer(() => {
9 | const { shareUIStore } = useStore();
10 | const { toastQueue, removeToast } = shareUIStore;
11 |
12 | return (
13 |
14 | {toastQueue.map((value: ToastType, idx: number) => (
15 |
16 | {
20 | removeToast(value.id);
21 | }}>
22 | {value.desc}
23 |
24 |
25 | ))}
26 |
27 | );
28 | });
29 |
--------------------------------------------------------------------------------
/src/infra/capabilities/containers/camera-preview/index.tsx:
--------------------------------------------------------------------------------
1 | import { useStore } from '@classroom/infra/hooks/ui-store';
2 | import classNames from 'classnames';
3 | import { observer } from 'mobx-react';
4 | import { StreamPlayerCameraPlaceholder } from '../stream';
5 | import { LocalTrackPlayer } from '../stream/track-player';
6 |
7 | export const CameraPreview = observer(() => {
8 | const { videoGalleryUIStore, streamUIStore } = useStore();
9 | const { localCameraStream, localPreview } = videoGalleryUIStore;
10 |
11 | const cls = classNames('fcr-w-full fcr-h-full fcr-overflow-hidden', {
12 | 'fcr-invisible': localCameraStream ? localCameraStream.isCameraMuted : false,
13 | });
14 |
15 | return localPreview && localCameraStream ? (
16 |
25 |
26 | {!streamUIStore.settingsOpened && }
27 |
28 | ) : null;
29 | });
30 |
31 | export default CameraPreview;
32 |
--------------------------------------------------------------------------------
/src/ui-kit/components/svg-img/paths/stream-window-on.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { PathOptions } from "../svg-dict";
3 |
4 |
5 | export const path = (props: PathOptions) =>
6 |
7 |
8 |
9 |
10 |
11 |
12 | export const viewBox = '0 0 24 24';
--------------------------------------------------------------------------------
/src/ui-kit/components/svg-img/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta } from '@storybook/react';
3 | import { SvgIcon } from './';
4 | import { SvgIconEnum } from './type';
5 | import './index.css';
6 |
7 | const meta: Meta = {
8 | title: 'Components/SvgImg',
9 | component: SvgIcon,
10 | };
11 |
12 | type DocsProps = {
13 | size: number;
14 | color: string;
15 | };
16 |
17 | const keys = Object.keys(SvgIconEnum);
18 | export const Docs = ({ size, color }: DocsProps) => {
19 | return (
20 |
21 |
Icon Gallery
22 |
23 | {keys.map((k) => {
24 | return (
25 |
26 |
32 |
33 | );
34 | })}
35 |
36 |
20 |
30 |
31 |
41 |
42 | );
43 | };
44 |
45 | export default meta;
46 |
--------------------------------------------------------------------------------
/src/ui-kit/components/toolbar/util.ts:
--------------------------------------------------------------------------------
1 | import { SvgIconEnum } from '../svg-img';
2 |
3 | export const getPenIcon = (penTool: string) => {
4 | switch (penTool) {
5 | case 'square':
6 | return SvgIconEnum.PEN_SQUARE;
7 | case 'circle':
8 | return SvgIconEnum.PEN_CIRCLE;
9 | case 'line':
10 | return SvgIconEnum.PEN_LINE;
11 | case 'arrow':
12 | return SvgIconEnum.PEN_ARROW;
13 | case 'pentagram':
14 | return SvgIconEnum.PEN_PENTAGRAM;
15 | case 'rhombus':
16 | return SvgIconEnum.PEN_RHOMBUS;
17 | case 'triangle':
18 | return SvgIconEnum.PEN_TRIANGLE;
19 | case 'pen':
20 | default:
21 | return SvgIconEnum.PEN_CURVE;
22 | }
23 | };
24 |
25 | export const getPenShapeIcon = (penTool: string) => {
26 | switch (penTool) {
27 | case 'square':
28 | return SvgIconEnum.SQUARE;
29 | case 'circle':
30 | return SvgIconEnum.CIRCLE;
31 | case 'line':
32 | return SvgIconEnum.LINE;
33 | case 'arrow':
34 | return SvgIconEnum.ARROW;
35 | case 'pentagram':
36 | return SvgIconEnum.PENTAGRAM;
37 | case 'rhombus':
38 | return SvgIconEnum.RHOMBUS;
39 | case 'triangle':
40 | return SvgIconEnum.TRIANGLE;
41 | case 'pen':
42 | default:
43 | return SvgIconEnum.PEN;
44 | }
45 | };
46 |
--------------------------------------------------------------------------------
/src/ui-kit/components/svg-img/paths/on-podium.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { PathOptions } from "../svg-dict"
3 |
4 | export const path = (props: PathOptions) =>
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | export const viewBox = "0 0 22 22"
--------------------------------------------------------------------------------
/src/ui-kit/components/volume/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { Meta } from '@storybook/react';
3 | import { Volume, AudioVolume } from '../volume';
4 |
5 | const meta: Meta = {
6 | title: 'Components/Volume',
7 | component: Volume,
8 | };
9 |
10 | type DocsProps = {
11 | width: number;
12 | height: number;
13 | currentVolume: number;
14 | maxLength: number;
15 | };
16 |
17 | export const Docs = () => {
18 | const [currentVolume, setCurrentVolume] = useState(0);
19 | let timer;
20 | useEffect(() => {
21 | timer = setInterval(() => {
22 | const number = (Math.random() * 100) | 0;
23 | setCurrentVolume(number);
24 | }, 1000);
25 | return () => {
26 | clearInterval(timer);
27 | };
28 | }, []);
29 | return (
30 | <>
31 |
35 |
36 |
has volume
37 |
38 |
40 |
isMicMuted
41 |
42 |
33 |
34 | {currToast?.desc}
35 |
36 |
40 |
50 |
51 | );
52 | };
53 |
--------------------------------------------------------------------------------