Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | 19x 19x 19x 19x 12x 12x 12x 12x 12x 12x 12x 12x 12x | import { ReactElement, useRef } from "react";
import { CardType } from "./CardTrack";
import { PlayButtonIcon } from "./PlayButtonIcon";
import {
useAuth,
useOnScreen,
useSpotify,
useToast,
useTranslations,
} from "hooks";
import { ITrack } from "types/spotify";
import { chooseImage, templateReplace } from "utils";
interface ITrackImage {
mouseEnter: boolean;
isFocusing: boolean;
track: ITrack;
isSmallScreen: boolean;
playThisTrack: () => void;
visualPosition?: number;
position?: number;
type: CardType;
}
export function TrackImage({
mouseEnter,
isFocusing,
track,
isSmallScreen,
playThisTrack,
visualPosition,
position,
type,
}: Readonly<ITrackImage>): ReactElement {
const { currentlyPlaying, player, isPlaying, setIsPlaying } = useSpotify();
const trackRef = useRef<HTMLDivElement>(null);
const { addToast } = useToast();
const { translations } = useTranslations();
const isVisible = useOnScreen(trackRef);
const { isPremium } = useAuth();
const isPlayable =
track?.type === "episode" ||
(!isPremium && track?.preview_url) ||
(isPremium && track?.is_playable !== false && !track?.is_local);
const isTheSameAsCurrentlyPlaying =
currentlyPlaying?.name === track?.name &&
currentlyPlaying?.album?.name === track?.album?.name;
return (
<button
type="button"
className="playButton"
aria-label={isPlaying && isTheSameAsCurrentlyPlaying ? "Pause" : "Play"}
onClick={() => {
Iif (isSmallScreen) return;
Iif (isTheSameAsCurrentlyPlaying && isPlayable) {
player?.togglePlay();
setIsPlaying(!isPlaying);
return;
}
if (isPlayable) {
Iif (track.corruptedTrack) {
addToast({
variant: "error",
message: templateReplace(
translations.toastMessages.isCorruptedAndCannotBePlayed,
[translations.contentType.track]
),
});
return;
}
Iif (isPremium) {
(player as Spotify.Player)?.activateElement();
}
playThisTrack();
} else {
addToast({
variant: "info",
message: translations.toastMessages.contentIsUnavailable,
});
}
}}
tabIndex={isVisible ? 0 : -1}
aria-hidden={isVisible ? "false" : "true"}
>
<PlayButtonIcon
mouseEnter={mouseEnter}
isTheSameAsCurrentlyPlaying={isTheSameAsCurrentlyPlaying}
isPlaying={isPlaying}
isFocusing={isFocusing}
isPlayable={isPlayable}
visualPosition={visualPosition}
position={position}
/>
<style jsx>{`
button.playButton {
background-image: ${type === "presentation"
? `url(${chooseImage(track.album?.images, 50).url})`
: "unset"};
}
button.playButton {
width: ${type !== "presentation" ? "32" : "40"}px;
height: ${type !== "presentation" ? "32" : "40"}px;
}
`}</style>
<style jsx>{`
button.playButton {
object-position: center center;
object-fit: cover;
background-color: transparent;
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
border: none;
margin: 0 15px 0 15px;
}
`}</style>
</button>
);
}
|