Commit d0c9452a authored by kingweight's avatar kingweight

更新视频上传组件

parent edac7bc6
......@@ -12,28 +12,35 @@
<div class="model-content">
<div
<!-- <div
id="drop-area"
(dragover)="onDragOver($event)"
(drop)="onDrop($event)"
>
拖拽文件到此区域进行批量上传
</div>
</div> -->
<div style="width: 100%; display: inline-flex;flex-direction: row;flex-wrap: wrap;">
<div style="width: 30% ; margin-left: 2.5%; min-width: 300px;margin-top: 20px;border: 2px dashed;padding: 20px 10px 5px 10px;"
align='center' *ngFor="let data of item.dataArr;index as i">
<div style="width: 100px; background-color: white; transform: translateY(-30px);" > 视频 {{i+1}}</div>
<div style="width: 80%;" align='center'>
<input type="text" nz-input [(ngModel)]="data.title" (blur)="save()">
<div style="width: 50% ; margin-left: 2.5%; min-width: 300px; max-width: 650px; margin-top: 20px;border: 2px dashed;padding: 20px 10px 5px 10px;"
align='center' >
<div style="width: 100px; background-color: white; transform: translateY(-30px);" > 视频 </div>
<div style="margin: 30px; display: flex; align-items: center; ">
<h3>单元名称:</h3>
<textarea nz-input [(ngModel)]="item.title" (blur)="save()" style=" width: 350px; min-height: 60px;"></textarea>
</div>
<div style="margin: 30px; display: flex; align-items: center; ">
<h3>视频互动课名称:</h3>
<textarea nz-input [(ngModel)]="item.video_title" (blur)="save()" style=" width: 350px; min-height: 60px;"></textarea>
</div>
<br>
<app-upload-image-with-preview style="width: 80%;" [picUrl]="data.cover" (imageUploaded)="onImageUploadSuccess_new($event,i)">
<app-upload-image-with-preview style="width: 80%;" [picUrl]="item.cover" (imageUploaded)="onImageUploadSuccess($event)">
</app-upload-image-with-preview>
<app-upload-video [videoUrl]="data.video_url.replace('.mp4', '_h.mp4')" [showUploadBtn]="true" (videoUploaded)="onVideoUploaded_new($event,i)" (onCapture)="handleOnCapture($event,i)" (parentRef)="onParentRef($event,i)"></app-upload-video>
<app-upload-video [videoUrl]="item.video_url.replace('.mp4', '_h.mp4')" [showUploadBtn]="true" (videoUploaded)="onVideoUploaded($event)" (onCapture)="handleOnCapture($event)" (parentRef)="onParentRef($event)"></app-upload-video>
<div style="padding: 5px 0;" align='center'>
<input type="text" nz-input [(ngModel)]="data.video_url" (blur)="save()">
<input type="text" nz-input [(ngModel)]="item.video_url" (blur)="save()">
</div>
<button style="margin-top: 10px; " (click)="onRemoveData(i)">删除</button>
<button style="margin-top: 10px; " (click)="onRemoveData()">删除视频</button>
</div>
<button style="width: 30% ;min-width: 300px;height: 170px; margin-top: 20px; margin-left:2.5%;"
(click)="onAddData()">添加视频</button>
......
......@@ -19,7 +19,10 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
// 储存对象
item: any = {
dataArr: []
video_url: "",
cover: "",
title: "",
video_title: "",
};
//临时储存对象
tempItem;
......@@ -52,382 +55,6 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
customTypeGroupArr = [
{
name: '输入型文本',
rect: true,
isShowPos: true,
labelArr: [
{type:"inputText", key: "title", title:"标题"},
{key: "key", title:"key"},
{key: "fontName", title:"字体"},
{key: "fontSize", title:"大小"},
{key: "fontColor", title:"颜色"},
],
checkbox: {
title: '',
list: [
{label: '自动换行', value:'warp'}
]
}
},
{
name: '固定型文本',
text: true,
audio: true,
isShowPos: true,
labelArr: [
{key: "fontName", title:"字体"},
{key: "fontSize", title:"大小"},
{key: "fontColor", title:"颜色"},
]
},
{
name: '输入型图片',
rect: true,
isShowPos: true,
labelArr: [
{type:"inputPic", key: "title", title:"标题"},
{key: "key", title:"key", value:""},
]
},
{
name: '固定型图片',
pic: true,
audio: true,
anchorGroup: true,
isShowPos: true,
},
{
name: '输入型动画',
rect: true,
isShowPos: true,
labelArr: [
{key: "title", title:"标题"},
]
},
{
name: '固定型动画',
rect: true,
anima: true,
audio: true,
isShowPos: true,
},
{
name: '输入型音频',
rect: true,
isShowPos: true,
labelArr: [
{type:"inputAudio", key: "title", title:"标题"},
{key: "key", title:"key", value:""},
]
},
{
name: '固定型音频',
rect: true,
audio: true,
pic: true,
anim: true,
isShowPos: true,
},
{
name: '数据型文本',
data: true,
labelArr: [
{type:"inputText", key: "title", title:"标题"},
{key: "key", title:"key"},
]
},
{
name: '数据型图片',
// data: true,
labelArr: [
{type:"inputPic", key: "title", title:"标题", value:""},
{key: "key", title:"key", value:""},
]
},
{
name: '翻页按钮组',
rect: true,
audio: true,
// radio: {
// title: "按钮",
// list: [
// {label: '上一页', key: 'prev'},
// {label: '下一页', key: 'next'},
// {label: '翻页文本', key: 'text'},
// ]
// },
isShowPos: true,
},
{
name: '录音按钮组',
rect: true,
audio: true,
isShowPos: true,
},
{
name: '文字选项组',
rect: true,
picArr: [
{title: '默认图'},
{title: '正确图'},
{title: '错误图'},
],
labelArr: [
{type:"inputText", key: "title", title:"标题"},
{key: "key", title:"key"},
{key: "fontSize", title:"字体大小"},
{key: "fontName1", title:"普通字体"},
{key: "fontColor1", title:"普通颜色"},
{key: "fontName2", title:"正确字体"},
{key: "fontColor2", title:"正确颜色"},
{key: "fontName3", title:"错误字体"},
{key: "fontColor3", title:"错误颜色"},
],
checkbox: {
title: '',
list: [
{label: '适配矩形', key:'isScale'},
]
},
isOption: true,
isShowPos: true,
isCopy: true,
},
{
name: '图片选项组',
rect: true,
picArr: [
{title: '输入参考图'},
{title: '默认背景图'},
{title: '正确背景图'},
{title: '错误背景图'},
],
labelArr: [
{type:"inputPic", key: "title", title:"标题"},
{key: "key", title:"key"},
],
checkbox: {
title: '',
list: [
{label: '遮罩', key:'isMask'},
{label: '适配矩形', key:'isScale'},
]
},
isOption: true,
isShowPos: true,
isCopy: true,
},
{
name: '音频型动画',
rect: true,
anima: true,
labelArr: [
{type:"inputAudio", key: "title", title:"标题"},
{key: "key", title:"key"},
],
isShowPos: true,
isCopy: true,
},
{
name: '选项效果组',
picArr: [
{title: '正确效果'},
{title: '错误效果'},
],
audioArr: [
{title: '正确音效'},
{title: '错误音效'},
],
anchorGroup: true,
isCopy: true,
},
{
name: '数组排列区',
rect: true,
checkbox: {
title: '',
list: [
{label: '横向排列', key:'hor'},
]
},
// select: {
// title: '类型',
// list:[
// {label: '拖拽开始区', value:'dragStart'},
// {label: '拖拽结束区', value:'dragEnd'},
// ]
// },
labelArr: [
{key: "id", title:"id"},
{key: "distanceX", title:"横向间距"},
{key: "distanceY", title:"纵向间距"},
],
isShowPos: true,
isShowSize: true,
isCopy: true,
},
{
name: '文字排列物',
rect: true,
picArr: [
{title: '默认图'},
{title: '正确图'},
{title: '错误图'},
],
labelArr: [
{type:"listInputText", key: "title", title:"标题"},
{key: "key", title:"key"},
{key: "id", title:"id"},
{key: "fontSize", title:"字体大小"},
{key: "fontName1", title:"普通字体"},
{key: "fontColor1", title:"普通颜色"},
{key: "fontName2", title:"正确字体"},
{key: "fontColor2", title:"正确颜色"},
{key: "fontName3", title:"错误字体"},
{key: "fontColor3", title:"错误颜色"},
],
radio: {
title: "文字位置",
list: [
{label: '开头', key: 'start'},
{label: '中间', key: 'middle'},
{label: '结尾', key: 'end'},
]
},
// checkbox: {
// title: '',
// list: [
// {label: '结束块', key:'isEndRect'},
// ]
// },
isShowPos: true,
isCopy: true,
},
{
name: '图片排列物',
rect: true,
picArr: [
{title: '输入参考图'},
{title: '默认背景图'},
{title: '正确背景图'},
{title: '错误背景图'},
],
labelArr: [
{type:"listInputPic", key: "title", title:"标题"},
{key: "key", title:"key"},
{key: "id", title:"id"},
],
checkbox: {
title: '',
list: [
{label: '遮罩', key:'isMask'},
// {label: '结束块', key:'isEndRect'},
]
},
isShowPos: true,
isCopy: true,
},
{
name: '拖拽文字组',
rect: true,
picArr: [
{title: '默认图'},
{title: '正确图'},
{title: '错误图'},
],
labelArr: [
{type:"listInputText", key: "title", title:"标题"},
{key: "key", title:"key"},
{key: "fontSize", title:"字体大小"},
{key: "fontName1", title:"普通字体"},
{key: "fontColor1", title:"普通颜色"},
{key: "fontName2", title:"正确字体"},
{key: "fontColor2", title:"正确颜色"},
{key: "fontName3", title:"错误字体"},
{key: "fontColor3", title:"错误颜色"},
],
checkbox: {
title: '',
list: [
{label: '结束块', key:'isEndRect'},
]
},
isShowPos: true,
isCopy: true,
},
{
name: '拖拽图片组',
rect: true,
picArr: [
{title: '输入参考图'},
{title: '默认背景图'},
{title: '正确背景图'},
{title: '错误背景图'},
],
labelArr: [
{type:"listInputPic", key: "title", title:"标题"},
{key: "key", title:"key"},
],
checkbox: {
title: '',
list: [
{label: '遮罩', key:'isMask'},
{label: '结束块', key:'isEndRect'},
]
},
isShowPos: true,
isCopy: true,
},
];
curSelectItem;
......@@ -528,7 +155,6 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
console.log("this.item: ", JSON.stringify(this.item));
this.init();
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
......@@ -733,41 +359,6 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
}
init() {
if (!this.item.quesArr) {
this.item.quesArr = [];
}
if (!this.item.partArr) {
this.item.partArr = [];
}
// 兼容旧数据结构:如果视频节点没有questionArr,则转换为新结构
if (this.item.quesArr) {
this.item.quesArr.forEach(ques => {
if (!ques.questionArr) {
// 旧数据结构:直接有type和optionArr
if (ques.type) {
ques.questionArr = [{
type: ques.type,
text: ques.text || "",
optionArr: ques.optionArr || []
}];
// 保留原有属性,但主要使用questionArr
} else {
// 新节点但没有questionArr,初始化
ques.questionArr = [{
type: "select",
text: "",
optionArr: []
}];
}
}
});
}
}
......@@ -919,7 +510,7 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
onImageUploadSuccess(e) {
this.item.file_url = e.url;
this.item.video_cover_pic = e.url;
this.save();
}
......@@ -1152,11 +743,11 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
}
// 截图
handleOnCapture(e, index) {
handleOnCapture(e) {
console.log(e)
const href = URL.createObjectURL(e)
const box = document.createElement('a')
box.download = this.item.dataArr[index].title ? this.item.dataArr[index].title + ".jpg" : "未命名" + ".jpg"
box.download = this.item.title ? this.item.title + ".jpg" : "未命名" + ".jpg"
box.href = href
box.click()
}
......@@ -1178,12 +769,9 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
/**
* 删除卡片
*/
onRemoveData(index) {
let data = this.item.dataArr[index]
if (data) {
this.item.dataArr.splice(index, 1)
this.save()
}
onRemoveData() {
}
/** 添加卡片 */
......@@ -1196,11 +784,8 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
this.save()
}
onParentRef(e, index) {
const item = this.item.dataArr[index];
if(item.video_url || !item.batch){
return;
}
onParentRef(e) {
const item = this.item;
const uploadXHRArgs:UploadXHRArgs={
file: item.file,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment