Skip to content

refactor(ui): change record button #1305

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Jan 17, 2022
Merged

refactor(ui): change record button #1305

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3d905be
fix(ui): change record button
Matrixbirds Jan 12, 2022
e168726
fix(component): format code
Matrixbirds Jan 17, 2022
7177377
refactor(assets): compress svg use svgo and support assets scope
Matrixbirds Jan 17, 2022
5989fd8
refactor(component): define optional props TopBar
Matrixbirds Jan 17, 2022
b5b431a
Update packages/flat-components/src/index.ts
Matrixbirds Jan 17, 2022
7d0509e
refactor(component): remove title for CloudRecordBtn
Matrixbirds Jan 17, 2022
d5ca73c
Update web/flat-web/src/pages/SmallClassPage/index.tsx
BlackHole1 Jan 17, 2022
ba0aa79
Update desktop/renderer-app/src/pages/SmallClassPage/index.tsx
BlackHole1 Jan 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .commitlintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ module.exports = {
"style",
"room",
"classroom",
"assets"
],
],
"scope-case": [2, "always", ["lower-case", "kebab-case"]],
Expand Down
37 changes: 13 additions & 24 deletions desktop/renderer-app/src/pages/BigClassPage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ import classNames from "classnames";
import {
NetworkStatus,
RoomInfo,
RecordButton,
TopBar,
TopBarDivider,
LoadingPage,
CloudRecordBtn,
} from "flat-components";
import { observer } from "mobx-react-lite";
import React, { useEffect, useRef, useState } from "react";
Expand Down Expand Up @@ -193,7 +193,6 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
{loadingPageRef.current && <LoadingPage onTimeout="full-reload" />}
<div className="realtime-box">
<TopBar
center={renderTopBarCenter()}
isMac={runtime.isMac}
left={renderTopBarLeft()}
right={renderTopBarRight()}
Expand Down Expand Up @@ -235,28 +234,6 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
);
}

function renderTopBarCenter(): React.ReactNode {
if (!classRoomStore.isCreator) {
return null;
}
return (
<>
{classRoomStore.isCreator && classRoomStore.roomStatus === RoomStatus.Started && (
<RecordButton
isRecording={classRoomStore.isRecording}
onClick={() =>
classRoomStore.toggleRecording({
onStop() {
void message.success(t("recording-completed-tips"));
},
})
}
/>
)}
</>
);
}

function renderTopBarRight(): React.ReactNode {
return (
<>
Expand All @@ -276,6 +253,18 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
/>
)}

{classRoomStore.isCreator && (
<CloudRecordBtn
isRecording={classRoomStore.isRecording}
onClick={() => {
void classRoomStore.toggleRecording({
onStop() {
void message.success(t("recording-completed-tips"));
},
});
}}
/>
)}
{/* TODO: open cloud-storage sub window */}
<CloudStorageButton classroom={classRoomStore} />
<InviteButton roomInfo={classRoomStore.roomInfo} />
Expand Down
37 changes: 13 additions & 24 deletions desktop/renderer-app/src/pages/OneToOnePage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@ import { RoomPhase } from "white-web-sdk";
import {
NetworkStatus,
RoomInfo,
RecordButton,
TopBar,
TopBarDivider,
LoadingPage,
CloudRecordBtn,
} from "flat-components";

import InviteButton from "../../components/InviteButton";
Expand Down Expand Up @@ -150,7 +150,6 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
{loadingPageRef.current && <LoadingPage onTimeout="full-reload" />}
<div className="one-to-one-realtime-box">
<TopBar
center={renderTopBarCenter()}
isMac={runtime.isMac}
left={renderTopBarLeft()}
right={renderTopBarRight()}
Expand Down Expand Up @@ -193,28 +192,6 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
);
}

function renderTopBarCenter(): React.ReactNode {
if (!classRoomStore.isCreator) {
return null;
}
return (
<>
{classRoomStore.isCreator && classRoomStore.roomStatus === RoomStatus.Started && (
<RecordButton
isRecording={classRoomStore.isRecording}
onClick={() =>
classRoomStore.toggleRecording({
onStop() {
void message.success(t("recording-completed-tips"));
},
})
}
/>
)}
</>
);
}

function renderTopBarRight(): React.ReactNode {
return (
<>
Expand All @@ -234,6 +211,18 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
/>
)}

{classRoomStore.isCreator && (
<CloudRecordBtn
isRecording={classRoomStore.isRecording}
onClick={() => {
void classRoomStore.toggleRecording({
onStop() {
void message.success(t("recording-completed-tips"));
},
});
}}
/>
)}
{/* TODO: open cloud-storage sub window */}
<CloudStorageButton classroom={classRoomStore} />
<InviteButton roomInfo={classRoomStore.roomInfo} />
Expand Down
32 changes: 14 additions & 18 deletions desktop/renderer-app/src/pages/SmallClassPage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ import { useTranslation } from "react-i18next";
import {
NetworkStatus,
RoomInfo,
RecordButton,
TopBar,
TopBarDivider,
LoadingPage,
CloudRecordBtn,
} from "flat-components";

import InviteButton from "../../components/InviteButton";
Expand Down Expand Up @@ -259,23 +259,7 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
if (!classRoomStore.isCreator) {
return null;
}
return (
<>
{renderClassMode()}
{classRoomStore.isCreator && classRoomStore.roomStatus === RoomStatus.Started && (
<RecordButton
isRecording={classRoomStore.isRecording}
onClick={() =>
classRoomStore.toggleRecording({
onStop() {
void message.success(t("recording-completed-tips"));
},
})
}
/>
)}
</>
);
return <>{renderClassMode()}</>;
}

function renderTopBarRight(): React.ReactNode {
Expand All @@ -297,6 +281,18 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
/>
)}

{classRoomStore.isCreator && (
<CloudRecordBtn
isRecording={classRoomStore.isRecording}
onClick={() => {
void classRoomStore.toggleRecording({
onStop() {
void message.success(t("recording-completed-tips"));
},
});
}}
/>
)}
{/* TODO: open cloud-storage sub window */}
<CloudStorageButton classroom={classRoomStore} />
<InviteButton roomInfo={classRoomStore.roomInfo} />
Expand Down
22 changes: 22 additions & 0 deletions packages/flat-components/src/components/ClassroomPage/CloudRecordBtn/cloudrecord.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { Meta, Story } from "@storybook/react";
import React, { useState } from "react";
import { CloudRecordBtn, CloudRecordBtnProps } from ".";

const storyMeta: Meta = {
title: "ClassroomPage/CloudRecordBtn",
component: CloudRecordBtn,
};

export default storyMeta;

export const Overview: Story<CloudRecordBtnProps> = () => {
const [isRecording, updateRecording] = useState<boolean>(false);
return (
<CloudRecordBtn
isRecording={isRecording}
onClick={() => {
updateRecording(!isRecording);
}}
/>
);
};
1 change: 1 addition & 0 deletions ...at-components/src/components/ClassroomPage/CloudRecordBtn/icons/record-idle.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions ...components/src/components/ClassroomPage/CloudRecordBtn/icons/record-started.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 21 additions & 0 deletions packages/flat-components/src/components/ClassroomPage/CloudRecordBtn/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { TopBarRightBtn } from "../";
import { observer } from "mobx-react-lite";
import React from "react";
import RecordIdleSVG from "./icons/record-idle.svg";
import RecordStartedSVG from "./icons/record-started.svg";

export type CloudRecordBtnProps = {
isRecording: boolean;
onClick: (evt: any) => void;
};

export const CloudRecordBtn: React.FC<CloudRecordBtnProps> = observer(
({ isRecording, onClick }) => {
return (
<TopBarRightBtn
icon={<img src={isRecording ? RecordStartedSVG : RecordIdleSVG} />}
onClick={onClick}
/>
);
},
);
6 changes: 3 additions & 3 deletions packages/flat-components/src/components/ClassroomPage/TopBar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ export const TopBarDivider: FC = () => {
};

export interface TopBarProps {
left: ReactNode;
center: ReactNode;
right: ReactNode;
left?: ReactNode;
center?: ReactNode;
right?: ReactNode;
isMac?: boolean;
}

Expand Down
1 change: 1 addition & 0 deletions packages/flat-components/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,4 @@ export * from "./components/RoomDetailPage";
export * from "./components/RoomStatusElement";
export * from "./containers/CloudStorageContainer";
export * from "./components/DeviceTestPage";
export * from "./components/ClassroomPage/CloudRecordBtn";
37 changes: 13 additions & 24 deletions web/flat-web/src/pages/BigClassPage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import "./BigClassPage.less";
import { message } from "antd";
import classNames from "classnames";
import {
CloudRecordBtn,
LoadingPage,
NetworkStatus,
RecordButton,
RoomInfo,
TopBar,
TopBarDivider,
Expand Down Expand Up @@ -173,7 +173,6 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
{loadingPageRef.current && <LoadingPage onTimeout="full-reload" />}
<div className="realtime-box">
<TopBar
center={renderTopBarCenter()}
isMac={runtime.isMac}
left={renderTopBarLeft()}
right={renderTopBarRight()}
Expand Down Expand Up @@ -209,28 +208,6 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
);
}

function renderTopBarCenter(): React.ReactNode {
if (!classRoomStore.isCreator) {
return null;
}
return (
<>
{classRoomStore.isCreator && classRoomStore.roomStatus === RoomStatus.Started && (
<RecordButton
isRecording={classRoomStore.isRecording}
onClick={() =>
classRoomStore.toggleRecording({
onStop() {
void message.success(t("recording-completed-tips"));
},
})
}
/>
)}
</>
);
}

function renderTopBarRight(): React.ReactNode {
return (
<>
Expand All @@ -248,6 +225,18 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
/>
)}

{classRoomStore.isCreator && (
<CloudRecordBtn
isRecording={classRoomStore.isRecording}
onClick={() => {
void classRoomStore.toggleRecording({
onStop() {
void message.success(t("recording-completed-tips"));
},
});
}}
/>
)}
{/* TODO: open cloud-storage sub window */}
<CloudStorageButton classroom={classRoomStore} />
<InviteButton roomInfo={classRoomStore.roomInfo} />
Expand Down
Loading