@skooldev/skool-stream-layout 1.0.12 → 1.0.13

package/dist/index.cjs.js

@@ -82,10 +82,30 @@ const ParticipantsViewCountContext = (0,external_react_namespaceObject.createCon
     increment: () => { },
     decrement: () => { },
 });
+const RecordingSceneReadyContext = (0,external_react_namespaceObject.createContext)(undefined);
 const CustomParticipantViewUI = () => {
     const { increment, decrement } = (0,external_react_namespaceObject.useContext)(ParticipantsViewCountContext);
-    const context = (0,video_react_sdk_namespaceObject.useParticipantViewContext)();
-    const { participant } = context;
+    const notifyReady = (0,external_react_namespaceObject.useContext)(RecordingSceneReadyContext);
+    const { participant, videoElement, videoPlaceholderElement } = (0,video_react_sdk_namespaceObject.useParticipantViewContext)();
+    (0,external_react_namespaceObject.useEffect)(() => {
+        // no-op for non-recording use-cases
+        if (!notifyReady)
+            return;
+        const isPublishingVideoTrack = participant === null || participant === void 0 ? void 0 : participant.publishedTracks.includes(video_react_sdk_namespaceObject.SfuModels.TrackType.VIDEO);
+        // video element for participants with video
+        if (isPublishingVideoTrack && videoElement) {
+            const isAlreadyPlaying = videoElement.currentTime > 0 && !videoElement.paused && !videoElement.ended;
+            if (isAlreadyPlaying)
+                notifyReady(true);
+            const onPlay = () => notifyReady(true);
+            videoElement.addEventListener("play", onPlay, { once: true });
+            return () => videoElement.removeEventListener("play", onPlay);
+        }
+        // placeholder div for audio-only participants
+        if (!isPublishingVideoTrack && videoPlaceholderElement) {
+            notifyReady(true);
+        }
+    }, [notifyReady, participant === null || participant === void 0 ? void 0 : participant.publishedTracks, videoElement, videoPlaceholderElement]);
     (0,external_react_namespaceObject.useLayoutEffect)(() => {
         increment();
         return () => {
@@ -96,7 +116,7 @@ const CustomParticipantViewUI = () => {
     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" })] }));
 };
 const SkoolStreamLayoutComponent = (props) => {
-    const { excludeLocalParticipant = false } = props;
+    const { excludeLocalParticipant = false, notifyReady } = props;
     const call = (0,video_react_sdk_namespaceObject.useCall)();
     const { useParticipants, useHasOngoingScreenShare } = (0,video_react_sdk_namespaceObject.useCallStateHooks)();
     const participants = useParticipants();
@@ -130,7 +150,7 @@ const SkoolStreamLayoutComponent = (props) => {
         hasPinnedParticipant,
         isWebinar,
     ]);
-    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 }) }));
+    return ((0,jsx_runtime_namespaceObject.jsx)(RecordingSceneReadyContext.Provider, { value: notifyReady, children: (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 }) }) }));
 };
 const SkoolStreamLayout = (0,external_react_namespaceObject.memo)(SkoolStreamLayoutComponent);
 

package/dist/index.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 import "./styles.scss";
 export declare const SkoolStreamLayout: React.MemoExoticComponent<(props: {
     excludeLocalParticipant?: boolean;
+    notifyReady?: (ready: boolean) => void;
 }) => import("react/jsx-runtime").JSX.Element>;

package/dist/index.es.js

@@ -1,5 +1,5 @@
 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";
-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";
+import { createContext as __WEBPACK_EXTERNAL_MODULE_react_createContext__, memo as __WEBPACK_EXTERNAL_MODULE_react_memo__, useContext as __WEBPACK_EXTERNAL_MODULE_react_useContext__, useEffect as __WEBPACK_EXTERNAL_MODULE_react_useEffect__, useLayoutEffect as __WEBPACK_EXTERNAL_MODULE_react_useLayoutEffect__, useMemo as __WEBPACK_EXTERNAL_MODULE_react_useMemo__, useState as __WEBPACK_EXTERNAL_MODULE_react_useState__ } from "react";
 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";
 /******/ // The require scope
 /******/ var __webpack_require__ = {};
@@ -65,10 +65,30 @@ const ParticipantsViewCountContext = __WEBPACK_EXTERNAL_MODULE_react_createConte
     increment: () => { },
     decrement: () => { },
 });
+const RecordingSceneReadyContext = __WEBPACK_EXTERNAL_MODULE_react_createContext__(undefined);
 const CustomParticipantViewUI = () => {
     const { increment, decrement } = __WEBPACK_EXTERNAL_MODULE_react_useContext__(ParticipantsViewCountContext);
-    const context = __WEBPACK_EXTERNAL_MODULE__stream_io_video_react_sdk_4ccb1546_useParticipantViewContext__();
-    const { participant } = context;
+    const notifyReady = __WEBPACK_EXTERNAL_MODULE_react_useContext__(RecordingSceneReadyContext);
+    const { participant, videoElement, videoPlaceholderElement } = __WEBPACK_EXTERNAL_MODULE__stream_io_video_react_sdk_4ccb1546_useParticipantViewContext__();
+    __WEBPACK_EXTERNAL_MODULE_react_useEffect__(() => {
+        // no-op for non-recording use-cases
+        if (!notifyReady)
+            return;
+        const isPublishingVideoTrack = participant === null || participant === void 0 ? void 0 : participant.publishedTracks.includes(__WEBPACK_EXTERNAL_MODULE__stream_io_video_react_sdk_4ccb1546_SfuModels__.TrackType.VIDEO);
+        // video element for participants with video
+        if (isPublishingVideoTrack && videoElement) {
+            const isAlreadyPlaying = videoElement.currentTime > 0 && !videoElement.paused && !videoElement.ended;
+            if (isAlreadyPlaying)
+                notifyReady(true);
+            const onPlay = () => notifyReady(true);
+            videoElement.addEventListener("play", onPlay, { once: true });
+            return () => videoElement.removeEventListener("play", onPlay);
+        }
+        // placeholder div for audio-only participants
+        if (!isPublishingVideoTrack && videoPlaceholderElement) {
+            notifyReady(true);
+        }
+    }, [notifyReady, participant === null || participant === void 0 ? void 0 : participant.publishedTracks, videoElement, videoPlaceholderElement]);
     __WEBPACK_EXTERNAL_MODULE_react_useLayoutEffect__(() => {
         increment();
         return () => {
@@ -79,7 +99,7 @@ const CustomParticipantViewUI = () => {
     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" })] }));
 };
 const SkoolStreamLayoutComponent = (props) => {
-    const { excludeLocalParticipant = false } = props;
+    const { excludeLocalParticipant = false, notifyReady } = props;
     const call = __WEBPACK_EXTERNAL_MODULE__stream_io_video_react_sdk_4ccb1546_useCall__();
     const { useParticipants, useHasOngoingScreenShare } = __WEBPACK_EXTERNAL_MODULE__stream_io_video_react_sdk_4ccb1546_useCallStateHooks__();
     const participants = useParticipants();
@@ -113,7 +133,7 @@ const SkoolStreamLayoutComponent = (props) => {
         hasPinnedParticipant,
         isWebinar,
     ]);
-    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 }) }));
+    return (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8_jsx__(RecordingSceneReadyContext.Provider, { value: notifyReady, children: __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 }) }) }));
 };
 const SkoolStreamLayout = __WEBPACK_EXTERNAL_MODULE_react_memo__(SkoolStreamLayoutComponent);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skooldev/skool-stream-layout",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "Skool Stream Layout",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",