@skooldev/skool-stream-layout 1.0.1 → 1.0.3
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.
- package/dist/index.cjs.js +8 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -53,9 +53,16 @@ const video_react_sdk_namespaceObject = require("@stream-io/video-react-sdk");
|
|
|
53
53
|
|
|
54
54
|
|
|
55
55
|
|
|
56
|
+
let numParticipantsInView = 0;
|
|
56
57
|
const CustomParticipantViewUI = () => {
|
|
57
58
|
const context = (0,video_react_sdk_namespaceObject.useParticipantViewContext)();
|
|
58
59
|
const { participant } = context;
|
|
60
|
+
(0,external_react_namespaceObject.useLayoutEffect)(() => {
|
|
61
|
+
numParticipantsInView++;
|
|
62
|
+
return () => {
|
|
63
|
+
numParticipantsInView--;
|
|
64
|
+
};
|
|
65
|
+
}, []);
|
|
59
66
|
const hasPausedVideo = (0,external_react_namespaceObject.useMemo)(() => { var _a; return !!((_a = participant.pausedTracks) === null || _a === void 0 ? void 0 : _a.includes(video_react_sdk_namespaceObject.SfuModels.TrackType.VIDEO)); }, [participant]);
|
|
60
67
|
return ((0,jsx_runtime_namespaceObject.jsxs)("div", { className: "participant-label", children: [(0,jsx_runtime_namespaceObject.jsx)("span", { children: participant.name }), !(0,video_react_sdk_namespaceObject.hasAudio)(participant) && (0,jsx_runtime_namespaceObject.jsx)("span", { className: "mute-icon" }), (0,video_react_sdk_namespaceObject.isPinned)(participant) && (0,jsx_runtime_namespaceObject.jsx)("span", { className: "pin-icon" }), hasPausedVideo && (0,jsx_runtime_namespaceObject.jsx)(video_react_sdk_namespaceObject.Icon, { icon: "low-bandwidth" })] }));
|
|
61
68
|
};
|
|
@@ -77,7 +84,7 @@ const SkoolStreamLayoutComponent = () => {
|
|
|
77
84
|
}
|
|
78
85
|
return ((0,jsx_runtime_namespaceObject.jsx)(video_react_sdk_namespaceObject.PaginatedGridLayout, { groupSize: 12, ParticipantViewUI: CustomParticipantViewUI, filterParticipants: participantsFilter }));
|
|
79
86
|
}, [hasOngoingScreenshare, participants, hasPinnedParticipant, isWebinar]);
|
|
80
|
-
return (0,jsx_runtime_namespaceObject.jsx)("div", { className: "skool-stream-layout", children: mainLayout });
|
|
87
|
+
return ((0,jsx_runtime_namespaceObject.jsx)("div", { "data-participants": numParticipantsInView, className: "skool-stream-layout", children: mainLayout }));
|
|
81
88
|
};
|
|
82
89
|
const SkoolStreamLayout = (0,external_react_namespaceObject.memo)(SkoolStreamLayoutComponent);
|
|
83
90
|
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.skool-stream-layout{background-color:#131314;color:#fff}.skool-stream-layout .str-video__paginated-grid-layout{
|
|
1
|
+
.skool-stream-layout{background-color:#131314;color:#fff}.skool-stream-layout .str-video__paginated-grid-layout .str-video__paginated-grid-layout__group{max-width:120vh}.skool-stream-layout[data-participants="1"] .str-video__paginated-grid-layout .str-video__paginated-grid-layout__group{max-width:130vh}.skool-stream-layout[data-participants="1"] .str-video__paginated-grid-layout__wrapper .str-video__paginated-grid-layout__group .str-video__participant-view{max-width:100%;max-height:100%}.skool-stream-layout[data-participants="1"] .str-video__paginated-grid-layout__wrapper .str-video__video,.skool-stream-layout[data-participants="1"] .str-video__paginated-grid-layout__wrapper .str-video__participant-view--no-video .str-video__video-placeholder{aspect-ratio:16/9 !important}.skool-stream-layout[data-participants="2"] .str-video__paginated-grid-layout .str-video__paginated-grid-layout__group{max-width:240vh}.skool-stream-layout[data-participants="5"] .str-video__paginated-grid-layout .str-video__paginated-grid-layout__group,.skool-stream-layout[data-participants="6"] .str-video__paginated-grid-layout .str-video__paginated-grid-layout__group{max-width:180vh}.skool-stream-layout[data-participants="10"] .str-video__paginated-grid-layout .str-video__paginated-grid-layout__group,.skool-stream-layout[data-participants="11"] .str-video__paginated-grid-layout .str-video__paginated-grid-layout__group,.skool-stream-layout[data-participants="12"] .str-video__paginated-grid-layout .str-video__paginated-grid-layout__group{max-width:160vh}.skool-stream-layout .str-video__paginated-grid-layout{padding:16px 0px}.skool-stream-layout .str-video__paginated-grid-layout .str-video__paginated-grid-layout__group{padding-inline:16px 0}.skool-stream-layout .str-chat__channel .str-chat__container{flex-direction:column}.skool-stream-layout .str-video__speaker-layout .str-video__speaker-layout__participants-bar-wrapper .str-video__speaker-layout__participants-bar .str-video__speaker-layout__participant-tile{min-width:215px}.skool-stream-layout .str-video__participant-view--speaking{outline:2px solid #f1d07c}.skool-stream-layout .str-video__video-placeholder .str-video__video-placeholder__avatar{width:auto;height:88px;max-height:40%;aspect-ratio:1}.skool-stream-layout .str-video__video-placeholder{background:#343537}.skool-stream-layout .str-video__paginated-grid-layout__wrapper{height:100%}.skool-stream-layout .str-video__paginated-grid-layout__wrapper .str-video__video{aspect-ratio:4/3}.skool-stream-layout .str-video__paginated-grid-layout__wrapper .str-video__participant-view--no-video .str-video__video-placeholder{aspect-ratio:4/3;position:unset !important}.skool-stream-layout .str-video__paginated-grid-layout__wrapper .str-video__participant-view{aspect-ratio:unset}.skool-stream-layout .str-video__video.str-video__video--screen-share{object-fit:contain}.participant-label{font-family:"Roboto","Helvetica","Arial",sans-serif;font-weight:normal;font-style:normal;font-size:14;line-height:1.5;position:absolute;bottom:8px;left:8px;display:flex;align-items:center;gap:4px;border-radius:8px;background:rgba(19,19,20,.66);padding:4px 8px;color:#fff}.mute-icon{width:1rem;height:1rem;mask-size:1rem;-webkit-mask-size:1rem;background-color:var(--str-video__text-color1);mask-image:var(--str-video__icon--mic-off);-webkit-mask-image:var(--str-video__icon--mic-off)}.pin-icon{width:1rem;height:1rem;mask-size:1rem;-webkit-mask-size:1rem;background-color:var(--str-video__text-color1);mask-image:var(--str-video__icon--pin);-webkit-mask-image:var(--str-video__icon--pin)}
|