ilime · g1eny0ung · Jan 7, 2020 · Jan 4, 2020
diff --git a/src/actions/fm/apis.js b/src/actions/fm/apis.js
@@ -50,7 +50,9 @@ const playlistOriginUrl =
   Object.entries(fixedParams).reduce((previous, [key, value]) => {
     return previous + key + '=' + value + '&'
   }, '') +
-  'format=null&kbps=128&pb=128&from='
+  'format=null&from='
+
+const genBitRate = (isPro, preferBitRate) => isPro ? ('&pb=192&kbps=' + preferBitRate) : '&kbps=128&pb=128'
 
 const songLyricOriginUrl =
   FM_ROOT_URL +
@@ -107,26 +109,28 @@ export const playlistGET = (type, callback = null) => {
     }
     alreadySetOpenPattern = true
 
+    const { authReducer, fmReducer, settingReducer } = getState()
     axios(
       Object.assign(
         {
           method: 'GET',
           url:
             playlistOriginUrl +
+            genBitRate(authReducer.userInfo.pro_status && authReducer.userInfo.pro_status === 'S', settingReducer.preferBitRate) +
             '&pt=' +
-            getState().fmReducer.playtime +
+            fmReducer.playtime +
             '&channel=' +
-            getState().fmReducer.channelId +
+            fmReducer.channelId +
             '&type=' +
-            getState().fmReducer.type +
+            fmReducer.type +
             '&sid=' +
-            (type !== 'new' ? getState().fmReducer.sid : '')
+            (type !== 'new' ? fmReducer.sid : '')
         },
         // is login
-        getState().authReducer._id === 1 && {
+        authReducer._id === 1 && {
           headers: {
             Authorization:
-              'Bearer ' + getState().authReducer.userToken.access_token
+              'Bearer ' + authReducer.userToken.access_token
           }
         }
       )

diff --git a/src/actions/setting/actions.js b/src/actions/setting/actions.js
@@ -30,6 +30,11 @@ const compactStatusBarSet = pattern => ({
   compactStatusBar: pattern
 })
 
+const preferBitRateSet = bitRate => ({
+  type: types.PREFER_BIT_RATE,
+  preferBitRate: bitRate
+})
+
 const settingSaveSuccess = () => ({ type: types.SETTING_SAVE_SUCCESS })
 const settingSaveSuccessReset = () => ({
   type: types.SETTING_SAVE_SUCCESS_RESET
@@ -42,6 +47,7 @@ export {
   hideAboutSet,
   openPatternSet,
   compactStatusBarSet,
+  preferBitRateSet,
   settingSaveSuccess,
   settingSaveSuccessReset
 }
diff --git a/src/actions/setting/apis.js b/src/actions/setting/apis.js
@@ -24,6 +24,7 @@ export const settingLoad = () => {
         dispatch(actions.hideAboutSet(doc.hideAbout || false))
         dispatch(actions.openPatternSet(doc.openPattern || 'select'))
         dispatch(actions.compactStatusBarSet(doc.compactStatusBar || false))
+        dispatch(actions.preferBitRateSet(doc.preferBitRate || '128'))
       }
     })
   }
@@ -54,7 +55,8 @@ export const settingStore = state => {
               restoreLastWinPos: state.restoreLastWinPos,
               hideAbout: state.hideAbout,
               openPattern: state.openPattern,
-              compactStatusBar: state.compactStatusBar
+              compactStatusBar: state.compactStatusBar,
+              preferBitRateSet: state.preferBitRate
             }
           },
           {
@@ -69,6 +71,7 @@ export const settingStore = state => {
               dispatch(actions.hideAboutSet(state.hideAbout))
               dispatch(actions.openPatternSet(state.openPattern))
               dispatch(actions.compactStatusBarSet(state.compactStatusBar))
+              dispatch(actions.preferBitRateSet(state.preferBitRate))
               dispatch(actions.settingSaveSuccess())
               setTimeout(() => {
                 dispatch(actions.settingSaveSuccessReset())
@@ -85,7 +88,8 @@ export const settingStore = state => {
             restoreLastWinPos: state.restoreLastWinPos,
             hideAbout: state.hideAbout,
             openPattern: state.openPattern,
-            compactStatusBar: state.compactStatusBar
+            compactStatusBar: state.compactStatusBar,
+            preferBitRateSet: state.preferBitRate
           },
           (err, doc) => {
             if (err === null) {
@@ -96,6 +100,7 @@ export const settingStore = state => {
               dispatch(actions.hideAboutSet(state.hideAbout))
               dispatch(actions.openPatternSet(state.openPattern))
               dispatch(actions.compactStatusBarSet(state.compactStatusBar))
+              dispatch(actions.preferBitRateSet(state.preferBitRate))
               dispatch(actions.settingSaveSuccess())
               setTimeout(() => {
                 dispatch(actions.settingSaveSuccessReset())

diff --git a/src/actions/setting/types.js b/src/actions/setting/types.js
@@ -4,6 +4,7 @@ const RESTORE_LAST_WIN_POS = 'RESTORE_LAST_WIN_POS'
 const HIDE_ABOUT = 'HIDE_ABOUT'
 const OPEN_PATTERN = 'OPEN_PATTERN'
 const COMPACT_STATUS_BAR = 'COMPACT_STATUS_BAR'
+const PREFER_BIT_RATE = 'PREFER_BIT_RATE'
 const SETTING_SAVE_SUCCESS = 'SETTING_SAVE_SUCCESS'
 const SETTING_SAVE_SUCCESS_RESET = 'SETTING_SAVE_SUCCESS_RESET'
 
@@ -14,6 +15,7 @@ export {
   HIDE_ABOUT,
   OPEN_PATTERN,
   COMPACT_STATUS_BAR,
+  PREFER_BIT_RATE,
   SETTING_SAVE_SUCCESS,
   SETTING_SAVE_SUCCESS_RESET
 }
diff --git a/src/components/Personal/index.jsx b/src/components/Personal/index.jsx
@@ -34,7 +34,12 @@ class Personal extends Component {
             <Item>
               <Item.Image className="avatar-icon" src={userInfo.icon} />
               <Item.Content>
-                <Item.Header as="a">{userInfo.name}</Item.Header>
+                <Item.Header as="a">
+                  <span>{userInfo.name}</span>
+                  {(userInfo.pro_status && userInfo.pro_status === 'S') && (
+                    <span className="pro-badget">PRO</span>
+                  )} 
+                </Item.Header>
                 <Item.Meta>
                   <p>已听 {userInfo.played_num} 首</p>
                   <p>红心 {userInfo.liked_num} 首</p>

diff --git a/src/components/Setting/Main.jsx b/src/components/Setting/Main.jsx
@@ -14,7 +14,8 @@ class Main extends Component {
       restoreLastWinPos: this.props.settingRestoreLastWinPos,
       hideAbout: this.props.hideAbout,
       openPattern: this.props.openPattern,
-      compactStatusBar: this.props.compactStatusBar
+      compactStatusBar: this.props.compactStatusBar,
+      preferBitRate: this.props.preferBitRate
     }
   }
 
@@ -69,13 +70,19 @@ class Main extends Component {
     })
   }
 
+  handlePreferBitRate = (e, data) => {
+    this.setState({
+      preferBitRate: data.value
+    })
+  }
+
   handleSettingStore = () => {
     this.props.handleSettingStore(this.state)
   }
 
   render() {
-    const { _id, saveSuccess } = this.props
-    const { volume, openWithPlaying, restoreLastWinPos, hideAbout, openPattern, compactStatusBar } = this.state
+    const { _id, saveSuccess, userInfo } = this.props
+    const { volume, openWithPlaying, restoreLastWinPos, hideAbout, openPattern, compactStatusBar, preferBitRate } = this.state
 
     const patternOptions = [
       { key: 'select', text: '豆瓣精选 MHz', value: 'select' },
@@ -97,11 +104,21 @@ class Main extends Component {
           </div>
           {_id === 1 && (
             <div>
-              <div style={{ margin: '8px 0' }}>初始模式：</div>
+              <div style={{ margin: '4px 0' }}>初始模式：</div>
               <Select value={openPattern} options={patternOptions} onChange={this.handleSelectInitialPattern} />
             </div>
           )}
         </div>
+        {(userInfo.pro_status && userInfo.pro_status === 'S') && (
+          <div>
+            <div style={{ margin: '4px 0' }}>首选音质：</div>
+            <Select placeholder='首选音质' value={preferBitRate} options={[
+              { key: '128', value: '128', text: '中等音质 (128k)' },
+              { key: '192', value: '192', text: '高音质 (192k)' },
+              { key: '320', value: '320', text: '最佳音质 (320k)' }
+            ]} onChange={this.handlePreferBitRate} />
+          </div>
+        )}
         <Header as="h5">其他设置: </Header>
         <div>
           <div>
@@ -146,7 +163,9 @@ Main.propTypes = {
   settingRestoreLastWinPos: PropTypes.bool,
   hideAbout: PropTypes.bool,
   openPattern: PropTypes.string,
-  compactStatusBar: PropTypes.bool
+  compactStatusBar: PropTypes.bool,
+  userInfo: PropTypes.any,
+  preferBitRate: PropTypes.string
 }
 
 const mapStateToProps = state => ({
@@ -157,7 +176,9 @@ const mapStateToProps = state => ({
   settingRestoreLastWinPos: state.settingReducer.restoreLastWinPos,
   hideAbout: state.settingReducer.hideAbout,
   openPattern: state.settingReducer.openPattern,
-  compactStatusBar: state.settingReducer.compactStatusBar
+  compactStatusBar: state.settingReducer.compactStatusBar,
+  userInfo: state.authReducer.userInfo,
+  preferBitRate: state.settingReducer.preferBitRate 
 })
 
 const mapDispatchToProps = dispatch => ({

diff --git a/src/reducers/setting.js b/src/reducers/setting.js
@@ -11,6 +11,7 @@ const settingReducer = (
     hideAbout: false,
     openPattern: 'select',
     compactStatusBar: false,
+    preferBitRate: '128',
     saveSuccess: false
   },
   action
@@ -28,6 +29,8 @@ const settingReducer = (
     (state, action) => ({ ...state, openPattern: action.openPattern }),
     types.COMPACT_STATUS_BAR,
     (state, action) => ({ ...state, compactStatusBar: action.compactStatusBar }),
+    types.PREFER_BIT_RATE,
+    (state, action) => ({ ...state, preferBitRate: action.preferBitRate }),
     types.SETTING_SAVE_SUCCESS,
     state => ({ ...state, saveSuccess: true }),
     types.SETTING_SAVE_SUCCESS_RESET,

diff --git a/src/styles/Personal.scss b/src/styles/Personal.scss
@@ -33,6 +33,17 @@
       }
     }
   }
+
+  .pro-badget {
+    margin: 0 0.5rem;
+    padding: 0 0.3rem;
+    font-size: 12px;
+    border: 1px solid rgb(211, 187, 129);
+    border-radius: 0.2rem;
+    color: #977e42;
+    transform: skew(-10deg);
+    -webkit-transform: skew(-10deg);
+  }
 }
 
 .petal-personal-downloads,