ok
This commit is contained in:
@@ -121,21 +121,21 @@ const MusicComponent = ({ song, min, max, onDecision }) => {
|
|||||||
onTouchEnd={handleTouchEnd}
|
onTouchEnd={handleTouchEnd}
|
||||||
style={{ transform: `translateX(${positionX}px)` }}
|
style={{ transform: `translateX(${positionX}px)` }}
|
||||||
ref={containerRef}>
|
ref={containerRef}>
|
||||||
{song.set && <div className="decisionbgrnd" style={{ backgroundColor: song.bePlayed ? "green" : "red" }}>
|
{song[3] && <div className="decisionbgrnd" style={{ backgroundColor: song[4] ? "green" : "red" }}>
|
||||||
<h1 className="decision">{song.bePlayed ? "next up" : "skipped"}</h1></div>}
|
<h1 className="decision">{song[4] ? "next up" : "skipped"}</h1></div>}
|
||||||
<div className="bgrnd" style={{ backgroundColor: backgroundColor }}></div>
|
<div className="bgrnd" style={{ backgroundColor: backgroundColor }}></div>
|
||||||
<img
|
<img
|
||||||
src={song.image}
|
src={song[0]?.image || song.image}
|
||||||
alt={song.name}
|
alt={song[0]?.name}
|
||||||
className="song-image"
|
className="song-image"
|
||||||
onError={(e) => e.target.src = song.image}
|
onError={(e) => e.target.src = song[0]?.image || song.image}
|
||||||
/>
|
/>
|
||||||
<div className="song-details">
|
<div className="song-details">
|
||||||
<p className="song-name">{song.name}</p>
|
<p className="song-name">{song[0]?.name || song.name}</p>
|
||||||
<p className="artist-name">{song.artist}</p>
|
<p className="artist-name">{song[0]?.artist || song.artist}</p>
|
||||||
{min < 0 && <p className="artist-name"><--- {song.disagree} no - {song.agree} yes ---></p>}
|
{min < 0 && <p className="artist-name"><--- {song[2]?.length} no - {song[1]?.length} yes ---></p>}
|
||||||
</div>
|
</div>
|
||||||
<p className="song-duration">{song.length}</p>
|
<p className="song-duration">{song[0]?.length || song.length}</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -85,9 +85,9 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
|
|||||||
const fetchColor = async () => {
|
const fetchColor = async () => {
|
||||||
if (
|
if (
|
||||||
currentSong &&
|
currentSong &&
|
||||||
currentSong.image
|
currentSong[0]?.image
|
||||||
) {
|
) {
|
||||||
const imageUrl = currentSong.image;
|
const imageUrl = currentSong[0].image;
|
||||||
try {
|
try {
|
||||||
const dominantColor = await getDominantColor(imageUrl);
|
const dominantColor = await getDominantColor(imageUrl);
|
||||||
// Calculate luminance (YIQ color space) to determine if subtitle should be black or white
|
// Calculate luminance (YIQ color space) to determine if subtitle should be black or white
|
||||||
@@ -429,8 +429,8 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
|
|||||||
<div className="current-info" >
|
<div className="current-info" >
|
||||||
<div
|
<div
|
||||||
className={`current-name ${viewing ? '' : 'animated-text'}`} style={{ margin: `${viewing ? '35px 30px' : '13px 30px'}` }}>
|
className={`current-name ${viewing ? '' : 'animated-text'}`} style={{ margin: `${viewing ? '35px 30px' : '13px 30px'}` }}>
|
||||||
{currentSong && currentSong.name
|
{currentSong && currentSong[0]?.name
|
||||||
? (viewing ? currentSong.name : text)
|
? (viewing ? currentSong[0]?.name : text)
|
||||||
:
|
:
|
||||||
viewing ? messages[0] : text}
|
viewing ? messages[0] : text}
|
||||||
</div>
|
</div>
|
||||||
@@ -438,9 +438,8 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
|
|||||||
<div className="current-artist">
|
<div className="current-artist">
|
||||||
{
|
{
|
||||||
currentSong &&
|
currentSong &&
|
||||||
currentSong.image &&
|
currentSong[0]?.artist
|
||||||
currentSong.artist
|
? currentSong[0]?.artist
|
||||||
? currentSong.artist
|
|
||||||
: "Pilih hits terbaikmu dibawah!"}
|
: "Pilih hits terbaikmu dibawah!"}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
@@ -512,14 +511,14 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
|
|||||||
<MusicComponent
|
<MusicComponent
|
||||||
key={index}
|
key={index}
|
||||||
song={song}
|
song={song}
|
||||||
min={-100}
|
min={song[3]? 0 : -100}
|
||||||
max={100}
|
max={song[3]? 0 : 100}
|
||||||
onDecision={(vote) => onDecision(song.trackId, vote)}
|
onDecision={(vote) => onDecision(song[0].trackId, vote)}
|
||||||
/>
|
/>
|
||||||
))
|
))
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
{songName == "" && queue && queue.length > 0 && queue.length < 3 && (
|
{/* {songName == "" && queue && queue.length > 0 && queue.length < 3 && (
|
||||||
|
|
||||||
<div className="middle-text">
|
<div className="middle-text">
|
||||||
<span className="normal-text">Tambahkan musikmu</span>
|
<span className="normal-text">Tambahkan musikmu</span>
|
||||||
@@ -530,7 +529,7 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
|
|||||||
Cari musik
|
Cari musik
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)} */}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user