@selfcommunity/react-ui 0.11.0-alpha.78 → 0.11.0-alpha.79

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 (24) hide show
  1. package/lib/cjs/components/Feed/Feed.js +1 -1
  2. package/lib/cjs/components/FeedObject/FeedObject.js +11 -3
  3. package/lib/cjs/components/OnBoardingWidget/Steps/Appearance/Appearance.js +1 -9
  4. package/lib/cjs/constants/LazyLoad.js +1 -1
  5. package/lib/cjs/shared/AutoPlayer/index.js +8 -3
  6. package/lib/cjs/shared/MarkRead/MarkRead.js +10 -8
  7. package/lib/cjs/shared/Media/File/DocComponent.js +2 -2
  8. package/lib/cjs/shared/Media/Share/DisplayComponent.d.ts +1 -5
  9. package/lib/cjs/shared/Media/Share/DisplayComponent.js +2 -4
  10. package/lib/esm/components/Feed/Feed.js +1 -1
  11. package/lib/esm/components/FeedObject/FeedObject.js +11 -3
  12. package/lib/esm/components/OnBoardingWidget/Steps/Appearance/Appearance.js +1 -9
  13. package/lib/esm/constants/LazyLoad.js +1 -1
  14. package/lib/esm/shared/AutoPlayer/index.js +8 -3
  15. package/lib/esm/shared/MarkRead/MarkRead.js +11 -9
  16. package/lib/esm/shared/Media/File/DocComponent.js +2 -2
  17. package/lib/esm/shared/Media/Share/DisplayComponent.d.ts +1 -5
  18. package/lib/esm/shared/Media/Share/DisplayComponent.js +2 -4
  19. package/lib/umd/react-ui.js +1 -1
  20. package/package.json +3 -3
  21. package/lib/cjs/shared/Media/File/badgePdf.d.ts +0 -1
  22. package/lib/cjs/shared/Media/File/badgePdf.js +0 -4
  23. package/lib/esm/shared/Media/File/badgePdf.d.ts +0 -1
  24. package/lib/esm/shared/Media/File/badgePdf.js +0 -1
package/lib/cjs/components/Feed/Feed.js CHANGED
@@ -415,7 +415,7 @@ const Feed = (inProps, ref) => {
415
415
  onStateChange(Object.assign(Object.assign({}, savedState), state));
416
416
  };
417
417
  return ((0, jsx_runtime_1.jsx)(VirtualizedScroller_1.VirtualScrollChild, Object.assign({ onHeightChange: onItemHeightChange }, { children: item.type === 'widget' ? ((0, jsx_runtime_1.jsx)(item.component, Object.assign({ id: `${Feed_1.WIDGET_PREFIX_KEY}${item.position}` }, item.componentProps, (item.publishEvents && { publicationChannel: id }), savedState, { onStateChange: onItemStateChange, onHeightChange: onItemHeightChange }))) : ((0, jsx_runtime_1.jsx)(ItemComponent, Object.assign({ id: `item_${itemIdGenerator(item)}` }, itemPropsGenerator(scUserContext.user, item), ItemProps, { sx: { width: '100%' } }, savedState, { onStateChange: onItemStateChange, onHeightChange: onItemHeightChange }))) })));
418
- }, []);
418
+ }, [authUserId]);
419
419
  if (feedDataObject.isLoadingNext && !feedDataLeft.length) {
420
420
  return ((0, jsx_runtime_1.jsx)(Skeleton_2.default, { children: [...Array(3)].map((v, i) => ((0, jsx_runtime_1.jsx)(ItemSkeleton, Object.assign({}, ItemSkeletonProps), i))) }));
421
421
  }
package/lib/cjs/components/FeedObject/FeedObject.js CHANGED
@@ -77,7 +77,9 @@ const classes = {
77
77
  activitiesSection: `${constants_1.PREFIX}-activities-section`,
78
78
  activitiesContent: `${constants_1.PREFIX}-activities-content`,
79
79
  followButton: `${constants_1.PREFIX}-follow-button`,
80
- vote: `${constants_1.PREFIX}-vote`
80
+ vote: `${constants_1.PREFIX}-vote`,
81
+ objElement: `${constants_1.PREFIX}-obj-element`,
82
+ new: `${constants_1.PREFIX}-new`
81
83
  };
82
84
  const Root = (0, material_1.styled)(Widget_1.default, {
83
85
  name: constants_1.PREFIX,
@@ -230,6 +232,12 @@ function FeedObject(inProps) {
230
232
  setExpanded(!expanded);
231
233
  notifyFeedChanges({ summaryExpanded: !expanded });
232
234
  }, [expanded, notifyFeedChanges]);
235
+ /**
236
+ * Handle mark read complete
237
+ */
238
+ const handleMarkReadComplete = (0, react_1.useCallback)(() => {
239
+ notifyFeedChanges({ markRead: false });
240
+ }, [expanded, notifyFeedChanges]);
233
241
  /**
234
242
  * Render header action
235
243
  * if author = authenticated user -> render edit action
@@ -433,7 +441,7 @@ function FeedObject(inProps) {
433
441
  else if (template === feedObject_1.SCFeedObjectTemplateType.PREVIEW ||
434
442
  template === feedObject_1.SCFeedObjectTemplateType.DETAIL ||
435
443
  template === feedObject_1.SCFeedObjectTemplateType.SEARCH) {
436
- objElement = ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: obj ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: (0, classnames_1.default)({ [classes.deleted]: obj && obj.deleted }) }, { children: [obj.categories.length > 0 && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes.category }, { children: [(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [obj.group && ((0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.group, color: "secondary", size: "small", icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "groups" }), component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id)), obj.event && ((0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.event, color: "secondary", size: "small", label: obj.event.name, icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }), component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id))] }), obj.categories.map((c) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.CATEGORY_ROUTE_NAME, c) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "overline" }, { children: c.name })) }), c.id)))] }))), obj.group && !obj.categories.length && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.group }, { children: (0, jsx_runtime_1.jsx)(material_1.Chip, { color: "secondary", size: "small", icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "groups" }), label: obj.group.name, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id) }))), obj.event && !obj.categories.length && ((0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.event, color: "secondary", size: "small", icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }), label: obj.event.name, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id)), (0, jsx_runtime_1.jsx)(material_1.CardHeader, { className: classes.header, avatar: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !obj.author.community_badge }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ "aria-label": "recipe", src: obj.author.avatar, className: classes.avatar }, { children: obj.author.username })) })) })), title: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: obj.author.username })), subheader: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url((0, contribution_1.getContributionRouteName)(obj), (0, contribution_1.getRouteData)(obj)), className: classes.activityAt }, { children: (0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { component: 'span', date: obj.added_at }) })), obj.location && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.location }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add_location_alt" }), (_a = obj.location) === null || _a === void 0 ? void 0 : _a.location] }))] })), (((_b = obj.addressing) !== null && _b !== void 0 ? _b : []).filter((tag) => tag.visible).length > 0 || (obj === null || obj === void 0 ? void 0 : obj.group)) && (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.tag }, { children: obj.addressing.length > 0 ? ((0, jsx_runtime_1.jsx)(Tags_1.default, { tags: obj.addressing, TagChipProps: { disposable: false, clickable: false } })) : obj.group ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: `${intl.formatMessage(messages.visibleToGroup, { group: obj.group.name })}` }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "disabled", fontSize: "small" }, { children: "groups" })) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: `${intl.formatMessage(messages.visibleToAll)}` }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "disabled", fontSize: "small" }, { children: "public" })) }))] })) }))] }), action: renderHeaderAction() }), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ classes: { root: classes.content } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.titleSection }, { children: 'title' in obj && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: template === feedObject_1.SCFeedObjectTemplateType.DETAIL ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", gutterBottom: true, className: classes.title }, { children: obj.title }))) : ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url((0, contribution_1.getContributionRouteName)(obj), (0, contribution_1.getRouteData)(obj)) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", gutterBottom: true, className: classes.title }, { children: obj.title })) }))) })) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.textSection }, { children: getContributionSummary(obj, template) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.mediasSection }, { children: (0, jsx_runtime_1.jsx)(FeedObjectMediaPreview_1.default, Object.assign({ medias: obj.medias }, FeedObjectMediaPreviewProps)) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.pollsSection }, { children: obj['poll'] && ((0, jsx_runtime_1.jsx)(Poll_1.default, Object.assign({ visible: pollVisible ||
444
+ objElement = ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: obj ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: (0, classnames_1.default)({ [classes.deleted]: obj && obj.deleted }, classes.objElement) }, { children: [markRead && (0, jsx_runtime_1.jsx)("span", { className: classes.new }), obj.categories.length > 0 && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes.category }, { children: [(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [obj.group && ((0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.group, color: "secondary", size: "small", icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "groups" }), component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id)), obj.event && ((0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.event, color: "secondary", size: "small", label: obj.event.name, icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }), component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id))] }), obj.categories.map((c) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.CATEGORY_ROUTE_NAME, c) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "overline" }, { children: c.name })) }), c.id)))] }))), obj.group && !obj.categories.length && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.group }, { children: (0, jsx_runtime_1.jsx)(material_1.Chip, { color: "secondary", size: "small", icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "groups" }), label: obj.group.name, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id) }))), obj.event && !obj.categories.length && ((0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.event, color: "secondary", size: "small", icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }), label: obj.event.name, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id)), (0, jsx_runtime_1.jsx)(material_1.CardHeader, { className: classes.header, avatar: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !obj.author.community_badge }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ "aria-label": "recipe", src: obj.author.avatar, className: classes.avatar }, { children: obj.author.username })) })) })), title: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: obj.author.username })), subheader: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url((0, contribution_1.getContributionRouteName)(obj), (0, contribution_1.getRouteData)(obj)), className: classes.activityAt }, { children: (0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { component: 'span', date: obj.added_at }) })), obj.location && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.location }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add_location_alt" }), (_a = obj.location) === null || _a === void 0 ? void 0 : _a.location] }))] })), (((_b = obj.addressing) !== null && _b !== void 0 ? _b : []).filter((tag) => tag.visible).length > 0 || (obj === null || obj === void 0 ? void 0 : obj.group)) && (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.tag }, { children: obj.addressing.length > 0 ? ((0, jsx_runtime_1.jsx)(Tags_1.default, { tags: obj.addressing, TagChipProps: { disposable: false, clickable: false } })) : obj.group ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: `${intl.formatMessage(messages.visibleToGroup, { group: obj.group.name })}` }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "disabled", fontSize: "small" }, { children: "groups" })) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: `${intl.formatMessage(messages.visibleToAll)}` }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "disabled", fontSize: "small" }, { children: "public" })) }))] })) }))] }), action: renderHeaderAction() }), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ classes: { root: classes.content } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.titleSection }, { children: 'title' in obj && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: template === feedObject_1.SCFeedObjectTemplateType.DETAIL ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", gutterBottom: true, className: classes.title }, { children: obj.title }))) : ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url((0, contribution_1.getContributionRouteName)(obj), (0, contribution_1.getRouteData)(obj)) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", gutterBottom: true, className: classes.title }, { children: obj.title })) }))) })) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.textSection }, { children: getContributionSummary(obj, template) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.mediasSection }, { children: (0, jsx_runtime_1.jsx)(FeedObjectMediaPreview_1.default, Object.assign({ medias: obj.medias }, FeedObjectMediaPreviewProps)) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.pollsSection }, { children: obj['poll'] && ((0, jsx_runtime_1.jsx)(Poll_1.default, Object.assign({ visible: pollVisible ||
437
445
  template === feedObject_1.SCFeedObjectTemplateType.DETAIL ||
438
446
  Boolean(obj.type !== types_1.SCContributionType.DISCUSSION && !obj.html && !obj.medias.length), feedObject: obj, pollObject: obj['poll'], onChange: handleChangePoll, onToggleVisibility: handleTogglePollVisibility }, PollObjectProps))) })), !obj.draft && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.infoSection }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [!commentsEnabled && !allShareEnabled ? ((0, jsx_runtime_1.jsx)(Vote_1.default, { feedObjectId: feedObjectId || (feedObject === null || feedObject === void 0 ? void 0 : feedObject.id), feedObjectType: feedObjectType, feedObject: obj, inlineAction: true, onVoteAction: handleVoteSuccess, className: classes.vote })) : (!hideParticipantsPreview && ((0, jsx_runtime_1.jsx)(Contributors_1.default, Object.assign({ feedObject: obj, feedObjectType: obj.type }, ContributorsFeedObjectProps, { cacheStrategy: cacheStrategy })))), !_hideFollowAction && (0, jsx_runtime_1.jsx)(Follow_1.default, Object.assign({ feedObject: obj, feedObjectType: obj.type, handleFollow: handleFollow }, FollowButtonProps))] })) })))] })), (0, jsx_runtime_1.jsxs)(material_1.CardActions, Object.assign({ className: classes.actionsSection }, { children: [(0, jsx_runtime_1.jsx)(Actions_1.default, Object.assign({ feedObjectId: feedObjectId, feedObjectType: feedObjectType, feedObject: obj, hideVoteAction: !allShareEnabled && !commentsEnabled, hideCommentAction: !commentsEnabled || template === feedObject_1.SCFeedObjectTemplateType.DETAIL || (hasEvent && !((_d = (_c = obj === null || obj === void 0 ? void 0 : obj.medias[0].embed) === null || _c === void 0 ? void 0 : _c.metadata) === null || _d === void 0 ? void 0 : _d.active)), hideShareAction: !allShareEnabled, handleExpandActivities: template === feedObject_1.SCFeedObjectTemplateType.PREVIEW ? handleExpandActivities : null, VoteActionProps: { onVoteAction: handleVoteSuccess } }, ActionsProps)), commentsEnabled &&
439
447
  ((template === feedObject_1.SCFeedObjectTemplateType.DETAIL && (!hasEvent || ((_j = (_h = (_g = (_f = obj === null || obj === void 0 ? void 0 : obj.medias) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.embed) === null || _h === void 0 ? void 0 : _h.metadata) === null || _j === void 0 ? void 0 : _j.active))) ||
@@ -453,6 +461,6 @@ function FeedObject(inProps) {
453
461
  /**
454
462
  * Renders root object
455
463
  */
456
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`) }, rest, { children: [obj && markRead && (0, jsx_runtime_1.jsx)(MarkRead_1.default, { endpoint: api_services_1.Endpoints.FeedObjectMarkRead, data: { object: [obj.id] } }), objElement] })), openAlert && (0, jsx_runtime_1.jsx)(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
464
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`) }, rest, { children: [obj && markRead && (0, jsx_runtime_1.jsx)(MarkRead_1.default, { endpoint: api_services_1.Endpoints.FeedObjectMarkRead, data: { object: [obj.id] }, callback: handleMarkReadComplete }), objElement] })), openAlert && (0, jsx_runtime_1.jsx)(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
457
465
  }
458
466
  exports.default = FeedObject;
package/lib/cjs/components/OnBoardingWidget/Steps/Appearance/Appearance.js CHANGED
@@ -106,15 +106,7 @@ function Appearance(inProps) {
106
106
  handleDataUpdate(name, newColor);
107
107
  };
108
108
  const handleDataUpdate = (key, value) => {
109
- const elementInDict = preferences.filter((p) => p.name === key && p.value === value);
110
- if (elementInDict.length) {
111
- const newData = Object.assign({}, data);
112
- delete newData[key];
113
- setData(newData);
114
- }
115
- else {
116
- setData((prevData) => (Object.assign(Object.assign({}, prevData), { [key]: value })));
117
- }
109
+ setData((prevData) => Object.assign({}, prevData, { [key]: value }));
118
110
  };
119
111
  const fetchPreferences = () => {
120
112
  api_services_1.PreferenceService.searchPreferences('', '', `${react_core_1.Preferences.COLORS_COLORBACK},${react_core_1.Preferences.COLORS_COLORPRIMARY},${react_core_1.Preferences.COLORS_COLORSECONDARY},${react_core_1.Preferences.COLORS_NAVBARBACK},${react_core_1.Preferences.COLORS_COLORFONT},${react_core_1.Preferences.COLORS_COLORFONTSECONDARY}, ${react_core_1.Preferences.LOGO_NAVBAR_LOGO},${react_core_1.Preferences.LOGO_NAVBAR_LOGO_MOBILE}, ${react_core_1.Preferences.TEXT_APPLICATION_SLOGAN1},${react_core_1.Preferences.TEXT_APPLICATION_SLOGAN2}`)
package/lib/cjs/constants/LazyLoad.js CHANGED
@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.MAX_PRELOAD_OFFSET_VIEWPORT = exports.MIN_PRELOAD_OFFSET_VIEWPORT = exports.DEFAULT_PRELOAD_OFFSET_VIEWPORT = void 0;
4
4
  /** if you want to preload a component even if it's 100px below the viewport **/
5
5
  exports.DEFAULT_PRELOAD_OFFSET_VIEWPORT = [600, 600];
6
- exports.MIN_PRELOAD_OFFSET_VIEWPORT = [200, 200];
6
+ exports.MIN_PRELOAD_OFFSET_VIEWPORT = [-100, -100];
7
7
  exports.MAX_PRELOAD_OFFSET_VIEWPORT = [1600, 1600];
package/lib/cjs/shared/AutoPlayer/index.js CHANGED
@@ -20,16 +20,17 @@ function AutoPlayer(props) {
20
20
  // STATE
21
21
  const [shouldPlay, setShouldPlay] = (0, react_1.useState)(false);
22
22
  const [played, setPlayed] = (0, react_1.useState)(0);
23
+ const [startPlay, setStartPlay] = (0, react_1.useState)(0);
23
24
  const { preferences } = (0, react_core_1.useSCPreferences)();
24
25
  const enableAutoplay = react_core_1.SCPreferences.CONFIGURATIONS_VIDEO_AUTOPLAY_ENABLED in preferences && preferences[react_core_1.SCPreferences.CONFIGURATIONS_VIDEO_AUTOPLAY_ENABLED].value;
25
26
  const videoPlayTrackingDelaySeconds = react_core_1.SCPreferences.CONFIGURATIONS_VIDEO_PLAY_TRACKING_DELAY_SECONDS in preferences
26
27
  ? preferences[react_core_1.SCPreferences.CONFIGURATIONS_VIDEO_PLAY_TRACKING_DELAY_SECONDS].value
27
28
  : Media_1.DEFAULT_VIDEO_PLAY_TRACKING_DELAY_SECONDS;
28
29
  (0, react_1.useEffect)(() => {
29
- if (played >= videoPlayTrackingDelaySeconds && played <= videoPlayTrackingDelaySeconds + 1) {
30
+ if (played >= startPlay + videoPlayTrackingDelaySeconds && played <= startPlay + videoPlayTrackingDelaySeconds + 1) {
30
31
  onVideoWatch === null || onVideoWatch === void 0 ? void 0 : onVideoWatch();
31
32
  }
32
- }, [played]);
33
+ }, [played, startPlay]);
33
34
  /**
34
35
  * Handle viewport enter
35
36
  */
@@ -48,7 +49,11 @@ function AutoPlayer(props) {
48
49
  * Renders root object
49
50
  */
50
51
  return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ scrollableAncestor: window, onEnter: handleEnterViewport, onLeave: handleExitViewport }, { children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_player_1.default, Object.assign({ loop: loop, controls: controls, stopOnUnmount: stopOnUnmount, pip: pip, playing: shouldPlay, muted: muted, onProgress: (progress) => {
51
- setPlayed(progress.playedSeconds);
52
+ const playedSeconds = progress.playedSeconds;
53
+ if (played === 0) {
54
+ setStartPlay(playedSeconds);
55
+ }
56
+ setPlayed(playedSeconds);
52
57
  }, playsinline: playsinline, config: {
53
58
  youtube: {
54
59
  embedOptions: {
package/lib/cjs/shared/MarkRead/MarkRead.js CHANGED
@@ -6,9 +6,12 @@ const react_1 = require("react");
6
6
  const api_services_1 = require("@selfcommunity/api-services");
7
7
  const react_lazyload_1 = tslib_1.__importDefault(require("react-lazyload"));
8
8
  const LazyLoad_1 = require("../../constants/LazyLoad");
9
+ const react_intersection_observer_1 = require("react-intersection-observer");
9
10
  const MarkRead = (props) => {
10
11
  // PROPS
11
12
  const { endpoint, params = {}, callback, data = null } = props;
13
+ const { ref, inView } = (0, react_intersection_observer_1.useInView)({ threshold: 0.1 });
14
+ const hasEntered = (0, react_1.useRef)(false);
12
15
  /**
13
16
  * Perform request
14
17
  */
@@ -25,15 +28,14 @@ const MarkRead = (props) => {
25
28
  .catch(() => null);
26
29
  };
27
30
  (0, react_1.useEffect)(() => {
28
- let _t;
29
- if (endpoint) {
30
- _t = setTimeout(performRequest);
31
- return () => {
32
- _t && clearTimeout(_t);
33
- };
31
+ if (inView) {
32
+ hasEntered.current = true;
34
33
  }
35
- }, []);
36
- return null;
34
+ else if (hasEntered.current && endpoint && !inView) {
35
+ performRequest();
36
+ }
37
+ }, [inView]);
38
+ return (0, jsx_runtime_1.jsx)("div", { ref: ref });
37
39
  };
38
40
  exports.default = (props) => {
39
41
  return ((0, jsx_runtime_1.jsx)(react_lazyload_1.default, Object.assign({ once: true, offset: LazyLoad_1.MIN_PRELOAD_OFFSET_VIEWPORT }, { children: (0, jsx_runtime_1.jsx)(MarkRead, Object.assign({}, props)) })));
package/lib/cjs/shared/Media/File/DocComponent.js CHANGED
@@ -5,11 +5,11 @@ const material_1 = require("@mui/material");
5
5
  const constants_1 = require("./constants");
6
6
  const react_core_1 = require("@selfcommunity/react-core");
7
7
  const Media_1 = require("../../../constants/Media");
8
- const badgePdf_1 = require("./badgePdf");
9
8
  const classes = {
10
9
  docRoot: `${constants_1.PREFIX}-doc-root`,
11
10
  imageWrapper: `${constants_1.PREFIX}-image-wrapper`,
12
11
  badgePdf: `${constants_1.PREFIX}-badge-pdf`,
12
+ pdf: `${constants_1.PREFIX}-pdf`,
13
13
  textWrapper: `${constants_1.PREFIX}-text-wrapper`,
14
14
  title: `${constants_1.PREFIX}-title`,
15
15
  subtitle: `${constants_1.PREFIX}-subtitle`,
@@ -31,6 +31,6 @@ function formatBytes(bytes, decimals = 2) {
31
31
  }
32
32
  function DocComponent(props) {
33
33
  const { doc, index, onDelete, openPreviewImage, handleDownload, onMediaClick } = props;
34
- return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.docRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ onClick: () => openPreviewImage === null || openPreviewImage === void 0 ? void 0 : openPreviewImage(index, Media_1.MEDIA_TYPE_DOCUMENT), sx: { cursor: openPreviewImage ? 'pointer' : undefined }, className: classes.imageWrapper }, { children: [(0, jsx_runtime_1.jsx)("img", { alt: "pdf preview", src: doc.image_thumbnail ? doc.image_thumbnail.url : doc.image, width: "100%", height: "100%" }), (0, jsx_runtime_1.jsx)("img", { alt: "pdf badge", src: badgePdf_1.BADGE_PDF, className: classes.badgePdf })] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.textWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title }, { children: doc.title })), doc.size && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.subtitle }, { children: formatBytes(doc.size) }))] })), (handleDownload || onDelete) && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionWrapper }, { children: [onDelete && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.action, onClick: () => onDelete(doc.id) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }) }))), handleDownload && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.action, component: react_core_1.Link, to: doc.url, target: "_blank", onClick: () => onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(doc) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.action, onClick: () => handleDownload(index) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "download" }) }))] }))] })))] })));
34
+ return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.docRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ onClick: () => openPreviewImage === null || openPreviewImage === void 0 ? void 0 : openPreviewImage(index, Media_1.MEDIA_TYPE_DOCUMENT), sx: { cursor: openPreviewImage ? 'pointer' : undefined }, className: classes.imageWrapper }, { children: [(0, jsx_runtime_1.jsx)("img", { alt: "pdf preview", src: doc.image_thumbnail ? doc.image_thumbnail.url : doc.image, width: "100%", height: "100%" }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.badgePdf }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.pdf }, { children: "PDF" })) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.textWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title }, { children: doc.title })), doc.size && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.subtitle }, { children: formatBytes(doc.size) }))] })), (handleDownload || onDelete) && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionWrapper }, { children: [onDelete && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.action, onClick: () => onDelete(doc.id) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }) }))), handleDownload && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.action, component: react_core_1.Link, to: doc.url, target: "_blank", onClick: () => onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(doc) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.action, onClick: () => handleDownload(index) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "download" }) }))] }))] })))] })));
35
35
  }
36
36
  exports.default = DocComponent;
package/lib/cjs/shared/Media/Share/DisplayComponent.d.ts CHANGED
@@ -6,10 +6,6 @@ export interface DisplayComponentProps extends BoxProps {
6
6
  * Medias
7
7
  */
8
8
  medias: SCMediaType[];
9
- /**
10
- * Handles on media click
11
- */
12
- onMediaClick?: (any: any) => void;
13
9
  }
14
- declare const _default: ({ className, medias, onMediaClick, ...rest }: DisplayComponentProps) => ReactElement;
10
+ declare const _default: ({ className, medias, ...rest }: DisplayComponentProps) => ReactElement;
15
11
  export default _default;
package/lib/cjs/shared/Media/Share/DisplayComponent.js CHANGED
@@ -23,13 +23,11 @@ const Root = (0, material_1.styled)(material_1.Box, {
23
23
  slot: 'DisplayRoot'
24
24
  })(() => ({}));
25
25
  exports.default = (_a) => {
26
- var { className, medias = [], onMediaClick = null } = _a, rest = tslib_1.__rest(_a, ["className", "medias", "onMediaClick"]);
26
+ var { className, medias = [] } = _a, rest = tslib_1.__rest(_a, ["className", "medias"]);
27
27
  // MEMO
28
28
  const _medias = (0, react_1.useMemo)(() => medias.filter(filter_1.default), [medias]);
29
29
  if (_medias.length === 0) {
30
30
  return null;
31
31
  }
32
- return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.displayRoot) }, rest, { children: _medias.map((media, i) => ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.sharePreview, onClick: () => {
33
- onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(media);
34
- } }, { children: media.type === Media_1.MEDIA_TYPE_EVENT || (media.embed && media.embed.embed_type === Media_1.MEDIA_EMBED_SC_SHARED_EVENT) ? ((0, jsx_runtime_1.jsx)(Event_1.default, { event: media.embed.metadata, template: event_1.SCEventTemplateType.DETAIL, variant: "outlined", square: true, hideEventParticipants: true, hideEventPlanner: true, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) })) : ((0, jsx_runtime_1.jsx)(FeedObject_1.default, { feedObjectId: media.embed.metadata.id, feedObjectType: media.embed.metadata.type, variant: "outlined", template: feedObject_1.SCFeedObjectTemplateType.SHARE, cacheStrategy: utils_1.CacheStrategies.CACHE_FIRST })) }), i))) })));
32
+ return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.displayRoot) }, rest, { children: _medias.map((media, i) => ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.sharePreview }, { children: media.type === Media_1.MEDIA_TYPE_EVENT || (media.embed && media.embed.embed_type === Media_1.MEDIA_EMBED_SC_SHARED_EVENT) ? ((0, jsx_runtime_1.jsx)(Event_1.default, { event: media.embed.metadata, template: event_1.SCEventTemplateType.DETAIL, variant: "outlined", square: true, hideEventParticipants: true, hideEventPlanner: true, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) })) : ((0, jsx_runtime_1.jsx)(FeedObject_1.default, { feedObjectId: media.embed.metadata.id, feedObjectType: media.embed.metadata.type, variant: "outlined", template: feedObject_1.SCFeedObjectTemplateType.SHARE, cacheStrategy: utils_1.CacheStrategies.CACHE_FIRST })) }), i))) })));
35
33
  };
package/lib/esm/components/Feed/Feed.js CHANGED
@@ -412,7 +412,7 @@ const Feed = (inProps, ref) => {
412
412
  onStateChange(Object.assign(Object.assign({}, savedState), state));
413
413
  };
414
414
  return (_jsx(VirtualScrollChild, Object.assign({ onHeightChange: onItemHeightChange }, { children: item.type === 'widget' ? (_jsx(item.component, Object.assign({ id: `${WIDGET_PREFIX_KEY}${item.position}` }, item.componentProps, (item.publishEvents && { publicationChannel: id }), savedState, { onStateChange: onItemStateChange, onHeightChange: onItemHeightChange }))) : (_jsx(ItemComponent, Object.assign({ id: `item_${itemIdGenerator(item)}` }, itemPropsGenerator(scUserContext.user, item), ItemProps, { sx: { width: '100%' } }, savedState, { onStateChange: onItemStateChange, onHeightChange: onItemHeightChange }))) })));
415
- }, []);
415
+ }, [authUserId]);
416
416
  if (feedDataObject.isLoadingNext && !feedDataLeft.length) {
417
417
  return (_jsx(FeedSkeleton, { children: [...Array(3)].map((v, i) => (_jsx(ItemSkeleton, Object.assign({}, ItemSkeletonProps), i))) }));
418
418
  }
package/lib/esm/components/FeedObject/FeedObject.js CHANGED
@@ -75,7 +75,9 @@ const classes = {
75
75
  activitiesSection: `${PREFIX}-activities-section`,
76
76
  activitiesContent: `${PREFIX}-activities-content`,
77
77
  followButton: `${PREFIX}-follow-button`,
78
- vote: `${PREFIX}-vote`
78
+ vote: `${PREFIX}-vote`,
79
+ objElement: `${PREFIX}-obj-element`,
80
+ new: `${PREFIX}-new`
79
81
  };
80
82
  const Root = styled(Widget, {
81
83
  name: PREFIX,
@@ -228,6 +230,12 @@ export default function FeedObject(inProps) {
228
230
  setExpanded(!expanded);
229
231
  notifyFeedChanges({ summaryExpanded: !expanded });
230
232
  }, [expanded, notifyFeedChanges]);
233
+ /**
234
+ * Handle mark read complete
235
+ */
236
+ const handleMarkReadComplete = useCallback(() => {
237
+ notifyFeedChanges({ markRead: false });
238
+ }, [expanded, notifyFeedChanges]);
231
239
  /**
232
240
  * Render header action
233
241
  * if author = authenticated user -> render edit action
@@ -431,7 +439,7 @@ export default function FeedObject(inProps) {
431
439
  else if (template === SCFeedObjectTemplateType.PREVIEW ||
432
440
  template === SCFeedObjectTemplateType.DETAIL ||
433
441
  template === SCFeedObjectTemplateType.SEARCH) {
434
- objElement = (_jsx(React.Fragment, { children: obj ? (_jsxs(Box, Object.assign({ className: classNames({ [classes.deleted]: obj && obj.deleted }) }, { children: [obj.categories.length > 0 && (_jsxs("div", Object.assign({ className: classes.category }, { children: [_jsxs(_Fragment, { children: [obj.group && (_jsx(Chip, { className: classes.group, color: "secondary", size: "small", icon: _jsx(Icon, { children: "groups" }), component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id)), obj.event && (_jsx(Chip, { className: classes.event, color: "secondary", size: "small", label: obj.event.name, icon: _jsx(Icon, { children: "CalendarIcon" }), component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id))] }), obj.categories.map((c) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, c) }, { children: _jsx(Typography, Object.assign({ variant: "overline" }, { children: c.name })) }), c.id)))] }))), obj.group && !obj.categories.length && (_jsx("div", Object.assign({ className: classes.group }, { children: _jsx(Chip, { color: "secondary", size: "small", icon: _jsx(Icon, { children: "groups" }), label: obj.group.name, component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id) }))), obj.event && !obj.categories.length && (_jsx(Chip, { className: classes.event, color: "secondary", size: "small", icon: _jsx(Icon, { children: "CalendarIcon" }), label: obj.event.name, component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id)), _jsx(CardHeader, { className: classes.header, avatar: _jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !obj.author.community_badge }, { children: _jsx(Avatar, Object.assign({ "aria-label": "recipe", src: obj.author.avatar, className: classes.avatar }, { children: obj.author.username })) })) })), title: _jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: obj.author.username })), subheader: _jsxs(_Fragment, { children: [_jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), className: classes.activityAt }, { children: _jsx(DateTimeAgo, { component: 'span', date: obj.added_at }) })), obj.location && (_jsxs(_Fragment, { children: [_jsx(Bullet, {}), _jsxs(Box, Object.assign({ className: classes.location }, { children: [_jsx(Icon, { children: "add_location_alt" }), (_a = obj.location) === null || _a === void 0 ? void 0 : _a.location] }))] })), (((_b = obj.addressing) !== null && _b !== void 0 ? _b : []).filter((tag) => tag.visible).length > 0 || (obj === null || obj === void 0 ? void 0 : obj.group)) && _jsx(Bullet, {}), _jsx(Box, Object.assign({ className: classes.tag }, { children: obj.addressing.length > 0 ? (_jsx(Tags, { tags: obj.addressing, TagChipProps: { disposable: false, clickable: false } })) : obj.group ? (_jsx(Tooltip, Object.assign({ title: `${intl.formatMessage(messages.visibleToGroup, { group: obj.group.name })}` }, { children: _jsx(Icon, Object.assign({ color: "disabled", fontSize: "small" }, { children: "groups" })) }))) : (_jsxs(_Fragment, { children: [_jsx(Bullet, {}), _jsx(Tooltip, Object.assign({ title: `${intl.formatMessage(messages.visibleToAll)}` }, { children: _jsx(Icon, Object.assign({ color: "disabled", fontSize: "small" }, { children: "public" })) }))] })) }))] }), action: renderHeaderAction() }), _jsxs(CardContent, Object.assign({ classes: { root: classes.content } }, { children: [_jsx(Box, Object.assign({ className: classes.titleSection }, { children: 'title' in obj && (_jsx(_Fragment, { children: template === SCFeedObjectTemplateType.DETAIL ? (_jsx(Typography, Object.assign({ variant: "body1", gutterBottom: true, className: classes.title }, { children: obj.title }))) : (_jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)) }, { children: _jsx(Typography, Object.assign({ variant: "body1", gutterBottom: true, className: classes.title }, { children: obj.title })) }))) })) })), _jsx(Box, Object.assign({ className: classes.textSection }, { children: getContributionSummary(obj, template) })), _jsx(Box, Object.assign({ className: classes.mediasSection }, { children: _jsx(FeedObjectMediaPreview, Object.assign({ medias: obj.medias }, FeedObjectMediaPreviewProps)) })), _jsx(Box, Object.assign({ className: classes.pollsSection }, { children: obj['poll'] && (_jsx(PollObject, Object.assign({ visible: pollVisible ||
442
+ objElement = (_jsx(React.Fragment, { children: obj ? (_jsxs(Box, Object.assign({ className: classNames({ [classes.deleted]: obj && obj.deleted }, classes.objElement) }, { children: [markRead && _jsx("span", { className: classes.new }), obj.categories.length > 0 && (_jsxs("div", Object.assign({ className: classes.category }, { children: [_jsxs(_Fragment, { children: [obj.group && (_jsx(Chip, { className: classes.group, color: "secondary", size: "small", icon: _jsx(Icon, { children: "groups" }), component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id)), obj.event && (_jsx(Chip, { className: classes.event, color: "secondary", size: "small", label: obj.event.name, icon: _jsx(Icon, { children: "CalendarIcon" }), component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id))] }), obj.categories.map((c) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, c) }, { children: _jsx(Typography, Object.assign({ variant: "overline" }, { children: c.name })) }), c.id)))] }))), obj.group && !obj.categories.length && (_jsx("div", Object.assign({ className: classes.group }, { children: _jsx(Chip, { color: "secondary", size: "small", icon: _jsx(Icon, { children: "groups" }), label: obj.group.name, component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id) }))), obj.event && !obj.categories.length && (_jsx(Chip, { className: classes.event, color: "secondary", size: "small", icon: _jsx(Icon, { children: "CalendarIcon" }), label: obj.event.name, component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id)), _jsx(CardHeader, { className: classes.header, avatar: _jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !obj.author.community_badge }, { children: _jsx(Avatar, Object.assign({ "aria-label": "recipe", src: obj.author.avatar, className: classes.avatar }, { children: obj.author.username })) })) })), title: _jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: obj.author.username })), subheader: _jsxs(_Fragment, { children: [_jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), className: classes.activityAt }, { children: _jsx(DateTimeAgo, { component: 'span', date: obj.added_at }) })), obj.location && (_jsxs(_Fragment, { children: [_jsx(Bullet, {}), _jsxs(Box, Object.assign({ className: classes.location }, { children: [_jsx(Icon, { children: "add_location_alt" }), (_a = obj.location) === null || _a === void 0 ? void 0 : _a.location] }))] })), (((_b = obj.addressing) !== null && _b !== void 0 ? _b : []).filter((tag) => tag.visible).length > 0 || (obj === null || obj === void 0 ? void 0 : obj.group)) && _jsx(Bullet, {}), _jsx(Box, Object.assign({ className: classes.tag }, { children: obj.addressing.length > 0 ? (_jsx(Tags, { tags: obj.addressing, TagChipProps: { disposable: false, clickable: false } })) : obj.group ? (_jsx(Tooltip, Object.assign({ title: `${intl.formatMessage(messages.visibleToGroup, { group: obj.group.name })}` }, { children: _jsx(Icon, Object.assign({ color: "disabled", fontSize: "small" }, { children: "groups" })) }))) : (_jsxs(_Fragment, { children: [_jsx(Bullet, {}), _jsx(Tooltip, Object.assign({ title: `${intl.formatMessage(messages.visibleToAll)}` }, { children: _jsx(Icon, Object.assign({ color: "disabled", fontSize: "small" }, { children: "public" })) }))] })) }))] }), action: renderHeaderAction() }), _jsxs(CardContent, Object.assign({ classes: { root: classes.content } }, { children: [_jsx(Box, Object.assign({ className: classes.titleSection }, { children: 'title' in obj && (_jsx(_Fragment, { children: template === SCFeedObjectTemplateType.DETAIL ? (_jsx(Typography, Object.assign({ variant: "body1", gutterBottom: true, className: classes.title }, { children: obj.title }))) : (_jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)) }, { children: _jsx(Typography, Object.assign({ variant: "body1", gutterBottom: true, className: classes.title }, { children: obj.title })) }))) })) })), _jsx(Box, Object.assign({ className: classes.textSection }, { children: getContributionSummary(obj, template) })), _jsx(Box, Object.assign({ className: classes.mediasSection }, { children: _jsx(FeedObjectMediaPreview, Object.assign({ medias: obj.medias }, FeedObjectMediaPreviewProps)) })), _jsx(Box, Object.assign({ className: classes.pollsSection }, { children: obj['poll'] && (_jsx(PollObject, Object.assign({ visible: pollVisible ||
435
443
  template === SCFeedObjectTemplateType.DETAIL ||
436
444
  Boolean(obj.type !== SCContributionType.DISCUSSION && !obj.html && !obj.medias.length), feedObject: obj, pollObject: obj['poll'], onChange: handleChangePoll, onToggleVisibility: handleTogglePollVisibility }, PollObjectProps))) })), !obj.draft && (_jsx(Box, Object.assign({ className: classes.infoSection }, { children: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [!commentsEnabled && !allShareEnabled ? (_jsx(Vote, { feedObjectId: feedObjectId || (feedObject === null || feedObject === void 0 ? void 0 : feedObject.id), feedObjectType: feedObjectType, feedObject: obj, inlineAction: true, onVoteAction: handleVoteSuccess, className: classes.vote })) : (!hideParticipantsPreview && (_jsx(ContributorsFeedObject, Object.assign({ feedObject: obj, feedObjectType: obj.type }, ContributorsFeedObjectProps, { cacheStrategy: cacheStrategy })))), !_hideFollowAction && _jsx(Follow, Object.assign({ feedObject: obj, feedObjectType: obj.type, handleFollow: handleFollow }, FollowButtonProps))] })) })))] })), _jsxs(CardActions, Object.assign({ className: classes.actionsSection }, { children: [_jsx(Actions, Object.assign({ feedObjectId: feedObjectId, feedObjectType: feedObjectType, feedObject: obj, hideVoteAction: !allShareEnabled && !commentsEnabled, hideCommentAction: !commentsEnabled || template === SCFeedObjectTemplateType.DETAIL || (hasEvent && !((_d = (_c = obj === null || obj === void 0 ? void 0 : obj.medias[0].embed) === null || _c === void 0 ? void 0 : _c.metadata) === null || _d === void 0 ? void 0 : _d.active)), hideShareAction: !allShareEnabled, handleExpandActivities: template === SCFeedObjectTemplateType.PREVIEW ? handleExpandActivities : null, VoteActionProps: { onVoteAction: handleVoteSuccess } }, ActionsProps)), commentsEnabled &&
437
445
  ((template === SCFeedObjectTemplateType.DETAIL && (!hasEvent || ((_j = (_h = (_g = (_f = obj === null || obj === void 0 ? void 0 : obj.medias) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.embed) === null || _h === void 0 ? void 0 : _h.metadata) === null || _j === void 0 ? void 0 : _j.active))) ||
@@ -451,5 +459,5 @@ export default function FeedObject(inProps) {
451
459
  /**
452
460
  * Renders root object
453
461
  */
454
- return (_jsxs(_Fragment, { children: [_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`) }, rest, { children: [obj && markRead && _jsx(MarkRead, { endpoint: Endpoints.FeedObjectMarkRead, data: { object: [obj.id] } }), objElement] })), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
462
+ return (_jsxs(_Fragment, { children: [_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`) }, rest, { children: [obj && markRead && _jsx(MarkRead, { endpoint: Endpoints.FeedObjectMarkRead, data: { object: [obj.id] }, callback: handleMarkReadComplete }), objElement] })), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
455
463
  }
package/lib/esm/components/OnBoardingWidget/Steps/Appearance/Appearance.js CHANGED
@@ -104,15 +104,7 @@ export default function Appearance(inProps) {
104
104
  handleDataUpdate(name, newColor);
105
105
  };
106
106
  const handleDataUpdate = (key, value) => {
107
- const elementInDict = preferences.filter((p) => p.name === key && p.value === value);
108
- if (elementInDict.length) {
109
- const newData = Object.assign({}, data);
110
- delete newData[key];
111
- setData(newData);
112
- }
113
- else {
114
- setData((prevData) => (Object.assign(Object.assign({}, prevData), { [key]: value })));
115
- }
107
+ setData((prevData) => Object.assign({}, prevData, { [key]: value }));
116
108
  };
117
109
  const fetchPreferences = () => {
118
110
  PreferenceService.searchPreferences('', '', `${Preferences.COLORS_COLORBACK},${Preferences.COLORS_COLORPRIMARY},${Preferences.COLORS_COLORSECONDARY},${Preferences.COLORS_NAVBARBACK},${Preferences.COLORS_COLORFONT},${Preferences.COLORS_COLORFONTSECONDARY}, ${Preferences.LOGO_NAVBAR_LOGO},${Preferences.LOGO_NAVBAR_LOGO_MOBILE}, ${Preferences.TEXT_APPLICATION_SLOGAN1},${Preferences.TEXT_APPLICATION_SLOGAN2}`)
package/lib/esm/constants/LazyLoad.js CHANGED
@@ -1,4 +1,4 @@
1
1
  /** if you want to preload a component even if it's 100px below the viewport **/
2
2
  export const DEFAULT_PRELOAD_OFFSET_VIEWPORT = [600, 600];
3
- export const MIN_PRELOAD_OFFSET_VIEWPORT = [200, 200];
3
+ export const MIN_PRELOAD_OFFSET_VIEWPORT = [-100, -100];
4
4
  export const MAX_PRELOAD_OFFSET_VIEWPORT = [1600, 1600];
package/lib/esm/shared/AutoPlayer/index.js CHANGED
@@ -18,16 +18,17 @@ export default function AutoPlayer(props) {
18
18
  // STATE
19
19
  const [shouldPlay, setShouldPlay] = useState(false);
20
20
  const [played, setPlayed] = useState(0);
21
+ const [startPlay, setStartPlay] = useState(0);
21
22
  const { preferences } = useSCPreferences();
22
23
  const enableAutoplay = SCPreferences.CONFIGURATIONS_VIDEO_AUTOPLAY_ENABLED in preferences && preferences[SCPreferences.CONFIGURATIONS_VIDEO_AUTOPLAY_ENABLED].value;
23
24
  const videoPlayTrackingDelaySeconds = SCPreferences.CONFIGURATIONS_VIDEO_PLAY_TRACKING_DELAY_SECONDS in preferences
24
25
  ? preferences[SCPreferences.CONFIGURATIONS_VIDEO_PLAY_TRACKING_DELAY_SECONDS].value
25
26
  : DEFAULT_VIDEO_PLAY_TRACKING_DELAY_SECONDS;
26
27
  useEffect(() => {
27
- if (played >= videoPlayTrackingDelaySeconds && played <= videoPlayTrackingDelaySeconds + 1) {
28
+ if (played >= startPlay + videoPlayTrackingDelaySeconds && played <= startPlay + videoPlayTrackingDelaySeconds + 1) {
28
29
  onVideoWatch === null || onVideoWatch === void 0 ? void 0 : onVideoWatch();
29
30
  }
30
- }, [played]);
31
+ }, [played, startPlay]);
31
32
  /**
32
33
  * Handle viewport enter
33
34
  */
@@ -46,7 +47,11 @@ export default function AutoPlayer(props) {
46
47
  * Renders root object
47
48
  */
48
49
  return (_jsx(Root, Object.assign({ scrollableAncestor: window, onEnter: handleEnterViewport, onLeave: handleExitViewport }, { children: _jsx("div", { children: _jsx(ReactPlayer, Object.assign({ loop: loop, controls: controls, stopOnUnmount: stopOnUnmount, pip: pip, playing: shouldPlay, muted: muted, onProgress: (progress) => {
49
- setPlayed(progress.playedSeconds);
50
+ const playedSeconds = progress.playedSeconds;
51
+ if (played === 0) {
52
+ setStartPlay(playedSeconds);
53
+ }
54
+ setPlayed(playedSeconds);
50
55
  }, playsinline: playsinline, config: {
51
56
  youtube: {
52
57
  embedOptions: {
package/lib/esm/shared/MarkRead/MarkRead.js CHANGED
@@ -1,11 +1,14 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useEffect } from 'react';
2
+ import { useEffect, useRef } from 'react';
3
3
  import { http } from '@selfcommunity/api-services';
4
4
  import LazyLoad from 'react-lazyload';
5
5
  import { MIN_PRELOAD_OFFSET_VIEWPORT } from '../../constants/LazyLoad';
6
+ import { useInView } from 'react-intersection-observer';
6
7
  const MarkRead = (props) => {
7
8
  // PROPS
8
9
  const { endpoint, params = {}, callback, data = null } = props;
10
+ const { ref, inView } = useInView({ threshold: 0.1 });
11
+ const hasEntered = useRef(false);
9
12
  /**
10
13
  * Perform request
11
14
  */
@@ -22,15 +25,14 @@ const MarkRead = (props) => {
22
25
  .catch(() => null);
23
26
  };
24
27
  useEffect(() => {
25
- let _t;
26
- if (endpoint) {
27
- _t = setTimeout(performRequest);
28
- return () => {
29
- _t && clearTimeout(_t);
30
- };
28
+ if (inView) {
29
+ hasEntered.current = true;
31
30
  }
32
- }, []);
33
- return null;
31
+ else if (hasEntered.current && endpoint && !inView) {
32
+ performRequest();
33
+ }
34
+ }, [inView]);
35
+ return _jsx("div", { ref: ref });
34
36
  };
35
37
  export default (props) => {
36
38
  return (_jsx(LazyLoad, Object.assign({ once: true, offset: MIN_PRELOAD_OFFSET_VIEWPORT }, { children: _jsx(MarkRead, Object.assign({}, props)) })));
package/lib/esm/shared/Media/File/DocComponent.js CHANGED
@@ -3,11 +3,11 @@ import { Box, Icon, IconButton, Stack, styled, Typography } from '@mui/material'
3
3
  import { PREFIX } from './constants';
4
4
  import { Link } from '@selfcommunity/react-core';
5
5
  import { MEDIA_TYPE_DOCUMENT } from '../../../constants/Media';
6
- import { BADGE_PDF } from './badgePdf';
7
6
  const classes = {
8
7
  docRoot: `${PREFIX}-doc-root`,
9
8
  imageWrapper: `${PREFIX}-image-wrapper`,
10
9
  badgePdf: `${PREFIX}-badge-pdf`,
10
+ pdf: `${PREFIX}-pdf`,
11
11
  textWrapper: `${PREFIX}-text-wrapper`,
12
12
  title: `${PREFIX}-title`,
13
13
  subtitle: `${PREFIX}-subtitle`,
@@ -29,5 +29,5 @@ function formatBytes(bytes, decimals = 2) {
29
29
  }
30
30
  export default function DocComponent(props) {
31
31
  const { doc, index, onDelete, openPreviewImage, handleDownload, onMediaClick } = props;
32
- return (_jsxs(Root, Object.assign({ className: classes.docRoot }, { children: [_jsxs(Box, Object.assign({ onClick: () => openPreviewImage === null || openPreviewImage === void 0 ? void 0 : openPreviewImage(index, MEDIA_TYPE_DOCUMENT), sx: { cursor: openPreviewImage ? 'pointer' : undefined }, className: classes.imageWrapper }, { children: [_jsx("img", { alt: "pdf preview", src: doc.image_thumbnail ? doc.image_thumbnail.url : doc.image, width: "100%", height: "100%" }), _jsx("img", { alt: "pdf badge", src: BADGE_PDF, className: classes.badgePdf })] })), _jsxs(Stack, Object.assign({ className: classes.textWrapper }, { children: [_jsx(Typography, Object.assign({ className: classes.title }, { children: doc.title })), doc.size && _jsx(Typography, Object.assign({ className: classes.subtitle }, { children: formatBytes(doc.size) }))] })), (handleDownload || onDelete) && (_jsxs(Stack, Object.assign({ className: classes.actionWrapper }, { children: [onDelete && (_jsx(IconButton, Object.assign({ className: classes.action, onClick: () => onDelete(doc.id) }, { children: _jsx(Icon, { children: "delete" }) }))), handleDownload && (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: classes.action, component: Link, to: doc.url, target: "_blank", onClick: () => onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(doc) }, { children: _jsx(Icon, { children: "visibility" }) })), _jsx(IconButton, Object.assign({ className: classes.action, onClick: () => handleDownload(index) }, { children: _jsx(Icon, { children: "download" }) }))] }))] })))] })));
32
+ return (_jsxs(Root, Object.assign({ className: classes.docRoot }, { children: [_jsxs(Box, Object.assign({ onClick: () => openPreviewImage === null || openPreviewImage === void 0 ? void 0 : openPreviewImage(index, MEDIA_TYPE_DOCUMENT), sx: { cursor: openPreviewImage ? 'pointer' : undefined }, className: classes.imageWrapper }, { children: [_jsx("img", { alt: "pdf preview", src: doc.image_thumbnail ? doc.image_thumbnail.url : doc.image, width: "100%", height: "100%" }), _jsx(Box, Object.assign({ className: classes.badgePdf }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.pdf }, { children: "PDF" })) }))] })), _jsxs(Stack, Object.assign({ className: classes.textWrapper }, { children: [_jsx(Typography, Object.assign({ className: classes.title }, { children: doc.title })), doc.size && _jsx(Typography, Object.assign({ className: classes.subtitle }, { children: formatBytes(doc.size) }))] })), (handleDownload || onDelete) && (_jsxs(Stack, Object.assign({ className: classes.actionWrapper }, { children: [onDelete && (_jsx(IconButton, Object.assign({ className: classes.action, onClick: () => onDelete(doc.id) }, { children: _jsx(Icon, { children: "delete" }) }))), handleDownload && (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: classes.action, component: Link, to: doc.url, target: "_blank", onClick: () => onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(doc) }, { children: _jsx(Icon, { children: "visibility" }) })), _jsx(IconButton, Object.assign({ className: classes.action, onClick: () => handleDownload(index) }, { children: _jsx(Icon, { children: "download" }) }))] }))] })))] })));
33
33
  }
package/lib/esm/shared/Media/Share/DisplayComponent.d.ts CHANGED
@@ -6,10 +6,6 @@ export interface DisplayComponentProps extends BoxProps {
6
6
  * Medias
7
7
  */
8
8
  medias: SCMediaType[];
9
- /**
10
- * Handles on media click
11
- */
12
- onMediaClick?: (any: any) => void;
13
9
  }
14
- declare const _default: ({ className, medias, onMediaClick, ...rest }: DisplayComponentProps) => ReactElement;
10
+ declare const _default: ({ className, medias, ...rest }: DisplayComponentProps) => ReactElement;
15
11
  export default _default;
package/lib/esm/shared/Media/Share/DisplayComponent.js CHANGED
@@ -21,13 +21,11 @@ const Root = styled(Box, {
21
21
  slot: 'DisplayRoot'
22
22
  })(() => ({}));
23
23
  export default (_a) => {
24
- var { className, medias = [], onMediaClick = null } = _a, rest = __rest(_a, ["className", "medias", "onMediaClick"]);
24
+ var { className, medias = [] } = _a, rest = __rest(_a, ["className", "medias"]);
25
25
  // MEMO
26
26
  const _medias = useMemo(() => medias.filter(filter), [medias]);
27
27
  if (_medias.length === 0) {
28
28
  return null;
29
29
  }
30
- return (_jsx(Root, Object.assign({ className: classNames(className, classes.displayRoot) }, rest, { children: _medias.map((media, i) => (_jsx(Box, Object.assign({ className: classes.sharePreview, onClick: () => {
31
- onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(media);
32
- } }, { children: media.type === MEDIA_TYPE_EVENT || (media.embed && media.embed.embed_type === MEDIA_EMBED_SC_SHARED_EVENT) ? (_jsx(Event, { event: media.embed.metadata, template: SCEventTemplateType.DETAIL, variant: "outlined", square: true, hideEventParticipants: true, hideEventPlanner: true, actions: _jsx(_Fragment, {}) })) : (_jsx(FeedObject, { feedObjectId: media.embed.metadata.id, feedObjectType: media.embed.metadata.type, variant: "outlined", template: SCFeedObjectTemplateType.SHARE, cacheStrategy: CacheStrategies.CACHE_FIRST })) }), i))) })));
30
+ return (_jsx(Root, Object.assign({ className: classNames(className, classes.displayRoot) }, rest, { children: _medias.map((media, i) => (_jsx(Box, Object.assign({ className: classes.sharePreview }, { children: media.type === MEDIA_TYPE_EVENT || (media.embed && media.embed.embed_type === MEDIA_EMBED_SC_SHARED_EVENT) ? (_jsx(Event, { event: media.embed.metadata, template: SCEventTemplateType.DETAIL, variant: "outlined", square: true, hideEventParticipants: true, hideEventPlanner: true, actions: _jsx(_Fragment, {}) })) : (_jsx(FeedObject, { feedObjectId: media.embed.metadata.id, feedObjectType: media.embed.metadata.type, variant: "outlined", template: SCFeedObjectTemplateType.SHARE, cacheStrategy: CacheStrategies.CACHE_FIRST })) }), i))) })));
33
31
  };