- 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,
- },
- });
[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.
Editor
You can edit this paste and save as new: