diff --git a/angular.json b/angular.json index 0aaaa7a66595c2dade091b9d1437192cd5fc0a9e..9900bc5702299b97f8c92855a06d0b03d6ff93d6 100644 --- a/angular.json +++ b/angular.json @@ -3,13 +3,9 @@ "version": 1, "newProjectRoot": "projects", "projects": { - "ng-one": { + "origin-angular": { "projectType": "application", - "schematics": { - "@schematics/angular:component": { - "style": "scss" - } - }, + "schematics": {}, "root": "", "sourceRoot": "src", "prefix": "app", @@ -17,39 +13,26 @@ "build": { "builder": "@angular-devkit/build-angular:browser", "options": { - "outputPath": "dist", + "outputPath": "dist/origin-angular", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", - "aot": false, + "aot": true, "assets": [ "src/favicon.ico", "src/assets", - { "glob": "**/*", "input": "src/assets/libs/service-worker/", "output": "/" }, { "glob": "**/*", "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/", "output": "/assets/" - }, - { - "glob": "**/*", - "input": "./dist/game/", - "output": "/assets/cocos/" } ], "styles": [ - "src/styles.scss", "./node_modules/ng-zorro-antd/ng-zorro-antd.min.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.css" ], - "scripts": [ - "src/assets/libs/audio-recorder/lame.min.js", - "src/assets/libs/audio-recorder/worker.js", - "src/assets/libs/audio-recorder/recorder.js" - ] + "scripts": [] }, "configurations": { "production": { @@ -64,28 +47,39 @@ "sourceMap": false, "extractCss": true, "namedChunks": false, - "aot": true, "extractLicenses": true, "vendorChunk": false, - "buildOptimizer": true + "buildOptimizer": true, + "budgets": [ + { + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "6kb", + "maximumError": "10kb" + } + ] } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { - "browserTarget": "ng-one:build" + "browserTarget": "origin-angular:build" }, "configurations": { "production": { - "browserTarget": "ng-one:build:production" + "browserTarget": "origin-angular:build:production" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { - "browserTarget": "ng-one:build" + "browserTarget": "origin-angular:build" } }, "test": { @@ -100,7 +94,8 @@ "src/assets" ], "styles": [ - "src/styles.scss" + "./node_modules/ng-zorro-antd/ng-zorro-antd.min.css", + "src/styles.css" ], "scripts": [] } @@ -122,15 +117,16 @@ "builder": "@angular-devkit/build-angular:protractor", "options": { "protractorConfig": "e2e/protractor.conf.js", - "devServerTarget": "ng-one:serve" + "devServerTarget": "origin-angular:serve" }, "configurations": { "production": { - "devServerTarget": "ng-one:serve:production" + "devServerTarget": "origin-angular:serve:production" } } } } - }}, - "defaultProject": "ng-one" -} \ No newline at end of file + } + }, + "defaultProject": "origin-angular" +} diff --git a/package.json b/package.json index ad99808abda6cc039c2ab23c0e9f16debbff416b..c7553df846f31e18a81fc55562a4ba843a3e0b9c 100644 --- a/package.json +++ b/package.json @@ -1,75 +1,56 @@ { "name": "ng-template-generator", "version": "0.0.1", - "scripts": { - "start": "ng serve", + "scripts": { + "start": "ng serve", "build": "ng build --build--optimizer --aot --base-href /JGT/v3/", - "publish": "node ./bin/publish.js" + "publish": "node ./bin/publish.js", + "ng": "ng", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" }, "private": true, "dependencies": { - "@angular/animations": "^7.2.10", - "@angular/cdk": "^7.2.2", - "@angular/common": "^7.2.10", - "@angular/compiler": "^7.2.10", - "@angular/core": "^7.2.10", - "@angular/flex-layout": "^7.0.0-beta.24", - "@angular/forms": "^7.2.10", - "@angular/http": "^7.2.10", - "@angular/material": "^7.2.2", - "@angular/platform-browser": "^7.2.10", - "@angular/platform-browser-dynamic": "^7.2.10", - "@angular/platform-server": "^7.2.10", - "@angular/router": "^7.2.10", - "@tweenjs/tween.js": "^17.3.0", - "ali-oss": "^6.0.0", - "angular-cropperjs": "^1.0.1", - "angular2-draggable": "^2.1.9", - "angular2-fontawesome": "^5.2.1", - "angularx-qrcode": "^1.5.3", - "animate.css": "^3.7.0", - "bootstrap": "^4.1.1", - "browser-image-compression": "^1.0.5", - "compressing": "^1.4.0", - "core-js": "^2.6.1", - "cropperjs": "1.4.1", - "css-element-queries": "^1.0.2", - "decimal.js": "^10.0.1", - "font-awesome": "^4.7.0", - "hammerjs": "^2.0.8", - "install": "^0.12.2", - "karma-cli": "^2.0.0", - "lodash": "^4.17.10", - "nedb": "^1.8.0", - "ng-lottie": "^0.3.1", - "ng-zorro-antd": "^7.2.0", - "npm": "^6.5.0", - "rxjs": "^6.3.3", - "rxjs-compat": "^6.3.3", - "rxjs-tslint": "^0.1.6", + "@angular/animations": "~9.0.2", + "@angular/common": "~9.0.2", + "@angular/compiler": "~9.0.2", + "@angular/core": "~9.0.2", + "@angular/forms": "~9.0.2", + "@angular/platform-browser": "~9.0.2", + "@angular/platform-browser-dynamic": "~9.0.2", + "@angular/router": "~9.0.2", + "@fortawesome/angular-fontawesome": "^0.6.0", + "@fortawesome/fontawesome-svg-core": "^1.2.27", + "@fortawesome/free-regular-svg-icons": "^5.12.1", + "@fortawesome/free-solid-svg-icons": "^5.12.1", + "@tweenjs/tween.js": "^18.5.0", + "ali-oss": "^6.5.1", + "ng-zorro-antd": "^8.5.2", + "rxjs": "~6.5.4", "spark-md5": "^3.0.0", - "webpack": "^4.28.2", - "zone.js": "^0.8.26" + "tslib": "^1.10.0", + "zone.js": "~0.10.2" }, "devDependencies": { - "@angular-devkit/build-angular": "^0.11.4", - "@angular/cli": "^7.2.10", - "@angular/compiler-cli": "^7.2.10", - "@angular/language-service": "^7.2.10", - "@types/jasmine": "^3.3.5", + "@angular-devkit/build-angular": "~0.900.3", + "@angular/cli": "~9.0.3", + "@angular/compiler-cli": "~9.0.2", + "@angular/language-service": "~9.0.2", + "@types/jasmine": "~3.5.0", "@types/jasminewd2": "~2.0.3", - "@types/node": "^10.12.18", - "codelyzer": "^4.5.0", - "jasmine-core": "^3.3.0", - "jasmine-spec-reporter": "^4.2.1", - "karma": "^3.1.4", - "karma-chrome-launcher": "^2.2.0", - "karma-coverage-istanbul-reporter": "~2.0.0", - "karma-jasmine": "^2.0.1", - "karma-jasmine-html-reporter": "^1.4.0", - "protractor": "^5.4.2", - "ts-node": "~5.0.1", - "tslint": "^5.12.0", - "typescript": "3.1.1" + "@types/node": "^12.11.1", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.3.0", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~2.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~5.18.0", + "typescript": "~3.7.5" } } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index c918314155c47071eefdce5a12001f17719a4546..43e76cf1f63519fac5fd34a9ac14b582542b9197 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -5,12 +5,12 @@ import { Component , OnInit} from '@angular/core'; templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) -export class AppComponent implements OnInit{ +export class AppComponent implements OnInit { type = 'play'; constructor() { - let tp = this.getQueryString("type"); - if (tp){ + const tp = this.getQueryString('type'); + if (tp) { this.type = tp; } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index d0edc727106ac4b197c652dded2320b1ee953942..020fa97a2fd89dc2811c6cb58f5949c46ed27635 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,30 +1,28 @@ - import { BrowserModule } from '@angular/platform-browser'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { HttpClientModule } from '@angular/common/http'; -import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd'; -import {Angular2FontawesomeModule} from 'angular2-fontawesome/angular2-fontawesome'; import { AppComponent } from './app.component'; -import { FormComponent } from './form/form.component'; -import { PlayComponent } from "./play/play.component"; - - -import { LessonTitleConfigComponent } from './common/lesson-title-config/lesson-title-config.component'; -import { AudioRecorderComponent } from './common/audio-recorder/audio-recorder.component'; -import { PlayerContentWrapperComponent } from './common/player-content-wrapper/player-content-wrapper.component'; - -/** é…ç½® angular i18n **/ +import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd'; +import { FormsModule } from '@angular/forms'; +import { HttpClientModule } from '@angular/common/http'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { registerLocaleData } from '@angular/common'; import zh from '@angular/common/locales/zh'; -import {UploadImageWithPreviewComponent} from "./common/upload-image-with-preview/upload-image-with-preview.component"; -import {BackgroundImagePipe} from "./pipes/background-image.pipe"; -import {UploadVideoComponent} from "./common/upload-video/upload-video.component"; -import {ResourcePipe} from "./pipes/resource.pipe"; -import {TimePipe} from "./pipes/time.pipe"; -import {CustomHotZoneComponent} from "./common/custom-hot-zone/custom-hot-zone.component"; +import {FormComponent} from './form/form.component'; +import {PlayComponent} from './play/play.component'; +import {LessonTitleConfigComponent} from './common/lesson-title-config/lesson-title-config.component'; +import {BackgroundImagePipe} from './pipes/background-image.pipe'; +import {UploadImageWithPreviewComponent} from './common/upload-image-with-preview/upload-image-with-preview.component'; +import {PlayerContentWrapperComponent} from './common/player-content-wrapper/player-content-wrapper.component'; +import {CustomHotZoneComponent} from './common/custom-hot-zone/custom-hot-zone.component'; +import {UploadVideoComponent} from './common/upload-video/upload-video.component'; +import {TimePipe} from './pipes/time.pipe'; +import {ResourcePipe} from './pipes/resource.pipe'; +import {AudioRecorderComponent} from './common/audio-recorder/audio-recorder.component'; +import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome'; +import { fas } from '@fortawesome/free-solid-svg-icons'; +import { far } from '@fortawesome/free-regular-svg-icons'; + registerLocaleData(zh); @NgModule({ @@ -42,20 +40,21 @@ registerLocaleData(zh); CustomHotZoneComponent, PlayerContentWrapperComponent + ], imports: [ + BrowserModule, + NgZorroAntdModule, FormsModule, HttpClientModule, BrowserAnimationsModule, - BrowserModule, - Angular2FontawesomeModule, - NgZorroAntdModule, - - ], - /** é…ç½® ng-zorro-antd 国际化(文案 åŠ æ—¥æœŸï¼‰ **/ - providers : [ - { provide: NZ_I18N, useValue: zh_CN } + FontAwesomeModule ], + providers: [{ provide: NZ_I18N, useValue: zh_CN }], bootstrap: [AppComponent] }) -export class AppModule { } +export class AppModule { + constructor(library: FaIconLibrary) { + library.addIconPacks(fas, far); + } +} diff --git a/src/app/common/audio-recorder/audio-recorder.component.html b/src/app/common/audio-recorder/audio-recorder.component.html index 7e1ab8934ef39f3398b681801f348b52411c4f34..9edd45e08c5059d7f14f9ac9c41233d70d4efc0b 100644 --- a/src/app/common/audio-recorder/audio-recorder.component.html +++ b/src/app/common/audio-recorder/audio-recorder.component.html @@ -1,30 +1,30 @@ <div class="d-flex"> <div class="p-btn-record d-flex"> <div class="btn-clear" (click)="onBtnClearAudio()" *ngIf="withRmBtn && (audioUrl || audioBlob)"> - <fa name="close"></fa> + <fa-icon icon="close"></fa-icon> </div> <div class="btn-record" *ngIf="type===Type.RECORD && !isUploading" [class.p-recording]="isRecording" (click)="onBtnRecord()"> - <fa name="microphone"></fa> + <fa-icon icon="microphone"></fa-icon> Record Audio </div> <nz-upload [nzAccept] = "'.mp3'" - [nzShowUploadList]="false" + [nzShowUploadList]="false" [nzAction]="uploadUrl" [nzData]="uploadData" (nzChange)="handleChange($event)"> <div class="btn-upload" [ngClass]="{'has-clear': withRmBtn && (audioUrl || audioBlob)}" *ngIf="type===Type.UPLOAD && !isUploading"> - <fa name="upload"></fa> + <fa-icon icon="upload"></fa-icon> Upload Audio </div> </nz-upload> <div class="p-upload-progress-bg" *ngIf="isUploading"> <div class="i-bg" [style.width]="progress+'%'"></div> <div class="i-text"> - <fa name="cloud-upload"></fa> + <fa-icon icon="cloud-upload-alt"></fa-icon> Uploading... </div> </div> @@ -35,14 +35,14 @@ <ng-template #truthyTemplate > <div class="btn-delete" (click)="onBtnDeleteAudio()"> - <fa name="close"></fa> + <fa-icon icon="close"></fa-icon> </div> </ng-template> <ng-template #falsyTemplate> <div class="btn-switch" (click)="onBtnSwitchType()"> - <fa name="cog"></fa> + <fa-icon icon="cog"></fa-icon> </div> </ng-template> @@ -55,7 +55,7 @@ <nz-progress [nzPercent]="percent" [nzWidth]="30" [nzFormat]="progressText" nzType="circle"></nz-progress> <div class="p-btn-play" [style.left]="isPlaying?'8px':''"> - <fa [name]="playIcon"></fa> + <fa-icon [icon]="playIcon"></fa-icon> </div> </div> </div> diff --git a/src/app/common/audio-recorder/audio-recorder.component.scss b/src/app/common/audio-recorder/audio-recorder.component.scss index 9b6197d0ec3c0e1146c9d19a4e77e2618965c8f7..8267c9d059853b3be3cbf4cb51ee9dd66214379a 100644 --- a/src/app/common/audio-recorder/audio-recorder.component.scss +++ b/src/app/common/audio-recorder/audio-recorder.component.scss @@ -1,3 +1,6 @@ +.d-flex{ + display: flex; +} .p-btn-record { font-size: 0.9rem; color: #555; diff --git a/src/app/common/audio-recorder/audio-recorder.component.ts b/src/app/common/audio-recorder/audio-recorder.component.ts index c2f8259df442ff6f2530df4eda50e2d699238faf..afc2686a6d559f3fd41811afca709e048a5d1612 100644 --- a/src/app/common/audio-recorder/audio-recorder.component.ts +++ b/src/app/common/audio-recorder/audio-recorder.component.ts @@ -1,7 +1,7 @@ -import {Component, EventEmitter, Input, OnDestroy, OnInit, Output, NgZone, OnChanges} from '@angular/core'; +import {Component, EventEmitter, Input, OnDestroy, OnInit, Output, NgZone, OnChanges} from '@angular/core'; import {NzMessageService, NzNotificationService, UploadFile} from 'ng-zorro-antd'; import {HttpClient, HttpEvent, HttpEventType, HttpRequest} from '@angular/common/http'; -import {environment} from '../../../environments/environment'; +import {environment} from '../../../environments/environment'; declare var Recorder; @@ -9,7 +9,7 @@ declare var Recorder; selector: 'app-audio-recorder', templateUrl: './audio-recorder.component.html', styleUrls: ['./audio-recorder.component.scss'] -}) +}) export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { _audioUrl: string; audio = new Audio(); @@ -21,8 +21,8 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { Type = Type; withRmBtn = false; - uploadUrl = (<any>window).courseware.uploadUrl(); - uploadData = (<any>window).courseware.uploadData(); + uploadUrl = (window as any).courseware.uploadUrl(); + uploadData = (window as any).courseware.uploadData(); @Input() needRemove = false; @@ -32,7 +32,7 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { @Input() set audioUrl(url) { - this._audioUrl = url + this._audioUrl = url; if (url) { this.audio.src = this._audioUrl; this.audio.load(); @@ -52,8 +52,8 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { recorder: any; audioBlob: any; - - constructor( private nzMessageService: NzMessageService ) { + + constructor( private nzMessageService: NzMessageService ) { } @@ -137,11 +137,11 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { } // 开始录音 - onBtnRecord = () => { + onBtnRecord = () => { } // åˆ‡æ¢æ¨¡å¼ - onBtnSwitchType() { + onBtnSwitchType() { } onBtnClearAudio() { this.audioRemoved.emit(); @@ -152,7 +152,7 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { this.audioRemoved.emit(); } - handleChange(info: { type: string, file: UploadFile, event: any }): void { + handleChange(info: { type: string, file: UploadFile, event: any }): void { switch (info.type) { case 'start': this.isUploading = true; @@ -185,19 +185,19 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { } return true; } - beforeUpload = (file: File) => { + beforeUpload = (file: File) => { this.audioUrl = null; if (!this.checkSelectFile(file)) { return false; } this.isUploading = true; - this.progress = 0; + this.progress = 0; } - uploadSuccess = (url) => { - this.nzMessageService.info('Upload Success'); - this.isUploading = false; - this.audioUrl = url; + uploadSuccess = (url) => { + this.nzMessageService.info('Upload Success'); + this.isUploading = false; + this.audioUrl = url; } uploadFailure = (err, file) => { this.isUploading = false; diff --git a/src/app/common/custom-hot-zone/custom-hot-zone.component.html b/src/app/common/custom-hot-zone/custom-hot-zone.component.html index 3146db32aaf4b2b6527c5dfa2a9a4918c75eb492..273e0d5923c92c844ef5987de039a584eff710fc 100644 --- a/src/app/common/custom-hot-zone/custom-hot-zone.component.html +++ b/src/app/common/custom-hot-zone/custom-hot-zone.component.html @@ -16,7 +16,7 @@ <div class="bg-box"> <app-upload-image-with-preview - [picUrl]="bgItem.url" + [picUrl]="bgItem?.url" (imageUploaded)="onBackgroundUploadSuccess($event)"> </app-upload-image-with-preview> </div> @@ -76,7 +76,7 @@ <button class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round" (click)="saveClick()"> - <i nz-icon type="save"></i> + <i nz-icon nzType="save"></i> Save </button> diff --git a/src/app/common/custom-hot-zone/custom-hot-zone.component.ts b/src/app/common/custom-hot-zone/custom-hot-zone.component.ts index 809b7559140248228e6c6f73bca394e431d693cb..6eed242201952fd9a1735a09711465e6e20a6999 100644 --- a/src/app/common/custom-hot-zone/custom-hot-zone.component.ts +++ b/src/app/common/custom-hot-zone/custom-hot-zone.component.ts @@ -42,8 +42,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { @Output() save = new EventEmitter(); - @ViewChild('canvas') canvas: ElementRef; - @ViewChild('wrap') wrap: ElementRef; + @ViewChild('canvas', {static: true }) canvas: ElementRef; + @ViewChild('wrap', {static: true }) wrap: ElementRef; // @HostListener('window:resize', ['$event']) canvasWidth = 1280; @@ -613,7 +613,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { update() { - + if (!this.ctx) { + return; + } this.animationId = window.requestAnimationFrame(this.update.bind(this)); diff --git a/src/app/common/lesson-title-config/lesson-title-config.component.html b/src/app/common/lesson-title-config/lesson-title-config.component.html index e3e3f5460f3ab06dbd1caff1eb4eeccf05b84675..996dc651e4b301c3f940ae9cb200d14bc224a086 100644 --- a/src/app/common/lesson-title-config/lesson-title-config.component.html +++ b/src/app/common/lesson-title-config/lesson-title-config.component.html @@ -1,64 +1,71 @@ + <div class="title-config"> <div class="title-wrap"> - <div class="row" style="margin: 5px;"> + <div class="row" style="margin: 5px;"> <div class="p-content" style="width:100%"> - <div class="p-tool-box d-flex" style="background: #fff;"> + <div class="p-tool-box d-flex" style="background: #fff;"> <nz-select class="ml-1" style="width: 120px;" [(ngModel)]="__fontFamily" (ngModelChange)="onChangeFontFamily($event)" nzPlaceHolder="Font Family" - [nzDropdownMatchSelectWidth]="false" - > - <nz-option [nzValue]="font" [nzLabel]="font" *ngFor="let font of fontFamilyList"></nz-option> - </nz-select> + [nzDropdownMatchSelectWidth]="false"> + <nz-option [nzValue]="font" nzCustomContent [nzLabel]="font" *ngFor="let font of fontFamilyList"> + <span [ngStyle]="{'font-family': font}" >{{font}}</span> + </nz-option> + </nz-select> <nz-select class="ml-1" style="width: 110px;" [(ngModel)]="__fontSize" (ngModelChange)="onChangeFontSize()" nzPlaceHolder="Font Size"> <nz-option [nzValue]="i" [nzLabel]="'Size - ' + i" *ngFor="let i of fontSizeRange"></nz-option> - </nz-select> - <div class="p-divider"></div> + </nz-select> + <div class="p-divider"></div> <div class="i-tool-font-btn d-flex mr-2"> <div class="position-relative fa-icon" (click)="onChangeBold()"> - <div class="fa fa-bold"></div> +<!-- <div class="fa fa-bold"></div>--> + <fa-icon icon="bold"></fa-icon> </div> </div> <div class="i-tool-font-btn d-flex mr-2"> <div class="position-relative fa-icon" (click)="onChangeItalic()"> - <div class="fa fa-italic"></div> +<!-- <div class="fa fa-italic"></div>--> + <fa-icon icon="italic"></fa-icon> </div> </div> <div class="i-tool-font-btn d-flex mr-2"> <div class="position-relative fa-icon" (click)="onChangeUnderline()"> - <div class="fa fa-underline"></div> +<!-- <div class="fa fa-underline"></div>--> + <fa-icon icon="underline"></fa-icon> </div> </div> <div class="i-tool-font-btn d-flex"> <div class="position-relative fa-icon" (click)="onChangeStrikethrough()"> - <div class="fa fa-strikethrough"></div> +<!-- <div class="fa fa-strikethrough"></div>--> + <fa-icon icon="strikethrough"></fa-icon> </div> - </div> + </div> <div class="p-divider"></div> <div class="i-tool-font-color d-flex"> <div class="position-relative i-left flex-fill" (click)="onChangeFontColor($event)"> - <div class="fa fa-font"></div> +<!-- <div class="fa fa-font"></div>--> + <fa-icon icon="palette"></fa-icon> <div class="i-color" [style.background-color]="__fontColor"></div> </div> <div class="i-dropdown-menu" nzPlacement="bottom" nz-popover [(nzVisible)]="isShowFontColorPane" nzTrigger="click" - [nzContent]="colorPane"> + [nzContent]="colorPane"> <i nz-icon type="down" theme="outline"></i> </div> </div> <div class="p-divider"></div> <div style="background: #fff;display: block;"> - <div class="position-relative" (click)="onChangeStrikethrough()"> + <div class="position-relative"> <app-audio-recorder [audioUrl]="titleObj && titleObj.audio_url" (audioUploaded)="titleAudioUploaded($event)"></app-audio-recorder> </div> - </div> + </div> </div> - <div class="width-100 d-flex"> - <iframe #titleEl frameborder="0" style="overflow: hidden;width: 100%; height:48px; margin: 0; padding: 0;"></iframe> + <div class="width-100 d-flex"> + <iframe #titleEl id="titleContentEgret" frameborder="0" style="overflow: hidden;width: 100%; height:48px; margin: 0; padding: 0;"></iframe> </div> </div> @@ -76,37 +83,11 @@ - <ng-container *ngIf="withIcon"> - <div class="row type-row"> - 课程类型: - <nz-radio-group [(ngModel)]="titleObj && titleObj.type" (ngModelChange)="typeChange($event)"> - <label nz-radio nzValue="a">啿•°è¯¾</label> - <label nz-radio nzValue="b">åŒæ•°è¯¾</label> - <label nz-radio nzValue="c">å¤ä¹ 课</label> - </nz-radio-group> - </div> - </ng-container> - </div> + </div> - <ng-container *ngIf="withIcon"> - <div class="title-icons"> - <div class="icons-list"> - <nz-checkbox-wrapper style="width: 100%;clear:both" (nzOnChange)="iconsChanges($event)"> - <div [class]="'icon-item icon-'+i" *ngFor="let i of groupIconsCount[titleObj.type];"> - <div class="img-box"> - <nz-badge class="icon-badge" [nzCount]="titleObj && titleObj.icons && titleObj.icons.indexOf(i) + 1"> - <img [src]="'assets/title-icons/'+titleObj.type+'/icon-'+i+'.png'" alt=""> - </nz-badge> - </div> - <label nz-checkbox [nzValue]="i" [ngModel]="titleObj && titleObj.icons && titleObj.icons.indexOf(i) > -1"></label> - </div> - </nz-checkbox-wrapper> - </div> - </div> - </ng-container> </div> diff --git a/src/app/common/lesson-title-config/lesson-title-config.component.scss b/src/app/common/lesson-title-config/lesson-title-config.component.scss index 72ecb26a55d03d208712478d3ee11264fb1b018c..d8dca5324cc4a7d988176d83f887b9feaa3dffdf 100644 --- a/src/app/common/lesson-title-config/lesson-title-config.component.scss +++ b/src/app/common/lesson-title-config/lesson-title-config.component.scss @@ -1,4 +1,4 @@ -@import '../../style/common_mixin'; +@import '../../style/common_mixin.css'; .title-config { .letter-wrap{ @@ -11,39 +11,73 @@ .type-row{ margin: 0;padding-top: 1rem; } - .icon-item{ - margin-right: 16px; - float: left; - width: 45px; - height: 75px; - display: flex; - justify-content: center; - align-items: center; - position: relative; - .icon-badge{ - position: absolute; - top: 0; - right: 0; - } - .img-box{ - top: 0; - position: absolute; - width: 45px; - height: 50px; - display: flex; - justify-content: center; - align-items: center; - img{ - max-width: 100%; - } - } - label{ - position: absolute; - bottom: 0; - } - } -} +} +@font-face +{ + font-family: 'BRLNSDB'; + src: url("../../../assets/font/BRLNSDB.TTF") ; +} + +@font-face +{ + font-family: 'BRLNSB'; + src: url("../../../assets/font/BRLNSB.TTF") ; +} + +@font-face +{ + font-family: 'BRLNSR'; + src: url("../../../assets/font/BRLNSR.TTF") ; +} + +@font-face +{ + font-family: 'GOTHIC'; + src: url("../../../assets/font/GOTHIC.TTF") ; +} + +@font-face +{ + font-family: 'GOTHICB'; + src: url("../../../assets/font/GOTHICB.TTF") ; +} + +@font-face +{ + font-family: 'GOTHICBI'; + src: url("../../../assets/font/GOTHICBI.TTF") ; +} + +@font-face +{ + font-family: 'GOTHICI'; + src: url("../../../assets/font/GOTHICI.TTF") ; +} + +@font-face +{ + font-family: 'MMTextBook'; + src: url("../../../assets/font/MMTextBook.otf") ; +} + +@font-face +{ + font-family: 'MMTextBook-Bold'; + src: url("../../../assets/font/MMTextBook-Bold.otf") ; +} + +@font-face +{ + font-family: 'MMTextBook-BoldItalic'; + src: url("../../../assets/font/MMTextBook-BoldItalic.otf") ; +} + +@font-face +{ + font-family: 'MMTextBook-Italic'; + src: url("../../../assets/font/MMTextBook-Italic.otf") ; +} @mixin tool-btn { border: 1px solid #ddd; display: flex; @@ -54,16 +88,37 @@ border-radius: 6px; color: #555; } +.d-flex{ + display: flex; +} + +.position-relative { + position: relative; +} + .flex-fill { + -webkit-box-flex: 1; + flex: 1 1 auto; + justify-content: center; + display: flex; + } -.p-title-box { - .p-title { +.i-dropdown-menu{ + width: 15px; + font-size: 10px; + border-left: 1px solid #ddd; + display: -webkit-box; + display: flex; + -webkit-box-align: center; + align-items: center; + flex: 0 +} +.p-title-box .p-title { font-size: 20px; } - input { +.p-title-box input { width: 300px; margin-left: 10px; } -} .p-content { border: 1px solid #ddd; @@ -85,115 +140,110 @@ align-items: center; border-bottom: 1px solid #ddd; - // save - .i-tool-save { - @include tool-btn(); - color: white; - } - .i-tool-save:disabled { - color: #555; - } - // font-size - .i-tool-font-size { - @include tool-btn(); - width: 37px; - & > span { - position: absolute; - top: -5px; - right: 5px; - } - } - .i-tool-font-size:hover { - color: black; - border-color: #bbb; - } +} +// save +.i-tool-save { + //@include tool-btn(); + color: white; +} +.i-tool-save:disabled { + color: #555; +} - // font-color - .i-tool-font-color, .i-tool-font-btn { - border: 1px solid #ddd; - //padding: 3px 7px; - border-radius: 6px; - width: 45px; - height: 31px; - background-color: white; - color: #555; - ::ng-deep > span { - display: flex; +// font-size +.i-tool-font-size { + //@include tool-btn(); + width: 37px; + +} +.i-tool-font-size:hover { + color: black; + border-color: #bbb; +} + +// font-color +.i-tool-font-color, .i-tool-font-btn { + border: 1px solid #ddd; + //padding: 3px 7px; + border-radius: 6px; + width: 45px; + height: 31px; + background-color: white; + color: #555; + ::ng-deep > span { + display: flex; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + padding: 3px 7px; + } + .i-left { + .fa-font,.fa-bold,.fa-italic,.fa-strikethrough, .fa-underline { + font-size: 10px; position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - padding: 3px 7px; - } - .i-left { - .fa-font,.fa-bold,.fa-italic,.fa-strikethrough, .fa-underline { - font-size: 10px; - position: absolute; - color: #555; - left: 8px; - top: 7px; - } - .i-color { - width: 68%; - height: 5px; - background-color: black; - position: absolute; - top: 21px; - left: 5px; - } + color: #555; + left: 8px; + top: 7px; } - .i-dropdown-menu { - width: 15px; - font-size: 10px; - border-left: 1px solid #ddd; - display: flex; - align-items: center; - .anticon-down { - transform: scale(0.6); - } + .i-color { + width: 68%; + height: 5px; + background-color: black; + position: absolute; + top: 21px; + left: 5px; } } - .i-tool-font-btn{ - width: 31px; - } - .fa-icon{ - width: 100%; - height: 100%; + .i-dropdown-menu { + width: 15px; + font-size: 10px; + border-left: 1px solid #ddd; display: flex; - justify-content: center; align-items: center; - cursor: pointer; - } - // bg-color - .i-tool-bg-color { - @include tool-btn(); - padding: 0 9px; - ::ng-deep > span { - display: flex; - align-items: center; - } - - .i-color { - display: block; - width: 16px; - height: 16px; - background-color: white; - margin-left: 10px; + .anticon-down { + transform: scale(0.6); } } - +} +.i-tool-font-btn{ + width: 31px; +} +.fa-icon{ + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +} +// bg-color +.i-tool-bg-color { + @include tool-btn(); + padding: 0 9px; + ::ng-deep > span { + display: flex; + align-items: center; + } - // horizontal-center - .i-tool-horizontal-center { - @include tool-btn(); - width: 37px; + .i-color { + display: block; + width: 16px; + height: 16px; + background-color: white; + margin-left: 10px; } - } + +// horizontal-center +.i-tool-horizontal-center { + @include tool-btn(); + width: 37px; +} .p-box { width: 1280px; height: 720px; @@ -203,9 +253,7 @@ overflow: hidden; } -.p-sentence { - @include k-no-select(); -} + .p-animation-index-box { .i-animation-index { @@ -278,7 +326,6 @@ ::ng-deep .ant-radio-button-wrapper { padding: 0 10px; - @include k-no-select(); } .i-toolbox { @@ -309,7 +356,6 @@ cursor: pointer; text-align: left; display: flex; - @include k-no-select(); } .i-active { background-color: antiquewhite; diff --git a/src/app/common/lesson-title-config/lesson-title-config.component.ts b/src/app/common/lesson-title-config/lesson-title-config.component.ts index 7158480a182211b60b381b1ab1e69922334f30a3..6b7601fbea4baa9a2ea8f4a4cd5baed833259249 100644 --- a/src/app/common/lesson-title-config/lesson-title-config.component.ts +++ b/src/app/common/lesson-title-config/lesson-title-config.component.ts @@ -1,3 +1,4 @@ + import { Component, ElementRef, @@ -10,6 +11,82 @@ import { ViewChild } from '@angular/core'; +const editorTpl = `<html lang="en"><head><meta charset="utf-8"> + <meta name="viewport" + content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/> + <style> +@font-face{ + font-family: 'BRLNSDB'; + src: url("../../../assets/font/BRLNSDB.TTF") ; +} + +@font-face{ + font-family: 'BRLNSB'; + src: url("../../../assets/font/BRLNSB.TTF") ; +} + +@font-face{ + font-family: 'BRLNSR'; + src: url("../../../assets/font/BRLNSR.TTF") ; +} + +@font-face{ + font-family: 'GOTHIC'; + src: url("../../../assets/font/GOTHIC.TTF") ; +} + +@font-face{ + font-family: 'GOTHICB'; + src: url("../../../assets/font/GOTHICB.TTF") ; +} + +@font-face{ + font-family: 'GOTHICBI'; + src: url("../../../assets/font/GOTHICBI.TTF") ; +} + +@font-face{ + font-family: 'GOTHICI'; + src: url("../../../assets/font/GOTHICI.TTF") ; +} + +@font-face{ + font-family: 'MMTextBook'; + src: url("../../../assets/font/MMTextBook.otf") ; +} + +@font-face{ + font-family: 'MMTextBook-Bold'; + src: url("../../../assets/font/MMTextBook-Bold.otf") ; +} + +@font-face{ + font-family: 'MMTextBook-BoldItalic'; + src: url("../../../assets/font/MMTextBook-BoldItalic.otf") ; +} + +@font-face{ + font-family: 'MMTextBook-Italic'; + src: url("../../../assets/font/MMTextBook-Italic.otf") ; +} +html, body{ +/*font-size: 30px;*/ +} +body{ + height:48px; + + overflow: hidden; + margin: 0; + padding: 0 .5rem; + font-family: 'BRLNSB, BRLNSDB, BRLNSR, GOTHIC, GOTHICB, MMTextBook'; + background: #FFF; + line-height: 48px; +} +</style> + </head> + <body>{{content}}</body> +</html>`; + @Component({ selector: 'app-lesson-title-config', templateUrl: './lesson-title-config.component.html', @@ -19,22 +96,45 @@ export class LessonTitleConfigComponent implements OnInit, OnChanges, OnDestroy, fontFamilyList = [ 'Arial', - 'ARBLI' + 'BRLNSB', + 'BRLNSDB', + 'BRLNSR', + 'GOTHIC', + 'GOTHICB', + // "GOTHICBI", + // "GOTHICI", + 'MMTextBook', + // "MMTextBook-Bold", + // "MMTextBook-Italic", + // "MMTextBook-BoldItalic", ]; + + colorList = [ - '#111111', + '#000000', '#ffffff', '#595959', '#0075c2', '#c61c1e', - '#9cbc3a' + '#9cbc3a', + '#008000', + '#FF0000', + '#D2691E', ]; MIN_FONT_SIZE = 1; MAX_FONT_SIZE = 7; isShowFontColorPane = false; isShowBGColorPane = false; - fontSizeRange: number[]; + fontSizeRange = [ + // {name: '1å·', value: 9}, + // {name: '2å·', value: 13}, + // {name: '3å·', value: 16}, + // {name: '4å·', value: 18}, + // {name: '5å·', value: 24}, + // {name: '6å·', value: 32}, + + ]; editorContent = ''; @@ -45,25 +145,17 @@ export class LessonTitleConfigComponent implements OnInit, OnChanges, OnDestroy, loopCnt = 0; maxLoops = 20; - groupIconsCount = { - a: Array.from(Array(11).keys()), - b: Array.from(Array(8).keys()), - c: Array.from(Array(8).keys()), - }; - prevIcons = []; - prevType = ''; - @ViewChild('titleEl') titleEl: ElementRef; + + @ViewChild('titleEl', {static: true}) titleEl: ElementRef; titleEW = null; + @Input() titleObj = { - type: 'a', content: '', - icons: [], audio_url: '' }; - @Input() - withIcon = true; + @Output() titleUpdated = new EventEmitter(); @@ -84,16 +176,12 @@ export class LessonTitleConfigComponent implements OnInit, OnChanges, OnDestroy, let defObj = this.titleObj; if (!vars.titleObj.currentValue) { defObj = { - type: 'a', content: '', - icons: [], audio_url: '' }; } else { defObj = vars.titleObj.currentValue; } - this.titleObj.icons = defObj.icons || []; - this.titleObj.type = defObj.type || 'a'; this.titleObj.content = defObj.content || ''; this.titleObj.audio_url = defObj.audio_url || ''; this.titleEW.document.body.innerHTML = this.titleObj.content; @@ -102,33 +190,23 @@ export class LessonTitleConfigComponent implements OnInit, OnChanges, OnDestroy, ngOnInit() { if (!this.titleObj) { this.titleObj = { - type: 'a', content: '', - icons: [], audio_url: '' }; } - this.titleObj.icons = this.titleObj.icons || []; - this.titleObj.type = this.titleObj.type || 'a'; this.titleObj.content = this.titleObj.content || ''; this.titleObj.audio_url = this.titleObj.audio_url || ''; - this.editorContent = `<html lang="en"><head><meta charset="utf-8"> - <meta name="viewport" - content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/> - </head> - <body style="height:48px;overflow: hidden;margin: 0;padding: 0 .5rem;background: #FFF;line-height: 48px;"> - ${this.titleObj.content} - </body> - </html>`; + this.editorContent = editorTpl.replace('{{content}}', this.titleObj.content) ; this.titleEW = this.titleEl.nativeElement.contentWindow; + console.log('this.titleEW', this.titleEW); const tdoc = this.titleEW.document; - tdoc.designMode = "on"; + tdoc.designMode = 'on'; tdoc.open('text/html', 'replace'); tdoc.write(this.editorContent); tdoc.close(); - tdoc.addEventListener("keypress", this.keyPress, true); - tdoc.addEventListener("blur", () => { + tdoc.addEventListener('keypress', this.keyPress, true); + tdoc.addEventListener('blur', () => { if (this.titleObj.content === this.titleEW.document.body.innerHTML.trim()) { return; } @@ -159,30 +237,7 @@ export class LessonTitleConfigComponent implements OnInit, OnChanges, OnDestroy, ngOnDestroy(): void { } - iconsChanges(val) { - let a = this.titleObj.icons; - let b = val; - - if (a.length > b.length) { - const diff = a.filter(x => !b.includes(x)); - const ti = [...this.titleObj.icons]; - for (let i = 0; i < diff.length; i++) { - const d = diff[i]; - const idx = ti.indexOf(d); - ti.splice(idx, 1); - } - this.titleObj.icons = ti; - } else { - const diff = b.filter(x => !a.includes(x)); - this.titleObj.icons = [...this.titleObj.icons, ...diff]; - } - this.shouldSave(); - } - typeChange(val) { - this.titleObj.icons = []; - this.shouldSave(); - } keyPress(evt) { try { @@ -195,9 +250,9 @@ export class LessonTitleConfigComponent implements OnInit, OnChanges, OnDestroy, const key = String.fromCharCode(evt.charCode).toLowerCase(); let cmd = ''; switch (key) { - case 'b': cmd = "bold"; break; - case 'i': cmd = "italic"; break; - case 'u': cmd = "underline"; break; + case 'b': cmd = 'bold'; break; + case 'i': cmd = 'italic'; break; + case 'u': cmd = 'underline'; break; } @@ -214,10 +269,13 @@ export class LessonTitleConfigComponent implements OnInit, OnChanges, OnDestroy, alert(e); } } + execEditorCommand(command, option?: any) { + console.log('sssss'); try { this.titleEW.focus(); - this.titleEW.document.execCommand(command, false, option); + const result = this.titleEW.document.execCommand(command, false, option); + console.log(result); this.loopCnt = 0; return false; @@ -229,7 +287,7 @@ export class LessonTitleConfigComponent implements OnInit, OnChanges, OnDestroy, }, 100); this.loopCnt += 1; } else { - alert("Error executing command."); + alert('Error executing command.'); } } } @@ -242,7 +300,7 @@ export class LessonTitleConfigComponent implements OnInit, OnChanges, OnDestroy, this.execEditorCommand('forecolor', this.__fontColor); } onChangeFontFamily(font) { - this.execEditorCommand('fontname', font); + this.execEditorCommand('fontName', font); } onChangeFontSize(size?: any) { @@ -272,9 +330,10 @@ export class LessonTitleConfigComponent implements OnInit, OnChanges, OnDestroy, this.titleUpdated.emit(this.titleObj); } shouldSave = () => { - console.log('title shouldSave'); + console.log('title shouldSave', this.titleObj); this.titleObj.content = this.titleEW.document.body.innerHTML.trim(); this.titleUpdated.emit(this.titleObj); } } + diff --git a/src/app/common/player-content-wrapper/player-content-wrapper.component.scss b/src/app/common/player-content-wrapper/player-content-wrapper.component.scss index 11ca56e3683c68277f2651aef704b06b6c0f2eea..6aec336fb2e4155b1375abdd53191d4f23dc900e 100644 --- a/src/app/common/player-content-wrapper/player-content-wrapper.component.scss +++ b/src/app/common/player-content-wrapper/player-content-wrapper.component.scss @@ -1,4 +1,4 @@ -@import '../../style/common_mixin'; +@import '../../style/common_mixin.css'; .cmp-player-content-wrapper{ max-height: 100%; diff --git a/src/app/common/player-content-wrapper/player-content-wrapper.component.ts b/src/app/common/player-content-wrapper/player-content-wrapper.component.ts index 6ddafee1da8ed70aef4da47f851b89e315ebd142..0780a42be855a6e3fff637a01a0f4d0002e20e4a 100644 --- a/src/app/common/player-content-wrapper/player-content-wrapper.component.ts +++ b/src/app/common/player-content-wrapper/player-content-wrapper.component.ts @@ -1,13 +1,13 @@ import { AfterViewInit, Component, - ElementRef, + ElementRef, Input, OnChanges, OnDestroy, - OnInit, + OnInit, ViewChild -} from '@angular/core'; +} from '@angular/core'; @Component({ @@ -18,21 +18,21 @@ import { export class PlayerContentWrapperComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit { - @ViewChild('wrapperEl') wrapperEl: ElementRef; + @ViewChild('wrapperEl', {static: true }) wrapperEl: ElementRef; // // aspect ratio? @Input() ratio; _w: string; _h: string; - - constructor() { + + constructor() { if (window.innerHeight < window.innerWidth) { this._h = '100%'; this._w = 'auto'; } else { this._w = '100%'; this._h = 'auto'; - } + } } ngOnInit() { if (!this.ratio) { diff --git a/src/app/common/upload-image-with-preview/upload-image-with-preview.component.html b/src/app/common/upload-image-with-preview/upload-image-with-preview.component.html index 5fdf4f1f71866b4b7625d4ec95ff5ff4cb848c81..b5c26bb34504cb78bc873f9e811802831b5f348e 100644 --- a/src/app/common/upload-image-with-preview/upload-image-with-preview.component.html +++ b/src/app/common/upload-image-with-preview/upload-image-with-preview.component.html @@ -8,7 +8,7 @@ <!--[nzBeforeUpload]="customUpload">--> <div class="p-box d-flex align-items-center"> <div class="p-upload-icon" *ngIf="!picUrl && !uploading"> - <i nz-icon type="cloud-upload" theme="outline" [style.font-size]="iconSize + 'em'"></i> + <i nz-icon nzType="cloud-upload" nzTheme="outline" [style.font-size]="iconSize + 'em'"></i> <div class="m-3"></div> <span>{{TIP}}</span> <!--<div class="mt-5 p-progress-bar" *ngIf="uploading">--> @@ -19,7 +19,7 @@ <div class="p-upload-progress-bg" *ngIf="uploading"> <div class="i-bg" [style.width]="progress+'%'"></div> <div class="i-text"> - <fa name="cloud-upload"></fa> + <fa-icon icon="cloud-upload-alt"></fa-icon> Uploading... </div> </div> @@ -32,6 +32,6 @@ nz-popconfirm nzTitle="Are you sure ?" (nzOnConfirm)="onDelete()" > - <i nz-icon type="close" theme="outline"></i> + <i nz-icon nzType="close" nzTheme="outline"></i> </div> </div> diff --git a/src/app/common/upload-image-with-preview/upload-image-with-preview.component.scss b/src/app/common/upload-image-with-preview/upload-image-with-preview.component.scss index 6008c354d32f09f7e9019740591976639a87b6e6..287595d88a52a7ef1b396bf3c8e1b1eb1b2bfdcd 100644 --- a/src/app/common/upload-image-with-preview/upload-image-with-preview.component.scss +++ b/src/app/common/upload-image-with-preview/upload-image-with-preview.component.scss @@ -1,4 +1,4 @@ -@import '../../style/common_mixin'; +@import '../../style/common_mixin.css'; .p-image-uploader { position: relative; @@ -53,9 +53,11 @@ width: 100%; height: 100%; //background-image: url("https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"); - @include k-img-bg(); } } + .d-flex{ + display: flex; + } } .p-btn-delete { diff --git a/src/app/common/upload-video/upload-video.component.html b/src/app/common/upload-video/upload-video.component.html index e39116aaf958867cde66a3076e2b11538a86ab77..8f1533993f2bdcf3d5f3e0cd4337f3fa96a1ebd7 100644 --- a/src/app/common/upload-video/upload-video.component.html +++ b/src/app/common/upload-video/upload-video.component.html @@ -1,4 +1,4 @@ - +<div class="p-video-box"> <div class="up-video" style="display: flex;"> <!--<nz-upload class="" [nzDisabled]="!showUploadBtn"--> <!--[nzShowUploadList]="false"--> @@ -16,8 +16,7 @@ <button type="button" nz-button nzType="default" *ngIf="showUploadBtn" [disabled]="uploading" [nzLoading]="uploading" > - <i nz-icon type="plus" theme="outline"></i> - + <i nz-icon nzType="plus" nzTheme="outline"></i> <span>{{ uploading ? 'Uploading' : 'Select Video' }}</span> <!--<span>Select Video</span>--> </button> @@ -56,9 +55,9 @@ </div> -<div class="p-box d-flex align-items-center p-video-uploader" style="top: 20px;"> +<div class="p-box d-flex align-items-center p-video-uploader"> <div class="p-upload-icon" *ngIf="!showUploadBtn && !videoUrl && !uploading"> - <i nz-icon type="upload" theme="outline"></i> + <i nz-icon nzType="upload" nzTheme="outline"></i> <div class="m-3"></div> <span>Click here to upload video</span> <div class="mt-5 p-progress-bar" *ngIf="uploading"> @@ -70,26 +69,26 @@ [ngClass]="{'smart-bar': showUploadBtn}" > <div class="i-bg" [style.width]="progress+'%'"></div> <div class="i-text"> - <fa name="cloud-upload"></fa> + <fa-icon icon="cloud-upload-alt"></fa-icon> Uploading... </div> </div> <div class="p-upload-check-bg" *ngIf="checking"> <div class="i-bg" [style.width]="progress+'%'"></div> <div class="i-text"> - <fa name="cloud-upload"></fa> - <i nz-icon type="loading" theme="outline"></i>Checking... + <fa-icon icon="cloud-upload-alt"></fa-icon> + <i nz-icon nzType="loading" nzTheme="outline"></i>Checking... </div> </div> - <div class="p-preview" *ngIf="!showUploadBtn && !uploading && videoUrl " > + <div class="p-preview" *ngIf="!uploading && videoUrl " > <!--<video crossorigin="anonymous" [src]="videoUrl" controls #videoNode></video>--> - <video [src]="safeVideoUrl(videoUrl)" controls #videoNode (loadedmetadata)="videoLoadedMetaData()"></video> + <video [src]="safeVideoUrl(videoUrl)" controls #videoNode></video> </div> </div> <div [style.display]="!checkVideoExists?'none':''"> - <span><i nz-icon type="loading" theme="outline"></i> checking file to upload</span> + <span><i nz-icon nzType="loading" nzTheme="outline"></i> checking file to upload</span> +</div> </div> - diff --git a/src/app/common/upload-video/upload-video.component.scss b/src/app/common/upload-video/upload-video.component.scss index b6664069c2a89349f8338503aaeefde1aa7e4c0e..3e0fc1ce96f94d17a3d5da5af6a1e88824c08f09 100644 --- a/src/app/common/upload-video/upload-video.component.scss +++ b/src/app/common/upload-video/upload-video.component.scss @@ -1,5 +1,21 @@ -@import '../../style/common_mixin'; - +@import '../../style/common_mixin.css'; +/*.p-video-box{ + bottom: 0; + border: 2px dashed #ddd; + border-radius: 0.5rem; + background-color: #fafafa; + text-align: center; + color: #aaa; + padding-top: 56.25%; + //font-size: 4rem; + position: relative; + .p-upload-icon{ + left: 50%; + position: absolute; + top: 50%; + transform: translate(-50% ,-50%); + } +}*/ .p-video-uploader { position: relative; display: block; @@ -17,50 +33,56 @@ background-color: #fafafa; text-align: center; color: #aaa; - .p-upload-icon { - text-align: center; - margin: auto; - .anticon-upload { - color: #888; - font-size: 5rem; - } - .p-progress-bar { - position: relative; - width: 20rem; - height: 1.5rem; - border: 1px solid #ccc; - border-radius: 1rem; - .p-progress-bg { - background-color: #1890ff; - border-radius: 1rem; - height: 100%; - } - .p-progress-value { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - text-shadow: 0 0 4px #000; - color: white; - text-align: center; - font-size: 0.9rem; - line-height: 1.5rem; - } - } - } - .p-preview { - width: 100%; - height: 100%; - //background-image: url("https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"); - video{ - max-height: 100%; - max-width: 100%; - } - } + + } } +.p-upload-icon { + text-align: center; + margin: auto; +} +.p-upload-icon .anticon-upload { + color: #888; + font-size: 5rem; +} +p-progress-bar { + position: relative; + width: 20rem; + height: 1.5rem; + border: 1px solid #ccc; + border-radius: 1rem; + +} +.p-progress-bar .p-progress-bg { + background-color: #1890ff; + border-radius: 1rem; + height: 100%; +} +.p-progress-bar .p-progress-value { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-shadow: 0 0 4px #000; + color: white; + text-align: center; + font-size: 0.9rem; + line-height: 1.5rem; +} +.p-preview { + width: 100%; + height: 100%; + //background-image: url("https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"); + +} +.p-preview video{ + max-height: 100%; + max-width: 100%; + position: absolute; + display: flex; + } .p-btn-delete { position: absolute; right: -0.5rem; diff --git a/src/app/common/upload-video/upload-video.component.ts b/src/app/common/upload-video/upload-video.component.ts index b947e15cf3ca045f10becd3be01a73e36d8f6c93..d6dec6ce0befc42eecc9e24cff51e60307e50ec9 100644 --- a/src/app/common/upload-video/upload-video.component.ts +++ b/src/app/common/upload-video/upload-video.component.ts @@ -1,5 +1,5 @@ import {Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, Output, SecurityContext, ViewChild} from '@angular/core'; -import {NzMessageService, UploadFile} from 'ng-zorro-antd'; +import {NzMessageService, UploadChangeParam, UploadFile, UploadFileStatus} from 'ng-zorro-antd'; import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser'; @@ -24,7 +24,7 @@ export class UploadVideoComponent implements OnChanges, OnDestroy { @Input() videoUrl = ''; - @ViewChild('videoNode') + @ViewChild('videoNode', {static: true }) videoNode: ElementRef; @@ -47,8 +47,8 @@ export class UploadVideoComponent implements OnChanges, OnDestroy { item: any; // videoItem = null; - uploadUrl = (<any> window).courseware.uploadUrl(); - uploadData = (<any> window).courseware.uploadData(); + uploadUrl = (window as any).courseware.uploadUrl(); + uploadData = (window as any).courseware.uploadData(); constructor(private nzMessageService: NzMessageService, private sanitization: DomSanitizer @@ -71,7 +71,7 @@ export class UploadVideoComponent implements OnChanges, OnDestroy { } safeVideoUrl(url) { - console.log(url) + console.log(url); return this.sanitization.bypassSecurityTrustResourceUrl(url); // `${url}`; } videoLoadedMetaData() { @@ -79,7 +79,7 @@ export class UploadVideoComponent implements OnChanges, OnDestroy { } - handleChange(info: { type: string, file: UploadFile, event: any }): void { + handleChange(info: UploadChangeParam/* { type: string, file: UploadFile, event: any }*/): void { console.log('info:' , info); @@ -109,7 +109,7 @@ export class UploadVideoComponent implements OnChanges, OnDestroy { break; case 'progress': - this.progress = parseInt(info.event.percent, 10); + this.progress = info.event.percent; this.doProgress(this.progress); break; } @@ -152,9 +152,9 @@ export class UploadVideoComponent implements OnChanges, OnDestroy { if (duration) { duration = duration * 1000; } - file['height'] = height; - file['width'] = width; - file['duration'] = duration; + file.height = height; + file.width = width; + file.duration = duration; vid.preload = 'none'; vid.src = ''; vid.remove(); diff --git a/src/app/form/form.component.scss b/src/app/form/form.component.css similarity index 58% rename from src/app/form/form.component.scss rename to src/app/form/form.component.css index 0ab9a90ac7f69516abac1a1446f2adf4b900260d..41f7757290161973406aeec2177e0feef3ffcdaa 100644 --- a/src/app/form/form.component.scss +++ b/src/app/form/form.component.css @@ -1,4 +1,4 @@ -@import '../style/common_mixin'; +@import '../style/common_mixin.css'; .model-content { diff --git a/src/app/form/form.component.html b/src/app/form/form.component.html index 7b9a6b70574e7b9d4f88e2b7273da5836c5d6972..a862d49baf004a74fd9af3ec7b42d226adfe9906 100644 --- a/src/app/form/form.component.html +++ b/src/app/form/form.component.html @@ -2,7 +2,7 @@ <div class="model-content"> - <div style="position: absolute; left: 200px; top: 100px; width: 300px;"> + <div style="position: absolute; left: 200px; top: 100px; width: 800px;"> <input type="text" nz-input [(ngModel)]="item.text" (blur)="save()"> @@ -15,12 +15,14 @@ [audioUrl]="item.audio_url" (audioUploaded)="onAudioUploadSuccess($event, 'audio_url')" ></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> </div> - <div style="position: absolute; left: 1000px; top: 100px; width: 300px;"> + <!-- div style="position: absolute; left: 1000px; top: 100px; width: 300px;"> <input type="text" nz-input [(ngModel)]="item.text_2" (blur)="save()"> @@ -34,7 +36,7 @@ (audioUploaded)="onAudioUploadSuccess($event, 'audio_url_2')" ></app-audio-recorder> - </div> + </div --> diff --git a/src/app/form/form.component.ts b/src/app/form/form.component.ts index 427ef173645ed1f30bd12aea56265dabf4ada80a..c4f6d3d74c22a5ec3ff3d85f2321709dc1c6f28c 100644 --- a/src/app/form/form.component.ts +++ b/src/app/form/form.component.ts @@ -5,7 +5,7 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap @Component({ selector: 'app-form', templateUrl: './form.component.html', - styleUrls: ['./form.component.scss'] + styleUrls: ['./form.component.css'] }) export class FormComponent implements OnInit, OnChanges, OnDestroy { diff --git a/src/app/play/Unit.ts b/src/app/play/Unit.ts index b08a8f92a706c4b174e8d7facc20bdcc95e59ec9..0903803f617b0a16228f8c566696a7c19f732da4 100644 --- a/src/app/play/Unit.ts +++ b/src/app/play/Unit.ts @@ -15,7 +15,7 @@ class Sprite { constructor(ctx = null) { if (!ctx) { - this.ctx = window['curCtx']; + this.ctx = (window as any).curCtx; } else { this.ctx = ctx; } @@ -158,6 +158,7 @@ export class MySprite extends Sprite { if (this._shadowFlag) { + this.ctx.shadowOffsetX = this._shadowOffsetX; this.ctx.shadowOffsetY = this._shadowOffsetY; this.ctx.shadowBlur = this._shadowBlur; @@ -175,6 +176,8 @@ export class MySprite extends Sprite { } + + } updateChildren() { @@ -359,7 +362,7 @@ export class ColorSpr extends MySprite { g = 0; b = 0; - createGSCanvas() { + createGSCanvas(){ if (!this.img) { return; @@ -502,15 +505,15 @@ export class Label extends MySprite { fontSize = 40; fontColor = '#000000'; fontWeight = 900; - maxWidth; + _maxWidth; outline = 0; outlineColor = '#ffffff'; - _shadowFlag = false; - _shadowColor; - _shadowOffsetX; - _shadowOffsetY; - _shadowBlur; + // _shadowFlag = false; + // _shadowColor; + // _shadowOffsetX; + // _shadowOffsetY; + // _shadowBlur; _outlineFlag = false; _outLineWidth; @@ -541,7 +544,7 @@ export class Label extends MySprite { setMaxSize(w) { - this.maxWidth = w; + this._maxWidth = w; this.refreshSize(); if (this.width >= w) { this.scaleX *= w / this.width; @@ -568,16 +571,16 @@ export class Label extends MySprite { .start(); // Start the tween immediately. } - setShadow(offX = 2, offY = 2, blur = 2, color = 'rgba(0, 0, 0, 0.2)') { - - this._shadowFlag = true; - this._shadowColor = color; - // 将阴影å‘å³ç§»åЍ15px,å‘上移动10px - this._shadowOffsetX = 5; - this._shadowOffsetY = 5; - // 轻微模糊阴影 - this._shadowBlur = 5; - } + // setShadow(offX = 0, offY = 2, blur = 2, color = 'rgba(0, 0, 0, 0.2)') { + // + // this._shadowFlag = true; + // this._shadowColor = color; + // // 将阴影å‘å³ç§»åЍ15px,å‘上移动10px + // this._shadowOffsetX = 5; + // this._shadowOffsetY = 5; + // // 轻微模糊阴影 + // this._shadowBlur = 5; + // } setOutline(width = 5, color = '#ffffff') { @@ -836,6 +839,40 @@ export class RichText extends Label { +export class LineRect extends MySprite { + + lineColor = "#ffffff"; + lineWidth = 10; + + setSize(w, h) { + this.width = w; + this.height = h; + } + + drawLine() { + + this.ctx.beginPath(); + this.ctx.moveTo(this._offX, this._offY); + this.ctx.lineTo(this._offX + this.width, this._offY); + this.ctx.lineTo(this._offX + this.width, this._offY + this.height); + this.ctx.lineTo(this._offX, this._offY + this.height); + this.ctx.closePath(); + + this.ctx.lineWidth = this.lineWidth; + // this.ctx.fillStyle = "rgb(2,33,42)"; //指定填充颜色 + // this.ctx.fill(); //对多边形进行填充 + + this.ctx.strokeStyle = this.lineColor; // "#ffffff"; + this.ctx.stroke(); + + } + + + drawSelf() { + super.drawSelf(); + this.drawLine(); + } +} export class ShapeRect extends MySprite { @@ -1076,7 +1113,7 @@ export function tweenChange(item, obj, time = 0.8, callBack = null, easing = nul } if (update) { tween.onUpdate( (a, b) => { - update(a, b); + update(a, b); }); } @@ -1129,7 +1166,7 @@ export function moveItem(item, x, y, time = 0.8, callBack = null, easing = null) if (callBack) { tween.onComplete(() => { - callBack(); + callBack(); }); } if (easing) { @@ -1327,16 +1364,6 @@ export function removeItemFromArr(arr, item) { -export function getPosDistance(sx, sy, ex, ey) { - - const _x = ex - sx; - const _y = ey - sy; - const len = Math.sqrt( Math.pow(_x, 2) + Math.pow(_y, 2) ); - return len; -} - - - @@ -1380,6 +1407,13 @@ export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer = } +export function getPosDistance(sx, sy, ex, ey) { + + const _x = ex - sx; + const _y = ey - sy; + const len = Math.sqrt( Math.pow(_x, 2) + Math.pow(_y, 2) ); + return len; +} export function delayCall(callback, second) { const tween = new TWEEN.Tween(this) @@ -1461,9 +1495,9 @@ export function jelly(item, time = 0.7) { -export function showPopParticle(img, pos, parent) { +export function showPopParticle(img, pos, parent, num = 20, minLen = 40, maxLen = 80, showTime = 0.4) { + - const num = 20; for (let i = 0; i < num; i ++) { const particle = new MySprite(); @@ -1475,8 +1509,8 @@ export function showPopParticle(img, pos, parent) { const randomR = 360 * Math.random(); particle.rotation = randomR; - const randomS = 0.5 + Math.random() * 0.5; - particle.setScaleXY(randomS); + const randomS = 0.3 + Math.random() * 0.7; + particle.setScaleXY(randomS * 0.3); const randomX = Math.random() * 20 - 10; particle.x += randomX; @@ -1484,16 +1518,32 @@ export function showPopParticle(img, pos, parent) { const randomY = Math.random() * 20 - 10; particle.y += randomY; - const randomL = 40 + Math.random() * 40; + const randomL = minLen + Math.random() * (maxLen - minLen); const randomA = 360 * Math.random(); const randomT = getPosByAngle(randomA, randomL); - moveItem(particle, particle.x + randomT.x, particle.y + randomT.y, 0.4, () => { + moveItem(particle, particle.x + randomT.x, particle.y + randomT.y, showTime, () => { + + }, TWEEN.Easing.Exponential.Out); - scaleItem(particle, 0, 0.6, () => { + // scaleItem(particle, 0, 0.6, () => { + // + // }); + + scaleItem(particle, randomS, 0.6, () => { + + }, TWEEN.Easing.Exponential.Out); + + setTimeout(() => { + + hideItem(particle, 0.4, () => { + + }, TWEEN.Easing.Cubic.In); + + }, showTime * 0.5 * 1000); + - }); } } @@ -1535,7 +1585,7 @@ export function shake(item, time = 0.5, callback = null, rate = 1) { }; const move1 = () => { - moveItem(item, baseX + offX, baseY + offY, time / 8, () => { + moveItem(item, baseX + offX, baseY + offY, time / 7.5, () => { move2(); }, easing); }; diff --git a/src/app/play/play.component.scss b/src/app/play/play.component.css similarity index 100% rename from src/app/play/play.component.scss rename to src/app/play/play.component.css diff --git a/src/app/play/play.component.ts b/src/app/play/play.component.ts index 5e69db6206ef258722c88dcd5f8fdb4c9d9d4c99..f4b8a863d45aa9f51852483802422d4dfacce939 100644 --- a/src/app/play/play.component.ts +++ b/src/app/play/play.component.ts @@ -18,12 +18,12 @@ import TWEEN from '@tweenjs/tween.js'; @Component({ selector: 'app-play', templateUrl: './play.component.html', - styleUrls: ['./play.component.scss'] + styleUrls: ['./play.component.css'] }) export class PlayComponent implements OnInit, OnDestroy { - @ViewChild('canvas') canvas: ElementRef; - @ViewChild('wrap') wrap: ElementRef; + @ViewChild('canvas', {static: true }) canvas: ElementRef; + @ViewChild('wrap', {static: true }) wrap: ElementRef; // æ•°æ® data; diff --git a/src/app/style/common_mixin.css b/src/app/style/common_mixin.css new file mode 100644 index 0000000000000000000000000000000000000000..fd40910d9e70d6412e5e9919bb62a2d649c27a7c --- /dev/null +++ b/src/app/style/common_mixin.css @@ -0,0 +1,4 @@ + + + + diff --git a/src/app/style/common_mixin.scss b/src/app/style/common_mixin.scss deleted file mode 100644 index 6293349187b9d1dbc9304be5dfdb8ff8bd54cf46..0000000000000000000000000000000000000000 --- a/src/app/style/common_mixin.scss +++ /dev/null @@ -1,21 +0,0 @@ -@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; -} -.anticon{ - vertical-align: .1em!important; -} diff --git a/src/assets/font/BRLNSB.TTF b/src/assets/font/BRLNSB.TTF new file mode 100644 index 0000000000000000000000000000000000000000..509477ede1b11d912a8f5503001a917720522d08 Binary files /dev/null and b/src/assets/font/BRLNSB.TTF differ diff --git a/src/assets/font/BRLNSR.TTF b/src/assets/font/BRLNSR.TTF new file mode 100644 index 0000000000000000000000000000000000000000..efaf22ff70a2b17519804a3f616208e73ff5896a Binary files /dev/null and b/src/assets/font/BRLNSR.TTF differ diff --git a/src/assets/font/GOTHIC.TTF b/src/assets/font/GOTHIC.TTF new file mode 100644 index 0000000000000000000000000000000000000000..c60a324123eaaeab58c400c139bcabbc6d0d2a9f Binary files /dev/null and b/src/assets/font/GOTHIC.TTF differ diff --git a/src/assets/font/GOTHICB.TTF b/src/assets/font/GOTHICB.TTF new file mode 100644 index 0000000000000000000000000000000000000000..d3577b960846dd2a9d2cbaceab7b8715b3c5fd54 Binary files /dev/null and b/src/assets/font/GOTHICB.TTF differ diff --git a/src/assets/font/GOTHICBI.TTF b/src/assets/font/GOTHICBI.TTF new file mode 100644 index 0000000000000000000000000000000000000000..d01cefabe3f5aac0dca611b750d07215cfe00dbf Binary files /dev/null and b/src/assets/font/GOTHICBI.TTF differ diff --git a/src/assets/font/GOTHICI.TTF b/src/assets/font/GOTHICI.TTF new file mode 100644 index 0000000000000000000000000000000000000000..777a6d87f5de328998284ce7c4a0df169a6474a2 Binary files /dev/null and b/src/assets/font/GOTHICI.TTF differ diff --git a/src/assets/font/MMTextBook-Bold.otf b/src/assets/font/MMTextBook-Bold.otf new file mode 100644 index 0000000000000000000000000000000000000000..8e378d817bec7b1acd2a82cfeabcb53c90fd5960 Binary files /dev/null and b/src/assets/font/MMTextBook-Bold.otf differ diff --git a/src/assets/font/MMTextBook-BoldItalic.otf b/src/assets/font/MMTextBook-BoldItalic.otf new file mode 100644 index 0000000000000000000000000000000000000000..04d6fb6e1ca10bec6d4df267184f8179b9ba1468 Binary files /dev/null and b/src/assets/font/MMTextBook-BoldItalic.otf differ diff --git a/src/assets/font/MMTextBook-Italic.otf b/src/assets/font/MMTextBook-Italic.otf new file mode 100644 index 0000000000000000000000000000000000000000..05e5aaa409dc78ee5c98167653a7ed18eab92b49 Binary files /dev/null and b/src/assets/font/MMTextBook-Italic.otf differ diff --git a/src/assets/font/MMTextBook.otf b/src/assets/font/MMTextBook.otf new file mode 100644 index 0000000000000000000000000000000000000000..f8ca9b645c27bcd4bfe1f351f4ff30f4558e302f Binary files /dev/null and b/src/assets/font/MMTextBook.otf differ diff --git a/src/index.html b/src/index.html index f5e02f13e1b1204349383ade9da0f3364a8c2ad2..a4cc9cfd902ec91a2f8025d80c78cf80c9102706 100644 --- a/src/index.html +++ b/src/index.html @@ -4,12 +4,12 @@ <meta charset="utf-8"> <title>NgOne</title> <base href="/"> - +<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">--> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <script type="text/javascript" src="http://teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script> - + </head> <body> <app-root></app-root> diff --git a/src/styles.scss b/src/styles.css similarity index 100% rename from src/styles.scss rename to src/styles.css