feat(web): volume control (#2053)

packages/web/i18n/locales/en-us.json

@@ -71,6 +71,7 @@
     "lab": "Lab",
     "general-choose-language": "Choose Language",
     "player-youtube-unlock": "YouTube Unlock",
+    "volume-control": "Volume Control",
     "player-find-alternative-track-on-youtube-if-not-available-on-netease": "Find alternative track on YouTube if not available on NetEase.",
     "about": "About"
   },

packages/web/i18n/locales/zh-cn.json

@@ -72,6 +72,7 @@
     "general-choose-language": "选择语言",
     "player-find-alternative-track-on-youtube-if-not-available-on-netease": "当播放的歌曲无版权或无法播放时，自动从 YouTube 寻找替代音频。",
     "player-youtube-unlock": "YouTube 解锁",
+    "volume-control": "音量控制",
     "about": "关于"
   },
   "context-menu": {

packages/web/pages/Settings/Player.tsx

@@ -1,13 +1,17 @@
 import settings from '@/web/states/settings'
-import toast from 'react-hot-toast'
 import { useTranslation } from 'react-i18next'
 import { useSnapshot } from 'valtio'
-import { BlockDescription, BlockTitle, Button, Option, OptionText, Switch } from './Controls'
+import { BlockDescription, BlockTitle, Option, OptionText, Switch, Input } from './Controls'
+import Slider from '@/web/components/Slider'
+import { cx } from '@emotion/css'
+import player from '@/web/states/player'
+import { ceil } from 'lodash'
 
 function Player() {
   return (
-    <div>
+    <div className={cx(`space-y-7`)}>
       <FindTrackOnYouTube />
+      <VolumeSlider />
     </div>
   )
 }
@@ -29,7 +33,6 @@ function FindTrackOnYouTube() {
           </>
         )}
       </BlockDescription>
-
       {/* Switch */}
       <Option>
         <OptionText>Enable YouTube Unlock</OptionText>
@@ -56,4 +59,31 @@ function FindTrackOnYouTube() {
   )
 }
 
+function VolumeSlider() {
+  const { t } = useTranslation()
+  const { volume } = useSnapshot(player)
+  const onChange = (volume: number) => {
+    player.volume = volume
+  }
+  return (
+    <div>
+      <BlockTitle>{t(`settings.volume-control`)}</BlockTitle>
+      <div className='pt-2 pr-1'>
+        <Slider
+          value={volume}
+          min={0}
+          max={1}
+          onChange={onChange}
+          alwaysShowTrack
+          alwaysShowThumb
+        />
+      </div>
+      <div className='mt-1 flex justify-between text-14 font-bold text-neutral-100'>
+        <span>0</span>
+        <span>{ceil(volume * 100)}</span>
+      </div>
+    </div>
+  )
+}
+
 export default Player