Commit 3fb3f0a6 authored by liujiangnan's avatar liujiangnan

debug

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