xxf_react 0.5.4 → 0.5.6
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.
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
*
|
|
4
4
|
* 支持多 Tab / 多页面场景,全局只有一个视频在播放。
|
|
5
5
|
*
|
|
6
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
7
|
+
*
|
|
6
8
|
* @module playback-queue-store
|
|
7
9
|
* @see {@link ./playback-queue-store.md} 详细文档
|
|
8
10
|
*/
|
|
@@ -11,6 +13,8 @@
|
|
|
11
13
|
*
|
|
12
14
|
* 每个 source 代表一个独立的播放列表,通常对应一个 Tab 或页面。
|
|
13
15
|
*
|
|
16
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
17
|
+
*
|
|
14
18
|
* @example
|
|
15
19
|
* ```ts
|
|
16
20
|
* const homeSource: SourceData = {
|
|
@@ -24,6 +28,8 @@ interface SourceData {
|
|
|
24
28
|
*
|
|
25
29
|
* - 有序数组,决定播放顺序
|
|
26
30
|
* - ID 应该是唯一的字符串标识符
|
|
31
|
+
*
|
|
32
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
27
33
|
*/
|
|
28
34
|
itemIds: string[];
|
|
29
35
|
}
|
|
@@ -32,6 +38,8 @@ interface SourceData {
|
|
|
32
38
|
*
|
|
33
39
|
* 核心状态结构,包含所有 source 的数据和当前播放状态。
|
|
34
40
|
*
|
|
41
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
42
|
+
*
|
|
35
43
|
* @example
|
|
36
44
|
* ```ts
|
|
37
45
|
* const state: PlaybackQueueState = {
|
|
@@ -53,6 +61,8 @@ interface PlaybackQueueState {
|
|
|
53
61
|
*
|
|
54
62
|
* key: source 名称(如 'home', 'community', 'detail-123')
|
|
55
63
|
* value: 该 source 的数据
|
|
64
|
+
*
|
|
65
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
56
66
|
*/
|
|
57
67
|
sources: Record<string, SourceData>;
|
|
58
68
|
/**
|
|
@@ -61,6 +71,8 @@ interface PlaybackQueueState {
|
|
|
61
71
|
* 用于 `playById` 快速查找某个 ID 属于哪个 source。
|
|
62
72
|
* 复杂度从 O(n*m) 降低到 O(1)。
|
|
63
73
|
*
|
|
74
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
75
|
+
*
|
|
64
76
|
* @internal 内部使用,自动维护
|
|
65
77
|
*/
|
|
66
78
|
itemIdToSource: Record<string, string>;
|
|
@@ -69,6 +81,8 @@ interface PlaybackQueueState {
|
|
|
69
81
|
*
|
|
70
82
|
* - 播放、next、prev 操作都在此 source 内进行
|
|
71
83
|
* - 为 null 表示没有激活的 source
|
|
84
|
+
*
|
|
85
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
72
86
|
*/
|
|
73
87
|
activeSource: string | null;
|
|
74
88
|
/**
|
|
@@ -76,11 +90,15 @@ interface PlaybackQueueState {
|
|
|
76
90
|
*
|
|
77
91
|
* - 全局唯一,保证同一时间只有一个视频在播放
|
|
78
92
|
* - 为 null 表示没有视频在播放
|
|
93
|
+
*
|
|
94
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
79
95
|
*/
|
|
80
96
|
currentId: string | null;
|
|
81
97
|
/**
|
|
82
98
|
* 是否静音
|
|
83
99
|
*
|
|
100
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
101
|
+
*
|
|
84
102
|
* @default true(默认静音,符合浏览器自动播放策略)
|
|
85
103
|
*/
|
|
86
104
|
muted: boolean;
|
|
@@ -90,6 +108,8 @@ interface PlaybackQueueState {
|
|
|
90
108
|
* - true: 播放到最后一个后自动回到第一个
|
|
91
109
|
* - false: 播放到最后一个后停止
|
|
92
110
|
*
|
|
111
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
112
|
+
*
|
|
93
113
|
* @default true
|
|
94
114
|
*/
|
|
95
115
|
loop: boolean;
|
|
@@ -98,6 +118,8 @@ interface PlaybackQueueState {
|
|
|
98
118
|
* 播放队列操作方法接口
|
|
99
119
|
*
|
|
100
120
|
* 定义所有可用的操作方法。
|
|
121
|
+
*
|
|
122
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
101
123
|
*/
|
|
102
124
|
interface PlaybackQueueActions {
|
|
103
125
|
/**
|
|
@@ -105,6 +127,8 @@ interface PlaybackQueueActions {
|
|
|
105
127
|
*
|
|
106
128
|
* 用于初始化或更新某个 Tab/页面的播放列表。
|
|
107
129
|
*
|
|
130
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
131
|
+
*
|
|
108
132
|
* @param source - source 名称,建议使用有意义的标识符
|
|
109
133
|
* - 'home' - 首页
|
|
110
134
|
* - 'community' - 社区页
|
|
@@ -131,6 +155,8 @@ interface PlaybackQueueActions {
|
|
|
131
155
|
*
|
|
132
156
|
* 用于滚动加载场景,追加新数据时不影响当前播放状态。
|
|
133
157
|
*
|
|
158
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
159
|
+
*
|
|
134
160
|
* @param source - source 名称
|
|
135
161
|
* @param ids - 要追加的项目 ID 列表,会自动去重
|
|
136
162
|
*
|
|
@@ -151,6 +177,8 @@ interface PlaybackQueueActions {
|
|
|
151
177
|
* 用于页面卸载时清理数据,防止内存泄漏。
|
|
152
178
|
* 如果移除的是当前激活的 source,会自动停止播放。
|
|
153
179
|
*
|
|
180
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
181
|
+
*
|
|
154
182
|
* @param source - 要移除的 source 名称
|
|
155
183
|
*
|
|
156
184
|
* @example
|
|
@@ -168,6 +196,8 @@ interface PlaybackQueueActions {
|
|
|
168
196
|
*
|
|
169
197
|
* 会自动切换 activeSource 到指定的 source。
|
|
170
198
|
*
|
|
199
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
200
|
+
*
|
|
171
201
|
* @param source - source 名称
|
|
172
202
|
* @param id - 项目 ID
|
|
173
203
|
*
|
|
@@ -188,6 +218,8 @@ interface PlaybackQueueActions {
|
|
|
188
218
|
* 优先在当前 activeSource 中查找,找不到则通过反向索引查找。
|
|
189
219
|
* 适用于不关心具体 source 的场景。
|
|
190
220
|
*
|
|
221
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
222
|
+
*
|
|
191
223
|
* @param id - 项目 ID
|
|
192
224
|
*
|
|
193
225
|
* @example
|
|
@@ -209,6 +241,8 @@ interface PlaybackQueueActions {
|
|
|
209
241
|
* - loop=true: 回到第一个
|
|
210
242
|
* - loop=false: 停止播放(currentId 变为 null)
|
|
211
243
|
*
|
|
244
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
245
|
+
*
|
|
212
246
|
* @example
|
|
213
247
|
* ```tsx
|
|
214
248
|
* const { next } = usePlaybackActions()
|
|
@@ -225,6 +259,8 @@ interface PlaybackQueueActions {
|
|
|
225
259
|
* - loop=true: 跳到最后一个
|
|
226
260
|
* - loop=false: 停止播放
|
|
227
261
|
*
|
|
262
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
263
|
+
*
|
|
228
264
|
* @example
|
|
229
265
|
* ```tsx
|
|
230
266
|
* const { prev } = usePlaybackActions()
|
|
@@ -238,6 +274,8 @@ interface PlaybackQueueActions {
|
|
|
238
274
|
*
|
|
239
275
|
* 将 currentId 设为 null,但保留 activeSource。
|
|
240
276
|
*
|
|
277
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
278
|
+
*
|
|
241
279
|
* @example
|
|
242
280
|
* ```tsx
|
|
243
281
|
* const { stop } = usePlaybackActions()
|
|
@@ -251,6 +289,8 @@ interface PlaybackQueueActions {
|
|
|
251
289
|
*
|
|
252
290
|
* 应在视频的 onEnded 事件中调用,会自动播放下一个。
|
|
253
291
|
*
|
|
292
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
293
|
+
*
|
|
254
294
|
* @example
|
|
255
295
|
* ```tsx
|
|
256
296
|
* const { onEnded } = usePlaybackActions()
|
|
@@ -262,6 +302,8 @@ interface PlaybackQueueActions {
|
|
|
262
302
|
/**
|
|
263
303
|
* 设置静音状态
|
|
264
304
|
*
|
|
305
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
306
|
+
*
|
|
265
307
|
* @param muted - true 静音,false 取消静音
|
|
266
308
|
*
|
|
267
309
|
* @example
|
|
@@ -276,6 +318,8 @@ interface PlaybackQueueActions {
|
|
|
276
318
|
/**
|
|
277
319
|
* 切换静音状态
|
|
278
320
|
*
|
|
321
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
322
|
+
*
|
|
279
323
|
* @example
|
|
280
324
|
* ```tsx
|
|
281
325
|
* const { toggleMute } = usePlaybackActions()
|
|
@@ -290,6 +334,8 @@ interface PlaybackQueueActions {
|
|
|
290
334
|
/**
|
|
291
335
|
* 设置循环播放
|
|
292
336
|
*
|
|
337
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
338
|
+
*
|
|
293
339
|
* @param loop - true 循环播放,false 播完停止
|
|
294
340
|
*
|
|
295
341
|
* @example
|
|
@@ -306,6 +352,8 @@ interface PlaybackQueueActions {
|
|
|
306
352
|
* 将状态恢复到初始值,清空所有 source 和播放状态。
|
|
307
353
|
* 通常用于用户登出或需要完全重置的场景。
|
|
308
354
|
*
|
|
355
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
356
|
+
*
|
|
309
357
|
* @example
|
|
310
358
|
* ```tsx
|
|
311
359
|
* const { reset } = usePlaybackActions()
|
|
@@ -323,6 +371,8 @@ interface PlaybackQueueActions {
|
|
|
323
371
|
* 播放队列 Store 完整类型
|
|
324
372
|
*
|
|
325
373
|
* 包含状态和操作方法。
|
|
374
|
+
*
|
|
375
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
326
376
|
*/
|
|
327
377
|
type PlaybackQueueStore = PlaybackQueueState & PlaybackQueueActions;
|
|
328
378
|
/**
|
|
@@ -330,6 +380,8 @@ type PlaybackQueueStore = PlaybackQueueState & PlaybackQueueActions;
|
|
|
330
380
|
*
|
|
331
381
|
* 使用 `subscribeWithSelector` 中间件支持选择性订阅。
|
|
332
382
|
*
|
|
383
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
384
|
+
*
|
|
333
385
|
* @example
|
|
334
386
|
* ```tsx
|
|
335
387
|
* // 直接使用 store(不推荐,建议使用封装的 hooks)
|
|
@@ -351,6 +403,8 @@ export declare const usePlaybackQueueStore: import("zustand").UseBoundStore<Omit
|
|
|
351
403
|
* 使用 shallow 比较,避免不必要的重渲染。
|
|
352
404
|
* 返回的方法引用稳定,可以安全地用作依赖项。
|
|
353
405
|
*
|
|
406
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
407
|
+
*
|
|
354
408
|
* @returns 所有操作方法
|
|
355
409
|
*
|
|
356
410
|
* @example
|
|
@@ -376,6 +430,8 @@ export declare function usePlaybackActions(): PlaybackQueueActions;
|
|
|
376
430
|
* 选择性订阅,只有当该项目的播放状态变化时才会重渲染。
|
|
377
431
|
* 这是性能最优的播放状态判断方式。
|
|
378
432
|
*
|
|
433
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
434
|
+
*
|
|
379
435
|
* @param id - 项目 ID
|
|
380
436
|
* @returns 是否正在播放
|
|
381
437
|
*
|
|
@@ -394,6 +450,8 @@ export declare function usePlaybackIsPlaying(id: string): boolean;
|
|
|
394
450
|
/**
|
|
395
451
|
* 获取静音状态
|
|
396
452
|
*
|
|
453
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
454
|
+
*
|
|
397
455
|
* @returns 是否静音
|
|
398
456
|
*
|
|
399
457
|
* @example
|
|
@@ -407,6 +465,8 @@ export declare function usePlaybackMuted(): boolean;
|
|
|
407
465
|
/**
|
|
408
466
|
* 获取当前播放的项目 ID
|
|
409
467
|
*
|
|
468
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
469
|
+
*
|
|
410
470
|
* @returns 当前播放的 ID,没有播放时为 null
|
|
411
471
|
*
|
|
412
472
|
* @example
|
|
@@ -422,6 +482,8 @@ export declare function usePlaybackCurrentId(): string | null;
|
|
|
422
482
|
/**
|
|
423
483
|
* 获取当前激活的 source 名称
|
|
424
484
|
*
|
|
485
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
486
|
+
*
|
|
425
487
|
* @returns source 名称,没有激活时为 null
|
|
426
488
|
*
|
|
427
489
|
* @example
|
|
@@ -436,6 +498,8 @@ export declare function usePlaybackActiveSource(): string | null;
|
|
|
436
498
|
/**
|
|
437
499
|
* 获取循环播放状态
|
|
438
500
|
*
|
|
501
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
502
|
+
*
|
|
439
503
|
* @returns 是否循环播放
|
|
440
504
|
*
|
|
441
505
|
* @example
|
|
@@ -452,6 +516,8 @@ export declare function usePlaybackLoop(): boolean;
|
|
|
452
516
|
/**
|
|
453
517
|
* 获取指定 source 的项目 ID 列表
|
|
454
518
|
*
|
|
519
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
520
|
+
*
|
|
455
521
|
* @param source - source 名称
|
|
456
522
|
* @returns 项目 ID 列表,source 不存在时返回空数组
|
|
457
523
|
*
|
|
@@ -468,6 +534,8 @@ export declare function usePlaybackSourceItems(source: string): string[];
|
|
|
468
534
|
*
|
|
469
535
|
* 使用 shallow 比较,仅当 isPlaying 或 muted 变化时重渲染。
|
|
470
536
|
*
|
|
537
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
538
|
+
*
|
|
471
539
|
* @param id - 项目 ID
|
|
472
540
|
* @returns { isPlaying: boolean, muted: boolean }
|
|
473
541
|
*
|
|
@@ -499,6 +567,8 @@ export declare function usePlaybackItemState(id: string): {
|
|
|
499
567
|
* - 不在 React 组件中的场景
|
|
500
568
|
* - 需要命令式调用的场景
|
|
501
569
|
*
|
|
570
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
571
|
+
*
|
|
502
572
|
* @example
|
|
503
573
|
* ```tsx
|
|
504
574
|
* // 在事件回调中使用
|
|
@@ -525,90 +595,120 @@ export declare const PlaybackQueue: {
|
|
|
525
595
|
/**
|
|
526
596
|
* 获取当前状态快照(非响应式)
|
|
527
597
|
*
|
|
598
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
599
|
+
*
|
|
528
600
|
* @returns 当前完整状态
|
|
529
601
|
*/
|
|
530
602
|
readonly getState: () => PlaybackQueueState;
|
|
531
603
|
/**
|
|
532
604
|
* 设置某个 source 的播放列表
|
|
533
605
|
*
|
|
606
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
607
|
+
*
|
|
534
608
|
* @see {@link PlaybackQueueActions.setSource}
|
|
535
609
|
*/
|
|
536
610
|
readonly setSource: (source: string, ids: string[], autoPlay?: boolean | undefined) => void;
|
|
537
611
|
/**
|
|
538
612
|
* 向某个 source 追加项目
|
|
539
613
|
*
|
|
614
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
615
|
+
*
|
|
540
616
|
* @see {@link PlaybackQueueActions.appendToSource}
|
|
541
617
|
*/
|
|
542
618
|
readonly appendToSource: (source: string, ids: string[]) => void;
|
|
543
619
|
/**
|
|
544
620
|
* 移除某个 source
|
|
545
621
|
*
|
|
622
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
623
|
+
*
|
|
546
624
|
* @see {@link PlaybackQueueActions.removeSource}
|
|
547
625
|
*/
|
|
548
626
|
readonly removeSource: (source: string) => void;
|
|
549
627
|
/**
|
|
550
628
|
* 播放指定项目
|
|
551
629
|
*
|
|
630
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
631
|
+
*
|
|
552
632
|
* @see {@link PlaybackQueueActions.play}
|
|
553
633
|
*/
|
|
554
634
|
readonly play: (source: string, id: string) => void;
|
|
555
635
|
/**
|
|
556
636
|
* 播放指定项目(自动查找 source)
|
|
557
637
|
*
|
|
638
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
639
|
+
*
|
|
558
640
|
* @see {@link PlaybackQueueActions.playById}
|
|
559
641
|
*/
|
|
560
642
|
readonly playById: (id: string) => void;
|
|
561
643
|
/**
|
|
562
644
|
* 播放下一个
|
|
563
645
|
*
|
|
646
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
647
|
+
*
|
|
564
648
|
* @see {@link PlaybackQueueActions.next}
|
|
565
649
|
*/
|
|
566
650
|
readonly next: () => void;
|
|
567
651
|
/**
|
|
568
652
|
* 播放上一个
|
|
569
653
|
*
|
|
654
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
655
|
+
*
|
|
570
656
|
* @see {@link PlaybackQueueActions.prev}
|
|
571
657
|
*/
|
|
572
658
|
readonly prev: () => void;
|
|
573
659
|
/**
|
|
574
660
|
* 停止播放
|
|
575
661
|
*
|
|
662
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
663
|
+
*
|
|
576
664
|
* @see {@link PlaybackQueueActions.stop}
|
|
577
665
|
*/
|
|
578
666
|
readonly stop: () => void;
|
|
579
667
|
/**
|
|
580
668
|
* 播放完成回调
|
|
581
669
|
*
|
|
670
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
671
|
+
*
|
|
582
672
|
* @see {@link PlaybackQueueActions.onEnded}
|
|
583
673
|
*/
|
|
584
674
|
readonly onEnded: () => void;
|
|
585
675
|
/**
|
|
586
676
|
* 设置静音状态
|
|
587
677
|
*
|
|
678
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
679
|
+
*
|
|
588
680
|
* @see {@link PlaybackQueueActions.setMuted}
|
|
589
681
|
*/
|
|
590
682
|
readonly setMuted: (muted: boolean) => void;
|
|
591
683
|
/**
|
|
592
684
|
* 切换静音状态
|
|
593
685
|
*
|
|
686
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
687
|
+
*
|
|
594
688
|
* @see {@link PlaybackQueueActions.toggleMute}
|
|
595
689
|
*/
|
|
596
690
|
readonly toggleMute: () => void;
|
|
597
691
|
/**
|
|
598
692
|
* 设置循环播放
|
|
599
693
|
*
|
|
694
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
695
|
+
*
|
|
600
696
|
* @see {@link PlaybackQueueActions.setLoop}
|
|
601
697
|
*/
|
|
602
698
|
readonly setLoop: (loop: boolean) => void;
|
|
603
699
|
/**
|
|
604
700
|
* 重置所有状态
|
|
605
701
|
*
|
|
702
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
703
|
+
*
|
|
606
704
|
* @see {@link PlaybackQueueActions.reset}
|
|
607
705
|
*/
|
|
608
706
|
readonly reset: () => void;
|
|
609
707
|
/**
|
|
610
708
|
* 订阅当前播放 ID 变化
|
|
611
709
|
*
|
|
710
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
711
|
+
*
|
|
612
712
|
* @param callback - 回调函数,参数为 (新值, 旧值)
|
|
613
713
|
* @returns 取消订阅函数
|
|
614
714
|
*
|
|
@@ -626,6 +726,8 @@ export declare const PlaybackQueue: {
|
|
|
626
726
|
/**
|
|
627
727
|
* 订阅 activeSource 变化
|
|
628
728
|
*
|
|
729
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
730
|
+
*
|
|
629
731
|
* @param callback - 回调函数,参数为 (新值, 旧值)
|
|
630
732
|
* @returns 取消订阅函数
|
|
631
733
|
*/
|
|
@@ -633,6 +735,8 @@ export declare const PlaybackQueue: {
|
|
|
633
735
|
/**
|
|
634
736
|
* 订阅静音状态变化
|
|
635
737
|
*
|
|
738
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
739
|
+
*
|
|
636
740
|
* @param callback - 回调函数,参数为 (新值, 旧值)
|
|
637
741
|
* @returns 取消订阅函数
|
|
638
742
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"playback-queue-store.d.ts","sourceRoot":"","sources":["../../src/media/playback-queue-store.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"playback-queue-store.d.ts","sourceRoot":"","sources":["../../src/media/playback-queue-store.ts"],"names":[],"mappings":"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"}
|
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
*
|
|
4
4
|
* 支持多 Tab / 多页面场景,全局只有一个视频在播放。
|
|
5
5
|
*
|
|
6
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
7
|
+
*
|
|
6
8
|
* @module playback-queue-store
|
|
7
9
|
* @see {@link ./playback-queue-store.md} 详细文档
|
|
8
10
|
*/
|
|
@@ -61,6 +63,8 @@ function updateReverseIndexForSource(currentIndex, sourceName, oldIds, newIds) {
|
|
|
61
63
|
*
|
|
62
64
|
* 使用 `subscribeWithSelector` 中间件支持选择性订阅。
|
|
63
65
|
*
|
|
66
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
67
|
+
*
|
|
64
68
|
* @example
|
|
65
69
|
* ```tsx
|
|
66
70
|
* // 直接使用 store(不推荐,建议使用封装的 hooks)
|
|
@@ -306,6 +310,8 @@ const selectLoop = (state) => state.loop;
|
|
|
306
310
|
* 使用 shallow 比较,避免不必要的重渲染。
|
|
307
311
|
* 返回的方法引用稳定,可以安全地用作依赖项。
|
|
308
312
|
*
|
|
313
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
314
|
+
*
|
|
309
315
|
* @returns 所有操作方法
|
|
310
316
|
*
|
|
311
317
|
* @example
|
|
@@ -333,6 +339,8 @@ export function usePlaybackActions() {
|
|
|
333
339
|
* 选择性订阅,只有当该项目的播放状态变化时才会重渲染。
|
|
334
340
|
* 这是性能最优的播放状态判断方式。
|
|
335
341
|
*
|
|
342
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
343
|
+
*
|
|
336
344
|
* @param id - 项目 ID
|
|
337
345
|
* @returns 是否正在播放
|
|
338
346
|
*
|
|
@@ -353,6 +361,8 @@ export function usePlaybackIsPlaying(id) {
|
|
|
353
361
|
/**
|
|
354
362
|
* 获取静音状态
|
|
355
363
|
*
|
|
364
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
365
|
+
*
|
|
356
366
|
* @returns 是否静音
|
|
357
367
|
*
|
|
358
368
|
* @example
|
|
@@ -368,6 +378,8 @@ export function usePlaybackMuted() {
|
|
|
368
378
|
/**
|
|
369
379
|
* 获取当前播放的项目 ID
|
|
370
380
|
*
|
|
381
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
382
|
+
*
|
|
371
383
|
* @returns 当前播放的 ID,没有播放时为 null
|
|
372
384
|
*
|
|
373
385
|
* @example
|
|
@@ -385,6 +397,8 @@ export function usePlaybackCurrentId() {
|
|
|
385
397
|
/**
|
|
386
398
|
* 获取当前激活的 source 名称
|
|
387
399
|
*
|
|
400
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
401
|
+
*
|
|
388
402
|
* @returns source 名称,没有激活时为 null
|
|
389
403
|
*
|
|
390
404
|
* @example
|
|
@@ -401,6 +415,8 @@ export function usePlaybackActiveSource() {
|
|
|
401
415
|
/**
|
|
402
416
|
* 获取循环播放状态
|
|
403
417
|
*
|
|
418
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
419
|
+
*
|
|
404
420
|
* @returns 是否循环播放
|
|
405
421
|
*
|
|
406
422
|
* @example
|
|
@@ -419,6 +435,8 @@ export function usePlaybackLoop() {
|
|
|
419
435
|
/**
|
|
420
436
|
* 获取指定 source 的项目 ID 列表
|
|
421
437
|
*
|
|
438
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
439
|
+
*
|
|
422
440
|
* @param source - source 名称
|
|
423
441
|
* @returns 项目 ID 列表,source 不存在时返回空数组
|
|
424
442
|
*
|
|
@@ -437,6 +455,8 @@ export function usePlaybackSourceItems(source) {
|
|
|
437
455
|
*
|
|
438
456
|
* 使用 shallow 比较,仅当 isPlaying 或 muted 变化时重渲染。
|
|
439
457
|
*
|
|
458
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
459
|
+
*
|
|
440
460
|
* @param id - 项目 ID
|
|
441
461
|
* @returns { isPlaying: boolean, muted: boolean }
|
|
442
462
|
*
|
|
@@ -473,6 +493,8 @@ export function usePlaybackItemState(id) {
|
|
|
473
493
|
* - 不在 React 组件中的场景
|
|
474
494
|
* - 需要命令式调用的场景
|
|
475
495
|
*
|
|
496
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
497
|
+
*
|
|
476
498
|
* @example
|
|
477
499
|
* ```tsx
|
|
478
500
|
* // 在事件回调中使用
|
|
@@ -499,90 +521,120 @@ export const PlaybackQueue = {
|
|
|
499
521
|
/**
|
|
500
522
|
* 获取当前状态快照(非响应式)
|
|
501
523
|
*
|
|
524
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
525
|
+
*
|
|
502
526
|
* @returns 当前完整状态
|
|
503
527
|
*/
|
|
504
528
|
getState: () => usePlaybackQueueStore.getState(),
|
|
505
529
|
/**
|
|
506
530
|
* 设置某个 source 的播放列表
|
|
507
531
|
*
|
|
532
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
533
|
+
*
|
|
508
534
|
* @see {@link PlaybackQueueActions.setSource}
|
|
509
535
|
*/
|
|
510
536
|
setSource: (...args) => usePlaybackQueueStore.getState().setSource(...args),
|
|
511
537
|
/**
|
|
512
538
|
* 向某个 source 追加项目
|
|
513
539
|
*
|
|
540
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
541
|
+
*
|
|
514
542
|
* @see {@link PlaybackQueueActions.appendToSource}
|
|
515
543
|
*/
|
|
516
544
|
appendToSource: (...args) => usePlaybackQueueStore.getState().appendToSource(...args),
|
|
517
545
|
/**
|
|
518
546
|
* 移除某个 source
|
|
519
547
|
*
|
|
548
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
549
|
+
*
|
|
520
550
|
* @see {@link PlaybackQueueActions.removeSource}
|
|
521
551
|
*/
|
|
522
552
|
removeSource: (...args) => usePlaybackQueueStore.getState().removeSource(...args),
|
|
523
553
|
/**
|
|
524
554
|
* 播放指定项目
|
|
525
555
|
*
|
|
556
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
557
|
+
*
|
|
526
558
|
* @see {@link PlaybackQueueActions.play}
|
|
527
559
|
*/
|
|
528
560
|
play: (...args) => usePlaybackQueueStore.getState().play(...args),
|
|
529
561
|
/**
|
|
530
562
|
* 播放指定项目(自动查找 source)
|
|
531
563
|
*
|
|
564
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
565
|
+
*
|
|
532
566
|
* @see {@link PlaybackQueueActions.playById}
|
|
533
567
|
*/
|
|
534
568
|
playById: (...args) => usePlaybackQueueStore.getState().playById(...args),
|
|
535
569
|
/**
|
|
536
570
|
* 播放下一个
|
|
537
571
|
*
|
|
572
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
573
|
+
*
|
|
538
574
|
* @see {@link PlaybackQueueActions.next}
|
|
539
575
|
*/
|
|
540
576
|
next: () => usePlaybackQueueStore.getState().next(),
|
|
541
577
|
/**
|
|
542
578
|
* 播放上一个
|
|
543
579
|
*
|
|
580
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
581
|
+
*
|
|
544
582
|
* @see {@link PlaybackQueueActions.prev}
|
|
545
583
|
*/
|
|
546
584
|
prev: () => usePlaybackQueueStore.getState().prev(),
|
|
547
585
|
/**
|
|
548
586
|
* 停止播放
|
|
549
587
|
*
|
|
588
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
589
|
+
*
|
|
550
590
|
* @see {@link PlaybackQueueActions.stop}
|
|
551
591
|
*/
|
|
552
592
|
stop: () => usePlaybackQueueStore.getState().stop(),
|
|
553
593
|
/**
|
|
554
594
|
* 播放完成回调
|
|
555
595
|
*
|
|
596
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
597
|
+
*
|
|
556
598
|
* @see {@link PlaybackQueueActions.onEnded}
|
|
557
599
|
*/
|
|
558
600
|
onEnded: () => usePlaybackQueueStore.getState().onEnded(),
|
|
559
601
|
/**
|
|
560
602
|
* 设置静音状态
|
|
561
603
|
*
|
|
604
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
605
|
+
*
|
|
562
606
|
* @see {@link PlaybackQueueActions.setMuted}
|
|
563
607
|
*/
|
|
564
608
|
setMuted: (...args) => usePlaybackQueueStore.getState().setMuted(...args),
|
|
565
609
|
/**
|
|
566
610
|
* 切换静音状态
|
|
567
611
|
*
|
|
612
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
613
|
+
*
|
|
568
614
|
* @see {@link PlaybackQueueActions.toggleMute}
|
|
569
615
|
*/
|
|
570
616
|
toggleMute: () => usePlaybackQueueStore.getState().toggleMute(),
|
|
571
617
|
/**
|
|
572
618
|
* 设置循环播放
|
|
573
619
|
*
|
|
620
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
621
|
+
*
|
|
574
622
|
* @see {@link PlaybackQueueActions.setLoop}
|
|
575
623
|
*/
|
|
576
624
|
setLoop: (...args) => usePlaybackQueueStore.getState().setLoop(...args),
|
|
577
625
|
/**
|
|
578
626
|
* 重置所有状态
|
|
579
627
|
*
|
|
628
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
629
|
+
*
|
|
580
630
|
* @see {@link PlaybackQueueActions.reset}
|
|
581
631
|
*/
|
|
582
632
|
reset: () => usePlaybackQueueStore.getState().reset(),
|
|
583
633
|
/**
|
|
584
634
|
* 订阅当前播放 ID 变化
|
|
585
635
|
*
|
|
636
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
637
|
+
*
|
|
586
638
|
* @param callback - 回调函数,参数为 (新值, 旧值)
|
|
587
639
|
* @returns 取消订阅函数
|
|
588
640
|
*
|
|
@@ -600,6 +652,8 @@ export const PlaybackQueue = {
|
|
|
600
652
|
/**
|
|
601
653
|
* 订阅 activeSource 变化
|
|
602
654
|
*
|
|
655
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
656
|
+
*
|
|
603
657
|
* @param callback - 回调函数,参数为 (新值, 旧值)
|
|
604
658
|
* @returns 取消订阅函数
|
|
605
659
|
*/
|
|
@@ -607,6 +661,8 @@ export const PlaybackQueue = {
|
|
|
607
661
|
/**
|
|
608
662
|
* 订阅静音状态变化
|
|
609
663
|
*
|
|
664
|
+
* 查看更多,请访问 https://github.com/NBXXF/xxf_react/blob/main/src/media/playback-queue-store.md
|
|
665
|
+
*
|
|
610
666
|
* @param callback - 回调函数,参数为 (新值, 旧值)
|
|
611
667
|
* @returns 取消订阅函数
|
|
612
668
|
*/
|