Commit ecde648a authored by 唐鑫's avatar 唐鑫

初始化

parent ce304201
# Editor configuration, see https://editorconfig.org # Editor configuration, see https://editorconfig.org
root = true root = true
[*] [*]
charset = utf-8 charset = utf-8
indent_style = space indent_style = space
indent_size = 2 indent_size = 2
insert_final_newline = true insert_final_newline = true
trim_trailing_whitespace = true trim_trailing_whitespace = true
[*.md] [*.md]
max_line_length = off max_line_length = off
trim_trailing_whitespace = false trim_trailing_whitespace = false
# See http://help.github.com/ignore-files/ for more about ignoring files. # See http://help.github.com/ignore-files/ for more about ignoring files.
# compiled output # compiled output
/dist /dist
/tmp /tmp
/out-tsc /out-tsc
# Only exists if Bazel was run # Only exists if Bazel was run
/bazel-out /bazel-out
# dependencies # dependencies
/node_modules /node_modules
# profiling files # profiling files
chrome-profiler-events*.json chrome-profiler-events*.json
speed-measure-plugin*.json speed-measure-plugin*.json
# IDEs and editors # IDEs and editors
/.idea /.idea
.project .project
.classpath .classpath
.c9/ .c9/
*.launch *.launch
.settings/ .settings/
*.sublime-workspace *.sublime-workspace
# IDE - VSCode # IDE - VSCode
.vscode/* .vscode/*
!.vscode/settings.json !.vscode/settings.json
!.vscode/tasks.json !.vscode/tasks.json
!.vscode/launch.json !.vscode/launch.json
!.vscode/extensions.json !.vscode/extensions.json
.history/* .history/*
# misc # misc
/.sass-cache /.sass-cache
/connect.lock /connect.lock
/coverage /coverage
/libpeerconnection.log /libpeerconnection.log
npm-debug.log npm-debug.log
yarn-error.log yarn-error.log
testem.log testem.log
/typings /typings
# System Files # System Files
.DS_Store .DS_Store
Thumbs.db Thumbs.db
This diff is collapsed.
...@@ -128,5 +128,8 @@ ...@@ -128,5 +128,8 @@
} }
} }
}, },
"defaultProject": "ng-template-generator" "defaultProject": "ng-template-generator",
} "cli": {
"analytics": "f1a365a2-efef-4072-b5fc-c280aaa591eb"
}
}
\ No newline at end of file
/**** /****
* 批量编译打包模板工具 * 批量编译打包模板工具
* 运行 npm run publish T_01 命令来打包T_01模板 * 运行 npm run publish T_01 命令来打包T_01模板
* 运行 npm run publish T_01,T_02,T_03,T_04 命令来分别打包 T_01,T_02,T_03,T_04 这四个模板,注意逗号要用英文的 * 运行 npm run publish T_01,T_02,T_03,T_04 命令来分别打包 T_01,T_02,T_03,T_04 这四个模板,注意逗号要用英文的
* 运行 npm run publish all 命令来打包所有模板 * 运行 npm run publish all 命令来打包所有模板
*/ */
const spawn = require('child_process').spawn; const spawn = require('child_process').spawn;
const path = require("path"); const path = require("path");
const fs = require("fs"); const fs = require("fs");
const os = require('os'); const os = require('os');
const compressing = require("compressing"); const compressing = require("compressing");
//Linux系统上'Linux' //Linux系统上'Linux'
//macOS 系统上'Darwin' //macOS 系统上'Darwin'
//Windows系统上'Windows_NT' //Windows系统上'Windows_NT'
let sysType = os.type(); let sysType = os.type();
Date.prototype.Format = function (fmt) { Date.prototype.Format = function (fmt) {
var o = { var o = {
"M+": this.getMonth() + 1, "M+": this.getMonth() + 1,
"d+": this.getDate(), "d+": this.getDate(),
"h+": this.getHours(), "h+": this.getHours(),
"m+": this.getMinutes(), "m+": this.getMinutes(),
"s+": this.getSeconds(), "s+": this.getSeconds(),
"q+": Math.floor((this.getMonth() + 3) / 3), "q+": Math.floor((this.getMonth() + 3) / 3),
"S": this.getMilliseconds() "S": this.getMilliseconds()
}; };
if (/(y+)/.test(fmt)) if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o) for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt; return fmt;
} }
function clean(zipPath) { function clean(zipPath) {
if (fs.existsSync(zipPath)) { if (fs.existsSync(zipPath)) {
fs.unlinkSync(zipPath); fs.unlinkSync(zipPath);
} }
} }
const runSpawn = async function () { const runSpawn = async function () {
await new Promise(function (resolve, reject) { await new Promise(function (resolve, reject) {
let pkg = require("../package.json"); let pkg = require("../package.json");
let ls; let ls;
if (sysType === "Windows_NT") { if (sysType === "Windows_NT") {
//ng build --prod --build--optimizer --base-href /ng-one/ //ng build --prod --build--optimizer --base-href /ng-one/
ls = spawn("cmd.exe", ['/c', 'ng', 'build', '--prod', '--build--optimizer', '--base-href', '/template-base-href/']); ls = spawn("cmd.exe", ['/c', 'ng', 'build', '--prod', '--build--optimizer', '--base-href', '/template-base-href/']);
} else { } else {
ls = spawn("ng", ['build', '--prod', '--build--optimizer', '--base-href', '/template-base-href/']); ls = spawn("ng", ['build', '--prod', '--build--optimizer', '--base-href', '/template-base-href/']);
} }
ls.stdout.on('data', (data) => { ls.stdout.on('data', (data) => {
console.log(` ${data}`); console.log(` ${data}`);
}); });
ls.stderr.on('data', (data) => { ls.stderr.on('data', (data) => {
console.log(`stderr: ${data}`); console.log(`stderr: ${data}`);
reject(); reject();
}); });
ls.on('close', (code) => { ls.on('close', (code) => {
console.log(`child process exited with code ${code}`); console.log(`child process exited with code ${code}`);
//要压缩的目录 //要压缩的目录
let zippath = path.resolve(__dirname, "../dist", pkg.name); let zippath = path.resolve(__dirname, "../dist", pkg.name);
//压缩包的存放目录 //压缩包的存放目录
let date = new Date(); let date = new Date();
// let zipname = pkg.name+"_"+date.Format("yyyyMMdd hh-mm-ss"); // let zipname = pkg.name+"_"+date.Format("yyyyMMdd hh-mm-ss");
let zipname = 'form'; let zipname = 'form';
let zipdir = path.resolve(__dirname, "../publish/" + zipname + ".zip"); let zipdir = path.resolve(__dirname, "../publish/" + zipname + ".zip");
clean(zipdir); //删除原有的包 clean(zipdir); //删除原有的包
const tarStream = new compressing.zip.Stream(); const tarStream = new compressing.zip.Stream();
fs.readdir(zippath, function (err, files) { fs.readdir(zippath, function (err, files) {
if (err) { if (err) {
console.log("======文件打开异常======"); console.log("======文件打开异常======");
console.log(err); console.log(err);
reject(); reject();
} }
for (let i = 0; i < files.length; i++) { for (let i = 0; i < files.length; i++) {
tarStream.addEntry(zippath + "/" + files[i]); tarStream.addEntry(zippath + "/" + files[i]);
} }
let writeStream = fs.createWriteStream(zipdir); let writeStream = fs.createWriteStream(zipdir);
tarStream.pipe(writeStream); tarStream.pipe(writeStream);
writeStream.on('close', () => { writeStream.on('close', () => {
console.log(`模板 ${pkg.name} 打包已完成!`); console.log(`模板 ${pkg.name} 打包已完成!`);
resolve(); resolve();
}) })
}); });
}); });
}); });
} }
// let projects = ""; // let projects = "";
// if(process.argv.length<3){ // if(process.argv.length<3){
// console.log("缺少参数"); // console.log("缺少参数");
// return; // return;
// } // }
// projects = process.argv[2]; // projects = process.argv[2];
let exec = async function () { let exec = async function () {
//压缩模板 //压缩模板
await runSpawn(); await runSpawn();
} }
exec(); exec();
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see: # For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries # https://github.com/browserslist/browserslist#queries
# You can see what browsers were selected by your queries by running: # You can see what browsers were selected by your queries by running:
# npx browserslist # npx browserslist
> 0.5% > 0.5%
last 2 versions last 2 versions
Firefox ESR Firefox ESR
not dead not dead
not IE 9-11 # For IE 9-11 support, remove 'not'. not IE 9-11 # For IE 9-11 support, remove 'not'.
\ No newline at end of file
// @ts-check // @ts-check
// Protractor configuration file, see link for more information // Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts // https://github.com/angular/protractor/blob/master/lib/config.ts
const { SpecReporter } = require('jasmine-spec-reporter'); const { SpecReporter } = require('jasmine-spec-reporter');
/** /**
* @type { import("protractor").Config } * @type { import("protractor").Config }
*/ */
exports.config = { exports.config = {
allScriptsTimeout: 11000, allScriptsTimeout: 11000,
specs: [ specs: [
'./src/**/*.e2e-spec.ts' './src/**/*.e2e-spec.ts'
], ],
capabilities: { capabilities: {
'browserName': 'chrome' 'browserName': 'chrome'
}, },
directConnect: true, directConnect: true,
baseUrl: 'http://localhost:4200/', baseUrl: 'http://localhost:4200/',
framework: 'jasmine', framework: 'jasmine',
jasmineNodeOpts: { jasmineNodeOpts: {
showColors: true, showColors: true,
defaultTimeoutInterval: 30000, defaultTimeoutInterval: 30000,
print: function() {} print: function() {}
}, },
onPrepare() { onPrepare() {
require('ts-node').register({ require('ts-node').register({
project: require('path').join(__dirname, './tsconfig.json') project: require('path').join(__dirname, './tsconfig.json')
}); });
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
} }
}; };
\ No newline at end of file
import { AppPage } from './app.po'; import { AppPage } from './app.po';
import { browser, logging } from 'protractor'; import { browser, logging } from 'protractor';
describe('workspace-project App', () => { describe('workspace-project App', () => {
let page: AppPage; let page: AppPage;
beforeEach(() => { beforeEach(() => {
page = new AppPage(); page = new AppPage();
}); });
it('should display welcome message', () => { it('should display welcome message', () => {
page.navigateTo(); page.navigateTo();
expect(page.getTitleText()).toEqual('Welcome to ng-one!'); expect(page.getTitleText()).toEqual('Welcome to ng-one!');
}); });
afterEach(async () => { afterEach(async () => {
// Assert that there are no errors emitted from the browser // Assert that there are no errors emitted from the browser
const logs = await browser.manage().logs().get(logging.Type.BROWSER); const logs = await browser.manage().logs().get(logging.Type.BROWSER);
expect(logs).not.toContain(jasmine.objectContaining({ expect(logs).not.toContain(jasmine.objectContaining({
level: logging.Level.SEVERE, level: logging.Level.SEVERE,
} as logging.Entry)); } as logging.Entry));
}); });
}); });
import { browser, by, element } from 'protractor'; import { browser, by, element } from 'protractor';
export class AppPage { export class AppPage {
navigateTo() { navigateTo() {
return browser.get(browser.baseUrl) as Promise<any>; return browser.get(browser.baseUrl) as Promise<any>;
} }
getTitleText() { getTitleText() {
return element(by.css('app-root h1')).getText() as Promise<string>; return element(by.css('app-root h1')).getText() as Promise<string>;
} }
} }
{ {
"extends": "../tsconfig.json", "extends": "../tsconfig.json",
"compilerOptions": { "compilerOptions": {
"outDir": "../out-tsc/e2e", "outDir": "../out-tsc/e2e",
"module": "commonjs", "module": "commonjs",
"target": "es5", "target": "es5",
"types": [ "types": [
"jasmine", "jasmine",
"jasminewd2", "jasminewd2",
"node" "node"
] ]
} }
} }
// Karma configuration file, see link for more information // Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html // https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) { module.exports = function (config) {
config.set({ config.set({
basePath: '', basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'], frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [ plugins: [
require('karma-jasmine'), require('karma-jasmine'),
require('karma-chrome-launcher'), require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'), require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'), require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma') require('@angular-devkit/build-angular/plugins/karma')
], ],
client: { client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser clearContext: false // leave Jasmine Spec Runner output visible in browser
}, },
coverageIstanbulReporter: { coverageIstanbulReporter: {
dir: require('path').join(__dirname, './coverage/ng-one'), dir: require('path').join(__dirname, './coverage/ng-one'),
reports: ['html', 'lcovonly', 'text-summary'], reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true fixWebpackSourcePaths: true
}, },
reporters: ['progress', 'kjhtml'], reporters: ['progress', 'kjhtml'],
port: 9876, port: 9876,
colors: true, colors: true,
logLevel: config.LOG_INFO, logLevel: config.LOG_INFO,
autoWatch: true, autoWatch: true,
browsers: ['Chrome'], browsers: ['Chrome'],
singleRun: false, singleRun: false,
restartOnFileChange: true restartOnFileChange: true
}); });
}; };
This diff is collapsed.
{ {
"name": "ng-template-generator", "name": "ng-template-generator",
"version": "0.0.1", "version": "0.0.1",
"scripts": { "scripts": {
"start": "ng serve", "start": "ng serve",
"build": "ng build --build--optimizer --aot --base-href /JGT/v3/", "build": "ng build --build--optimizer --aot --base-href /JGT/v3/",
"publish": "node ./bin/publish.js", "publish": "node ./bin/publish.js",
"ng": "ng", "ng": "ng",
"test": "ng test", "test": "ng test",
"lint": "ng lint", "lint": "ng lint",
"e2e": "ng e2e" "e2e": "ng e2e"
}, },
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "~9.0.2", "@angular/animations": "~9.0.2",
"@angular/common": "~9.0.2", "@angular/common": "~9.0.2",
"@angular/compiler": "~9.0.2", "@angular/compiler": "~9.0.2",
"@angular/core": "~9.0.2", "@angular/core": "~9.0.2",
"@angular/forms": "~9.0.2", "@angular/forms": "~9.0.2",
"@angular/platform-browser": "~9.0.2", "@angular/platform-browser": "~9.0.2",
"@angular/platform-browser-dynamic": "~9.0.2", "@angular/platform-browser-dynamic": "~9.0.2",
"@angular/router": "~9.0.2", "@angular/router": "~9.0.2",
"@fortawesome/angular-fontawesome": "^0.6.0", "@fortawesome/angular-fontawesome": "^0.6.0",
"@fortawesome/fontawesome-svg-core": "^1.2.27", "@fortawesome/fontawesome-svg-core": "^1.2.27",
"@fortawesome/free-regular-svg-icons": "^5.12.1", "@fortawesome/free-regular-svg-icons": "^5.12.1",
"@fortawesome/free-solid-svg-icons": "^5.12.1", "@fortawesome/free-solid-svg-icons": "^5.12.1",
"@tweenjs/tween.js": "~18.5.0", "@tweenjs/tween.js": "~18.5.0",
"ali-oss": "^6.5.1", "ali-oss": "^6.5.1",
"compressing": "^1.5.0", "compressing": "^1.5.0",
"ng-zorro-antd": "^8.5.2", "ng-zorro-antd": "^8.5.2",
"rxjs": "~6.5.4", "rxjs": "~6.5.4",
"node-sass": "^4.0.0", "node-sass": "^4.0.0",
"spark-md5": "^3.0.0", "spark-md5": "^3.0.0",
"tslib": "^1.10.0", "tslib": "^1.10.0",
"zone.js": "~0.10.2" "zone.js": "~0.10.2"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "~0.900.3", "@angular-devkit/build-angular": "~0.900.3",
"@angular/cli": "~9.0.3", "@angular/cli": "~9.0.3",
"@angular/compiler-cli": "~9.0.2", "@angular/compiler-cli": "~9.0.2",
"@angular/language-service": "~9.0.2", "@angular/language-service": "~9.0.2",
"@types/jasmine": "~3.5.0", "@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3", "@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1", "@types/node": "^12.11.1",
"codelyzer": "^5.1.2", "codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0", "jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1", "jasmine-spec-reporter": "~4.2.1",
"karma": "~4.3.0", "karma": "~4.3.0",
"karma-chrome-launcher": "~3.1.0", "karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0", "karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1", "karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2", "karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3", "protractor": "~5.4.3",
"ts-node": "~8.3.0", "ts-node": "~8.3.0",
"tslint": "~5.18.0", "tslint": "~5.18.0",
"typescript": "~3.7.5" "typescript": "~3.7.5"
} }
} }
\ No newline at end of file
import { ErrorHandler } from '@angular/core'; import { ErrorHandler } from '@angular/core';
export class MyErrorHandler implements ErrorHandler { export class MyErrorHandler implements ErrorHandler {
handleError(error) { handleError(error) {
console.log(error.stack); console.log(error.stack);
(<any> window).courseware.sendErrorLog(error); (<any> window).courseware.sendErrorLog(error);
} }
} }
\ No newline at end of file
<app-form *ngIf="type==='form'"></app-form> <app-form *ngIf="type==='form'"></app-form>
<app-play *ngIf="type==='play'"></app-play> <app-play *ngIf="type==='play'"></app-play>
\ No newline at end of file
import { Component , OnInit} from '@angular/core'; import { Component , OnInit} from '@angular/core';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'] styleUrls: ['./app.component.scss']
}) })
export class AppComponent implements OnInit { export class AppComponent implements OnInit {
type = 'play'; type = 'play';
constructor() { constructor() {
const tp = this.getQueryString('type'); const tp = this.getQueryString('type');
if (tp) { if (tp) {
this.type = tp; this.type = tp;
} }
} }
ngOnInit() { ngOnInit() {
} }
getQueryString(name) { getQueryString(name) {
const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'); const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
const r = window.location.search.substr(1).match(reg); const r = window.location.search.substr(1).match(reg);
if (r != null) { if (r != null) {
return unescape(r[2]); return unescape(r[2]);
} }
return null; return null;
} }
} }
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core'; import { NgModule, ErrorHandler } from '@angular/core';
import {MyErrorHandler} from './MyError'; import {MyErrorHandler} from './MyError';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd'; import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http'; import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { registerLocaleData } from '@angular/common'; import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh'; import zh from '@angular/common/locales/zh';
import {FormComponent} from './form/form.component'; import {FormComponent} from './form/form.component';
import {PlayComponent} from './play/play.component'; import {PlayComponent} from './play/play.component';
import {LessonTitleConfigComponent} from './common/lesson-title-config/lesson-title-config.component'; import {LessonTitleConfigComponent} from './common/lesson-title-config/lesson-title-config.component';
import {BackgroundImagePipe} from './pipes/background-image.pipe'; import {BackgroundImagePipe} from './pipes/background-image.pipe';
import {UploadImageWithPreviewComponent} from './common/upload-image-with-preview/upload-image-with-preview.component'; 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 {PlayerContentWrapperComponent} from './common/player-content-wrapper/player-content-wrapper.component';
import {CustomHotZoneComponent} from './common/custom-hot-zone/custom-hot-zone.component'; import {CustomHotZoneComponent} from './common/custom-hot-zone/custom-hot-zone.component';
import {UploadVideoComponent} from './common/upload-video/upload-video.component'; import {UploadVideoComponent} from './common/upload-video/upload-video.component';
import {TimePipe} from './pipes/time.pipe'; import {TimePipe} from './pipes/time.pipe';
import {ResourcePipe} from './pipes/resource.pipe'; import {ResourcePipe} from './pipes/resource.pipe';
import {AudioRecorderComponent} from './common/audio-recorder/audio-recorder.component'; import {AudioRecorderComponent} from './common/audio-recorder/audio-recorder.component';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome'; import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { fas } from '@fortawesome/free-solid-svg-icons'; import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons'; import { far } from '@fortawesome/free-regular-svg-icons';
import { UploadDragonBoneComponent } from './common/upload-dragon-bone/upload-dragon-bone.component'; import { UploadDragonBoneComponent } from './common/upload-dragon-bone/upload-dragon-bone.component';
registerLocaleData(zh); registerLocaleData(zh);
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent,
FormComponent, FormComponent,
PlayComponent, PlayComponent,
LessonTitleConfigComponent, LessonTitleConfigComponent,
AudioRecorderComponent, AudioRecorderComponent,
UploadImageWithPreviewComponent, UploadImageWithPreviewComponent,
BackgroundImagePipe, BackgroundImagePipe,
ResourcePipe, ResourcePipe,
TimePipe, TimePipe,
UploadVideoComponent, UploadVideoComponent,
CustomHotZoneComponent, CustomHotZoneComponent,
UploadDragonBoneComponent, UploadDragonBoneComponent,
PlayerContentWrapperComponent PlayerContentWrapperComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
NgZorroAntdModule, NgZorroAntdModule,
FormsModule, FormsModule,
HttpClientModule, HttpClientModule,
BrowserAnimationsModule, BrowserAnimationsModule,
FontAwesomeModule FontAwesomeModule
], ],
providers: [ providers: [
{provide: ErrorHandler, useClass: MyErrorHandler}, {provide: ErrorHandler, useClass: MyErrorHandler},
{ provide: NZ_I18N, useValue: zh_CN } { provide: NZ_I18N, useValue: zh_CN }
], ],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })
export class AppModule { export class AppModule {
constructor(library: FaIconLibrary) { constructor(library: FaIconLibrary) {
library.addIconPacks(fas, far); library.addIconPacks(fas, far);
} }
} }
<div class="d-flex"> <div class="d-flex">
<div class="p-btn-record d-flex"> <div class="p-btn-record d-flex">
<div class="btn-clear" style="cursor: pointer" (click)="onBtnClearAudio()" *ngIf="withRmBtn && (audioUrl || audioBlob)"> <div class="btn-clear" style="cursor: pointer" (click)="onBtnClearAudio()" *ngIf="withRmBtn && (audioUrl || audioBlob)">
<fa-icon icon="times"></fa-icon> <fa-icon icon="times"></fa-icon>
</div> </div>
<div class="btn-record" *ngIf="type===Type.RECORD && !isUploading" <div class="btn-record" *ngIf="type===Type.RECORD && !isUploading"
[class.p-recording]="isRecording" [class.p-recording]="isRecording"
(click)="onBtnRecord()"> (click)="onBtnRecord()">
<fa-icon icon="microphone"></fa-icon> <fa-icon icon="microphone"></fa-icon>
Record Audio Record Audio
</div> </div>
<nz-upload <nz-upload
[nzAccept] = "'.mp3'" [nzAccept] = "'.mp3'"
[nzShowUploadList]="false" [nzShowUploadList]="false"
[nzAction]="uploadUrl" [nzAction]="uploadUrl"
[nzData]="uploadData" [nzData]="uploadData"
(nzChange)="handleChange($event)"> (nzChange)="handleChange($event)">
<div class="btn-upload" [ngClass]="{'has-clear': withRmBtn && (audioUrl || audioBlob)}" *ngIf="type===Type.UPLOAD && !isUploading"> <div class="btn-upload" [ngClass]="{'has-clear': withRmBtn && (audioUrl || audioBlob)}" *ngIf="type===Type.UPLOAD && !isUploading">
<fa-icon icon="upload"></fa-icon> <fa-icon icon="upload"></fa-icon>
Upload Audio Upload Audio
</div> </div>
</nz-upload> </nz-upload>
<div class="p-upload-progress-bg" *ngIf="isUploading"> <div class="p-upload-progress-bg" *ngIf="isUploading">
<div class="i-bg" [style.width]="progress+'%'"></div> <div class="i-bg" [style.width]="progress+'%'"></div>
<div class="i-text"> <div class="i-text">
<fa-icon icon="cloud-upload-alt"></fa-icon> <fa-icon icon="cloud-upload-alt"></fa-icon>
Uploading... Uploading...
</div> </div>
</div> </div>
<div *ngIf="audioUrl && needRemove; then truthyTemplate else falsyTemplate"></div> <div *ngIf="audioUrl && needRemove; then truthyTemplate else falsyTemplate"></div>
<ng-template #truthyTemplate > <ng-template #truthyTemplate >
<div class="btn-delete" (click)="onBtnDeleteAudio()"> <div class="btn-delete" (click)="onBtnDeleteAudio()">
<fa-icon icon="close"></fa-icon> <fa-icon icon="close"></fa-icon>
</div> </div>
</ng-template> </ng-template>
<ng-template #falsyTemplate> <ng-template #falsyTemplate>
<div class="btn-switch" (click)="onBtnSwitchType()"> <div class="btn-switch" (click)="onBtnSwitchType()">
<fa-icon icon="cog"></fa-icon> <fa-icon icon="cog"></fa-icon>
</div> </div>
</ng-template> </ng-template>
</div> </div>
<div class="p-progress ml-2" (click)="onBtnPlay()" *ngIf="audioUrl || audioBlob"> <div class="p-progress ml-2" (click)="onBtnPlay()" *ngIf="audioUrl || audioBlob">
<nz-progress [nzPercent]="percent" [nzWidth]="30" [nzFormat]="progressText" <nz-progress [nzPercent]="percent" [nzWidth]="30" [nzFormat]="progressText"
nzType="circle"></nz-progress> nzType="circle"></nz-progress>
<div class="p-btn-play" [style.left]="isPlaying?'8px':''"> <div class="p-btn-play" [style.left]="isPlaying?'8px':''">
<fa-icon [icon]="playIcon"></fa-icon> <fa-icon [icon]="playIcon"></fa-icon>
</div> </div>
</div> </div>
</div> </div>
.d-flex{ .d-flex{
display: flex; display: flex;
} }
.p-btn-record { .p-btn-record {
font-size: 0.9rem; font-size: 0.9rem;
color: #555; color: #555;
font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
.btn-record, .btn-upload { .btn-record, .btn-upload {
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
width: 130px; width: 130px;
height: 33px; height: 33px;
line-height: 33px; line-height: 33px;
border-radius: 0.5rem 0 0 0.5rem; border-radius: 0.5rem 0 0 0.5rem;
border: 1px solid #ddd; border: 1px solid #ddd;
border-right: 0.5px; border-right: 0.5px;
&:hover { &:hover {
color: rgb(64, 169, 255); color: rgb(64, 169, 255);
} }
} }
.btn-record.has-clear, .btn-upload.has-clear{ .btn-record.has-clear, .btn-upload.has-clear{
border-radius:0; border-radius:0;
border-left: 0; border-left: 0;
} }
.btn-clear{ .btn-clear{
text-align: center; text-align: center;
color: #aaa; color: #aaa;
padding: 0 0.5rem; padding: 0 0.5rem;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 0.5rem 0 0 0.5rem; border-radius: 0.5rem 0 0 0.5rem;
height: 33px; height: 33px;
line-height: 33px; line-height: 33px;
} }
.btn-switch { .btn-switch {
text-align: center; text-align: center;
color: #aaa; color: #aaa;
padding: 0 0.5rem; padding: 0 0.5rem;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 0 0.5rem 0.5rem 0; border-radius: 0 0.5rem 0.5rem 0;
height: 33px; height: 33px;
line-height: 33px; line-height: 33px;
&:hover { &:hover {
color: rgb(64, 169, 255); color: rgb(64, 169, 255);
} }
} }
.btn-delete { .btn-delete {
text-align: center; text-align: center;
color: #aaa; color: #aaa;
padding: 0 0.5rem; padding: 0 0.5rem;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 0 0.5rem 0.5rem 0; border-radius: 0 0.5rem 0.5rem 0;
height: 33px; height: 33px;
line-height: 33px; line-height: 33px;
&:hover { &:hover {
color: #ec5b56; color: #ec5b56;
} }
} }
} }
.p-recording { .p-recording {
background: orangered; background: orangered;
color: white !important; color: white !important;
} }
.p-upload-progress-bg { .p-upload-progress-bg {
position: relative; position: relative;
width: 130px; width: 130px;
height: 33px; height: 33px;
line-height: 33px; line-height: 33px;
& .i-text { & .i-text {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
text-align: center; text-align: center;
border-radius: 0.5rem 0 0 0.5rem; border-radius: 0.5rem 0 0 0.5rem;
border: 1px solid #ddd; border: 1px solid #ddd;
border-right: 0.5px; border-right: 0.5px;
color: white; color: white;
text-shadow: 0 0 2px rgba(0, 0, 0, .85); text-shadow: 0 0 2px rgba(0, 0, 0, .85);
} }
& .i-bg { & .i-bg {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
height: 100%; height: 100%;
background-color: #27b43f; background-color: #27b43f;
border-radius: 0.5rem 0 0 0.5rem; border-radius: 0.5rem 0 0 0.5rem;
} }
} }
.p-progress { .p-progress {
margin-top: 2px; margin-top: 2px;
position: relative; position: relative;
line-height: 26px; line-height: 26px;
.p-btn-play { .p-btn-play {
position: absolute; position: absolute;
left: 10px; left: 10px;
top: 3px; top: 3px;
color: #555; color: #555;
} }
} }
:host ::ng-deep nz-upload { :host ::ng-deep nz-upload {
line-height: 33px; line-height: 33px;
} }
This diff is collapsed.
<div class="p-image-children-editor"> <div class="p-image-children-editor">
<h5 style="margin-left: 2.5%;"> preview: </h5> <h5 style="margin-left: 2.5%;"> preview: </h5>
<div class="preview-box" #wrap> <div class="preview-box" #wrap>
<canvas id="canvas" #canvas></canvas> <canvas id="canvas" #canvas></canvas>
</div> </div>
<div nz-row nzType="flex" nzAlign="middle"> <div nz-row nzType="flex" nzAlign="middle">
<div nz-col nzSpan="5" nzOffset="1"> <div nz-col nzSpan="5" nzOffset="1">
<h5> add background: </h5> <h5> add background: </h5>
<div class="bg-box"> <div class="bg-box">
<app-upload-image-with-preview <app-upload-image-with-preview
[picUrl]="bgItem?.url" [picUrl]="bgItem?.url"
(imageUploaded)="onBackgroundUploadSuccess($event)"> (imageUploaded)="onBackgroundUploadSuccess($event)">
</app-upload-image-with-preview> </app-upload-image-with-preview>
</div> </div>
</div> </div>
<div nz-col nzSpan="5" nzOffset="1" class="img-box" <div nz-col nzSpan="5" nzOffset="1" class="img-box"
*ngFor="let it of hotZoneArr; let i = index"> *ngFor="let it of hotZoneArr; let i = index">
<div <div
style="margin: auto; padding: 5px; margin-top: 30px; width:90%; border: 2px dashed #ddd; border-radius: 10px"> style="margin: auto; padding: 5px; margin-top: 30px; width:90%; border: 2px dashed #ddd; border-radius: 10px">
<span style="margin-left: 40%;"> item-{{i + 1}} <span style="margin-left: 40%;"> item-{{i + 1}}
</span> </span>
<button style="float: right;" nz-button nzType="danger" nzSize="small" (click)="deleteBtnClick(i)"> <button style="float: right;" nz-button nzType="danger" nzSize="small" (click)="deleteBtnClick(i)">
X X
</button> </button>
<nz-divider style="margin-top: 10px;"></nz-divider> <nz-divider style="margin-top: 10px;"></nz-divider>
<div style="margin-top: -20px; margin-bottom: 5px"> <div style="margin-top: -20px; margin-bottom: 5px">
<nz-radio-group [ngModel]="it.itemType" (ngModelChange)="radioChange($event, it)"> <nz-radio-group [ngModel]="it.itemType" (ngModelChange)="radioChange($event, it)">
<label *ngIf="isHasRect" nz-radio nzValue="rect">矩形</label> <label *ngIf="isHasRect" nz-radio nzValue="rect">矩形</label>
<label *ngIf="isHasPic" nz-radio nzValue="pic">图片</label> <label *ngIf="isHasPic" nz-radio nzValue="pic">图片</label>
<label *ngIf="isHasText" nz-radio nzValue="text">文本</label> <label *ngIf="isHasText" nz-radio nzValue="text">文本</label>
</nz-radio-group> </nz-radio-group>
</div> </div>
<div *ngIf="it.itemType == 'pic'"> <div *ngIf="it.itemType == 'pic'">
<app-upload-image-with-preview <app-upload-image-with-preview
[picUrl]="it?.pic_url" [picUrl]="it?.pic_url"
(imageUploaded)="onItemImgUploadSuccess($event, it)"> (imageUploaded)="onItemImgUploadSuccess($event, it)">
</app-upload-image-with-preview> </app-upload-image-with-preview>
</div> </div>
<div *ngIf="it.itemType == 'text'"> <div *ngIf="it.itemType == 'text'">
<input type="text" nz-input [(ngModel)]="it.text" (blur)="saveText(it)"> <input type="text" nz-input [(ngModel)]="it.text" (blur)="saveText(it)">
</div> </div>
<div style="width: 100%; margin-top: 5px;"> <div style="width: 100%; margin-top: 5px;">
<app-audio-recorder <app-audio-recorder
[audioUrl]="it.audio_url" [audioUrl]="it.audio_url"
(audioUploaded)="onItemAudioUploadSuccess($event, it)" (audioUploaded)="onItemAudioUploadSuccess($event, it)"
></app-audio-recorder> ></app-audio-recorder>
</div> </div>
</div> </div>
</div> </div>
<div nz-col nzSpan="5" nzOffset="1"> <div nz-col nzSpan="5" nzOffset="1">
<div class="bg-box"> <div class="bg-box">
<button nz-button nzType="dashed" (click)="addBtnClick()" <button nz-button nzType="dashed" (click)="addBtnClick()"
class="add-btn"> class="add-btn">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i> <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
<!--Add Image--> <!--Add Image-->
Add hot zone Add hot zone
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<nz-divider></nz-divider> <nz-divider></nz-divider>
<div class="save-box"> <div class="save-box">
<button class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round" <button class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round"
(click)="saveClick()" > (click)="saveClick()" >
<i nz-icon nzType="save"></i> <i nz-icon nzType="save"></i>
Save Save
</button> </button>
</div> </div>
</div> </div>
<label style="opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'">1</label> <label style="opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'">1</label>
.p-image-children-editor { .p-image-children-editor {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 0.5rem; border-radius: 0.5rem;
border: 2px solid #ddd; border: 2px solid #ddd;
.preview-box { .preview-box {
margin: auto; margin: auto;
width: 95%; width: 95%;
height: 35vw; height: 35vw;
border: 2px dashed #ddd; border: 2px dashed #ddd;
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: #fafafa; background-color: #fafafa;
text-align: center; text-align: center;
color: #aaa; color: #aaa;
.preview-img { .preview-img {
height: 100%; height: 100%;
width: auto; width: auto;
} }
} }
.bg-box{ .bg-box{
//width: 100%; //width: 100%;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.img-box { .img-box {
margin-bottom: 1rem; margin-bottom: 1rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.img-box-upload{ .img-box-upload{
width: 80%; width: 80%;
} }
.add-btn { .add-btn {
margin-top: 1rem; margin-top: 1rem;
width: 200px; width: 200px;
height: 90px; height: 90px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
} }
.save-box { .save-box {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.save-btn { .save-btn {
width: 160px; width: 160px;
height: 40px; height: 40px;
//margin-top: 20px; //margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
} }
h5 { h5 {
margin-top: 1rem; margin-top: 1rem;
} }
@font-face @font-face
{ {
font-family: 'BRLNSR_1'; font-family: 'BRLNSR_1';
src: url("/assets/font/BRLNSR_1.TTF") ; src: url("/assets/font/BRLNSR_1.TTF") ;
} }
//@import '../../../style/common_mixin'; //@import '../../../style/common_mixin';
// //
//.p-image-uploader { //.p-image-uploader {
// position: relative; // position: relative;
// display: block; // display: block;
// width: 100%; // width: 100%;
// height: 0; // height: 0;
// padding-bottom: 56.25%; // padding-bottom: 56.25%;
// .p-box { // .p-box {
// position: absolute; // position: absolute;
// left: 0; // left: 0;
// top: 0; // top: 0;
// right: 0; // right: 0;
// bottom: 0; // bottom: 0;
// border: 2px dashed #ddd; // border: 2px dashed #ddd;
// border-radius: 0.5rem; // border-radius: 0.5rem;
// background-color: #fafafa; // background-color: #fafafa;
// text-align: center; // text-align: center;
// color: #aaa; // color: #aaa;
// .p-upload-icon { // .p-upload-icon {
// text-align: center; // text-align: center;
// margin: auto; // margin: auto;
// .anticon-upload { // .anticon-upload {
// color: #888; // color: #888;
// font-size: 5rem; // font-size: 5rem;
// } // }
// .p-progress-bar { // .p-progress-bar {
// position: relative; // position: relative;
// width: 20rem; // width: 20rem;
// height: 1.5rem; // height: 1.5rem;
// border: 1px solid #ccc; // border: 1px solid #ccc;
// border-radius: 1rem; // border-radius: 1rem;
// .p-progress-bg { // .p-progress-bg {
// background-color: #1890ff; // background-color: #1890ff;
// border-radius: 1rem; // border-radius: 1rem;
// height: 100%; // height: 100%;
// } // }
// .p-progress-value { // .p-progress-value {
// position: absolute; // position: absolute;
// top: 0; // top: 0;
// left: 0; // left: 0;
// width: 100%; // width: 100%;
// height: 100%; // height: 100%;
// text-shadow: 0 0 4px #000; // text-shadow: 0 0 4px #000;
// color: white; // color: white;
// text-align: center; // text-align: center;
// font-size: 0.9rem; // font-size: 0.9rem;
// line-height: 1.5rem; // line-height: 1.5rem;
// } // }
// } // }
// } // }
// .p-preview { // .p-preview {
// width: 100%; // width: 100%;
// height: 100%; // height: 100%;
// //background-image: url("https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"); // //background-image: url("https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png");
// @include k-img-bg(); // @include k-img-bg();
// } // }
// } // }
//} //}
// //
//.p-btn-delete { //.p-btn-delete {
// position: absolute; // position: absolute;
// right: -0.5rem; // right: -0.5rem;
// top: -0.5rem; // top: -0.5rem;
// width: 2rem; // width: 2rem;
// height: 2rem; // height: 2rem;
// border: 0.2rem solid white; // border: 0.2rem solid white;
// border-radius: 50%; // border-radius: 50%;
// font-size: 1.2rem; // font-size: 1.2rem;
// background-color: #fb781a; // background-color: #fb781a;
// color: white; // color: white;
// text-align: center; // text-align: center;
//} //}
// //
//.p-upload-progress-bg { //.p-upload-progress-bg {
// position: absolute; // position: absolute;
// width: 100%; // width: 100%;
// height: 100%; // height: 100%;
// display: flex; // display: flex;
// align-items: center; // align-items: center;
// justify-content: center; // justify-content: center;
// & .i-text { // & .i-text {
// position: absolute; // position: absolute;
// text-align: center; // text-align: center;
// color: white; // color: white;
// text-shadow: 0 0 2px rgba(0, 0, 0, .85); // text-shadow: 0 0 2px rgba(0, 0, 0, .85);
// } // }
// & .i-bg { // & .i-bg {
// position: absolute; // position: absolute;
// left: 0; // left: 0;
// top: 0; // top: 0;
// height: 100%; // height: 100%;
// background-color: #27b43f; // background-color: #27b43f;
// border-radius: 0.5rem; // border-radius: 0.5rem;
// } // }
//} //}
// //
// //
//:host ::ng-deep .ant-upload { //:host ::ng-deep .ant-upload {
// display: block; // display: block;
//} //}
<div class="title-config"> <div class="title-config">
<div class="title-wrap"> <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-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" <nz-select class="ml-1" style="width: 120px;" [(ngModel)]="__fontFamily"
(ngModelChange)="onChangeFontFamily($event)" (ngModelChange)="onChangeFontFamily($event)"
nzPlaceHolder="Font Family" nzPlaceHolder="Font Family"
[nzDropdownMatchSelectWidth]="false"> [nzDropdownMatchSelectWidth]="false">
<nz-option [nzValue]="font" nzCustomContent [nzLabel]="font" *ngFor="let font of fontFamilyList"> <nz-option [nzValue]="font" nzCustomContent [nzLabel]="font" *ngFor="let font of fontFamilyList">
<span [ngStyle]="{'font-family': font}" >{{font}}</span> <span [ngStyle]="{'font-family': font}" >{{font}}</span>
</nz-option> </nz-option>
</nz-select> </nz-select>
<nz-select class="ml-1" style="width: 110px;" [(ngModel)]="__fontSize" <nz-select class="ml-1" style="width: 110px;" [(ngModel)]="__fontSize"
(ngModelChange)="onChangeFontSize()" (ngModelChange)="onChangeFontSize()"
nzPlaceHolder="Font Size"> nzPlaceHolder="Font Size">
<nz-option [nzValue]="i" [nzLabel]="'Size - ' + i" *ngFor="let i of fontSizeRange"></nz-option> <nz-option [nzValue]="i" [nzLabel]="'Size - ' + i" *ngFor="let i of fontSizeRange"></nz-option>
</nz-select> </nz-select>
<div class="p-divider"></div> <div class="p-divider"></div>
<div class="i-tool-font-btn d-flex mr-2"> <div class="i-tool-font-btn d-flex mr-2">
<div class="position-relative fa-icon" (click)="onChangeBold()"> <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> <fa-icon icon="bold"></fa-icon>
</div> </div>
</div> </div>
<div class="i-tool-font-btn d-flex mr-2"> <div class="i-tool-font-btn d-flex mr-2">
<div class="position-relative fa-icon" (click)="onChangeItalic()"> <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> <fa-icon icon="italic"></fa-icon>
</div> </div>
</div> </div>
<div class="i-tool-font-btn d-flex mr-2"> <div class="i-tool-font-btn d-flex mr-2">
<div class="position-relative fa-icon" (click)="onChangeUnderline()"> <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> <fa-icon icon="underline"></fa-icon>
</div> </div>
</div> </div>
<div class="i-tool-font-btn d-flex"> <div class="i-tool-font-btn d-flex">
<div class="position-relative fa-icon" (click)="onChangeStrikethrough()"> <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> <fa-icon icon="strikethrough"></fa-icon>
</div> </div>
</div> </div>
<div class="p-divider"></div> <div class="p-divider"></div>
<div class="i-tool-font-color d-flex"> <div class="i-tool-font-color d-flex">
<div class="position-relative i-left flex-fill" (click)="onChangeFontColor($event)"> <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> <fa-icon icon="palette"></fa-icon>
<div class="i-color" [style.background-color]="__fontColor"></div> <div class="i-color" [style.background-color]="__fontColor"></div>
</div> </div>
<div class="i-dropdown-menu" nzPlacement="bottom" <div class="i-dropdown-menu" nzPlacement="bottom"
nz-popover [(nzVisible)]="isShowFontColorPane" nzTrigger="click" nz-popover [(nzVisible)]="isShowFontColorPane" nzTrigger="click"
[nzContent]="colorPane"> [nzContent]="colorPane">
<i nz-icon type="down" theme="outline"></i> <i nz-icon type="down" theme="outline"></i>
</div> </div>
</div> </div>
<div class="p-divider"></div> <div class="p-divider"></div>
<div style="background: #fff;display: block;"> <div style="background: #fff;display: block;">
<div class="position-relative"> <div class="position-relative">
<app-audio-recorder [audioUrl]="titleObj && titleObj.audio_url" (audioUploaded)="titleAudioUploaded($event)"></app-audio-recorder> <app-audio-recorder [audioUrl]="titleObj && titleObj.audio_url" (audioUploaded)="titleAudioUploaded($event)"></app-audio-recorder>
</div> </div>
</div> </div>
</div> </div>
<div class="width-100 d-flex"> <div class="width-100 d-flex">
<iframe #titleEl id="titleContentEgret" frameborder="0" style="overflow: hidden;width: 100%; height:48px; margin: 0; padding: 0;"></iframe> <iframe #titleEl id="titleContentEgret" frameborder="0" style="overflow: hidden;width: 100%; height:48px; margin: 0; padding: 0;"></iframe>
</div> </div>
</div> </div>
<ng-template #colorPane> <ng-template #colorPane>
<div class="p-color-pane" nz-row nzGutter="16" nzType="flex"> <div class="p-color-pane" nz-row nzGutter="16" nzType="flex">
<div nz-col class="p-color-item" *ngFor="let color of colorList" <div nz-col class="p-color-item" *ngFor="let color of colorList"
[style.background-color]="color" [style.background-color]="color"
(click)="onSelectColor(color)" (click)="onSelectColor(color)"
> >
</div> </div>
</div> </div>
</ng-template> </ng-template>
</div> </div>
</div> </div>
</div> </div>
<div class="cmp-player-content-wrapper" #wrapperEl> <div class="cmp-player-content-wrapper" #wrapperEl>
<div class="cmp-cnt-box"> <div class="cmp-cnt-box">
<img [src]="'assets/'+ratio+'.png'" alt=""> <img [src]="'assets/'+ratio+'.png'" alt="">
<div class="cmp-cnt-main"> <div class="cmp-cnt-main">
<ng-content></ng-content> <ng-content></ng-content>
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
@import '../../style/common_mixin.css'; @import '../../style/common_mixin.css';
.cmp-player-content-wrapper{ .cmp-player-content-wrapper{
max-height: 100%; max-height: 100%;
display: block; display: block;
position: relative; position: relative;
height: 100%; height: 100%;
.cmp-cnt-box{ .cmp-cnt-box{
display: inline-block; display: inline-block;
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
width: auto; width: auto;
height: 100%; height: 100%;
position: relative; position: relative;
img{ img{
height: 100%; height: 100%;
width: auto; width: auto;
} }
} }
.cmp-cnt-main{ .cmp-cnt-main{
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
} }
[style*="--aspect-ratio"] > :first-child { [style*="--aspect-ratio"] > :first-child {
width: 100%; width: 100%;
} }
[style*="--aspect-ratio"] > img { [style*="--aspect-ratio"] > img {
height: auto; height: auto;
} }
@supports (--custom:property) { @supports (--custom:property) {
[style*="--aspect-ratio"] { [style*="--aspect-ratio"] {
position: relative; position: relative;
} }
[style*="--aspect-ratio"]::before { [style*="--aspect-ratio"]::before {
content: ""; content: "";
display: block; display: block;
padding-bottom: calc(100% / (var(--aspect-ratio))); padding-bottom: calc(100% / (var(--aspect-ratio)));
} }
[style*="--aspect-ratio"] > :first-child { [style*="--aspect-ratio"] > :first-child {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
height: 100%; height: 100%;
} }
} }
import { import {
AfterViewInit, AfterViewInit,
Component, Component,
ElementRef, ElementRef,
Input, Input,
OnChanges, OnChanges,
OnDestroy, OnDestroy,
OnInit, OnInit,
ViewChild ViewChild
} from '@angular/core'; } from '@angular/core';
@Component({ @Component({
selector: 'app-player-content-wrapper', selector: 'app-player-content-wrapper',
templateUrl: './player-content-wrapper.component.html', templateUrl: './player-content-wrapper.component.html',
styleUrls: ['./player-content-wrapper.component.scss'] styleUrls: ['./player-content-wrapper.component.scss']
}) })
export class PlayerContentWrapperComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit { export class PlayerContentWrapperComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit {
@ViewChild('wrapperEl', {static: true }) wrapperEl: ElementRef; @ViewChild('wrapperEl', {static: true }) wrapperEl: ElementRef;
// // aspect ratio? // // aspect ratio?
@Input() ratio; @Input() ratio;
_w: string; _w: string;
_h: string; _h: string;
constructor() { constructor() {
if (window.innerHeight < window.innerWidth) { if (window.innerHeight < window.innerWidth) {
this._h = '100%'; this._h = '100%';
this._w = 'auto'; this._w = 'auto';
} else { } else {
this._w = '100%'; this._w = '100%';
this._h = 'auto'; this._h = 'auto';
} }
} }
ngOnInit() { ngOnInit() {
if (!this.ratio) { if (!this.ratio) {
this.ratio = '20-9'; this.ratio = '20-9';
} }
} }
ngOnChanges() { ngOnChanges() {
} }
ngOnDestroy(): void { ngOnDestroy(): void {
} }
ngAfterViewInit() { ngAfterViewInit() {
} }
} }
<div class="position-relative"> <div class="position-relative">
<button nz-button (click)="setAnimaBtnClick()" style=" border-radius: 0.5rem; border: 1px solid #ddd;"> <button nz-button (click)="setAnimaBtnClick()" style=" border-radius: 0.5rem; border: 1px solid #ddd;">
<i nz-icon nzType="tool" nzTheme="outline"></i> <i nz-icon nzType="tool" nzTheme="outline"></i>
{{btnName}} {{btnName}}
</button> </button>
<!--配置龙骨面板--> <!--配置龙骨面板-->
<nz-modal [(nzVisible)]="animaPanelVisible" (nzAfterClose)="closePanel()" nzTitle="配置资源文件" <nz-modal [(nzVisible)]="animaPanelVisible" (nzAfterClose)="closePanel()" nzTitle="配置资源文件"
(nzOnCancel)="animaPanelCancel()" (nzOnOk)="animaPanelOk()" nzOkText="保存"> (nzOnCancel)="animaPanelCancel()" (nzOnOk)="animaPanelOk()" nzOkText="保存">
<div class="anima-upload-btn"> <div class="anima-upload-btn">
<span style="margin-right: 10px">上传 ske_json 文件: </span> <span style="margin-right: 10px">上传 ske_json 文件: </span>
<nz-upload [nzShowUploadList]="false" nzAccept="application/json" [nzAction]="uploadUrl" [nzData]="uploadData" <nz-upload [nzShowUploadList]="false" nzAccept="application/json" [nzAction]="uploadUrl" [nzData]="uploadData"
(nzChange)="skeJsonHandleChange($event)"> (nzChange)="skeJsonHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button> <button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload> </nz-upload>
<i *ngIf="isSkeJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i> <i *ngIf="isSkeJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
<span *ngIf="skeJsonData && skeJsonData['name']" style="margin-left: 10px"><u> {{skeJsonData['name']}} </u></span> <span *ngIf="skeJsonData && skeJsonData['name']" style="margin-left: 10px"><u> {{skeJsonData['name']}} </u></span>
</div> </div>
<div class="anima-upload-btn"> <div class="anima-upload-btn">
<span style="margin-right: 10px">上传 tex_json 文件: </span> <span style="margin-right: 10px">上传 tex_json 文件: </span>
<nz-upload [nzShowUploadList]="false" nzAccept="application/json" [nzAction]="uploadUrl" [nzData]="uploadData" <nz-upload [nzShowUploadList]="false" nzAccept="application/json" [nzAction]="uploadUrl" [nzData]="uploadData"
(nzChange)="texJsonHandleChange($event)"> (nzChange)="texJsonHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button> <button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload> </nz-upload>
<i *ngIf="isTexJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i> <i *ngIf="isTexJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
<span *ngIf="texJsonData && texJsonData['name']" style="margin-left: 10px"><u> {{texJsonData['name']}} </u></span> <span *ngIf="texJsonData && texJsonData['name']" style="margin-left: 10px"><u> {{texJsonData['name']}} </u></span>
</div> </div>
<div class="anima-upload-btn"> <div class="anima-upload-btn">
<span style="margin-right: 10px">上传 tex_png 文件: </span> <span style="margin-right: 10px">上传 tex_png 文件: </span>
<nz-upload [nzShowUploadList]="false" nzAccept="image/*" [nzAction]="uploadUrl" [nzData]="uploadData" <nz-upload [nzShowUploadList]="false" nzAccept="image/*" [nzAction]="uploadUrl" [nzData]="uploadData"
(nzChange)="texPngHandleChange($event)"> (nzChange)="texPngHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button> <button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload> </nz-upload>
<i *ngIf="isTexPngLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i> <i *ngIf="isTexPngLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
<span *ngIf="texPngData && texPngData['name']" style="margin-left: 10px"><u> {{texPngData['name']}} </u></span> <span *ngIf="texPngData && texPngData['name']" style="margin-left: 10px"><u> {{texPngData['name']}} </u></span>
</div> </div>
<div class="anima-upload-btn" *ngIf="animaNames && animaNames.length > 0"> <div class="anima-upload-btn" *ngIf="animaNames && animaNames.length > 0">
提示:需包含动画: {{animaNames.toString()}}. 提示:需包含动画: {{animaNames.toString()}}.
</div> </div>
</nz-modal> </nz-modal>
</div> </div>
\ No newline at end of file
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.
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.
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