refactor(flat-pages): make avatars list draggable

netless-io · Jan 10, 2023 · e098373 · e098373
1 parent 228e8d9
commit e098373
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 2 deletions.
diff --git a/packages/flat-pages/src/HomePage/MainRoomListPanel/MainRoomList.tsx b/packages/flat-pages/src/HomePage/MainRoomListPanel/MainRoomList.tsx
@@ -163,7 +163,7 @@ export const MainRoomList = observer<MainRoomListProps>(function MainRoomList({
                             ownerName={room.ownerName}
                             primaryAction={primaryAction(room.roomStatus)}
                             status={getRoomStatus(room.roomStatus)}
-                            title={room.title!}
+                            title={room.title! + " (" + room.roomType + ")"}
                             onAction={key => {
                                 switch (key) {
                                     case "details": {

diff --git a/packages/flat-pages/src/SmallClassPage/index.tsx b/packages/flat-pages/src/SmallClassPage/index.tsx
@@ -39,6 +39,7 @@ import { WindowsSystemBtnContext } from "../components/StoreProvider";
 import { ShareScreenPicker } from "../components/ShareScreen/ShareScreenPicker";
 import { ExtraPadding } from "../components/ExtraPadding";
 import { UsersButton } from "../components/UsersButton";
+import { makeDraggable } from "./utils";
 
 export type SmallClassPageProps = {};
 
@@ -109,7 +110,7 @@ export const SmallClassPage = withClassroomStore<SmallClassPageProps>(
 
         function renderAvatars(): React.ReactNode {
             return (
-                <div className="small-class-realtime-avatars-wrap">
+                <div ref={makeDraggable} className="small-class-realtime-avatars-wrap">
                     {classroomStore.isJoinedRTC && (
                         <div className="small-class-realtime-avatars">
                             <RTCAvatar

diff --git a/packages/flat-pages/src/SmallClassPage/utils.tsx b/packages/flat-pages/src/SmallClassPage/utils.tsx
@@ -0,0 +1,56 @@
+/**
+ * Make avatars row draggable. Put this function in the div's `ref`.
+ * It will update the `scrollLeft` when the user drags the avatars.
+ */
+export function makeDraggable(div: HTMLDivElement | null): void {
+    type DraggableElement = { __draggable?: () => void };
+
+    if (div === null) {
+        return;
+    }
+
+    (div as DraggableElement).__draggable?.();
+
+    let start: [x: number, left: number] | undefined;
+
+    div.style.cursor = "grab";
+
+    const onPointerDown = (ev: PointerEvent): void => {
+        // is dragging avatar, not the buttons on it
+        const isAvatar = (ev.target as HTMLElement).classList?.contains("video-avatar");
+        if (isAvatar && ev.pointerType === "mouse" && ev.isPrimary && ev.button === 0) {
+            div.setPointerCapture(ev.pointerId);
+            start = [ev.clientX, div.scrollLeft];
+            div.style.cursor = "grabbing";
+        }
+    };
+
+    div.addEventListener("pointerdown", onPointerDown);
+
+    const onPointerMove = (ev: PointerEvent): void => {
+        if (ev.isPrimary && start) {
+            const dx = ev.clientX - start[0];
+            div.scrollLeft = start[1] - dx;
+        }
+    };
+
+    div.addEventListener("pointermove", onPointerMove);
+
+    const onPointerUp = (ev: PointerEvent): void => {
+        div.releasePointerCapture(ev.pointerId);
+        start = undefined;
+        div.style.cursor = "grab";
+    };
+
+    div.addEventListener("pointerup", onPointerUp);
+    div.addEventListener("pointercancel", onPointerUp);
+
+    (div as DraggableElement).__draggable = () => {
+        start = undefined;
+        div.removeEventListener("pointerdown", onPointerDown);
+        div.removeEventListener("pointermove", onPointerMove);
+        div.removeEventListener("pointerup", onPointerUp);
+        div.removeEventListener("pointercancel", onPointerUp);
+        div.style.cursor = "";
+    };
+}