[text] React

Viewer

*** This page was generated with the meta tag "noindex, nofollow". This happened because you selected this option before saving or the system detected it as spam. This means that this page will never get into the search engines and the search bot will not crawl it. There is nothing to worry about, you can still share it with anyone.

copy download embed printName: React

import React, {useEffect, useRef, useState} from 'react';
import {
Text,
View,
StyleSheet,
ScrollView,
SafeAreaView,
TouchableOpacity,
Touchable,
Linking,
Dimensions,
Share,
} from 'react-native';
import {theme, theme as Theme} from '../constants/theme';
import CustomHeader from '../components/CustomHeader';
import {apiRadioBase} from '../api/endpoints';
import {
API_RADIO_STREAM_URL,
URL_PROGRAMS,
URL_PROGRAMMING,
} from '../api/index';
import Marquee from '../components/shared/marquee';
import Icon from '../components/shared/Icon';
import TrackPlayer, {
Capability,
State,
usePlaybackState,
} from 'react-native-track-player';
interface RadioProps {
navigation: any;
}
export function Radio(props: RadioProps) {
const {navigation} = props;
const [loadPolling, setLoadingPolling] = useState<any>([]);
const [loadPub, setLoadPub] = useState<any>([]);
let polling = loadPolling.live;
let pub = loadPub.pub;
const windowHeight = Dimensions.get('window').height;
const uri = API_RADIO_STREAM_URL;
const [audioStatus, setAudioStatus] = useState(false);
const [data, setData] = useState([]);
const playbackState = usePlaybackState();
//state to manage whether track player is initialized or not
const [isTrackPlayerInit, setIsTrackPlayerInit] = useState(false);
const [isPlaying, setIsPlaying] = useState(false);
const stream = {
'id': '1',
'url': uri,
'artwork': require('../assets/images/icon_radio.png'),
'artist': 'Observador',
'title': polling ? polling : 'AconteÃ§a o que acontecer',
};
// Share
const onShare = async () => {
try {
const result = await Share.share({
message:
'OiÃ§a a RÃ¡dio Observador em https://observador.pt/radio/. AcontenÃ§a o que acontecer.',
});
} catch (error) {
console.log(error);
}
};
const trackPlayerInit = async () => {
await TrackPlayer.setupPlayer();
await TrackPlayer.add(stream);
};
useEffect(() => {
trackPlayerInit();
}, []);
const musicPlay = async () => {
if (!isPlaying) {
await TrackPlayer.play();
setIsPlaying(true);
} else if (isPlaying) {
await TrackPlayer.reset();
await TrackPlayer.stop();
setIsPlaying(false);
} else {
TrackPlayer.destroy;
}
};
// Loop Polling and Pub
useEffect(() => {
getPolling();
getPub();
const intervalId = setInterval(() => {
getPolling();
}, 10000);
return () => clearInterval(intervalId);
}, []);
// Get Polling
const getPolling = async () => {
const response = await apiRadioBase
.get('/live')
.then(response => {
setLoadingPolling(response.data);
return response.data;
})
.catch(err => {
console.log('Erro Pooling', err);
});
};
// Get Pub
const getPub = async () => {
const response = await apiRadioBase
.get('/pub')
.then(response => {
setLoadPub(response.data);
return response.data;
})
.catch(err => {
console.log('Erro Pub', err);
});
};
return (
<SafeAreaView style={styles.safeArea}>
<CustomHeader
isHome={false}
navigation={navigation}
menuColor={Theme.colors.white}
/>
<View style={styles.container}>
<View
style={{
marginTop: 32,
flexDirection: 'row',
width: '100%',
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 20,
}}>
{!isPlaying ? (
<Text
style={{
fontFamily: theme.fonts.halyardRegular,
fontSize: 18,
color: theme.colors.white,
}}>
AcontenÃ§a o que acontecer
</Text>
) : windowHeight < 569 || polling.length > 40 ? (
<Marquee>
<Text
style={{
fontFamily: theme.fonts.halyardRegular,
fontSize: 18,
color: theme.colors.white,
}}>
{polling}
</Text>
</Marquee>
) : (
<Text
style={{
fontFamily: theme.fonts.halyardRegular,
fontSize: 18,
color: theme.colors.white,
}}>
{polling}
</Text>
)}
</View>
<View
style={{
marginTop: 14,
justifyContent: 'center',
alignItems: 'center',
}}>
{isPlaying ? (
<View
style={{
backgroundColor: theme.colors.primary,
borderRadius: 5,
width: 71,
padding: 4,
}}>
<Text
style={{
fontSize: 14,
fontFamily: theme.fonts.halyardSemBd,
textTransform: 'uppercase',
color: theme.colors.white,
textAlign: 'center',
}}>
Direto
</Text>
</View>
) : (
<View />
)}
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<TouchableOpacity
onPress={() => {
musicPlay();
}}
activeOpacity={1}
style={styles.btnMedia}>
<Icon
name={isPlaying ? 'stop' : 'play'}
size={24}
color={theme.colors.white}
/>
</TouchableOpacity>
<TouchableOpacity
onPress={onShare}
style={{
marginTop: 20,
justifyContent: 'center',
alignItems: 'center',
}}>
<Icon name="share" size={18} color={theme.colors.white} />
<Text
style={{
fontSize: 10,
fontFamily: theme.fonts.halyardRegular,
color: theme.colors.white,
marginTop: 4,
}}>
Partilhar
</Text>
</TouchableOpacity>
</View>
<View
style={{
justifyContent: 'flex-end',
marginBottom: 80,
}}>
<View
style={{
flexDirection: 'row',
paddingHorizontal: 20,
}}>
<View>
<Marquee>
<Text
style={{
fontFamily: theme.fonts.halyardRegular,
fontSize: 12,
color: theme.colors.white,
}}>
{pub && pub.length > 0 ? pub : ' '}
</Text>
</Marquee>
</View>
</View>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
borderColor: 'white',
}}>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 20,
}}>
<View style={{marginLeft: 20}}>
<TouchableOpacity
onPress={() => {
Linking.openURL(URL_PROGRAMS);
}}
style={styles.btn}>
<View
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}>
<Icon
name="programas"
size={14}
color={theme.colors.white}
style={{marginRight: 6}}
/>
<Text style={styles.textButtons}>Programas</Text>
</View>
</TouchableOpacity>
</View>
<View style={{marginLeft: 20}}>
<TouchableOpacity
onPress={() => {
Linking.openURL(URL_PROGRAMMING);
}}
style={styles.btn}>
<View
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}>
<Icon
name="programacao"
size={14}
color={theme.colors.white}
style={{marginRight: 6}}
/>
<Text style={styles.textButtons}>ProgramaÃ§Ã£o</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View>
</View>
</View>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
safeArea: {
flex: 1,
backgroundColor: theme.colors.raisinBlack,
},
container: {
flex: 1,
alignItems: 'center',
},
btnMedia: {
borderWidth: 2,
borderColor: theme.colors.white,
borderRadius: 100,
width: 100,
height: 100,
justifyContent: 'center',
alignItems: 'center',
},
btn: {
width: 117,
height: 26,
borderRadius: 5,
borderWidth: 1,
borderColor: theme.colors.languidLavender,
backgroundColor: 'rgba(206, 206, 219, 0.1)',
},
textButtons: {
fontFamily: theme.fonts.halyardRegular,
color: theme.colors.white,
fontSize: 13,
},
});

Editor

You can edit this paste and save as new:

fullscreen copy clear

Syntax Highlighting

Title / Paste Name

Meta robots tag

reCaptcha

File Description

React
Paste Code
23 Jan-2022
10.13 Kb

You can Share it:

Latest Code Pastes

Full list

Tools

[text] React

Viewer

Editor