Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add rewind, foward to music player #5

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: add rewind, foward to music player #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,5 @@ coverage
example/dist
.vscode
main.js
.yarn
.yarnrc.yml
76 changes: 76 additions & 0 deletions __tests__/tests/__snapshots__/icon.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,25 @@ exports[`Player custom icon test should render custom icon 1`] = `
1
</div>
</span>
<span
class="group rewind-btn"
title="Rewind"
>
<svg
class="react-jinke-music-player-pause-icon"
fill="currentColor"
height="1em"
stroke="currentColor"
stroke-width="0"
viewBox="0 0 512 512"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5 280.6l192 160c20.6 17.2 52.5 2.8 52.5-24.6V96c0-27.4-31.9-41.8-52.5-24.6l-192 160c-15.3 12.8-15.3 36.4 0 49.2zm256 0l192 160c20.6 17.2 52.5 2.8 52.5-24.6V96c0-27.4-31.9-41.8-52.5-24.6l-192 160c-15.3 12.8-15.3 36.4 0 49.2z"
/>
</svg>
</span>
<span
class="group play-btn"
title="Click to play"
Expand All @@ -98,6 +117,25 @@ exports[`Player custom icon test should render custom icon 1`] = `
1
</div>
</span>
<span
class="group forward-btn"
title="Forward"
>
<svg
class="react-jinke-music-player-pause-icon"
fill="currentColor"
height="1em"
stroke="currentColor"
stroke-width="0"
viewBox="0 0 512 512"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M500.5 231.4l-192-160C287.9 54.3 256 68.6 256 96v320c0 27.4 31.9 41.8 52.5 24.6l192-160c15.3-12.8 15.3-36.4 0-49.2zm-256 0l-192-160C31.9 54.3 0 68.6 0 96v320c0 27.4 31.9 41.8 52.5 24.6l192-160c15.3-12.8 15.3-36.4 0-49.2z"
/>
</svg>
</span>
<span
class="group next-audio"
title="Next track"
Expand Down Expand Up @@ -485,6 +523,25 @@ exports[`Player custom icon test should render custom icon in mobile mode 1`] =
1
</div>
</span>
<span
class="group rewind-btn"
title="Rewind"
>
<svg
class="react-jinke-music-player-pause-icon"
fill="currentColor"
height="1em"
stroke="currentColor"
stroke-width="0"
viewBox="0 0 512 512"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5 280.6l192 160c20.6 17.2 52.5 2.8 52.5-24.6V96c0-27.4-31.9-41.8-52.5-24.6l-192 160c-15.3 12.8-15.3 36.4 0 49.2zm256 0l192 160c20.6 17.2 52.5 2.8 52.5-24.6V96c0-27.4-31.9-41.8-52.5-24.6l-192 160c-15.3 12.8-15.3 36.4 0 49.2z"
/>
</svg>
</span>
<span
class="group play-btn"
title="Click to play"
Expand All @@ -493,6 +550,25 @@ exports[`Player custom icon test should render custom icon in mobile mode 1`] =
1
</div>
</span>
<span
class="group forward-btn"
title="Forward"
>
<svg
class="react-jinke-music-player-pause-icon"
fill="currentColor"
height="1em"
stroke="currentColor"
stroke-width="0"
viewBox="0 0 512 512"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M500.5 231.4l-192-160C287.9 54.3 256 68.6 256 96v320c0 27.4 31.9 41.8 52.5 24.6l192-160c15.3-12.8 15.3-36.4 0-49.2zm-256 0l-192-160C31.9 54.3 0 68.6 0 96v320c0 27.4 31.9 41.8 52.5 24.6l192-160c15.3-12.8 15.3-36.4 0-49.2z"
/>
</svg>
</span>
<span
class="group next-audio"
title="Next track"
Expand Down
12 changes: 12 additions & 0 deletions __tests__/tests/__snapshots__/locale.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ exports[`Locale test should render default locale with en_US 1`] = `
size={26}
/>,
"empty": <MdLibraryMusic />,
"forward": <AnimateForwardIcon />,
"loading": <FaSpinner />,
"loop": <MdRepeatOne
size={26}
Expand All @@ -55,6 +56,7 @@ exports[`Locale test should render default locale with en_US 1`] = `
"reload": <FaSyncAlt
size={22}
/>,
"rewind": <AnimateRewindIcon />,
"shuffle": <TiArrowShuffle
size={26}
/>,
Expand Down Expand Up @@ -442,6 +444,7 @@ exports[`Locale test should render default locale with en_US 1`] = `
size={26}
/>,
"empty": <MdLibraryMusic />,
"forward": <AnimateForwardIcon />,
"loading": <Spin />,
"loop": <MdRepeatOne
size={26}
Expand All @@ -467,6 +470,7 @@ exports[`Locale test should render default locale with en_US 1`] = `
"reload": <FaSyncAlt
size={22}
/>,
"rewind": <AnimateRewindIcon />,
"shuffle": <TiArrowShuffle
size={26}
/>,
Expand All @@ -490,6 +494,7 @@ exports[`Locale test should render default locale with en_US 1`] = `
"downloadText": "Download",
"emptyLyricText": "No lyric",
"emptyText": "No music",
"forwardAudioText": "Forward",
"lightThemeText": "L",
"loadingText": "Loading",
"nextTrackText": "Next track",
Expand All @@ -504,6 +509,7 @@ exports[`Locale test should render default locale with en_US 1`] = `
"previousTrackText": "Previous track",
"reloadText": "Reload",
"removeAudioListsText": "Delete audio lists",
"rewindAudioText": "Rewind",
"switchThemeText": "Dark/Light mode",
"toggleLyricText": "Toggle lyric",
"toggleMiniModeText": "Minimize",
Expand Down Expand Up @@ -725,6 +731,7 @@ exports[`Locale test should render locale with zh_CN 1`] = `
size={26}
/>,
"empty": <MdLibraryMusic />,
"forward": <AnimateForwardIcon />,
"loading": <FaSpinner />,
"loop": <MdRepeatOne
size={26}
Expand All @@ -750,6 +757,7 @@ exports[`Locale test should render locale with zh_CN 1`] = `
"reload": <FaSyncAlt
size={22}
/>,
"rewind": <AnimateRewindIcon />,
"shuffle": <TiArrowShuffle
size={26}
/>,
Expand Down Expand Up @@ -1302,6 +1310,7 @@ exports[`Locale test should render locale with zh_CN 1`] = `
size={26}
/>,
"empty": <MdLibraryMusic />,
"forward": <AnimateForwardIcon />,
"loading": <Spin />,
"loop": <MdRepeatOne
size={26}
Expand All @@ -1327,6 +1336,7 @@ exports[`Locale test should render locale with zh_CN 1`] = `
"reload": <FaSyncAlt
size={22}
/>,
"rewind": <AnimateRewindIcon />,
"shuffle": <TiArrowShuffle
size={26}
/>,
Expand All @@ -1350,6 +1360,7 @@ exports[`Locale test should render locale with zh_CN 1`] = `
"downloadText": "下载",
"emptyLyricText": "暂无歌词",
"emptyText": "音乐播放列表为空",
"forwardAudioText": "向前",
"lightThemeText": "亮",
"loadingText": "加载中",
"nextTrackText": "下一首",
Expand All @@ -1364,6 +1375,7 @@ exports[`Locale test should render locale with zh_CN 1`] = `
"previousTrackText": "上一首",
"reloadText": "重新播放",
"removeAudioListsText": "清空播放列表",
"rewindAudioText": "倒带",
"switchThemeText": "暗黑/明亮 主题",
"toggleLyricText": "显示/隐藏 歌词",
"toggleMiniModeText": "切换至迷你模式",
Expand Down
8 changes: 8 additions & 0 deletions src/components/Icon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import React from 'react'

import { FaPauseCircle } from '@react-icons/all-files/fa/FaPauseCircle'
import { FaPlayCircle } from '@react-icons/all-files/fa/FaPlayCircle'
import { FaForward } from '@react-icons/all-files/fa/FaForward'
import { FaBackward } from '@react-icons/all-files/fa/FaBackward'

export { FaBook as LyricIcon } from '@react-icons/all-files/fa/FaBook'
export { FaHeadphones as FaHeadphonesIcon } from '@react-icons/all-files/fa/FaHeadphones'
Expand Down Expand Up @@ -29,3 +31,9 @@ export const AnimatePlayIcon = () => (
export const AnimatePauseIcon = () => (
<FaPauseCircle className="react-jinke-music-player-pause-icon" />
)
export const AnimateForwardIcon = () => (
<FaForward className="react-jinke-music-player-pause-icon" />
)
export const AnimateRewindIcon = () => (
<FaBackward className="react-jinke-music-player-pause-icon" />
)
40 changes: 29 additions & 11 deletions src/components/PlayerMobile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ const PlayerMobile = ({
currentPlayModeName,
extendsContent,
onPlay,
onRewind,
onForward,
glassBg,
onCoverClick,
autoHiddenCover,
Expand Down Expand Up @@ -88,17 +90,33 @@ const PlayerMobile = ({
{loading ? (
<span className="group loading-icon">{icon.loading}</span>
) : (
<span
className="group play-btn"
title={
shouldShowPlayIcon
? locale.clickToPlayText
: locale.clickToPauseText
}
onClick={onPlay}
>
{shouldShowPlayIcon ? icon.play : icon.pause}
</span>
<>
<span
className="group rewind-btn"
title={locale.rewindAudioText}
onClick={onRewind}
>
{icon.rewind}
</span>
<span
className="group play-btn"
title={
shouldShowPlayIcon
? locale.clickToPlayText
: locale.clickToPauseText
}
onClick={onPlay}
>
{shouldShowPlayIcon ? icon.play : icon.pause}
</span>
<span
className="group forward-btn"
title={locale.forwardAudioText}
onClick={onForward}
>
{icon.forward}
</span>
</>
)}
<span
className="group next-audio"
Expand Down
56 changes: 43 additions & 13 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ import Sortable, { Swap } from 'sortablejs'
import AudioListsPanel from './components/AudioListsPanel'
import CircleProcessBar from './components/CircleProcessBar'
import {
AnimateRewindIcon,
AnimateForwardIcon,
AnimatePauseIcon,
AnimatePlayIcon,
ArrowDownIcon,
Expand Down Expand Up @@ -93,6 +95,8 @@ const DEFAULT_ICON = {
loading: <LoadIcon />,
packUpPanelMobile: <ArrowDownIcon size={26} />,
empty: <EmptyIcon />,
forward: <AnimateForwardIcon />,
rewind: <AnimateRewindIcon />,
}

export default class ReactJkMusicPlayer extends PureComponent {
Expand Down Expand Up @@ -496,6 +500,8 @@ export default class ReactJkMusicPlayer extends PureComponent {
currentTime={formattedCurrentTime}
progressBar={ProgressBar}
onPlay={this.onTogglePlay}
onRewind={this.onAudioRewind}
onForward={this.onAudioForward}
currentPlayModeName={currentPlayModeName}
playMode={PlayModeComponent}
audioNextPlay={this.onPlayNextAudio}
Expand Down Expand Up @@ -586,19 +592,35 @@ export default class ReactJkMusicPlayer extends PureComponent {
{this.iconMap.loading}
</span>
) : (
<span
className="group play-btn"
onClick={this.onTogglePlay}
title={
shouldShowPlayIcon
? locale.clickToPlayText
: locale.clickToPauseText
}
>
{shouldShowPlayIcon
? this.iconMap.play
: this.iconMap.pause}
</span>
<>
<span
className="group rewind-btn"
onClick={this.onAudioRewind}
title={locale.rewindAudioText}
>
{this.iconMap.rewind}
</span>
<span
className="group play-btn"
onClick={this.onTogglePlay}
title={
shouldShowPlayIcon
? locale.clickToPlayText
: locale.clickToPauseText
}
>
{shouldShowPlayIcon
? this.iconMap.play
: this.iconMap.pause}
</span>
<span
className="group forward-btn"
onClick={this.onAudioForward}
title={locale.forwardAudioText}
>
{this.iconMap.forward}
</span>
</>
)}
<span
className="group next-audio"
Expand Down Expand Up @@ -1328,6 +1350,14 @@ export default class ReactJkMusicPlayer extends PureComponent {
}
}

onAudioForward = () => {
this.audio.currentTime += 10
}

onAudioRewind = () => {
this.audio.currentTime -= 10
}

setAudioLoaded = () => {
this.setState({
loading: false,
Expand Down
2 changes: 2 additions & 0 deletions src/locale/en_US.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ export default {
clickToPauseText: 'Click to pause',
nextTrackText: 'Next track',
previousTrackText: 'Previous track',
rewindAudioText: 'Rewind',
forwardAudioText: 'Forward',
reloadText: 'Reload',
volumeText: 'Volume',
playListsText: 'Playlists',
Expand Down
2 changes: 2 additions & 0 deletions src/locale/zh_CN.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ export default {
clickToPauseText: '点击暂停',
nextTrackText: '下一首',
previousTrackText: '上一首',
rewindAudioText: '倒带',
forwardAudioText: '向前',
reloadText: '重新播放',
volumeText: '音量',
playListsText: '播放列表',
Expand Down
Loading