feat(flat-components): add scenes controller components

packages/flat-components/src/components/ClassroomPage/ScenesController/ScenesController.stories.tsx

@@ -0,0 +1,16 @@
+import { Meta, Story } from "@storybook/react";
+import React from "react";
+import { ScenesController, ScenesControllerProps } from ".";
+
+const storyMeta: Meta = {
+    title: "ClassroomPage/ScenesController",
+    component: ScenesController,
+};
+
+export default storyMeta;
+
+export const Overview: Story<ScenesControllerProps> = args => <ScenesController {...args} />;
+Overview.args = {
+    currentSceneIndex: 1,
+    scenesCount: 2,
+};

packages/flat-components/src/components/ClassroomPage/ScenesController/index.tsx

@@ -0,0 +1,69 @@
+import "./style.less";
+import addSceneSVG from "./image/add-scene.svg";
+import nextScenesDisabledSVG from "./image/next-scene-disabled.svg";
+import nextScenesSVG from "./image/next-scene.svg";
+import preScenesDisabledSVG from "./image/previous-scene-disabled.svg";
+import preScenesSVG from "./image/previous-scene.svg";
+
+import React, { FC, useCallback } from "react";
+import classNames from "classnames";
+
+export interface ScenesControllerProps {
+    addScene: () => void;
+    preScene: () => void;
+    nextScene: () => void;
+    currentSceneIndex: number;
+    scenesCount: number;
+    disabled: boolean;
+}
+
+export const ScenesController: FC<ScenesControllerProps> = ({
+    addScene,
+    preScene,
+    nextScene,
+    currentSceneIndex,
+    scenesCount,
+    disabled,
+}) => {
+    const isFirstScene = currentSceneIndex === 0;
+    const isLastScene = currentSceneIndex + 1 === scenesCount;
+
+    const warpOnClick = useCallback(
+        (onClick: () => void) => {
+            if (disabled) {
+                return undefined;
+            }
+            return onClick;
+        },
+        [disabled],
+    );
+
+    return (
+        <div
+            className={classNames("scenes-controller-container", {
+                disabled,
+            })}
+        >
+            <div className="scenes-controller-btn-list">
+                <div className="scenes-controller-btn" onClick={warpOnClick(addScene)}>
+                    <img src={addSceneSVG} alt="add scene" />
+                </div>
+                <div className="scenes-controller-btn" onClick={warpOnClick(preScene)}>
+                    <img
+                        src={isFirstScene ? preScenesDisabledSVG : preScenesSVG}
+                        alt="previous scene"
+                    />
+                </div>
+                <div className="scenes-controller-info">
+                    {currentSceneIndex + 1} / {scenesCount}
+                </div>
+                <div className="scenes-controller-btn" onClick={warpOnClick(nextScene)}>
+                    <img
+                        src={isLastScene ? nextScenesDisabledSVG : nextScenesSVG}
+                        alt="next scene"
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};

packages/flat-components/src/components/ClassroomPage/ScenesController/style.less

@@ -0,0 +1,37 @@
+.scenes-controller-container {
+    display: flex;
+    height: 32px;
+    padding: 0 4px;
+    border-radius: 4px;
+    box-shadow: 0 4px 12px 0 rgb(0 0 0 / 8%);
+    background-color: white;
+
+    &.disabled {
+        opacity: 0.5;
+        * {
+            cursor: not-allowed;
+        }
+    }
+}
+
+.scenes-controller-btn-list {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    user-select: none;
+}
+
+.scenes-controller-btn {
+    cursor: pointer;
+
+    &:hover {
+        background: rgba(33, 35, 36, 0.1);
+    }
+}
+
+.scenes-controller-info {
+    margin-left: 8px;
+    margin-right: 8px;
+    font-size: 12px;
+    color: #212324;
+}

packages/flat-components/src/components/ClassroomPage/index.tsx

@@ -8,3 +8,4 @@ export * from "./TopBar";
 export * from "./BigVideoAvatar";
 export * from "./SmallVideoAvatar";
 export * from "./OneToOneVideoAvatar";
+export * from "./ScenesController";