Skip to content

Commit 501b39e

Browse files
committed
Implement map audio preview
1 parent 8dbafed commit 501b39e

File tree

4 files changed

+57
-6
lines changed

4 files changed

+57
-6
lines changed

src/core/BeatSaberCore.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ export class BeatSaberCore {
4444
lastSyncTime: 0,
4545
}
4646

47+
private audio: HTMLAudioElement = null
4748
private redirector: HTMLAnchorElement = null
4849

4950
public async initialize(isBrowser: boolean) {
@@ -162,4 +163,20 @@ export class BeatSaberCore {
162163
this.redirector.href = uri.toString()
163164
this.redirector.click()
164165
}
166+
167+
public playAudio(url: string) {
168+
if (!this.audio) {
169+
this.audio = new Audio()
170+
}
171+
if (this.audio.paused || this.audio.src != url) {
172+
this.audio.src = url
173+
this.audio.play()
174+
} else if (!this.audio.paused) {
175+
this.audio.pause()
176+
}
177+
}
178+
179+
public pauseAudio() {
180+
this.audio?.pause()
181+
}
165182
}

src/ui/components/MapListRow.tsx

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ export class MapListRow extends Spicetify.React.Component<MapListRowProps> {
1717
constructor(props: MapListRowProps) {
1818
super(props)
1919
this.handleMatchesChange = this.handleMatchesChange.bind(this)
20+
this.handlePreviewClick = this.handlePreviewClick.bind(this)
21+
this.handlePlayClick = this.handlePlayClick.bind(this)
2022
this.handleBookmarkClick = this.handleBookmarkClick.bind(this)
2123
this.handleDownloadClick = this.handleDownloadClick.bind(this)
2224
}
@@ -38,6 +40,14 @@ export class MapListRow extends Spicetify.React.Component<MapListRowProps> {
3840
}
3941
}
4042

43+
handlePreviewClick() {
44+
this.props.onPreviewClick(this.props.map)
45+
}
46+
47+
handlePlayClick() {
48+
this.props.onPlayClick(this.props.map)
49+
}
50+
4151
handleBookmarkClick() {
4252
this.props.onBookmarkClick(this.props.map)
4353
}
@@ -99,12 +109,24 @@ export class MapListRow extends Spicetify.React.Component<MapListRowProps> {
99109
</TableCell>
100110

101111
<TableCell align="center" extraClassName="bs-ml-actions">
102-
<Button type="icon" icon="play" tooltip="Preview map" />
103-
<Button
104-
type="icon"
105-
icon="playlist"
106-
tooltip="Preview audio"
107-
/>
112+
{this.props.onPreviewClick && (
113+
<Button
114+
type="icon"
115+
icon="play"
116+
tooltip="Preview map"
117+
onClick={this.handlePreviewClick}
118+
/>
119+
)}
120+
121+
{this.props.onPlayClick && (
122+
<Button
123+
type="icon"
124+
icon="playlist"
125+
tooltip="Preview audio"
126+
onClick={this.handlePlayClick}
127+
/>
128+
)}
129+
108130
{this.props.onBookmarkClick && (
109131
<Button
110132
type="icon"

src/ui/components/MapListTypes.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ export type MapListCallbacks = {
44
onMatchClick?: (map: MapDetail) => void
55
onDoesntMatchClick?: (map: MapDetail) => void
66
onNotInterestedClick?: (map: MapDetail) => void
7+
onPreviewClick?: (map: MapDetail) => void
8+
onPlayClick?: (map: MapDetail) => void
79
onBookmarkClick?: (map: MapDetail) => void
810
onDownloadClick?: (map: MapDetail) => void
911
}

src/ui/pages/TrackPage.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,15 @@ export class TrackPage extends Spicetify.React.Component<
3333

3434
constructor(props: TrackPageProps) {
3535
super(props)
36+
// search
3637
this.handleSearchQuery = this.handleSearchQuery.bind(this)
3738
this.handleSearchSubmit = this.handleSearchSubmit.bind(this)
39+
// matching
3840
this.handleMatchClick = this.handleMatchClick.bind(this)
3941
this.handleDoesntMatchClick = this.handleDoesntMatchClick.bind(this)
4042
this.handleNotInterestedClick = this.handleNotInterestedClick.bind(this)
43+
// actions
44+
this.handlePlayClick = this.handlePlayClick.bind(this)
4145
this.handleBookmarkClick = this.handleBookmarkClick.bind(this)
4246
this.handleDownloadClick = this.handleDownloadClick.bind(this)
4347

@@ -105,6 +109,7 @@ export class TrackPage extends Spicetify.React.Component<
105109
this.state.notInterestedHashes
106110
)
107111
}
112+
BeatSaber.pauseAudio()
108113
}
109114

110115
handleSearchQuery(query: string) {
@@ -142,6 +147,10 @@ export class TrackPage extends Spicetify.React.Component<
142147
this.forceUpdate()
143148
}
144149

150+
handlePlayClick(map: MapDetail) {
151+
BeatSaber.playAudio(map.versions[0].previewURL)
152+
}
153+
145154
async handleBookmarkClick(map: MapDetail) {
146155
this.state.bookmarkingKeys.add(map.id)
147156
this.forceUpdate()
@@ -221,6 +230,7 @@ export class TrackPage extends Spicetify.React.Component<
221230
onMatchClick={this.handleMatchClick}
222231
onDoesntMatchClick={this.handleDoesntMatchClick}
223232
onNotInterestedClick={this.handleNotInterestedClick}
233+
onPlayClick={this.handlePlayClick}
224234
onBookmarkClick={this.handleBookmarkClick}
225235
onDownloadClick={this.handleDownloadClick}
226236
/>

0 commit comments

Comments
 (0)