nitro
/
nitro
mirror of https://github.com/Gurkengewuerz/nitro.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: show songname in sound machine view

This commit is contained in:
Niklas 2023-10-25 03:03:49 +02:00
parent 16475d5b42
commit 9a88668124
1 changed files with 42 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
apps/frontend/src/components/catalog/views/page/layout/CatalogLayoutSoundMachineView.tsx
View File

@ -1,4 +1,10 @@
import {GetOfficialSongIdMessageComposer, MusicPriorities, OfficialSongIdMessageEvent} from "@nitro/renderer";
import {
GetOfficialSongIdMessageComposer,
ISongInfo,
MusicPriorities,
OfficialSongIdMessageEvent,
TraxSongInfoMessageEvent,
} from "@nitro/renderer";
import {FC, useEffect, useState} from "react";
import {GetConfiguration, GetNitroInstance, LocalizeText, ProductTypeEnum, SendMessageComposer} from "../../../../../api";
@ -15,22 +21,50 @@ import {CatalogViewProductWidgetView} from "../widgets/CatalogViewProductWidgetV
import {CatalogLayoutProps} from "./CatalogLayout.types";
export const CatalogLayoutSoundMachineView: FC<CatalogLayoutProps> = props => {
let _traxSongInfoEvent: TraxSongInfoMessageEvent;
const {page = null} = props;
const [songId, setSongId] = useState(-1);
const [officialSongId, setOfficialSongId] = useState("");
const [songName, setSongName] = useState("");
const {currentOffer = null, currentPage = null} = useCatalog();
const previewSong = (previewSongId: number) =>
GetNitroInstance().soundManager.musicController?.playSong(previewSongId, MusicPriorities.PRIORITY_PURCHASE_PREVIEW, 15, 0, 0, 0);
const displaySongName = (songData: ISongInfo): void => {
setSongName(`${songData.creator} - ${songData.name}`);
};
useMessageEvent<OfficialSongIdMessageEvent>(OfficialSongIdMessageEvent, event => {
const parser = event.getParser();
if (parser.officialSongId !== officialSongId) return;
setSongId(parser.songId);
const thisSongId = parser.songId;
setSongId(thisSongId);
_traxSongInfoEvent = new TraxSongInfoMessageEvent((event: TraxSongInfoMessageEvent): void => {
const parser = event.getParser();
for (const song of parser.songs) {
if (thisSongId !== song.id) continue;
displaySongName(song as unknown as ISongInfo);
break;
}
clearTraxSongInfoEvent();
});
GetNitroInstance().communication.connection.addMessageEvent(_traxSongInfoEvent);
const songData = GetNitroInstance().soundManager.musicController?.getSongInfo(thisSongId);
if (songData) displaySongName(songData);
});
const clearTraxSongInfoEvent = (): void => {
if (_traxSongInfoEvent) GetNitroInstance().communication.connection.removeMessageEvent(_traxSongInfoEvent);
};
useEffect(() => {
if (!currentOffer) return;
@ -56,7 +90,10 @@ export const CatalogLayoutSoundMachineView: FC<CatalogLayoutProps> = props => {
}, [currentOffer]);
useEffect(() => {
return () => GetNitroInstance().soundManager.musicController?.stop(MusicPriorities.PRIORITY_PURCHASE_PREVIEW);
return () => {
GetNitroInstance().soundManager.musicController?.stop(MusicPriorities.PRIORITY_PURCHASE_PREVIEW);
clearTraxSongInfoEvent();
};
}, []);
return (
@ -70,7 +107,7 @@ export const CatalogLayoutSoundMachineView: FC<CatalogLayoutProps> = props => {
{!currentOffer && (
<>
{!!page.localization.getImage(1) && <LayoutImage imageUrl={page.localization.getImage(1)} />}
<Text center dangerouslySetInnerHTML={{__html: page.localization.getText(0)}} />
<Text center dangerouslySetInnerHTML={{__html: songName ?? page.localization.getText(0)}} />
</>
)}
{currentOffer && (
@ -87,7 +124,7 @@ export const CatalogLayoutSoundMachineView: FC<CatalogLayoutProps> = props => {
<Column grow gap={1}>
<CatalogLimitedItemWidgetView fullWidth />
<Text grow truncate>
{currentOffer.localizationName}
{songName ?? currentOffer.localizationName}
</Text>
{songId > -1 && <Button onClick={() => previewSong(songId)}>{LocalizeText("play_preview_button")}</Button>}
<Flex justifyContent="between">