@skooldev/skool-stream-layout 1.0.9 → 1.0.10

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 (4) hide show
  1. package/dist/MultiPinLayout.d.ts +6 -0
  2. package/dist/index.cjs.js +29 -2
  3. package/dist/styles.css +1 -1
  4. package/package.json +1 -1
package/dist/MultiPinLayout.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { ComponentType } from "react";
2
+ type MultiPinLayoutComponentProps = {
3
+ CustomParticipantViewUI: ComponentType;
4
+ };
5
+ export declare const MultiPinLayout: ({ CustomParticipantViewUI }: MultiPinLayoutComponentProps) => import("react/jsx-runtime").JSX.Element;
6
+ export {};
package/dist/index.cjs.js CHANGED
@@ -48,11 +48,33 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
48
48
  const external_react_namespaceObject = require("react");
49
49
  ;// external "@stream-io/video-react-sdk"
50
50
  const video_react_sdk_namespaceObject = require("@stream-io/video-react-sdk");
51
+ ;// ./src/MultiPinLayout.tsx
52
+
53
+
54
+
55
+ const UnpinnedParticipantsLayout = ({ CustomParticipantViewUI, participants, }) => {
56
+ if (!participants.length) {
57
+ return null;
58
+ }
59
+ return ((0,jsx_runtime_namespaceObject.jsx)("div", { className: "skool-unpinned-participants-layout-container", children: (0,jsx_runtime_namespaceObject.jsx)("div", { className: "skool-unpinned-participants-layout-wrapper", children: (0,jsx_runtime_namespaceObject.jsx)("div", { className: "skool-unpinned-participants-scroll", children: participants.map((p) => ((0,jsx_runtime_namespaceObject.jsx)(video_react_sdk_namespaceObject.ParticipantView, { participant: p, ParticipantViewUI: CustomParticipantViewUI }, p.sessionId))) }) }) }));
60
+ };
61
+ const MultiPinLayoutComponent = ({ CustomParticipantViewUI }) => {
62
+ const { useParticipants } = (0,video_react_sdk_namespaceObject.useCallStateHooks)();
63
+ const participants = useParticipants();
64
+ const pinnedParticipantCount = (0,external_react_namespaceObject.useMemo)(() => participants.filter((participant) => (0,video_react_sdk_namespaceObject.isPinned)(participant)).length, [participants]);
65
+ const unpinnedParticipants = (0,external_react_namespaceObject.useMemo)(() => {
66
+ return participants.filter((p) => !(0,video_react_sdk_namespaceObject.isPinned)(p)).slice(0, 10);
67
+ }, [participants]);
68
+ return ((0,jsx_runtime_namespaceObject.jsxs)("div", { className: "skool-multi-pin-layout-wrapper", "data-participants": pinnedParticipantCount, children: [(0,jsx_runtime_namespaceObject.jsx)(video_react_sdk_namespaceObject.PaginatedGridLayout, { groupSize: 6, filterParticipants: { isPinned: true }, ParticipantViewUI: CustomParticipantViewUI }), (0,jsx_runtime_namespaceObject.jsx)(UnpinnedParticipantsLayout, { participants: unpinnedParticipants, CustomParticipantViewUI: CustomParticipantViewUI })] }));
69
+ };
70
+ const MultiPinLayout = MultiPinLayoutComponent;
71
+
51
72
  ;// ./src/index.tsx
52
73
 
53
74
 
54
75
 
55
76
 
77
+
56
78
  const ParticipantsViewCountContext = (0,external_react_namespaceObject.createContext)({
57
79
  increment: () => { },
58
80
  decrement: () => { },
@@ -66,7 +88,7 @@ const CustomParticipantViewUI = () => {
66
88
  return () => {
67
89
  decrement();
68
90
  };
69
- }, []);
91
+ }, [increment, decrement]);
70
92
  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]);
71
93
  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" })] }));
72
94
  };
@@ -82,13 +104,17 @@ const SkoolStreamLayoutComponent = (props) => {
82
104
  increment: () => setNumParticipantsInView((n) => n + 1),
83
105
  decrement: () => setNumParticipantsInView((n) => n - 1),
84
106
  }), []);
85
- const hasPinnedParticipant = (0,external_react_namespaceObject.useMemo)(() => !!participants.find((participant) => (0,video_react_sdk_namespaceObject.isPinned)(participant)), [participants]);
107
+ const pinnedParticipantCount = (0,external_react_namespaceObject.useMemo)(() => participants.filter((participant) => (0,video_react_sdk_namespaceObject.isPinned)(participant)).length, [participants]);
108
+ const hasPinnedParticipant = (0,external_react_namespaceObject.useMemo)(() => !!pinnedParticipantCount, [pinnedParticipantCount]);
86
109
  const mainLayout = (0,external_react_namespaceObject.useMemo)(() => {
87
110
  const participantsFilter = isWebinar
88
111
  ? {
89
112
  $or: [{ hasVideo: true }, { hasScreenShare: true }],
90
113
  }
91
114
  : undefined;
115
+ if (!hasOngoingScreenshare && pinnedParticipantCount > 1) {
116
+ return (0,jsx_runtime_namespaceObject.jsx)(MultiPinLayout, { CustomParticipantViewUI: CustomParticipantViewUI });
117
+ }
92
118
  if (hasOngoingScreenshare || (participants.length > 2 && hasPinnedParticipant)) {
93
119
  return ((0,jsx_runtime_namespaceObject.jsx)(video_react_sdk_namespaceObject.SpeakerLayout, { ParticipantViewUIBar: CustomParticipantViewUI, ParticipantViewUISpotlight: CustomParticipantViewUI, filterParticipants: participantsFilter, excludeLocalParticipant: excludeLocalParticipant }));
94
120
  }
@@ -97,6 +123,7 @@ const SkoolStreamLayoutComponent = (props) => {
97
123
  excludeLocalParticipant,
98
124
  hasOngoingScreenshare,
99
125
  participants,
126
+ pinnedParticipantCount,
100
127
  hasPinnedParticipant,
101
128
  isWebinar,
102
129
  ]);
package/dist/styles.css CHANGED
@@ -1 +1 @@
1
- .skool-stream-layout{background-color:#131314;height:100%;width:100%;color:#fff;display:flex;align-items:center;justify-content:center}.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:170vh}.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 !important}.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}.skool-stream-layout .str-video__speaker-layout__spotlight .str-video__participant-view{max-width:140vh}.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)}
1
+ .skool-stream-layout{background-color:#131314;height:100%;width:100%;color:#fff;display:flex;align-items:center;justify-content:center}.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:170vh}.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 !important}.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}.skool-stream-layout .str-video__speaker-layout__spotlight .str-video__participant-view{max-width:140vh}.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)}.skool-multi-pin-layout-wrapper{height:100%;width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px}.skool-multi-pin-layout-wrapper .str-video__paginated-grid-layout__wrapper{width:100%;height:fit-content !important;flex-grow:0;padding:0px 16px}.skool-multi-pin-layout-wrapper .str-video__paginated-grid-layout .str-video__paginated-grid-layout__group{padding-inline:0px}.skool-multi-pin-layout-wrapper[data-participants="2"] .str-video__paginated-grid-layout .str-video__paginated-grid-layout__group{max-width:180vh !important}.skool-multi-pin-layout-wrapper[data-participants="3"] .str-video__paginated-grid-layout .str-video__paginated-grid-layout__group,.skool-multi-pin-layout-wrapper[data-participants="4"] .str-video__paginated-grid-layout .str-video__paginated-grid-layout__group{max-width:90vh !important}.skool-multi-pin-layout-wrapper[data-participants="5"] .str-video__paginated-grid-layout .str-video__paginated-grid-layout__group,.skool-multi-pin-layout-wrapper[data-participants="6"] .str-video__paginated-grid-layout .str-video__paginated-grid-layout__group{max-width:140vh !important}.skool-unpinned-participants-layout-container{max-width:100%;padding:0px 16px;position:relative}.skool-unpinned-participants-layout-wrapper{width:100%;overflow-x:auto;scrollbar-width:none;height:160px;position:relative}.skool-unpinned-participants-layout-wrapper::-webkit-scrollbar{display:none}.skool-unpinned-participants-layout-wrapper .str-video__participant-view{width:auto}.skool-unpinned-participants-scroll{display:flex;gap:8px;height:100%}.skool-unpinned-participants-scroll>div{min-width:215px;aspect-ratio:16/9}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skooldev/skool-stream-layout",
3
- "version": "1.0.9",
3
+ "version": "1.0.10",
4
4
  "description": "Skool Stream Layout",
5
5
  "main": "dist/index.cjs.js",
6
6
  "types": "dist/index.d.ts",