@cinecrew/cinecrew-player 0.1.1 → 0.1.2

package/src/data/emoji.js

@@ -0,0 +1,30 @@
+import dataset from './emoji-data.json';
+
+export const EMOJI_GROUPS = [
+  { name: 'Smileys & Emotion', icon: '😀' },
+  { name: 'People & Body', icon: '👋' },
+  { name: 'Animals & Nature', icon: '🐻' },
+  { name: 'Food & Drink', icon: '🍔' },
+  { name: 'Travel & Places', icon: '🚗' },
+  { name: 'Activities', icon: '⚽' },
+  { name: 'Objects', icon: '💡' },
+  { name: 'Symbols', icon: '❤️' },
+  { name: 'Flags', icon: '🏳️' },
+].map((group) => ({
+  ...group,
+  items: dataset.filter((item) => item.status === 'fully-qualified' && item.group === group.name),
+}));
+
+export const EMOJI_ITEMS = EMOJI_GROUPS.flatMap((group) => group.items);
+
+export function searchEmojis(query) {
+  const normalizedQuery = String(query || '').trim().toLocaleLowerCase();
+  if (!normalizedQuery) return EMOJI_ITEMS;
+
+  return EMOJI_ITEMS.filter((item) => [
+    item.short_name,
+    item.description,
+    ...(item.aliases || []),
+    ...(item.keywords || []),
+  ].some((value) => String(value || '').toLocaleLowerCase().includes(normalizedQuery)));
+}

package/src/native/MediaPlayerView.js

@@ -476,7 +476,9 @@ function InlinePreviewFrame({
             onPress={onPromotePreview}
           />
           <InlinePreviewTopActions controls={controls} muted={muted} videoOnlyMode={videoOnlyMode} handleMuteAction={handleMuteAction} />
-          <InlinePreviewCenterAction controls={controls} colors={colors} isPlaying={isPlaying} handlePlayPauseAction={handlePlayPauseAction} />
+          {!isLoading ? (
+            <InlinePreviewCenterAction controls={controls} colors={colors} isPlaying={isPlaying} handlePlayPauseAction={handlePlayPauseAction} />
+          ) : null}
           <InlinePreviewBottomActions
             controls={controls}
             title={title}
@@ -570,10 +572,9 @@ function FullscreenControlsPanel(props) {
         onRestart={props.handleRestartAction}
         onToggleMute={props.handleMuteAction}
         onToggleLock={props.handleLockAction}
-        onMinimize={props.handleMinimizeAction}
       />
       <CenterControls
-        visible={!props.isAudioOnly && props.controls.playPause !== false}
+        visible={!props.isAudioOnly && !props.isLoading && props.controls.playPause !== false}
         isLive={props.isLive}
         isPlaying={props.isPlaying}
         onSeekBy={props.handleSeekByAction}
@@ -687,6 +688,8 @@ function FullscreenChatLayer(props) {
       streamId={props.mediaId}
       integrations={props.integrations}
       colors={props.colors}
+      messagePageSize={props.messagePageSize}
+      drawerStyle={props.drawerStyle}
     />
   );
 }
@@ -773,7 +776,6 @@ export const MediaPlayerView = ({
   inlinePreview = false,
   inlinePreviewRect = null,
   onPromotePreview,
-  onMinimize,
   mediaId,
   posterUrl,
   episodeLabel,
@@ -786,6 +788,8 @@ export const MediaPlayerView = ({
   shuffle,
   onNextEpisode,
   liveChatNonce = 0,
+  messagePageSize = 50,
+  drawerStyle,
   genre,
   categoryName,
   controls = {},
@@ -1904,9 +1908,6 @@ export const MediaPlayerView = ({
   const handleFullscreenAction = useCallback(() => invokeAction(
     'onFullscreen', toggleFullscreen, { isFullscreen: !isFullscreen },
   ), [invokeAction, toggleFullscreen, isFullscreen]);
-  const handleMinimizeAction = useCallback(() => invokeAction(
-    'onMinimize', onMinimize, { title, mediaId },
-  ), [invokeAction, onMinimize, title, mediaId]);
   const handleRecordingAction = useCallback((name, fallback, event) => {
     event?.stopPropagation?.();
     return invokeAction(name, fallback, { title, streamUrl, mediaId });
@@ -1937,7 +1938,6 @@ export const MediaPlayerView = ({
       seekBy: handleSeekBy,
       setPlaybackRate: (rate) => setPlaybackRate(clampNumber(rate, 0.25, 4, 1)),
       back: handleClose,
-      minimize: handleMinimizeAction,
       getVideoElement: () => vlcRef.current?.getVideoElement?.() || null,
       getAudioTracks: () => audioTracks,
     };
@@ -1945,7 +1945,7 @@ export const MediaPlayerView = ({
     return () => {
       for (const key of Object.keys(api)) delete playerApiRef.current[key];
     };
-  }, [playerApiRef, togglePlayPause, handleRestart, toggleMute, handleSelectAspectRatio, handleAudioSelect, handleSeekTo, handleSeekBy, handleClose, handleMinimizeAction, audioTracks]);
+  }, [playerApiRef, togglePlayPause, handleRestart, toggleMute, handleSelectAspectRatio, handleAudioSelect, handleSeekTo, handleSeekBy, handleClose, audioTracks]);
 
   const handleSpeedSelect = useCallback((speed) => invokeAction(
     'onPlaybackRateChange', () => {
@@ -2004,6 +2004,8 @@ export const MediaPlayerView = ({
   windowWidthRef.current = windowWidth;
   const windowHeightRef = useRef(windowHeight);
   windowHeightRef.current = windowHeight;
+  const showControlsRef = useRef(showControls);
+  showControlsRef.current = showControls;
   const handleSeekByRef = useRef(handleSeekByAction);
   handleSeekByRef.current = handleSeekByAction;
   const triggerSeekRippleRef = useRef(triggerSeekRipple);
@@ -2019,10 +2021,21 @@ export const MediaPlayerView = ({
   const panResponder = useMemo(() => {
     if (isWeb()) return null;
 
+    const isSeekScrubGesture = (evt) => {
+      if (!showControlsRef.current) return false;
+      const height = windowHeightRef.current || 0;
+      const y = Number(evt?.nativeEvent?.locationY);
+      if (height <= 0 || !Number.isFinite(y)) return false;
+      // Keep the bottom timeline region available to the native Slider instead
+      // of letting the full-screen tap/gesture layer claim horizontal scrubs.
+      return y >= height - Math.max(180, height * 0.14);
+    };
+
     return PanResponder.create({
-      onStartShouldSetPanResponder: () => true,
+      onStartShouldSetPanResponder: (evt) => !isSeekScrubGesture(evt),
       onStartShouldSetPanResponderCapture: () => false,
-      onMoveShouldSetPanResponder: (_, gestureState) => {
+      onMoveShouldSetPanResponder: (evt, gestureState) => {
+        if (isSeekScrubGesture(evt)) return false;
         return Math.abs(gestureState.dx) > 3 || Math.abs(gestureState.dy) > 3;
       },
       onMoveShouldSetPanResponderCapture: () => false,
@@ -2506,6 +2519,8 @@ export const MediaPlayerView = ({
         popupMode
         integrations={integrations}
         colors={colors}
+        messagePageSize={messagePageSize}
+        drawerStyle={drawerStyle}
       />
     ) : null;
     return (
@@ -2564,7 +2579,6 @@ export const MediaPlayerView = ({
     handleRestartAction,
     handleMuteAction,
     handleLockAction,
-    handleMinimizeAction,
     isAudioOnly,
     isPlaying,
     handleSeekByAction,
@@ -2686,6 +2700,8 @@ export const MediaPlayerView = ({
         diagnosticsEnabled={diagnosticsOverlayEnabled}
         integrations={integrations}
         colors={colors}
+        messagePageSize={messagePageSize}
+        drawerStyle={drawerStyle}
       />
       <FullscreenRecordingLayer
         isAudioOnly={isAudioOnly}

package/src/native/media/EmojiPickerModal.js

@@ -1,30 +1,226 @@
-import React from 'react';
-import { useColorScheme } from 'react-native';
+import React, { useMemo, useState } from 'react';
 import {
-  EmojiPickerModal as HirakuEmojiPickerModal,
-  emojiData,
-} from '@hiraku-ai/react-native-emoji-picker';
+  FlatList,
+  Modal,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  useColorScheme,
+  View,
+  useWindowDimensions,
+} from 'react-native';
+import { EMOJI_GROUPS, searchEmojis } from '../../data/emoji';
 
 export const EmojiPickerModal = ({ visible, onClose, onSelectEmoji, colors }) => {
   const systemScheme = useColorScheme();
-  const darkMode = colors?.mode ? colors.mode === 'dark' : systemScheme !== 'light';
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+  const [activeGroup, setActiveGroup] = useState(EMOJI_GROUPS[0].name);
+  const [query, setQuery] = useState('');
+  const isDark = colors?.mode ? colors.mode === 'dark' : systemScheme !== 'light';
+  const sheetWidth = Math.min(windowWidth - 32, 420);
+  const numColumns = Math.max(5, Math.min(9, Math.floor((sheetWidth - 32) / 42)));
+  const activeGroupData = EMOJI_GROUPS.find((group) => group.name === activeGroup) || EMOJI_GROUPS[0];
+  const emojis = useMemo(
+    () => query.trim() ? searchEmojis(query) : activeGroupData.items,
+    [activeGroupData, query],
+  );
+  const palette = {
+    surface: colors?.surfaceColor || (isDark ? '#17212B' : '#FFFFFF'),
+    text: colors?.controlColor || (isDark ? '#F5F7FA' : '#202124'),
+    muted: colors?.mutedColor || (isDark ? '#AAB4C0' : '#5F6368'),
+    accent: colors?.accentColor || '#00B8D4',
+    outline: colors?.borderColor || (isDark ? 'rgba(255,255,255,0.16)' : 'rgba(32,33,36,0.18)'),
+    backdrop: 'rgba(0,0,0,0.58)',
+  };
+  const close = () => {
+    onClose?.();
+  };
 
   return (
-    <HirakuEmojiPickerModal
+    <Modal
       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}
-    />
+      transparent
+      animationType="fade"
+      onRequestClose={close}
+      statusBarTranslucent
+    >
+      <Pressable style={[styles.backdrop, { backgroundColor: palette.backdrop }]} onPress={close}>
+        <Pressable
+          style={[styles.sheet, {
+            width: sheetWidth,
+            height: Math.min(Math.max(300, windowHeight * 0.72), 560),
+            backgroundColor: palette.surface,
+            borderColor: palette.outline,
+          }]}
+          onPress={(event) => event.stopPropagation()}
+        >
+          <View style={styles.header}>
+            <Text style={[styles.title, { color: palette.text }]}>Choose an emoji</Text>
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel="Close emoji picker"
+              hitSlop={10}
+              onPress={close}
+              style={[styles.closeButton, { borderColor: palette.outline }]}
+            >
+              <Text style={[styles.closeLabel, { color: palette.muted }]}>×</Text>
+            </Pressable>
+          </View>
+          <TextInput
+            accessibilityLabel="Search emojis"
+            value={query}
+            onChangeText={setQuery}
+            placeholder="Search all emojis"
+            placeholderTextColor={palette.muted}
+            returnKeyType="search"
+            style={[styles.search, { color: palette.text, borderColor: palette.outline }]}
+          />
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            keyboardShouldPersistTaps="handled"
+            contentContainerStyle={styles.categoryList}
+            accessibilityLabel="Emoji categories"
+          >
+            {EMOJI_GROUPS.map((group) => {
+              const selected = !query.trim() && group.name === activeGroup;
+              return (
+                <Pressable
+                  key={group.name}
+                  accessibilityRole="button"
+                  accessibilityLabel={`${group.name} emojis`}
+                  accessibilityState={{ selected }}
+                  onPress={() => setActiveGroup(group.name)}
+                  style={[styles.categoryButton, { borderColor: selected ? palette.accent : 'transparent' }]}
+                >
+                  <Text style={styles.categoryIcon}>{group.icon}</Text>
+                </Pressable>
+              );
+            })}
+          </ScrollView>
+          <Text style={[styles.groupTitle, { color: palette.muted }]}>
+            {query.trim() ? `Search results · ${emojis.length}` : activeGroupData.name}
+          </Text>
+          <FlatList
+            key={`${numColumns}-${query.trim() ? 'search' : activeGroup}`}
+            data={emojis}
+            keyExtractor={(item) => item.codepoints}
+            numColumns={numColumns}
+            keyboardShouldPersistTaps="handled"
+            contentContainerStyle={styles.grid}
+            initialNumToRender={numColumns * 6}
+            maxToRenderPerBatch={numColumns * 8}
+            windowSize={7}
+            renderItem={({ item }) => (
+              <Pressable
+                accessibilityRole="button"
+                accessibilityLabel={`Insert ${item.short_name}`}
+                onPress={() => {
+                  onSelectEmoji?.(item.emoji);
+                  close();
+                }}
+                style={({ pressed }) => [styles.emojiButton, pressed && { backgroundColor: `${palette.accent}24` }]}
+              >
+                <Text style={styles.emoji}>{item.emoji}</Text>
+              </Pressable>
+            )}
+            ListEmptyComponent={<Text style={[styles.empty, { color: palette.muted }]}>No emojis found.</Text>}
+          />
+        </Pressable>
+      </Pressable>
+    </Modal>
   );
 };
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 16,
+  },
+  sheet: {
+    maxHeight: '82%',
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: 20,
+    padding: 16,
+    overflow: 'hidden',
+    elevation: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.28,
+    shadowRadius: 20,
+  },
+  header: {
+    minHeight: 44,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 10,
+  },
+  title: {
+    fontSize: 17,
+    fontWeight: '700',
+  },
+  closeButton: {
+    width: 34,
+    height: 34,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: 17,
+  },
+  closeLabel: {
+    fontSize: 25,
+    lineHeight: 29,
+  },
+  search: {
+    minHeight: 42,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: 12,
+    paddingHorizontal: 12,
+    marginBottom: 10,
+    fontSize: 15,
+  },
+  categoryList: {
+    alignItems: 'center',
+    gap: 4,
+    paddingBottom: 8,
+  },
+  categoryButton: {
+    width: 38,
+    height: 38,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderBottomWidth: 2,
+    borderRadius: 8,
+  },
+  categoryIcon: {
+    fontSize: 20,
+  },
+  groupTitle: {
+    fontSize: 13,
+    fontWeight: '600',
+    marginBottom: 6,
+  },
+  grid: {
+    alignItems: 'center',
+    paddingBottom: 8,
+  },
+  emojiButton: {
+    width: 42,
+    height: 42,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 12,
+  },
+  emoji: {
+    fontSize: 24,
+  },
+  empty: {
+    paddingVertical: 20,
+    textAlign: 'center',
+  },
+});