blago
/
tunio-desktop
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add configurable fade type

master
jeffvli 3 years ago
parent
671b5dea82
commit
31c2f9d579
4 changed files with 143 additions and 121 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 241
      src/components/player/Player.tsx
  2. 14
      src/components/settings/Config.tsx
  3. 4
      src/components/shared/setDefaultSettings.ts
  4. 1
      src/redux/playQueueSlice.ts

241
src/components/player/Player.tsx
View File

@ -25,6 +25,100 @@ import { setCurrentSeek } from '../../redux/playerSlice';
import cacheSong from '../shared/cacheSong';
import { getSongCachePath, isCached } from '../../shared/utils';
const listenHandler = (
currentPlayerRef: any,
nextPlayerRef: any,
playQueue: any,
currentEntryList: any,
dispatch: any,
player: number
) => {
const fadeDuration = Number(settings.getSync('fadeDuration')) || 0;
const fadeType = String(settings.getSync('fadeType'));
const currentSeek =
currentPlayerRef.current?.audioEl.current?.currentTime || 0;
const seekable =
currentPlayerRef.current.audioEl.current.seekable.length >= 1
? currentPlayerRef.current.audioEl.current.seekable.end(
currentPlayerRef.current.audioEl.current.seekable.length - 1
)
: 0;
const duration = currentPlayerRef.current?.audioEl.current?.duration;
const fadeAtTime = duration - fadeDuration;
// Fade only if repeat is 'all' or if not on the last track
if (
playQueue[`player${player}`].index + 1 <
playQueue[currentEntryList].length ||
playQueue.repeat === 'all'
) {
if (currentSeek >= fadeAtTime) {
// If it's not the last track in the queue OR we want to repeat
// Once fading starts, start playing player 2 and set current to 2
if (fadeDuration > 1.5) {
const timeLeft = duration - currentSeek;
if (nextPlayerRef.current.audioEl.current) {
const currentPlayerVolumeCalculation =
fadeType === 'equalPower'
? Math.sqrt(0.5 * ((timeLeft / fadeDuration) * 2)) *
playQueue.volume
: fadeType === 'linear'
? (timeLeft / fadeDuration) * playQueue.volume
: 0;
const currentPlayerVolume =
currentPlayerVolumeCalculation <= 0
? 0
: currentPlayerVolumeCalculation;
const nextPlayerVolumeCalculation =
fadeType === 'equalPower'
? Math.sqrt(0.5 * (2 - (timeLeft / fadeDuration) * 2)) *
playQueue.volume
: fadeType === 'linear'
? ((fadeDuration - timeLeft) / fadeDuration) * playQueue.volume
: 0;
const nextPlayerVolume =
nextPlayerVolumeCalculation >= playQueue.volume
? playQueue.volume
: nextPlayerVolumeCalculation;
if (player === 1) {
dispatch(
setPlayerVolume({ player: 1, volume: currentPlayerVolume })
);
dispatch(setPlayerVolume({ player: 2, volume: nextPlayerVolume }));
} else {
dispatch(
setPlayerVolume({ player: 2, volume: currentPlayerVolume })
);
dispatch(setPlayerVolume({ player: 1, volume: nextPlayerVolume }));
}
nextPlayerRef.current.audioEl.current.play();
dispatch(setIsFading(true));
}
} else {
// If fade time is less than 1 second, don't fade and just start at
// full volume. Due to the low fade duration, it causes the volume to
// blast from low to full incredibly quickly due to the intervalled polling
if (player === 1) {
dispatch(setPlayerVolume({ player: 2, volume: playQueue.volume }));
} else {
dispatch(setPlayerVolume({ player: 2, volume: playQueue.volume }));
}
nextPlayerRef.current.audioEl.current.play();
dispatch(setIsFading(true));
}
}
}
if (playQueue.currentPlayer === player) {
dispatch(setCurrentSeek({ seek: currentSeek, seekable }));
}
};
const Player = ({ children }: any, ref: any) => {
const player1Ref = useRef<any>();
const player2Ref = useRef<any>();
@ -69,126 +163,37 @@ const Player = ({ children }: any, ref: any) => {
}
}
} else {
// Add short timeout otherwise sometimes fading-in player doesn't pause
setTimeout(() => {
player1Ref.current.audioEl.current.pause();
player2Ref.current.audioEl.current.pause();
}, 100);
}
}, [playQueue.currentPlayer, player.status]);
const handleListen1 = () => {
const fadeDuration = Number(settings.getSync('fadeDuration')) || 0;
const currentSeek = player1Ref.current?.audioEl.current?.currentTime || 0;
const seekable =
player1Ref.current.audioEl.current.seekable.length >= 1
? player1Ref.current.audioEl.current.seekable.end(
player1Ref.current.audioEl.current.seekable.length - 1
)
: 0;
const duration = player1Ref.current?.audioEl.current?.duration;
const fadeAtTime = duration - fadeDuration;
// Don't fade if player2Index <= player1Index unless repeat==='all'
if (
playQueue.player1.index + 1 < playQueue[currentEntryList].length ||
playQueue.repeat === 'all'
) {
if (currentSeek >= fadeAtTime) {
// If it's not the last track in the queue OR we want to repeat
// Once fading starts, start playing player 2 and set current to 2
if (fadeDuration > 1.5) {
const timeLeft = duration - currentSeek;
if (player2Ref.current.audioEl.current) {
const player1Volume =
playQueue.player1.volume -
(playQueue.volume / timeLeft) * 0.095 <=
0
? 0
: playQueue.player1.volume -
(playQueue.volume / timeLeft) * 0.095;
const player2Volume =
playQueue.player2.volume +
(playQueue.volume / timeLeft) * 0.095 >=
playQueue.volume
? playQueue.volume
: playQueue.player2.volume +
(playQueue.volume / timeLeft) * 0.095;
dispatch(setPlayerVolume({ player: 1, volume: player1Volume }));
dispatch(setPlayerVolume({ player: 2, volume: player2Volume }));
player2Ref.current.audioEl.current.play();
dispatch(setIsFading(true));
}
} else {
// If fade time is less than 1 second, don't fade and just start at
// full volume. Due to the low fade duration, it causes the volume to
// blast from low to full incredibly quickly due to the intervalled polling
dispatch(setPlayerVolume({ player: 2, volume: playQueue.volume }));
player2Ref.current.audioEl.current.play();
dispatch(setIsFading(true));
}
}
}
if (playQueue.currentPlayer === 1) {
dispatch(setCurrentSeek({ seek: currentSeek, seekable }));
}
const handleListenPlayer1 = () => {
listenHandler(
player1Ref,
player2Ref,
playQueue,
currentEntryList,
dispatch,
1
);
};
const handleListen2 = () => {
const fadeDuration = Number(settings.getSync('fadeDuration')) || 0;
const currentSeek = player2Ref.current?.audioEl.current?.currentTime || 0;
const seekable =
player2Ref.current.audioEl.current.seekable.length >= 1
? player2Ref.current.audioEl.current.seekable.end(
player2Ref.current.audioEl.current.seekable.length - 1
)
: 0;
const duration = player2Ref.current?.audioEl.current?.duration;
const fadeAtTime = duration - fadeDuration;
if (
playQueue.player2.index + 1 < playQueue[currentEntryList].length ||
playQueue.repeat === 'all'
) {
if (currentSeek >= fadeAtTime) {
if (fadeDuration > 1.5) {
const timeLeft = duration - currentSeek;
if (player1Ref.current.audioEl.current) {
const player1Volume =
playQueue.player1.volume +
(playQueue.volume / timeLeft) * 0.095 >=
playQueue.volume
? playQueue.volume
: playQueue.player1.volume +
(playQueue.volume / timeLeft) * 0.095;
const player2Volume =
playQueue.player2.volume -
(playQueue.volume / timeLeft) * 0.095 <=
0
? 0
: playQueue.player2.volume -
(playQueue.volume / timeLeft) * 0.095;
dispatch(setPlayerVolume({ player: 1, volume: player1Volume }));
dispatch(setPlayerVolume({ player: 2, volume: player2Volume }));
player1Ref.current.audioEl.current.play();
dispatch(setIsFading(true));
}
} else {
dispatch(setPlayerVolume({ player: 1, volume: playQueue.volume }));
player1Ref.current.audioEl.current.play();
dispatch(setIsFading(true));
}
}
}
if (playQueue.currentPlayer === 2) {
dispatch(setCurrentSeek({ seek: currentSeek, seekable }));
}
const handleListenPlayer2 = () => {
listenHandler(
player2Ref,
player1Ref,
playQueue,
currentEntryList,
dispatch,
2
);
};
const handleOnEnded1 = () => {
const handleOnEndedPlayer1 = () => {
if (cacheSongs) {
cacheSong(
`${playQueue[currentEntryList][playQueue.player1.index].id}.mp3`,
@ -229,7 +234,7 @@ const Player = ({ children }: any, ref: any) => {
}
};
const handleOnEnded2 = () => {
const handleOnEndedPlayer2 = () => {
if (cacheSongs) {
cacheSong(
`${playQueue[currentEntryList][playQueue.player2.index].id}.mp3`,
@ -312,10 +317,10 @@ const Player = ({ children }: any, ref: any) => {
}.mp3`
: playQueue[currentEntryList][playQueue.player1.index]?.streamUrl
}
listenInterval={150}
listenInterval={50}
preload="auto"
onListen={handleListen1}
onEnded={handleOnEnded1}
onListen={handleListenPlayer1}
onEnded={handleOnEndedPlayer1}
volume={playQueue.player1.volume}
autoPlay={
playQueue.player1.index === playQueue.currentIndex &&
@ -336,10 +341,10 @@ const Player = ({ children }: any, ref: any) => {
}.mp3`
: playQueue[currentEntryList][playQueue.player2.index]?.streamUrl
}
listenInterval={150}
listenInterval={50}
preload="auto"
onListen={handleListen2}
onEnded={handleOnEnded2}
onListen={handleListenPlayer2}
onEnded={handleOnEndedPlayer2}
volume={playQueue.player2.volume}
autoPlay={
playQueue.player2.index === playQueue.currentIndex &&

14
src/components/settings/Config.tsx
View File

@ -162,7 +162,7 @@ const Config = () => {
>
<ConfigPanel header="Playback" bordered>
<p>
Fading works by polling the audio player on an interval (150ms) to
Fading works by polling the audio player on an interval (50ms) to
determine when to start fading to the next track. Due to this, you may
notice the fade timing may not be 100% perfect.
</p>
@ -188,6 +188,18 @@ const Config = () => {
}}
style={{ width: '150px' }}
/>
<br />
<ControlLabel>Crossfade type</ControlLabel>
<RadioGroup
name="radioList"
appearance="default"
defaultValue={String(settings.getSync('fadeType'))}
onChange={(e) => settings.setSync('fadeType', e)}
>
<Radio value="equalPower">Equal Power</Radio>
<Radio value="linear">Linear</Radio>
</RadioGroup>
</div>
</ConfigPanel>
<ConfigPanel header="Look & Feel" bordered>

4
src/components/shared/setDefaultSettings.ts
View File

@ -39,6 +39,10 @@ const setDefaultSettings = (force: boolean) => {
settings.setSync('fadeDuration', '9.0');
}
if (force || !settings.hasSync('fadeType')) {
settings.setSync('fadeType', 'equalPower');
}
if (force || !settings.hasSync('playlistViewType')) {
settings.setSync('playlistViewType', 'list');
}

1
src/redux/playQueueSlice.ts
View File

@ -98,6 +98,7 @@ const resetToPlayer1 = (state: PlayQueue) => {
state.isFading = false;
state.player1.volume = state.volume;
state.player1.index = state.currentIndex;
state.player2.volume = 0;
};
const insertItem = (array: any, index: any, item: any) => {

Write Preview
Loading…
Cancel
Save