@cinecrew/cinecrew-player 0.1.1

package/src/native/customization.js

@@ -0,0 +1,44 @@
+import React, { createContext, useContext } from 'react';
+import { Text } from 'react-native';
+import { MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons';
+
+const PlayerCustomizationContext = createContext({ icons: {}, theme: {} });
+
+export function PlayerCustomizationProvider({ icons, theme, children }) {
+  return React.createElement(
+    PlayerCustomizationContext.Provider,
+    { value: { icons: icons || {}, theme: theme || {} } },
+    children,
+  );
+}
+
+export function usePlayerColors() {
+  const { theme = {} } = useContext(PlayerCustomizationContext);
+  const colors = theme.colors || {};
+  return {
+    accentColor: theme.accentColor || theme.brandAccent || colors.brandAccent || colors.primary || '#00E5FF',
+    backgroundColor: theme.backgroundColor || colors.background || '#050B14',
+    surfaceColor: theme.surfaceColor || colors.surface || '#111B2A',
+    controlBackground: theme.controlBackground || 'rgba(0, 0, 0, 0.5)',
+    controlColor: theme.controlColor || theme.textColor || colors.onSurfacePrimary || '#FFFFFF',
+    mutedColor: theme.mutedTextColor || colors.onSurfaceSecondary || '#B8C2D0',
+    errorColor: theme.errorColor || colors.error || '#FF5252',
+    borderColor: theme.borderColor || colors.outline || 'rgba(255,255,255,0.18)',
+  };
+}
+
+export function PlayerIcon({ name, pack = 'community', size = 20, color = '#FFFFFF', style }) {
+  const customization = useContext(PlayerCustomizationContext);
+  const custom = customization.icons?.[name] || customization.icons?.[`${pack}:${name}`];
+  if (React.isValidElement(custom)) {
+    return React.cloneElement(custom, { size, color, style, 'aria-hidden': true });
+  }
+  if (typeof custom === 'function') {
+    return React.createElement(custom, { name, size, color, style, 'aria-hidden': true });
+  }
+  if (typeof custom === 'string' && !/^[a-z0-9-]+$/i.test(custom)) {
+    return React.createElement(Text, { style: [{ fontSize: size, color }, style], accessibilityElementsHidden: true }, custom);
+  }
+  const IconSet = pack === 'material' ? MaterialIcons : MaterialCommunityIcons;
+  return React.createElement(IconSet, { name: typeof custom === 'string' ? custom : name, size, color, style });
+}

package/src/native/index.js

@@ -0,0 +1,107 @@
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
+import { PlayerCustomizationProvider } from './customization';
+import { MediaPlayerView } from './MediaPlayerView';
+import { isElectron, isWeb } from '../utils/runtimePlatform';
+import { getYouTubeVideoId, useResolvedPlayerSource } from '../utils/sourceUtils';
+
+function getRuntimePlatform() {
+  if (isWeb()) return 'web';
+  if (isElectron()) return 'electron';
+  return 'native';
+}
+
+/** Full-screen player for React Native and Electron applications. */
+export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
+  const {
+    source,
+    url,
+    visible,
+    title,
+    poster,
+    posterUrl,
+    mediaType,
+    isLive,
+    autoPlay = true,
+    paused,
+    initialPaused,
+    muted,
+    initialMuted,
+    volume = 1,
+    playbackRate = 1,
+    audioOnly = false,
+    controls,
+    features,
+    actions,
+    integrations,
+    theme,
+    icons,
+    style,
+    resolveSource,
+    onClose,
+    onBack,
+    ...metadata
+  } = props;
+  const playerApiRef = useRef({});
+  useImperativeHandle(ref, () => playerApiRef.current, []);
+  const platform = getRuntimePlatform();
+  const resolution = useResolvedPlayerSource(source, url, resolveSource, platform);
+  const media = resolution.source || {};
+  const streamUrl = String(media.uri || media.url || '');
+  const resolvedIsLive = isLive ?? media.isLive ?? (media.mediaType === 'live');
+  const resolvedMediaType = mediaType || media.mediaType || (resolvedIsLive ? 'live' : 'movie');
+  const youtubeVideoId = getYouTubeVideoId(media);
+  const isVisible = visible ?? Boolean(streamUrl || youtubeVideoId);
+
+  React.useEffect(() => {
+    if (resolution.error) props.onError?.(resolution.error);
+  }, [resolution.error, props.onError]);
+
+  if (resolution.loading || resolution.error) {
+    const colors = theme?.colors || {};
+    return React.createElement(PlayerCustomizationProvider, { icons, theme },
+      React.createElement(View, { style: [styles.resolveScreen, style, { backgroundColor: theme?.backgroundColor || colors.background || '#050b14' }] },
+        resolution.loading
+          ? React.createElement(ActivityIndicator, { color: theme?.accentColor || colors.brandAccent || '#00D4FF' })
+          : null,
+        React.createElement(Text, { style: { color: theme?.textColor || colors.onSurfacePrimary || '#FFFFFF', marginTop: 12 } },
+          resolution.loading ? 'Resolving media source…' : (resolution.error?.message || 'Unable to resolve this media source.'))));
+  }
+
+  return React.createElement(
+    PlayerCustomizationProvider,
+    { icons, theme },
+    React.createElement(MediaPlayerView, {
+      ...metadata,
+      visible: isVisible,
+      streamUrl,
+      youtubeVideoId,
+      title: title || media.title || '',
+      posterUrl: poster || posterUrl || media.poster || media.posterUrl || '',
+      mediaType: resolvedMediaType,
+      onClose: onClose || onBack || (() => {}),
+      initialPaused: paused ?? initialPaused ?? !autoPlay,
+      initialMuted: muted ?? initialMuted ?? false,
+      initialAudioOnly: audioOnly,
+      initialVolume: Math.round(Math.max(0, Math.min(1, Number(volume) || 0)) * 100),
+      initialPlaybackRate: playbackRate,
+      controls: controls || {},
+      features: features || {},
+      actions: actions || {},
+      integrations: integrations || {},
+      theme,
+      icons,
+      style,
+      playerApiRef,
+    }),
+  );
+});
+
+/** Compact inline live preview companion for channel lists and guides. */
+export { InlineLivePlayer } from './InlineLivePlayer';
+export { PlayerCustomizationProvider } from './customization';
+export default CineCrewPlayer;
+
+const styles = StyleSheet.create({
+  resolveScreen: { flex: 1, minHeight: '100%', alignItems: 'center', justifyContent: 'center', padding: 24 },
+});

package/src/native/media/ElectronVideoPlayer.js

@@ -0,0 +1,288 @@
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+const PLAYER_STAGE_ID = 'cinecrew-electron-vlc-stage';
+
+function getElectronIpcRenderer() {
+  if (typeof window === 'undefined' || typeof window.require !== 'function') return null;
+  try {
+    return window.require('electron')?.ipcRenderer || null;
+  } catch {
+    return null;
+  }
+}
+
+export const ElectronVideoPlayer = forwardRef(function ElectronVideoPlayer({
+  streamUrl,
+  paused,
+  muted,
+  volume = 100,
+  playbackRate = 1,
+  audioTrack,
+  videoAspectRatio,
+  isLive,
+  audioOnly = false,
+  onProgress,
+  onPlaying,
+  onPlaybackStateChange,
+  onBuffering,
+  onError,
+  onEnded,
+  onTracksChanged,
+  onPlaybackRoute,
+  onClose,
+}, ref) {
+  const ipcRef = useRef(null);
+  const mountPromiseRef = useRef(null);
+  const latestPropsRef = useRef(null);
+  const sourceRef = useRef('');
+  const tracksRef = useRef([]);
+  const stageRef = useRef(null);
+
+  latestPropsRef.current = {
+    onProgress,
+    onPlaying,
+    onPlaybackStateChange,
+    onBuffering,
+    onError,
+    onEnded,
+    onTracksChanged,
+    onPlaybackRoute,
+    onClose,
+    paused,
+    muted,
+    volume,
+    playbackRate,
+    audioTrack,
+    audioOnly,
+  };
+
+  const invokePlayer = useCallback(async (channel, payload) => {
+    const ipc = ipcRef.current;
+    const mounted = mountPromiseRef.current;
+    if (!ipc || !mounted) return null;
+    try {
+      const mountResult = await mounted;
+      if (!mountResult?.ok) return null;
+      const result = await ipc.invoke(channel, payload);
+      if (result?.ok === false) throw new Error(result.error || 'Electron VLC request failed.');
+      return result;
+    } catch (error) {
+      latestPropsRef.current?.onError?.(error instanceof Error ? error : new Error(String(error)));
+      return null;
+    }
+  }, []);
+
+  const handleNativeEvent = useCallback((_event, payload = {}) => {
+    const callbacks = latestPropsRef.current || {};
+    switch (payload.type) {
+      case 'progress':
+        callbacks.onProgress?.(payload);
+        break;
+      case 'playing': {
+        const audioTracks = Array.isArray(payload.audioTracks) ? payload.audioTracks : [];
+        tracksRef.current = audioTracks;
+        callbacks.onPlaybackStateChange?.(true);
+        callbacks.onTracksChanged?.({ audioTracks });
+        callbacks.onPlaying?.({ audioTracks });
+        callbacks.onBuffering?.(false);
+        break;
+      }
+      case 'paused':
+        callbacks.onPlaybackStateChange?.(false);
+        break;
+      case 'tracks': {
+        const audioTracks = Array.isArray(payload.audioTracks) ? payload.audioTracks : [];
+        tracksRef.current = audioTracks;
+        callbacks.onTracksChanged?.({ audioTracks });
+        break;
+      }
+      case 'buffering':
+        callbacks.onBuffering?.(!!payload.isBuffering);
+        break;
+      case 'ended':
+        callbacks.onEnded?.();
+        break;
+      case 'error':
+        callbacks.onError?.(new Error(payload.message || 'libVLC could not play this stream.'));
+        break;
+      case 'route':
+        callbacks.onPlaybackRoute?.(payload.url || '');
+        break;
+      case 'close':
+        callbacks.onClose?.();
+        break;
+      default:
+        break;
+    }
+  }, []);
+
+  useEffect(() => {
+    const ipc = getElectronIpcRenderer();
+    if (!ipc) {
+      latestPropsRef.current?.onError?.(new Error('CineCrew’s bundled VLC player is available only in the Electron app.'));
+      return undefined;
+    }
+
+    let disposed = false;
+    let layoutFrame = null;
+    const requestLayoutSync = () => {
+      if (layoutFrame !== null) return;
+      layoutFrame = requestAnimationFrame(() => {
+        layoutFrame = null;
+        ipc.send('cinecrew:vlc:layout');
+      });
+    };
+
+    ipcRef.current = ipc;
+    ipc.on('cinecrew:vlc:event', handleNativeEvent);
+    const mountPromise = ipc.invoke('cinecrew:vlc:mount', {
+      container: `#${PLAYER_STAGE_ID}`,
+    }).then((result) => {
+      if (!result?.ok) throw new Error(result?.error || 'Could not initialize CineCrew’s bundled VLC player.');
+      if (disposed) void ipc.invoke('cinecrew:vlc:unmount').catch(() => {});
+      return result;
+    }).catch((error) => {
+      if (!disposed) {
+        latestPropsRef.current?.onBuffering?.(false);
+        latestPropsRef.current?.onError?.(error instanceof Error ? error : new Error(String(error)));
+      }
+      return { ok: false };
+    });
+    mountPromiseRef.current = mountPromise;
+
+    window.addEventListener('scroll', requestLayoutSync, true);
+    window.addEventListener('resize', requestLayoutSync);
+    let resizeObserver = null;
+    if (typeof ResizeObserver !== 'undefined' && stageRef.current) {
+      resizeObserver = new ResizeObserver(requestLayoutSync);
+      resizeObserver.observe(stageRef.current);
+    }
+
+    return () => {
+      disposed = true;
+      window.removeEventListener('scroll', requestLayoutSync, true);
+      window.removeEventListener('resize', requestLayoutSync);
+      resizeObserver?.disconnect();
+      if (layoutFrame !== null) cancelAnimationFrame(layoutFrame);
+      ipc.removeListener('cinecrew:vlc:event', handleNativeEvent);
+      ipcRef.current = null;
+      mountPromiseRef.current = null;
+      void ipc.invoke('cinecrew:vlc:unmount').catch(() => {});
+    };
+  }, [handleNativeEvent]);
+
+  useEffect(() => {
+    let cancelled = false;
+    if (!streamUrl) return undefined;
+
+    const loadSource = async () => {
+      try {
+        // Electron uses VLC and should receive the provider URL directly. The
+        // Worker redirect resolver is a browser-only compatibility path.
+        const source = streamUrl;
+        if (!source || cancelled) return;
+        sourceRef.current = source;
+        latestPropsRef.current?.onBuffering?.(true);
+        const result = await invokePlayer('cinecrew:vlc:load', {
+          source,
+          isLive: !!isLive,
+          paused: latestPropsRef.current?.paused === true,
+          muted: latestPropsRef.current?.muted === true,
+          volume: latestPropsRef.current?.volume,
+          playbackRate: latestPropsRef.current?.playbackRate,
+          audioOnly: latestPropsRef.current?.audioOnly === true,
+        });
+        if (!cancelled && result?.ok === true) {
+          latestPropsRef.current?.onPlaybackRoute?.(source);
+        }
+      } catch (error) {
+        if (!cancelled) {
+          latestPropsRef.current?.onBuffering?.(false);
+          latestPropsRef.current?.onError?.(error instanceof Error ? error : new Error(String(error)));
+        }
+      }
+    };
+
+    void loadSource();
+    return () => {
+      cancelled = true;
+    };
+  }, [streamUrl, isLive, invokePlayer]);
+
+  useEffect(() => {
+    void invokePlayer('cinecrew:vlc:set-paused', paused);
+  }, [paused, invokePlayer]);
+
+  useEffect(() => {
+    void invokePlayer('cinecrew:vlc:set-volume', { muted, volume });
+  }, [muted, volume, invokePlayer]);
+
+  useEffect(() => {
+    void invokePlayer('cinecrew:vlc:set-rate', playbackRate);
+  }, [playbackRate, invokePlayer]);
+
+  useEffect(() => {
+    if (audioTrack !== null && audioTrack !== undefined) {
+      void invokePlayer('cinecrew:vlc:set-audio-track', audioTrack);
+    }
+  }, [audioTrack, invokePlayer]);
+
+  useEffect(() => {
+    void invokePlayer('cinecrew:vlc:set-audio-only', audioOnly);
+  }, [audioOnly, invokePlayer]);
+
+  useEffect(() => {
+    void invokePlayer('cinecrew:vlc:set-aspect-ratio', videoAspectRatio);
+  }, [videoAspectRatio, invokePlayer]);
+
+  useImperativeHandle(ref, () => ({
+    seek(ratio) {
+      return invokePlayer('cinecrew:vlc:seek', Math.max(0, Math.min(1, Number(ratio) || 0)));
+    },
+    seekTo(seconds) {
+      return invokePlayer('cinecrew:vlc:seek-to', Math.max(0, Number(seconds) || 0) * 1000);
+    },
+    reload() {
+      return invokePlayer('cinecrew:vlc:seek-to', 0);
+    },
+    changeVideoAspectRatio(aspect) {
+      return invokePlayer('cinecrew:vlc:set-aspect-ratio', aspect);
+    },
+    setAudioTrack(trackId) {
+      return invokePlayer('cinecrew:vlc:set-audio-track', trackId);
+    },
+    getAudioTracks() {
+      return tracksRef.current;
+    },
+    async requestPictureInPicture() {
+      return null;
+    },
+    async exitPictureInPicture() {
+      return null;
+    },
+    getVideoElement() {
+      return null;
+    },
+  }), [invokePlayer]);
+
+  return (
+    <View
+      ref={stageRef}
+      nativeID={PLAYER_STAGE_ID}
+      collapsable={false}
+      pointerEvents="none"
+      style={styles.stage}
+    />
+  );
+});
+
+const styles = StyleSheet.create({
+  stage: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    backgroundColor: '#000',
+    overflow: 'hidden',
+  },
+});

package/src/native/media/EmojiPickerModal.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useColorScheme } from 'react-native';
+import {
+  EmojiPickerModal as HirakuEmojiPickerModal,
+  emojiData,
+} from '@hiraku-ai/react-native-emoji-picker';
+
+export const EmojiPickerModal = ({ visible, onClose, onSelectEmoji, colors }) => {
+  const systemScheme = useColorScheme();
+  const darkMode = colors?.mode ? colors.mode === 'dark' : systemScheme !== 'light';
+
+  return (
+    <HirakuEmojiPickerModal
+      visible={visible}
+      onClose={onClose}
+      onEmojiSelect={(emoji) => {
+        onSelectEmoji(emoji);
+      }}
+      emojis={emojiData}
+      darkMode={darkMode}
+      modalTitle="Emojis"
+      showSearchBar={true}
+      showTabs={true}
+      showHistoryTab={true}
+      showSkinToneSelector={true}
+      modalMaxWidth={420}
+      modalMaxHeight={380}
+    />
+  );
+};