Commit 0c086d72 authored by liujiaxin's avatar liujiaxin

11

parent 8a51c964
......@@ -30,7 +30,10 @@
],
"styles": [
"./node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
"src/styles.css"
"./node_modules/font-awesome/css/font-awesome.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/animate.css/animate.min.css",
"src/styles.scss"
],
"scripts": []
},
......
......@@ -24,6 +24,7 @@ import {AudioRecorderComponent} from './common/audio-recorder/audio-recorder.com
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { BrLineBreakerPipe } from './pipes/br-line-breaker.pipe';
registerLocaleData(zh);
......@@ -36,6 +37,7 @@ registerLocaleData(zh);
AudioRecorderComponent,
UploadImageWithPreviewComponent,
BackgroundImagePipe,
BrLineBreakerPipe,
ResourcePipe,
TimePipe,
UploadVideoComponent,
......
@import '../style/common_mixin.css';
.model-content {
width: 100%;
height: 100%;
}
<div class="model-content">
<div style="position: absolute; left: 200px; top: 100px; width: 800px;">
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
<div class="courseware-container d-flex">
<div class="col-8">
<app-upload-image-with-preview
[picUrl]="item.pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')"
[picUrl]="item.contentObj.pic_id"
(imageUploaded)="onImageUploadSuccess($event)"
></app-upload-image-with-preview>
</div>
<div class="flex-fill" style="flex-direction: column;">
<app-audio-recorder
[audioUrl]="item.audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
[audioUrl]="item.contentObj.audio_id"
(audioUploaded)="onAudioUploadSuccess($event)"
></app-audio-recorder>
<app-custom-hot-zone></app-custom-hot-zone>
<app-upload-video></app-upload-video>
<app-lesson-title-config></app-lesson-title-config>
<nz-divider></nz-divider>
<h4>Text</h4>
<div class="flex-fill">
<textarea rows="4"
placeholder="add text"
nz-input
[(ngModel)]="inputText"
(blur)="saveText()"></textarea>
</div>
<nz-divider></nz-divider>
<h4>Thinking</h4>
<div class="flex-fill">
<textarea rows="4"
placeholder="add thinking question"
nz-input
[(ngModel)]="question"
(blur)="saveText()"></textarea>
</div>
</div>
</div>
\ No newline at end of file
//@import '../../../src/styles.css';
.d-flex{
display: flex;
}
.p-img {
width: 100%;
min-height: 35rem;
border: 1px solid gray;
background-color: #ddd;
background-repeat: no-repeat;
background-position: center;
background-size: contain
}
......@@ -5,28 +5,39 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit, OnChanges, OnDestroy {
inputText = '';
question = '';
// 储存数据用
saveKey = "test_0011";
saveKey = 'ww_audio_image';
// 储存对象
item;
audio = new Audio();
isPlaying = false;
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) {
constructor(private appRef: ApplicationRef,
private changeDetectorRef: ChangeDetectorRef) {
}
ngOnInit() {
this.item = {};
this.item = {
contentObj: {
text: 'aaaaaaa',
question: 'sdfsdfsdf',
pic_id: null,
audio_id: null
}
};
// 获取存储的数据
(<any> window).courseware.getData((data) => {
(window as any).courseware.getData((data) => {
console.log(123123, data)
if (data) {
this.item = data;
}
......@@ -42,40 +53,52 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
ngOnChanges() {
this.inputText = this.item.contentObj.text || '';
this.question = this.item.contentObj.question || '';
}
ngOnDestroy() {
this.audio.pause();
this.audio = null;
}
init() {
this.audio.onplay = () => {
this.onPlay();
};
this.audio.onpause = () => {
this.onPause();
};
this.inputText = this.item.contentObj.text || '';
this.question = this.item.contentObj.question || '';
}
onPlay() {
this.isPlaying = true;
}
onPause() {
this.isPlaying = false;
}
onClickImg() {
this.audio.play();
}
/**
* 储存图片数据
* @param e
*/
onImageUploadSuccess(e, key) {
this.item[key] = e.url;
this.save();
}
/**
* 储存音频数据
* @param e
*/
onAudioUploadSuccess(e, key) {
this.item[key] = e.url;
onImageUploadSuccess(e) {
this.item.contentObj.pic_id = e.url;
this.save();
}
onAudioUploadSuccess(e) {
this.item.contentObj.audio_id = e.url;
this.save();
}
/**
* 储存数据
*/
......@@ -83,6 +106,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
(<any> window).courseware.setData(this.item, null, this.saveKey);
this.refresh();
}
saveText() {
this.item.contentObj.text = this.inputText.trim();
this.item.contentObj.question = this.question.trim();
this.save();
}
/**
* 刷新 渲染页面
......
import {Pipe, PipeTransform} from '@angular/core';
// import {ElectronUtil} from '../util/ElectronUtil';
declare const APP_PATH;
// const isInElectron = localStorage.getItem('electron');
const isInElectron = localStorage.getItem('electron');
@Pipe({
name: 'backgroundImage'
......@@ -10,10 +9,7 @@ declare const APP_PATH;
export class BackgroundImagePipe implements PipeTransform {
transform(value: any, coursewareSid?: string) {
// const ret = value ? `url(${value})` : '';
const ret = value ? `url(${value})` : '';
return ret;
// let ret = value > 0 ? `url(/api/media-resource/${value}/file)` : '';
return value > 0 ? `url(/api/media-resource/${value}/file)` : '';
// if (isInElectron && ElectronUtil.hasCached(coursewareSid, value)) {
// ret = `url(file://${APP_PATH}/courseware_cache/${coursewareSid}/${value})`;
// }
......
import {Pipe, PipeTransform} from '@angular/core';
@Pipe({
name: 'brLineBreaker'
})
export class BrLineBreakerPipe implements PipeTransform {
transform(value: any, args?: any): any {
return value ? value.replace(/\n/g, '<br />') : '';
}
}
......@@ -2,25 +2,17 @@ import {Pipe, PipeTransform} from '@angular/core';
// import {ElectronUtil} from '../util/ElectronUtil';
declare const APP_PATH;
// const isInElectron = localStorage.getItem('electron');
const isInElectron = localStorage.getItem('electron');
@Pipe({
name: 'resource'
})
export class ResourcePipe implements PipeTransform {
transform(pic_url: any, coursewareSid?: string): string {
// return pic_url;
if (pic_url && typeof pic_url === 'object') {
return pic_url;
}
// console.log('resource', pic_url)
return `${pic_url}?t=${Math.random()}`;
// let ret = value ? `/api/resource/${value}/file` : '';
// let ret = res_id ? `/resource/audio/${res_id}` : '';
// if (isInElectron && ElectronUtil.hasCached(coursewareSid, res_id)) {
// ret = `file://${APP_PATH}/courseware_cache/${coursewareSid}/${res_id}`;
transform(value: any, coursewareSid?: string): string {
return value ? `/api/media-resource/${value}/file` : '';
// if (isInElectron && ElectronUtil.hasCached(coursewareSid, value)) {
// ret = `file://${APP_PATH}/courseware_cache/${coursewareSid}/${value}`;
// }
// return ret;
}
......
.game-container {
width: 100%;
height: 100%;
background: #ffffff;
background-size: cover;
}
#canvas {
}
@font-face
{
font-family: 'BRLNSDB';
src: url("../../assets/font/BRLNSDB.TTF") ;
}
<div class="game-container" #wrap>
<canvas id="canvas" #canvas></canvas>
<div class="player-preview-content">
<div
#pic
class="p-courseware-image-audio"
(click)="playAudio($event);"
[style.background-image]="data?.contentObj.pic_id ? 'url('+ data?.contentObj.pic_id +')' : 'url(assets/common/pic-not-upload.jpg)'"
>
</div>
<div class="text" #text
[innerHTML]="data.contentObj.text | brLineBreaker">
</div>
<div class="p-question-btn" [class.show-question]="showQuestion" *ngIf="data?.contentObj?.question"
(click)="toggleQuestionBox()">
<i class="anticon anticon-star"></i>
Thinking
</div>
<div class="p-question-box" [@show-question] *ngIf="showQuestion">
<div class="i-title">
Thinking
</div>
<div class="i-content"
[innerHTML]="data?.contentObj?.question | brLineBreaker"
>
</div>
</div>
</div>
@import '../../app/style/123common_mixin.scss';
.player-preview-content {
width: 100%;
height: 100%;
background-color: white;
}
.p-courseware-image-audio {
width: 100%;
height: 100vh;
margin: 0 auto;
position: relative;
text-align: center;
@include k-img-bg();
}
.text {
font-family: 'ChalkboardSE-Regular';
display: block;
word-break: break-word;
word-spacing: 1px;
line-height: 1.15;
word-wrap: break-word;
white-space: normal;
width: 100%;
padding: 0 5rem;
position: relative;
letter-spacing: 1px;
font-size: 2rem;
}
.p-question-btn {
border: 1px solid #555;
position: absolute;
right: 3rem;
top: 60vh;
background-color: white;
padding: 0.1rem 1rem;
border-radius: 1rem;
text-shadow: 0 0 1px #555;
cursor: pointer;
@include k-no-select();
}
$blue: #1890ff;
.show-question {
color: $blue;
box-shadow: inset 0 0 10px #1890ff;
text-shadow: none;
border-color: #1890ff;
}
.p-question-box {
position: absolute;
width: 50vh;
right: 25vh;
top: 25vh;
background-color: white;
border: 1.5px solid $blue;
border-radius: 1rem;
overflow: hidden;
.i-title {
padding: 0.2rem 1rem;
font-size: 1rem;
color: white;
background-color: $blue;
text-align: center;
}
.i-content {
padding: 1rem;
word-break: break-word;
color: #555;
font-family: "ChalkboardSE-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 21vh;
font-size: 1.4rem;
@include k-no-select();
}
}
This diff is collapsed.
@mixin hide-overflow-text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
@mixin k-no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@mixin k-img-bg {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
......@@ -3,6 +3,8 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
if (environment.production) {
enableProdMode();
......
/* You can add global styles to this file, and also import other style files */
/* You can add global styles to this file, and also import other style files */
@mixin hide-overflow-text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
@mixin k-no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@mixin k-img-bg {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
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