@skooldev/skool-stream-layout 1.0.11 → 1.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/index.es.js +120 -0
  2. package/package.json +17 -5
package/dist/index.es.js ADDED
@@ -0,0 +1,120 @@
1
+ import { jsx as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8_jsx__, jsxs as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8_jsxs__ } from "react/jsx-runtime";
2
+ import { createContext as __WEBPACK_EXTERNAL_MODULE_react_createContext__, memo as __WEBPACK_EXTERNAL_MODULE_react_memo__, useContext as __WEBPACK_EXTERNAL_MODULE_react_useContext__, useLayoutEffect as __WEBPACK_EXTERNAL_MODULE_react_useLayoutEffect__, useMemo as __WEBPACK_EXTERNAL_MODULE_react_useMemo__, useState as __WEBPACK_EXTERNAL_MODULE_react_useState__ } from "react";
3
+ import { Icon as __WEBPACK_EXTERNAL_MODULE__stream_io_video_react_sdk_4ccb1546_Icon__, PaginatedGridLayout as __WEBPACK_EXTERNAL_MODULE__stream_io_video_react_sdk_4ccb1546_PaginatedGridLayout__, ParticipantView as __WEBPACK_EXTERNAL_MODULE__stream_io_video_react_sdk_4ccb1546_ParticipantView__, SfuModels as __WEBPACK_EXTERNAL_MODULE__stream_io_video_react_sdk_4ccb1546_SfuModels__, SpeakerLayout as __WEBPACK_EXTERNAL_MODULE__stream_io_video_react_sdk_4ccb1546_SpeakerLayout__, hasAudio as __WEBPACK_EXTERNAL_MODULE__stream_io_video_react_sdk_4ccb1546_hasAudio__, isPinned as __WEBPACK_EXTERNAL_MODULE__stream_io_video_react_sdk_4ccb1546_isPinned__, useCall as __WEBPACK_EXTERNAL_MODULE__stream_io_video_react_sdk_4ccb1546_useCall__, useCallStateHooks as __WEBPACK_EXTERNAL_MODULE__stream_io_video_react_sdk_4ccb1546_useCallStateHooks__, useParticipantViewContext as __WEBPACK_EXTERNAL_MODULE__stream_io_video_react_sdk_4ccb1546_useParticipantViewContext__ } from "@stream-io/video-react-sdk";
4
+ /******/ // The require scope
5
+ /******/ var __webpack_require__ = {};
6
+ /******/
7
+ /************************************************************************/
8
+ /******/ /* webpack/runtime/define property getters */
9
+ /******/ (() => {
10
+ /******/ // define getter functions for harmony exports
11
+ /******/ __webpack_require__.d = (exports, definition) => {
12
+ /******/ for(var key in definition) {
13
+ /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
14
+ /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
15
+ /******/ }
16
+ /******/ }
17
+ /******/ };
18
+ /******/ })();
19
+ /******/
20
+ /******/ /* webpack/runtime/hasOwnProperty shorthand */
21
+ /******/ (() => {
22
+ /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
23
+ /******/ })();
24
+ /******/
25
+ /************************************************************************/
26
+ var __webpack_exports__ = {};
27
+
28
+ ;// external "react/jsx-runtime"
29
+
30
+ ;// external "react"
31
+
32
+ ;// external "@stream-io/video-react-sdk"
33
+
34
+ ;// ./src/MultiPinLayout.tsx
35
+
36
+
37
+
38
+ const UnpinnedParticipantsLayout = ({ CustomParticipantViewUI, participants, }) => {
39
+ if (!participants.length) {
40
+ return null;
41
+ }
42
+ return (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8_jsx__("div", { className: "skool-unpinned-participants-layout-container", children: __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8_jsx__("div", { className: "skool-unpinned-participants-layout-wrapper", children: __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8_jsx__("div", { className: "skool-unpinned-participants-scroll", children: participants.map((p) => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8_jsx__(__WEBPACK_EXTERNAL_MODULE__stream_io_video_react_sdk_4ccb1546_ParticipantView__, { participant: p, ParticipantViewUI: CustomParticipantViewUI }, p.sessionId))) }) }) }));
43
+ };
44
+ const MultiPinLayoutComponent = ({ CustomParticipantViewUI }) => {
45
+ const { useParticipants } = __WEBPACK_EXTERNAL_MODULE__stream_io_video_react_sdk_4ccb1546_useCallStateHooks__();
46
+ const participants = useParticipants();
47
+ const pinnedParticipantCount = __WEBPACK_EXTERNAL_MODULE_react_useMemo__(() => participants.filter((participant) => __WEBPACK_EXTERNAL_MODULE__stream_io_video_react_sdk_4ccb1546_isPinned__(participant)).length, [participants]);
48
+ const unpinnedParticipants = __WEBPACK_EXTERNAL_MODULE_react_useMemo__(() => {
49
+ return participants
50
+ .filter((p) => !p.isLocalParticipant)
51
+ .filter((p) => !__WEBPACK_EXTERNAL_MODULE__stream_io_video_react_sdk_4ccb1546_isPinned__(p))
52
+ .slice(0, 10);
53
+ }, [participants]);
54
+ return (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8_jsxs__("div", { className: "skool-multi-pin-layout-wrapper", "data-participants": pinnedParticipantCount, children: [__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8_jsx__(__WEBPACK_EXTERNAL_MODULE__stream_io_video_react_sdk_4ccb1546_PaginatedGridLayout__, { groupSize: 6, filterParticipants: { isPinned: true }, ParticipantViewUI: CustomParticipantViewUI }), __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8_jsx__(UnpinnedParticipantsLayout, { participants: unpinnedParticipants, CustomParticipantViewUI: CustomParticipantViewUI })] }));
55
+ };
56
+ const MultiPinLayout = MultiPinLayoutComponent;
57
+
58
+ ;// ./src/index.tsx
59
+
60
+
61
+
62
+
63
+
64
+ const ParticipantsViewCountContext = __WEBPACK_EXTERNAL_MODULE_react_createContext__({
65
+ increment: () => { },
66
+ decrement: () => { },
67
+ });
68
+ const CustomParticipantViewUI = () => {
69
+ const { increment, decrement } = __WEBPACK_EXTERNAL_MODULE_react_useContext__(ParticipantsViewCountContext);
70
+ const context = __WEBPACK_EXTERNAL_MODULE__stream_io_video_react_sdk_4ccb1546_useParticipantViewContext__();
71
+ const { participant } = context;
72
+ __WEBPACK_EXTERNAL_MODULE_react_useLayoutEffect__(() => {
73
+ increment();
74
+ return () => {
75
+ decrement();
76
+ };
77
+ }, [increment, decrement]);
78
+ const hasPausedVideo = __WEBPACK_EXTERNAL_MODULE_react_useMemo__(() => { var _a; return !!((_a = participant.pausedTracks) === null || _a === void 0 ? void 0 : _a.includes(__WEBPACK_EXTERNAL_MODULE__stream_io_video_react_sdk_4ccb1546_SfuModels__.TrackType.VIDEO)); }, [participant]);
79
+ return (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8_jsxs__("div", { className: "participant-label", children: [__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8_jsx__("span", { children: participant.name }), !__WEBPACK_EXTERNAL_MODULE__stream_io_video_react_sdk_4ccb1546_hasAudio__(participant) && __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8_jsx__("span", { className: "mute-icon" }), __WEBPACK_EXTERNAL_MODULE__stream_io_video_react_sdk_4ccb1546_isPinned__(participant) && __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8_jsx__("span", { className: "pin-icon" }), hasPausedVideo && __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8_jsx__(__WEBPACK_EXTERNAL_MODULE__stream_io_video_react_sdk_4ccb1546_Icon__, { icon: "low-bandwidth" })] }));
80
+ };
81
+ const SkoolStreamLayoutComponent = (props) => {
82
+ const { excludeLocalParticipant = false } = props;
83
+ const call = __WEBPACK_EXTERNAL_MODULE__stream_io_video_react_sdk_4ccb1546_useCall__();
84
+ const { useParticipants, useHasOngoingScreenShare } = __WEBPACK_EXTERNAL_MODULE__stream_io_video_react_sdk_4ccb1546_useCallStateHooks__();
85
+ const participants = useParticipants();
86
+ const hasOngoingScreenshare = useHasOngoingScreenShare();
87
+ const isWebinar = (call === null || call === void 0 ? void 0 : call.type) === "livestream";
88
+ const [numParticipantsInView, setNumParticipantsInView] = __WEBPACK_EXTERNAL_MODULE_react_useState__(0);
89
+ const value = __WEBPACK_EXTERNAL_MODULE_react_useMemo__(() => ({
90
+ increment: () => setNumParticipantsInView((n) => n + 1),
91
+ decrement: () => setNumParticipantsInView((n) => n - 1),
92
+ }), []);
93
+ const pinnedParticipantCount = __WEBPACK_EXTERNAL_MODULE_react_useMemo__(() => participants.filter((participant) => __WEBPACK_EXTERNAL_MODULE__stream_io_video_react_sdk_4ccb1546_isPinned__(participant)).length, [participants]);
94
+ const hasPinnedParticipant = __WEBPACK_EXTERNAL_MODULE_react_useMemo__(() => !!pinnedParticipantCount, [pinnedParticipantCount]);
95
+ const mainLayout = __WEBPACK_EXTERNAL_MODULE_react_useMemo__(() => {
96
+ const participantsFilter = isWebinar
97
+ ? {
98
+ $or: [{ hasVideo: true }, { hasScreenShare: true }],
99
+ }
100
+ : undefined;
101
+ if (!hasOngoingScreenshare && pinnedParticipantCount > 1) {
102
+ return __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8_jsx__(MultiPinLayout, { CustomParticipantViewUI: CustomParticipantViewUI });
103
+ }
104
+ if (hasOngoingScreenshare || (participants.length > 2 && hasPinnedParticipant)) {
105
+ return (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8_jsx__(__WEBPACK_EXTERNAL_MODULE__stream_io_video_react_sdk_4ccb1546_SpeakerLayout__, { ParticipantViewUIBar: CustomParticipantViewUI, ParticipantViewUISpotlight: CustomParticipantViewUI, filterParticipants: participantsFilter, excludeLocalParticipant: excludeLocalParticipant }));
106
+ }
107
+ return (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8_jsx__(__WEBPACK_EXTERNAL_MODULE__stream_io_video_react_sdk_4ccb1546_PaginatedGridLayout__, { groupSize: 12, ParticipantViewUI: CustomParticipantViewUI, filterParticipants: participantsFilter, excludeLocalParticipant: excludeLocalParticipant }));
108
+ }, [
109
+ excludeLocalParticipant,
110
+ hasOngoingScreenshare,
111
+ participants,
112
+ pinnedParticipantCount,
113
+ hasPinnedParticipant,
114
+ isWebinar,
115
+ ]);
116
+ return (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8_jsx__(ParticipantsViewCountContext.Provider, { value: value, children: __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8_jsx__("div", { "data-participants": numParticipantsInView, className: "skool-stream-layout", children: mainLayout }) }));
117
+ };
118
+ const SkoolStreamLayout = __WEBPACK_EXTERNAL_MODULE_react_memo__(SkoolStreamLayoutComponent);
119
+
120
+ export { SkoolStreamLayout };
package/package.json CHANGED
@@ -1,16 +1,27 @@
1
1
  {
2
2
  "name": "@skooldev/skool-stream-layout",
3
- "version": "1.0.11",
3
+ "version": "1.0.12",
4
4
  "description": "Skool Stream Layout",
5
5
  "main": "dist/index.cjs.js",
6
+ "module": "dist/index.es.js",
6
7
  "types": "dist/index.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "types": "./dist/index.d.ts",
11
+ "import": "./dist/index.es.js",
12
+ "require": "./dist/index.cjs.js",
13
+ "default": "./dist/index.es.js"
14
+ },
15
+ "./dist/*": "./dist/*",
16
+ "./package.json": "./package.json"
17
+ },
7
18
  "files": [
8
19
  "dist"
9
20
  ],
10
21
  "scripts": {
11
- "build": "webpack --mode production",
12
- "prepack": "webpack --mode production",
13
- "prepublishOnly": "npm run build"
22
+ "build": "rimraf dist && webpack --mode production",
23
+ "prepack": "rimraf dist && webpack --mode production",
24
+ "prepublishOnly": "rimraf dist && npm run build"
14
25
  },
15
26
  "peerDependencies": {
16
27
  "@stream-io/video-react-sdk": "^1.25.0",
@@ -32,11 +43,12 @@
32
43
  "prettier": "^3.6.2",
33
44
  "react": "19.1.0",
34
45
  "react-dom": "19.1.0",
46
+ "rimraf": "^6.1.3",
35
47
  "sass": "^1.80.0",
36
48
  "sass-loader": "^13.3.2",
37
49
  "ts-loader": "^9.5.1",
38
50
  "typescript": "^5.6.3",
39
- "webpack": "^5.95.0",
51
+ "webpack": "^5.105.3",
40
52
  "webpack-cli": "^5.1.4"
41
53
  },
42
54
  "repository": {