Commit 3ab5b6aa authored by 李维's avatar 李维

测试

parent bb73f7ac
No preview for this file type
This diff is collapsed.
...@@ -128,5 +128,8 @@ ...@@ -128,5 +128,8 @@
} }
} }
}, },
"defaultProject": "ng-template-generator" "defaultProject": "ng-template-generator",
} "cli": {
"analytics": "5f501d82-8f25-4817-a608-9ac70d1f1f70"
}
}
\ No newline at end of file
This diff is collapsed.
...@@ -55,4 +55,4 @@ ...@@ -55,4 +55,4 @@
"tslint": "~5.18.0", "tslint": "~5.18.0",
"typescript": "~3.7.5" "typescript": "~3.7.5"
} }
} }
\ No newline at end of file
...@@ -45,17 +45,19 @@ ...@@ -45,17 +45,19 @@
<fa-icon icon="cog"></fa-icon> <fa-icon icon="cog"></fa-icon>
</div> </div>
</ng-template> </ng-template>
</div> </div>
<div class="p-progress ml-2" (click)="onBtnPlay()" *ngIf="audioUrl || audioBlob"> <div class="p-progress ml-2" (click)="onBtnPlay()" *ngIf="audioUrl || audioBlob"
<nz-progress [nzPercent]="percent" [nzWidth]="30" [nzFormat]="progressText" style="background-color: #70B603; width: 35px; height: 35px; border-radius: 35px; margin-left: 10px;margin-top:-1px">
nzType="circle"></nz-progress> <nz-progress [nzPercent]="percent" [nzWidth]="35" [nzFormat]="progressText"
<div class="p-btn-play" [style.left]="isPlaying?'8px':''"> nzType="circle">
</nz-progress>
<div class="p-btn-play"
style="color: white;margin-left: 2px;margin-top: 1px;"
[style.left]="isPlaying?'8px':''">
<fa-icon [icon]="playIcon"></fa-icon> <fa-icon [icon]="playIcon"></fa-icon>
</div> </div>
</div> </div>
<div class="audio-name">{{_audioName}}</div>
</div> </div>
...@@ -90,17 +90,26 @@ ...@@ -90,17 +90,26 @@
} }
.p-progress { .p-progress {
margin-top: 2px; margin-top: 3.5px;
position: relative; position: relative;
background-color: #27b43f;
border-radius: 15px;
line-height: 26px; line-height: 26px;
.p-btn-play { .p-btn-play {
position: absolute; position: absolute;
left: 10px; left: 11px;
top: 3px; top: 3px;
color: #555; color: #ffffff;
} }
} }
.audio-name{
margin-top: 3.5px;
position: relative;
margin-left: 7px;;
line-height: 26px;
}
:host ::ng-deep nz-upload { :host ::ng-deep nz-upload {
line-height: 33px; line-height: 33px;
} }
......
...@@ -31,12 +31,21 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -31,12 +31,21 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
@Input() @Input()
audioItem: any = null; audioItem: any = null;
@Input()
_audioName: any = null;
@Input() @Input()
set audioUrl(url) { set audioUrl(url) {
this._audioUrl = url; this._audioUrl = url;
if (url) { if (url) {
this.audio.src = this._audioUrl; this.httpHeadCall(this._audioUrl, flag => {
this.audio.load(); if (flag) {
this.audio.src = this._audioUrl;
} else {
this.audio.src = this._audioUrl.replace("_l.", ".");
}
this.audio.load();
});
} }
this.init(); this.init();
} }
...@@ -48,6 +57,7 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -48,6 +57,7 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
@Output() audioUploaded = new EventEmitter(); @Output() audioUploaded = new EventEmitter();
@Output() audioUploadFailure = new EventEmitter(); @Output() audioUploadFailure = new EventEmitter();
@Output() audioRemoved = new EventEmitter(); @Output() audioRemoved = new EventEmitter();
@Output() audioName = new EventEmitter();
percent = 0; percent = 0;
progress = 0; progress = 0;
recorder: any; recorder: any;
...@@ -64,6 +74,41 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -64,6 +74,41 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
}; };
} }
httpHeadCall(requsetUrl: string, callback) {
let xhr = new XMLHttpRequest();
console.log("Status: Send Post Request to " + requsetUrl);
try {
xhr.onreadystatechange = () => {
try {
console.log('xhr.readyState: ', xhr.readyState);
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 400)) {
callback(true);
} else {
callback(false);
}
}
} catch (e) {
console.log(e)
}
};
xhr.open("HEAD", requsetUrl, true);
xhr.send();
xhr.timeout = 15000;
xhr.onerror = (e) => {
console.log("汪汪汪 posterror", e);
callback(false);
};
xhr.ontimeout = (e) => {
console.log("汪汪汪 ontimeout", e);
callback(false);
};
} catch (e) {
console.log("Send Get Request error: ", e)
}
}
init() { init() {
this.playIcon = 'play'; this.playIcon = 'play';
this.isPlaying = false; this.isPlaying = false;
...@@ -168,8 +213,12 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -168,8 +213,12 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
break; break;
case 'success': case 'success':
this.isUploading = false; this.isUploading = false;
let url = info.file.response.url;
url = url.substring(0, url.lastIndexOf(".")) + "_l.mp3";
info.file.response.url = url;
this.uploadSuccess(info.file.response); this.uploadSuccess(info.file.response);
this.audioUploaded.emit(info.file.response); this.audioUploaded.emit(info.file.response);
this.audioName.emit(info.file.name);
break; break;
case 'progress': case 'progress':
this.progress = parseInt(info.event.percent, 10); this.progress = parseInt(info.event.percent, 10);
......
...@@ -80,43 +80,62 @@ export class UploadVideoComponent implements OnChanges, OnDestroy { ...@@ -80,43 +80,62 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
URL.revokeObjectURL(this.videoUrl); URL.revokeObjectURL(this.videoUrl);
} }
httpHeadCall(requsetUrl: string, callback) {
let xhr = new XMLHttpRequest();
console.log("Status: Send Post Request to " + requsetUrl);
try {
xhr.onreadystatechange = () => {
try {
console.log('xhr.readyState: ', xhr.readyState);
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 400)) {
callback(true);
} else {
callback(false);
}
}
} catch (e) {
console.log(e)
}
};
xhr.open("HEAD", requsetUrl, true);
xhr.send();
xhr.timeout = 15000;
xhr.onerror = (e) => {
callback(false);
};
xhr.ontimeout = (e) => {
callback(false);
};
} catch (e) {
console.log("Send Get Request error: ", e)
}
}
safeVideoUrl(url) { safeVideoUrl(url) {
console.log(url); const _url = url.replace("_l.", ".");
return this.sanitization.bypassSecurityTrustResourceUrl(url); // `${url}`; return this.sanitization.bypassSecurityTrustResourceUrl(_url); // `${url}`;
} }
videoLoadedMetaData() { videoLoadedMetaData() {
} }
handleChange(info: UploadChangeParam/* { type: string, file: UploadFile, event: any }*/): void { handleChange(info: UploadChangeParam): void {
console.log('info:' , info);
switch (info.type) { switch (info.type) {
case 'start': case 'start':
// this.beforeUpload(info.file);
if (!this.checkSelectFile(info.file)) { if (!this.checkSelectFile(info.file)) {
return; return;
} }
this.uploading = true; this.uploading = true;
this.progress = 0; this.progress = 0;
break; break;
case 'success': case 'success':
let url = info.file.response.url;
url = url.substring(0, url.lastIndexOf(".")) + "_l.mp4";
info.file.response.url = url;
this.uploadSuccess(info.file); this.uploadSuccess(info.file);
// this.beforeUpload(info.file);
// this.uploadSuccess(info.file);
break; break;
case 'progress': case 'progress':
this.progress = info.event.percent; this.progress = info.event.percent;
...@@ -125,7 +144,6 @@ export class UploadVideoComponent implements OnChanges, OnDestroy { ...@@ -125,7 +144,6 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
} }
} }
checkSelectFile(file) { checkSelectFile(file) {
if (!file.lastModified) { if (!file.lastModified) {
return false; return false;
......
import { ApplicationRef, ChangeDetectorRef, ElementRef, ViewChild } from "@angular/core";
export class ComponentBase {
// 储存数据用
saveKey = "";
// 储存对象
item: any = {};
ngOnChanges() { }
ngOnDestroy() { }
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) { }
ngOnInit() {
// 获取存储的数据
(<any>window).courseware.getData((data) => {
if (data) {
this.item = data;
this.itemStr = JSON.stringify(this.item, null, 4).trim();
}
this.init();
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
}, this.saveKey);
}
@ViewChild("itemTextarea", { static: true }) itemTextarea: ElementRef;
copyData() {
this.itemTextarea.nativeElement.select();
document.execCommand("copy");
}
/**
* 储存图片数据
* @param e
*/
onAssetUploadSuccess(e: any, ...key: Array<string>) {
let item = this.item;
for (let i = 0; i < key.length; i++) {
if (i + 1 == key.length) {
item[key[i]] = e.url;
this.save();
return;
}
item = item[key[i]];
}
}
save() {
(<any>window).courseware.setData(this.item, null, this.saveKey);
this.itemStr = JSON.stringify(this.item, null, 4).trim();
this.refresh();
console.log('this.item = ' + JSON.stringify(this.item));
}
itemStr = "";
load() {
this.itemStr = this.itemTextarea.nativeElement.value;
if (this.isJSON(this.itemStr)) {
this.item = JSON.parse(this.itemStr);
this.init();
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
}
}
isJSON(str) {
if (typeof str == 'string') {
try {
var obj = JSON.parse(str);
if (typeof obj == 'object' && obj) {
return true;
}
return false;
} catch (e) {
return false;
}
}
return false;
}
/**
* 刷新 渲染页面
*/
refresh() {
setTimeout(() => {
this.appRef.tick();
}, 1);
}
init() { }
}
...@@ -33,3 +33,30 @@ ...@@ -33,3 +33,30 @@
padding: 10px; padding: 10px;
margin: 10px; margin: 10px;
} }
.button-right {
border-style: dotted;
border-color: rgb(42, 142, 72);
width: 100px;
height: 50px;
color: rgb(42, 142, 72);
background-color: white;
}
.button-wrong {
border-style: dotted;
border-color: rgb(180, 0, 0);
width: 100px;
height: 50px;
color: rgb(180, 0, 0);
background-color: white;
}
.button-disable {
border-style: dotted;
border-color: black;
width: 100px;
height: 50px;
color: black;
background-color: white;
}
\ No newline at end of file
<div class="model-content"> <div class="model-content">
<div style="padding: 10px;"> <div style="padding: 10px;">
<div class="border" style="width: 1000px;">
<div style="width: 300px;" align='center'> <textarea style="width: 955px; height: 300px;" (blur)="load()" #itemTextarea>{{itemStr}}</textarea>
<span>图1: </span> <button (click)="copyData();">Copy</button>
<app-upload-image-with-preview
[picUrl]="item.pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')">
</app-upload-image-with-preview>
</div>
<div style="width: 300px; margin-top: 5px;" align='center'>
<span>图2: </span>
<app-upload-image-with-preview
[picUrl]="item.pic_url_2"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url_2')">
</app-upload-image-with-preview>
</div>
<div style="width: 300px; margin-top: 15px;">
<span>文本: </span>
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
</div> </div>
<div style="margin-top: 5px"> <div class="border" style="width: 1000px;">
<span>音频: </span> <span style="font-size: 20px;">标题: </span>
<app-audio-recorder <input type="text" nz-input [(ngModel)]="item.title" (blur)="save()">
[audioUrl]="item.audio_url" <span style="font-size: 20px;">题目说明: </span>
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')" <input type="text" nz-input [(ngModel)]="item.questionText" (blur)="save()">
<span style="font-size: 20px;">题目说明音频: </span>
<app-audio-recorder
[audioUrl]="item.questionTextAudio"
(audioUploaded)="onAssetUploadSuccess($event, 'questionTextAudio')"
[_audioName]="item.audioFileName"
(audioName)="saveAudioFileName($event)"
></app-audio-recorder> ></app-audio-recorder>
</div> </div>
</div> <div class="border" style="width: 1000px;">
<div *ngFor="let question of item.questions; let i = index">
<div class="border" style="width: 950px;">
<span style="font-size: 20px;">选项类型: </span>
<div *ngIf="question.type=='img'">
<button class="button-right">图片</button>
&nbsp;
<button class="button-disable" (click)="question.type='txt'; save();">文字</button>
</div>
<div *ngIf="question.type=='txt'">
<button class="button-disable" (click)="question.type='img'; save();">图片</button>
&nbsp;
<button class="button-right">文字</button>
</div>
</div> <div *ngIf="question.type=='img'">
图片:
<div style="width: 300px;">
<app-upload-image-with-preview [picUrl]="question.image"
(imageUploaded)="onAssetUploadSuccess($event, 'questions', i, 'image')">
</app-upload-image-with-preview>
</div>
</div>
<span>音频: </span>
<app-audio-recorder [audioUrl]="question.audio"
(audioUploaded)="onAssetUploadSuccess($event, 'questions', i, 'audio')">
</app-audio-recorder>
<div *ngIf="question.type=='txt'">
<span>文本: </span>
<input type="text" nz-input [(ngModel)]="question.text" (blur)="save()">
</div>
<br>
<button style="width: 900px; height: 30px; color: red;" (click)="removeQuestion(i)">删除题目</button>
</div>
</div>
<div class="border" style="width: 950px;">
<button style="width: 900px; height: 100px;" (click)="addQuestion()">增加题目</button>
</div>
</div>
</div>
</div>
\ No newline at end of file
import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef } from '@angular/core'; import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef } from '@angular/core';
import { JsonPipe } from '@angular/common'; import { JsonPipe } from '@angular/common';
import { ComponentBase } from './ComponentBase';
@Component({ @Component({
...@@ -7,108 +8,36 @@ import { JsonPipe } from '@angular/common'; ...@@ -7,108 +8,36 @@ import { JsonPipe } from '@angular/common';
templateUrl: './form.component.html', templateUrl: './form.component.html',
styleUrls: ['./form.component.css'] styleUrls: ['./form.component.css']
}) })
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent extends ComponentBase implements OnInit, OnChanges, OnDestroy {
// 储存数据用 // 储存数据用
saveKey = "test_001"; saveKey = "card_machine";
// 储存对象 // 储存对象
item; item: any = {
title: '',
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) { questionText: '',
questionTextAudio: '',
} audioFileName: '',
questions: [],
createShell() { };
this.item.wordList.push({
word: '', addQuestion() {
this.item.questions.push({
type: 'img',
audio: '', audio: '',
backWord: '', text: '',
backWordAudio: '', image: ''
}); });
this.save(); this.save();
} }
removeShell(idx) { removeQuestion(idx) {
this.item.wordList.splice(idx, 1); this.item.questions.splice(idx, 1);
this.save(); this.save();
} }
ngOnInit() { saveAudioFileName(name) {
this.item.audioFileName=name;
this.item = {};
// 获取存储的数据
(<any>window).courseware.getData((data) => {
if (data) {
this.item = data;
}
this.init();
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
}, this.saveKey);
}
ngOnChanges() {
}
ngOnDestroy() {
}
init() {
}
/**
* 储存图片数据
* @param e
*/
onImageUploadSuccess(e, key) {
this.item[key] = e.url;
this.save();
}
/**
* 储存音频数据
* @param e
*/
onAudioUploadSuccess(e, key) {
this.item[key] = e.url;
this.save(); this.save();
} }
onWordAudioUploadSuccess(e, idx) {
this.item.wordList[idx].audio = e.url;
this.save();
}
onBackWordAudioUploadSuccess(e, idx) {
this.item.wordList[idx].backWordAudio = e.url;
this.save();
}
/**
* 储存数据
*/
save() {
(<any>window).courseware.setData(this.item, null, this.saveKey);
this.refresh();
console.log('this.item = ' + JSON.stringify(this.item));
}
/**
* 刷新 渲染页面
*/
refresh() {
setTimeout(() => {
this.appRef.tick();
}, 1);
}
} }
\ No newline at end of file
{ {
"title": "play", "title": "play",
"packageName": "org.cocos2d.demo", "packageName": "org.cocos2d.demo",
"startScene": "ec8d6534-2420-48d9-a406-3f359305098f", "startScene": "0737ce42-24f0-45c6-8e1a-8bdab4f74ba3",
"excludeScenes": [], "excludeScenes": [],
"includeSDKBox": false, "includeSDKBox": false,
"orientation": { "orientation": {
...@@ -28,8 +28,7 @@ ...@@ -28,8 +28,7 @@
}, },
"ios": { "ios": {
"REMOTE_SERVER_ROOT": "", "REMOTE_SERVER_ROOT": "",
"packageName": "org.cocos2d.demo", "packageName": "org.cocos2d.demo"
"ios_enable_jit": true
}, },
"mac": { "mac": {
"REMOTE_SERVER_ROOT": "", "REMOTE_SERVER_ROOT": "",
...@@ -51,6 +50,5 @@ ...@@ -51,6 +50,5 @@
"scheme": "https", "scheme": "https",
"skipRecord": false "skipRecord": false
}, },
"appBundle": false, "appBundle": false
"agreements": {}
} }
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
"experimentalDecorators": true, "experimentalDecorators": true,
"skipLibCheck": true, "skipLibCheck": true,
"outDir": "temp/vscode-dist", "outDir": "temp/vscode-dist",
"allowJs": true,
"forceConsistentCasingInFileNames": true "forceConsistentCasingInFileNames": true
}, },
"exclude": [ "exclude": [
......
This diff is collapsed.
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