@selfcommunity/react-templates 0.4.5-alpha.9 → 0.4.5-courses.99

package/lib/cjs/index.d.ts

@@ -11,4 +11,5 @@ import Group, { GroupProps, GroupSkeleton } from './components/Group';
 import GroupFeed, { GroupFeedProps, GroupFeedSkeleton } from './components/GroupFeed';
 import Event, { EventProps, EventSkeleton } from './components/Event';
 import EventFeed, { EventFeedProps, EventFeedSkeleton } from './components/EventFeed';
-export { Category, CategoryProps, CategorySkeleton, CategoryFeed, CategoryFeedProps, CategoryFeedSkeleton, ExploreFeed, ExploreFeedProps, ExploreFeedSkeleton, FeedObjectDetail, FeedObjectDetailProps, FeedObjectDetailSkeleton, MainFeed, MainFeedProps, MainFeedSkeleton, NotificationFeed, NotificationFeedProps, NotificationFeedSkeleton, UserFeed, UserFeedProps, UserFeedSkeleton, UserProfile, UserProfileProps, UserProfileSkeleton, LoyaltyProgramDetail, LoyaltyProgramDetailProps, LoyaltyProgramDetailSkeleton, GroupFeed, GroupFeedProps, GroupFeedSkeleton, Group, GroupProps, GroupSkeleton, Event, EventProps, EventSkeleton, EventFeed, EventFeedProps, EventFeedSkeleton };
+import Lesson, { LessonProps } from './components/Lesson';
+export { Category, CategoryProps, CategorySkeleton, CategoryFeed, CategoryFeedProps, CategoryFeedSkeleton, ExploreFeed, ExploreFeedProps, ExploreFeedSkeleton, FeedObjectDetail, FeedObjectDetailProps, FeedObjectDetailSkeleton, MainFeed, MainFeedProps, MainFeedSkeleton, NotificationFeed, NotificationFeedProps, NotificationFeedSkeleton, UserFeed, UserFeedProps, UserFeedSkeleton, UserProfile, UserProfileProps, UserProfileSkeleton, LoyaltyProgramDetail, LoyaltyProgramDetailProps, LoyaltyProgramDetailSkeleton, GroupFeed, GroupFeedProps, GroupFeedSkeleton, Group, GroupProps, GroupSkeleton, Event, EventProps, EventSkeleton, EventFeed, EventFeedProps, EventFeedSkeleton, Lesson, LessonProps };

package/lib/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EventFeedSkeleton = exports.EventFeed = exports.EventSkeleton = exports.Event = exports.GroupSkeleton = exports.Group = exports.GroupFeedSkeleton = exports.GroupFeed = exports.LoyaltyProgramDetailSkeleton = exports.LoyaltyProgramDetail = exports.UserProfileSkeleton = exports.UserProfile = exports.UserFeedSkeleton = exports.UserFeed = exports.NotificationFeedSkeleton = exports.NotificationFeed = exports.MainFeedSkeleton = exports.MainFeed = exports.FeedObjectDetailSkeleton = exports.FeedObjectDetail = exports.ExploreFeedSkeleton = exports.ExploreFeed = exports.CategoryFeedSkeleton = exports.CategoryFeed = exports.CategorySkeleton = exports.Category = void 0;
+exports.Lesson = exports.EventFeedSkeleton = exports.EventFeed = exports.EventSkeleton = exports.Event = exports.GroupSkeleton = exports.Group = exports.GroupFeedSkeleton = exports.GroupFeed = exports.LoyaltyProgramDetailSkeleton = exports.LoyaltyProgramDetail = exports.UserProfileSkeleton = exports.UserProfile = exports.UserFeedSkeleton = exports.UserFeed = exports.NotificationFeedSkeleton = exports.NotificationFeed = exports.MainFeedSkeleton = exports.MainFeed = exports.FeedObjectDetailSkeleton = exports.FeedObjectDetail = exports.ExploreFeedSkeleton = exports.ExploreFeed = exports.CategoryFeedSkeleton = exports.CategoryFeed = exports.CategorySkeleton = exports.Category = void 0;
 const tslib_1 = require("tslib");
 const Category_1 = tslib_1.__importStar(require("./components/Category"));
 exports.Category = Category_1.default;
@@ -41,3 +41,5 @@ Object.defineProperty(exports, "EventSkeleton", { enumerable: true, get: functio
 const EventFeed_1 = tslib_1.__importStar(require("./components/EventFeed"));
 exports.EventFeed = EventFeed_1.default;
 Object.defineProperty(exports, "EventFeedSkeleton", { enumerable: true, get: function () { return EventFeed_1.EventFeedSkeleton; } });
+const Lesson_1 = tslib_1.__importDefault(require("./components/Lesson"));
+exports.Lesson = Lesson_1.default;

package/lib/esm/components/CourseDashboard/CourseDashboard.d.ts

@@ -0,0 +1,28 @@
+import { HTMLAttributes } from 'react';
+import { SCCourseType } from '@selfcommunity/types';
+export interface CourseDashboardTemplateProps {
+    /**
+     * Id of the feed object
+     * @default 'course_dashboard'
+     */
+    id?: string;
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: HTMLAttributes<HTMLDivElement>['className'];
+    /**
+     * Course Object
+     * @default null
+     */
+    course?: SCCourseType;
+    /**
+     * Id of the course for filter the feed
+     * @default null
+     */
+    courseId?: number;
+    page?: 'students' | 'comments';
+    onTabChange?: (page: 'students' | 'comments') => void;
+    viewDashboard?: boolean;
+}
+export default function CourseDashboardTemplate(inProps: CourseDashboardTemplateProps): JSX.Element;

package/lib/esm/components/CourseDashboard/CourseDashboard.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PREFIX } from './constants';
+import { Box, styled, useThemeProps } from '@mui/material';
+import { useSCFetchCourse } from '@selfcommunity/react-core';
+import classNames from 'classnames';
+import { CourseDashboard } from '@selfcommunity/react-ui';
+import { CourseInfoViewType } from '@selfcommunity/api-services';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'Root'
+})(() => ({}));
+export default function CourseDashboardTemplate(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { id = 'course_dashboard', className = null, course = null, courseId = null, page, onTabChange, viewDashboard } = props;
+    // HOOKS
+    const { scCourse, error } = useSCFetchCourse({
+        id: courseId,
+        course,
+        params: { view: viewDashboard ? CourseInfoViewType.DASHBOARD : CourseInfoViewType.USER }
+    });
+    if (error) {
+        return null;
+    }
+    if (viewDashboard) {
+        return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, { children: _jsx(CourseDashboard.Teacher, { course: scCourse, page: page, onTabChange: onTabChange }) })));
+    }
+    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, { children: _jsx(CourseDashboard.Student, { course: scCourse }) })));
+}

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

@@ -0,0 +1 @@
+export declare const PREFIX = "SCCourseDashboardTemplate";

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

@@ -0,0 +1 @@
+export const PREFIX = 'SCCourseDashboardTemplate';

package/lib/esm/components/CourseDashboard/index.d.ts

@@ -0,0 +1,3 @@
+import CourseDashboardTemplate, { CourseDashboardTemplateProps } from './CourseDashboard';
+export default CourseDashboardTemplate;
+export { CourseDashboardTemplateProps };

package/lib/esm/components/CourseDashboard/index.js

@@ -0,0 +1,2 @@
+import CourseDashboardTemplate from './CourseDashboard';
+export default CourseDashboardTemplate;

package/lib/esm/components/Courses/Courses.d.ts

@@ -0,0 +1,25 @@
+import { SCCourseType } from '@selfcommunity/types';
+import { HTMLAttributes } from 'react';
+export interface CoursesTemplateProps {
+    /**
+     * Id of the feed object
+     * @default 'course_dashboard'
+     */
+    id?: string;
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: HTMLAttributes<HTMLDivElement>['className'];
+    /**
+     * Course Object
+     * @default null
+     */
+    course?: SCCourseType;
+    /**
+     * Id of the course for filter the feed
+     * @default null
+     */
+    courseId?: number;
+}
+export default function CoursesTemplate(inProps: CoursesTemplateProps): JSX.Element;

package/lib/esm/components/Courses/Courses.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, styled, useThemeProps } from '@mui/material';
+import { useSCFetchCourse, useSCUser } from '@selfcommunity/react-core';
+import { PREFIX } from './constants';
+import classNames from 'classnames';
+import { Courses } from '@selfcommunity/react-ui';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'Root'
+})(() => ({}));
+export default function CoursesTemplate(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { id = 'courses', className = null, course = null, courseId = null } = props;
+    // HOOKS
+    const { scCourse } = useSCFetchCourse({ id: courseId, course });
+    const scUserContext = useSCUser();
+    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, { children: _jsx(Courses, { endpoint: { url: () => '', method: 'GET' } }) })));
+}

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

@@ -0,0 +1 @@
+export declare const PREFIX = "SCCoursesTemplate";

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

@@ -0,0 +1 @@
+export const PREFIX = 'SCCoursesTemplate';

package/lib/esm/components/Courses/index.d.ts

@@ -0,0 +1,3 @@
+import CoursesTemplate, { CoursesTemplateProps } from './Courses';
+export default CoursesTemplate;
+export { CoursesTemplateProps };

package/lib/esm/components/Courses/index.js

@@ -0,0 +1,2 @@
+import CoursesTemplate from './Courses';
+export default CoursesTemplate;

package/lib/esm/components/EditCourse/EditCourse.d.ts

@@ -0,0 +1,27 @@
+import { HTMLAttributes } from 'react';
+import { SCCourseType } from '@selfcommunity/types';
+export interface EditCourseTemplateProps {
+    /**
+     * Id of the feed object
+     * @default 'course_edit'
+     */
+    id?: string;
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: HTMLAttributes<HTMLDivElement>['className'];
+    /**
+     * Course Object
+     * @default null
+     */
+    course?: SCCourseType;
+    /**
+     * Id of the course for filter the feed
+     * @default null
+     */
+    courseId?: number;
+    page: 'lessons' | 'customize' | 'users' | 'options';
+    onTabChange: (page: 'lessons' | 'customize' | 'users' | 'options') => void;
+}
+export default function EditCourseTemplate(inProps: EditCourseTemplateProps): JSX.Element;

package/lib/esm/components/EditCourse/EditCourse.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PREFIX } from './constants';
+import { Box, styled, useThemeProps } from '@mui/material';
+import { useSCFetchCourse } from '@selfcommunity/react-core';
+import classNames from 'classnames';
+import { EditCourse } from '@selfcommunity/react-ui';
+import { CourseInfoViewType } from '@selfcommunity/api-services';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'Root'
+})(() => ({}));
+export default function EditCourseTemplate(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { id = 'course_edit', className = null, course = null, courseId = null, page, onTabChange } = props;
+    // HOOKS
+    const { scCourse } = useSCFetchCourse({ id: courseId, course, params: { view: CourseInfoViewType.EDIT } });
+    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, { children: _jsx(EditCourse, { course: scCourse, page: page, onTabChange: onTabChange }) })));
+}

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

@@ -0,0 +1 @@
+export declare const PREFIX = "SCEditCourseTemplate";

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

@@ -0,0 +1 @@
+export const PREFIX = 'SCEditCourseTemplate';

package/lib/esm/components/EditCourse/index.d.ts

@@ -0,0 +1,3 @@
+import EditCourseTemplate, { EditCourseTemplateProps } from './EditCourse';
+export default EditCourseTemplate;
+export { EditCourseTemplateProps };

package/lib/esm/components/EditCourse/index.js

@@ -0,0 +1,2 @@
+import EditCourseTemplate from './EditCourse';
+export default EditCourseTemplate;

package/lib/esm/components/Event/Event.js

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import { Box } from '@mui/material';
 import { EventHeader } from '@selfcommunity/react-ui';
-import { useSCFetchEvent } from '@selfcommunity/react-core';
+import { useSCFetchEvent, useSCUser } from '@selfcommunity/react-core';
+import { SCEventPrivacyType, SCEventSubscriptionStatusType } from '@selfcommunity/types';
 import EventSkeletonTemplate from './Skeleton';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
@@ -51,7 +52,12 @@ export default function Event(inProps) {
     const { id = 'event', className, event, eventId, widgets, FeedObjectProps, FeedSidebarProps, EventFeedProps = {}, EventHeaderProps = {} } = props;
     // HOOKS
     const { scEvent } = useSCFetchEvent({ id: eventId, event });
-    if (!scEvent) {
+    const scUserContext = useSCUser();
+    if (scUserContext.user === undefined ||
+        !scEvent ||
+        (scUserContext.user &&
+            ((scEvent.privacy === SCEventPrivacyType.PUBLIC && !scEvent.subscription_status) ||
+                scEvent.subscription_status === SCEventSubscriptionStatusType.INVITED))) {
         return _jsx(EventSkeletonTemplate, {});
     }
     return (_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, { children: [_jsx(EventHeader, Object.assign({ event: scEvent }, EventHeaderProps)), _jsx(EventFeed, Object.assign({ className: classes.feed, event: scEvent, widgets: widgets, FeedObjectProps: FeedObjectProps, FeedSidebarProps: FeedSidebarProps }, EventFeedProps))] })));

package/lib/esm/components/EventFeed/EventFeed.js

@@ -88,12 +88,12 @@ export default function EventFeed(inProps) {
     // REF
     const feedRef = useRef();
     // Hooks
-    const { scEvent, setSCEvent } = useSCFetchEvent({ id: eventId, event });
+    const { scEvent } = useSCFetchEvent({ id: eventId, event });
     // HANDLERS
     const handleComposerSuccess = (feedObject) => {
         var _a;
         enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.composerIconButton.composer.success", defaultMessage: "ui.composerIconButton.composer.success" }), {
-            action: (snackbarId) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${feedObject.type.toUpperCase()}_ROUTE_NAME`], ContributionUtils.getRouteData(feedObject)) }, { children: _jsx(FormattedMessage, { id: "ui.composerIconButton.composer.viewContribute", defaultMessage: "ui.composerIconButton.composer.viewContribute" }) }))),
+            action: () => (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${feedObject.type.toUpperCase()}_ROUTE_NAME`], ContributionUtils.getRouteData(feedObject)) }, { children: _jsx(FormattedMessage, { id: "ui.composerIconButton.composer.viewContribute", defaultMessage: "ui.composerIconButton.composer.viewContribute" }) }))),
             variant: 'success',
             autoHideDuration: 7000
         });
@@ -111,16 +111,20 @@ export default function EventFeed(inProps) {
     // WIDGETS
     const _widgets = useMemo(() => widgets.map((w) => {
         if (scEvent) {
-            return Object.assign(Object.assign({}, w), { componentProps: Object.assign(Object.assign({}, w.componentProps), { eventId: scEvent.id }) });
+            return Object.assign(Object.assign({}, w), { componentProps: Object.assign(Object.assign({}, w.componentProps), { event: scEvent }) });
         }
         return w;
     }), [widgets, scEvent]);
-    if (!scEvent || (scEvent && ((eventId !== undefined && scEvent.id !== eventId) || (event && scEvent.id !== event.id)))) {
+    if (scUserContext.user === undefined ||
+        !scEvent ||
+        (scUserContext.user &&
+            ((scEvent.privacy === SCEventPrivacyType.PUBLIC && !scEvent.subscription_status) ||
+                scEvent.subscription_status === SCEventSubscriptionStatusType.INVITED)) ||
+        (scEvent && ((eventId !== undefined && scEvent.id !== eventId) || (event && scEvent.id !== event.id)))) {
         return _jsx(EventFeedSkeleton, {});
     }
     else if (scEvent.privacy === SCEventPrivacyType.PRIVATE &&
         scEvent.subscription_status !== SCEventSubscriptionStatusType.SUBSCRIBED &&
-        scEvent.subscription_status !== SCEventSubscriptionStatusType.INVITED &&
         scEvent.subscription_status !== SCEventSubscriptionStatusType.GOING &&
         scEvent.subscription_status !== SCEventSubscriptionStatusType.NOT_GOING) {
         return (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(EventInfoWidget, { className: classes.root, event: scEvent }) })));
@@ -139,7 +143,6 @@ export default function EventFeed(inProps) {
                     ((!scUserContext.user && scEvent.privacy === SCEventPrivacyType.PUBLIC) ||
                         (scUserContext.user &&
                             (scEvent.subscription_status === SCEventSubscriptionStatusType.SUBSCRIBED ||
-                                scEvent.subscription_status === SCEventSubscriptionStatusType.INVITED ||
                                 scEvent.subscription_status === SCEventSubscriptionStatusType.GOING ||
                                 scEvent.subscription_status === SCEventSubscriptionStatusType.NOT_GOING)))) && (_jsx(InlineComposerWidget, { onSuccess: handleComposerSuccess, defaultValue: { event: scEvent }, label: _jsx(FormattedMessage, { id: "templates.eventFeed.composer.label", defaultMessage: "templates.eventFeed.composer.label" }), feedType: SCFeedTypologyType.EVENT }))] }), CustomAdvProps: { position: SCCustomAdvPosition.POSITION_FEED, groupsId: [scEvent.id] }, enabledCustomAdvPositions: [
             SCCustomAdvPosition.POSITION_FEED_SIDEBAR,

package/lib/esm/components/Lesson/Lesson.d.ts

@@ -0,0 +1,40 @@
+import { SCCourseType } from '@selfcommunity/types';
+import { LessonAppbarProps, LessonDrawerProps } from '@selfcommunity/react-ui';
+export interface LessonProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * The course object
+     */
+    course?: SCCourseType;
+    /**
+     * The course id
+     */
+    courseId?: number;
+    /**
+     * The section id
+     */
+    sectionId: number;
+    /**
+     * The lesson id
+     */
+    lessonId?: number;
+    /**
+     * Props to spread to LessonAppbar Component
+     * @default {}
+     */
+    LessonAppbarProps?: LessonAppbarProps;
+    /**
+     * Props to spread to LessonDrawer Component
+     * @default {}
+     */
+    LessonDrawerProps?: LessonDrawerProps;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+export default function Lesson(inProps: LessonProps): JSX.Element;

package/lib/esm/components/Lesson/Lesson.js

@@ -0,0 +1,143 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import { Box, Icon, IconButton, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { PREFIX } from './constants';
+import { SCCourseJoinStatusType } from '@selfcommunity/types';
+import { useSCFetchCourse, useSCFetchLesson } from '@selfcommunity/react-core';
+import classNames from 'classnames';
+import { getCurrentSectionAndLessonIndex, HiddenPlaceholder, LessonAppbar, LessonDrawer, LessonObject, SCLessonActionsType } from '@selfcommunity/react-ui';
+import { CourseInfoViewType, CourseService } from '@selfcommunity/api-services';
+import { FormattedMessage } from 'react-intl';
+const classes = {
+    root: `${PREFIX}-root`,
+    containerRoot: `${PREFIX}-container-root`,
+    navigation: `${PREFIX}-navigation`,
+    navigationTitle: `${PREFIX}-navigation-title`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => [styles.root]
+})(() => ({}));
+const Container = styled(Box, {
+    name: PREFIX,
+    slot: 'ContainerRoot',
+    overridesResolver: (props, styles) => styles.containerRoot,
+    shouldForwardProp: (prop) => prop !== 'open'
+})(() => ({}));
+export default function Lesson(inProps) {
+    var _a, _b, _c, _d;
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className = null, course, courseId, sectionId, lessonId, LessonAppbarProps = {}, LessonDrawerProps = {} } = props, rest = __rest(props, ["className", "course", "courseId", "sectionId", "lessonId", "LessonAppbarProps", "LessonDrawerProps"]);
+    // HOOKS
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    const [_lessonId, setLessonId] = useState(lessonId);
+    const [_sectionId, setSectionId] = useState(sectionId);
+    const isCourseAdmin = useMemo(() => course && (course.join_status === SCCourseJoinStatusType.CREATOR || course.join_status === SCCourseJoinStatusType.MANAGER), [course]);
+    const { scCourse } = useSCFetchCourse({ id: courseId, params: { view: isCourseAdmin ? CourseInfoViewType.EDIT : CourseInfoViewType.USER } });
+    const { scLesson, setSCLesson } = useSCFetchLesson({ id: _lessonId, courseId, sectionId: _sectionId });
+    // STATE
+    const [activePanel, setActivePanel] = useState(null);
+    const [settings, setSettings] = useState(null);
+    const [updating, setUpdating] = useState(false);
+    const [lessonContent, setLessonContent] = useState('');
+    const [lessonMedias, setLessonMedias] = useState((_a = scLesson === null || scLesson === void 0 ? void 0 : scLesson.medias) !== null && _a !== void 0 ? _a : []);
+    const [editMode, setEditMode] = useState(isCourseAdmin);
+    const isEditMode = editMode;
+    // const isEditMode = useMemo(() => {
+    //   return value.startsWith(scRoutingContext.url(SCRoutes.COURSE_EDIT_ROUTE_NAME, {}));
+    // }, [value, scRoutingContext]);
+    // HANDLERS
+    /**
+     * Handles lesson settings change
+     * @param newSettings
+     */
+    const handleSettingsChange = (newSettings) => {
+        setSettings(newSettings);
+    };
+    const handleOpenDrawer = (panel) => {
+        setActivePanel((prevPanel) => (prevPanel === panel ? null : panel));
+    };
+    const handleCloseDrawer = () => {
+        setActivePanel(null);
+        setEditMode(false);
+    };
+    const handleLessonContentEdit = (html) => {
+        setLessonContent(html);
+    };
+    const handleLessonMediaEdit = (medias) => {
+        setLessonMedias(medias);
+    };
+    const handleChangeLesson = (l, s) => {
+        setLessonId(l.id);
+        setSectionId(s.id);
+        setCurrentSection(s);
+    };
+    /**
+     * Handles Lesson Edit
+     */
+    const handleLessonUpdate = () => {
+        setUpdating(true);
+        const mediaIds = lessonMedias.map((media) => media.id);
+        const data = Object.assign(Object.assign({}, settings), { type: scLesson.type, name: scLesson.name, text: lessonContent, medias: mediaIds });
+        CourseService.updateCourseLesson(scCourse.id, sectionId, scLesson.id, data)
+            .then((data) => {
+            setUpdating(false);
+            setSCLesson(data);
+        })
+            .catch((error) => {
+            setUpdating(false);
+            console.log(error);
+        });
+    };
+    const currentData = useMemo(() => {
+        if (!scCourse || !scLesson)
+            return null;
+        return getCurrentSectionAndLessonIndex(scCourse, scLesson.section_id, scLesson.id);
+    }, [scCourse, scLesson]);
+    const [currentSectionIndex, setCurrentSectionIndex] = useState((currentData === null || currentData === void 0 ? void 0 : currentData.currentSectionIndex) || 0);
+    const [currentLessonIndex, setCurrentLessonIndex] = useState((currentData === null || currentData === void 0 ? void 0 : currentData.currentLessonIndex) || 0);
+    const [currentSection, setCurrentSection] = useState(((_b = scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) === null || _b === void 0 ? void 0 : _b[currentSectionIndex]) || null);
+    const handlePrev = () => {
+        if (currentLessonIndex > 0) {
+            const newLessonIndex = currentLessonIndex - 1;
+            setCurrentLessonIndex(newLessonIndex);
+            handleChangeLesson(currentSection.lessons[newLessonIndex], currentSection);
+        }
+        else if (currentSectionIndex > 0) {
+            const prevSectionIndex = currentSectionIndex - 1;
+            const prevSection = scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections[prevSectionIndex];
+            const newLessonIndex = prevSection.lessons.length - 1;
+            setCurrentSectionIndex(prevSectionIndex);
+            setCurrentLessonIndex(newLessonIndex);
+            handleChangeLesson(prevSection.lessons[newLessonIndex], prevSection);
+        }
+    };
+    const handleNext = () => {
+        if (currentLessonIndex < currentSection.lessons.length - 1) {
+            const newLessonIndex = currentLessonIndex + 1;
+            setCurrentLessonIndex(newLessonIndex);
+            handleChangeLesson(currentSection.lessons[newLessonIndex], currentSection);
+        }
+        else if (currentSectionIndex < (scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections.length) - 1) {
+            const newSectionIndex = currentSectionIndex + 1;
+            setCurrentSectionIndex(newSectionIndex);
+            setCurrentLessonIndex(0);
+            handleChangeLesson(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections[newSectionIndex].lessons[0], scCourse.sections[newSectionIndex]);
+        }
+    };
+    const isPrevDisabled = !(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) || (currentSectionIndex === 0 && currentLessonIndex === 0);
+    const isNextDisabled = !(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) || (currentSectionIndex === (scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections.length) - 1 && currentLessonIndex === ((_c = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _c === void 0 ? void 0 : _c.length) - 1);
+    if (!scLesson || !scCourse) {
+        return _jsx(HiddenPlaceholder, {});
+    }
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(LessonAppbar, Object.assign({ showComments: scLesson.comments_enabled, editMode: isEditMode, activePanel: activePanel, title: scCourse.name, handleOpen: handleOpenDrawer, onSave: handleLessonUpdate, updating: updating }, LessonAppbarProps)), _jsxs(Container, Object.assign({ open: Boolean(activePanel) || isEditMode, className: classes.containerRoot }, { children: [_jsx(Box, Object.assign({ className: classes.navigation }, { children: _jsx(Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: _jsx(FormattedMessage, { id: "templates.lesson.number", defaultMessage: "templates.lesson.number", values: { from: currentLessonIndex + 1, to: (_d = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _d === void 0 ? void 0 : _d.length } }) })) })), _jsxs(Box, Object.assign({ className: classes.navigationTitle }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: scLesson.name })), _jsxs(Box, { children: [_jsx(IconButton, Object.assign({ onClick: handlePrev, disabled: isPrevDisabled }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(IconButton, Object.assign({ onClick: handleNext, disabled: isNextDisabled }, { children: _jsx(Icon, { children: "arrow_next" }) }))] })] })), _jsx(LessonObject, { course: scCourse, lesson: scLesson, editMode: isEditMode, onContentChange: handleLessonContentEdit, onMediaChange: handleLessonMediaEdit })] })), _jsx(LessonDrawer, Object.assign({ course: scCourse, lesson: scLesson, editMode: isMobile ? activePanel === SCLessonActionsType.SETTINGS : isEditMode, activePanel: activePanel, handleClose: handleCloseDrawer, handleChangeLesson: handleChangeLesson, LessonEditFormProps: { lesson: scLesson, onSave: handleLessonUpdate, updating: updating, onSettingsChange: handleSettingsChange } }, LessonDrawerProps))] })));
+}

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

@@ -0,0 +1 @@
+export declare const PREFIX = "SCLessonTemplate";

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

@@ -0,0 +1 @@
+export const PREFIX = 'SCLessonTemplate';

package/lib/esm/components/Lesson/index.d.ts

@@ -0,0 +1,3 @@
+import Lesson, { LessonProps } from './Lesson';
+export default Lesson;
+export { LessonProps };

package/lib/esm/components/Lesson/index.js

@@ -0,0 +1,2 @@
+import Lesson from './Lesson';
+export default Lesson;

package/lib/esm/components/UserFeed/UserFeed.js

@@ -3,7 +3,7 @@ import { useMemo, useRef } from 'react';
 import { styled } from '@mui/material/styles';
 import { Endpoints } from '@selfcommunity/api-services';
 import { useSCFetchUser, useSCUser } from '@selfcommunity/react-core';
-import { Feed, FeedObject, FeedObjectSkeleton, InlineComposerWidget, SCFeedObjectTemplateType, UserFollowedCategoriesWidget, UserFollowedUsersWidget, UserFollowersWidget } from '@selfcommunity/react-ui';
+import { Feed, FeedObject, FeedObjectSkeleton, InlineComposerWidget, SCFeedObjectTemplateType, UserFollowedCategoriesWidget, UserFollowedUsersWidget, UserFollowersWidget, UserLiveStreamWidget } from '@selfcommunity/react-ui';
 import { UserFeedSkeleton } from './index';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
@@ -21,24 +21,31 @@ const Root = styled(Feed, {
 const WIDGETS = [
     {
         type: 'widget',
-        component: UserFollowedCategoriesWidget,
+        component: UserLiveStreamWidget,
         componentProps: {},
         column: 'right',
         position: 0
     },
     {
         type: 'widget',
-        component: UserFollowedUsersWidget,
+        component: UserFollowedCategoriesWidget,
         componentProps: {},
         column: 'right',
         position: 1
     },
     {
         type: 'widget',
-        component: UserFollowersWidget,
+        component: UserFollowedUsersWidget,
         componentProps: {},
         column: 'right',
         position: 2
+    },
+    {
+        type: 'widget',
+        component: UserFollowersWidget,
+        componentProps: {},
+        column: 'right',
+        position: 3
     }
 ];
 /**