useEffect(() => {
function handleNext() {
dispatch(nextAudio());
}
player.addEventListener('ended', handleNext);
return () => player.removeEventListener('ended', handleNext);
}, []);
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { playAudio, nextAudio, prevAudio } from './../slices/playlistSlice.js';
export default function Control() {
const dispatch = useDispatch();
const id = useSelector((state) => state.playlist.id);
const player = useSelector((state) => state.playlist.audio);
const flag = useSelector((state) => state.playlist.flag);
console.log(id);
function handleSuffle() {}
function handleRepeat() {}
//player.addEventListener('ended', () => dispatch(playAudio(id++)));
//player.addEventListener('ended', () => dispatch(nextAudio(id)));
useEffect(() => {
function handleNext() {
dispatch(nextAudio());
}
player.addEventListener('ended', handleNext);
return () => player.removeEventListener('ended', handleNext);
}, []);
//player.addEventListener('ended', () => dispatch(nextAudio(id)));
return (
<div className="controls_wrapper">
<div className="controls_btn_suffle" onClick={handleSuffle}>
<svg className="icon">
<use xlinkHref="icons.svg#icon-suffle"></use>
</svg>
</div>
<div
className="controls_btn_prev"
onClick={() => dispatch(prevAudio(id))}
>
<svg className="icon">
<use xlinkHref="icons.svg#icon-prev"></use>
</svg>
</div>
<div
className="controls_btn_pause"
onClick={() => dispatch(playAudio(id))}
>
{flag ? (
<svg className="icon">
<use xlinkHref="icons.svg#icon-pause"></use>
</svg>
) : (
<svg className="icon">
<use xlinkHref="icons.svg#icon-play"></use>
</svg>
)}
</div>
<div
className="controls_btn_next"
onClick={() => dispatch(nextAudio(id))}
>
<svg className="icon">
<use xlinkHref="icons.svg#icon-next"></use>
</svg>
</div>
<div className="controls_btn_repeat" onClick={handleRepeat}>
<svg className="icon">
<use xlinkHref="icons.svg#icon-repeat"></use>
</svg>
</div>
</div>
);
}
import {createSelector} from '@reduxjs/toolkit';
export const selectRawTranscript = createSelector(
(state: RootState) => state.data.someRawValue,
(rawValue) => rawValue.map(entry => entry.data)
);
import { configureStore } from '@reduxjs/toolkit';
import playlistReducer from './playlistSlice.js';
export default configureStore({
reducer: {
// Свойство counter будет внутри объекта общего состояния: state.counter
playlist: playlistReducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: false,
}),
});
import { configureStore } from '@reduxjs/toolkit';
import playlistReducer from './playlistSlice.js';
export default configureStore({
reducer: {
// Свойство counter будет внутри объекта общего состояния: state.counter
playlist: playlistReducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: false,
}),
});
return !isNaN(time)
? ("0" + Math.floor(time / 60)).slice(-2) +
":" +
("0" + Math.floor(time % 60)).slice(-2)
: "00:00";
function declOfNum(number, words) {
return words[(number % 100 > 4 && number % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][(number % 10 < 5) ? Math.abs(number) % 10 : 5]];
}
declOfNum(1, ['минута', 'минуты', 'минут']);