Commit 20da4385 authored by limingzhe's avatar limingzhe

update

parent a4d93283
<div class="courseware-container d-flex"> <div class="courseware-container ">
<div class="gutter" style="width: 100%;"> <div style="padding: 10px">
<app-lesson-title-config
(titleUpdated)="updateTitleObjSuccess($event)"
[withIcon]="false"
[titleObj]="titleObj">
</app-lesson-title-config>
<div style="display: flex; justify-items: center; padding-top: 20px;">
<span style="padding-right: 20px">单元:</span>
<input style="width: 200px" type="text" nz-input placeholder="" [(ngModel)]="item.contentObj.unit" (blur)="save()">
</div>
<div style="display: flex; justify-items: center; padding-top: 20px;">
<span style="padding-right: 20px">标题:</span>
<input style="width: 200px" type="text" nz-input placeholder="" [(ngModel)]="item.contentObj.title" (blur)="save()">
<nz-divider></nz-divider>
</div> </div>
<div style="width: 500px; padding-top: 20px;">
<span style="padding-right: 20px">图标:</span>
<app-upload-image-with-preview
[picUrl]="item.contentObj.pic_url"
(imageUploaded)="onImageUploadSuccessByItem($event, item.contentObj)"
></app-upload-image-with-preview>
</div>
</div>
<!--<div class="col-8">-->
<!--&lt;!&ndash;crossorigin="anonymous"&ndash;&gt;-->
<!--<video class="courseware-video"-->
<!--crossorigin="anonymous"-->
<!--*ngIf="item.contentObj.video_url "-->
<!--[src]="item.contentObj.video_url | resource" controls-->
<!--(loadeddata)="videoLoaded($event,item)"-->
<!--(error)="videoError($event)"-->
<!--(seeked)="videoSeeked($event)"-->
<!--#videoNode ></video>-->
<!--&lt;!&ndash;&& item.contentObj.video_url.constructor.name === 'String'&ndash;&gt;-->
<!--<div *ngIf="!item.contentObj.video_url">-->
<!--<div class="p-video-box d-flex align-items-center">-->
<!--<div class="p-upload-icon">-->
<!--&lt;!&ndash;<i class="anticon anticon-caret-right"></i>&ndash;&gt;-->
<!--<i nz-icon type="caret-right" theme="outline"></i>-->
<!--<div class="m-3"></div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="col-4">-->
<!--<app-upload-video-->
<!--(videoUploaded)="onVideoUploadSuccess($event)"-->
<!--[item]="item"-->
<!--[videoUrl]="item.contentObj.video_url"></app-upload-video>-->
<!--</div>-->
<!--</div>-->
<!--<div class="row" style="margin-top: 1rem"-->
<!--*ngIf="item.contentObj.video_id && item.contentObj.video_url && item.contentObj.video_url.constructor.name === 'String'">-->
<!--<div class="col-8">-->
<!--<button nz-button nzType="primary"-->
<!--style="margin-bottom: 1rem"-->
<!--(click)="setVideoCover()">-->
<!--Set Video Cover-->
<!--</button>-->
<!--&lt;!&ndash;crossOrigin="anonymous"&ndash;&gt;-->
<!--<img *ngIf="item.contentObj.pic_id"-->
<!--[src]="item.contentObj.pic_id | resource"-->
<!--style="width:100%;overflow: hidden;box-shadow: 0 0 20px 0px #444;"/>-->
<!--<app-upload-image-with-preview-->
<!--[picUrl]="item.contentObj.video_cover_url"-->
<!--(imageUploaded)="onCoverUploadSuccess($event)"-->
<!--[picItem]="coverImg"-->
<!--[disableUpload]="true"-->
<!--[TIP]="' '"-->
<!--[iconSize]="0"-->
<!--style="width:100%;overflow: hidden;box-shadow: 0 0 20px 0px #444;">-->
<!--</app-upload-image-with-preview>-->
<!--</div>-->
</div> </div>
@import '../style/common_mixin';
.tw{
display: flex;
.t{
flex: 1 1 auto;
margin-right: 2rem;
}
.a{
.courseware-container{
.courseware-video{
//position: absolute;
width: 95%;
max-height: calc(100vh - 5rem);
} }
}
.aud-w{
width: 100%;
display: flex;
justify-content: center;
margin-top: 1.5rem;
} }
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef} from '@angular/core'; import {
import * as _ from 'lodash'; ApplicationRef,
Component,
ElementRef,
EventEmitter,
Input,
OnChanges,
OnInit,
Output,
ViewChild
} from '@angular/core';
import {NzMessageDataFilled, NzMessageService} from 'ng-zorro-antd';
@Component({ @Component({
// providers:[UploadImageWithPreviewComponent ],
selector: 'app-form', selector: 'app-form',
templateUrl: './form.component.html', templateUrl: './form.component.html',
styleUrls: ['./form.component.scss'] styleUrls: ['./form.component.scss']
}) })
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges {
// @Input()
item;
@ViewChild('videoContainer')
videoContainer: ElementRef;
@ViewChild('videoNode')
videoNode: ElementRef;
@Output()
update = new EventEmitter();
newVideoCover = true;
coverImg: any = null;
// titleObj = {
// audio_url: 'http://iplayabc-courseware.oss-cn-beijing.aliyuncs.com/dev/imman/audios/d108d5d06105fda0526059a3e372f926.mp3',
// content: 'what is this?&nbsp;',
// icons: [],
// type: 'a'
// };
titleObj = { KEY = 'dfzx_04';
audio_url: '',
content: '',
icons: [],
type: ''
};
teststr = ""; private tooBigError: NzMessageDataFilled = null;
constructor(private appRef: ApplicationRef) {
} constructor(private nzMessageService: NzMessageService,
private appRef: ApplicationRef) {
}
safeVideoUrl(url) {
if (url && url.constructor.name === 'SafeUrlImpl') {
this.videoNode && this.videoNode.nativeElement.removeAttribute('crossorigin');
return url;
}
this.videoNode && this.videoNode.nativeElement.setAttribute('crossorigin', 'anonymous');
// console.log('safeVideoUrl', url)
return `${url}?t=${Math.random()}`;
// const d = this.sanitization.bypassSecurityTrustResourceUrl(url);
return `${url}`; // ?t=${Math.random() //this.sanitization.bypassSecurityTrustHtml(url);
}
ngOnChanges() {
console.log(1, 'ngOnChanges');
// if (typeof this.item.contentObj.video_url !== 'string') {
// // this.item.contentObj.video_url = '';
// setTimeout(() => {
// this.item.contentObj.video_url = '';
// });
// }
}
ngOnInit() { ngOnInit() {
let _this = this; console.log(2, 'ngOnInit');
(<any>window).courseware.getData(function(data){ // if (typeof this.item.contentObj.video_url !== 'string') {
if(data){ // // this.item.contentObj.video_url = '';
_this.titleObj = data; // setTimeout(() => {
setTimeout(() => { // this.item.contentObj.video_url = '';
_this.appRef.tick(); // });
}, 1); // }
const getData = (<any> window).courseware.getData;
getData((data) => {
if (data) {
this.item = data;
} else {
this.item = {};
this.item.contentObj = {};
} }
});
console.log('data:', data);
// this.init();
// this.refresh();
}, this.KEY);
} }
ngOnChanges() { videoLoaded(evt, item) {
// console.log(111, 'video loaded', item);
const video = evt.target;
if (video.src.startsWith('blob:') && video.videoWidth > 1280 && video.videoHeight > 720) {
this.tooBigError = this.nzMessageService.error('视频分辨率过大,请调整分辨率后上传,建议 1280x720', {nzDuration: 10 * 1000});
// video.src = null;
return ;
} else {
if (this.tooBigError && this.tooBigError.messageId) {
this.nzMessageService.remove(this.tooBigError.messageId);
this.tooBigError = null;
}
} }
ngOnDestroy() { if (video.src && video.src.startsWith('blob:')) {
return;
}
if ( item.contentObj.origin_video_url && item.contentObj.origin_video_url.startsWith('http') ) {
item.video_preview_thumb = null;
return;
}
// item.video_preview_thumb = null;
this.newVideoCover = true;
video.currentTime = .1;
// setTimeout(() => {
// this.setVideoCover();
// }, 1500);
// this.videoSeeked(evt, item);
}
videoError(evt) {
this.nzMessageService.error('video error');
}
videoSeeked(evt) {
const video = evt.target;
if (video.src && video.src.startsWith('blob:')) {
return;
}
if (!this.item.contentObj.video_cover_url) {
this.setVideoCover();
this.newVideoCover = false;
}
} }
setVideoCover() {
// console.log(111)
// (seeked)="videoSeeked($event, item)"
// if (!item.video_preview_thumb) {
if (!this.videoNode) {
return;
}
const video = this.videoNode.nativeElement;
if (!video.src) { return; }
// console.log(222, video.currentTime)
const canvas = document.createElement('canvas');
canvas.setAttribute('crossorigin', "anonymous");
canvas.width = video.videoWidth ;
canvas.height = video.videoHeight ;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
// item.video_preview_thumb = canvas.toDataURL();
const video_preview_thumb = canvas.toDataURL();
// console.log(video_preview_thumb.substr(0, 100));
// console.log('%c ', `font-size: 100px; background: url(${video_preview_thumb}) no-repeat;`);
canvas.remove();
// video.currentTime = 0;
// }
updateTitleObjSuccess(titleObj) { const img: any = this.convertImageToBlob(video_preview_thumb);
this.titleObj = titleObj; img.name = `video_${this.item.sid}_${Date.now()}_cover.png`;
this.coverImg = img;
// this.coverComponent.customUpload(img);
/*
const formData = new FormData();
formData.append('file', img);
this.coursewareService.uploadResource(formData).then(res => {
// console.log(res);
// console.log(1, this.item.contentObj.video_url);
this.item.contentObj.pic_id = res.res_id;
// const ndata = JSON.parse(JSON.stringify(this.item)); // Object.assign({}, this.item);
// if (typeof ndata.contentObj.video_url !== 'string') {
// delete ndata.contentObj.video_url;
// }
//
// console.log(2, ndata.contentObj.video_url);
// console.log(3, this.item.contentObj.video_url);
this.update.emit(this.item);
});
*/
}
onCoverUploadSuccess(e) {
this.coverImg = null;
this.item.contentObj.video_cover_id = e.res_id;
this.item.contentObj.video_cover_url = e.url;
this.update.emit(this.item);
}
convertImageToBlob(data) {
const imgType = data.substring(data.indexOf(':') + 1, data.indexOf(';'));
const binary = atob(data.split(',')[1]);
const array = [];
let i = 0;
while (i < binary.length) {
array.push (binary.charCodeAt(i));
i++;
}
return new Blob([ new Uint8Array(array) ], {type: imgType});
}
onVideoUploadSuccess(e) {
this.item.contentObj.video_url = e.url;
this.save();
}
onImageUploadSuccessByItem(e, it) {
// console.log('e:', e);
it.pic_url = e.url;
this.save(); this.save();
} }
onTitleAudioUploadSuccess(res) { onAudioUploadSuccessByItem(e, it) {
this.titleObj.audio_url = res.url; it.audio_url = e.url;
this.save(); this.save();
} }
save() { save() {
(<any>window).courseware.setData(this.titleObj); (<any> window).courseware.setData(this.item, null, this.KEY);
this.refresh();
} }
refresh() {
setTimeout(() => {
this.appRef.tick();
}, 1);
}
} }
This diff is collapsed.
<div class="game-container" #wrap >
<canvas id="canvas" #canvas></canvas>
<div class="player-preview-content" [ngStyle]="{'background-color': this.data.contentObj?.titleObj?.type === 'a' ? '#fce5e9' : '#d8eefb'}">
<app-player-content-wrapper>
<div [innerHTML]="data.contentObj.titleObj.content" style="
position: absolute;z-index:99;
display: inline-block;
left: 55px;
top: 20px;
cursor: pointer" (click)="playTitleAudio()"></div>
<div class="content" style = 'position: relative;width: 100%;height: 100%;display: flex;
justify-content: center;
align-items: flex-end;'>
<div class="letter-box">
<div class="letters" >
<div class="letter" *ngFor="let a of letters; let i = index"
[ngStyle]="{top: row(i) +'%', left: (10 + (i % 13) * 6.05) +'%'}">
<div class="l-box" (click)="clickItem($event, a)">
<img [src]="'assets/all-letters/letter-imgs/'+a +'.png'" alt="">
<div style="display: none">
<audio [src]="'assets/all-letters/letter-audios/'+fromCharCode(a)+'.mp3'" preload="auto"> </audio>
</div>
</div>
</div>
</div>
</div>
<div class="show-item-content"
*ngIf="showDetailFlag"
(click)="clickBg()">
<div style="width: 50%; height: 80%; margin-top: 2rem">
<img [src]="curItemUrl" style="height: 100%; width: auto;"
(click)="clickBigItem($event)">
</div>
</div>
</div>
</app-player-content-wrapper>
</div> </div>
<div style="display: none">
<audio *ngIf="data.contentObj?.titleObj?.audio_url" #audioElement
[src]="data.contentObj?.titleObj?.audio_url" preload="auto"> </audio>
</div>
@import '../style/common_mixin'; .game-container {
.player-preview-content {
width: 100%;
height: 100%;
background-color: white;
.lesson-header{
width: 100%;
position: absolute;
top: 0;
img{
width: 100%;
height: auto;
}
.title{
font-family: 'BerlinSansFBDemi-Bold';
color: #f5d11f;
font-size: 4vw;
font-weight: 900;
width: 15%;
height: 70%;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
line-height: 4vw;
}
}
.left-box{text-align: right;padding-right: 1rem}
.right-box{text-align: left;padding-left: 1rem}
.left-box, .right-box{
height: 100%;
position: relative;
.a, .b{
width: 30%;
height: 100%;
display: inline-block;
position: relative;
margin: 0 .5rem
}
.a{
width: 40%;
}
}
.letter-box {
//height: 100%;
position: relative;
display: inline-block;
width: 100%;
height: 100%;
//margin-top: 5%;
//margin-left: 8%;
//margin-right: 8%;
img{
max-width: 100%;
max-height: 100%;
//position: absolute;
//left: 0;
height: 100%;
}
.letters{
position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
top: 0; //background-image: url("assets/play/bg.jpg");
left: 0; //background: #ffffff;
background-repeat: no-repeat;
.letter{ background-size: cover;
position: absolute; }
font-weight: 600;
//width: calc(100% / 13);
text-align: center;
--cw: calc(100% / 13);
width: var(--cw);
line-height: calc( var(--cw) * 13);
font-family: LiQiangXingShu;
padding: 0 1rem;
height: 20%;
font-size: 7vmin;
}
}
} #canvas {
.l-box{
cursor: pointer;
width: 100%;
height: 100%;
display: flex;
flex-direction: column-reverse;
font-weight: 900;
img{
max-width: 100%;
max-height: 100%;
width: 100%;
height: auto;
}
}
}
.show-item-content {
position: absolute;
width: 100%;
height: 100%;
//background-color:rgba(255,255,255,1);
display: flex;
align-items: center;
justify-content:center;
}
@font-face
{
font-family: 'BRLNSDB_1';
src: url("/assets/font/BRLNSDB_1.TTF") format("opentype");
}
@font-face
{
font-family: 'CooperBlackStd';
src: url("/assets/font/CooperBlackStd.otf") format("opentype");
} }
This diff is collapsed.
const res = [
['bg', "assets/play/bg.jpg"],
['logo', "assets/default/logo.png"],
];
export default res;
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
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