@streamscloud/embeddable 15.0.1 → 15.0.2
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.
- package/dist/ads/ad-card/cmp.ad-card.svelte +7 -9
- package/dist/external-api/data-providers/internal-media-center-analytics-handler.d.ts +14 -14
- package/dist/external-api/data-providers/internal-post-analytics-handler.d.ts +6 -6
- package/dist/external-api/data-providers/internal-stream-analytics-handler.d.ts +13 -13
- package/dist/media-center/media-center/cmp.media-center-proxy.svelte +4 -5
- package/dist/media-center/media-center/discover/community-features.svelte +12 -21
- package/dist/media-center/media-center/discover/discover-view.svelte +44 -35
- package/dist/media-center/media-center/handlers/categories-handler.svelte.js +2 -1
- package/dist/media-center/media-center/header/media-center-header-mobile.svelte +2 -4
- package/dist/media-center/media-center/header/media-center-header.svelte +4 -6
- package/dist/media-center/media-center/media-center-context.svelte.js +2 -1
- package/dist/media-center/media-center/media-center-view.svelte +5 -14
- package/dist/media-center/media-center/menu/category-following-wrapper.svelte +7 -16
- package/dist/media-center/media-center/menu/menu.svelte +5 -3
- package/dist/media-center/media-center/moments/cmp.moments-circle.svelte +1 -1
- package/dist/media-center/media-center/moments/moments-state.svelte.js +2 -1
- package/dist/media-center/media-center/streams-in-category/streams-in-category-panel.svelte +6 -2
- package/dist/media-page/cmp.media-page.svelte +6 -15
- package/dist/posts/controls/post-actions-generator.svelte.js +2 -1
- package/dist/posts/post-viewer/attachments-horizontal.svelte +23 -26
- package/dist/posts/post-viewer/media/post-media.svelte +5 -3
- package/dist/posts/posts-player/cmp.posts-player.svelte +4 -13
- package/dist/posts/posts-player/posts-player-proxy.svelte +2 -3
- package/dist/posts/posts-player/posts-player-view.svelte +36 -47
- package/dist/products/product-card/cmp.product-card.svelte +6 -7
- package/dist/short-videos/short-video-card/cmp.short-video-card.svelte +1 -1
- package/dist/streams/controls/stream-actions-generator.svelte.js +2 -1
- package/dist/streams/layout/cmp.slot-content.svelte +5 -6
- package/dist/streams/layout/element-views/cmp.price-stream-element.svelte +2 -3
- package/dist/streams/layout/element-views/cmp.products-slider-stream-element.svelte +1 -1
- package/dist/streams/layout/element-views/cmp.stock-stream-element.svelte +4 -7
- package/dist/streams/layout/element-views/price-element-view.svelte +14 -27
- package/dist/streams/streams-player/cmp.streams-player.svelte +4 -13
- package/dist/streams/streams-player/streams-player-proxy.svelte +2 -3
- package/dist/streams/streams-player/streams-player-view.svelte +44 -57
- package/dist/ui/button/resources/button-theme.svelte +4 -2
- package/dist/ui/dropdown/cmp.dropdown.svelte +4 -6
- package/dist/ui/icon/cmp.icon.svelte +1 -1
- package/dist/ui/image/cmp.image.svelte +2 -2
- package/dist/ui/infinite-scrolling/cmp.infinite-scrolling.svelte +6 -15
- package/dist/ui/line-clamp/cmp.line-clamp-auto.svelte +2 -2
- package/dist/ui/media-item-view/cmp.media-item-view.svelte +1 -1
- package/dist/ui/media-items-gallery/cmp.media-items-gallery.svelte +6 -15
- package/dist/ui/player/button/cmp.player-button.svelte +3 -1
- package/dist/ui/player/button/cmp.player-buttons-group.svelte +3 -1
- package/dist/ui/player/close-orchestrator/close-orchestrator.svelte.js +2 -1
- package/dist/ui/player/player/cmp.player.svelte +2 -3
- package/dist/ui/player/player/cmp.player.svelte.d.ts +1 -1
- package/dist/ui/player/player/controls-and-attachments.svelte +2 -2
- package/dist/ui/player/player/overview-panel.svelte +3 -1
- package/dist/ui/player/slider/cmp.player-slider.svelte +6 -7
- package/dist/ui/player/slider-horizontal/cmp.slider.svelte +14 -11
- package/dist/ui/seek-bar/cmp.seek-bar.svelte +7 -9
- package/dist/ui/shadow-dom/cmp.shadow-root.svelte +2 -2
- package/dist/ui/video/cmp.video.svelte +17 -29
- package/package.json +41 -39
|
@@ -1,17 +1,15 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import { enrichAdLinkWithTracking } from '../../marketing-tracking';
|
|
1
|
+
<script lang="ts">import { enrichAdLinkWithTracking } from '../../marketing-tracking';
|
|
3
2
|
import { toPriceRepresentation } from '../../products/price-helper';
|
|
4
3
|
import { Button, ButtonSize } from '../../ui/button';
|
|
5
4
|
import { Image } from '../../ui/image';
|
|
6
5
|
import { LineClamp } from '../../ui/line-clamp';
|
|
7
6
|
let { ad, colors, locale, trackingParams, inert = false, on } = $props();
|
|
8
7
|
const trackImpression = (node) => {
|
|
9
|
-
if (on
|
|
8
|
+
if (on?.impression) {
|
|
10
9
|
const observer = new IntersectionObserver((entries) => {
|
|
11
10
|
entries.forEach((entry) => {
|
|
12
|
-
var _a;
|
|
13
11
|
if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
|
|
14
|
-
|
|
12
|
+
on.impression?.(ad.id);
|
|
15
13
|
observer.unobserve(entry.target);
|
|
16
14
|
}
|
|
17
15
|
});
|
|
@@ -24,9 +22,9 @@ const trackImpression = (node) => {
|
|
|
24
22
|
};
|
|
25
23
|
}
|
|
26
24
|
};
|
|
27
|
-
const enrichedLink = $derived(
|
|
25
|
+
const enrichedLink = $derived(ad.ctaButton?.url ? enrichAdLinkWithTracking({ link: ad.ctaButton.url, adId: ad.id, trackingParams }) : null);
|
|
28
26
|
const handleAdClick = () => {
|
|
29
|
-
if (on
|
|
27
|
+
if (on?.click) {
|
|
30
28
|
on.click(ad.id);
|
|
31
29
|
}
|
|
32
30
|
if (enrichedLink) {
|
|
@@ -35,10 +33,10 @@ const handleAdClick = () => {
|
|
|
35
33
|
};
|
|
36
34
|
const styles = $derived.by(() => {
|
|
37
35
|
const values = [];
|
|
38
|
-
if (colors
|
|
36
|
+
if (colors?.background) {
|
|
39
37
|
values.push(`--ad-card--background-color: ${colors.background}`);
|
|
40
38
|
}
|
|
41
|
-
if (colors
|
|
39
|
+
if (colors?.price) {
|
|
42
40
|
values.push(`--ad-card--price-color: ${colors.price}`);
|
|
43
41
|
}
|
|
44
42
|
return values.join(';');
|
|
@@ -3,18 +3,18 @@ import type { IPostAnalyticsHandler } from '../../posts/posts-player/types';
|
|
|
3
3
|
import type { IStreamAnalyticsHandler } from '../../streams/streams-player/types';
|
|
4
4
|
export declare class InternalMediaCenterAnalyticsHandler implements IPostAnalyticsHandler, IStreamAnalyticsHandler {
|
|
5
5
|
constructor(graphqlOrigin: string | undefined);
|
|
6
|
-
trackPostOpened: (postType: PostType, postId: string) =>
|
|
7
|
-
trackStreamView: (streamId: string) =>
|
|
8
|
-
trackStreamPageView: (pageId: string, streamId: string) =>
|
|
9
|
-
trackStreamEngagementTime: (streamId: string, engagementTime: number) =>
|
|
10
|
-
trackStreamScrollDepth: (streamId: string, scrollDepth: number) =>
|
|
11
|
-
trackStreamProductImpression: (productId: string, streamId: string) =>
|
|
12
|
-
trackStreamProductClicked: (productId: string, streamId: string) =>
|
|
13
|
-
reportPageVideoViews: (pageId: string, streamId: string) =>
|
|
14
|
-
trackShortVideoView: (videoId: string) =>
|
|
15
|
-
trackShortVideoProductImpression: (productId: string, videoId: string) =>
|
|
16
|
-
trackShortVideoProductClick: (productId: string, videoId: string) =>
|
|
17
|
-
trackShortVideoProgress: (pageId: string, videoId: string, progress: number, streamId: string) =>
|
|
18
|
-
trackAdClick: (adId: string) =>
|
|
19
|
-
trackAdImpression: (adId: string) =>
|
|
6
|
+
trackPostOpened: (postType: PostType, postId: string) => Promise<void>;
|
|
7
|
+
trackStreamView: (streamId: string) => Promise<void>;
|
|
8
|
+
trackStreamPageView: (pageId: string, streamId: string) => Promise<void>;
|
|
9
|
+
trackStreamEngagementTime: (streamId: string, engagementTime: number) => Promise<void>;
|
|
10
|
+
trackStreamScrollDepth: (streamId: string, scrollDepth: number) => Promise<void>;
|
|
11
|
+
trackStreamProductImpression: (productId: string, streamId: string) => Promise<void>;
|
|
12
|
+
trackStreamProductClicked: (productId: string, streamId: string) => Promise<void>;
|
|
13
|
+
reportPageVideoViews: (pageId: string, streamId: string) => Promise<import("@streamscloud/streams-analytics-collector").MeasurementsBatchReportResult>;
|
|
14
|
+
trackShortVideoView: (videoId: string) => Promise<void>;
|
|
15
|
+
trackShortVideoProductImpression: (productId: string, videoId: string) => Promise<void>;
|
|
16
|
+
trackShortVideoProductClick: (productId: string, videoId: string) => Promise<void>;
|
|
17
|
+
trackShortVideoProgress: (pageId: string, videoId: string, progress: number, streamId: string) => void;
|
|
18
|
+
trackAdClick: (adId: string) => Promise<void>;
|
|
19
|
+
trackAdImpression: (adId: string) => Promise<void>;
|
|
20
20
|
}
|
|
@@ -2,10 +2,10 @@ import type { PostType } from '../../core/enums';
|
|
|
2
2
|
import type { IPostAnalyticsHandler } from '../../posts/posts-player';
|
|
3
3
|
export declare class InternalPostAnalyticsHandler implements IPostAnalyticsHandler {
|
|
4
4
|
constructor(graphqlOrigin: string | undefined);
|
|
5
|
-
trackPostOpened: (postType: PostType, postId: string) =>
|
|
6
|
-
trackShortVideoView: (videoId: string) =>
|
|
7
|
-
trackShortVideoProductImpression: (productId: string, videoId: string) =>
|
|
8
|
-
trackShortVideoProductClick: (productId: string, videoId: string) =>
|
|
9
|
-
trackAdClick: (adId: string) =>
|
|
10
|
-
trackAdImpression: (adId: string) =>
|
|
5
|
+
trackPostOpened: (postType: PostType, postId: string) => Promise<void>;
|
|
6
|
+
trackShortVideoView: (videoId: string) => Promise<void>;
|
|
7
|
+
trackShortVideoProductImpression: (productId: string, videoId: string) => Promise<void>;
|
|
8
|
+
trackShortVideoProductClick: (productId: string, videoId: string) => Promise<void>;
|
|
9
|
+
trackAdClick: (adId: string) => Promise<void>;
|
|
10
|
+
trackAdImpression: (adId: string) => Promise<void>;
|
|
11
11
|
}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import type { IStreamAnalyticsHandler } from '../../streams/streams-player/types';
|
|
2
2
|
export declare class InternalStreamAnalyticsHandler implements IStreamAnalyticsHandler {
|
|
3
3
|
constructor(graphqlOrigin: string | undefined);
|
|
4
|
-
trackStreamView: (streamId: string) =>
|
|
5
|
-
trackStreamPageView: (pageId: string, streamId: string) =>
|
|
6
|
-
trackStreamEngagementTime: (streamId: string, engagementTime: number) =>
|
|
7
|
-
trackStreamScrollDepth: (streamId: string, scrollDepth: number) =>
|
|
8
|
-
trackStreamProductImpression: (productId: string, streamId: string) =>
|
|
9
|
-
trackStreamProductClicked: (productId: string, streamId: string) =>
|
|
10
|
-
reportPageVideoViews: (pageId: string, streamId: string) =>
|
|
11
|
-
trackShortVideoView: (videoId: string) =>
|
|
12
|
-
trackShortVideoProductImpression: (productId: string, videoId: string) =>
|
|
13
|
-
trackShortVideoProductClick: (productId: string, videoId: string) =>
|
|
14
|
-
trackShortVideoProgress: (pageId: string, videoId: string, progress: number, streamId: string) =>
|
|
15
|
-
trackAdClick: (adId: string) =>
|
|
16
|
-
trackAdImpression: (adId: string) =>
|
|
4
|
+
trackStreamView: (streamId: string) => Promise<void>;
|
|
5
|
+
trackStreamPageView: (pageId: string, streamId: string) => Promise<void>;
|
|
6
|
+
trackStreamEngagementTime: (streamId: string, engagementTime: number) => Promise<void>;
|
|
7
|
+
trackStreamScrollDepth: (streamId: string, scrollDepth: number) => Promise<void>;
|
|
8
|
+
trackStreamProductImpression: (productId: string, streamId: string) => Promise<void>;
|
|
9
|
+
trackStreamProductClicked: (productId: string, streamId: string) => Promise<void>;
|
|
10
|
+
reportPageVideoViews: (pageId: string, streamId: string) => Promise<import("@streamscloud/streams-analytics-collector").MeasurementsBatchReportResult>;
|
|
11
|
+
trackShortVideoView: (videoId: string) => Promise<void>;
|
|
12
|
+
trackShortVideoProductImpression: (productId: string, videoId: string) => Promise<void>;
|
|
13
|
+
trackShortVideoProductClick: (productId: string, videoId: string) => Promise<void>;
|
|
14
|
+
trackShortVideoProgress: (pageId: string, videoId: string, progress: number, streamId: string) => void;
|
|
15
|
+
trackAdClick: (adId: string) => Promise<void>;
|
|
16
|
+
trackAdImpression: (adId: string) => Promise<void>;
|
|
17
17
|
}
|
|
@@ -7,7 +7,7 @@ import { MediaCenterContext } from './media-center-context.svelte';
|
|
|
7
7
|
import { default as MediaCenterView } from './media-center-view.svelte';
|
|
8
8
|
import { untrack } from 'svelte';
|
|
9
9
|
let { dataProvider, modeProps, settings, closeOrchestrator, dynamicActions } = $props();
|
|
10
|
-
const context = new MediaCenterContext({
|
|
10
|
+
const context = untrack(() => new MediaCenterContext({
|
|
11
11
|
dataProvider,
|
|
12
12
|
closeOrchestrator,
|
|
13
13
|
settings,
|
|
@@ -43,12 +43,11 @@ const context = new MediaCenterContext({
|
|
|
43
43
|
closeOrchestrator.requestClose();
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
|
-
});
|
|
46
|
+
}));
|
|
47
47
|
$effect(() => {
|
|
48
|
-
void
|
|
48
|
+
void settings?.theme;
|
|
49
49
|
untrack(() => {
|
|
50
|
-
|
|
51
|
-
Theme.set((_a = settings === null || settings === void 0 ? void 0 : settings.theme) !== null && _a !== void 0 ? _a : 'dark');
|
|
50
|
+
Theme.set(settings?.theme ?? 'dark');
|
|
52
51
|
});
|
|
53
52
|
});
|
|
54
53
|
</script>
|
|
@@ -1,13 +1,4 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
|
-
import { compactNumber } from '../../../core/utils/compact-number';
|
|
1
|
+
<script lang="ts">import { compactNumber } from '../../../core/utils/compact-number';
|
|
11
2
|
import { OptionsButton, ButtonSize, ButtonStyle, Button } from '../../../ui/button';
|
|
12
3
|
import { CommunityFeaturesLocalization } from './community-features-localization';
|
|
13
4
|
let { target, membershipHandler, locale } = $props();
|
|
@@ -22,41 +13,41 @@ $effect(() => {
|
|
|
22
13
|
updateIsJoinedStore(membershipHandler);
|
|
23
14
|
}
|
|
24
15
|
});
|
|
25
|
-
const updateIsJoinedStore = (membershipHandler) =>
|
|
16
|
+
const updateIsJoinedStore = async (membershipHandler) => {
|
|
26
17
|
uiState = 'loading';
|
|
27
18
|
try {
|
|
28
|
-
isJoinedStore =
|
|
19
|
+
isJoinedStore = await membershipHandler.getIsJoined();
|
|
29
20
|
}
|
|
30
21
|
finally {
|
|
31
22
|
uiState = 'idle';
|
|
32
23
|
}
|
|
33
|
-
}
|
|
34
|
-
const onLeaveMembershipClick = () =>
|
|
24
|
+
};
|
|
25
|
+
const onLeaveMembershipClick = async () => {
|
|
35
26
|
if (!membershipHandler) {
|
|
36
27
|
return;
|
|
37
28
|
}
|
|
38
29
|
uiState = 'submitting';
|
|
39
30
|
try {
|
|
40
|
-
|
|
41
|
-
|
|
31
|
+
await membershipHandler.leave();
|
|
32
|
+
await updateIsJoinedStore(membershipHandler);
|
|
42
33
|
}
|
|
43
34
|
finally {
|
|
44
35
|
uiState = 'idle';
|
|
45
36
|
}
|
|
46
|
-
}
|
|
47
|
-
const onJoinMembershipClick = () =>
|
|
37
|
+
};
|
|
38
|
+
const onJoinMembershipClick = async () => {
|
|
48
39
|
if (!membershipHandler) {
|
|
49
40
|
return;
|
|
50
41
|
}
|
|
51
42
|
uiState = 'submitting';
|
|
52
43
|
try {
|
|
53
|
-
|
|
54
|
-
|
|
44
|
+
await membershipHandler.join();
|
|
45
|
+
await updateIsJoinedStore(membershipHandler);
|
|
55
46
|
}
|
|
56
47
|
finally {
|
|
57
48
|
uiState = 'idle';
|
|
58
49
|
}
|
|
59
|
-
}
|
|
50
|
+
};
|
|
60
51
|
</script>
|
|
61
52
|
|
|
62
53
|
{#if target.communityFeatures && (target.communityFeatures.membersCount > 0 || membershipHandler)}
|
|
@@ -1,13 +1,4 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
|
-
import { getPostCoverImage } from '../../../posts/model';
|
|
1
|
+
<script lang="ts">import { getPostCoverImage } from '../../../posts/model';
|
|
11
2
|
import { ShortVideoCard } from '../../../short-videos/short-video-card';
|
|
12
3
|
import { StreamCard } from '../../../streams/stream-card';
|
|
13
4
|
import { cardActionContainer, CardActions } from '../../../ui/card-actions';
|
|
@@ -25,20 +16,18 @@ const generateShortVideoActions = (id) => {
|
|
|
25
16
|
if (context.contentManagementHandler.editPost) {
|
|
26
17
|
actions.push({
|
|
27
18
|
icon: IconEdit,
|
|
28
|
-
callback: () =>
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
})
|
|
19
|
+
callback: async () => {
|
|
20
|
+
context.contentManagementHandler.editPost?.(id);
|
|
21
|
+
}
|
|
32
22
|
});
|
|
33
23
|
}
|
|
34
24
|
if (context.contentManagementHandler.deletePost) {
|
|
35
25
|
actions.push({
|
|
36
26
|
icon: IconDelete,
|
|
37
27
|
iconColor: IconColor.Red,
|
|
38
|
-
callback: () =>
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
})
|
|
28
|
+
callback: async () => {
|
|
29
|
+
context.contentManagementHandler.deletePost?.(id);
|
|
30
|
+
}
|
|
42
31
|
});
|
|
43
32
|
}
|
|
44
33
|
return actions;
|
|
@@ -49,8 +38,7 @@ const genereateStreamActions = (id) => {
|
|
|
49
38
|
actions.push({
|
|
50
39
|
icon: IconEdit,
|
|
51
40
|
callback: () => {
|
|
52
|
-
|
|
53
|
-
(_b = (_a = context.contentManagementHandler).editStream) === null || _b === void 0 ? void 0 : _b.call(_a, id);
|
|
41
|
+
context.contentManagementHandler.editStream?.(id);
|
|
54
42
|
}
|
|
55
43
|
});
|
|
56
44
|
}
|
|
@@ -58,10 +46,9 @@ const genereateStreamActions = (id) => {
|
|
|
58
46
|
actions.push({
|
|
59
47
|
icon: IconDelete,
|
|
60
48
|
iconColor: IconColor.Red,
|
|
61
|
-
callback: () =>
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
})
|
|
49
|
+
callback: async () => {
|
|
50
|
+
context.contentManagementHandler.deleteStream?.(id);
|
|
51
|
+
}
|
|
65
52
|
});
|
|
66
53
|
}
|
|
67
54
|
return actions;
|
|
@@ -146,7 +133,6 @@ const genereateStreamActions = (id) => {
|
|
|
146
133
|
overflow-y: auto;
|
|
147
134
|
--_cross-browser-scrollbar--thumb-color: transparent;
|
|
148
135
|
--_cross-browser-scrollbar--track-color: transparent;
|
|
149
|
-
/* Set 'container-type: inline-size;' to reference container*/
|
|
150
136
|
}
|
|
151
137
|
.media-center-discover:hover {
|
|
152
138
|
--_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, #7d7d7d);
|
|
@@ -170,6 +156,9 @@ const genereateStreamActions = (id) => {
|
|
|
170
156
|
scrollbar-width: thin;
|
|
171
157
|
}
|
|
172
158
|
}
|
|
159
|
+
.media-center-discover {
|
|
160
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
161
|
+
}
|
|
173
162
|
@container (width < 576px) {
|
|
174
163
|
.media-center-discover {
|
|
175
164
|
padding-inline: 0.9375rem;
|
|
@@ -181,19 +170,23 @@ const genereateStreamActions = (id) => {
|
|
|
181
170
|
margin: 0 auto;
|
|
182
171
|
padding-bottom: 1.25rem;
|
|
183
172
|
/* Set 'container-type: inline-size;' to reference container*/
|
|
184
|
-
/* Set 'container-type: inline-size;' to reference container*/
|
|
185
|
-
/* Set 'container-type: inline-size;' to reference container*/
|
|
186
173
|
}
|
|
187
174
|
@container (width < 992px) {
|
|
188
175
|
.media-center-discover__content {
|
|
189
176
|
padding-bottom: 1rem;
|
|
190
177
|
}
|
|
191
178
|
}
|
|
179
|
+
.media-center-discover__content {
|
|
180
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
181
|
+
}
|
|
192
182
|
@container (width < 768px) {
|
|
193
183
|
.media-center-discover__content {
|
|
194
184
|
padding-bottom: 0.8125rem;
|
|
195
185
|
}
|
|
196
186
|
}
|
|
187
|
+
.media-center-discover__content {
|
|
188
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
189
|
+
}
|
|
197
190
|
@container (width < 576px) {
|
|
198
191
|
.media-center-discover__content {
|
|
199
192
|
padding-bottom: 0.625rem;
|
|
@@ -204,19 +197,23 @@ const genereateStreamActions = (id) => {
|
|
|
204
197
|
flex-direction: column;
|
|
205
198
|
gap: 3rem;
|
|
206
199
|
/* Set 'container-type: inline-size;' to reference container*/
|
|
207
|
-
/* Set 'container-type: inline-size;' to reference container*/
|
|
208
|
-
/* Set 'container-type: inline-size;' to reference container*/
|
|
209
200
|
}
|
|
210
201
|
@container (width < 992px) {
|
|
211
202
|
.media-center-discover__feed {
|
|
212
203
|
gap: 2.5rem;
|
|
213
204
|
}
|
|
214
205
|
}
|
|
206
|
+
.media-center-discover__feed {
|
|
207
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
208
|
+
}
|
|
215
209
|
@container (width < 768px) {
|
|
216
210
|
.media-center-discover__feed {
|
|
217
211
|
gap: 2rem;
|
|
218
212
|
}
|
|
219
213
|
}
|
|
214
|
+
.media-center-discover__feed {
|
|
215
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
216
|
+
}
|
|
220
217
|
@container (width < 576px) {
|
|
221
218
|
.media-center-discover__feed {
|
|
222
219
|
gap: 1.5rem;
|
|
@@ -253,13 +250,13 @@ const genereateStreamActions = (id) => {
|
|
|
253
250
|
.media-center-discover__section-content--4 {
|
|
254
251
|
gap: 1.25rem;
|
|
255
252
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
256
|
-
/* Set 'container-type: inline-size;' to reference container*/
|
|
257
|
-
/* Set 'container-type: inline-size;' to reference container*/
|
|
258
|
-
/* Set 'container-type: inline-size;' to reference container*/
|
|
259
253
|
}
|
|
260
254
|
.media-center-discover__section-content--4 :global(> :nth-child(n + 5)) {
|
|
261
255
|
display: var(--_section-content--more-items--display);
|
|
262
256
|
}
|
|
257
|
+
.media-center-discover__section-content--4 {
|
|
258
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
259
|
+
}
|
|
263
260
|
@container (width < 992px) {
|
|
264
261
|
.media-center-discover__section-content--4 {
|
|
265
262
|
gap: 1rem;
|
|
@@ -269,6 +266,9 @@ const genereateStreamActions = (id) => {
|
|
|
269
266
|
display: var(--_section-content--more-items--display);
|
|
270
267
|
}
|
|
271
268
|
}
|
|
269
|
+
.media-center-discover__section-content--4 {
|
|
270
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
271
|
+
}
|
|
272
272
|
@container (width < 768px) {
|
|
273
273
|
.media-center-discover__section-content--4 {
|
|
274
274
|
gap: 0.75rem;
|
|
@@ -281,6 +281,9 @@ const genereateStreamActions = (id) => {
|
|
|
281
281
|
display: var(--_section-content--more-items--display);
|
|
282
282
|
}
|
|
283
283
|
}
|
|
284
|
+
.media-center-discover__section-content--4 {
|
|
285
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
286
|
+
}
|
|
284
287
|
@container (width < 576px) {
|
|
285
288
|
.media-center-discover__section-content--4 {
|
|
286
289
|
gap: 0.625rem;
|
|
@@ -289,13 +292,13 @@ const genereateStreamActions = (id) => {
|
|
|
289
292
|
.media-center-discover__section-content--5 {
|
|
290
293
|
gap: 1.875rem;
|
|
291
294
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
292
|
-
/* Set 'container-type: inline-size;' to reference container*/
|
|
293
|
-
/* Set 'container-type: inline-size;' to reference container*/
|
|
294
|
-
/* Set 'container-type: inline-size;' to reference container*/
|
|
295
295
|
}
|
|
296
296
|
.media-center-discover__section-content--5 :global(> :nth-child(n + 6)) {
|
|
297
297
|
display: var(--_section-content--more-items--display);
|
|
298
298
|
}
|
|
299
|
+
.media-center-discover__section-content--5 {
|
|
300
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
301
|
+
}
|
|
299
302
|
@container (width < 992px) {
|
|
300
303
|
.media-center-discover__section-content--5 {
|
|
301
304
|
gap: 1.5rem;
|
|
@@ -305,6 +308,9 @@ const genereateStreamActions = (id) => {
|
|
|
305
308
|
display: var(--_section-content--more-items--display);
|
|
306
309
|
}
|
|
307
310
|
}
|
|
311
|
+
.media-center-discover__section-content--5 {
|
|
312
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
313
|
+
}
|
|
308
314
|
@container (width < 768px) {
|
|
309
315
|
.media-center-discover__section-content--5 {
|
|
310
316
|
gap: 1.125rem;
|
|
@@ -314,6 +320,9 @@ const genereateStreamActions = (id) => {
|
|
|
314
320
|
display: var(--_section-content--more-items--display);
|
|
315
321
|
}
|
|
316
322
|
}
|
|
323
|
+
.media-center-discover__section-content--5 {
|
|
324
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
325
|
+
}
|
|
317
326
|
@container (width < 576px) {
|
|
318
327
|
.media-center-discover__section-content--5 {
|
|
319
328
|
gap: 0.9375rem;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
import { SvelteMap } from 'svelte/reactivity';
|
|
1
2
|
export class CategoriesHandler {
|
|
2
3
|
dataProvider;
|
|
3
4
|
_allCateogories = $derived.by(() => this.dataProvider.model?.contentCategories ?? []);
|
|
4
5
|
_tagAssociations = $derived.by(() => {
|
|
5
|
-
const newTagAssociations = new
|
|
6
|
+
const newTagAssociations = new SvelteMap();
|
|
6
7
|
if (this.dataProvider.model?.categoryTagAssociations) {
|
|
7
8
|
for (const assoc of this.dataProvider.model.categoryTagAssociations) {
|
|
8
9
|
if (assoc.tag) {
|
|
@@ -6,15 +6,13 @@ let { context, locale = 'en', on } = $props();
|
|
|
6
6
|
const localization = $derived(new MediaCenterHeaderLocalization(locale));
|
|
7
7
|
const headerMounted = (node) => {
|
|
8
8
|
const heightResizeObserver = new ResizeObserver(() => {
|
|
9
|
-
var _a;
|
|
10
9
|
const headerHeight = node.clientHeight;
|
|
11
|
-
|
|
10
|
+
on?.headerHeightChanged?.(headerHeight);
|
|
12
11
|
});
|
|
13
12
|
heightResizeObserver.observe(node);
|
|
14
13
|
return {
|
|
15
14
|
destroy: () => {
|
|
16
|
-
|
|
17
|
-
(_a = on === null || on === void 0 ? void 0 : on.headerHeightChanged) === null || _a === void 0 ? void 0 : _a.call(on, 0);
|
|
15
|
+
on?.headerHeightChanged?.(0);
|
|
18
16
|
heightResizeObserver.disconnect();
|
|
19
17
|
}
|
|
20
18
|
};
|
|
@@ -19,16 +19,14 @@ let scrollAreaRef = $state(null);
|
|
|
19
19
|
const headerMounted = (node) => {
|
|
20
20
|
headerRef = node;
|
|
21
21
|
const heightResizeObserver = new ResizeObserver(() => {
|
|
22
|
-
var _a;
|
|
23
22
|
const headerHeight = node.clientHeight;
|
|
24
|
-
|
|
23
|
+
on?.headerHeightChanged?.(headerHeight);
|
|
25
24
|
calcHeaderGridProportions();
|
|
26
25
|
});
|
|
27
26
|
heightResizeObserver.observe(node);
|
|
28
27
|
return {
|
|
29
28
|
destroy: () => {
|
|
30
|
-
|
|
31
|
-
(_a = on === null || on === void 0 ? void 0 : on.headerHeightChanged) === null || _a === void 0 ? void 0 : _a.call(on, 0);
|
|
29
|
+
on?.headerHeightChanged?.(0);
|
|
32
30
|
heightResizeObserver.disconnect();
|
|
33
31
|
}
|
|
34
32
|
};
|
|
@@ -95,10 +93,10 @@ const onScrollMounted = (node) => {
|
|
|
95
93
|
const scrollResizeObserver = new ResizeObserver(() => {
|
|
96
94
|
updateScrollShadows(node);
|
|
97
95
|
});
|
|
98
|
-
scrollResizeObserver
|
|
96
|
+
scrollResizeObserver?.observe(node);
|
|
99
97
|
return {
|
|
100
98
|
destroy: () => {
|
|
101
|
-
scrollResizeObserver
|
|
99
|
+
scrollResizeObserver?.disconnect();
|
|
102
100
|
}
|
|
103
101
|
};
|
|
104
102
|
};
|
|
@@ -7,6 +7,7 @@ import { PostsFeedHandler } from './posts-feed';
|
|
|
7
7
|
import { StreamsFeedHandler } from './streams-feed';
|
|
8
8
|
import { StreamsInCategoryPanelHandler } from './streams-in-category';
|
|
9
9
|
import { untrack } from 'svelte';
|
|
10
|
+
import { SvelteSet } from 'svelte/reactivity';
|
|
10
11
|
export class MediaCenterContext {
|
|
11
12
|
initializing = $state(true);
|
|
12
13
|
initialized = $state(false);
|
|
@@ -217,7 +218,7 @@ export class MediaCenterContext {
|
|
|
217
218
|
};
|
|
218
219
|
deactivateAllBut = (...params) => {
|
|
219
220
|
this.hideMenu();
|
|
220
|
-
const keep = new
|
|
221
|
+
const keep = new SvelteSet(params);
|
|
221
222
|
if (!keep.has('moments')) {
|
|
222
223
|
this.momentsFeedHandler.deactivate();
|
|
223
224
|
}
|
|
@@ -1,13 +1,4 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
|
-
import { Utils } from '../../core/utils';
|
|
1
|
+
<script lang="ts">import { Utils } from '../../core/utils';
|
|
11
2
|
import { default as PostsPlayerView } from '../../posts/posts-player/posts-player-view.svelte';
|
|
12
3
|
import { default as StreamsPlayerView } from '../../streams/streams-player/streams-player-view.svelte';
|
|
13
4
|
import { Loading } from '../../ui/loading';
|
|
@@ -21,7 +12,7 @@ import { fade } from 'svelte/transition';
|
|
|
21
12
|
let { context, dynamicActions } = $props();
|
|
22
13
|
let headerHeight = $state(0);
|
|
23
14
|
let isMobileView = $state(false);
|
|
24
|
-
const selectCategory = (categoryId) =>
|
|
15
|
+
const selectCategory = async (categoryId) => {
|
|
25
16
|
if (!context.mediaCenterMode) {
|
|
26
17
|
return;
|
|
27
18
|
}
|
|
@@ -44,7 +35,7 @@ const selectCategory = (categoryId) => __awaiter(void 0, void 0, void 0, functio
|
|
|
44
35
|
default:
|
|
45
36
|
Utils.assertUnreachable(context.mediaCenterMode);
|
|
46
37
|
}
|
|
47
|
-
}
|
|
38
|
+
};
|
|
48
39
|
const resetMediaCenterMode = () => {
|
|
49
40
|
if (!context.mediaCenterMode) {
|
|
50
41
|
return;
|
|
@@ -80,10 +71,10 @@ const onWidthAnchorMounted = (node) => {
|
|
|
80
71
|
const resizeObserver = new ResizeObserver(() => {
|
|
81
72
|
isMobileView = node.clientWidth <= 576;
|
|
82
73
|
});
|
|
83
|
-
resizeObserver
|
|
74
|
+
resizeObserver?.observe(node);
|
|
84
75
|
return {
|
|
85
76
|
destroy: () => {
|
|
86
|
-
resizeObserver
|
|
77
|
+
resizeObserver?.disconnect();
|
|
87
78
|
}
|
|
88
79
|
};
|
|
89
80
|
};
|
|
@@ -1,13 +1,4 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
|
-
import { Icon } from '../../../ui/icon';
|
|
1
|
+
<script lang="ts">import { Icon } from '../../../ui/icon';
|
|
11
2
|
import IconStarFilled from '@fluentui/svg-icons/icons/star_20_filled.svg?raw';
|
|
12
3
|
import IconStar from '@fluentui/svg-icons/icons/star_20_regular.svg?raw';
|
|
13
4
|
import { onMount } from 'svelte';
|
|
@@ -17,19 +8,19 @@ let isFollowedStore = $state.raw({
|
|
|
17
8
|
return false;
|
|
18
9
|
}
|
|
19
10
|
});
|
|
20
|
-
onMount(() =>
|
|
11
|
+
onMount(async () => {
|
|
21
12
|
if (!followingHandler) {
|
|
22
13
|
return;
|
|
23
14
|
}
|
|
24
|
-
isFollowedStore =
|
|
25
|
-
})
|
|
26
|
-
const handleToggleFollow = (e) =>
|
|
15
|
+
isFollowedStore = await followingHandler.getIsFollowed(categoryId);
|
|
16
|
+
});
|
|
17
|
+
const handleToggleFollow = async (e) => {
|
|
27
18
|
e.stopPropagation();
|
|
28
19
|
if (!followingHandler) {
|
|
29
20
|
return;
|
|
30
21
|
}
|
|
31
|
-
|
|
32
|
-
}
|
|
22
|
+
await followingHandler.toggleFollow(categoryId);
|
|
23
|
+
};
|
|
33
24
|
</script>
|
|
34
25
|
|
|
35
26
|
<!--Disabled following logic. for future references-->
|
|
@@ -241,14 +241,16 @@ const styles = $derived.by(() => {
|
|
|
241
241
|
display: flex;
|
|
242
242
|
-webkit-user-drag: none;
|
|
243
243
|
user-select: none;
|
|
244
|
+
}
|
|
245
|
+
.menu-item :global([contenteditable]) {
|
|
246
|
+
user-select: text;
|
|
247
|
+
}
|
|
248
|
+
.menu-item {
|
|
244
249
|
height: 2.25rem;
|
|
245
250
|
padding-left: var(--_media-center-menu--items--padding-inline);
|
|
246
251
|
--_menu-item--text--font-size: 0.9375rem;
|
|
247
252
|
--_menu-item--image--size: 1.5rem;
|
|
248
253
|
}
|
|
249
|
-
.menu-item :global([contenteditable]) {
|
|
250
|
-
user-select: text;
|
|
251
|
-
}
|
|
252
254
|
.menu-item--active {
|
|
253
255
|
background-color: hsl(from var(--_media-center-menu--background-color) h s calc(l + 5)/alpha);
|
|
254
256
|
border-radius: 0.25rem;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script lang="ts">import { ImageRound } from '../../../ui/image';
|
|
2
2
|
let { context } = $props();
|
|
3
|
-
const handler = context.momentsFeedHandler;
|
|
3
|
+
const handler = $derived(context.momentsFeedHandler);
|
|
4
4
|
const styles = $derived.by(() => {
|
|
5
5
|
const values = [];
|
|
6
6
|
if (context.mediaCenterColors.brand) {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { PostType } from '../../../core/enums';
|
|
2
2
|
import {} from '../../../posts/posts-player';
|
|
3
|
+
import { SvelteMap } from 'svelte/reactivity';
|
|
3
4
|
export class MomentsState {
|
|
4
5
|
dataProvider;
|
|
5
6
|
momentsSeenLocally = $state.raw([]);
|
|
@@ -51,7 +52,7 @@ export class MomentsState {
|
|
|
51
52
|
}
|
|
52
53
|
}
|
|
53
54
|
const ids = sortedMoments.map((m) => m.id);
|
|
54
|
-
const idOrder = new
|
|
55
|
+
const idOrder = new SvelteMap();
|
|
55
56
|
ids.forEach((id, idx) => idOrder.set(id, idx));
|
|
56
57
|
const chunksCount = Math.ceil(sortedMoments.length / collectionCapacity);
|
|
57
58
|
const prefetchedChunks = [];
|