Skip to content

Commit

Permalink
优化视频播放器功能
Browse files Browse the repository at this point in the history
  • Loading branch information
@guangqiang-liu
guangqiang-liu committed Oct 18, 2017
1 parent 80ef496 commit 6b3e555
Show file tree
Hide file tree
Showing 9 changed files with 88 additions and 41 deletions.
Binary file modified android/app/src/main/assets/fonts/iconfont.ttf
View file
Binary file not shown.
1 change: 0 additions & 1 deletion index.android.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
* https://github.com/facebook/react-native
* @flow
*/

import { AppRegistry } from 'react-native'

// @todo remove when RN upstream is fixed
Expand Down
1 change: 0 additions & 1 deletion index.ios.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
* https://github.com/facebook/react-native
* @flow
*/

import { AppRegistry } from 'react-native'

// @todo remove when RN upstream is fixed
Expand Down
Binary file modified ios/one/fonts/iconfont.ttf
View file
Binary file not shown.
Binary file modified src/assets/fonts/iconfont.ttf
View file
Binary file not shown.
114 changes: 79 additions & 35 deletions src/components/pages/movie/moviePlayer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@ export default class MoviePlayer extends Component {
paused: false,
playIcon: 'music_paused_o',
isTouchedScreen: true,
modalVisible: true
modalVisible: true,
isLock: false
}
}

Expand Down Expand Up @@ -124,14 +125,13 @@ export default class MoviePlayer extends Component {
}

render() {
const {orientation} = this.state
const {orientation, isLock} = this.state
const {url, title} = this.props
return (
<TouchableOpacity
style={[styles.movieContainer, {height: this.state.orientation === 'PORTRAIT' ? playerHeight : deviceInfo.deviceWidth,
marginTop: this.state.orientation === 'PORTRAIT' ? Platform.OS === 'ios' ? 20 : 0 : 0, }]}
onPress={() => this.setState({isTouchedScreen: !this.state.isTouchedScreen})}
>
style={[styles.movieContainer, {height: orientation === 'PORTRAIT' ? playerHeight : deviceInfo.deviceWidth,
marginTop: orientation === 'PORTRAIT' ? Platform.OS === 'ios' ? 20 : 0 : 0, }]}
onPress={() => this.setState({isTouchedScreen: !this.state.isTouchedScreen})}>
<Video source={{uri: url}}
ref={ref => this.player = ref}
rate={this.state.rate}
Expand All @@ -151,27 +151,70 @@ export default class MoviePlayer extends Component {
onError={(data) => this.videoError(data)}
onBuffer={(data) => this.onBuffer(data)}
onTimedMetadata={(data) => this.onTimedMetadata(data)}
style={styles.backgroundVideo}
style={[styles.videoPlayer]}
/>
<View style={styles.navContentStyle}>
<View style={{flexDirection: 'row', alignItems: commonStyle.center}}>
<TouchableOpacity style={{backgroundColor: commonStyle.clear}}
onPress={orientation === 'PORTRAIT' ? () => Actions.pop() : Orientation.lockToPortrait}
{
!isLock ?
<View style={styles.navContentStyle}>
<View style={{flexDirection: 'row', alignItems: commonStyle.center, flex: 1}}>
<TouchableOpacity
style={{backgroundColor: commonStyle.clear}}
onPress={orientation === 'PORTRAIT' ? () => Actions.pop() : Orientation.lockToPortrait}>
<Icon name={'oneIcon|nav_back_o'} size={18} color={commonStyle.white}/>
</TouchableOpacity>
<Text style={{backgroundColor: commonStyle.clear, color: commonStyle.white, marginLeft: 10}}>{title}</Text>
</View>
<View style={{flexDirection: 'row', alignItems: commonStyle.center, justifyContent: commonStyle.between}}>
<TouchableOpacity
style={styles.navToolBar}
onPress={() => alert('切换电视！')}>
<Icon name={'oneIcon|tv_o'} size={20} color={commonStyle.white}/>
</TouchableOpacity>
<TouchableOpacity
style={styles.navToolBar}
onPress={() => alert('开启VR！')}>
<Icon name={'oneIcon|video_o'} size={20} color={commonStyle.white}/>
</TouchableOpacity>
{
orientation !== 'PORTRAIT' ?
<View style={{flexDirection: commonStyle.row, alignItems: commonStyle.center}}>
<TouchableOpacity
style={[styles.navToolBar, {borderColor: commonStyle.white, borderWidth: 0.5, padding: 3}]}
onPress={() => alert('开启弹幕！')}>
<Text style={{color: commonStyle.white, fontSize: 12}}>弹</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.navToolBar}
onPress={() => alert('分享！')}>
<Icon name={'oneIcon|share_dot_o'} size={20} color={commonStyle.white}/>
</TouchableOpacity>
<TouchableOpacity
style={styles.navToolBar}
onPress={() => alert('下载！')}>
<Icon name={'oneIcon|download_o'} size={20} color={commonStyle.white}/>
</TouchableOpacity>
<TouchableOpacity
style={styles.navToolBar}
onPress={() => alert('设置画面！')}>
<Icon name={'oneIcon|more_v_o'} size={20} color={commonStyle.white}/>
</TouchableOpacity>
</View> : null
}
</View>
</View> : <View style={{height: commonStyle.navContentHeight, backgroundColor: commonStyle.black}}/>
}
{
orientation !== 'PORTRAIT' ?
<TouchableOpacity
style={{marginHorizontal: 10, backgroundColor: commonStyle.clear, width: 30, height: 30, alignItems: commonStyle.center, justifyContent: commonStyle.center}}
onPress={() => this.setState({isLock: !this.state.isLock})}
>
<Icon name={'oneIcon|nav_back_o'} size={18} color={commonStyle.white}/>
</TouchableOpacity>
<Text style={{backgroundColor: commonStyle.clear, color: commonStyle.white, marginLeft: 10}}>{title}</Text>
</View>
<TouchableOpacity
style={{backgroundColor: commonStyle.clear}}
onPress={() => alert('切换电视！')}
>
<Icon name={'oneIcon|tv_o'} size={20} color={commonStyle.white}/>
</TouchableOpacity>
</View>
<Icon name={`oneIcon|${this.state.isLock ? 'locked_o' : 'unlocked_o'}`} size={20} color={commonStyle.white} style={{backgroundColor: commonStyle.blue}}/>
</TouchableOpacity> : null
}
{
this.state.isTouchedScreen ?
<View style={styles.toolBarStyle}>
this.state.isTouchedScreen && !isLock ?
<View style={[styles.toolBarStyle]}>
<TouchableOpacity onPress={() => this.play()}>
<Icon name={`oneIcon|${this.state.playIcon}`} size={18} color={commonStyle.white}/>
</TouchableOpacity>
Expand Down Expand Up @@ -200,9 +243,8 @@ export default class MoviePlayer extends Component {
<Icon name={'oneIcon|shrink_o'} size={18} color={commonStyle.white}/>
</TouchableOpacity>
}
</View> : null
</View> : <View style={{height: 40}}/>
}

{this.renderModal()}
</TouchableOpacity>
)
Expand All @@ -213,31 +255,29 @@ const styles = StyleSheet.create({
movieContainer: {
justifyContent: 'space-between'
},
backgroundVideo: {
videoPlayer: {
position: 'absolute',
top: 0,
top: 44,
left: 0,
bottom: 0,
right: 0,
},
navBarStyle: {
height: 64,
},
navContentStyle: {
height: 44,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
marginHorizontal: 10,
paddingHorizontal: 10,
backgroundColor: commonStyle.black
},
toolBarStyle: {
height: 30,
backgroundColor: commonStyle.black,
opacity: 0.5,
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 10,
justifyContent: 'space-around'
justifyContent: 'space-around',
marginTop: 10,
height: 30,
},
timeStyle: {
width: 35,
Expand All @@ -262,5 +302,9 @@ const styles = StyleSheet.create({
marginTop: 20,
alignItems: 'center',
justifyContent: 'center',
},
navToolBar: {
backgroundColor: commonStyle.clear,
marginHorizontal: 5
}
})
3 changes: 2 additions & 1 deletion src/containers/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {dispatch} from '../utils/venilog/dispatchLog'
import type from '../constants/actionType'
import {commonStyle} from '../utils/commonStyle'

// DemoPages
import Launch from '../components/pages/demoPage/Launch'
import Register from "../components/pages/demoPage/Register"
import Login from "../components/pages/demoPage/Login"
Expand Down Expand Up @@ -194,7 +195,7 @@ const scenes = Actions.create(
<Scene key="webView" hideNavBar component={WebView}/>

{/** ############### demo组件 ############### **/}

<Scene key="register" title="Register" component={Register}/>

<Scene key="register2" title="Register2" component={Register}/>
Expand Down
1 change: 0 additions & 1 deletion src/utils/icon/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
* Created by guangqiang on 2017/9/14.
*/
import React, {Component, PropTypes} from 'react'
import {View} from 'react-native'
import FontAwesome from 'react-native-vector-icons/FontAwesome'
import {OIcon} from './oneIconFont'

Expand Down
9 changes: 7 additions & 2 deletions src/utils/icon/oneIconFont.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const glyphMap = {
downLoad_o: 58906,
menu_h_o: 58987,
music_pre_o: 58883,
music_next_o:58890,
music_next_o: 58890,
scale_o: 58903,
reply_o: 58884,
back_s_o: 58885,
Expand All @@ -40,7 +40,12 @@ const glyphMap = {
play_cycle_o: 58907,
comment_dot_o: 58887,
tv_o: 58913,
shrink_o: 58896
shrink_o: 58896,
unlocked_o: 58898,
locked_o: 58921,
download_o: 58901,
share_dot_o: 58915,
ex_mark_o: 58897
}

const OIcon = createIconSet(glyphMap, 'iconfont', 'iconfont.ttf')
Expand Down

0 comments on commit 6b3e555

Please sign in to comment.