@streamscloud/kit 0.57.1 → 0.59.0
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/core/data-loaders/cursor-data-loader-with-search.svelte.d.ts +5 -0
- package/dist/core/data-loaders/cursor-data-loader-with-search.svelte.js +19 -6
- package/dist/core/data-loaders/cursor-data-loader.svelte.d.ts +5 -0
- package/dist/core/data-loaders/cursor-data-loader.svelte.js +19 -6
- package/dist/core/data-loaders/data-loader.d.ts +2 -0
- package/dist/core/data-loaders/keyed-cursor-data-loader.svelte.d.ts +8 -4
- package/dist/core/data-loaders/keyed-cursor-data-loader.svelte.js +15 -9
- package/dist/core/data-loaders/page-data-loader.svelte.d.ts +5 -0
- package/dist/core/data-loaders/page-data-loader.svelte.js +12 -1
- package/dist/ui/infinite-scroll/cmp.infinite-scroll.svelte +27 -4
- package/dist/ui/infinite-scroll/cmp.infinite-scroll.svelte.d.ts +15 -2
- package/dist/ui/infinite-scroll/index.d.ts +1 -0
- package/dist/ui/infinite-scroll/infinite-scroll-localization.d.ts +3 -0
- package/dist/ui/infinite-scroll/infinite-scroll-localization.js +12 -0
- package/dist/ui/infinite-scroll/types.d.ts +5 -0
- package/dist/ui/infinite-scroll/types.js +1 -0
- package/dist/ui/player/providers/chunks-player-buffer/player-chunks-manager.svelte.d.ts +0 -1
- package/dist/ui/player/providers/chunks-player-buffer/player-chunks-manager.svelte.js +1 -7
- package/dist/ui/player/providers/default-chunks-player-buffer.svelte.d.ts +0 -1
- package/dist/ui/player/providers/default-chunks-player-buffer.svelte.js +0 -3
- package/dist/ui/player/providers/types.d.ts +2 -1
- package/package.json +1 -1
|
@@ -5,6 +5,7 @@ export declare class CursorDataLoaderWithSearch<T> implements IDataLoader<T> {
|
|
|
5
5
|
private _continuationToken;
|
|
6
6
|
private _searchString;
|
|
7
7
|
private _loadPage;
|
|
8
|
+
private _resumeAfterFailure;
|
|
8
9
|
private _pending;
|
|
9
10
|
private _generation;
|
|
10
11
|
private _searchStringMinLength;
|
|
@@ -13,14 +14,18 @@ export declare class CursorDataLoaderWithSearch<T> implements IDataLoader<T> {
|
|
|
13
14
|
constructor(init: {
|
|
14
15
|
loadPage: (continuationToken: ContinuationToken, searchString: string) => Promise<CursorResult<T> | null>;
|
|
15
16
|
searchStringMinLength?: number;
|
|
17
|
+
/** Keep the cursor when a page fails, so the next `loadMore` retries it instead of ending the list for good. @default false */
|
|
18
|
+
resumeAfterFailure?: boolean;
|
|
16
19
|
});
|
|
17
20
|
get searchString(): string;
|
|
18
21
|
get loading(): boolean;
|
|
19
22
|
get initialLoading(): boolean;
|
|
20
23
|
get failed(): boolean;
|
|
24
|
+
get canLoadMore(): boolean;
|
|
21
25
|
loadMore: () => Promise<T[]>;
|
|
22
26
|
reset(): Promise<void>;
|
|
23
27
|
updateSearchString: (searchString: string | null) => void;
|
|
24
28
|
private runLoad;
|
|
29
|
+
private markFailed;
|
|
25
30
|
private isSearchStringEffective;
|
|
26
31
|
}
|
|
@@ -5,6 +5,7 @@ export class CursorDataLoaderWithSearch {
|
|
|
5
5
|
_continuationToken = $state.raw(ContinuationToken.init());
|
|
6
6
|
_searchString = $state.raw('');
|
|
7
7
|
_loadPage;
|
|
8
|
+
_resumeAfterFailure;
|
|
8
9
|
_pending = null;
|
|
9
10
|
_generation = 0;
|
|
10
11
|
_searchStringMinLength = 1;
|
|
@@ -12,6 +13,7 @@ export class CursorDataLoaderWithSearch {
|
|
|
12
13
|
_failed = $state(false);
|
|
13
14
|
constructor(init) {
|
|
14
15
|
this._loadPage = init.loadPage;
|
|
16
|
+
this._resumeAfterFailure = init.resumeAfterFailure ?? false;
|
|
15
17
|
if (init.searchStringMinLength !== undefined) {
|
|
16
18
|
this._searchStringMinLength = init.searchStringMinLength;
|
|
17
19
|
}
|
|
@@ -29,6 +31,9 @@ export class CursorDataLoaderWithSearch {
|
|
|
29
31
|
get failed() {
|
|
30
32
|
return this._failed;
|
|
31
33
|
}
|
|
34
|
+
get canLoadMore() {
|
|
35
|
+
return this._continuationToken.canLoadMore;
|
|
36
|
+
}
|
|
32
37
|
loadMore = async () => {
|
|
33
38
|
if (this._pending) {
|
|
34
39
|
return this._pending;
|
|
@@ -80,19 +85,27 @@ export class CursorDataLoaderWithSearch {
|
|
|
80
85
|
if (generation !== this._generation) {
|
|
81
86
|
return [];
|
|
82
87
|
}
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
+
if (page === null) {
|
|
89
|
+
this.markFailed();
|
|
90
|
+
return [];
|
|
91
|
+
}
|
|
92
|
+
this._continuationToken = page.continuationToken;
|
|
93
|
+
this.items = [...this.items, ...page.items];
|
|
94
|
+
return page.items;
|
|
88
95
|
}
|
|
89
96
|
catch (error) {
|
|
90
97
|
console.error('CursorDataLoaderWithSearch: failed to load page', error);
|
|
91
98
|
if (generation === this._generation) {
|
|
92
|
-
this.
|
|
99
|
+
this.markFailed();
|
|
93
100
|
}
|
|
94
101
|
return [];
|
|
95
102
|
}
|
|
96
103
|
};
|
|
104
|
+
markFailed = () => {
|
|
105
|
+
this._failed = true;
|
|
106
|
+
if (!this._resumeAfterFailure) {
|
|
107
|
+
this._continuationToken = ContinuationToken.preventLoading();
|
|
108
|
+
}
|
|
109
|
+
};
|
|
97
110
|
isSearchStringEffective = (searchString) => searchString && searchString.length >= this._searchStringMinLength;
|
|
98
111
|
}
|
|
@@ -4,17 +4,22 @@ export declare class CursorDataLoader<T> implements IDataLoader<T> {
|
|
|
4
4
|
items: T[];
|
|
5
5
|
continuationToken: ContinuationToken;
|
|
6
6
|
private _loadPage;
|
|
7
|
+
private _resumeAfterFailure;
|
|
7
8
|
private _pending;
|
|
8
9
|
private _generation;
|
|
9
10
|
private _loading;
|
|
10
11
|
private _failed;
|
|
11
12
|
constructor(init: {
|
|
12
13
|
loadPage: (continuationToken: ContinuationToken) => Promise<CursorResult<T> | null>;
|
|
14
|
+
/** Keep the cursor when a page fails, so the next `loadMore` retries it instead of ending the list for good. @default false */
|
|
15
|
+
resumeAfterFailure?: boolean;
|
|
13
16
|
});
|
|
14
17
|
get loading(): boolean;
|
|
15
18
|
get initialLoading(): boolean;
|
|
16
19
|
get failed(): boolean;
|
|
20
|
+
get canLoadMore(): boolean;
|
|
17
21
|
loadMore: () => Promise<T[]>;
|
|
18
22
|
reset(): Promise<void>;
|
|
19
23
|
private runLoad;
|
|
24
|
+
private markFailed;
|
|
20
25
|
}
|
|
@@ -3,12 +3,14 @@ export class CursorDataLoader {
|
|
|
3
3
|
items = $state.raw([]);
|
|
4
4
|
continuationToken = $state.raw(ContinuationToken.init());
|
|
5
5
|
_loadPage;
|
|
6
|
+
_resumeAfterFailure;
|
|
6
7
|
_pending = null;
|
|
7
8
|
_generation = 0;
|
|
8
9
|
_loading = $state(false);
|
|
9
10
|
_failed = $state(false);
|
|
10
11
|
constructor(init) {
|
|
11
12
|
this._loadPage = init.loadPage;
|
|
13
|
+
this._resumeAfterFailure = init.resumeAfterFailure ?? false;
|
|
12
14
|
}
|
|
13
15
|
get loading() {
|
|
14
16
|
return this._loading;
|
|
@@ -19,6 +21,9 @@ export class CursorDataLoader {
|
|
|
19
21
|
get failed() {
|
|
20
22
|
return this._failed;
|
|
21
23
|
}
|
|
24
|
+
get canLoadMore() {
|
|
25
|
+
return this.continuationToken.canLoadMore;
|
|
26
|
+
}
|
|
22
27
|
loadMore = async () => {
|
|
23
28
|
if (this._pending) {
|
|
24
29
|
return this._pending;
|
|
@@ -57,18 +62,26 @@ export class CursorDataLoader {
|
|
|
57
62
|
if (generation !== this._generation) {
|
|
58
63
|
return [];
|
|
59
64
|
}
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
+
if (page === null) {
|
|
66
|
+
this.markFailed();
|
|
67
|
+
return [];
|
|
68
|
+
}
|
|
69
|
+
this.continuationToken = page.continuationToken;
|
|
70
|
+
this.items = [...this.items, ...page.items];
|
|
71
|
+
return page.items;
|
|
65
72
|
}
|
|
66
73
|
catch (error) {
|
|
67
74
|
console.error('CursorDataLoader: failed to load page', error);
|
|
68
75
|
if (generation === this._generation) {
|
|
69
|
-
this.
|
|
76
|
+
this.markFailed();
|
|
70
77
|
}
|
|
71
78
|
return [];
|
|
72
79
|
}
|
|
73
80
|
};
|
|
81
|
+
markFailed = () => {
|
|
82
|
+
this._failed = true;
|
|
83
|
+
if (!this._resumeAfterFailure) {
|
|
84
|
+
this.continuationToken = ContinuationToken.preventLoading();
|
|
85
|
+
}
|
|
86
|
+
};
|
|
74
87
|
}
|
|
@@ -5,5 +5,7 @@ export interface IDataLoader<T> {
|
|
|
5
5
|
initialLoading: boolean;
|
|
6
6
|
/** The last attempt did not deliver a page, whether it returned nothing or threw; cleared when the next attempt starts. */
|
|
7
7
|
failed: boolean;
|
|
8
|
+
/** More pages are reachable. Goes false at the end of the list, and on a failure unless the loader was built with `resumeAfterFailure`. */
|
|
9
|
+
canLoadMore: boolean;
|
|
8
10
|
loadMore: () => Promise<T[]>;
|
|
9
11
|
}
|
|
@@ -4,17 +4,21 @@ export declare class KeyedCursorDataLoader<T> {
|
|
|
4
4
|
private _loaded;
|
|
5
5
|
private _pending;
|
|
6
6
|
private _loadPage;
|
|
7
|
-
private
|
|
7
|
+
private _loadWithFirstPage;
|
|
8
|
+
private _resumeAfterFailure;
|
|
8
9
|
constructor(init: {
|
|
9
10
|
loadPage: (key: string, continuationToken: ContinuationToken) => Promise<CursorResult<T> | null>;
|
|
10
|
-
/** Started with the key's first page and awaited by `ensureLoaded`; its outcome never reaches `isLoaded`. */
|
|
11
|
-
|
|
11
|
+
/** Started with the key's first page — never with `loadMore` — and awaited by `ensureLoaded`; its outcome never reaches `isLoaded`. */
|
|
12
|
+
loadWithFirstPage?: (key: string) => Promise<void>;
|
|
13
|
+
/** Keep a key's cursor when its page fails, so the next `loadMore` for it retries instead of ending that key's list for good. @default false */
|
|
14
|
+
resumeAfterFailure?: boolean;
|
|
12
15
|
});
|
|
13
16
|
items: (key?: string) => T[];
|
|
14
17
|
loading: (key?: string) => boolean;
|
|
15
18
|
initialLoading: (key?: string) => boolean;
|
|
16
19
|
/** The key's last attempt did not deliver a page, whether it returned nothing or threw; cleared when the next attempt for that key starts. */
|
|
17
20
|
failed: (key?: string) => boolean;
|
|
21
|
+
/** More pages are reachable for the key. Goes false on a failed page unless the loader was built with `resumeAfterFailure`. */
|
|
18
22
|
canLoadMore: (key?: string) => boolean;
|
|
19
23
|
/** False until the key's first page loaded without failing, so a failed load can be retried; a later failed page never clears it. */
|
|
20
24
|
isLoaded: (key?: string) => boolean;
|
|
@@ -25,6 +29,6 @@ export declare class KeyedCursorDataLoader<T> {
|
|
|
25
29
|
reload: (key?: string) => Promise<void>;
|
|
26
30
|
private startLoad;
|
|
27
31
|
private runLoad;
|
|
28
|
-
private
|
|
32
|
+
private runSideLoad;
|
|
29
33
|
private loaderFor;
|
|
30
34
|
}
|
|
@@ -5,17 +5,20 @@ export class KeyedCursorDataLoader {
|
|
|
5
5
|
_loaded = $state.raw({});
|
|
6
6
|
_pending = {};
|
|
7
7
|
_loadPage;
|
|
8
|
-
|
|
8
|
+
_loadWithFirstPage;
|
|
9
|
+
_resumeAfterFailure;
|
|
9
10
|
constructor(init) {
|
|
10
11
|
this._loadPage = init.loadPage;
|
|
11
|
-
this.
|
|
12
|
+
this._loadWithFirstPage = init.loadWithFirstPage;
|
|
13
|
+
this._resumeAfterFailure = init.resumeAfterFailure ?? false;
|
|
12
14
|
}
|
|
13
15
|
items = (key = '') => this.loaderFor(key).items;
|
|
14
16
|
loading = (key = '') => this.loaderFor(key).loading;
|
|
15
17
|
initialLoading = (key = '') => this.loaderFor(key).initialLoading;
|
|
16
18
|
/** The key's last attempt did not deliver a page, whether it returned nothing or threw; cleared when the next attempt for that key starts. */
|
|
17
19
|
failed = (key = '') => this.loaderFor(key).failed;
|
|
18
|
-
|
|
20
|
+
/** More pages are reachable for the key. Goes false on a failed page unless the loader was built with `resumeAfterFailure`. */
|
|
21
|
+
canLoadMore = (key = '') => this.loaderFor(key).canLoadMore;
|
|
19
22
|
/** False until the key's first page loaded without failing, so a failed load can be retried; a later failed page never clears it. */
|
|
20
23
|
isLoaded = (key = '') => this._loaded[key] === true;
|
|
21
24
|
/** Loads the key's first page once; concurrent and repeat calls share that load's promise. */
|
|
@@ -46,22 +49,25 @@ export class KeyedCursorDataLoader {
|
|
|
46
49
|
};
|
|
47
50
|
runLoad = async (key) => {
|
|
48
51
|
const loader = this.loaderFor(key);
|
|
49
|
-
const
|
|
52
|
+
const sideLoad = this.runSideLoad(key);
|
|
50
53
|
await loader.reset();
|
|
51
54
|
this._loaded = { ...this._loaded, [key]: !loader.failed };
|
|
52
|
-
await
|
|
55
|
+
await sideLoad;
|
|
53
56
|
};
|
|
54
|
-
|
|
57
|
+
runSideLoad = async (key) => {
|
|
55
58
|
try {
|
|
56
|
-
await this.
|
|
59
|
+
await this._loadWithFirstPage?.(key);
|
|
57
60
|
}
|
|
58
61
|
catch (error) {
|
|
59
|
-
console.error('KeyedCursorDataLoader: failed to load
|
|
62
|
+
console.error('KeyedCursorDataLoader: failed to load with the first page', error);
|
|
60
63
|
}
|
|
61
64
|
};
|
|
62
65
|
loaderFor = (key) => {
|
|
63
66
|
if (!this._loaders[key]) {
|
|
64
|
-
this._loaders[key] = new CursorDataLoader({
|
|
67
|
+
this._loaders[key] = new CursorDataLoader({
|
|
68
|
+
loadPage: (continuationToken) => this._loadPage(key, continuationToken),
|
|
69
|
+
resumeAfterFailure: this._resumeAfterFailure
|
|
70
|
+
});
|
|
65
71
|
}
|
|
66
72
|
return this._loaders[key];
|
|
67
73
|
};
|
|
@@ -6,16 +6,21 @@ export declare class PageDataLoader<T> implements IDataLoader<T> {
|
|
|
6
6
|
private _canLoadMore;
|
|
7
7
|
private _perPage;
|
|
8
8
|
private _loadPage;
|
|
9
|
+
private _resumeAfterFailure;
|
|
9
10
|
private _pageNumber;
|
|
10
11
|
private _generation;
|
|
11
12
|
constructor(init: {
|
|
12
13
|
loadPage: (page: number, perPage: number) => Promise<T[]>;
|
|
13
14
|
perPage?: number;
|
|
15
|
+
/** Keep the page number when a page fails, so the next `loadMore` retries it instead of ending the list for good. @default false */
|
|
16
|
+
resumeAfterFailure?: boolean;
|
|
14
17
|
});
|
|
15
18
|
get items(): T[];
|
|
16
19
|
get loading(): boolean;
|
|
17
20
|
get initialLoading(): boolean;
|
|
18
21
|
get failed(): boolean;
|
|
22
|
+
get canLoadMore(): boolean;
|
|
19
23
|
loadMore: () => Promise<T[]>;
|
|
20
24
|
reset: () => Promise<void>;
|
|
25
|
+
private markFailed;
|
|
21
26
|
}
|
|
@@ -5,10 +5,12 @@ export class PageDataLoader {
|
|
|
5
5
|
_canLoadMore = $state(true);
|
|
6
6
|
_perPage = 20;
|
|
7
7
|
_loadPage;
|
|
8
|
+
_resumeAfterFailure;
|
|
8
9
|
_pageNumber = 1;
|
|
9
10
|
_generation = 0;
|
|
10
11
|
constructor(init) {
|
|
11
12
|
this._loadPage = init.loadPage;
|
|
13
|
+
this._resumeAfterFailure = init.resumeAfterFailure ?? false;
|
|
12
14
|
if (init.perPage) {
|
|
13
15
|
this._perPage = init.perPage;
|
|
14
16
|
}
|
|
@@ -25,6 +27,9 @@ export class PageDataLoader {
|
|
|
25
27
|
get failed() {
|
|
26
28
|
return this._failed;
|
|
27
29
|
}
|
|
30
|
+
get canLoadMore() {
|
|
31
|
+
return this._canLoadMore;
|
|
32
|
+
}
|
|
28
33
|
loadMore = async () => {
|
|
29
34
|
if (this._loading || !this._canLoadMore) {
|
|
30
35
|
return [];
|
|
@@ -46,7 +51,7 @@ export class PageDataLoader {
|
|
|
46
51
|
catch (error) {
|
|
47
52
|
console.error('PageDataLoader: failed to load page', error);
|
|
48
53
|
if (generation === this._generation) {
|
|
49
|
-
this.
|
|
54
|
+
this.markFailed();
|
|
50
55
|
}
|
|
51
56
|
return [];
|
|
52
57
|
}
|
|
@@ -64,4 +69,10 @@ export class PageDataLoader {
|
|
|
64
69
|
this._canLoadMore = true;
|
|
65
70
|
await this.loadMore();
|
|
66
71
|
};
|
|
72
|
+
markFailed = () => {
|
|
73
|
+
this._failed = true;
|
|
74
|
+
if (!this._resumeAfterFailure) {
|
|
75
|
+
this._canLoadMore = false;
|
|
76
|
+
}
|
|
77
|
+
};
|
|
67
78
|
}
|
|
@@ -1,5 +1,9 @@
|
|
|
1
|
-
<script lang="ts">import {
|
|
2
|
-
|
|
1
|
+
<script lang="ts">import { Button } from '../button';
|
|
2
|
+
import { Spinner } from '../spinner';
|
|
3
|
+
import { InfiniteScrollLocalization } from './infinite-scroll-localization';
|
|
4
|
+
let { loadMore, container = null, rootMargin = '200px', children, loading, retry } = $props();
|
|
5
|
+
const localization = new InfiniteScrollLocalization();
|
|
6
|
+
const source = $derived(typeof loadMore === 'function' ? { loadMore, failed: false, canLoadMore: true } : loadMore);
|
|
3
7
|
let isLoading = $state(false);
|
|
4
8
|
let paginationTrigger = $state(null);
|
|
5
9
|
let itemsContainer = $state(null);
|
|
@@ -11,7 +15,8 @@ $effect(() => {
|
|
|
11
15
|
const items = itemsContainer;
|
|
12
16
|
const intersectionObserver = new IntersectionObserver((e) => {
|
|
13
17
|
const [entries] = e;
|
|
14
|
-
|
|
18
|
+
// an armed sentinel over a failing backend retries in a loop — the manual control is the only way on from here
|
|
19
|
+
if (entries.isIntersecting && !source.failed) {
|
|
15
20
|
void onLoadMore();
|
|
16
21
|
}
|
|
17
22
|
}, {
|
|
@@ -36,12 +41,15 @@ const onLoadMore = async () => {
|
|
|
36
41
|
}
|
|
37
42
|
isLoading = true;
|
|
38
43
|
try {
|
|
39
|
-
await loadMore();
|
|
44
|
+
await source.loadMore();
|
|
40
45
|
}
|
|
41
46
|
finally {
|
|
42
47
|
isLoading = false;
|
|
43
48
|
}
|
|
44
49
|
};
|
|
50
|
+
const onRetry = () => {
|
|
51
|
+
void onLoadMore();
|
|
52
|
+
};
|
|
45
53
|
</script>
|
|
46
54
|
|
|
47
55
|
<div class="infinite-scroll">
|
|
@@ -58,6 +66,14 @@ const onLoadMore = async () => {
|
|
|
58
66
|
<Spinner timeout={500} />
|
|
59
67
|
</div>
|
|
60
68
|
{/if}
|
|
69
|
+
{:else if source.failed && source.canLoadMore}
|
|
70
|
+
{#if retry}
|
|
71
|
+
{@render retry(onRetry)}
|
|
72
|
+
{:else}
|
|
73
|
+
<div class="infinite-scroll__retry">
|
|
74
|
+
<Button type="button" variant="secondary" size="sm" on={{ click: onRetry }}>{localization.loadMore}</Button>
|
|
75
|
+
</div>
|
|
76
|
+
{/if}
|
|
61
77
|
{/if}
|
|
62
78
|
</div>
|
|
63
79
|
|
|
@@ -67,6 +83,8 @@ Triggers an async `loadMore` callback when a sentinel element scrolls into view,
|
|
|
67
83
|
|
|
68
84
|
Pairs with `core/data-loaders` (`CursorDataLoader`, `PageDataLoader`, `CursorDataLoaderWithSearch`) — wire `loadMore={loader.loadMore}` and `{#each loader.items as item}` directly.
|
|
69
85
|
|
|
86
|
+
Passing the loader itself — `loadMore={loader}` instead of `loadMore={loader.loadMore}` — disarms the sentinel while the loader reports `failed`, so a failing backend is not asked again on its own and the already-loaded list is kept. The manual continue appears only when the loader can still continue (`resumeAfterFailure`); a loader that closed its list on the failure ends silently, as it does at the natural end. A successful retry re-arms the sentinel on its own.
|
|
87
|
+
|
|
70
88
|
### CSS Custom Properties
|
|
71
89
|
| Property | Description | Default |
|
|
72
90
|
|---|---|---|
|
|
@@ -100,4 +118,9 @@ Pairs with `core/data-loaders` (`CursorDataLoader`, `PageDataLoader`, `CursorDat
|
|
|
100
118
|
bottom: 0.3125em;
|
|
101
119
|
left: 50%;
|
|
102
120
|
transform: translateX(-50%);
|
|
121
|
+
}
|
|
122
|
+
.infinite-scroll__retry {
|
|
123
|
+
display: flex;
|
|
124
|
+
justify-content: center;
|
|
125
|
+
padding: var(--sc-kit--space--3) 0;
|
|
103
126
|
}</style>
|
|
@@ -1,7 +1,16 @@
|
|
|
1
|
+
import type { LoadMoreSource } from './types';
|
|
1
2
|
import type { Snippet } from 'svelte';
|
|
2
3
|
type Props = {
|
|
3
|
-
/**
|
|
4
|
-
|
|
4
|
+
/**
|
|
5
|
+
* Where the next batch comes from. Either an async callback invoked when the sentinel becomes visible — it should resolve once the batch is appended
|
|
6
|
+
* (or no-op when there are no more items — `CursorDataLoader.loadMore` already returns `[]` in that case) — or a data loader, whose `failed` then also
|
|
7
|
+
* stops the sentinel from firing on its own and offers a manual continue instead.
|
|
8
|
+
*
|
|
9
|
+
* The object form must report `failed` and `canLoadMore` reactively: pass the loader itself, or an object literal rebuilt by the surrounding reactive
|
|
10
|
+
* scope (`{ loadMore: () => l.loadMore(key), failed: l.failed(key), canLoadMore: l.canLoadMore(key) }`). A plain object holding fixed values type-checks
|
|
11
|
+
* and leaves the sentinel armed through every failure.
|
|
12
|
+
*/
|
|
13
|
+
loadMore: LoadMoreSource;
|
|
5
14
|
/** Scroll ancestor used as the IntersectionObserver root. Required when the viewport differs from the scrolling container. */
|
|
6
15
|
container?: HTMLElement | null;
|
|
7
16
|
/** IntersectionObserver `rootMargin`. Default `'200px'` — fires the load a viewport-screen before reaching the bottom. */
|
|
@@ -9,12 +18,16 @@ type Props = {
|
|
|
9
18
|
children: Snippet;
|
|
10
19
|
/** Custom loading indicator snippet. Defaults to the kit `Spinner`. */
|
|
11
20
|
loading?: Snippet;
|
|
21
|
+
/** Manual continue shown while `failed`, taking the callback that retries the failed page. Defaults to a kit `Button`. */
|
|
22
|
+
retry?: Snippet<[() => void]>;
|
|
12
23
|
};
|
|
13
24
|
/**
|
|
14
25
|
* Triggers an async `loadMore` callback when a sentinel element scrolls into view, using IntersectionObserver. Re-observes the sentinel on container resize so layout shifts inside the parent re-evaluate visibility (a known IntersectionObserver gotcha). Internal `isLoading` guard prevents overlapping fires while a load is in flight.
|
|
15
26
|
*
|
|
16
27
|
* Pairs with `core/data-loaders` (`CursorDataLoader`, `PageDataLoader`, `CursorDataLoaderWithSearch`) — wire `loadMore={loader.loadMore}` and `{#each loader.items as item}` directly.
|
|
17
28
|
*
|
|
29
|
+
* Passing the loader itself — `loadMore={loader}` instead of `loadMore={loader.loadMore}` — disarms the sentinel while the loader reports `failed`, so a failing backend is not asked again on its own and the already-loaded list is kept. The manual continue appears only when the loader can still continue (`resumeAfterFailure`); a loader that closed its list on the failure ends silently, as it does at the natural end. A successful retry re-arms the sentinel on its own.
|
|
30
|
+
*
|
|
18
31
|
* ### CSS Custom Properties
|
|
19
32
|
* | Property | Description | Default |
|
|
20
33
|
* |---|---|---|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -18,6 +18,5 @@ export declare class PlayerChunksManager<TItem extends WithId, TChunk extends Wi
|
|
|
18
18
|
setActiveChunkIndex: (index: number, chunkItemIndex: number) => Promise<void>;
|
|
19
19
|
activateItemAtFlattenedIndex: (index: number) => Promise<void>;
|
|
20
20
|
warmUp: () => Promise<void>;
|
|
21
|
-
reset: () => Promise<void>;
|
|
22
21
|
private warmUpSequentially;
|
|
23
22
|
}
|
|
@@ -163,14 +163,7 @@ export class PlayerChunksManager {
|
|
|
163
163
|
this._warmUpDeferred = null;
|
|
164
164
|
}
|
|
165
165
|
};
|
|
166
|
-
reset = async () => {
|
|
167
|
-
this._activeChunkIndex = -1;
|
|
168
|
-
this._loadedChunks = [];
|
|
169
|
-
this._warmUpDeferred = null;
|
|
170
|
-
await this.warmUp();
|
|
171
|
-
};
|
|
172
166
|
warmUpSequentially = async () => {
|
|
173
|
-
const startChunkIndex = Math.max(0, this._activeChunkIndex);
|
|
174
167
|
// Calculate how many items we need ahead of current position
|
|
175
168
|
const getItemsAhead = () => {
|
|
176
169
|
const currentFlatIndex = this.flattenedActiveChunkItemIndex;
|
|
@@ -179,6 +172,7 @@ export class PlayerChunksManager {
|
|
|
179
172
|
};
|
|
180
173
|
while (getItemsAhead() < ITEMS_BUFFER_SIZE) {
|
|
181
174
|
// Find first non-fully-loaded chunk starting from active
|
|
175
|
+
const startChunkIndex = Math.max(0, this._activeChunkIndex);
|
|
182
176
|
let targetChunkIndex = -1;
|
|
183
177
|
for (let i = startChunkIndex; i < this._loadedChunks.length; i++) {
|
|
184
178
|
if (this._loadedChunks[i].canLoadMore) {
|
|
@@ -62,9 +62,6 @@ export class DefaultChunksPlayerBuffer {
|
|
|
62
62
|
}
|
|
63
63
|
this._playerChunksManager.activateItemAtFlattenedIndex(this.currentIndex - 1);
|
|
64
64
|
};
|
|
65
|
-
reset = () => {
|
|
66
|
-
this._playerChunksManager.reset();
|
|
67
|
-
};
|
|
68
65
|
ensureWarmedUp = async () => {
|
|
69
66
|
await this._playerChunksManager.warmUp();
|
|
70
67
|
};
|
|
@@ -34,7 +34,6 @@ export interface IPlayerBufferBase<T extends WithId> {
|
|
|
34
34
|
readonly animationDuration: number;
|
|
35
35
|
loadNext: () => void;
|
|
36
36
|
loadPrevious: () => void;
|
|
37
|
-
reset: () => void;
|
|
38
37
|
ensureWarmedUp: () => Promise<void>;
|
|
39
38
|
tryActivateItemById: (id: string) => boolean;
|
|
40
39
|
removeItemById: (id: string) => void;
|
|
@@ -44,6 +43,8 @@ type TExtended<T> = T & {
|
|
|
44
43
|
};
|
|
45
44
|
export interface IFeedPlayerBuffer<T extends WithId> extends IPlayerBufferBase<T> {
|
|
46
45
|
readonly kind: 'feed';
|
|
46
|
+
/** Drops the buffered feed and loads it again from the start. */
|
|
47
|
+
reset: () => void;
|
|
47
48
|
}
|
|
48
49
|
export interface IChunksPlayerBuffer<T extends WithId> extends IPlayerBufferBase<T> {
|
|
49
50
|
readonly kind: 'chunks';
|