src/containers/Songs/MusicPlayer/utils.tsx
import type ReactPlayer from 'react-player';
import commonUtils from 'src/lib/utils';
import type { Isong } from 'src/providers/Data.provider';
function setPlayerStyle(song: Isong): Record<string, unknown> {
let playerStyle = {
backgroundColor: '#2a2a2a',
textAlign: 'center',
backgroundImage: song.image ? `url(${song.image})` : '',
backgroundPosition: 'center',
backgroundSize: '80%',
backgroundRepeat: 'no-repeat',
};
if (song.image === undefined || song.image === '') {
playerStyle = {
backgroundImage: 'url("/static/imgs/webjamlogo1.png")',
backgroundColor: '#2a2a2a',
textAlign: 'center',
backgroundPosition: 'center',
backgroundSize: '80%',
backgroundRepeat: 'no-repeat',
};
if (song.url[8] === 's' || song.url[12] === 'y') {
playerStyle = {
backgroundImage: '',
backgroundColor: '#eee',
textAlign: 'center',
backgroundPosition: 'center',
backgroundSize: '80%',
backgroundRepeat: 'no-repeat',
};
}
}
return playerStyle;
}
function copyShare() {
// Get the text field
const copyText = document.getElementById('copyUrl') as HTMLInputElement;
// Select the text field
copyText.select();
copyText.setSelectionRange(0, 99999); // For mobile devices
// Copy the text inside the text field
navigator.clipboard.writeText(copyText.value);
commonUtils.notify('A shareable song url has been copied to your clipboard', '', 'success');
}
function initSongs(
songs: Isong[],
category: string,
searchParams: URLSearchParams,
setters: {
setSongsState: (arg0: any) => void,
setIndex: (arg0: number) => void,
setIsSingle: (arg0: boolean) => void,
},
// setPlaying: (arg0: boolean) => void, // issue 886
) {
const { setSongsState, setIndex, setIsSingle } = setters;
const id = searchParams.get('id');
const newSongs = typeof id === 'string' ? songs : songs.filter((song: { category?: string }) => song.category === category);
setSongsState(newSongs);
if (typeof id === 'string') {
setIsSingle(true);
const songIds = newSongs.map((s) => s._id);
const songIndex = songIds.indexOf(id);
setIndex(songIndex);
// setPlaying(true); issue 886
}
}
function setSingleDisplays(
elements: {
sidebar: any; header: any; footer: any; toggler: any; contentBlock: any;
pageContent: any; headerTitle: any; mainPlayer: any; outerWidth: any; },
) {
const {
sidebar,
header,
footer,
toggler,
contentBlock,
pageContent,
headerTitle,
mainPlayer,
outerWidth,
} = elements;
if (sidebar) sidebar.style.display = 'none';
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
if (toggler) toggler.style.display = 'none';
if (headerTitle) headerTitle.style.display = 'none';
if (contentBlock) {
contentBlock.style.overflowY = 'auto';
contentBlock.style.width = '100%';
contentBlock.style.height = '100%';
contentBlock.style.marginTop = '0px';
}
if (mainPlayer && outerWidth < 600) mainPlayer.style.height = '55vh';
if (pageContent) pageContent.style.borderColor = '#fff';
}
const makeSingleSong = (isSingle: boolean): boolean => {
if (isSingle) {
const sidebar = document.getElementById('sidebar');
const header = document.getElementById('header');
const footer = document.getElementById('wjfooter');
const toggler = document.getElementById('mobilemenutoggle');
const contentBlock = document.getElementById('contentBlock');
const pageContent = document.getElementById('pageContent');
const headerTitle = document.getElementById('headerTitle');
const mainPlayer = document.getElementById('mainPlayer');
setSingleDisplays({
sidebar,
header,
footer,
toggler,
contentBlock,
pageContent,
headerTitle,
mainPlayer,
outerWidth: window.outerWidth,
});
}
return isSingle;
};
function play(playing: boolean, setPlaying: (arg0: boolean) => void): void {
setPlaying(!playing);
}
function next(index: number, songsState: Isong[], setIndex: (arg0: number) => void): void {
const nextIndex = index + 1;
if (nextIndex >= songsState.length) {
setIndex(0);
} else {
setIndex(nextIndex);
}
}
function prev(index: number, songsState: Isong[], setIndex: (arg0: number) => void): void {
const minusIndex = index - 1;
if (minusIndex < 0 || minusIndex > songsState.length) {
const newIndex = songsState.length - 1;
setIndex(newIndex);
} else setIndex(minusIndex);
}
const handlePlayerError = (err: any) => {
// eslint-disable-next-line no-console
console.log(err); return err;
};
const handlePlayerReady = (player:ReactPlayer) => { console.log(player); return player; };
export default {
makeSingleSong,
copyShare,
initSongs,
setPlayerStyle,
play,
next,
prev,
handlePlayerError,
handlePlayerReady,
setSingleDisplays,
};