fix iOS bug
This commit is contained in:
jinhojang6
parent
35ae21a77d
commit
9dc3350f3a
|
|
@ -24,6 +24,7 @@
|
|||
"node-sass": "^4.12.0",
|
||||
"react": "^16.8.6",
|
||||
"react-dom": "^16.8.6",
|
||||
"react-h5-audio-player": "^2.3.1",
|
||||
"react-markdown": "^4.3.1",
|
||||
"react-progressive-image": "^0.6.0",
|
||||
"react-redux": "^7.0.3",
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
import React, { Component, Fragment } from 'react'
|
||||
import Volume from './Volume.component'
|
||||
import Sound from 'react-sound'
|
||||
import { connect } from 'react-redux'
|
||||
import { Link } from 'react-router-dom'
|
||||
import ProgressBar from './ProgressBar.component'
|
||||
import SoundWrapper from './SoundWrapper.component'
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import { convertSeconds } from '../utils'
|
||||
import {
|
||||
skip,
|
||||
|
|
@ -14,10 +10,15 @@ import {
|
|||
showVolume,
|
||||
hideVolume
|
||||
} from '../actions/player'
|
||||
import AudioPlayer from 'react-h5-audio-player';
|
||||
|
||||
import 'react-h5-audio-player/lib/styles.css';
|
||||
import '../css/Controls.styles.css'
|
||||
|
||||
class Controls extends Component {
|
||||
|
||||
state = { showing: true };
|
||||
|
||||
// Pause, skip forward / back
|
||||
keyboardShortcuts = e => {
|
||||
switch (e.which) {
|
||||
|
|
@ -105,6 +106,14 @@ class Controls extends Component {
|
|||
componentDidMount() {
|
||||
// Set media session for mobile notifications/lockscreen display
|
||||
this.setMediaSession()
|
||||
const { pathname } = this.props.location;
|
||||
console.log(pathname)
|
||||
console.log(screen.width)
|
||||
|
||||
// if (pathname !== '/nowplaying') {
|
||||
// this.setState({ showing: false });
|
||||
// console.log(this.state.showing)
|
||||
// }
|
||||
|
||||
// Keyboard controls
|
||||
document.addEventListener('keyup', this.handleOnKeyUp, false)
|
||||
|
|
@ -139,60 +148,21 @@ class Controls extends Component {
|
|||
volumeVisible
|
||||
} = this.props
|
||||
|
||||
const podcastLink = `/podcast/${podcast.replace(/ /gi, '_')}`
|
||||
console.log(track)
|
||||
|
||||
return track.title.length > 0 ? (
|
||||
<Fragment>
|
||||
<SoundWrapper />
|
||||
|
||||
{volumeVisible && <Volume theme={theme} />}
|
||||
|
||||
<div className={`Controls-player ${theme}`}>
|
||||
<ProgressBar wrapperPosition='absolute' />
|
||||
|
||||
<Link to={podcastLink}>
|
||||
<img className='Controls-img' src={image} alt='podcast cover' />
|
||||
</Link>
|
||||
|
||||
<div className='Controls-title'>
|
||||
<h6 className='Controls-title-podcast'>
|
||||
<Link to={podcastLink}>{podcast}</Link>
|
||||
</h6>
|
||||
<h5 className='Controls-title-track'>
|
||||
{' '}
|
||||
{track.title.length > 50
|
||||
? track.title.substring(0, 50) + '...'
|
||||
return (
|
||||
<div style={{visibility: this.state.showing ? 'visible' : 'hidden' }}>
|
||||
<div className="title">
|
||||
{track.title.length > 35
|
||||
? track.title.substring(0, 35) + '...'
|
||||
: track.title}
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
<div className='Controls-btns'>
|
||||
<span className='time'>{time}</span>
|
||||
<button onClick={() => skip(-5000)}>
|
||||
<i className='material-icons'>replay_5</i>
|
||||
</button>
|
||||
|
||||
<button onClick={pauseAudio}>
|
||||
{playStatus == Sound.status.PLAYING ? (
|
||||
<i className='material-icons paused'>pause</i>
|
||||
) : (
|
||||
<i className='material-icons'>play_arrow</i>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button onClick={stopAudio}>
|
||||
<i className='material-icons'>stop</i>
|
||||
</button>
|
||||
|
||||
<button onClick={() => skip(10000)}>
|
||||
<i className='material-icons'>forward_10</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
) : (
|
||||
''
|
||||
<AudioPlayer
|
||||
src={track.src}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -206,7 +176,7 @@ const mapStateToProps = state => ({
|
|||
time: convertSeconds(state.player.position / 1000)
|
||||
})
|
||||
|
||||
export default connect(
|
||||
export default withRouter(connect(
|
||||
mapStateToProps,
|
||||
{ pauseAudio, stopAudio, skip, showVolume, hideVolume, setVolume }
|
||||
)(Controls)
|
||||
)(Controls))
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
import React, { Component } from 'react'
|
||||
import Sound from 'react-sound'
|
||||
import { connect } from 'react-redux'
|
||||
import {
|
||||
handlePlay,
|
||||
setLoading,
|
||||
handleFinishedPlaying
|
||||
} from '../actions/player'
|
||||
|
||||
class SoundWrapper extends Component {
|
||||
handleSetLoading = () => {
|
||||
this.props.setLoading(false)
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps) {
|
||||
if (
|
||||
nextProps.position !== this.props.position ||
|
||||
nextProps.playStatus !== this.props.playStatus
|
||||
) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
track,
|
||||
volume,
|
||||
onError,
|
||||
position,
|
||||
playStatus,
|
||||
handlePlay,
|
||||
handleFinishedPlaying
|
||||
} = this.props
|
||||
|
||||
return (
|
||||
<Sound
|
||||
url={track}
|
||||
volume={volume}
|
||||
onError={onError}
|
||||
onPlaying={handlePlay}
|
||||
playStatus={playStatus}
|
||||
playFromPosition={position}
|
||||
onLoad={this.handleSetLoading}
|
||||
onResume={this.handleSetLoading}
|
||||
onFinishedPlaying={handleFinishedPlaying}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
volume: state.player.volume,
|
||||
track: state.player.track.src,
|
||||
position: state.player.position,
|
||||
playStatus: state.player.playStatus
|
||||
})
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
{ handlePlay, handleFinishedPlaying, setLoading }
|
||||
)(SoundWrapper)
|
||||
|
|
@ -65,7 +65,62 @@
|
|||
color: #888;
|
||||
}
|
||||
|
||||
.rhap_container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 240px;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
padding-right: 260px;
|
||||
background-color: #2b2b2b;
|
||||
}
|
||||
|
||||
.rhap_time {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: fixed;
|
||||
bottom: 90px;
|
||||
padding: 5px;
|
||||
background-color: #6d6d6d;
|
||||
height: 30px;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
left: 240px;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
*:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
|
||||
.rhap_container {
|
||||
position: fixed;
|
||||
bottom: 60px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
padding-right: 20px;
|
||||
background-color: #2b2b2b;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: fixed;
|
||||
bottom: 150px;
|
||||
padding: 5px;
|
||||
background-color: #6d6d6d;
|
||||
height: 30px;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
left: 0px;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.Controls-player {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,48 +34,23 @@ class NowPlaying extends Component {
|
|||
</i>
|
||||
|
||||
<div className='NowPlaying-img-wrapper'>
|
||||
{podcastLoading && <Loader />}
|
||||
<ProgressiveImage src={img} placeholder={podcastImage}>
|
||||
{src => (
|
||||
<img
|
||||
src={src}
|
||||
alt='podcast image'
|
||||
className={podcastLoading ? 'blur' : undefined}
|
||||
/>
|
||||
)}
|
||||
</ProgressiveImage>
|
||||
</div>
|
||||
|
||||
<div className='NowPlaying-info'>
|
||||
<ProgressBar width='75%' wrapperPosition='relative' />
|
||||
<Link to={`/podcast/${podcast.replace(/ /g, '_')}`}>
|
||||
<h4>{podcast}</h4>
|
||||
</Link>
|
||||
<h3>{title}</h3>
|
||||
</div>
|
||||
|
||||
<div className='NowPlaying-controls'>
|
||||
<i
|
||||
className='material-icons'
|
||||
onClick={() => this.props.skip(-5000)}
|
||||
>
|
||||
replay_5
|
||||
</i>
|
||||
<i
|
||||
onClick={this.props.pauseAudio}
|
||||
className='material-icons play-btn'
|
||||
>
|
||||
{playStatus === Sound.status.PAUSED
|
||||
? 'play_circle_outline'
|
||||
: 'pause_circle_outline'}
|
||||
</i>
|
||||
<i
|
||||
className='material-icons'
|
||||
onClick={() => this.props.skip(10000)}
|
||||
>
|
||||
forward_10
|
||||
</i>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
) : (
|
||||
<p className='middle'>
|
||||
|
|
|
|||
22
yarn.lock
22
yarn.lock
|
|
@ -787,6 +787,18 @@
|
|||
resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.3.tgz#f060bf6eaafae4d56a7dac618980838b0696e2ab"
|
||||
integrity sha512-FmuxfCuolpLl0AnQ2NHSzoUKWEJDFl63qXjzdoWBVyFCXzMGm1spBzk7LeHNoVCiWCF7mRVms9e6jEV9+MoPbg==
|
||||
|
||||
"@iconify/icons-mdi@^1.0.46":
|
||||
version "1.0.65"
|
||||
resolved "https://registry.yarnpkg.com/@iconify/icons-mdi/-/icons-mdi-1.0.65.tgz#33790f803a3e89be3e3a3c282ae864ca1c6b2518"
|
||||
integrity sha512-A18eRy8+5a6Zu1LkElJPMZHArukaeehtma6fGnOLV1tuHzTiPYk+KnWeYLV4b2TZ9CCirxoYwnfnEtALi53wkQ==
|
||||
|
||||
"@iconify/react@^1.1.1":
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@iconify/react/-/react-1.1.1.tgz#38526508f722e0b617723d79209bb1e6d8c59c61"
|
||||
integrity sha512-BRbPW/vkyWi6n2dHx4O8Cp0RKeI4KsxieLZ+UcyknCkk1IVxii5IassCIKHJ3jWB6s6uLAWq5EnHJniI7er9+w==
|
||||
dependencies:
|
||||
react "^16.8.3"
|
||||
|
||||
"@mrmlnc/readdir-enhanced@^2.2.1":
|
||||
version "2.2.1"
|
||||
resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
|
||||
|
|
@ -6191,6 +6203,14 @@ react-dom@^16.8.6:
|
|||
prop-types "^15.6.2"
|
||||
scheduler "^0.18.0"
|
||||
|
||||
react-h5-audio-player@^2.3.1:
|
||||
version "2.3.1"
|
||||
resolved "https://registry.yarnpkg.com/react-h5-audio-player/-/react-h5-audio-player-2.3.1.tgz#cceba719850160932c1274ddfa6202bef1a1d861"
|
||||
integrity sha512-Pm2VpsfcdWV6oGgdm6G41Besgkf/i5+K9hAM65HuCBt+WOgWMsNvy8ZKN1+mh+0GjFDu/sdrQ+FM/Zs0De730w==
|
||||
dependencies:
|
||||
"@iconify/icons-mdi" "^1.0.46"
|
||||
"@iconify/react" "^1.1.1"
|
||||
|
||||
react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6, react-is@^16.9.0:
|
||||
version "16.12.0"
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
|
||||
|
|
@ -6290,7 +6310,7 @@ react-sound@^1.2.0:
|
|||
prop-types "^15.5.7"
|
||||
soundmanager2 "^2.97.20170602"
|
||||
|
||||
react@^16.8.6:
|
||||
react@^16.8.3, react@^16.8.6:
|
||||
version "16.12.0"
|
||||
resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"
|
||||
integrity sha512-fglqy3k5E+81pA8s+7K0/T3DBCF0ZDOher1elBFzF7O6arXJgzyu/FW+COxFvAWXJoJN9KIZbT2LXlukwphYTA==
|
||||
|
|
|
|||
Loading…
Reference in New Issue