@skooldev/skool-stream-layout 1.0.5 → 1.0.7

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 +11 -4
  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
@@ -66,7 +66,8 @@ const CustomParticipantViewUI = () => {
66
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]);
67
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" })] }));
68
68
  };
69
- const SkoolStreamLayoutComponent = () => {
69
+ const SkoolStreamLayoutComponent = (props) => {
70
+ const { excludeLocalParticipant = false } = props;
70
71
  const call = (0,video_react_sdk_namespaceObject.useCall)();
71
72
  const { useParticipants, useHasOngoingScreenShare } = (0,video_react_sdk_namespaceObject.useCallStateHooks)();
72
73
  const participants = useParticipants();
@@ -80,10 +81,16 @@ const SkoolStreamLayoutComponent = () => {
80
81
  }
81
82
  : undefined;
82
83
  if (hasOngoingScreenshare || (participants.length > 2 && hasPinnedParticipant)) {
83
- return ((0,jsx_runtime_namespaceObject.jsx)(video_react_sdk_namespaceObject.SpeakerLayout, { ParticipantViewUIBar: CustomParticipantViewUI, ParticipantViewUISpotlight: CustomParticipantViewUI, filterParticipants: participantsFilter }));
84
+ return ((0,jsx_runtime_namespaceObject.jsx)(video_react_sdk_namespaceObject.SpeakerLayout, { ParticipantViewUIBar: CustomParticipantViewUI, ParticipantViewUISpotlight: CustomParticipantViewUI, filterParticipants: participantsFilter, excludeLocalParticipant: excludeLocalParticipant }));
84
85
  }
85
- return ((0,jsx_runtime_namespaceObject.jsx)(video_react_sdk_namespaceObject.PaginatedGridLayout, { groupSize: 12, ParticipantViewUI: CustomParticipantViewUI, filterParticipants: participantsFilter }));
86
- }, [hasOngoingScreenshare, participants, hasPinnedParticipant, isWebinar]);
86
+ return ((0,jsx_runtime_namespaceObject.jsx)(video_react_sdk_namespaceObject.PaginatedGridLayout, { groupSize: 12, ParticipantViewUI: CustomParticipantViewUI, filterParticipants: participantsFilter, excludeLocalParticipant: excludeLocalParticipant }));
87
+ }, [
88
+ excludeLocalParticipant,
89
+ hasOngoingScreenshare,
90
+ participants,
91
+ hasPinnedParticipant,
92
+ isWebinar,
93
+ ]);
87
94
  return ((0,jsx_runtime_namespaceObject.jsx)("div", { "data-participants": numParticipantsInView, className: "skool-stream-layout", children: mainLayout }));
88
95
  };
89
96
  const SkoolStreamLayout = (0,external_react_namespaceObject.memo)(SkoolStreamLayoutComponent);
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;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}.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.5",
3
+ "version": "1.0.7",
4
4
  "description": "Skool Stream Layout",
5
5
  "main": "dist/index.cjs.js",
6
6
  "types": "dist/index.d.ts",