Skip to content

Commit f36240c

Browse files
moshstudiomoshstudio
committed
feat: enhance video source handling and improve tab components; refactor loading logic and integrate new source list runners for books and comics
1 parent 727f5b5 commit f36240c

18 files changed

Lines changed: 704 additions & 1002 deletions

File tree

‎packages/source-extension/src/video/cms.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -547,8 +547,8 @@ abstract class CmsVideoExtension extends VideoExtension {
547547
if (!url)
548548
return null;
549549

550-
// 自动判断播放类型
551-
let type: VideoUrlMap['type'];
550+
// 自动判断播放类型，默认按 m3u8 处理
551+
let type: VideoUrlMap['type'] = 'm3u8';
552552
if (url.includes('.m3u8')) {
553553
type = 'm3u8';
554554
if (this.proxyHeaders) {
@@ -563,7 +563,7 @@ abstract class CmsVideoExtension extends VideoExtension {
563563
}
564564
else {
565565
if (this.proxyHeaders) {
566-
url = (await this.getProxyUrl(url, this.proxyHeaders)) || url;
566+
url = (await this.getM3u8ProxyUrl(url, this.proxyHeaders)) || url;
567567
}
568568
}
569569

‎src/components/media/plugins/videoJs.ts‎

Lines changed: 35 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,11 @@ import type { IBasePluginOptions } from 'xgplayer';
22
import VideoJs from 'video.js';
33
import { BasePlugin, Events } from 'xgplayer';
44

5+
type VideoSourceType = 'm3u8' | 'mp4' | 'hls' | 'dash' | 'rtmp';
6+
57
class VideoJsPlugin extends BasePlugin {
68
url?: string;
9+
sourceType?: VideoSourceType;
710
videoPlayer?: VideoJs.Player;
811
static get pluginName() {
912
return 'VideoJsPlugin';
@@ -19,16 +22,42 @@ class VideoJsPlugin extends BasePlugin {
1922
super(args);
2023
}
2124

25+
private getVideoJsMimeType(type?: VideoSourceType): string | undefined {
26+
switch (type) {
27+
case 'm3u8':
28+
case 'hls':
29+
return 'application/x-mpegURL';
30+
case 'mp4':
31+
return 'video/mp4';
32+
case 'dash':
33+
return 'application/dash+xml';
34+
default:
35+
return undefined;
36+
}
37+
}
38+
39+
private loadSource(url?: string, type?: VideoSourceType) {
40+
if (!url)
41+
return;
42+
const mimeType = this.getVideoJsMimeType(type);
43+
console.log('videojs load url', url, type ? `(type: ${type})` : '');
44+
if (mimeType) {
45+
this.videoPlayer?.src({
46+
src: url,
47+
type: mimeType,
48+
});
49+
return;
50+
}
51+
this.videoPlayer?.src(url);
52+
}
53+
2254
beforePlayerInit() {
2355
this.videoPlayer = VideoJs(this.player.video as Element, {
2456
controlBar: false,
2557
controls: false,
2658
});
2759
this.videoPlayer.crossOrigin('anonymous');
28-
if (this.url) {
29-
console.log('videojs load url', this.url);
30-
this.videoPlayer.src(this.url);
31-
}
60+
this.loadSource(this.url, this.sourceType);
3261
}
3362

3463
afterPlayerInit() {
@@ -38,10 +67,10 @@ class VideoJsPlugin extends BasePlugin {
3867
afterCreate() {
3968
// 在afterCreate中可以加入DOM的事件监听
4069
this.url = this.player.config.url as string;
70+
this.sourceType = (this.player.config as any).videoType;
4171
this.on(Events.URL_CHANGE, (url: string) => {
42-
console.log('videojs load url', url);
4372
this.url = url;
44-
this.videoPlayer?.src(this.url);
73+
this.loadSource(this.url, this.sourceType);
4574
});
4675
}
4776

‎src/components/tab/MBookTab.vue‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,9 @@
22
import type {
33
BookItem,
44
BookList,
5-
BooksList,
65
} from '@wuji-tauri/source-extension';
76
import type { BookSource } from '@/types';
87
import { MBookCard } from '@wuji-tauri/components';
9-
import { debounce } from 'lodash';
10-
import { nanoid } from 'nanoid';
118
import { storeToRefs } from 'pinia';
129
import { ref, watch } from 'vue';
1310
import MPagination from '@/components/pagination/MPagination.vue';
@@ -26,7 +23,6 @@ const displayStore = useDisplayStore();
2623
const { paginationPosition } = storeToRefs(displayStore);
2724
2825
const active = ref(0);
29-
const tabKey = ref(nanoid()); // 修改此值来重新渲染组件
3026
3127
const loadingMap = new Set<number>();
3228
@@ -71,23 +67,26 @@ function toDetail(item: BookItem) {
7167
7268
watch(
7369
() => props.source.list,
74-
debounce((list: BooksList | undefined) => {
75-
if (list && Array.isArray(list)) {
76-
tabKey.value = nanoid();
70+
(list) => {
71+
if (!Array.isArray(list))
72+
return;
73+
// 分类变化后，防止 active 指向无效索引导致内容区表现异常
74+
if (active.value >= list.length) {
75+
active.value = 0;
7776
}
78-
}, 500),
77+
load(active.value);
78+
},
79+
{ immediate: true },
7980
);
8081
</script>
8182

8283
<template>
8384
<div v-if="!source.list" />
8485
<van-tabs
8586
v-else-if="Array.isArray(source.list)"
86-
:key="tabKey"
8787
v-model:active="active"
8888
shrink
8989
animated
90-
@rendered="(n) => load(n)"
9190
@change="(n) => load(n)"
9291
>
9392
<van-tab

‎src/components/tab/MComicTab.vue‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,9 @@
22
import type {
33
ComicItem,
44
ComicList,
5-
ComicsList,
65
} from '@wuji-tauri/source-extension';
76
import type { ComicSource } from '@/types';
87
import { MComicCard } from '@wuji-tauri/components';
9-
import { debounce } from 'lodash';
10-
import { nanoid } from 'nanoid';
118
import { storeToRefs } from 'pinia';
129
import { ref, watch } from 'vue';
1310
import MPagination from '@/components/pagination/MPagination.vue';
@@ -26,7 +23,6 @@ const displayStore = useDisplayStore();
2623
const { paginationPosition } = storeToRefs(displayStore);
2724
2825
const active = ref(0);
29-
const tabKey = ref(nanoid()); // 修改此值来重新渲染组件
3026
const loadingMap = new Set<number>();
3127
async function load(i: number | string) {
3228
if (!props.source.list || !Array.isArray(props.source.list))
@@ -69,11 +65,16 @@ function toDetail(item: ComicItem) {
6965
7066
watch(
7167
() => props.source.list,
72-
debounce((list: ComicsList | undefined) => {
73-
if (list && Array.isArray(list)) {
74-
tabKey.value = nanoid();
68+
(list) => {
69+
if (!Array.isArray(list))
70+
return;
71+
// 分类变化后，防止 active 指向无效索引导致内容区表现异常
72+
if (active.value >= list.length) {
73+
active.value = 0;
7574
}
76-
}, 500),
75+
load(active.value);
76+
},
77+
{ immediate: true },
7778
);
7879
</script>
7980

@@ -82,11 +83,9 @@ watch(
8283

8384
<van-tabs
8485
v-else-if="Array.isArray(source.list)"
85-
:key="tabKey"
8686
v-model:active="active"
8787
shrink
8888
animated
89-
@rendered="(n) => load(n)"
9089
@change="(n) => load(n)"
9190
>
9291
<van-tab

‎src/components/tab/MVideoTab.vue‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,9 @@
22
import type {
33
VideoItem,
44
VideoList,
5-
VideosList,
65
} from '@wuji-tauri/source-extension';
76
import type { VideoSource } from '@/types';
87
import { MVideoCard } from '@wuji-tauri/components';
9-
import { debounce } from 'lodash';
10-
import { nanoid } from 'nanoid';
118
import { storeToRefs } from 'pinia';
129
import { ref, watch } from 'vue';
1310
import ResponsiveGrid2 from '@/components/grid/ResponsiveGrid2.vue';
@@ -27,7 +24,6 @@ const displayStore = useDisplayStore();
2724
const { paginationPosition } = storeToRefs(displayStore);
2825
2926
const active = ref(0);
30-
const tabKey = ref(nanoid()); // 修改此值来重新渲染组件
3127
3228
const loadingMap = new Set<number>();
3329
async function load(i: number | string) {
@@ -71,11 +67,16 @@ function toDetail(item: VideoItem) {
7167
7268
watch(
7369
() => props.source.list,
74-
debounce((list: VideosList | undefined) => {
75-
if (list && Array.isArray(list)) {
76-
tabKey.value = nanoid();
70+
(list) => {
71+
if (!Array.isArray(list))
72+
return;
73+
// 分类变化后，防止 active 指向无效索引导致内容区表现异常
74+
if (active.value >= list.length) {
75+
active.value = 0;
7776
}
78-
}, 500),
77+
load(active.value);
78+
},
79+
{ immediate: true },
7980
);
8081
</script>
8182

@@ -84,11 +85,9 @@ watch(
8485

8586
<van-tabs
8687
v-else-if="Array.isArray(source.list)"
87-
:key="tabKey"
8888
v-model:active="active"
8989
shrink
9090
animated
91-
@rendered="(n) => load(n)"
9291
@change="(n) => load(n)"
9392
>
9493
<van-tab

‎src/components/tab/WBookTab.vue‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,9 @@
22
import type {
33
BookItem,
44
BookList,
5-
BooksList,
65
} from '@wuji-tauri/source-extension';
76
import type { BookSource } from '@/types';
87
import { WBookCard } from '@wuji-tauri/components';
9-
import { debounce } from 'lodash';
10-
import { nanoid } from 'nanoid';
118
import { storeToRefs } from 'pinia';
129
import { ref, watch } from 'vue';
1310
import MPagination from '@/components/pagination/MPagination.vue';
@@ -27,7 +24,6 @@ const displayStore = useDisplayStore();
2724
const { paginationPosition } = storeToRefs(displayStore);
2825
2926
const active = ref(0);
30-
const tabKey = ref(nanoid()); // 修改此值来重新渲染组件
3127
const loadingMap = new Set<number>();
3228
async function load(i: number | string) {
3329
if (!props.source.list || !Array.isArray(props.source.list))
@@ -70,11 +66,16 @@ function toDetail(item: BookItem) {
7066
7167
watch(
7268
() => props.source.list,
73-
debounce((list: BooksList | undefined) => {
74-
if (list && Array.isArray(list)) {
75-
tabKey.value = nanoid();
69+
(list) => {
70+
if (!Array.isArray(list))
71+
return;
72+
// 分类变化后，防止 active 指向无效索引导致内容区表现异常
73+
if (active.value >= list.length) {
74+
active.value = 0;
7675
}
77-
}, 500),
76+
load(active.value);
77+
},
78+
{ immediate: true },
7879
);
7980
</script>
8081

@@ -83,11 +84,9 @@ watch(
8384

8485
<van-tabs
8586
v-else-if="Array.isArray(source.list)"
86-
:key="tabKey"
8787
v-model:active="active"
8888
shrink
8989
animated
90-
@rendered="(n) => load(n)"
9190
@change="(n) => load(n)"
9291
>
9392
<van-tab

‎src/components/tab/WComicTab.vue‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,9 @@
22
import type {
33
ComicItem,
44
ComicList,
5-
ComicsList,
65
} from '@wuji-tauri/source-extension';
76
import type { ComicSource } from '@/types';
87
import { WComicCard } from '@wuji-tauri/components';
9-
import { debounce } from 'lodash';
10-
import { nanoid } from 'nanoid';
118
import { storeToRefs } from 'pinia';
129
import { ref, watch } from 'vue';
1310
import MPagination from '@/components/pagination/MPagination.vue';
@@ -27,7 +24,6 @@ const displayStore = useDisplayStore();
2724
const { paginationPosition } = storeToRefs(displayStore);
2825
2926
const active = ref(0);
30-
const tabKey = ref(nanoid()); // 修改此值来重新渲染组件
3127
const loadingMap = new Set<number>();
3228
async function load(i: number | string) {
3329
if (!props.source.list || !Array.isArray(props.source.list))
@@ -70,11 +66,16 @@ function toDetail(item: ComicItem) {
7066
7167
watch(
7268
() => props.source.list,
73-
debounce((list: ComicsList | undefined) => {
74-
if (list && Array.isArray(list)) {
75-
tabKey.value = nanoid();
69+
(list) => {
70+
if (!Array.isArray(list))
71+
return;
72+
// 分类变化后，防止 active 指向无效索引导致内容区表现异常
73+
if (active.value >= list.length) {
74+
active.value = 0;
7675
}
77-
}, 500),
76+
load(active.value);
77+
},
78+
{ immediate: true },
7879
);
7980
</script>
8081

@@ -83,11 +84,9 @@ watch(
8384

8485
<van-tabs
8586
v-else-if="Array.isArray(source.list)"
86-
:key="tabKey"
8787
v-model:active="active"
8888
shrink
8989
animated
90-
@rendered="(n) => load(n)"
9190
@change="(n) => load(n)"
9291
>
9392
<van-tab

0 commit comments

Comments
 (0)