@skooldev/skool-stream-layout 1.0.6 → 1.0.8

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/index.cjs.js +24 -8
  2. package/dist/index.d.ts +3 -1
  3. package/dist/styles.css +1 -1
  4. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -53,25 +53,35 @@ const video_react_sdk_namespaceObject = require("@stream-io/video-react-sdk");
53
53
 
54
54
 
55
55
 
56
- let numParticipantsInView = 0;
56
+ const ParticipantsViewCountContext = (0,external_react_namespaceObject.createContext)({
57
+ increment: () => { },
58
+ decrement: () => { },
59
+ });
57
60
  const CustomParticipantViewUI = () => {
61
+ const { increment, decrement } = (0,external_react_namespaceObject.useContext)(ParticipantsViewCountContext);
58
62
  const context = (0,video_react_sdk_namespaceObject.useParticipantViewContext)();
59
63
  const { participant } = context;
60
64
  (0,external_react_namespaceObject.useLayoutEffect)(() => {
61
- numParticipantsInView++;
65
+ increment();
62
66
  return () => {
63
- numParticipantsInView--;
67
+ decrement();
64
68
  };
65
69
  }, []);
66
70
  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]);
67
71
  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" })] }));
68
72
  };
69
- const SkoolStreamLayoutComponent = () => {
73
+ const SkoolStreamLayoutComponent = (props) => {
74
+ const { excludeLocalParticipant = false } = props;
70
75
  const call = (0,video_react_sdk_namespaceObject.useCall)();
71
76
  const { useParticipants, useHasOngoingScreenShare } = (0,video_react_sdk_namespaceObject.useCallStateHooks)();
72
77
  const participants = useParticipants();
73
78
  const hasOngoingScreenshare = useHasOngoingScreenShare();
74
79
  const isWebinar = (call === null || call === void 0 ? void 0 : call.type) === "livestream";
80
+ const [numParticipantsInView, setNumParticipantsInView] = (0,external_react_namespaceObject.useState)(0);
81
+ const value = (0,external_react_namespaceObject.useMemo)(() => ({
82
+ increment: () => setNumParticipantsInView((n) => n + 1),
83
+ decrement: () => setNumParticipantsInView((n) => n - 1),
84
+ }), []);
75
85
  const hasPinnedParticipant = (0,external_react_namespaceObject.useMemo)(() => !!participants.find((participant) => (0,video_react_sdk_namespaceObject.isPinned)(participant)), [participants]);
76
86
  const mainLayout = (0,external_react_namespaceObject.useMemo)(() => {
77
87
  const participantsFilter = isWebinar
@@ -80,11 +90,17 @@ const SkoolStreamLayoutComponent = () => {
80
90
  }
81
91
  : undefined;
82
92
  if (hasOngoingScreenshare || (participants.length > 2 && hasPinnedParticipant)) {
83
- return ((0,jsx_runtime_namespaceObject.jsx)(video_react_sdk_namespaceObject.SpeakerLayout, { ParticipantViewUIBar: CustomParticipantViewUI, ParticipantViewUISpotlight: CustomParticipantViewUI, filterParticipants: participantsFilter }));
93
+ return ((0,jsx_runtime_namespaceObject.jsx)(video_react_sdk_namespaceObject.SpeakerLayout, { ParticipantViewUIBar: CustomParticipantViewUI, ParticipantViewUISpotlight: CustomParticipantViewUI, filterParticipants: participantsFilter, excludeLocalParticipant: excludeLocalParticipant }));
84
94
  }
85
- return ((0,jsx_runtime_namespaceObject.jsx)(video_react_sdk_namespaceObject.PaginatedGridLayout, { groupSize: 12, ParticipantViewUI: CustomParticipantViewUI, filterParticipants: participantsFilter }));
86
- }, [hasOngoingScreenshare, participants, hasPinnedParticipant, isWebinar]);
87
- return ((0,jsx_runtime_namespaceObject.jsx)("div", { "data-participants": numParticipantsInView, className: "skool-stream-layout", children: mainLayout }));
95
+ return ((0,jsx_runtime_namespaceObject.jsx)(video_react_sdk_namespaceObject.PaginatedGridLayout, { groupSize: 12, ParticipantViewUI: CustomParticipantViewUI, filterParticipants: participantsFilter, excludeLocalParticipant: excludeLocalParticipant }));
96
+ }, [
97
+ excludeLocalParticipant,
98
+ hasOngoingScreenshare,
99
+ participants,
100
+ hasPinnedParticipant,
101
+ isWebinar,
102
+ ]);
103
+ return ((0,jsx_runtime_namespaceObject.jsx)(ParticipantsViewCountContext.Provider, { value: value, children: (0,jsx_runtime_namespaceObject.jsx)("div", { "data-participants": numParticipantsInView, className: "skool-stream-layout", children: mainLayout }) }));
88
104
  };
89
105
  const SkoolStreamLayout = (0,external_react_namespaceObject.memo)(SkoolStreamLayoutComponent);
90
106
 
package/dist/index.d.ts CHANGED
@@ -1,3 +1,5 @@
1
1
  import React from "react";
2
2
  import "./styles.scss";
3
- export declare const SkoolStreamLayout: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
3
+ export declare const SkoolStreamLayout: React.MemoExoticComponent<(props: {
4
+ excludeLocalParticipant?: boolean;
5
+ }) => import("react/jsx-runtime").JSX.Element>;
package/dist/styles.css CHANGED
@@ -1 +1 @@
1
- .skool-stream-layout{background-color:#131314;height:100%;width:100%;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 !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}.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: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 !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}.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)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skooldev/skool-stream-layout",
3
- "version": "1.0.6",
3
+ "version": "1.0.8",
4
4
  "description": "Skool Stream Layout",
5
5
  "main": "dist/index.cjs.js",
6
6
  "types": "dist/index.d.ts",