@selfcommunity/react-ui 0.8.0-live.75 → 0.8.0-live.78

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/VideoConference.js

@@ -9,15 +9,39 @@ import { ControlBar } from './ControlBar';
 import { useEffect } from 'react';
 import { useLivestreamCheck } from './useLiveStreamCheck';
 import { FocusLayout, FocusLayoutContainer, FocusLayoutContainerNoParticipants } from './FocusLayout';
+import { useSCUser } from '@selfcommunity/react-core';
+import classNames from 'classnames';
+import { styled } from '@mui/material/styles';
+import { Box } from '@mui/material';
+import { useThemeProps } from '@mui/system';
+const PREFIX = 'SCVideoConference';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({
+    '& .lk-chat': {
+        height: '100%'
+    }
+}));
 /**
  * The `VideoConference` ready-made component is your drop-in solution for a classic video conferencing application.
  * It provides functionality such as focusing on one participant, grid view with pagination to handle large numbers
  * of participants, basic non-persistent chat, screen sharing, and more.
  *
  */
-export function VideoConference(_a) {
-    var _b, _c;
-    var { chatMessageFormatter, chatMessageDecoder, chatMessageEncoder, SettingsComponent, speakerFocused, disableChat = false, disableMicrophone = false, disableCamera = false, disableShareScreen = false, hideParticipantsList = false, showSettings } = _a, props = __rest(_a, ["chatMessageFormatter", "chatMessageDecoder", "chatMessageEncoder", "SettingsComponent", "speakerFocused", "disableChat", "disableMicrophone", "disableCamera", "disableShareScreen", "hideParticipantsList", "showSettings"]);
+export function VideoConference(inProps) {
+    var _a, _b;
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, chatMessageFormatter, chatMessageDecoder, chatMessageEncoder, SettingsComponent, speakerFocused, disableChat = false, disableMicrophone = false, disableCamera = false, disableShareScreen = false, hideParticipantsList = false, showSettings } = props, rest = __rest(props, ["className", "chatMessageFormatter", "chatMessageDecoder", "chatMessageEncoder", "SettingsComponent", "speakerFocused", "disableChat", "disableMicrophone", "disableCamera", "disableShareScreen", "hideParticipantsList", "showSettings"]);
+    // STATE
     const [widgetState, setWidgetState] = React.useState({
         showChat: false,
         unreadMessages: 0,
@@ -25,15 +49,30 @@ export function VideoConference(_a) {
     });
     const [focusInitialized, setFocusInitialized] = React.useState(false);
     const lastAutoFocusedScreenShareTrack = React.useRef(null);
+    // HOOKS
+    const scUserContext = useSCUser();
     const tracks = useTracks([
         { source: Track.Source.Camera, withPlaceholder: true },
         { source: Track.Source.ScreenShare, withPlaceholder: false }
     ], { updateOnlyOn: [RoomEvent.ActiveSpeakersChanged], onlySubscribed: false });
     const participants = useParticipants();
+    const layoutContext = useCreateLayoutContext();
+    const screenShareTracks = tracks.filter(isTrackReference).filter((track) => track.publication.source === Track.Source.ScreenShare);
+    const focusTrack = (_a = usePinnedTracks(layoutContext)) === null || _a === void 0 ? void 0 : _a[0];
+    const carouselTracks = tracks.filter((track) => !isEqualTrackRef(track, focusTrack));
+    useLivestreamCheck();
+    /**
+     * widgetUpdate
+     * @param state
+     */
     const widgetUpdate = (state) => {
         log.debug('updating widget state', state);
         setWidgetState(state);
     };
+    /**
+     * handleFocusStateChange
+     * @param state
+     */
     const handleFocusStateChange = (state) => {
         var _a, _b;
         log.debug('updating widget state', state);
@@ -44,14 +83,8 @@ export function VideoConference(_a) {
             }
         }
     };
-    const layoutContext = useCreateLayoutContext();
-    const screenShareTracks = tracks.filter(isTrackReference).filter((track) => track.publication.source === Track.Source.ScreenShare);
-    const focusTrack = (_b = usePinnedTracks(layoutContext)) === null || _b === void 0 ? void 0 : _b[0];
-    const carouselTracks = tracks.filter((track) => !isEqualTrackRef(track, focusTrack));
-    // HOOKS
-    useLivestreamCheck();
     useEffect(() => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         // If screen share tracks are published, and no pin is set explicitly, auto set the screen share.
         if (screenShareTracks.some((track) => track.publication.isSubscribed) && lastAutoFocusedScreenShareTrack.current === null) {
             log.debug('Auto set screen share focus:', { newScreenShareTrack: screenShareTracks[0] });
@@ -64,15 +97,25 @@ export function VideoConference(_a) {
             (_d = (_c = layoutContext.pin).dispatch) === null || _d === void 0 ? void 0 : _d.call(_c, { msg: 'clear_pin' });
             lastAutoFocusedScreenShareTrack.current = null;
         }
-        if (focusTrack && !isTrackReference(focusTrack)) {
-            const updatedFocusTrack = tracks.find((tr) => tr.participant.identity === focusTrack.participant.identity && tr.source === focusTrack.source);
-            if (updatedFocusTrack !== focusTrack && isTrackReference(updatedFocusTrack)) {
+        if (focusTrack) {
+            let updatedFocusTrack;
+            const isFocusTrackParticipantExist = participants.find((pt) => pt.identity === focusTrack.participant.identity);
+            if (!isFocusTrackParticipantExist) {
+                // Focus track is relative to a participant that has left the room
+                updatedFocusTrack = tracks.find((tr) => tr.participant.identity === scUserContext.user.id.toString());
                 (_f = (_e = layoutContext.pin).dispatch) === null || _f === void 0 ? void 0 : _f.call(_e, { msg: 'set_pin', trackReference: updatedFocusTrack });
             }
+            else if (!isTrackReference(focusTrack)) {
+                // You are not subscribet to the track
+                updatedFocusTrack = tracks.find((tr) => tr.participant.identity === focusTrack.participant.identity && tr.source === focusTrack.source);
+                if (updatedFocusTrack !== focusTrack && isTrackReference(updatedFocusTrack)) {
+                    (_h = (_g = layoutContext.pin).dispatch) === null || _h === void 0 ? void 0 : _h.call(_g, { msg: 'set_pin', trackReference: updatedFocusTrack });
+                }
+            }
         }
     }, [
         screenShareTracks.map((ref) => `${ref.publication.trackSid}_${ref.publication.isSubscribed}`).join(),
-        (_c = focusTrack === null || focusTrack === void 0 ? void 0 : focusTrack.publication) === null || _c === void 0 ? void 0 : _c.trackSid,
+        (_b = focusTrack === null || focusTrack === void 0 ? void 0 : focusTrack.publication) === null || _b === void 0 ? void 0 : _b.trackSid,
         tracks,
         participants,
         speakerFocused
@@ -95,7 +138,7 @@ export function VideoConference(_a) {
             }
         }
     }, [tracks, participants, speakerFocused]);
-    return (_jsxs("div", Object.assign({ className: "lk-video-conference" }, props, { children: [isWeb() && (_jsxs(LayoutContextProvider, Object.assign({ value: layoutContext, onPinChange: handleFocusStateChange, onWidgetChange: widgetUpdate }, { children: [_jsxs("div", Object.assign({ className: "lk-video-conference-inner" }, { children: [!focusTrack ? (_jsx("div", Object.assign({ className: "lk-grid-layout-wrapper" }, { children: _jsx(GridLayout, Object.assign({ tracks: tracks }, { children: _jsx(ParticipantTile, {}) })) }))) : (_jsx("div", Object.assign({ className: "lk-focus-layout-wrapper" }, { children: hideParticipantsList ? (_jsx(FocusLayoutContainerNoParticipants, { children: focusTrack && _jsx(FocusLayout, { trackRef: focusTrack }) })) : (_jsxs(FocusLayoutContainer, { children: [_jsx(CarouselLayout, Object.assign({ tracks: carouselTracks }, { children: _jsx(ParticipantTile, {}) })), focusTrack && _jsx(FocusLayout, { trackRef: focusTrack })] })) }))), _jsx(ControlBar, { controls: Object.assign({
+    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root, 'lk-video-conference') }, rest, { children: [isWeb() && (_jsxs(LayoutContextProvider, Object.assign({ value: layoutContext, onPinChange: handleFocusStateChange, onWidgetChange: widgetUpdate }, { children: [_jsxs("div", Object.assign({ className: "lk-video-conference-inner" }, { children: [!focusTrack ? (_jsx("div", Object.assign({ className: "lk-grid-layout-wrapper" }, { children: _jsx(GridLayout, Object.assign({ tracks: tracks }, { children: _jsx(ParticipantTile, {}) })) }))) : (_jsx("div", Object.assign({ className: "lk-focus-layout-wrapper" }, { children: hideParticipantsList ? (_jsx(FocusLayoutContainerNoParticipants, { children: focusTrack && _jsx(FocusLayout, { trackRef: focusTrack }) })) : (_jsxs(FocusLayoutContainer, { children: [_jsx(CarouselLayout, Object.assign({ tracks: carouselTracks }, { children: _jsx(ParticipantTile, {}) })), focusTrack && _jsx(FocusLayout, { trackRef: focusTrack })] })) }))), _jsx(ControlBar, { controls: Object.assign({
                                     chat: !disableChat,
                                     microphone: !disableMicrophone,
                                     camera: !disableCamera,

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/useLiveStreamCheck.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { LiveStreamApiClient } from '@selfcommunity/api-services';
 import { useDisconnectButton, useParticipants } from '@livekit/components-react';
 import { useLiveStream } from './LiveStreamProvider';
@@ -6,6 +6,7 @@ import { useSnackbar } from 'notistack';
 import { useIntl } from 'react-intl';
 import { useSCUser } from '@selfcommunity/react-core';
 import { LIVE_CHECKING_INTERVAL, WARNING_THRESHOLD_EXPIRING_SOON } from '../constants';
+import { RoomEvent } from 'livekit-client';
 /**
  * Custom hook for monitoring livestream.
  * @param {number} warningThreshold
@@ -13,20 +14,33 @@ import { LIVE_CHECKING_INTERVAL, WARNING_THRESHOLD_EXPIRING_SOON } from '../cons
  * @param performDisconnect
  */
 export function useLivestreamCheck(warningThreshold = WARNING_THRESHOLD_EXPIRING_SOON, showWarnings = true, performDisconnect = true) {
+    // STATE
+    const [timeRemaining, setTimeRemaining] = useState(60);
+    const [isExpiringSoon, setIsExpiringSoon] = useState(false);
+    const [isExpired, setIsExpired] = useState(false);
+    const intervalRef = useRef(null);
     // HOOKS
     const scUserContext = useSCUser();
-    const participants = useParticipants();
+    const participants = useParticipants({
+        updateOnlyOn: [
+            RoomEvent.ParticipantConnected,
+            RoomEvent.ParticipantDisconnected,
+            RoomEvent.ConnectionStateChanged,
+            RoomEvent.Connected,
+            RoomEvent.Disconnected,
+            RoomEvent.TrackSubscribed,
+            RoomEvent.TrackUnsubscribed
+        ]
+    });
     const { liveStream } = useLiveStream();
     const { buttonProps } = useDisconnectButton({});
     const { enqueueSnackbar } = useSnackbar();
     const __DEBUG = useRef(true);
-    // STATE
-    const [timeRemaining, setTimeRemaining] = useState(60);
-    const [isExpiringSoon, setIsExpiringSoon] = useState(false);
-    const [isExpired, setIsExpired] = useState(false);
-    const intervalRef = useRef(null);
     // INTL
     const intl = useIntl();
+    /**
+     * fetchLivestreamStatus
+     */
     const fetchLivestreamStatus = () => {
         LiveStreamApiClient.getMonthlyDuration()
             .then((r) => {
@@ -54,6 +68,9 @@ export function useLivestreamCheck(warningThreshold = WARNING_THRESHOLD_EXPIRING
             console.error('Error fetching live status:', error);
         });
     };
+    /**
+     * Check live
+     */
     const check = useCallback(() => {
         if (__DEBUG) {
             console.log('Checking live status');
@@ -105,6 +122,6 @@ export function useLivestreamCheck(warningThreshold = WARNING_THRESHOLD_EXPIRING
     useEffect(() => {
         intervalRef.current = setInterval(check, LIVE_CHECKING_INTERVAL * 60000);
         return () => intervalRef.current && clearInterval(intervalRef.current);
-    }, [isExpired, isExpiringSoon]);
+    }, [isExpired, isExpiringSoon, participants]);
     return { timeRemaining, isExpiringSoon, isExpired };
 }

package/lib/esm/components/LiveStreamRoom/constants.d.ts

@@ -7,7 +7,7 @@ export declare const defaultVideoOptions: {
  * Checking live status on VideoLiveConference
  * In minutes
  */
-export declare const LIVE_CHECKING_INTERVAL = 3;
+export declare const LIVE_CHECKING_INTERVAL = 1;
 /**
  * Warning threshold expiring soon
  * In minutes

package/lib/esm/components/LiveStreamRoom/constants.js

@@ -7,7 +7,7 @@ export const defaultVideoOptions = {
  * Checking live status on VideoLiveConference
  * In minutes
  */
-export const LIVE_CHECKING_INTERVAL = 3;
+export const LIVE_CHECKING_INTERVAL = 1;
 /**
  * Warning threshold expiring soon
  * In minutes

package/lib/esm/components/Notification/LiveStream/LiveStream.js

@@ -42,7 +42,9 @@ export default function LiveStreamNotification(props) {
     // CONST
     const isSnippetTemplate = template === SCNotificationObjectTemplateType.SNIPPET;
     const isToastTemplate = template === SCNotificationObjectTemplateType.TOAST;
-    const inProgress = Boolean(!notificationObject.live_stream.closed_at_by_host && (notificationObject.live_stream.last_started_at && !notificationObject.live_stream.last_finished_at));
+    const inProgress = Boolean(!notificationObject.live_stream.closed_at_by_host &&
+        notificationObject.live_stream.last_started_at &&
+        !notificationObject.live_stream.last_finished_at);
     // RENDER
     if (isSnippetTemplate) {
         return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: _jsx(Link, Object.assign({}, (!notificationObject.live_stream.host.deleted && {

package/lib/esm/shared/EventInfoDetails/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Icon, Stack, styled, Tooltip, Typography, useThemeProps } from '@mui/material';
-import { Link, useSCFetchEvent } from '@selfcommunity/react-core';
+import { Box, Button, Icon, Stack, styled, Tooltip, Typography, useThemeProps } from '@mui/material';
+import { Link, SCRoutes, SCUserContext, useSCFetchEvent, useSCRouting } from '@selfcommunity/react-core';
 import { SCEventLocationType, SCEventPrivacyType, SCEventRecurrenceType } from '@selfcommunity/types';
-import { useMemo } from 'react';
+import { useContext, useMemo } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 const PREFIX = 'SCEventInfoDetails';
 const classes = {
@@ -10,6 +10,7 @@ const classes = {
     iconTextWrapper: `${PREFIX}-icon-text-wrapper`,
     inProgress: `${PREFIX}-in-progress`,
     link: `${PREFIX}-link`,
+    joinLive: `${PREFIX}-join-live`,
     url: `${PREFIX}-url`,
     creationWrapper: `${PREFIX}-creation-wrapper`
 };
@@ -28,6 +29,9 @@ export default function EventInfoDetails(inProps) {
     // HOOKS
     const intl = useIntl();
     const { scEvent } = useSCFetchEvent({ id: eventId, event });
+    // CONTEXT
+    const scRoutingContext = useSCRouting();
+    const scUserContext = useContext(SCUserContext);
     const privacy = useMemo(() => (scEvent && scEvent.privacy === SCEventPrivacyType.PUBLIC ? 'ui.eventInfoDetails.privacy.public' : 'ui.eventInfoDetails.privacy.private'), [scEvent]);
     const location = useMemo(() => scEvent && scEvent.location === SCEventLocationType.ONLINE ? 'ui.eventInfoDetails.location.virtual' : 'ui.eventInfoDetails.location.inPerson', [scEvent]);
     if (!scEvent) {
@@ -41,7 +45,11 @@ export default function EventInfoDetails(inProps) {
                                         month: 'long'
                                     }),
                                     start: intl.formatDate(scEvent.running ? scEvent.running_start_date : scEvent.next_start_date ? scEvent.next_start_date : scEvent.start_date, { hour: 'numeric', minute: 'numeric' })
-                                } }) })) })), hasInProgress && scEvent.active && scEvent.running && (_jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.eventInfoDetails.inProgress", defaultMessage: "ui.eventInfoDetails.inProgress" }) }, { children: _jsx(Box, { className: classes.inProgress }) })))] }))), beforeRecurringInfo, hasRecurringInfo && scEvent.recurring !== SCEventRecurrenceType.NEVER && (_jsxs(Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideRecurringIcon && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "frequency" })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: `ui.eventInfoDetails.frequency.${scEvent.recurring}.placeholder`, defaultMessage: `ui.eventInfoDetails.frequency.${scEvent.recurring}.placeholder` }) }))] }))), beforePrivacyInfo, hasPrivacyInfo && (_jsxs(Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hidePrivacyIcon && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: scEvent.privacy === SCEventPrivacyType.PUBLIC ? 'public' : 'private' })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: privacy, defaultMessage: privacy }) })), "-", _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: location, defaultMessage: location }) }))] }))), beforeLocationInfo, hasLocationInfo && (_jsxs(Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideLocationIcon && (_jsx(Icon, Object.assign({ fontSize: "small" }, { children: scEvent.location === SCEventLocationType.ONLINE ? 'play_circle_outline' : 'add_location_alt' }))), scEvent.location === SCEventLocationType.ONLINE ? (_jsx(Link, Object.assign({ to: scEvent.link, target: "_blank", className: classes.link }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.url }, { children: scEvent.link })) }))) : (_jsx(Typography, Object.assign({ variant: "body1", className: classes.url }, { children: scEvent.geolocation })))] }))), beforeCreatedInfo, hasCreatedInfo && (_jsxs(Stack, Object.assign({ className: classes.creationWrapper }, { children: [!hideCreatedIcon && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "create" })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.eventInfoDetails.date.create", defaultMessage: "ui.eventInfoDetails.date.create", values: {
+                                } }) })) })), hasInProgress && scEvent.active && scEvent.running && (_jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.eventInfoDetails.inProgress", defaultMessage: "ui.eventInfoDetails.inProgress" }) }, { children: _jsx(Box, { className: classes.inProgress }) })))] }))), beforeRecurringInfo, hasRecurringInfo && scEvent.recurring !== SCEventRecurrenceType.NEVER && (_jsxs(Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideRecurringIcon && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "frequency" })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: `ui.eventInfoDetails.frequency.${scEvent.recurring}.placeholder`, defaultMessage: `ui.eventInfoDetails.frequency.${scEvent.recurring}.placeholder` }) }))] }))), beforePrivacyInfo, hasPrivacyInfo && (_jsxs(Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hidePrivacyIcon && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: scEvent.privacy === SCEventPrivacyType.PUBLIC ? 'public' : 'private' })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: privacy, defaultMessage: privacy }) })), "-", _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: location, defaultMessage: location }) }))] }))), beforeLocationInfo, hasLocationInfo && (_jsxs(Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideLocationIcon && (_jsx(Icon, Object.assign({ fontSize: "small" }, { children: scEvent.location === SCEventLocationType.ONLINE ? 'play_circle_outline' : 'add_location_alt' }))), scEvent.location === SCEventLocationType.ONLINE ? (scEvent.live_stream ? (_jsx(Button, Object.assign({ size: "small", variant: "contained", color: "secondary", component: Link, disabled: Boolean(!scUserContext.user ||
+                            (scEvent.live_stream.host.id !== scUserContext.user.id &&
+                                !scEvent.live_stream.closed_at_by_host &&
+                                scEvent.live_stream.last_started_at &&
+                                !scEvent.live_stream.last_finished_at)), to: scRoutingContext.url(SCRoutes.LIVESTREAM_ROUTE_NAME, scEvent.live_stream), className: classes.joinLive }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.eventInfoDetails.live.join", id: "ui.eventInfoDetails.live.join" }) }))) : (_jsx(Link, Object.assign({ to: scEvent.link, target: "_blank", className: classes.link }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.url }, { children: scEvent.link })) })))) : (_jsx(Typography, Object.assign({ variant: "body1", className: classes.url }, { children: scEvent.geolocation })))] }))), beforeCreatedInfo, hasCreatedInfo && (_jsxs(Stack, Object.assign({ className: classes.creationWrapper }, { children: [!hideCreatedIcon && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "create" })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.eventInfoDetails.date.create", defaultMessage: "ui.eventInfoDetails.date.create", values: {
                                 date: intl.formatDate(scEvent.created_at, {
                                     weekday: 'long',
                                     day: 'numeric',