|
|
@@ -4,7 +4,6 @@ import {
|
|
|
reactive,
|
|
|
onUnmounted,
|
|
|
ref,
|
|
|
- watch,
|
|
|
Transition
|
|
|
} from 'vue';
|
|
|
import styles from './index.module.less';
|
|
|
@@ -16,9 +15,9 @@ import iconDown from './image/icon-down.svg';
|
|
|
import iconNote from './image/icon-note.png';
|
|
|
import iconWhiteboard from './image/icon-whiteboard.png';
|
|
|
import iconAssignHomework from './image/icon-assignHomework.svg';
|
|
|
+import iconOverPreivew from './image/icon-over-preview.svg';
|
|
|
import { Vue3Lottie } from 'vue3-lottie';
|
|
|
import playLoadData from './datas/data.json';
|
|
|
-import { usePageVisibility } from '@vant/use';
|
|
|
import VideoPlay from './component/video-play';
|
|
|
import {
|
|
|
useMessage,
|
|
|
@@ -33,6 +32,8 @@ import CardType from '@/components/card-type';
|
|
|
import Pen from './component/tools/pen';
|
|
|
import AudioPay from './component/audio-pay';
|
|
|
import TrainSettings from './model/train-settings';
|
|
|
+import { useRoute } from 'vue-router';
|
|
|
+import { queryCourseware } from '../prepare-lessons/api';
|
|
|
|
|
|
export type ToolType = 'init' | 'pen' | 'whiteboard';
|
|
|
export type ToolItem = {
|
|
|
@@ -45,6 +46,7 @@ export default defineComponent({
|
|
|
name: 'CoursewarePlay',
|
|
|
setup() {
|
|
|
const message = useMessage();
|
|
|
+ const route = useRoute();
|
|
|
/** 设置播放容器 16:9 */
|
|
|
const parentContainer = reactive({
|
|
|
width: '100vw'
|
|
|
@@ -70,96 +72,69 @@ export default defineComponent({
|
|
|
});
|
|
|
|
|
|
const data = reactive({
|
|
|
- detail: null,
|
|
|
+ type: '' as any, // 预览类型
|
|
|
+ subjectId: '' as any, // 声部编号
|
|
|
+ detailId: '' as any, // 编号 - 章节编号
|
|
|
+ // detail: null,
|
|
|
knowledgePointList: [] as any,
|
|
|
itemList: [] as any,
|
|
|
- showHead: true,
|
|
|
- isCourse: false,
|
|
|
- isRecordPlay: false,
|
|
|
+ // showHead: true,
|
|
|
+ // isCourse: false,
|
|
|
+ // isRecordPlay: false,
|
|
|
videoRefs: {} as any[],
|
|
|
audioRefs: {} as any[],
|
|
|
modelAttendStatus: false, // 布置作业提示弹窗
|
|
|
modelTrainStatus: false // 训练设置
|
|
|
});
|
|
|
const activeData = reactive({
|
|
|
- isAutoPlay: false, // 是否自动播放
|
|
|
+ // isAutoPlay: false, // 是否自动播放
|
|
|
nowTime: 0,
|
|
|
model: true, // 遮罩
|
|
|
isAnimation: true, // 是否动画
|
|
|
- videoBtns: true, // 视频
|
|
|
- currentTime: 0,
|
|
|
- duration: 0,
|
|
|
+ // videoBtns: true, // 视频
|
|
|
+ // currentTime: 0,
|
|
|
+ // duration: 0,
|
|
|
timer: null as any,
|
|
|
item: null as any
|
|
|
});
|
|
|
- // const getTempList = async (materialList: any, name: any) => {
|
|
|
- // const list: any = [];
|
|
|
- // const browserInfo = browser();
|
|
|
- // for (let j = 0; j < materialList.length; j++) {
|
|
|
- // const material = materialList[j];
|
|
|
-
|
|
|
- // list.push({
|
|
|
- // ...material,
|
|
|
- // iframeRef: null,
|
|
|
- // videoEle: null,
|
|
|
- // tabName: name,
|
|
|
- // autoPlay: false, //加载完成是否自动播放
|
|
|
- // isprepare: false, // 视频是否加载完成
|
|
|
- // isRender: false // 是否渲染了
|
|
|
- // });
|
|
|
- // }
|
|
|
- // return list;
|
|
|
- // };
|
|
|
const getDetail = async () => {
|
|
|
- data.knowledgePointList = [
|
|
|
- {
|
|
|
- id: '1',
|
|
|
- name: '其多列',
|
|
|
- title: '其多列',
|
|
|
- type: 'VIDEO',
|
|
|
- content:
|
|
|
- 'https://gyt.ks3-cn-beijing.ksyuncs.com/courseware/1687844560120.mp4',
|
|
|
- url: 'https://gyt.ks3-cn-beijing.ksyuncs.com/courseware/1687844640957.png'
|
|
|
- },
|
|
|
- {
|
|
|
- id: '5',
|
|
|
- name: '歌曲表演 大鹿',
|
|
|
- title: '歌曲表演 大鹿',
|
|
|
- type: 'SONG',
|
|
|
- content:
|
|
|
- 'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/1686819360752.mp3',
|
|
|
- url: 'https://gyt.ks3-cn-beijing.ksyuncs.com/courseware/1687916228530.png'
|
|
|
- },
|
|
|
- // https://gyt.ks3-cn-beijing.ksyuncs.com/courseware/1687915984210.png
|
|
|
- {
|
|
|
- id: '2',
|
|
|
- name: '其多列',
|
|
|
- title: '其多列',
|
|
|
- type: 'IMG',
|
|
|
- content:
|
|
|
- 'https://gyt.ks3-cn-beijing.ksyuncs.com/courseware/1688007481564.jpg',
|
|
|
- url: 'https://gyt.ks3-cn-beijing.ksyuncs.com/courseware/1688007481564.jpg'
|
|
|
- },
|
|
|
- {
|
|
|
- id: '4',
|
|
|
- name: '歌曲 其多列',
|
|
|
- title: '其多列',
|
|
|
- type: 'MUSIC',
|
|
|
- content: '43541',
|
|
|
- url: 'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet-first/1687847690372-1.png'
|
|
|
- }
|
|
|
- ];
|
|
|
- data.itemList = data.knowledgePointList.map((m: any) => {
|
|
|
- return {
|
|
|
- ...m,
|
|
|
- iframeRef: null,
|
|
|
- videoEle: null,
|
|
|
- audioEle: null,
|
|
|
- autoPlay: false, //加载完成是否自动播放
|
|
|
- isprepare: false, // 视频是否加载完成
|
|
|
- isRender: false // 是否渲染了
|
|
|
- };
|
|
|
- });
|
|
|
+ try {
|
|
|
+ const res = await queryCourseware({
|
|
|
+ coursewareDetailKnowledgeId: data.detailId,
|
|
|
+ subjectId: data.subjectId,
|
|
|
+ pag: 1,
|
|
|
+ rows: 99
|
|
|
+ });
|
|
|
+ const tempRows = res.data.rows || [];
|
|
|
+ const temp: any = [];
|
|
|
+ tempRows.forEach((row: any) => {
|
|
|
+ temp.push({
|
|
|
+ id: row.id,
|
|
|
+ materialId: row.materialId,
|
|
|
+ coverImg: row.coverImg,
|
|
|
+ type: row.materialType,
|
|
|
+ title: row.materialName,
|
|
|
+ isCollect: !!row.favoriteFlag,
|
|
|
+ isSelected: row.source === 'PLATFORM' ? true : false,
|
|
|
+ content: row.content
|
|
|
+ });
|
|
|
+ });
|
|
|
+ console.log(temp);
|
|
|
+ data.knowledgePointList = temp;
|
|
|
+ data.itemList = data.knowledgePointList.map((m: any) => {
|
|
|
+ return {
|
|
|
+ ...m,
|
|
|
+ iframeRef: null,
|
|
|
+ videoEle: null,
|
|
|
+ audioEle: null,
|
|
|
+ autoPlay: false, //加载完成是否自动播放
|
|
|
+ isprepare: false, // 视频是否加载完成
|
|
|
+ isRender: false // 是否渲染了
|
|
|
+ };
|
|
|
+ });
|
|
|
+ } catch {
|
|
|
+ //
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
// ifram事件处理
|
|
|
@@ -171,28 +146,17 @@ export default defineComponent({
|
|
|
};
|
|
|
|
|
|
onMounted(() => {
|
|
|
+ const query = route.query;
|
|
|
+ data.type = query.type;
|
|
|
+ data.subjectId = query.subjectId;
|
|
|
+ data.detailId = query.detailId;
|
|
|
+ window.addEventListener('message', iframeHandle);
|
|
|
getDetail();
|
|
|
});
|
|
|
|
|
|
- // const playRef = ref();
|
|
|
- // 返回
|
|
|
- // const goback = () => {
|
|
|
- // try {
|
|
|
- // playRef.value?.handleOut();
|
|
|
- // } catch {
|
|
|
- // //
|
|
|
- // }
|
|
|
- // postMessage({ api: 'goBack' });
|
|
|
- // };
|
|
|
-
|
|
|
const popupData = reactive({
|
|
|
open: false,
|
|
|
activeIndex: 0,
|
|
|
- // tabActive: '',
|
|
|
- // tabName: '',
|
|
|
- // itemActive: '',
|
|
|
- // itemName: ''
|
|
|
- // guideOpen: false,
|
|
|
toolOpen: false // 工具弹窗控制
|
|
|
});
|
|
|
|
|
|
@@ -245,13 +209,17 @@ export default defineComponent({
|
|
|
clearTimeout(activeData.timer);
|
|
|
message.destroyAll();
|
|
|
activeData.model = false;
|
|
|
- Object.values(data.videoRefs).map((n: any) => n.toggleHideControl(false));
|
|
|
- Object.values(data.audioRefs).map((n: any) => n.toggleHideControl(false));
|
|
|
+ Object.values(data.videoRefs).map((n: any) =>
|
|
|
+ n?.toggleHideControl(false)
|
|
|
+ );
|
|
|
+ Object.values(data.audioRefs).map((n: any) =>
|
|
|
+ n?.toggleHideControl(false)
|
|
|
+ );
|
|
|
};
|
|
|
const toggleModel = (type = true) => {
|
|
|
activeData.model = type;
|
|
|
- Object.values(data.videoRefs).map((n: any) => n.toggleHideControl(type));
|
|
|
- Object.values(data.audioRefs).map((n: any) => n.toggleHideControl(type));
|
|
|
+ Object.values(data.videoRefs).map((n: any) => n?.toggleHideControl(type));
|
|
|
+ Object.values(data.audioRefs).map((n: any) => n?.toggleHideControl(type));
|
|
|
};
|
|
|
|
|
|
// 双击
|
|
|
@@ -271,15 +239,15 @@ export default defineComponent({
|
|
|
};
|
|
|
|
|
|
// 切换播放
|
|
|
- const togglePlay = (m: any, isPlay: boolean) => {
|
|
|
- if (isPlay) {
|
|
|
- m.videoEle?.play();
|
|
|
- } else {
|
|
|
- m.videoEle?.pause();
|
|
|
- }
|
|
|
- };
|
|
|
+ // const togglePlay = (m: any, isPlay: boolean) => {
|
|
|
+ // if (isPlay) {
|
|
|
+ // m.videoEle?.play();
|
|
|
+ // } else {
|
|
|
+ // m.videoEle?.pause();
|
|
|
+ // }
|
|
|
+ // };
|
|
|
|
|
|
- const showIndex = ref(-4);
|
|
|
+ // const showIndex = ref(-4);
|
|
|
const effectIndex = ref(3);
|
|
|
const effects = [
|
|
|
{
|
|
|
@@ -485,18 +453,6 @@ export default defineComponent({
|
|
|
toggleModel();
|
|
|
};
|
|
|
|
|
|
- onMounted(() => {
|
|
|
- window.addEventListener('message', iframeHandle);
|
|
|
-
|
|
|
- // window.onbeforeunload = e => {
|
|
|
- // console.log(e, 'e');
|
|
|
- // if (e) {
|
|
|
- // e.returnValue = '关闭提示';
|
|
|
- // }
|
|
|
- // return false;
|
|
|
- // };
|
|
|
- });
|
|
|
-
|
|
|
return () => (
|
|
|
<div id="playContent" class={styles.playContent}>
|
|
|
<div
|
|
|
@@ -709,8 +665,16 @@ export default defineComponent({
|
|
|
styles.assignHomework,
|
|
|
activeData.model ? '' : styles.sectionAnimateUp
|
|
|
]}
|
|
|
- onClick={() => (data.modelAttendStatus = true)}>
|
|
|
- <img src={iconAssignHomework} />
|
|
|
+ onClick={() => {
|
|
|
+ if (data.type === 'preview') {
|
|
|
+ window.close();
|
|
|
+ } else {
|
|
|
+ data.modelAttendStatus = true;
|
|
|
+ }
|
|
|
+ }}>
|
|
|
+ <img
|
|
|
+ src={data.type === 'preview' ? iconOverPreivew : iconAssignHomework}
|
|
|
+ />
|
|
|
</div>
|
|
|
|
|
|
{/* 白板 批注 */}
|
