Commit df3295f8 authored by limingzhe's avatar limingzhe

first

parent 1f535d89
...@@ -44,7 +44,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -44,7 +44,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
@ViewChild('canvas') canvas: ElementRef; @ViewChild('canvas') canvas: ElementRef;
@ViewChild('wrap') wrap: ElementRef; @ViewChild('wrap') wrap: ElementRef;
@HostListener('window:resize', ['$event']) // @HostListener('window:resize', ['$event'])
canvasWidth = 1280; canvasWidth = 1280;
canvasHeight = 720; canvasHeight = 720;
...@@ -68,7 +68,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -68,7 +68,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
images = new Map(); images = new Map();
animationId: any; animationId: any;
winResizeEventStream = new Subject(); // winResizeEventStream = new Subject();
canvasLeft; canvasLeft;
canvasTop; canvasTop;
...@@ -95,7 +95,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -95,7 +95,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
onResize(event) { onResize(event) {
this.winResizeEventStream.next(); // this.winResizeEventStream.next();
} }
...@@ -655,11 +655,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -655,11 +655,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
initListener() { initListener() {
this.winResizeEventStream // this.winResizeEventStream
.pipe(debounceTime(500)) // .pipe(debounceTime(500))
.subscribe(data => { // .subscribe(data => {
this.renderAfterResize(); // this.renderAfterResize();
}); // });
if (this.IsPC()) { if (this.IsPC()) {
......
<div class="courseware-container d-flex"> <div class="courseware-container" #videoContainer>
<div nz-col nzSpan="5" nzOffset="1" class="img-box"
*ngFor="let it of picArr; let i = index">
<span>item-{{i+1}}</span>
<div class="img-box-upload">
<app-upload-image-with-preview
[picUrl]="it.pic_url"
(imageUploaded)="onImageUploadSuccessByItem($event, it)">
</app-upload-image-with-preview>
</div>
<app-audio-recorder
[audioUrl]="it.audio_url"
(audioUploaded)="onAudioUploadSuccessByItem($event, it)"
></app-audio-recorder>
<div class="gutter" style="width: 100%;">
<app-lesson-title-config
(titleUpdated)="updateTitleObjSuccess($event)"
[withIcon]="false"
[titleObj]="titleObj">
</app-lesson-title-config>
<nz-divider></nz-divider>
</div> </div>
<!---->
<!--<app-custom-hot-zone-->
<!--[bgItem]="bgItem"-->
<!--[hotZoneItemArr]="hotZoneItemArr"-->
<!--(save)="saveData($event)"-->
<!--&gt;-->
<!--</app-custom-hot-zone>-->
<!--<div nz-row nzType="flex" nzAlign="middle" style="margin-top: 5vw">-->
<!--<div nz-col nzSpan="5" nzOffset="1" class="img-box"-->
<!--*ngFor="let it of hotZoneItemArr; let i = index">-->
<!--<span>item-{{i+1}}</span>-->
<!--<div class="img-box-upload">-->
<!--<app-upload-image-with-preview-->
<!--[picUrl]="it.pic_url"-->
<!--(imageUploaded)="onImageUploadSuccessByItem($event, it)">-->
<!--</app-upload-image-with-preview>-->
<!--</div>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it.audio_url"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it)"-->
<!--&gt;</app-audio-recorder>-->
<!--</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, false)"-->
<!--#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{ .courseware-container {
display: flex; padding: 5%;
.t{ }
flex: 1 1 auto;
margin-right: 2rem;
}
.a{
} .img-box {
margin-bottom: 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
} }
.aud-w{ .img-box-upload{
width: 100%; 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,
OnDestroy,
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, OnDestroy {
// @Input()
item;
@ViewChild('videoContainer')
videoContainer: ElementRef;
@ViewChild('videoNode')
videoNode: ElementRef;
@Output()
update = new EventEmitter();
intervalId;
picArr;
// 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_10';
audio_url: '',
content: '',
icons: [],
type: ''
};
teststr = "";
constructor(private appRef: ApplicationRef) {
constructor(private nzMessageService: NzMessageService,
private appRef: ApplicationRef) {
} }
ngOnInit() {
let _this = this;
(<any>window).courseware.getData(function(data){
if(data){
_this.titleObj = data;
setTimeout(() => {
_this.appRef.tick();
}, 1);
}
});
}
ngOnChanges() { 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() {
console.log(2, 'ngOnInit');
// if (typeof this.item.contentObj.video_url !== 'string') {
// // this.item.contentObj.video_url = '';
// setTimeout(() => {
// this.item.contentObj.video_url = '';
// });
// }
const getData = (<any> window).courseware.getData;
getData((data) => {
if (data) {
this.item = data;
} else {
this.item = {};
this.item.contentObj = {};
}
this.initDefaultData();
console.log('data:', data);
this.init();
this.refresh();
}, this.KEY);
}
initDefaultData() {
const picArr = this.item.contentObj.picArr;
if (!picArr) {
const picArr = [];
for (let i = 0; i < 4; i ++) {
picArr.push({
pic_url: '',
audio_url: ''
});
}
this.item.contentObj.picArr = picArr;
}
} }
ngOnDestroy() { ngOnDestroy() {
console.log('in ngOnDestory');
}
init() {
this.picArr = this.item.contentObj.picArr || [];
this.item.contentObj.picArr = this.picArr;
} }
updateTitleObjSuccess(titleObj) {
this.titleObj = titleObj;
onImageUploadSuccessByItem(e, item, id = null) {
if (id != null) {
item[id + '_pic_url'] = e.url;
} else {
item.pic_url = e.url;
}
this.save(); this.save();
// this.update.emit(this.item);
// console.log('this.item: ', this.item);
} }
onTitleAudioUploadSuccess(res) {
this.titleObj.audio_url = res.url;
onAudioUploadSuccessByItem(e, item, id = null) {
if (id != null) {
item[id + '_audio_url'] = e.url;
} else {
item.audio_url = e.url;
}
// this.update.emit(this.item);
this.save(); this.save();
} }
save() {
(<any>window).courseware.setData(this.titleObj);
save() {
(<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%; width: 100%;
height: 100%; height: 100%;
background-color: white; //background-image: url("/assets/listen-read-circle/bg.jpg");
.lesson-header{ background: #ffffff;
width: 100%; background-repeat: no-repeat;
position: absolute; background-size: cover;
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%;
height: 100%;
top: 0;
left: 0;
.letter{
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;
}
}
}
.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;
}
}
#canvas {
.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';
// src: url("/assets/font/BRLNSDB.TTF") format("opentype");
//}
//@font-face
//{
// font-family: 'RoundedBold';
// src: url("/assets/font/Arial Rounded Bold.otf") format("opentype");
//}
This diff is collapsed.
const res = [
['bg', "assets/play/bg.jpg"],
['item_bg', "assets/play/item_bg.png"],
['icon_1', "assets/play/icon_1.png"],
['icon_2', "assets/play/icon_2.png"],
['icon_3', "assets/play/icon_3.png"],
['icon_4', "assets/play/icon_4.png"],
['default_item', "assets/default/item.jpg"],
];
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.
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