Commit 3fb3f0a6 authored by liujiangnan's avatar liujiangnan

debug

parent cd5503d8
...@@ -28,8 +28,9 @@ ...@@ -28,8 +28,9 @@
.current-time-display { .current-time-display {
font-size: 14px; font-size: 14px;
color: #333; /* 深灰色文字 */ color: #333; /* 深灰色文字 */
margin-top: 10px; /* margin-top: 10px; */
padding: 5px; padding: 5px;
margin-left: 40px;
background-color: #f9f9f9; /* 浅灰色背景 */ background-color: #f9f9f9; /* 浅灰色背景 */
border: 1px solid #ddd; /* 边框 */ border: 1px solid #ddd; /* 边框 */
border-radius: 5px; /* 圆角 */ border-radius: 5px; /* 圆角 */
...@@ -47,7 +48,8 @@ ...@@ -47,7 +48,8 @@
} }
.hot-zone-container { .hot-zone-container {
margin-bottom: 15px; margin-top: 25px;
margin-bottom: 25px;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 5px; border-radius: 5px;
padding: 10px; padding: 10px;
...@@ -61,6 +63,7 @@ ...@@ -61,6 +63,7 @@
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
margin-bottom: 5px; margin-bottom: 5px;
float: right;
} }
.hot-zone-content { .hot-zone-content {
...@@ -68,3 +71,16 @@ ...@@ -68,3 +71,16 @@
background-color: #f8f9fa; background-color: #f8f9fa;
border-radius: 5px; border-radius: 5px;
} }
.bg-box{
margin-bottom: 1rem;
}
.add-btn {
margin-top: 1rem;
margin-right: 1rem;
margin-bottom: 1rem;
width: 150px;
height: 60px;
display: inline-block;
}
<div class="model-content"> <div class="model-content">
<div style="display: flex; align-items: center; margin-top: 20px;"> <div style="position: fixed; top: 20px; left: 20px; right: 20px; z-index: 1000; background-color: #fff; padding: 20px; border-radius: 10px;">
<h4> 音频添加: </h4> <div style="display: flex; align-items: center;">
<app-audio-recorder <h4> 音频添加: </h4>
style="margin-left: 20px" <app-audio-recorder
[audioUrl]="item.bg_audio_url" style="margin-left: 20px"
(audioUploaded)="onAudioUploadSuccess($event, 'bg_audio_url', item)"> [audioUrl]="item.bg_audio_url"
</app-audio-recorder> (audioUploaded)="onAudioUploadSuccess($event, 'bg_audio_url', item)">
</div> </app-audio-recorder>
<div id="waveform"></div> <div class="current-time-display">当前播放时间: [<span style="color: #0beb40;">{{ currentTime }}</span>]毫秒</div>
<div *ngIf="item.bg_audio_url"> </div>
<button (click)="togglePlayPause()" class="play-pause-button"> <div id="waveform"></div>
{{ isPlaying ? '暂停' : '播放' }} <div *ngIf="item.bg_audio_url">
</button> <button (click)="togglePlayPause()" class="play-pause-button">
<div class="current-time-display">当前播放时间: {{ currentTime }} 毫秒</div> {{ isPlaying ? '暂停' : '播放' }}
</button>
<button (click)="addHotZone()" class="play-pause-button">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
添加页面
</button>
</div>
</div> </div>
<button (click)="addHotZone()" class="add-hot-zone-button">添加热区</button> <div style="height: 300px;">&nbsp;</div>
<div *ngFor="let hotZone of hotZones; let i = index" class="hot-zone-container"> <div *ngFor="let hotZone of hotZones; let i = index" class="hot-zone-container">
<button (click)="toggleCollapse(i)" class="toggle-button"> <button (click)="toggleCollapse(i)" class="toggle-button">
{{ isCollapsed[i] ? '展开' : '折叠' }} 第【{{i+1}}】页 &nbsp;&nbsp;&nbsp; <span style="color: #04f1dd;">{{ isCollapsed[i] ? '点击展开' : '点击折叠' }}</span>
</button> </button>
<div *ngIf="!isCollapsed[i]" class="hot-zone-content"> <div *ngIf="!isCollapsed[i]" class="hot-zone-content">
<app-custom-hot-zone <app-custom-hot-zone
[bgItem]="bgItem" [bgItem]="hotZone.bgItem"
[hotZoneItemArr]="hotZoneItemArr" [hotZoneItemArr]="hotZone.hotZoneItemArr"
[hotZoneFontObj]="null" (save)="saveHotZone($event, i)"
(save)="saveHotZone($event)"
> >
</app-custom-hot-zone> </app-custom-hot-zone>
</div> </div>
</div> </div>
<div style="padding: 20px">
<app-custom-hot-zone
[bgItem]="bgItem"
[hotZoneItemArr]="hotZoneItemArr"
[hotZoneFontObj]="null"
(save)="saveHotZone($event)"
>
</app-custom-hot-zone>
</div>
</div> </div>
...@@ -13,10 +13,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -13,10 +13,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
saveKey = "gs_cartoon"; saveKey = "gs_cartoon";
// 储存对象 // 储存对象
item; item;
bgItem = {};
hotZoneItemArr = [];
animaArr = [];
picArr;
wavesurfer; wavesurfer;
isPlaying: boolean = false; // 用于跟踪播放状态 isPlaying: boolean = false; // 用于跟踪播放状态
currentTime: number = 0; currentTime: number = 0;
...@@ -60,11 +56,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -60,11 +56,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
init() { init() {
this.bgItem = this.item.bgItem || {}; this.hotZones = this.item.hotZones || [];
this.hotZoneItemArr = this.item.hotZoneItemArr || []; this.isCollapsed = this.hotZones.map((item, index) => {
return index !== 0;
this.animaArr = this.item.animaArr || []; });
this.picArr = this.item.picArr || [];
// 使用 wavesurfer.js 绘制波形图 // 使用 wavesurfer.js 绘制波形图
this.wavesurfer = WaveSurfer.create({ this.wavesurfer = WaveSurfer.create({
...@@ -87,19 +82,27 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -87,19 +82,27 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.wavesurfer.load(this.item.bg_audio_url); this.wavesurfer.load(this.item.bg_audio_url);
} }
this.refreshAnimaArr();
} }
updateCurrentTime() { updateCurrentTime() {
this.currentTime = Math.floor(this.wavesurfer.getCurrentTime() * 1000); // 转换为毫秒 this.currentTime = Math.floor(this.wavesurfer.getCurrentTime() * 1000); // 转换为毫秒
} }
addHotZone() { addHotZone() {
this.hotZones.push({}); // 添加一个新的热区 this.hotZones.push({
bgItem: {},
hotZoneItemArr: []
}); // 添加一个新的热区
this.isCollapsed.push(false); // 初始化为展开状态 this.isCollapsed.push(false); // 初始化为展开状态
} }
toggleCollapse(index: number) { toggleCollapse(index: number) {
this.isCollapsed[index] = !this.isCollapsed[index]; // 切换折叠状态 // 切换折叠状态
this.isCollapsed[index] = !this.isCollapsed[index];
// 确保只有一个热区是展开的
if (!this.isCollapsed[index]) {
this.isCollapsed = this.isCollapsed.map((collapsed, i) => i === index ? false : true);
}
} }
/** /**
...@@ -125,16 +128,13 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -125,16 +128,13 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.save(); this.save();
} }
saveHotZone(e) { saveHotZone(e, i) {
console.log('e: ', e); console.log('e: ', e);
const { bgItem, hotZoneItemArr } = e; const { bgItem, hotZoneItemArr } = e;
this.bgItem = bgItem; this.hotZones[i].bgItem = bgItem;
this.hotZoneItemArr = hotZoneItemArr; this.hotZones[i].hotZoneItemArr = hotZoneItemArr;
this.item.bgItem = bgItem; this.item.hotZones = this.hotZones;
this.item.hotZoneItemArr = hotZoneItemArr;
this.refreshAnimaArr();
this.save(); this.save();
...@@ -153,56 +153,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -153,56 +153,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.isPlaying = !this.isPlaying; // 切换播放状态 this.isPlaying = !this.isPlaying; // 切换播放状态
} }
refreshAnimaArr() {
const tmpArr = [];
this.hotZoneItemArr.forEach((item: any) => {
let data = this.animaArr.find((anima: any) => {
return anima.id === item.id;
});
if (data) {
tmpArr.push(data);
} else {
const d1 = this.createAnimaData(item);
tmpArr.push(d1);
}
});
this.animaArr = tmpArr;
}
createAnimaData(hotZoneItem) {
const animaData = {};
animaData['id'] = hotZoneItem.id;
return animaData;
}
addPic() {
this.picArr.push({
pic_url: '',
audio_url: '',
text: ''
});
this.item.picArr = this.picArr;
this.save();
}
deletePic(i) {
this.picArr.splice(i, 1);
this.item.picArr = this.picArr;
this.save();
}
/** /**
* 储存数据 * 储存数据
*/ */
save() { save() {
console.log('this.item: ', this.item);
console.log('this.item JSON: ', JSON.stringify(this.item)); console.log('this.item JSON: ', JSON.stringify(this.item));
(<any>window).courseware.setData(this.item, null, this.saveKey); (<any>window).courseware.setData(this.item, null, this.saveKey);
this.refresh(); this.refresh();
......
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