150 lines
3.6 KiB
JavaScript
150 lines
3.6 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { CartIcon, DownloadIcon, LyricsIcon, RefreshIcon } from './Icons';
|
|
import events, { EVENT, normalizePlayerId } from '../services/events';
|
|
|
|
const propTypes = {
|
|
buyButtonsTarget: PropTypes.bool,
|
|
buyUrl: PropTypes.string,
|
|
downloadUrl: PropTypes.string,
|
|
downloadFilename: PropTypes.string,
|
|
onTrackLoop: PropTypes.func,
|
|
isLooping: PropTypes.bool,
|
|
displayBuyButtons: PropTypes.bool,
|
|
onOpenTrackLyrics: PropTypes.func,
|
|
playbackRate: PropTypes.number,
|
|
setPlaybackRate: PropTypes.func,
|
|
allowPlaybackRate: PropTypes.bool,
|
|
isPlaying: PropTypes.bool,
|
|
track: PropTypes.shape({
|
|
audio: PropTypes.string.isRequired,
|
|
}).isRequired,
|
|
playerId: PropTypes.string,
|
|
};
|
|
|
|
const TrackButtons = ({
|
|
buyButtonsTarget,
|
|
buyUrl,
|
|
downloadUrl,
|
|
downloadFilename,
|
|
onTrackLoop,
|
|
isLooping,
|
|
displayBuyButtons,
|
|
onOpenTrackLyrics,
|
|
setPlaybackRate,
|
|
playbackRate,
|
|
allowPlaybackRate,
|
|
isPlaying,
|
|
track,
|
|
playerId,
|
|
}) => {
|
|
if (
|
|
buyUrl == null &&
|
|
downloadUrl == null &&
|
|
!onTrackLoop &&
|
|
!onOpenTrackLyrics
|
|
) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="ai-track-control-buttons">
|
|
{buyUrl && displayBuyButtons && (
|
|
// eslint-disable-next-line react/jsx-no-target-blank
|
|
<a
|
|
href={buyUrl}
|
|
className="ai-track-btn"
|
|
rel={buyButtonsTarget ? 'noopener noreferrer' : undefined}
|
|
target={buyButtonsTarget ? '_blank' : '_self'}
|
|
role="button"
|
|
aria-label={aiStrings.buy_track}
|
|
title={aiStrings.buy_track}
|
|
>
|
|
<CartIcon />
|
|
</a>
|
|
)}
|
|
|
|
{downloadUrl && downloadFilename && displayBuyButtons && (
|
|
<a
|
|
href={downloadUrl}
|
|
download={downloadFilename}
|
|
className="ai-track-btn"
|
|
role="button"
|
|
onClick={() => {
|
|
events.eventTrack({
|
|
event: EVENT.DOWNLOAD,
|
|
trackUrl: track.audio,
|
|
playerId: normalizePlayerId(playerId),
|
|
});
|
|
}}
|
|
aria-label={aiStrings.download_track}
|
|
title={aiStrings.download_track}
|
|
>
|
|
<DownloadIcon />
|
|
</a>
|
|
)}
|
|
|
|
{onOpenTrackLyrics && (
|
|
// eslint-disable-next-line
|
|
<a
|
|
href="#"
|
|
className="ai-track-btn"
|
|
role="button"
|
|
aria-label={aiStrings.open_track_lyrics}
|
|
title={aiStrings.open_track_lyrics}
|
|
onClick={event => {
|
|
event.preventDefault();
|
|
onOpenTrackLyrics();
|
|
}}
|
|
>
|
|
<LyricsIcon />
|
|
</a>
|
|
)}
|
|
|
|
{allowPlaybackRate && isPlaying && (
|
|
<a
|
|
href="#"
|
|
className="ai-track-btn ai-btn-playback-rate"
|
|
role="button"
|
|
aria-label={aiStrings.set_playback_rate}
|
|
title={aiStrings.set_playback_rate}
|
|
onClick={event => {
|
|
event.preventDefault();
|
|
setPlaybackRate();
|
|
}}
|
|
>
|
|
×{playbackRate}
|
|
</a>
|
|
)}
|
|
|
|
{onTrackLoop && (
|
|
// eslint-disable-next-line
|
|
<a
|
|
href="#"
|
|
className="ai-track-btn ai-track-btn-repeat"
|
|
role="button"
|
|
aria-label={aiStrings.toggle_track_repeat}
|
|
title={aiStrings.toggle_track_repeat}
|
|
onClick={event => {
|
|
event.preventDefault();
|
|
onTrackLoop();
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
opacity: isLooping ? 1 : 0.3,
|
|
}}
|
|
>
|
|
<RefreshIcon />
|
|
</span>
|
|
</a>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
TrackButtons.propTypes = propTypes;
|
|
|
|
export default TrackButtons;
|