Исправление накладок аудио при воспроизведении

Author: CAPCHIK

ReleaseNotes.md

@@ -1,2 +1,3 @@
 * ✨ Каждая фотография интерактивного элемента может содержать собственную озвучку
+* 🐛 Исправлено одновременное воспроизведение фонового аудио с аудио из интерактивных элемнетов
 * ➕ Добавлен biome для лингинга кода и проверки ошибок

src/Models/BackgroundAudio/BackgroundAudioView.ts

@@ -12,7 +12,7 @@ export class BackgroundAudioView {
 	private packs: Map<string, AudioContainer> = new Map();
 	private currentAudioPack: AudioContainer | null = null;
 	private eventTrigger: IBackgroundAudioEventTrigger | null = null;
-	private triggerInterval: any;
+	private triggerInterval: NodeJS.Timeout;
 
 	private get isPlay(): boolean {
 		return this.currentAudioPack?.isPlaying() === true;
@@ -22,6 +22,7 @@ export class BackgroundAudioView {
 		private scene: Scene,
 		private sceneUrl: string,
 		private fullScreenUI: FullScreenGUI,
+		private onStartPlaying: () => void,
 	) {
 		fullScreenUI.onPlayPauseBackgroundAudioClickObservable.add(() => {
 			if (this.currentAudioPack) {
@@ -65,6 +66,7 @@ export class BackgroundAudioView {
 
 	public play() {
 		this.currentAudioPack?.play(true);
+		this.onStartPlaying();
 	}
 
 	public pause() {

src/Models/FieldItem.ts

@@ -176,13 +176,11 @@ export class FieldItem extends LinkToState {
 				this.fieldItemInfo.videos[0], // TODO: handle all videos
 				backgroundPlane,
 				FieldItem.containerSize * 1.6,
-				FieldItem.containerSize,
 				() => {
 					this.onPlayMedia();
 					this.audioContent?.pauseAudio();
 				},
 				this.gui3Dmanager,
-				this.assetsManager,
 				this.scene,
 			);
 			this.contentList.push(videoContent);

src/Models/FieldItemContents/AudioContent.ts

@@ -161,6 +161,10 @@ export class AudioContent implements FieldItemContent {
 	}
 
 	public setAudioContent(audioContent: FieldItemAudioContent) {
+		this.setIsVisible(true);
+		if (audioContent.src === this.audioInfo?.src) {
+			return;
+		}
 		this.audioInfo = audioContent;
 		const audio = new Sound(
 			"audio_content",
@@ -173,6 +177,9 @@ export class AudioContent implements FieldItemContent {
 
 				this.playPauseButtonText.text = ExcursionConstants.PlayIcon;
 				this.currentPositionTimer = setInterval(() => {
+					this.playPauseButtonText.text = this.audio?.isPlaying
+						? ExcursionConstants.PauseIcon
+						: ExcursionConstants.PlayIcon;
 					this.currentPositionText.text = this.getCurrentPositionText();
 				}, 500);
 			},

src/Models/FieldItemContents/ImagesContent.ts

@@ -151,7 +151,9 @@ export class ImagesContent implements FieldItemContent {
 		}
 		this.currentImage = index;
 		if (this.images[index].audio) {
-			this.parentAudioContent.setAudioContent(this.images[index].audio);
+			this.parentAudioContent?.setAudioContent(this.images[index].audio);
+		} else {
+			this.parentAudioContent?.setIsVisible(false);
 		}
 	}
 

src/Models/FieldItemContents/VideoContent.ts

@@ -7,7 +7,6 @@ import { Color3 } from "@babylonjs/core/Maths/math.color";
 import type { Mesh } from "@babylonjs/core/Meshes/mesh";
 import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder";
 import type { TransformNode } from "@babylonjs/core/Meshes/transformNode";
-import type { AssetsManager } from "@babylonjs/core/Misc/assetsManager";
 import type { Scene } from "@babylonjs/core/scene";
 import { TextWrapping } from "@babylonjs/gui/2D/controls";
 import { TextBlock } from "@babylonjs/gui/2D/controls/textBlock";
@@ -32,13 +31,11 @@ export class VideoContent implements FieldItemContent {
 	private playPauseButton: CustomHolographicButton;
 	private playPauseButtonText: TextBlock;
 	constructor(
-		private videoUrl: string,
+		videoUrl: string,
 		private parent: TransformNode,
 		private contentWidth: number,
-		private contentHeight: number,
 		private onPlay: () => void,
 		private gui3Dmanager: GUI3DManager,
-		private assetsManager: AssetsManager,
 		private scene: Scene,
 	) {
 		this.loadVideoResources(videoUrl);

src/Models/IconBottom.ts

@@ -6,10 +6,7 @@ import type { Scene } from "@babylonjs/core/scene";
 import type { BottomImageConfiguration } from "../Configuration/Configuration";
 
 export class IconBottom {
-	constructor(
-		_scene: Scene,
-		config: BottomImageConfiguration,
-	) {
+	constructor(_scene: Scene, config: BottomImageConfiguration) {
 		const bottomPlane = MeshBuilder.CreatePlane(
 			`background_image_plane`,
 			{

src/Models/PrefetchResourcesManager.ts

@@ -10,9 +10,9 @@ export class PrefetchResourcesManager {
 			return;
 		}
 		const preloadLink = window.document.createElement("link");
-		preloadLink["rel"] = "prefetch";
-		preloadLink["as"] = "fetch";
-		preloadLink["href"] = link;
+		preloadLink.rel = "prefetch";
+		preloadLink.as = "fetch";
+		preloadLink.href = link;
 		this.linksContainer.appendChild(preloadLink);
 		this.addedLinks.add(link);
 	}

src/TempTimerLogic.ts

@@ -93,15 +93,15 @@ export class TempTimerLogic {
 					scene,
 					0,
 					() => {
-						imageToShow!.imagePlane.animations.push(showAnimation);
-						scene.beginAnimation(imageToShow!.imagePlane, 0, frameRate, true);
+						imageToShow.imagePlane.animations.push(showAnimation);
+						scene.beginAnimation(imageToShow.imagePlane, 0, frameRate, true);
 					},
 				);
 				await assetsManager.loadAsync();
 				onContentCreated(imageToShow);
 			},
 			async () => {
-				scene.beginAnimation(imageToShow!.imagePlane, frameRate, 0, true);
+				scene.beginAnimation(imageToShow.imagePlane, frameRate, 0, true);
 				setTimeout(() => {
 					imageToShow.dispose();
 				}, 1500);

src/Viewer.ts

@@ -89,6 +89,9 @@ export class Viewer {
 			scene,
 			this.configuration.sceneUrl,
 			this.fullScreenGUI,
+			() => {
+				this.links.pauseAllAudios();
+			},
 		);
 		let spacePressed = false;
 		scene.onKeyboardObservable.add((ev) => {
@@ -292,9 +295,8 @@ export class Viewer {
 		this.currentPicture = targetPicture;
 		this.cleanResources();
 		this.prefetchAudio(targetPicture);
-		await this.drawImage(
-			targetPicture,
-			() => actionBeforeChange?.(targetPicture),
+		await this.drawImage(targetPicture, () =>
+			actionBeforeChange?.(targetPicture),
 		);
 
 		this.fullScreenGUI.setFastReturnToFirstStateVisible(