\n
\n
{this.getTextHeader(groupType)}
\n
\n
\n {\n genres.map((genre, index) => {\n if (index > 5) {\n return ;\n }\n\n const isFocus = elFocused === variables.zones.CONTENT\n && focused === index ? 'focused' : 'no-focus';\n\n return (\n \n )\n })\n }\n
\n
\n
\n {/*
*/}\n\n
\n
\n {genres && genres.size > 0 ? genres.toArray()[submenu.get('selected')].name : ''}\n
\n
\n
\n {\n videoData.toArray().map((genre, index) => {\n return (\n \n )\n })\n }\n
\n
\n {/*
*/}\n \n
\n
\n {genres && genres.size > 0 ? genres.toArray()[submenu.get('selected')].name : ''}\n
\n
\n
\n {\n playlistData.map((genre, index) => {\n return (\n \n )\n })\n }\n
\n
\n
\n {this.renderStatus()}\n
\n
\n
{data.refTitle}
\n
{data.artistNames}
\n
\n {\n dataTop20.toArray().map((row, index) => {\n if (index !== focused.get('row') && index !== focused.get('row') + 1) {\n return ;\n }\n const focus = focused.get('row') === index && elFocused === variables.zones.CONTENT ? true : false;\n const column = focused.get('column');\n const rowIndex = focused.get('row');\n\n return (\n \n )\n })\n }\n
\n )\n }\n\n renderRankingDetail = () => {\n const { elFocused } = this.props;\n const { dataRanking, focusRanking } = this.state;\n const currColumn = Math.floor(focusRanking / NUMBER_ITEMS_RANKING_COLUMN);\n\n if (dataRanking.size === 0) {\n return;\n }\n\n const listKey = dataRanking.get('listKey');\n\n return (\n \n {\n dataRanking.get('items').map((item, index) => {\n const column = Math.floor(index / NUMBER_ITEMS_RANKING_COLUMN);\n\n if (column < currColumn) {\n return ;\n }\n\n const focus = index === focusRanking &&\n elFocused === variables.zones.CONTENT ? 'focused' : 'normal';\n\n return (\n \n )\n })\n }\n
\n )\n }\n\n render() {\n return (\n \n \n\n {this.renderContent()}\n
\n )\n }\n}\n\nChartPage.contextTypes = {\n request: PropTypes.func,\n}\n\nconst mapStateToProps = (state) => ({\n elFocused: state.mainReducer.get('elFocused'),\n\n language: state.settingsReducer.get('language'),\n typePopup: state.popupReducer,\n\n userInfo: state.userReducer,\n})\n\nconst mapDispatchToProps = (dispatch) => ({\n setMainFocus: (payload) => { dispatch(setMainFocusAction(payload)) },\n\n setAudio: (payload, index) => { dispatch(setAudioAction(payload, index)) },\n setVisibleAudioPlayer: (payload) => { dispatch(setVisibleAudioAction(payload)) },\n})\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(ChartPage);","import React from 'react';\nimport { withRouter } from 'react-router-dom';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { remove, findIndex } from 'lodash';\nimport { List } from \"immutable\";\n\nimport ListShowcase from '../../components/ListShowcase';\nimport ListHorizontal from '../../components/ListHorizontal';\n\nimport {\n setMainFocusAction,\n setHandleDeepLinkAction\n} from '../MainPage/actions';\n\nimport { setStateAudioAction, setAudioAction, setVisibleAudioAction } from '../AudioPlayer/actions';\n\nimport {\n setUserInfoAction,\n} from '../MyMusic/actions';\n\nimport Main from '../../main';\nimport Control from '../../core/control';\n\nimport { path } from '../../constants/path';\nimport { home } from '../../constants/home';\nimport { dataType } from '../../constants/dataType';\nimport { variables } from '../../constants/global';\nimport { tracking } from '../../constants/tracking';\nimport { pushStateHistory } from '../../utils/helper';\n\n// import worker from '../../worker/getSongDetailSW';\n// import WebWorker from '../../worker/wokerSetup';\n\nimport './style.css';\nimport \"../VideoPage/style.css\";\nimport ListMenuHorizontal from '../../components/ListMenuHorizontal';\nimport GenresVideo from './GenresVideo';\nimport VideoPage from '../VideoPage';\nimport PlaylistPage from '../PlaylistPage';\nimport ChartPage from '../ChartPage';\nimport BottomPanel from '../../components/BottomPanel';\n\nconst typeMenu = {\n HOME_PAGE: 'typeMenu/HOME_PAGE',\n HOME_SUB_MENU: 'typeMenu/HOME_SUB_MENU',\n HOME_DATA: 'typeMenu/HOME_DATA'\n}\n\nconst listMenu = {\n BXH: 0,\n LIST_VIDEO: 1,\n LIST_PLAYLIST: 2\n}\n\nconst MAX_ITEM_IN_ROW = 3;\n\nclass HomePage extends React.Component {\n constructor(props) {\n super(props);\n\n this.unMountComponent = false;\n this.initEventHandleKey = false;\n\n // this.positions = [0, 29.25, 60.5, 93.75, 127, 158.25];\n // this.positions = [0, 0, 31.25, 64.5, 97.75, 129];\n // this.positions = [0, 0, 31.25, 62.5, 95.75, 129];\n this.positions = [0, 0, 32, 63.25, 94.5, 127.75, 161];\n\n this.state = {\n data: [],\n selected: home.viewTypes.menuList,\n typeMenuList: typeMenu.HOME_PAGE,\n genres: List(),\n indexGroupGenre: 0,\n focusedVideoData: 0,\n videoData: List(),\n dataTop20: List(),\n }\n }\n\n componentDidMount() {\n const { setMainFocus, location, setAudio, setVisibleAudioPlayer } = this.props;\n\n this.getDataHomePage();\n this.getUserInfo();\n this.initializeEvent(true);\n\n Main.trackScreenview(tracking.Screen.Home);\n document.addEventListener('mousewheel', this._onMouseWheel);\n\n if (location && location.search) {\n const array = location.search.split('=');\n\n if (array.length > 0) {\n const type = array[0];\n\n if (type === '?v') {\n setMainFocus(dataType.types.VIDEO + '/' + array[1]);\n } else if (type === '?p') {\n setAudio({\n playlistKey: array[1],\n listSong: []\n })\n setVisibleAudioPlayer(true);\n } else if (type === '?s') {\n setAudio({ songKey: array[1] });\n setVisibleAudioPlayer(true);\n }\n }\n }\n\n pushStateHistory();\n\n // const webWorker = new WebWorker(worker);\n // webWorker.postMessage('aaa');\n }\n\n componentWillUnmount() {\n this.unMountComponent = true;\n this.initializeEvent(false);\n this.context.visibleHotKey(true);\n\n document.removeEventListener('mousewheel', this._onMouseWheel);\n }\n\n componentDidUpdate(prevProps, prevState) {\n if (prevProps.elFocused !== this.props.elFocused) {\n if (this.props.elFocused === variables.zones.CONTENT) {\n this.initializeEvent(true);\n } else {\n this.initializeEvent(false);\n }\n }\n\n if (prevState.typeMenuList !== this.state.typeMenuList) {\n if (this.state.typeMenuList === typeMenu.HOME_PAGE) {\n this.initializeEvent(true);\n this.context.visibleHotKey(true);\n } else {\n this.initializeEvent(false);\n this.context.visibleHotKey(false);\n }\n }\n }\n\n // clickHandlers or eventHandlers like onClickSubmit() or onChangeDescription()\n onHandleKey = (keyCode, event) => {\n if (keyCode === Control.key.UP) {\n if (this.state.selected > 0) {\n this.setState({\n selected: this.state.selected - 1\n })\n }\n return false;\n }\n\n if (keyCode === Control.key.DOWN) {\n if (this.state.selected < this.state.data.length - 1) {\n this.setState({\n selected: this.state.selected + 1\n })\n }\n return false;\n }\n\n // if (keyCode === Control.key.RETURN) {\n // window.close();\n // return;\n // }\n }\n\n _onMouseWheel = (e) => {\n const { elFocused } = this.props;\n const { data } = this.state;\n\n if (elFocused === variables.zones.VIDEO_PLAYER || elFocused === variables.zones.AUDIO_PLAYER) {\n return;\n }\n\n if (this.props.typePopup.length !== 0) {\n return;\n }\n\n if (data.length === 0) {\n return;\n }\n\n if (e.wheelDelta === 120) {\n this.onHandleKey(Control.key.UP);\n } else if (e.wheelDelta === -120) {\n this.onHandleKey(Control.key.DOWN);\n }\n }\n\n onEnterListMenu = (index) => {\n this.indexListMenu = index;\n\n if (index === listMenu.BXH) {\n this.setState({\n typeMenuList: typeMenu.HOME_SUB_MENU,\n genres: new List(['', '', '', '', '', ''])\n })\n this.getDataTop20();\n } else if (index === listMenu.LIST_VIDEO) {\n this.getGenresVideo();\n } else {\n this.getGenresPlaylist();\n }\n }\n\n onEnterSubMenu = (index) => {\n this.setState({\n typeMenuList: typeMenu.HOME_DATA,\n indexGroupGenre: index\n })\n }\n\n onPressKeyLeft = () => {\n this.props.setMainFocus(variables.zones.SIDE_MENU);\n }\n\n onReturnSubMenu = () => {\n this.setState({\n typeMenuList: typeMenu.HOME_SUB_MENU\n })\n }\n\n onReturnHomePage = () => {\n this.setState({\n typeMenuList: typeMenu.HOME_PAGE\n })\n }\n\n // getter methods for render like getSelectReason() or getFooterContent()\n initializeEvent = (bool) => {\n if (bool === true) {\n if (this.initEventHandleKey === true) {\n return;\n }\n this.initEventHandleKey = true;\n Control.on('key', this.onHandleKey);\n } else {\n this.initEventHandleKey = false;\n Control.off('key', this.onHandleKey);\n }\n }\n\n getGenresVideo = () => {\n const url = `${path.SERVICE_ROOT}${path.GENRES_GROUP}`;\n const requestType = 'GET';\n const params = 'type=3&';\n\n this.context.request(url, params, requestType, this.setGenresVideo);\n }\n\n setGenresVideo = (data) => {\n if (this.unMountComponent === true) {\n return;\n }\n\n const { genres } = this.state;\n\n this.setState({\n genres: genres.clear().concat(data).filter(x => x.name.length !== 0),\n typeMenuList: typeMenu.HOME_SUB_MENU\n })\n }\n\n getGenresPlaylist = () => {\n const url = `${path.SERVICE_ROOT}${path.GENRES_GROUP}`;\n const requestType = 'GET';\n const params = 'type=2&';\n\n this.context.request(url, params, requestType, this.setGenresPlaylist);\n }\n\n setGenresPlaylist = (data) => {\n if (this.unMountComponent === true) {\n return;\n }\n\n const { genres } = this.state;\n\n this.setState({\n genres: genres.clear().concat(data).filter(x => x.name.length !== 0),\n typeMenuList: typeMenu.HOME_SUB_MENU\n })\n }\n\n getDataTop20 = () => {\n const url = `${path.SERVICE_ROOT}${path.TOP_20}`;\n const requestType = 'GET';\n const params = '';\n\n this.context.request(url, params, requestType, this.callbackTop20);\n }\n\n callbackTop20 = (data) => {\n if (this.unMountComponent === true) {\n return;\n }\n\n const { dataTop20 } = this.state;\n\n this.setState({\n dataTop20: dataTop20.clear().concat(data)\n })\n }\n\n /**\n */\n getDataHomePage = () => {\n const url = `${path.SERVICE_ROOT}${path.HOME_PAGE_URL}`;\n const requestType = 'GET';\n const params = '';\n\n this.context.request(url, params, requestType, this.processData);\n }\n\n /**\n * @param {Object} data\n */\n processData = (data) => {\n if (this.unMountComponent === true) {\n return;\n }\n\n const array = this.convertObjectToArray(data);\n\n Main.setPreviewData(array[home.viewTypes.videoHot], 'Đề xuất');\n this.setState({ data: array });\n }\n\n getUserInfo = () => {\n const url = `${path.SERVICE_ROOT}${path.USER_INFO}`;\n const requestType = 'GET';\n const params = '';\n\n this.context.request(url, params, requestType, this.setUserInfo);\n }\n\n setUserInfo = (data) => {\n this.props.setUserInfo(data);\n }\n\n /**\n * @param {Object} data\n */\n convertObjectToArray = (data) => {\n const array = [];\n\n for (let index = 0; index < home.genres.length; index++) {\n const element = home.genres[index];\n\n if (element === 'menuList') {\n array.splice(index, 0, []);\n }\n\n for (const key in data) {\n if (data.hasOwnProperty(key)) {\n const dataProperties = data[key];\n if (key === element && dataProperties) {\n array.splice(index, 0, dataProperties);\n }\n }\n }\n }\n\n return array.slice();\n }\n /**\n * @param {Number} i\n */\n // getPositionYOfList = (i: Number) => {\n\n // }\n\n getHeaderByIndex = (index) => {\n const { language } = this.props;\n\n if (index === home.viewTypes.videoHot) {\n return language.VIDEO_HOT;\n } else if (index === home.viewTypes.comedy) {\n return language.ENTERTAINMENT;\n } else if (index === home.viewTypes.karaoke) {\n return language.KARAOKE;\n } else if (index === home.viewTypes.albumHot) {\n return language.ALBUM_HOT;\n } else if (index === home.viewTypes.listenToday) {\n return language.LISTEN_TODAY;\n }\n }\n\n getDataTypeByIndex = (i) => {\n if (i === home.viewTypes.videoHot || i === home.viewTypes.comedy || i === home.viewTypes.karaoke) {\n return dataType.types.VIDEO;\n } else {\n return dataType.types.PLAYLIST;\n }\n }\n\n getPositionByFocus = () => {\n const { selected } = this.state;\n\n if (selected > home.viewTypes.menuList) {\n let heightByType = 0;\n let i = selected;\n\n if (i === home.viewTypes.menuList) {\n heightByType = 32;\n } else if (i === home.viewTypes.videoHot || i === home.viewTypes.comedy || i === home.viewTypes.karaoke) {\n // heightByType = 31.25 / 2;\n heightByType = 31.25;\n } else {\n // heightByType = 33.25 / 2;\n heightByType = 33.25;\n }\n\n if (this.positions[selected + 1]) {\n return this.positions[selected + 1] - heightByType;\n } else {\n return this.positions[selected]\n }\n } else {\n return 0;\n }\n }\n\n randomIndex = (array: Array) => {\n return Math.floor(Math.random() * array.length);\n }\n\n getGenreNameByID = (genreId) => {\n const { genres } = this.state;\n let genreName = '';\n\n genres.forEach((genre) => {\n const index = findIndex(genre.genres, { 'genreId': genreId.toString() });\n\n if (index > -1) {\n genreName = genre.genres[index].genreName;\n }\n })\n\n return genreName;\n }\n\n // optional render methods like renderNavigation() or renderProfilePicture()\n renderHomePage = () => {\n const { data, selected } = this.state;\n\n if (data.length > 0) {\n const _showcase = remove(data[0].slice(), (value) => {\n return value.type.toLowerCase() !== dataType.types.TOPIC;\n })\n const arrayVideoHot = data[home.viewTypes.videoHot];\n const arrayAlbumHot = data[home.viewTypes.albumHot];\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n }\n\n return ;\n }\n\n renderSubMenu = () => {\n const { genres } = this.state;\n\n return (\n \n )\n }\n\n renderDataGenre = () => {\n const { genres, indexGroupGenre, dataTop20 } = this.state;\n\n if (this.indexListMenu === listMenu.BXH) {\n return (\n \n )\n } else if (this.indexListMenu === listMenu.LIST_VIDEO) {\n return (\n \n )\n } else if (this.indexListMenu === listMenu.LIST_PLAYLIST) {\n return (\n \n )\n }\n\n // return (\n // \n //
\n //
\n // {nameGroupGenre}\n //
\n //
\n //
\n // {\n // videoData.map((genre, index) => {\n // return (\n // \n // )\n // })\n // }\n //
\n //
\n
\n {\n data.map((item, index) => {\n const stateFocus = (index === focused && focusShuffle === false\n && visibleFocus === true) ? true : false;\n const rowIndex = Math.floor(index / NUMBER_ITEMS_IN_ROW);\n \n if (rowFocused !== rowMax) {\n if (rowIndex !== rowFocused && rowIndex !== rowFocused + 1) {\n return ;\n }\n\n return (\n \n )\n } else {\n if (rowIndex !== rowFocused && rowIndex !== rowFocused - 1) {\n return ;\n }\n\n return (\n \n )\n }\n })\n }\n
\n
\n\t\t\t\t{dataSuggest.map((data, index) => {\n\t\t\t\t\t// if (index < currIndex - 1 && currIndex > 1) {\n\t\t\t\t\t// return;\n\t\t\t\t\t// }\n\t\t\t\t\tconst focused =\n\t\t\t\t\t\tisFocusSuggest === true && currIndex === index ? \"focused\" : \"\";\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t{data}
\n\t\t\t\t\t\t\n\t\t\t\t\t{this.renderRecommend()}\n\t\t\t\t\t{this.renderHistoryKaraoke()}\n\t\t\t\t
\n\t\t\t);\n\t\t} else {\n\t\t\treturn (\n\t\t\t\t\n\t\t\t\t\t{this.renderVideosSearch()}\n\t\t\t\t
\n\t\t\t);\n\t\t}\n\t};\n\n\trenderVideosSearch = () => {\n\t\tconst { dataSearch, focusData } = this.state;\n\t\tconst { language } = this.props;\n\t\tconst focused =\n\t\t\tfocusData.get(\"isFocus\") === true &&\n\t\t\tfocusData.get(\"row\") === position.Video\n\t\t\t\t? true\n\t\t\t\t: false;\n\n\t\tif (!dataSearch.get(\"video\") || focusData.get(\"row\") > position.Video) {\n\t\t\treturn;\n\t\t} else {\n\t\t\treturn (\n\t\t\t\t\n\t\t\t);\n\t\t}\n\t};\n\n\trenderHistoryKaraoke = () => {\n\t\tconst { dataHistoryKaraoke, focusData } = this.state;\n\t\tconst { language } = this.props;\n\t\tconst focused =\n\t\t\tfocusData.get(\"isFocus\") === true &&\n\t\t\tfocusData.get(\"row\") === position.Playlist\n\t\t\t\t? true\n\t\t\t\t: false;\n\n\t\tif (\n\t\t\tdataHistoryKaraoke.length === 0 ||\n\t\t\tfocusData.get(\"row\") > position.Playlist\n\t\t) {\n\t\t\treturn;\n\t\t} else {\n\t\t\treturn (\n\t\t\t\t\n\t\t\t);\n\t\t}\n\t};\n\n\trenderRecommend = () => {\n\t\tconst { dataSearch, focusData } = this.state;\n\t\tconst { language } = this.props;\n\t\tconst focused =\n\t\t\tfocusData.get(\"isFocus\") === true &&\n\t\t\tfocusData.get(\"row\") === position.Video\n\t\t\t\t? true\n\t\t\t\t: false;\n\n\t\tif (!dataSearch.get(\"video\") || focusData.get(\"row\") > position.Video) {\n\t\t\treturn;\n\t\t} else {\n\t\t\treturn (\n\t\t\t\t\n\t\t\t);\n\t\t}\n\t};\n\n\trenderListGenre = () => {\n\t\tconst { elFocused } = this.props;\n\t\tconst { dataListGenre, actived, focusListGenre } = this.state;\n\n\t\treturn (\n\t\t\t\n\t\t\t\t{dataListGenre.map((genre, index) => {\n\t\t\t\t\tconst keyProp = genre.genreId + index;\n\t\t\t\t\tconst activeClass = actived === index ? \"actived\" : \"\";\n\t\t\t\t\tconst focusedClass =\n\t\t\t\t\t\tfocusListGenre.get(\"isFocus\") === true &&\n\t\t\t\t\t\telFocused === variables.zones.CONTENT &&\n\t\t\t\t\t\tfocusListGenre.get(\"focused\") === index\n\t\t\t\t\t\t\t? \"focused\"\n\t\t\t\t\t\t\t: \"\";\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t{genre.genreName}
\n\t\t\t\t\t\t\n\t\t\t\t\t\t{this.renderDataLeft()}\n\t\t\t\t\t\t{this.renderDataRight()}\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t);\n\t\t} else {\n\t\t\treturn (\n\t\t\t\t\n\t\t\t);\n\t\t}\n\t};\n\n\trender() {\n\t\treturn (\n\t\t\t\n\t\t\t\t{this.renderListGenre()}\n\t\t\t\t{this.renderBodyKaraoke()}\n\t\t\t
\n\t\t);\n\t}\n}\n\nKaraokePage.contextTypes = {\n\trequest: PropTypes.func,\n};\n\nconst mapStateToProps = (state) => ({\n\telFocused: state.mainReducer.get(\"elFocused\"),\n\tlanguage: state.settingsReducer.get(\"language\"),\n\ttypePopup: state.popupReducer,\n});\n\nconst mapDispatchToProps = (dispatch) => ({\n\tsetMainFocus: (payload) => {\n\t\tdispatch(setMainFocusAction(payload));\n\t},\n\tsetStateAudio: (payload) => {\n\t\tdispatch(setStateAudioAction(payload));\n\t},\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(KaraokePage);\n","import React from 'react';\nimport { connect } from 'react-redux';\nimport PropTypes from 'prop-types';\n\nimport HeaderInPage from '../../components/HeaderInPage';\nimport SettingItem from '../../components/SettingItem';\n\nimport {\n setMainFocusAction,\n} from '../MainPage/actions';\n\nimport {\n setTypePopupAction,\n} from '../PopupPage/actions';\n\nimport {\n setLanguageAction,\n setHighQualityAction,\n setAutoplayAction,\n} from './actions';\n\nimport Control from '../../core/control';\nimport storage from '../../core/storage';\nimport Main from '../../main';\n\nimport { vi } from '../../language/vi';\n\nimport Config from '../../utils/config';\n\nimport { variables } from '../../constants/global';\nimport { keysStorage } from '../../constants/storage';\nimport { booleanToString, pushStateHistory } from '../../utils/helper';\nimport { dataType } from '../../constants/dataType';\nimport { path } from '../../constants/path';\nimport { tracking } from '../../constants/tracking';\n\nimport './style.css';\n\nconst POSITION_X_ARRAY = [0, 34, 68];\nconst POSITION_Y_ARRAY = [0, 19];\nconst array = {\n Login: 0, Language: 1, Info: 2, HighQuality: 3, AutoPlay: 4\n}\n\nclass SettingPage extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n focused: 0\n }\n\n this.initializeEvent(props.elFocused);\n }\n\n componentDidMount() {\n Main.trackScreenview(tracking.Screen.Settings);\n pushStateHistory();\n }\n\n componentWillUnmount() {\n Control.off('key', this.onHandleKey);\n }\n\n componentDidUpdate(prevProps, prevStates) {\n if (prevProps.elFocused !== this.props.elFocused) {\n this.initializeEvent(this.props.elFocused);\n }\n\n if (prevProps.lang !== this.props.lang) {\n if (this.props.lang === vi) {\n this.setSettings('vn');\n storage.set(keysStorage.KEY_LANGUAGE, 'vn');\n } else {\n this.setSettings('en');\n storage.set(keysStorage.KEY_LANGUAGE, 'en');\n }\n }\n\n if (prevProps.highQuality !== this.props.highQuality) {\n const { highQuality } = this.props;\n const booleanHQ = booleanToString(highQuality);\n\n storage.set(keysStorage.KEY_HIGH_QUATLITY, booleanHQ);\n\n if (highQuality === true) {\n Main.trackEvent(tracking.Screen.Settings, tracking.Actions.Tap, 'QualityOn');\n } else {\n Main.trackEvent(tracking.Screen.Settings, tracking.Actions.Tap, 'QualityOff');\n }\n }\n\n if (prevProps.autoplay !== this.props.autoplay) {\n const { autoplay } = this.props;\n const autoPlay = booleanToString(this.props.autoplay);\n\n storage.set(keysStorage.KEY_AUTO_PLAY, autoPlay);\n\n if (autoplay === true) {\n Main.trackEvent(tracking.Screen.Settings, tracking.Actions.Tap, 'AutoPlayOn');\n } else {\n Main.trackEvent(tracking.Screen.Settings, tracking.Actions.Tap, 'AutoPlayOff');\n }\n }\n }\n\n // clickHandlers or eventHandlers like onClickSubmit() or onChangeDescription()\n _onHoverItem = (index) => {\n this.setState({ focused: index });\n }\n\n _onClickItem = (index) => {\n if (index === array.Login) {\n const { userInfo } = this.props;\n\n if (userInfo.size === 0) {\n this.props.setTypePopup(dataType.popup.LOGIN);\n\n Main.trackEvent(tracking.Screen.Settings, tracking.Actions.Tap, 'Login');\n } else {\n this.props.setTypePopup(dataType.popup.LOGOUT);\n\n Main.trackEvent(tracking.Screen.Settings, tracking.Actions.Tap, 'Logout');\n }\n return;\n }\n\n if (index === array.Language) {\n this.props.setLanguage();\n return;\n }\n\n if (index === array.Info) {\n this.props.setTypePopup(dataType.popup.INFORMATION);\n return;\n }\n\n if (index === array.HighQuality) {\n this.props.setHighQuality();\n return;\n }\n\n if (index === array.AutoPlay) {\n this.props.setAutoPlay();\n return;\n }\n }\n\n onHandleKey = (keyCode, event) => {\n const { focused } = this.state;\n\n if (this.props.typePopup.length !== 0) {\n return true;\n }\n\n if (keyCode === Control.key.UP) {\n this.setState({\n focused: focused - 3 > array.Login ? focused - 3 : array.Login\n })\n return false;\n }\n\n if (keyCode === Control.key.DOWN) {\n this.setState({\n focused: focused + 3 < array.AutoPlay ? focused + 3 : array.AutoPlay\n })\n return false;\n }\n\n if (keyCode === Control.key.LEFT) {\n if (focused === array.Login || focused === array.HighQuality) {\n this.props.setMainFocus(variables.zones.SIDE_MENU);\n } else {\n this.setState({\n focused: focused > array.Login ? focused - 1 : focused\n })\n }\n return false;\n }\n\n if (keyCode === Control.key.RIGHT) {\n this.setState({\n focused: focused < array.AutoPlay ? focused + 1 : focused\n })\n return false;\n }\n\n if (keyCode === Control.key.RETURN || keyCode === Control.key.BACK) {\n this.props.setMainFocus(variables.zones.SIDE_MENU);\n return false;\n }\n\n if (keyCode === Control.key.ENTER) {\n this._onClickItem(this.state.focused);\n return false;\n }\n return true;\n }\n\n // getter methods for render like getSelectReason() or getFooterContent()\n initializeEvent = (zone) => {\n if (zone === variables.zones.CONTENT) {\n Control.on('key', this.onHandleKey);\n } else {\n Control.off('key', this.onHandleKey);\n }\n }\n\n setSettings = (language: String) => {\n const url = `${path.SERVICE_ROOT}${path.SETTING}`;\n const requestType = 'POST';\n const params = `language=${language.toUpperCase()}&`;\n\n this.context.request(url, params, requestType, (data) => {\n this.context.setAcessToken(\n data.jwtToken,\n data.deviceId,\n this.props.userInfo.get('username')\n );\n });\n }\n\n // optional render methods like renderNavigation() or renderProfilePicture()\n\n render() {\n const { elFocused, lang, highQuality, autoplay, userInfo } = this.props;\n const { focused } = this.state;\n // const background = settings.get('background');\n\n return (\n \n\n
\n\n
\n \n\n \n\n 08:49 March 22, 2019'}\n focused={focused === array.Info && elFocused === variables.zones.CONTENT ? 'focused' : 'normal'}\n index={array.Info}\n translateX={POSITION_X_ARRAY[2]}\n translateY={POSITION_Y_ARRAY[0]} />\n\n \n\n \n\n {/* */}\n
\n
\n
{language.LOG_IN_TITLE}
\n
\n
\n \n
\n
\n
\n
{language.Title_content_login_1}
\n
\n
\n
\n
{language.Body_content_login_1}
\n
\n
\n
\n
{language.Body_content_login_2}
\n
\n
\n
\n
\n
\n
{language.Title_content_login_2}
\n
\n
\n
{language.Body_content_login_3}
\n
\n
{dataLogin.get('link')}
\n
\n
\n
\n
\n
{language.Body_content_login_4}
\n
\n
{dataLogin.get('code')}
\n
\n
\n
\n
\n
\n
{language.Button_close}
\n
\n
{language.LOG_OUT_TITLE}
\n
\n
\n
\n {language.Button_close}
\n \n
\n
\n {language.LOG_OUT_TITLE}
\n \n
{language.Title_Exit}
\n
\n
\n
\n {language.Button_close}
\n \n
\n
\n {language.Button_Exit}
\n \n
{language.Information}
\n
\n
{language.Button_close}
\n
\n
{language.Button_close}
\n
\n
\n {this.renderContent()}\n
\n
\n
{\n number && number > 0 ? `Bỏ qua quảng cáo sau ${number} giây` : 'Bỏ qua'\n }
\n
\n \n
\n \n )\n } else {\n return (\n \n )\n }\n }\n\n renderImageVideoNext = () => {\n const { rowSelected, focused, videosRelated, videoQuality,\n visible, isMouseOverNextButton, cursorVisible } = this.state;\n\n if ((rowSelected === stateRows.BUTTONS && focused === stateButtons.NEXT && videosRelated.length > 0\n && videoQuality !== stateQuality.none && visible === true)) {\n return (\n \n \n \n
\n \n )\n } else if (Main.getDeviceName() === 'webos' && cursorVisible === true && isMouseOverNextButton === true) {\n return (\n \n \n \n
\n \n )\n } else if (isMouseOverNextButton === true) {\n return (\n \n \n \n
\n \n )\n } else {\n return (\n \n )\n }\n }\n\n renderAllQuality = () => {\n const { videoQuality } = this.state;\n const { userInfo } = this.props;\n\n if (videoQuality !== stateQuality.none || !this.streamURL || this.streamURL.length === 0) {\n return ;\n } else {\n return (\n this.streamURL.map((quality, index) => {\n return (\n \n )\n })\n )\n }\n }\n\n renderLoading = () => {\n const { loading } = this.state;\n\n if (loading === true) {\n return \n }\n }\n\n render() {\n const {\n source, rowSelected, title, artist, view, visible,\n videosArtist, videosRelated, videoQuality, startTime, isFavorited,\n adVast, numberSkip\n } = this.state;\n const { userInfo, language, indexFocus } = this.props;\n const classSkipButton = adVast === true ? 'normal' : 'hidden';\n\n if (adVast === true) {\n return (\n \n )\n }\n\n return (\n \n
\n
stateRows.BUTTONS || visible === false ? 'hidden' : ''}`} style={{ opacity: visible === true ? '1' : '0' }}>\n
{title}
\n
\n
stateRows.BUTTONS || visible === false ? 'hidden' : ''}`} style={{ opacity: visible ? 1 : 0 }}>\n
\n
\n
\n
{`${formatView(view)} ${language.Views}`}
\n
\n
\n
\n stateRows.BUTTONS ? 'hidden' : ''}`}>\n \n \n \n \n \n {\n (() => {\n if (this.arrVideosPrev && this.arrVideosPrev.length > 0) {\n return (\n \n )\n }\n })()\n }\n \n \n {this.renderAllQuality()}\n \n \n \n \n {this.renderImageVideoNext()}\n stateRows.BUTTONS ? '70%' : '11.875em',\n opacity: visible ? 1 : 0\n }}>\n {\n (() => {\n if (videosRelated.length === 0) {\n return ;\n }\n\n return (\n \n )\n })()\n }\n {\n (() => {\n if (videosArtist.length === 0) {\n return ;\n }\n return (\n \n )\n })()\n }\n
\n \n
\n
\n
{language.Button_Return}
\n
\n
\n
\n
\n
\n
\n
\n
{lyric ? lyric.split(' ')[1] : ''}
\n
\n
\n //
\n //
\n //
{current ? current.songTitle : ''}
\n //
\n //
\n //
{current ? current.artistName : ''}
\n //
\n //
\n
\n
\n
\n
{language.Lyric_Updating}
\n
\n
\n
\n
\n
\n
\n {\n data.map((item, index) => {\n const classFocus = focused === index && dynamic === true ? 'focused' : '';\n \n if (dynamic === true) {\n return (\n
\n
{item.split(' ')[1]}
\n
\n ) \n } else {\n return (\n
\n )\n }\n })\n }\n
\n
\n
\n
\n
{`Playlist \"${playlistTitle}\"`}
\n
\n
\n
{`${totalSongs} ${language.Songs.toLowerCase()}`}
\n
\n {\n listSong.map((item, index) => {\n const positionX = rangeX * Math.floor(index / NUMBER_ITEM_ON_COLUMN);\n const positionY = rangeY * (index % NUMBER_ITEM_ON_COLUMN);\n const isFocus = focused === index ? 'focused' : '';\n const isSelect = selected === index ? 'selected' : '';\n\n return (\n \n )\n })\n }\n
\n )\n }\n}","import React, { Suspense } from 'react';\nimport PropTypes from 'prop-types';\nimport { Map } from 'immutable';\nimport { findIndex } from 'lodash';\nimport { connect } from 'react-redux';\n\nimport ReactPlayer from 'react-player';\nimport AudioButton from '../../components/AudioButton';\nimport InfoCenterAudioPlayer from '../../components/InfoCenterAudioPlayer';\nimport BottomPanel from '../../components/BottomPanel';\nimport ListLyrics from '../../components/ListLyrics';\nimport Loading from '../../components/Loading';\n\nimport {\n setAudioAction,\n setIndexAudioAction,\n setVisibleAudioAction,\n setStateAudioAction,\n clearAudioDataAction\n} from './actions';\n\nimport {\n setMainFocusAction,\n} from '../MainPage/actions';\n\nimport Main from '../../main';\nimport Control from '../../core/control';\nimport ajax from '../../core/ajax';\n\nimport { arc4, putils } from '../../libs/decrypt';\n\nimport { path } from '../../constants/path';\nimport { variables } from '../../constants/global';\nimport { tracking } from '../../constants/tracking';\nimport { measure } from '../../constants/measure';\nimport { dataType } from '../../constants/dataType';\n\nimport { secondsToTime, convertEmToPixel } from '../../utils/convert';\nimport {\n convertStringWithoutTime, convertArgumentByLength, getArrayShuffle,\n trackingLogView, trackingLogNCT, getArrayInteger, setMediaSession, getHighQualityImage, convertToHttpURL\n} from '../../utils/helper';\n\nimport './style.css';\n\nimport HeaderListSong from '../../components/HeaderListSong';\nimport ListSong from '../../components/ListSong';\nimport { setTypePopupAction, setWarningAction } from '../PopupPage/actions';\n// const HeaderListSong = React.lazy(() => import('../../components/HeaderListSong'));\n// const ListSong = React.lazy(() => import('../../components/ListSong'));\n\n// const WIDTH_CONTAINER_PROGRESS_BAR = convertEmToPixel(4);\nconst positions = {\n ARROW_UP: 0,\n ARROW_DOWN: 1,\n PROGRESS: 2,\n MAIN: 3\n}\nconst buttonsBottom = {\n MORE: 0, PREV: 1, PLAY: 2, NEXT: 3, QUALITY: 4\n}\n// , SLEEP_MODE: 5\nconst buttonsBottomMoreActive = {\n MORE: 0, LYRICS: 1, HEART: 2, SHUFFLE: 3, REPEAT: 4\n}\nconst stateRepeat = {\n NONE: 0, ONE: 1, ALL: 2\n}\nconst enumStateQuality = {\n _128: 0,\n _320: 1\n}\nconst NUMBER_ITEM_ON_COLUMN = 5;\nconst NUMBER_ROWS_LYRIC = 6;\n\nclass AudioPlayer extends React.Component {\n constructor(props, context) {\n super(props);\n\n this.player = React.createRef();\n\n this.listLyric = [];\n this.totalPageLyric = 0;\n this.isDynamicLyric = false;\n this.listPrevious = [];\n this.listRandom = [];\n this.listFavorite = [];\n this.savedTime = 0;\n\n this.arrayDuration = [];\n this.logViewed = false;\n\n this.logged = false;\n this.logged25 = false;\n this.logged50 = false;\n this.logged75 = false;\n this.logged100 = false;\n\n this.state = {\n currentSong: null,\n currentStream: '',\n indexFocusList: 0,\n playlist: Map({\n quality: 0,\n isFavorited: false\n }),\n focused: Map({\n horizontal: buttonsBottom.PLAY,\n vertical: positions.MAIN\n }),\n loading: false,\n currentTime: 0,\n duration: 0,\n buffer: 0,\n currentStateRepeat: stateRepeat.ALL,\n isShuffle: false,\n activeMoreButton: false,\n activeLyrics: false,\n activeListSong: false,\n activeQuality: false,\n visibleClass: Map({\n mainUI: 'normal',\n mainControl: 'normal',\n more: 'hidden',\n moreButton: 'normal',\n quality: 'hidden',\n qualityButton: 'normal',\n listSong: 'hidden'\n }),\n dataLyrics: [],\n indexPageLyric: 0,\n indexSelectedLyric: 0\n }\n\n this._onProgress = this._onProgress.bind(this);\n this._onDuration = this._onDuration.bind(this);\n this._onPlay = this._onPlay.bind(this);\n this._onPause = this._onPause.bind(this);\n this.onClickProgressBar = this.onClickProgressBar.bind(this);\n }\n\n componentDidMount() {\n this.initializeEvent(this.props.visiblePlayer);\n\n const data = this.props.audio;\n\n if (data.size > 0) {\n if (data.get('listSong') && data.get('listSong').length > 0) {\n this.getDetailSong(data.get('listSong')[0].songKey);\n this.resetShuffleMode();\n this.setListRandom(data.get('listSong')[0].songKey);\n this.setState({\n indexFocusList: 0\n })\n } else {\n if (data.get('songKey')) {\n this.getDetailSong(data.get('songKey'));\n } else if (data.get('playlistKey')) {\n this.getDetailPlaylist(data.get('playlistKey'));\n }\n }\n }\n\n if (Main.getDeviceName() === 'viera') {\n this.intervalConnection = window.setInterval(() => {\n this.checkConnection();\n }, 15 * 1000);\n }\n\n Main.trackScreenview(tracking.Screen.NowPlaying);\n }\n\n componentDidUpdate(prevProps, prevStates) {\n if (prevProps.audio !== this.props.audio) {\n const { setVisibleAudioPlayer } = this.props;\n const nextData = this.props.audio;\n\n if (nextData.get('listSong') && nextData.get('listSong').length > 0) {\n this.getDetailSong(nextData.get('listSong')[0].songKey);\n this.resetShuffleMode();\n this.setListRandom(nextData.get('listSong')[0].songKey);\n this.setState({\n indexFocusList: 0\n })\n } else if (nextData.get('songKey')) {\n const nextSongKey = nextData.get('songKey');\n const currSongKey = prevProps.audio.get('songKey');\n\n if (nextSongKey !== currSongKey) {\n this.getDetailSong(nextSongKey);\n } else {\n setVisibleAudioPlayer(true);\n }\n } else if (nextData.get('playlistKey')) {\n const nextPlaylistKey = nextData.get('playlistKey');\n const currPlaylistKey = prevProps.audio.get('playlistKey');\n\n if (nextPlaylistKey !== currPlaylistKey) {\n this.setState({\n indexFocusList: 0\n })\n this.getDetailPlaylist(nextPlaylistKey);\n } else {\n setVisibleAudioPlayer(true);\n }\n }\n }\n\n if (prevProps.indexAudio !== this.props.indexAudio) {\n const { audio, indexAudio } = this.props;\n const listData = audio.get('listSong');\n\n if (!listData || listData.length === 0 || !listData[indexAudio]) {\n return;\n }\n\n this.getDetailSong(listData[indexAudio].songKey);\n }\n\n if (prevProps.visiblePlayer !== this.props.visiblePlayer) {\n this.initializeEvent(this.props.visiblePlayer);\n\n if (this.props.visiblePlayer === true) {\n Main.trackScreenview(tracking.Screen.NowPlaying);\n }\n }\n\n if (prevStates.activeListSong !== this.state.activeListSong) {\n this.initEventListSong(this.state.activeListSong);\n this.initializeEvent(!this.state.activeListSong);\n }\n\n if (prevStates.currentSong !== this.state.currentSong) {\n this.props.setStateAudio(false);\n }\n\n if (prevStates.indexPageLyric !== this.state.indexPageLyric) {\n const index = this.state.indexPageLyric;\n this.getListLyricByIndex(index);\n }\n\n if (prevStates.isShuffle !== this.state.isShuffle) {\n const songKey = this.state.currentSong.songKey;\n this.setListRandom(songKey);\n }\n\n if (prevStates.currentStream !== this.state.currentStream) {\n const prevSongKey = prevStates.currentSong ? prevStates.currentSong.songKey : '';\n const currSongKey = this.state.currentSong.songKey;\n\n if (prevSongKey === currSongKey) {\n if (this.savedTime !== 0) {\n window.clearInterval(this.iPlaySavedTime);\n this.iPlaySavedTime = window.setInterval(() => {\n const { duration } = this.state;\n\n if (this.player.current.getCurrentTime() > 0) {\n this.player.current.seekTo(this.savedTime / duration);\n this.savedTime = 0;\n window.clearInterval(this.iPlaySavedTime);\n }\n }, 300);\n }\n }\n }\n\n if (prevStates.duration !== this.state.duration) {\n const { duration } = this.state;\n if (duration > 0) {\n this.arrayDuration = getArrayInteger(Math.ceil(duration));\n }\n }\n }\n\n componentWillUnmount() {\n this.initializeEvent(false);\n }\n\n // clickHandlers or eventHandlers like onClickSubmit() or onChangeDescription()\n initializeEvent = (bool) => {\n if (bool === true) {\n Control.on('key', this.onHandleKey);\n\n document.addEventListener('mousewheel', this._onMouseWheel);\n document.addEventListener('visibilitychange', this._onHandleVisibilityChange);\n } else {\n Control.off('key', this.onHandleKey);\n\n document.removeEventListener('mousewheel', this._onMouseWheel);\n document.removeEventListener('visibilitychange', this._onHandleVisibilityChange);\n }\n }\n\n initEventListSong = (bool) => {\n if (bool === true) {\n Control.on('key', this.onHandleKeyListSong);\n document.addEventListener('mousewheel', this._onMouseWheelListSong);\n } else {\n Control.off('key', this.onHandleKeyListSong);\n document.removeEventListener('mousewheel', this._onMouseWheelListSong);\n }\n }\n\n _onMouseWheel = (e) => {\n const { elFocused } = this.props;\n const { activeListSong } = this.state;\n\n if (elFocused !== variables.zones.AUDIO_PLAYER) {\n return;\n }\n\n if (this.props.typePopup.length !== 0) {\n return;\n }\n\n if (activeListSong === true) {\n return;\n }\n\n if (e.wheelDelta === 120) {\n this.onHandleKey(Control.key.UP);\n } else if (e.wheelDelta === -120) {\n this.onHandleKey(Control.key.DOWN);\n }\n }\n\n _onMouseWheelListSong = (e) => {\n const { elFocused } = this.props;\n const { activeListSong } = this.state;\n\n if (elFocused !== variables.zones.AUDIO_PLAYER) {\n return;\n }\n\n if (this.props.typePopup.length !== 0) {\n return;\n }\n\n if (activeListSong === false) {\n return;\n }\n\n if (e.wheelDelta === 120) {\n this.onHandleKeyListSong(Control.key.RETURN);\n }\n }\n\n _onHandleVisibilityChange = () => {\n if (document.hidden) {\n const { setStateAudio } = this.props;\n const { currentTime } = this.state;\n\n this.savedTime = currentTime;\n setStateAudio(true);\n this.setState({\n currentStream: '',\n loading: true\n })\n } else {\n window.clearInterval(this.icheckPlayAgain);\n this.icheckPlayAgain = window.setInterval(() => {\n const { currentSong, currentStream } = this.state;\n\n if (currentStream.length === 0) {\n this.getDetailSong(currentSong.songKey);\n } else {\n window.clearInterval(this.icheckPlayAgain);\n }\n }, 1000);\n }\n }\n\n onHandleKey = (keyCode, event) => {\n const { typePopup } = this.props;\n\n if (typePopup.length !== 0) {\n return;\n }\n\n if (keyCode === Control.key.UP) {\n const { focused, activeMoreButton, activeQuality } = this.state;\n\n this.setState({\n focused: focused\n .update('horizontal', v => buttonsBottom.PLAY)\n .update('vertical', v => positions.PROGRESS)\n })\n if (activeMoreButton === true) {\n this.onClickMoreButton();\n } else if (activeQuality === true) {\n this.onClickQualityButton();\n }\n return false;\n }\n\n if (keyCode === Control.key.DOWN) {\n const { audio } = this.props;\n const { focused, visibleClass } = this.state;\n\n if (focused.get('vertical') === positions.PROGRESS) {\n this.setState({\n focused: focused.update('vertical', v => positions.MAIN)\n })\n } else if (focused.get('vertical') === positions.MAIN) {\n if (audio.get('songKey')) {\n\n } else if (audio.get('listSong')) {\n this.setState({\n activeListSong: true,\n visibleClass: visibleClass\n .update('mainUI', v => 'hidden')\n .update('listSong', v => 'normal')\n });\n Main.trackEvent(tracking.Screen.NowPlaying, tracking.Actions.Tap, 'ListSong');\n }\n }\n return false;\n }\n\n\n if (keyCode === Control.key.LEFT) {\n const { focused, currentTime, duration } = this.state;\n\n if (focused.get('vertical') === positions.PROGRESS) {\n if (currentTime - measure.deltaTimePlayer > 0) {\n this.player.current.seekTo((currentTime - measure.deltaTimePlayer) / duration);\n } else {\n this.player.current.seekTo(0);\n }\n } else if (focused.get('vertical') === positions.MAIN) {\n this.handleLeftMainControl();\n }\n return false;\n }\n\n\n if (keyCode === Control.key.RIGHT) {\n const { focused, currentTime, duration } = this.state;\n\n if (focused.get('vertical') === positions.PROGRESS) {\n if (currentTime + measure.deltaTimePlayer < duration) {\n this.player.current.seekTo((currentTime + measure.deltaTimePlayer) / duration);\n }\n } else if (focused.get('vertical') === positions.MAIN) {\n this.handleRightMainControl();\n }\n return false;\n }\n\n\n if (keyCode === Control.key.ENTER) {\n const { focused } = this.state;\n\n if (focused.get('vertical') === positions.MAIN) {\n this.handleEnterMainControl();\n }\n return false;\n }\n\n\n if (keyCode === Control.key.RETURN || keyCode === Control.key.BACK) {\n const { setVisibleAudioPlayer, setMainFocus, clearAudioData } = this.props;\n const { activeMoreButton, activeQuality, focused } = this.state;\n\n if (activeMoreButton === true) {\n this.setState({\n focused: focused.update('horizontal', v => buttonsBottom.MORE)\n })\n this.onClickMoreButton();\n } else if (activeQuality === true) {\n this.setState({\n focused: focused.update('horizontal', v => buttonsBottom.QUALITY)\n })\n this.onClickQualityButton();\n } else {\n this.setState({\n focused: focused\n .update('horizontal', v => buttonsBottom.PLAY)\n .update('vertical', v => positions.MAIN)\n })\n setMainFocus(variables.zones.CONTENT);\n setVisibleAudioPlayer(false);\n\n if (Main.getDeviceName() === 'VCA') {\n clearAudioData();\n }\n }\n return false;\n }\n\n if (keyCode === Control.key.RW) {\n const { currentTime, duration } = this.state;\n\n if (currentTime - measure.deltaTimePlayer > 0) {\n this.player.current.seekTo((currentTime - measure.deltaTimePlayer) / duration);\n } else {\n this.player.current.seekTo(0);\n }\n return false;\n }\n\n if (keyCode === Control.key.FF) {\n const { currentTime, duration } = this.state;\n\n if (currentTime + measure.deltaTimePlayer < duration) {\n this.player.current.seekTo((currentTime + measure.deltaTimePlayer) / duration);\n }\n return false;\n }\n\n if (keyCode === Control.key.KEY_PLAY_PAUSE) {\n this.onClickPlayPauseButton();\n return false;\n }\n\n if (keyCode === Control.key.PLAY) {\n const { paused, setStateAudio } = this.props;\n\n if (paused === true) {\n setStateAudio(!paused);\n }\n return false;\n }\n\n if (keyCode === Control.key.PAUSE) {\n const { paused, setStateAudio } = this.props;\n\n if (paused === false) {\n setStateAudio(!paused);\n }\n return false;\n }\n\n if (keyCode === Control.key.STOP) {\n const { paused, setStateAudio } = this.props;\n\n this.player.current.seekTo(0);\n if (paused === false) {\n setStateAudio(!paused);\n }\n return false;\n }\n\n if (Control.key.NEXT && keyCode === Control.key.NEXT) {\n this.onClickNextButton();\n return false;\n }\n\n if (Control.key.PREV && keyCode === Control.key.PREV) {\n this.onClickPrevButton();\n return false;\n }\n return true;\n }\n\n onHandleKeyListSong = (keyCode, event) => {\n if (keyCode === Control.key.UP) {\n const currentIndex = this.state.indexFocusList;\n\n if (currentIndex % NUMBER_ITEM_ON_COLUMN !== 0) {\n this.setState({\n indexFocusList: currentIndex - 1\n })\n } else {\n this.onHandleKeyListSong(Control.key.RETURN);\n }\n return false;\n }\n\n if (keyCode === Control.key.DOWN) {\n const { audio } = this.props;\n const currentIndex = this.state.indexFocusList;\n const maxLength = audio.get('listSong').length;\n\n if (currentIndex < maxLength - 1) {\n this.setState({\n indexFocusList: currentIndex + 1\n })\n }\n return false;\n }\n\n if (keyCode === Control.key.LEFT) {\n const { indexFocusList } = this.state;\n this.setState({\n indexFocusList: indexFocusList >= NUMBER_ITEM_ON_COLUMN ? indexFocusList - 5 : indexFocusList\n })\n return false;\n }\n\n if (keyCode === Control.key.RIGHT) {\n const { audio } = this.props;\n const { indexFocusList } = this.state;\n const maxLength = audio.get('listSong').length;\n\n if (indexFocusList + NUMBER_ITEM_ON_COLUMN < maxLength) {\n this.setState({\n indexFocusList: indexFocusList + NUMBER_ITEM_ON_COLUMN\n })\n } else {\n const currentColumn = Math.floor(indexFocusList / NUMBER_ITEM_ON_COLUMN);\n const maxColumn = Math.floor((maxLength - 1) / NUMBER_ITEM_ON_COLUMN);\n\n if (currentColumn !== maxColumn) {\n this.setState({\n indexFocusList: maxLength - 1\n })\n }\n }\n return false;\n }\n\n if (keyCode === Control.key.ENTER) {\n this.setIndexNewSong(this.state.indexFocusList);\n this.onHandleKeyListSong(Control.key.RETURN);\n return false;\n }\n\n if (keyCode === Control.key.RETURN || keyCode === Control.key.BACK) {\n const { visibleClass } = this.state;\n this.setState({\n activeListSong: false,\n visibleClass: visibleClass\n .update('mainUI', v => 'normal')\n .update('listSong', v => 'hidden')\n });\n return false;\n }\n return true;\n }\n\n _onProgress = (state) => {\n this.setState({\n currentTime: state.playedSeconds ? state.playedSeconds : 0,\n buffer: state.loadedSeconds\n })\n\n if (this.logged === false || this.logged25 === false || this.logged50 === false ||\n this.logged75 === false || this.logged100 === false) {\n const { userInfo } = this.props;\n const { duration, currentSong } = this.state;\n const songKey = currentSong.songKey;\n const type = dataType.types.SONG.toLowerCase();\n const username = userInfo.size > 0 ? userInfo.get('username') : '';\n const page = 'song-now-playing';\n const zone = '';\n const action = tracking.Actions.Play;\n const percent = (state.playedSeconds / duration * 100).toFixed(2);\n\n if (percent > 0 && this.logged === false) {\n const extra = '0';\n\n trackingLogNCT(songKey, type, username, page, zone, action, extra);\n this.logged = true;\n } else if (percent > 25 && this.logged25 === false) {\n const extra = '25';\n\n trackingLogNCT(songKey, type, username, page, zone, action, extra);\n this.logged25 = true;\n } else if (percent > 50 && this.logged50 === false) {\n const extra = '50';\n\n trackingLogNCT(songKey, type, username, page, zone, action, extra);\n this.logged50 = true;\n } else if (percent > 75 && this.logged75 === false) {\n const extra = '75';\n\n trackingLogNCT(songKey, type, username, page, zone, action, extra);\n this.logged75 = true;\n } else if (percent >= 99 && this.logged100 === false) {\n const extra = '100';\n\n trackingLogNCT(songKey, type, username, page, zone, action, extra);\n this.logged100 = true;\n }\n\n if (this.arrayDuration.length < duration - measure.numberTrackAudio) {\n if (this.logViewed === false) {\n trackingLogView(dataType.types.SONG, songKey);\n this.logViewed = true;\n }\n } else {\n const currentTime = Math.ceil(state.playedSeconds ? state.playedSeconds : 0);\n const position = this.arrayDuration.indexOf(currentTime);\n\n if (position > -1) {\n this.arrayDuration.splice(position, 1);\n }\n }\n }\n\n // if (this.state.activeLyrics === false) {\n // return;\n // }\n\n if (this.isDynamicLyric === true) {\n this.checkTimedLyric(Math.floor(state.playedSeconds * 100) / 100 + 1);\n } else if (this.state.dataLyrics.length > 0) {\n this.checkTimedStatic(Math.floor(state.playedSeconds * 100) / 100);\n }\n }\n\n _onDuration = (duration) => {\n this.setState({ duration: duration });\n }\n\n _onPlay = () => {\n this.props.setStateAudio(false);\n }\n\n _onPause = () => {\n const player = this.player.current;\n\n this.props.setStateAudio(true);\n if (player.getCurrentTime() + 1 >= player.getDuration()) {\n this.logged = false;\n this.logged25 = false;\n this.logged50 = false;\n this.logged75 = false;\n this.logged100 = false;\n this.handleEnded();\n }\n }\n\n onClickProgressBar = (event) => {\n const WIDTH_PROGRESS_BAR = convertEmToPixel(90);\n const percent = Number((event.nativeEvent.offsetX) / WIDTH_PROGRESS_BAR).toFixed(2);\n\n this.player.current.seekTo(percent);\n event.preventDefault();\n }\n\n onClickMoreButton = () => {\n const { visibleClass, activeMoreButton, focused } = this.state;\n\n if (activeMoreButton === true) {\n this.setState({\n activeMoreButton: false,\n focused: focused.update('horizontal', v => buttonsBottom.MORE),\n visibleClass: visibleClass\n .update('mainControl', v => 'normal')\n .update('qualityButton', v => 'normal')\n .update('more', v => 'hidden')\n });\n } else {\n this.setState({\n activeMoreButton: true,\n focused: focused.update('horizontal', v => buttonsBottom.MORE),\n visibleClass: visibleClass\n .update('mainControl', v => 'hidden')\n .update('qualityButton', v => 'hidden')\n .update('more', v => 'normal')\n });\n }\n }\n\n onClickLyricButton = () => {\n this.setState({ activeLyrics: !this.state.activeLyrics });\n\n Main.trackEvent(tracking.Screen.NowPlaying, tracking.Actions.Tap, 'Lyrics');\n }\n\n onClickHeartButton = () => {\n const songKey = this.state.currentSong.songKey;\n\n if (this.listFavorite.indexOf(songKey) > -1) {\n return;\n }\n\n const url = `${path.SERVICE_ROOT}${path.ADD_SONG}`;\n const requestType = 'GET';\n const params = `songKeys=${songKey}&`;\n\n this.context.request(url, params, requestType, (data) => {\n this.listFavorite.push(songKey);\n this.setState({\n playlist: this.state.playlist.update('isFavorited', v => true)\n })\n });\n Main.trackEvent(tracking.Screen.AddToCloud, tracking.Actions.Tap, 'AddSong');\n }\n\n onClickShuffleButton = () => {\n this.setState({ isShuffle: !this.state.isShuffle });\n }\n\n onClickRepeatButton = () => {\n const { currentStateRepeat } = this.state;\n\n if (currentStateRepeat === stateRepeat.ALL) {\n this.setState({\n currentStateRepeat: stateRepeat.NONE\n })\n } else {\n this.setState({\n currentStateRepeat: currentStateRepeat + 1\n })\n }\n\n }\n\n onClickPlayPauseButton = () => {\n const { paused, setStateAudio } = this.props;\n setStateAudio(!paused);\n }\n\n onClickPrevButton = () => {\n const { audio, indexAudio } = this.props;\n const { isShuffle } = this.state;\n\n if (audio.get('songKey')) {\n this.player.current.seekTo(0);\n } else {\n if (isShuffle === true) {\n if (this.listPrevious.length === 0) {\n let listSong = audio.get('listSong').slice();\n let songKey = this.state.currentSong.songKey;\n\n if (songKey) {\n let currIndex = findIndex(listSong, ['songKey', songKey]);\n listSong.splice(currIndex, 1);\n }\n\n if (listSong && listSong.length > 0) {\n let arrayTemp = getArrayShuffle(listSong);\n let index = findIndex(listSong, ['songKey', arrayTemp[0].songKey]);\n\n this.setState({\n indexFocusList: index\n })\n this.setIndexNewSong(index);\n }\n } else {\n this.handlePrevShuffle();\n }\n } else {\n let maxLength = audio.get('listSong').length;\n\n this.setIndexNewSong(indexAudio > 0 ? indexAudio - 1 : maxLength - 1);\n }\n }\n }\n\n onClickNextButton = () => {\n const { audio, indexAudio } = this.props;\n const { isShuffle } = this.state;\n\n if (audio.get('songKey')) {\n this.player.current.seekTo(0);\n } else {\n if (isShuffle === true) {\n if (this.listRandom.length === 0) {\n this.resetShuffleMode();\n this.setListRandom();\n this.handlePlayShuffle();\n } else {\n this.handlePlayShuffle();\n }\n } else {\n const maxLength = audio.get('listSong').length;\n\n this.setIndexNewSong(indexAudio < maxLength - 1 ? indexAudio + 1 : 0);\n }\n }\n\n this.logged = false;\n this.logged25 = false;\n this.logged50 = false;\n this.logged75 = false;\n this.logged100 = false;\n }\n\n onClickQualityButton = () => {\n const { activeQuality, visibleClass } = this.state;\n\n if (activeQuality === true) {\n this.setState({\n activeQuality: false,\n visibleClass: visibleClass\n .update('mainControl', v => 'normal')\n .update('moreButton', v => 'normal')\n .update('quality', v => 'hidden')\n });\n } else {\n this.setState({\n activeQuality: true,\n visibleClass: visibleClass\n .update('mainControl', v => 'hidden')\n .update('moreButton', v => 'hidden')\n .update('quality', v => 'normal')\n });\n }\n }\n\n onClickButton128 = () => {\n const { focused, playlist, currentTime } = this.state;\n\n if (playlist.get('quality') !== 0) {\n const element = this.streamURL[0];\n\n this.savedTime = currentTime;\n this.setState({\n focused: focused.update('horizontal', v => buttonsBottom.PLAY),\n currentStream: element.stream,\n playlist: playlist.update('quality', v => 0)\n })\n this.onClickQualityButton();\n\n Main.trackEvent(tracking.Screen.NowPlaying, tracking.Actions.Tap, 'SongQuality');\n } else {\n this.setState({\n focused: focused.update('horizontal', v => buttonsBottom.PLAY)\n })\n this.onClickQualityButton();\n }\n }\n\n onClickButton320 = () => {\n const { userInfo } = this.props;\n const { focused, playlist, currentTime } = this.state;\n\n if (userInfo.size > 0 && userInfo.get('isVIP') === true) {\n for (let index = this.streamURL.length - 1; index >= 0; index--) {\n const element = this.streamURL[index];\n\n this.savedTime = currentTime;\n if (element.type === '320') {\n this.setState({\n focused: focused.update('horizontal', v => buttonsBottom.PLAY),\n currentStream: element.stream,\n playlist: playlist.update('quality', v => index)\n })\n this.onClickQualityButton();\n break;\n }\n }\n\n Main.trackEvent(tracking.Screen.NowPlaying, tracking.Actions.Tap, 'SongQuality');\n }\n }\n\n handleEnded = () => {\n const { currentStateRepeat, isShuffle } = this.state;\n\n if (currentStateRepeat === stateRepeat.ONE) {\n this.player.current.seekTo(0);\n this.props.setStateAudio(false);\n } else {\n const { audio, indexAudio } = this.props;\n\n if (audio.get('songKey')) {\n if (currentStateRepeat === stateRepeat.ALL) {\n this.player.current.seekTo(0);\n this.props.setStateAudio(false);\n return;\n }\n } else {\n if (isShuffle === true) {\n if (this.listRandom.length === 0) {\n this.resetShuffleMode();\n this.setListRandom();\n if (currentStateRepeat === stateRepeat.ALL) {\n this.handlePlayShuffle();\n }\n } else {\n this.handlePlayShuffle();\n }\n } else {\n const maxLength = audio.get('listSong').length;\n\n if (currentStateRepeat === stateRepeat.ALL) {\n this.setIndexNewSong(indexAudio < maxLength - 1 ? indexAudio + 1 : 0);\n } else {\n this.setIndexNewSong(indexAudio < maxLength - 1 ? indexAudio + 1 : maxLength - 1);\n }\n }\n }\n }\n }\n\n handleLeftMainControl = () => {\n const { focused, activeMoreButton, activeQuality, currentSong } = this.state;\n const { userInfo } = this.props;\n const maxRange = activeMoreButton === true ? buttonsBottomMoreActive.REPEAT : buttonsBottom.QUALITY;\n const streamURL = currentSong.streamURL;\n\n if (activeQuality === true) {\n if (streamURL.length > 1) {\n let currIndex = focused.get('horizontal');\n\n if (currIndex === buttonsBottom.QUALITY) {\n this.setState({\n focused: focused.update('horizontal', v => enumStateQuality._128)\n })\n } else if (currIndex === enumStateQuality._128) {\n this.setState({\n focused: focused.update('horizontal', v => enumStateQuality._320)\n })\n } else {\n this.setState({\n focused: focused.update('horizontal', v => buttonsBottom.QUALITY)\n })\n }\n } else {\n this.setState({\n focused: focused.update('horizontal', v => v === enumStateQuality._128 ? buttonsBottom.QUALITY : enumStateQuality._128)\n })\n }\n } else if (activeMoreButton === true) {\n if (focused.get('horizontal') > buttonsBottom.MORE) {\n if (userInfo.size > 0) {\n this.setState({\n focused: focused.update('horizontal', v => v - 1)\n })\n } else {\n this.setState({\n focused: focused.update('horizontal', v => v === buttonsBottomMoreActive.SHUFFLE ? v - 2 : v - 1)\n })\n }\n } else {\n this.setState({\n focused: focused.update('horizontal', v => maxRange)\n })\n }\n } else {\n if (focused.get('horizontal') > buttonsBottom.MORE) {\n this.setState({\n focused: focused.update('horizontal', v => v - 1)\n })\n } else {\n this.setState({\n focused: focused.update('horizontal', v => buttonsBottom.QUALITY)\n })\n }\n }\n }\n\n handleRightMainControl = () => {\n const { focused, activeMoreButton, activeQuality, currentSong } = this.state;\n const { userInfo } = this.props;\n const maxRange = activeMoreButton === true ? buttonsBottomMoreActive.REPEAT : buttonsBottom.QUALITY;\n\n if (activeQuality === true) {\n let streamURL = currentSong.streamURL;\n let currIndex = focused.get('horizontal');\n\n if (streamURL.length > 1) {\n if (currIndex === buttonsBottom.QUALITY) {\n this.setState({\n focused: focused.update('horizontal', v => enumStateQuality._320)\n })\n } else if (currIndex === enumStateQuality._128) {\n this.setState({\n focused: focused.update('horizontal', v => buttonsBottom.QUALITY)\n })\n } else {\n this.setState({\n focused: focused.update('horizontal', v => enumStateQuality._128)\n })\n }\n } else {\n this.setState({\n focused: focused.update('horizontal', v => v === enumStateQuality._128 ? buttonsBottom.QUALITY : enumStateQuality._128)\n })\n }\n } else if (activeMoreButton === true) {\n if (focused.get('horizontal') < maxRange) {\n if (userInfo.size > 0) {\n this.setState({\n focused: focused.update('horizontal', v => v + 1)\n })\n } else {\n this.setState({\n focused: focused.update('horizontal', v => v === buttonsBottomMoreActive.LYRICS ? v + 2 : v + 1)\n })\n }\n } else {\n this.setState({\n focused: focused.update('horizontal', v => buttonsBottom.MORE)\n })\n }\n } else {\n if (focused.get('horizontal') < maxRange) {\n this.setState({\n focused: focused.update('horizontal', v => v + 1)\n })\n } else {\n this.setState({\n focused: focused.update('horizontal', v => buttonsBottom.MORE)\n })\n }\n }\n }\n\n handleEnterMainControl = () => {\n const { focused, activeMoreButton, activeQuality } = this.state;\n\n if (activeMoreButton === true) {\n if (focused.get('horizontal') === buttonsBottom.MORE) {\n this.onClickMoreButton();\n return;\n }\n\n if (focused.get('horizontal') === buttonsBottomMoreActive.LYRICS) {\n this.onClickLyricButton();\n return;\n }\n\n if (focused.get('horizontal') === buttonsBottomMoreActive.HEART) {\n this.onClickHeartButton();\n return;\n }\n\n if (focused.get('horizontal') === buttonsBottomMoreActive.SHUFFLE) {\n this.onClickShuffleButton();\n return;\n }\n\n if (focused.get('horizontal') === buttonsBottomMoreActive.REPEAT) {\n this.onClickRepeatButton();\n return;\n }\n\n } else if (activeQuality === true) {\n const horizon = focused.get('horizontal');\n\n if (horizon === enumStateQuality._128) {\n this.onClickButton128();\n\n } else if (horizon === enumStateQuality._320) {\n this.onClickButton320();\n\n } else if (horizon === buttonsBottom.QUALITY) {\n this.onClickQualityButton();\n }\n } else {\n if (focused.get('horizontal') === buttonsBottom.MORE) {\n this.onClickMoreButton();\n return;\n }\n\n if (focused.get('horizontal') === buttonsBottom.PREV) {\n this.onClickPrevButton();\n return;\n }\n\n if (focused.get('horizontal') === buttonsBottom.PLAY) {\n this.onClickPlayPauseButton();\n return;\n }\n\n if (focused.get('horizontal') === buttonsBottom.NEXT) {\n this.onClickNextButton();\n return;\n }\n\n if (focused.get('horizontal') === buttonsBottom.QUALITY) {\n this.onClickQualityButton();\n return;\n }\n }\n }\n\n _onClickButtonReturn = () => {\n const { activeListSong } = this.state;\n\n if (activeListSong === true) {\n this.onHandleKeyListSong(Control.key.RETURN);\n } else {\n const { setVisibleAudioPlayer, setMainFocus } = this.props;\n const { activeMoreButton, activeQuality, focused } = this.state;\n\n if (activeMoreButton === true) {\n this.setState({\n focused: focused.update('horizontal', v => buttonsBottom.MORE)\n })\n this.onClickMoreButton();\n } else if (activeQuality === true) {\n this.setState({\n focused: focused.update('horizontal', v => buttonsBottom.QUALITY)\n })\n this.onClickQualityButton();\n }\n this.setState({\n focused: focused.update('horizontal', v => buttonsBottom.PLAY)\n })\n setMainFocus(variables.zones.CONTENT);\n setVisibleAudioPlayer(false);\n }\n }\n\n // getter methods for render like getSelectReason() or getFooterContent()\n /**\n * @param {String} playlistKey\n */\n getDetailPlaylist = (playlistKey: String) => {\n const { isCloud } = this.props;\n const url = `${path.SERVICE_ROOT}${path.PLAYLIST}/${playlistKey}`;\n const requestType = 'GET';\n const params = `pageindex=1&pagesize=2000&isCloud=${isCloud}&`;\n\n const processDetailPlaylist = (data) => {\n if (!data) {\n return;\n }\n\n const { setAudio, indexAudio } = this.props;\n\n setAudio(data, indexAudio, isCloud);\n this.getDetailSong(data.listSong[indexAudio].songKey);\n this.resetShuffleMode();\n this.setListRandom(data.listSong[indexAudio].songKey);\n this.setState({\n indexFocusList: indexAudio\n })\n }\n\n this.context.request(url, params, requestType, processDetailPlaylist);\n trackingLogView(dataType.types.PLAYLIST, playlistKey);\n }\n /**\n * @param {String} songKey\n */\n getDetailSong = (songKey: String) => {\n const { isCloud } = this.props;\n const url = `${path.SERVICE_ROOT}${path.SONG}/${songKey}`;\n const requestType = 'GET';\n const params = `isCloud=${isCloud}&`;\n\n this.getSongLyric(songKey);\n this.context.request(url, params, requestType, this.handleDataSong);\n // trackingLogView(dataType.types.SONG, songKey);\n }\n /**\n * @param {String} songKey\n */\n getSongLyric = (songKey: String) => {\n const { isCloud } = this.props;\n const url = `${path.SERVICE_ROOT}${path.SONG_LYRIC}/${songKey}`;\n const requestType = 'GET';\n const params = `isCloud=${isCloud}&`;\n\n this.context.request(url, params, requestType, this.handleDataLyric);\n }\n /**\n * @param {Number} index\n */\n setIndexNewSong = (index) => {\n this.setState({\n indexFocusList: index\n })\n this.props.setIndexAudio(index);\n }\n\n handleDataSong = (data) => {\n const { userInfo, highQuality, setAudio, audio } = this.props;\n const { playlist } = this.state;\n let source = '', quality = '';\n\n if (!data || !data.streamURL || data.streamURL.length === 0) {\n this.onClickNextButton();\n return;\n }\n\n this.streamURL = data.streamURL ? data.streamURL.slice() : [];\n\n if (highQuality === true) {\n if (userInfo.size > 0 && userInfo.get('isVIP') === true) {\n for (let index = this.streamURL.length - 1; index >= 0; index--) {\n const element = this.streamURL[index];\n\n if (element.type !== 'lossless') {\n source = element.stream;\n quality = index;\n break;\n }\n }\n } else {\n for (let index = this.streamURL.length - 1; index >= 0; index--) {\n const element = this.streamURL[index];\n\n if (element.onlyVIP === false) {\n source = element.stream;\n quality = index;\n break;\n }\n }\n }\n } else {\n const element = this.streamURL[0];\n source = element.stream;\n quality = 0;\n }\n\n this.arrayDuration = [];\n this.logViewed = false;\n\n this.logged = false;\n this.logged25 = false;\n this.logged50 = false;\n this.logged75 = false;\n this.logged100 = false;\n\n if (audio.get('songKey')) {\n setAudio(data);\n }\n\n this.setState({\n loading: false,\n currentSong: data,\n currentStream: source,\n playlist: playlist\n .update('quality', v => quality)\n .update('isFavorited', v => this.listFavorite.indexOf(data.songKey) > -1 ? true : false)\n })\n\n const image = data.songCover ? data.songCover : data.image ? data.image : '';\n\n getHighQualityImage(convertToHttpURL(image), (dataResponse) => {\n setMediaSession(\n data.songTitle,\n data.artistName,\n dataResponse,\n () => { },\n this.onClickNextButton,\n this.onClickPrevButton\n )\n })\n }\n\n handleDataLyric = (data) => {\n if (!data) {\n this.listLyric = [];\n this.setState({\n dataLyrics: [],\n indexPageLyric: 0,\n indexSelectedLyric: 0\n })\n return;\n }\n\n if (data.keyDecryptLyric && data.timedLyric && data.keyDecryptLyric.length > 0 && data.timedLyric.length > 0) {\n this.isDynamicLyric = true;\n this.setDynamicLyric(data.timedLyric, data.keyDecryptLyric);\n return;\n }\n\n this.isDynamicLyric = false;\n if (data.content) {\n this.setStaticLyric(data.content);\n return;\n }\n\n this.listLyric = [];\n this.setState({\n dataLyrics: [],\n indexPageLyric: 0,\n indexSelectedLyric: 0\n })\n }\n /**\n * @param {String} path\n * @param {String} key\n */\n setDynamicLyric = (path: Sring, key: Sring) => {\n const requestType = 'GET';\n const params = '';\n\n const cb = (resp, status, xhr) => {\n let a = putils.hexToArray(resp);\n let b = putils.hexToArray(putils.hexFromString(key));\n let c = new arc4();\n c.load(b);\n let d = c.decrypt(a);\n\n this.convertTimedLyric(putils.hexFromArray(d));\n }\n\n ajax.request(path, {\n method: requestType,\n data: params,\n processData: false,\n }).done(cb).fail();\n }\n /**\n * @param {String} data\n */\n setStaticLyric = (data: String) => {\n let array = [];\n\n array = array.concat(data.split('\\n'));\n array = convertArgumentByLength(array);\n\n this.listLyric = array;\n this.totalPageLyric = Math.ceil(array.length / NUMBER_ROWS_LYRIC);\n this.setState({\n indexPageLyric: 0,\n indexSelectedLyric: 0\n })\n this.getListLyricByIndex(0);\n }\n\n convertTimedLyric = (str) => {\n let array = [];\n let arrayLyric = str.split('[');\n let arrayTemp = [];\n let strTemp = '';\n let reg = /[\\n\\s\\t:][:]+$/gi;\n\n if (arrayLyric.length === 0) {\n return;\n }\n\n for (let i = arrayLyric.length - 1; i >= 0; i--) {\n arrayTemp = arrayLyric[i].split(']');\n arrayLyric.splice(i, 1);\n if (arrayTemp[1] !== '') {\n strTemp = arrayTemp[1];\n }\n\n if (typeof (strTemp) !== 'undefined') {\n arrayLyric.push(arrayTemp[0] + ']' + strTemp.replace(reg, ''));\n }\n }\n\n arrayLyric.sort();\n if (arrayLyric[arrayLyric.length - 1].indexOf('Bài hát') > 0 || arrayLyric[arrayLyric.length - 1].indexOf(\"0:0\") === 0) {\n arrayLyric.splice(0, 0, arrayLyric.splice(arrayLyric.length - 1, 1)[0]);\n }\n\n for (let i = 0; i < arrayLyric.length; i++) {\n if (convertStringWithoutTime(arrayLyric[i]) !== '') {\n array.push(convertStringWithoutTime(arrayLyric[i]));\n }\n }\n\n this.listLyric = array;\n this.totalPageLyric = Math.ceil(array.length / NUMBER_ROWS_LYRIC);\n this.setState({\n indexPageLyric: 0,\n indexSelectedLyric: 0\n })\n this.getListLyricByIndex(0);\n }\n\n getListLyricByIndex = (index) => {\n const array = this.listLyric.slice(index * NUMBER_ROWS_LYRIC, (index + 1) * NUMBER_ROWS_LYRIC);\n\n this.setState({\n dataLyrics: array.slice()\n });\n }\n\n checkTimedLyric = (time) => {\n for (let i = 1; i < this.listLyric.length; i++) {\n let strLyric = this.listLyric[i];\n let temp = strLyric.split(\" \");\n\n if (i < this.listLyric.length - 1) {\n if (parseFloat(time) < parseFloat(temp[0])) {\n this.setState({\n indexPageLyric: Math.floor((i - 1) / NUMBER_ROWS_LYRIC),\n indexSelectedLyric: (i - 1) % NUMBER_ROWS_LYRIC\n })\n break;\n }\n } else {\n if (parseFloat(time) > parseFloat(temp[0])) {\n this.setState({\n indexPageLyric: Math.floor(i / NUMBER_ROWS_LYRIC),\n indexSelectedLyric: i % NUMBER_ROWS_LYRIC\n })\n break;\n } else {\n this.setState({\n indexPageLyric: Math.floor((i - 1) / NUMBER_ROWS_LYRIC),\n indexSelectedLyric: (i - 1) % NUMBER_ROWS_LYRIC\n })\n break;\n }\n }\n }\n }\n\n checkTimedStatic = (time) => {\n const { duration, indexPageLyric } = this.state;\n const average = duration / this.totalPageLyric;\n\n if (time > average * (indexPageLyric + 1)) {\n this.setState({\n indexPageLyric: indexPageLyric + 1\n })\n }\n }\n\n getFocusMainControl = (index) => {\n const { focused } = this.state;\n\n if (focused.get('vertical') === positions.MAIN && focused.get('horizontal') === index) {\n return 'focused';\n } else {\n return ''\n }\n }\n\n resetShuffleMode = () => {\n this.listPrevious = [];\n this.listRandom = [];\n }\n\n setListRandom = (songKey) => {\n const { audio } = this.props;\n\n if (!audio.get('listSong') || audio.get('listSong').length === 0) {\n return;\n }\n\n if (this.state.isShuffle === true) {\n let listSong = audio.get('listSong').slice();\n\n if (songKey) {\n let currIndex = findIndex(listSong, ['songKey', songKey]);\n listSong.splice(currIndex, 1);\n }\n\n if (listSong && listSong.length > 0) {\n const { currentSong } = this.state;\n const temp = getArrayShuffle(listSong);\n\n if (currentSong.songKey === temp[0].songKey) {\n this.setListRandom(songKey);\n } else {\n this.listRandom = temp;\n }\n }\n }\n }\n\n handlePlayShuffle = () => {\n const { audio } = this.props;\n const nextKey = this.listRandom[0].songKey;\n const listSong = audio.get('listSong');\n const index = findIndex(listSong, ['songKey', nextKey]);\n const temp = this.listRandom[0];\n\n this.setIndexNewSong(index);\n this.setState({\n indexFocusList: index\n })\n this.listRandom.shift();\n this.listPrevious.unshift(temp);\n }\n\n handlePrevShuffle = () => {\n const { audio } = this.props;\n const prevKey = this.listPrevious[0].songKey;\n const temp = this.listPrevious[0];\n const listSong = audio.get('listSong');\n const index = findIndex(listSong, ['songKey', prevKey]);\n\n this.setIndexNewSong(index);\n this.setState({\n indexFocusList: index\n })\n this.listPrevious.shift();\n this.listRandom.unshift(temp);\n }\n\n getIconRepeat = () => {\n const { currentStateRepeat } = this.state;\n\n if (currentStateRepeat === stateRepeat.NONE) {\n return 'ic_continue_normal';\n } else if (currentStateRepeat === stateRepeat.ONE) {\n return 'ic_repeat_one_normal';\n }\n return 'ic_repeat_normal';\n }\n\n getIconByStateQuality = () => {\n const { playlist, activeQuality, currentSong } = this.state;\n const stateQuality = playlist.get('quality');\n const streamURL = currentSong ? currentSong.streamURL : null;\n\n if (!streamURL) {\n return 'ic_quality_128_line';\n }\n\n if (activeQuality === true) {\n return 'ic_more_normal';\n }\n\n if (stateQuality === enumStateQuality._320) {\n return 'ic_quality_320_line';\n }\n return 'ic_quality_128_line'\n }\n\n getStateButtonHQ = () => {\n const { userInfo } = this.props;\n\n if (userInfo.size > 0 && userInfo.get('isVIP') === true) {\n return '';\n }\n return 'disable';\n }\n\n getState320ByStream = () => {\n if (this.streamURL && this.streamURL.length < 2) {\n return 'hidden';\n }\n return ''\n }\n\n checkConnection = () => {\n const { setTypePopup, setWarning, language, setStateAudio } = this.props;\n const requestType = 'GET';\n const params = ``;\n\n ajax.request('https://stc-id.nixcdn.com/v11/images/logo.png?cache=none', {\n method: requestType,\n data: params,\n processData: false,\n })\n .done(() => {\n if (this.errorConnection === true) {\n if (this.props.visiblePlayer === true) {\n setTypePopup('');\n setWarning('');\n }\n setStateAudio(false);\n\n this.errorConnection = false;\n }\n })\n .fail(() => {\n this.errorConnection = true;\n\n if (this.props.visiblePlayer === true) {\n setWarning(language.Lost_Connection);\n setTypePopup(dataType.popup.WARNING);\n }\n setStateAudio(true);\n })\n }\n\n // optional render methods like renderNavigation() or renderProfilePicture()\n renderListSong = () => {\n const { audio, indexAudio } = this.props;\n const focused = this.state.indexFocusList;\n\n if (this.state.activeListSong === true) {\n return (\n \n Loading....}>\n \n \n Loading....}>\n \n \n \n )\n }\n }\n\n renderInfoCenter = () => {\n const { activeLyrics, dataLyrics, indexSelectedLyric, currentSong } = this.state;\n\n if (activeLyrics === true) {\n return (\n \n )\n } else {\n return (\n \n )\n }\n }\n\n renderLoading = () => {\n const { loading } = this.state;\n\n if (loading === true) {\n return \n }\n return \n }\n\n render() {\n const { visiblePlayer, audio, paused, indexAudio, userInfo, language } = this.props;\n const {\n currentTime, duration, buffer, playlist,\n activeMoreButton, activeLyrics, isShuffle, visibleClass,\n focused, currentStream, currentSong\n } = this.state;\n const hiddenHeartBtn = userInfo.size > 0 ? 'normal' : 'hidden';\n const focusProgress = focused.get('vertical') === positions.PROGRESS ? 'focused' : 'normal';\n\n return (\n \n
\n
\n\n
\n\n {this.renderInfoCenter()}\n\n
\n
\n
{secondsToTime(currentTime)}
\n
\n
{secondsToTime(duration)}
\n
\n
\n
\n\n {\n audio.get('playlistTitle')\n ?\n
\n
\n
\n
\n {'Playlist: '}{`${audio.get('playlistTitle')}`}\n
\n
\n
\n {`${language.Listening}: ${indexAudio + 1} / ` +\n `${audio.get('listSong') ? audio.get('listSong').length : audio.get('totalSongs')}`}\n
\n
\n
\n
\n :\n
\n }\n\n
\n
\n\n
\n\n
\n\n
\n\n
\n
\n
\n
\n
\n
\n {this.renderListSong()}\n
\n\n \n {this.renderLoading()}\n \n )\n }\n}\n\nAudioPlayer.contextTypes = {\n request: PropTypes.func,\n}\n\nconst mapStateToProps = (state) => ({\n elFocused: state.mainReducer.get('elFocused'),\n\n audio: state.audioReducer.get('data'),\n indexAudio: state.audioReducer.get('index'),\n visiblePlayer: state.audioReducer.get('visible'),\n paused: state.audioReducer.get('paused'),\n isCloud: state.audioReducer.get('isCloud'),\n\n userInfo: state.userReducer,\n\n highQuality: state.settingsReducer.get('highQuality'),\n autoplay: state.settingsReducer.get('autoplay'),\n language: state.settingsReducer.get('language'),\n\n typePopup: state.popupReducer\n})\n\nconst mapDispatchToProps = (dispatch) => ({\n setMainFocus: (payload) => { dispatch(setMainFocusAction(payload)) },\n\n setTypePopup: (payload) => { dispatch(setTypePopupAction(payload)) },\n setWarning: (payload) => { dispatch(setWarningAction(payload)) },\n\n setAudio: (payload, indexAudio, isCloud) => { dispatch(setAudioAction(payload, indexAudio, isCloud)) },\n setIndexAudio: (payload) => { dispatch(setIndexAudioAction(payload)) },\n setVisibleAudioPlayer: (payload) => { dispatch(setVisibleAudioAction(payload)) },\n setStateAudio: (payload) => { dispatch(setStateAudioAction(payload)) },\n\n clearAudioData: () => { dispatch(clearAudioDataAction()) },\n})\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(AudioPlayer);\n\nclass HeaderPlaylist extends React.PureComponent {\n render() {\n const { data, text } = this.props;\n const hidden = !data ? true : false;\n\n if (hidden === true) {\n return \n }\n\n return (\n \n
\n
\n {`${text}${data ? data.songTitle : ''}`}\n
\n
\n
\n
\n {data ? data.artistName : ''}\n
\n
\n
\n
\n
\n
\n
}>\n
\n ()} />\n ()} />\n ()} />\n ()} />\n ()} />\n {/* ()} /> */}\n {/* ()} /> */}\n {/* ()} /> */}\n ()} />\n ()} />\n ()} />\n \n \n\n
\n
\n
\n {this.renderVideoPlayer()}\n {this.renderAudioPlayer()}\n {this.renderPopup()}\n\n {/*
{\n if (online) {\n return \n } else {\n return \n }\n }}\n /> */}\n