| 1 |
- {"version":3,"sources":["../../../src/components/AudioPlayer/index.js"],"names":["dayjs","extend","durationPlugin","utcPlugin","AudioPlayer","props","state","duration","currentDuration","isPlaying","player","src","oncanplay","setState","event","target","onended","onpause","onplay","ontimeupdate","currentTime","prevProps","ref","display","pause","play","value","utc","asMilliseconds","format","React","Component"],"mappings":"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","file":"index.js","sourcesContent":["import React from 'react';\nimport { Slider, Icon } from 'antd';\nimport dayjs from 'dayjs';\nimport durationPlugin from 'dayjs/plugin/duration';\nimport utcPlugin from 'dayjs/plugin/utc';\nimport './index.less';\n\ndayjs.extend(durationPlugin);\ndayjs.extend(utcPlugin);\n\nclass AudioPlayer extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n duration: 0,\n currentDuration: 0,\n isPlaying: false,\n };\n }\n\n componentDidMount() {\n if (this.player) {\n const { src } = this.props;\n this.player.oncanplay = event => this.setState({ duration: event.target.duration });\n this.player.onended = () => this.setState({ isPlaying: false, currentDuration: 0 });\n this.player.onpause = () => this.setState({ isPlaying: false });\n this.player.onplay = () => this.setState({ isPlaying: true });\n this.player.ontimeupdate = event =>\n this.setState({ currentDuration: event.target.currentTime });\n this.player.src = src;\n }\n }\n\n componentDidUpdate(prevProps) {\n if (this.props.src !== prevProps.src) {\n this.player.oncanplay = event => this.setState({ duration: event.target.duration });\n this.player.onended = () => this.setState({ isPlaying: false, currentDuration: 0 });\n this.player.onpause = () => this.setState({ isPlaying: false });\n this.player.onplay = () => this.setState({ isPlaying: true });\n this.player.ontimeupdate = event =>\n this.setState({ currentDuration: event.target.currentTime });\n this.player.src = this.props.src;\n }\n }\n\n render() {\n const { currentDuration, isPlaying, duration } = this.state;\n return (\n <div className=\"comment-item-speak-audio-container\">\n {/* eslint-disable-next-line jsx-a11y/media-has-caption */}\n <audio\n ref={ref => {\n this.player = ref;\n }}\n style={{ display: 'none' }}\n />\n <span\n className=\"icon\"\n onClick={() => this.player && (isPlaying ? this.player.pause() : this.player.play())}\n >\n {isPlaying ? (\n <Icon className=\"pause\" type=\"pause\" />\n ) : (\n <i className=\"schedule schedule-icon_image_audio\" />\n )}\n </span>\n <Slider\n step={0.001}\n className=\"slider\"\n tooltipVisible={false}\n value={currentDuration}\n max={duration}\n onChange={value => {\n if (this.player) {\n this.player.currentTime = value;\n }\n }}\n />\n <span className=\"time\">\n {dayjs.utc(dayjs.duration(currentDuration, 'seconds').asMilliseconds()).format('mm:ss')}/\n {dayjs.utc(dayjs.duration(duration, 'seconds').asMilliseconds()).format('mm:ss')}\n </span>\n </div>\n );\n }\n}\n\nexport default AudioPlayer;\n"]}
|
