fix: subject episode details dialog resource preview

CHANGELOG.MD

@@ -10,6 +10,10 @@
 - 更新用户名
 - 更细分的授权
 
+## 优化
+
+- 条目页的剧集详情弹框多资源绑定时的预览
+
 # 0.12.6
 
 ## 问题修复

console/src/components/video/Artplayer.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue';
+import {onMounted, onUnmounted, ref, watch} from 'vue';
 import Artplayer from 'artplayer';
 import SubtitlesOctopus from '@/libs/JavascriptSubtitlesOctopus/subtitles-octopus.js';
-import { useFontStore } from '@/stores/font';
-import { Attachment } from '@runikaros/api-client';
-import { apiClient } from '@/utils/api-client';
-import type { Setting } from 'artplayer/types/setting';
-import { subtitleNameChineseMap } from '@/modules/common/constants';
+import {useFontStore} from '@/stores/font';
+import {Attachment} from '@runikaros/api-client';
+import {apiClient} from '@/utils/api-client';
+import type {Setting} from 'artplayer/types/setting';
+import {subtitleNameChineseMap} from '@/modules/common/constants';
 
 const beseUrl = import.meta.env.BASE_URL;
 const subtitlesOctopusWorkJsPath =
@@ -16,10 +16,10 @@ const fontStore = useFontStore();
 
 const props = withDefaults(
 	defineProps<{
-		attachment: Attachment;
+    attachmentId: number;
 	}>(),
 	{
-		attachment: undefined,
+    attachmentId: undefined,
 	}
 );
 
@@ -28,6 +28,21 @@ const emit = defineEmits<{
 	(event: 'getInstance', instance: Artplayer): void;
 }>();
 
+watch(props, (newVal) => {
+  if (newVal.attachmentId) {
+    fetchAttachment();
+  }
+})
+
+const attachment = ref<Attachment>();
+const fetchAttachment = async () => {
+  if (!(props.attachmentId)) return;
+  const {data} = await apiClient.attachment.getAttachmentById({
+    id: props.attachmentId
+  })
+  attachment.value = data;
+}
+
 const fonts = ref<string[]>([]);
 const initFonts = async () => {
 	const staticFonts: string[] = await fontStore.getStaticFonts();
@@ -58,7 +73,7 @@ const getVideoSubtitles = async () => {
 	artSubtitles.value = [];
 	const { data } =
 		await apiClient.attachmentRelation.findAttachmentVideoSubtitles({
-			attachmentId: props.attachment.id as number,
+      attachmentId: props.attachmentId as number,
 		});
 	// console.log('load video subtitles', data);
 	for (let index = 0; index < data!.length; index++) {
@@ -131,10 +146,10 @@ const artplayerSubtitleSetting: Setting = {
 
 const initArtplayer = async () => {
 	console.debug('start init artplyer....');
-	console.debug('att url', props.attachment.url);
+  console.debug('att url', attachment.value?.url);
 	art.value = new Artplayer({
 		container: artRef.value,
-		url: props.attachment.url as string,
+    url: attachment.value?.url as string,
 		volume: 0.5,
 		isLive: false,
 		muted: false,
@@ -202,8 +217,9 @@ const initArtplayer = async () => {
 };
 
 onMounted(async () => {
-	console.debug('attachment', props.attachment);
-	if (props.attachment) {
+  console.debug('attachmentId', props.attachmentId);
+  if (props.attachmentId) {
+    await fetchAttachment();
 		await getVideoSubtitles();
 		await initFonts();
 		await initArtplayer();

console/src/modules/content/attachment/AttachmentDeatilDrawer.vue

@@ -1,22 +1,22 @@
 <script setup lang="ts">
-import { apiClient } from '@/utils/api-client';
-import { Attachment } from '@runikaros/api-client';
-import { formatFileSize } from '@/utils/string-util';
-import { computed, nextTick, ref } from 'vue';
+import {apiClient} from '@/utils/api-client';
+import {Attachment} from '@runikaros/api-client';
+import {formatFileSize} from '@/utils/string-util';
+import {computed, nextTick, ref} from 'vue';
 import {
-	ElButton,
-	ElCol,
-	ElDescriptions,
-	ElDescriptionsItem,
-	ElDrawer,
-	ElInput,
-	ElMessage,
-	ElPopconfirm,
-	ElRow,
+  ElButton,
+  ElCol,
+  ElDescriptions,
+  ElDescriptionsItem,
+  ElDrawer,
+  ElInput,
+  ElMessage,
+  ElPopconfirm,
+  ElRow,
 } from 'element-plus';
-import { useI18n } from 'vue-i18n';
-import { isImage, isVideo, isVoice } from '@/utils/file';
-import { Edit } from '@element-plus/icons-vue';
+import {useI18n} from 'vue-i18n';
+import {isImage, isVideo, isVoice} from '@/utils/file';
+import {Edit} from '@element-plus/icons-vue';
 import Artplayer from '@/components/video/Artplayer.vue';
 import AttachmentRelationsDialog from './AttachmentRelationsDialog.vue';
 
@@ -183,7 +183,7 @@ const getArtplayerInstance = (art: Artplayer) => {
 					<artplayer
 						v-else-if="isVideo(file.url as string)"
 						ref="artplayerRef"
-						v-model:attachment="file"
+            v-model:attachmentId="file.id"
 						style="width: 100%"
 						@getInstance="getArtplayerInstance"
 					/>

console/src/modules/content/subject/EpisodeDetailsDialog.vue

@@ -19,6 +19,7 @@ import {isVideo} from '@/utils/file';
 import {Close, Plus} from '@element-plus/icons-vue';
 import AttachmentMultiSelectDialog from '@/modules/content/attachment/AttachmentMultiSelectDialog.vue';
 import {useI18n} from 'vue-i18n';
+import Artplayer from '@/components/video/Artplayer.vue';
 
 const { t } = useI18n();
 
@@ -43,13 +44,17 @@ watch(props, (newVal) => {
 	episode.value = newVal.ep as Episode;
 	if (episode.value?.resources) {
 		episode.value.resources?.sort(compareFun);
+    emit('update:multiResource', episode.value.resources && episode.value.resources.length > 1);
+    loadVideoAttachment();
 	}
 });
 
 const emit = defineEmits<{
 	// eslint-disable-next-line no-unused-vars
 	(event: 'update:visible', visible: boolean): void;
 	// eslint-disable-next-line no-unused-vars
+	(event: 'update:multiResource', multiResource: boolean): void;
+	// eslint-disable-next-line no-unused-vars
 	(event: 'close'): void;
 	// eslint-disable-next-line no-unused-vars
 	(event: 'removeEpisodeFilesBind'): void;
@@ -64,6 +69,15 @@ const dialogVisible = computed({
 	},
 });
 
+// const hasMultiRes = computed({
+// 	get() {
+// 		return props.multiResource;
+// 	},
+// 	set(value) {
+// 		emit('update:multiResource', value);
+// 	}
+// })
+
 const removeEpisodeAllAttachmentRefs = async () => {
 	// @ts-ignore
 	if (
@@ -188,8 +202,27 @@ const fetchEpisodeResources = async () => {
 		id: episode.value.id as number,
 	});
 	episode.value.resources = data;
+  var multiResource = episode.value.resources && episode.value.resources.length > 1;
+  emit('update:multiResource', multiResource);
 };
 
+const loadVideoAttachment = async () => {
+  console.debug('loadVideoAttachment')
+  console.debug('episode.value.resources', episode.value.resources)
+  if (episode.value.resources
+      && episode.value.resources.length == 1
+      && isVideo(episode.value.resources[0].url as string)) {
+    console.debug('episode.value.resources[0].attachmentId', episode.value.resources[0].attachmentId)
+    const {data} = await apiClient.attachment.getAttachmentById({
+      id: episode.value.resources[0].attachmentId as number
+    })
+    currentVideoAttachment.value = data;
+  } else {
+    console.debug('loadVideoAttachment {}')
+    currentVideoAttachment.value = {};
+  }
+}
+
 const compareFun = (r1: EpisodeResource, r2: EpisodeResource): number => {
 	const name1 = r1.name;
 	const name2 = r2.name;
@@ -202,6 +235,14 @@ const compareFun = (r1: EpisodeResource, r2: EpisodeResource): number => {
 	}
 	return 0;
 };
+
+const artplayer = ref<Artplayer>();
+const getArtplayerInstance = (art: Artplayer) => {
+  artplayer.value = art;
+};
+const currentVideoAttachment = ref<Attachment>({
+  id: 0
+})
 </script>
 
 <template>
@@ -256,17 +297,23 @@ const compareFun = (r1: EpisodeResource, r2: EpisodeResource): number => {
 							>{{ episode?.resources[0].name }}</router-link
 						>
 						<br />
-						<video
-							v-if="isVideo(episode.resources[0].url as string)"
-							style="width: 100%"
-							:src="episode.resources[0].url"
-							controls
-							preload="metadata"
-						>
-							{{
-								t('module.subject.dialog.episode.details.hint.video.unsuport')
-							}}
-						</video>
+            <!-- <video
+              v-if="isVideo(episode.resources[0].url as string)"
+              style="width: 100%"
+              :src="episode.resources[0].url"
+              controls
+              preload="metadata"
+            >
+              {{
+                t('module.subject.dialog.episode.details.hint.video.unsuport')
+              }}
+            </video> -->
+            <artplayer
+                v-if="isVideo(episode.resources[0].url as string)"
+                v-model:attachmentId="episode.resources[0].attachmentId"
+                style="width: 100%"
+                @getInstance="getArtplayerInstance"
+            />
 						<span v-else>
 							{{
 								t('module.subject.dialog.episode.details.hint.video.not_video')