Implement map audio preview

Author: kuba2k2

src/core/BeatSaberCore.tsx

@@ -44,6 +44,7 @@ export class BeatSaberCore {
 		lastSyncTime: 0,
 	}
 
+	private audio: HTMLAudioElement = null
 	private redirector: HTMLAnchorElement = null
 
 	public async initialize(isBrowser: boolean) {
@@ -162,4 +163,20 @@ export class BeatSaberCore {
 		this.redirector.href = uri.toString()
 		this.redirector.click()
 	}
+
+	public playAudio(url: string) {
+		if (!this.audio) {
+			this.audio = new Audio()
+		}
+		if (this.audio.paused || this.audio.src != url) {
+			this.audio.src = url
+			this.audio.play()
+		} else if (!this.audio.paused) {
+			this.audio.pause()
+		}
+	}
+
+	public pauseAudio() {
+		this.audio?.pause()
+	}
 }

src/ui/components/MapListRow.tsx

@@ -17,6 +17,8 @@ export class MapListRow extends Spicetify.React.Component<MapListRowProps> {
 	constructor(props: MapListRowProps) {
 		super(props)
 		this.handleMatchesChange = this.handleMatchesChange.bind(this)
+		this.handlePreviewClick = this.handlePreviewClick.bind(this)
+		this.handlePlayClick = this.handlePlayClick.bind(this)
 		this.handleBookmarkClick = this.handleBookmarkClick.bind(this)
 		this.handleDownloadClick = this.handleDownloadClick.bind(this)
 	}
@@ -38,6 +40,14 @@ export class MapListRow extends Spicetify.React.Component<MapListRowProps> {
 		}
 	}
 
+	handlePreviewClick() {
+		this.props.onPreviewClick(this.props.map)
+	}
+
+	handlePlayClick() {
+		this.props.onPlayClick(this.props.map)
+	}
+
 	handleBookmarkClick() {
 		this.props.onBookmarkClick(this.props.map)
 	}
@@ -99,12 +109,24 @@ export class MapListRow extends Spicetify.React.Component<MapListRowProps> {
 				</TableCell>
 
 				<TableCell align="center" extraClassName="bs-ml-actions">
-					<Button type="icon" icon="play" tooltip="Preview map" />
-					<Button
-						type="icon"
-						icon="playlist"
-						tooltip="Preview audio"
-					/>
+					{this.props.onPreviewClick && (
+						<Button
+							type="icon"
+							icon="play"
+							tooltip="Preview map"
+							onClick={this.handlePreviewClick}
+						/>
+					)}
+
+					{this.props.onPlayClick && (
+						<Button
+							type="icon"
+							icon="playlist"
+							tooltip="Preview audio"
+							onClick={this.handlePlayClick}
+						/>
+					)}
+
 					{this.props.onBookmarkClick && (
 						<Button
 							type="icon"

src/ui/components/MapListTypes.ts

@@ -4,6 +4,8 @@ export type MapListCallbacks = {
 	onMatchClick?: (map: MapDetail) => void
 	onDoesntMatchClick?: (map: MapDetail) => void
 	onNotInterestedClick?: (map: MapDetail) => void
+	onPreviewClick?: (map: MapDetail) => void
+	onPlayClick?: (map: MapDetail) => void
 	onBookmarkClick?: (map: MapDetail) => void
 	onDownloadClick?: (map: MapDetail) => void
 }

src/ui/pages/TrackPage.tsx

@@ -33,11 +33,15 @@ export class TrackPage extends Spicetify.React.Component<
 
 	constructor(props: TrackPageProps) {
 		super(props)
+		// search
 		this.handleSearchQuery = this.handleSearchQuery.bind(this)
 		this.handleSearchSubmit = this.handleSearchSubmit.bind(this)
+		// matching
 		this.handleMatchClick = this.handleMatchClick.bind(this)
 		this.handleDoesntMatchClick = this.handleDoesntMatchClick.bind(this)
 		this.handleNotInterestedClick = this.handleNotInterestedClick.bind(this)
+		// actions
+		this.handlePlayClick = this.handlePlayClick.bind(this)
 		this.handleBookmarkClick = this.handleBookmarkClick.bind(this)
 		this.handleDownloadClick = this.handleDownloadClick.bind(this)
 
@@ -105,6 +109,7 @@ export class TrackPage extends Spicetify.React.Component<
 				this.state.notInterestedHashes
 			)
 		}
+		BeatSaber.pauseAudio()
 	}
 
 	handleSearchQuery(query: string) {
@@ -142,6 +147,10 @@ export class TrackPage extends Spicetify.React.Component<
 		this.forceUpdate()
 	}
 
+	handlePlayClick(map: MapDetail) {
+		BeatSaber.playAudio(map.versions[0].previewURL)
+	}
+
 	async handleBookmarkClick(map: MapDetail) {
 		this.state.bookmarkingKeys.add(map.id)
 		this.forceUpdate()
@@ -221,6 +230,7 @@ export class TrackPage extends Spicetify.React.Component<
 					onMatchClick={this.handleMatchClick}
 					onDoesntMatchClick={this.handleDoesntMatchClick}
 					onNotInterestedClick={this.handleNotInterestedClick}
+					onPlayClick={this.handlePlayClick}
 					onBookmarkClick={this.handleBookmarkClick}
 					onDownloadClick={this.handleDownloadClick}
 				/>