ReactNativeYoutube/VideoDetails.js at master · pierreco/ReactNativeYoutube · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
'use strict';

var React = require('react-native');

var {
    StyleSheet,
    Text,
    ScrollView,
    View,
    Component,
    Image,
    WebView
   } = React;

var styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        marginTop: 0
    },
    description: {
        padding: 10,
        fontSize: 15,
        color: '#656565'
    },
    frame: {
        paddingBottom: 50,
        height: 200
    },
    noResultsText: {
        marginTop: 70,
        marginBottom:0,
        color: '#000000',
    }
});

class VideoDetails extends Component {

    renderLoading() {
        console.log('## webView: loading()');
        return (
            <View style={[styles.container, styles.centerText]}>
                <Text style={styles.noResultsText}>Loading video...</Text>
            </View>
        );
    }

    render() {
        var video = this.props.video;
        var urlVideo = 'https://www.youtube.com/embed/' + video.snippet.resourceId.videoId  + '?autoplay=1';
        var description = (typeof video.snippet.description !== 'undefined') ? video.snippet.description : '';
        return (
            <ScrollView style={styles.container}
                vertical={true}
                contentInset={{top: 0}}>
                 <WebView
                        style={styles.frame}
                        url={urlVideo}
                        renderLoading={this.renderLoading}
                        renderError={this.renderError}
                        automaticallyAdjustContentInsets={false}/>
               <Text style={styles.description}>{description}</Text>
            </ScrollView>
        );
    }
    renderLoading() {
        console.log('## webView: loading()');
        return (
            <View style={[styles.container, styles.centerText]}>
                <Text style={styles.noResultsText}>Loading video...</Text>
            </View>
        );
    }

    renderError() {
        return (
            <View style={[styles.container, styles.centerText]}>
                <Text style={styles.noResultsText}>Video not found - 404</Text>
            </View>
        );
    }
}

module.exports = VideoDetails;