@controleonline/ui-common 1.2.70

package/src/react/components/radio/Spotify.js

@@ -0,0 +1,144 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { View, Text, Platform } from 'react-native';
+import { useStore } from '@store';
+import { api } from '@controleonline/ui-common/src/api';
+import styles from './Spotify.styles';
+
+const SpotifyPlayer = () => {
+    const peopleStore = useStore('people');
+    const { currentCompany } = peopleStore.getters;
+
+    const [token, setToken] = useState(null);
+    const [isReady, setIsReady] = useState(false);
+    const [track, setTrack] = useState(null);
+
+    const playerRef = useRef(null);
+
+    // 🔑 TOKEN
+    const fetchToken = async () => {
+        try {
+            const data = await api.fetch('/spotify/token/' + currentCompany?.id);
+            if (data.access_token) {
+                setToken(data.access_token);
+                console.log('[Spotify] Token OK');
+            }
+        } catch (e) {
+            console.error('[Spotify] token error', e);
+        }
+    };
+
+    useEffect(() => {
+        if (Platform.OS !== 'web' || !currentCompany?.id) return;
+        fetchToken();
+    }, [currentCompany?.id]);
+
+    // 🔓 DESBLOQUEAR ÁUDIO (ESSENCIAL)
+    useEffect(() => {
+        const unlockAudio = async () => {
+            try {
+                console.log('[Spotify] desbloqueando áudio...');
+                await playerRef.current?.resume();
+                await playerRef.current?.setVolume(0.8);
+        } catch {
+            console.log('[Spotify] ainda não liberado');
+        }
+        };
+
+        document.addEventListener('click', unlockAudio, { once: true });
+
+        return () => {
+            document.removeEventListener('click', unlockAudio);
+        };
+    }, []);
+
+    // 🚀 SDK
+    useEffect(() => {
+        if (!token || Platform.OS !== 'web') return;
+
+        if (!document.getElementById('spotify-sdk')) {
+            const script = document.createElement('script');
+            script.id = 'spotify-sdk';
+            script.src = 'https://sdk.scdn.co/spotify-player.js';
+            script.async = true;
+            document.body.appendChild(script);
+        }
+
+        window.onSpotifyWebPlaybackSDKReady = () => {
+            const player = new window.Spotify.Player({
+                name: 'KDS Player TV',
+                getOAuthToken: cb => cb(token),
+                volume: 0.5,
+            });
+
+            playerRef.current = player;
+
+            // 🎧 Estado vindo do celular
+            player.addListener('player_state_changed', state => {
+                if (!state) return;
+
+                const currentTrack = state.track_window.current_track;
+
+                if (currentTrack) {
+                    console.log('[Spotify] Tocando:', currentTrack.name);
+
+                    setTrack({
+                        name: currentTrack.name,
+                        artist: currentTrack.artists.map(a => a.name).join(', ')
+                    });
+                }
+            });
+
+            // ✅ PLAYER PRONTO
+            player.addListener('ready', async ({ device_id }) => {
+                console.log('[Spotify] READY:', device_id);
+                setIsReady(true);
+
+                // 🔊 garantir volume
+                setTimeout(() => {
+                    player.setVolume(0.8);
+                }, 1000);
+            });
+
+            player.addListener('not_ready', () => {
+                setIsReady(false);
+            });
+
+            player.addListener('initialization_error', e => console.error(e));
+            player.addListener('authentication_error', e => console.error(e));
+            player.addListener('account_error', e => console.error('Premium necessário', e));
+            player.addListener('playback_error', e => console.error(e));
+
+            player.connect();
+        };
+
+        return () => {
+            playerRef.current?.disconnect();
+        };
+    }, [token]);
+
+    if (Platform.OS !== 'web') {
+        return (
+            <View style={styles.container}>
+                <Text>Spotify apenas na Web</Text>
+            </View>
+        );
+    }
+
+    return (
+        <View style={styles.footer}>
+            <Text style={styles.status}>
+                {isReady ? '🟢 Aguardando Spotify Connect...' : '🟠 Carregando...'}
+            </Text>
+
+            {track && (
+                <View style={styles.trackBox}>
+                    <Text style={styles.trackName}>{track.name}</Text>
+                    <Text style={styles.artist}>{track.artist}</Text>
+                </View>
+            )}
+        </View>
+    );
+};
+
+export default SpotifyPlayer;
+// TODO(store-first): quando este arquivo for mexido, mover a leitura para stores, remover api.fetch e evitar repassar dados em objetos quando o store ja resolver isso.

package/src/react/components/radio/Spotify.styles.js

@@ -0,0 +1,32 @@
+import { StyleSheet } from 'react-native'
+
+const styles = StyleSheet.create({
+  footer: {
+    height: 100,
+    backgroundColor: '#121212',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  status: {
+    color: '#fff',
+    fontWeight: 'bold',
+  },
+  trackBox: {
+    marginTop: 8,
+    alignItems: 'center',
+  },
+  trackName: {
+    color: '#fff',
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+  artist: {
+    color: '#aaa',
+    fontSize: 12,
+  },
+  container: {
+    padding: 20,
+  },
+})
+
+export default styles

package/src/react/components/radio/YouTube.js

@@ -0,0 +1,82 @@
+// components/YouTube.js
+import React, { useRef, useEffect } from 'react';
+import { View, Platform } from 'react-native';
+import { WebView } from 'react-native-webview';
+import styles from './YouTube.styles';
+
+const YouTube = ({
+  playlistId = 'PLbpi6ZahtOH7DrxWUmkwvsXnFeCfB5LUp',
+  height = 400,
+  volume = 100 
+}) => {
+  const webRef = useRef(null);
+
+  // URL do embed com JS API habilitada, autoplay e mute inicial
+  const embedUrl = `https://www.youtube.com/embed/videoseries?list=${playlistId}&autoplay=1&mute=1&controls=0&rel=0&modestbranding=1&enablejsapi=1`;
+
+  useEffect(() => {
+    if (Platform.OS === 'web') {
+      const timer = setTimeout(() => {
+        const iframe = document.querySelector(`iframe[src*="${playlistId}"]`);
+        if (iframe) {
+          iframe.contentWindow?.postMessage(
+            JSON.stringify({ event: 'command', func: 'unMute', args: [] }),
+            '*'
+          );
+          iframe.contentWindow?.postMessage(
+            JSON.stringify({ event: 'command', func: 'setVolume', args: [volume] }),
+            '*'
+          );
+          console.log('[YouTube Web] Volume aumentado');
+        }
+      }, 10000);
+
+      return () => clearTimeout(timer);
+    }
+  }, [playlistId, volume]);
+
+  // Mobile / TV WebView
+  const injectedJS = `
+    setTimeout(() => {
+      if (window.YT && window.YT.Player) {
+        const player = new YT.Player('ytplayer');
+        player.unMute();
+        player.setVolume(${volume});
+      }
+    }, 3000);
+    true;
+  `;
+
+  if (Platform.OS === 'web') {
+    return (
+      <View style={[styles.container, { height }]}>
+        <iframe
+          id="ytplayer"
+          src={embedUrl}
+          width="100%"
+          height={height}
+          frameBorder="0"
+          allow="autoplay; encrypted-media; fullscreen"
+          allowFullScreen
+        />
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.container, { height }]}>
+      <WebView
+        ref={webRef}
+        source={{ uri: embedUrl }}
+        style={styles.webview}
+        javaScriptEnabled
+        domStorageEnabled
+        allowsInlineMediaPlayback
+        mediaPlaybackRequiresUserAction={false}
+        injectedJavaScript={injectedJS}
+      />
+    </View>
+  );
+};
+
+export default YouTube;

package/src/react/components/radio/YouTube.styles.js

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native'
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: '#000',
+  },
+  webview: {
+    flex: 1,
+  },
+})
+
+export default styles

package/src/react/components/toastConfig.js

@@ -0,0 +1,16 @@
+export const TOAST_PROVIDER_KEYS = {
+  ROOT: 'APP_ROOT_TOASTS',
+  MODAL: 'APP_MODAL_TOASTS',
+  PERSIST: 'PERSISTS',
+};
+
+export const TOAST_MODAL_COUNT_KEY = '__coToastModalDepth';
+
+export const TOAST_DEFAULT_DURATION = 4000;
+export const TOAST_DEFAULT_TOP_OFFSET = 46;
+export const TOAST_DEFAULT_BOTTOM_OFFSET = 30;
+
+export const TOAST_EXTRA_INSETS = {
+  top: TOAST_DEFAULT_TOP_OFFSET - 16,
+  bottom: 72,
+};