@cinecrew/cinecrew-player 0.1.1

package/src/native/media/LiveRecordingOverlay.js

@@ -0,0 +1,319 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { isElectron, isWeb } from '../../utils/runtimePlatform';
+import { PlayerIcon } from '../customization';
+
+const REC_RED = '#FF5252';
+const DEFAULT_DARK_PALETTE = {
+  mode: 'dark', primary: '#00E5FF', outline: 'rgba(255,255,255,0.14)',
+  surface: '#12161C', surfaceHighlight: '#262B33',
+  onSurfacePrimary: '#FFFFFF', onSurfaceSecondary: 'rgba(255,255,255,0.68)',
+};
+
+function formatRecElapsed(elapsedMs = 0) {
+  const totalSeconds = Math.max(0, Math.floor(Number(elapsedMs) / 1000));
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+  return hours > 0
+    ? `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
+    : `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+}
+
+function resolveTheme(colors) {
+  const palette = colors?.onSurfacePrimary ? colors : DEFAULT_DARK_PALETTE;
+  const isLight = palette.mode === 'light';
+  return {
+    isLight,
+    barBg: isLight ? 'rgba(255,255,255,0.94)' : 'rgba(18,22,28,0.92)',
+    border: isLight ? palette.outline : 'rgba(255,82,82,0.45)',
+    text: palette.onSurfacePrimary,
+    muted: palette.onSurfaceSecondary,
+    btnBg: isLight ? palette.surfaceHighlight : 'rgba(255,255,255,0.08)',
+    stopBg: isLight ? 'rgba(255,82,82,0.12)' : 'rgba(255,82,82,0.22)',
+    noticeBg: isLight ? palette.surface : 'rgba(18,22,28,0.94)',
+    noticeBorder: palette.outline,
+    primary: palette.primary,
+  };
+}
+
+function RecDot({ paused }) {
+  const pulse = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    if (paused) {
+      pulse.stopAnimation();
+      pulse.setValue(1);
+      return undefined;
+    }
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulse, {
+          toValue: 0.25,
+          duration: 650,
+          easing: Easing.inOut(Easing.quad),
+          useNativeDriver: true,
+        }),
+        Animated.timing(pulse, {
+          toValue: 1,
+          duration: 650,
+          easing: Easing.inOut(Easing.quad),
+          useNativeDriver: true,
+        }),
+      ]),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [paused, pulse]);
+
+  return (
+    <Animated.View
+      style={[
+        styles.dot,
+        { opacity: pulse, transform: [{ scale: pulse.interpolate({ inputRange: [0.25, 1], outputRange: [0.75, 1] }) }] },
+      ]}
+    />
+  );
+}
+
+export function LiveRecordingOverlay({
+  status,
+  elapsedMs,
+  colors,
+  topInset = 12,
+  showTransport = true,
+  onPause,
+  onResume,
+  onStop,
+}) {
+  if (status !== 'recording' && status !== 'paused') return null;
+
+  const theme = resolveTheme(colors);
+  const paused = status === 'paused';
+
+  return (
+    <View
+      pointerEvents="box-none"
+      style={[styles.wrap, { top: Math.max(topInset, 10) }]}
+    >
+      <View
+        style={[
+          styles.bar,
+          {
+            backgroundColor: theme.barBg,
+            borderColor: paused ? theme.border : REC_RED,
+          },
+        ]}
+      >
+        <View style={styles.recLabel}>
+          <RecDot paused={paused} />
+          <Text style={[styles.recText, { color: REC_RED }]}>
+            {paused ? 'PAUSED' : 'REC'}
+          </Text>
+          <Text style={[styles.timeText, { color: theme.text }]}>
+            {formatRecElapsed(elapsedMs)}
+          </Text>
+        </View>
+
+        {showTransport ? (
+          <View style={styles.transport}>
+            <TouchableOpacity
+              style={[styles.roundBtn, { backgroundColor: theme.btnBg }]}
+              onPress={(e) => {
+                e?.stopPropagation?.();
+                if (paused) onResume?.();
+                else onPause?.();
+              }}
+              hitSlop={10}
+              accessibilityLabel={paused ? 'Resume recording' : 'Pause recording'}
+            >
+              <PlayerIcon
+                name={paused ? 'play' : 'pause'}
+                size={16}
+                color={theme.text}
+              />
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={[styles.roundBtn, { backgroundColor: theme.stopBg }]}
+              onPress={(e) => {
+                e?.stopPropagation?.();
+                onStop?.();
+              }}
+              hitSlop={10}
+              accessibilityLabel="Stop recording"
+            >
+              <PlayerIcon name="stop" size={16} color={REC_RED} />
+            </TouchableOpacity>
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+export function LiveRecordingNotice({ notice, colors, onDismiss }) {
+  if (!notice) return null;
+  const theme = resolveTheme(colors);
+  const isError = notice.type === 'error';
+  let iconName = 'check-circle-outline';
+  if (isError) iconName = 'alert-circle-outline';
+  else if (notice.type === 'info') iconName = 'information-outline';
+  const accent = isError ? REC_RED : theme.primary;
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.9}
+      onPress={onDismiss}
+      style={[
+        styles.notice,
+        {
+          backgroundColor: theme.noticeBg,
+          borderColor: isError ? REC_RED : theme.primary,
+        },
+      ]}
+    >
+      <PlayerIcon
+        name={iconName}
+        size={18}
+        color={accent}
+      />
+      <Text style={[styles.noticeText, { color: theme.text }]} numberOfLines={2}>
+        {notice.message}
+      </Text>
+      <PlayerIcon name="close" size={16} color={theme.muted} />
+    </TouchableOpacity>
+  );
+}
+
+export function PipRecordingBadge({ status, elapsedMs }) {
+  if (status !== 'recording' && status !== 'paused') return null;
+  return (
+    <View style={[styles.pipRec, status === 'paused' && styles.pipRecPaused]}>
+      <View style={styles.pipDot} />
+      <Text style={styles.pipRecText}>
+        {status === 'paused' ? 'PAUSED' : `REC ${formatRecElapsed(elapsedMs)}`}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    zIndex: 80,
+    alignItems: 'center',
+    pointerEvents: 'box-none',
+  },
+  bar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    paddingLeft: 12,
+    paddingRight: 8,
+    paddingVertical: 6,
+    borderRadius: 22,
+    borderWidth: 1,
+    ...(isWeb() || isElectron()
+      ? {
+        boxShadow: '0 6px 18px rgba(0,0,0,0.28)',
+      }
+      : {
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.28,
+        shadowRadius: 10,
+        elevation: 8,
+      }),
+  },
+  recLabel: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  dot: {
+    width: 9,
+    height: 9,
+    borderRadius: 5,
+    backgroundColor: REC_RED,
+  },
+  recText: {
+    fontSize: 11,
+    fontWeight: '800',
+    letterSpacing: 1.2,
+  },
+  timeText: {
+    fontSize: 13,
+    fontWeight: '700',
+    fontVariant: ['tabular-nums'],
+    minWidth: 42,
+  },
+  transport: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  roundBtn: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  notice: {
+    position: 'absolute',
+    left: 16,
+    right: 16,
+    bottom: 28,
+    zIndex: 90,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    borderRadius: 14,
+    borderWidth: 1,
+    ...(isWeb() || isElectron()
+      ? {
+        boxShadow: '0 8px 22px rgba(0,0,0,0.28)',
+      }
+      : {
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.25,
+        shadowRadius: 10,
+        elevation: 8,
+      }),
+  },
+  noticeText: {
+    flex: 1,
+    fontSize: 13,
+    fontWeight: '600',
+    lineHeight: 18,
+  },
+  pipRec: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: REC_RED,
+    paddingHorizontal: 5,
+    paddingVertical: 1.5,
+    borderRadius: 4,
+    gap: 3,
+  },
+  pipRecPaused: {
+    backgroundColor: '#C77700',
+  },
+  pipDot: {
+    width: 4,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: '#FFF',
+  },
+  pipRecText: {
+    color: '#FFF',
+    fontSize: 8,
+    fontWeight: '800',
+    letterSpacing: 0.3,
+  },
+});

package/src/native/media/WebVideoPlayer.js

@@ -0,0 +1,320 @@
+import { forwardRef, useImperativeHandle, useRef, useEffect, useCallback, useState } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useWebMediaSession } from './web/useWebMediaSession';
+import { useWebVideoAspectRatio } from './web/useWebVideoAspectRatio';
+import { useWebMpegTsPlayback } from './web/useWebMpegTsPlayback';
+import { useWebHlsPlayback } from './web/useWebHlsPlayback';
+import { useWebAc3AudioPlayback } from './web/useWebAc3AudioPlayback';
+
+export const WebVideoPlayer = forwardRef(({
+  streamUrl,
+  paused,
+  muted,
+  volume = 100,
+  playbackRate = 1,
+  videoAspectRatio,
+  title,
+  posterUrl,
+  isLive,
+  audioOnly = false,
+  videoOnly = false,
+  captions = [],
+  onProgress,
+  onPlaying,
+  onBuffering,
+  onError,
+  onEnded,
+  onTogglePlayPause,
+  onSeekBy,
+  onPlaybackRoute,
+}, ref) => {
+  const videoRef = useRef(null);
+  const pausedRef = useRef(paused);
+  const playbackRateRef = useRef(playbackRate);
+  const lastKnownPosRef = useRef(0);
+  const onPlaybackRouteRef = useRef(onPlaybackRoute);
+  const onPlayingRef = useRef(onPlaying);
+  const onBufferingRef = useRef(onBuffering);
+  const onErrorRef = useRef(onError);
+  const playbackErrorRef = useRef(onError);
+  const onEndedRef = useRef(onEnded);
+  const [activeUrl, setActiveUrl] = useState('');
+  pausedRef.current = paused;
+  playbackRateRef.current = playbackRate;
+  onPlaybackRouteRef.current = onPlaybackRoute;
+  onPlayingRef.current = onPlaying;
+  onBufferingRef.current = onBuffering;
+  onErrorRef.current = onError;
+  onEndedRef.current = onEnded;
+
+  const handlePlaybackError = useCallback((error) => {
+    onErrorRef.current?.(error);
+  }, []);
+  playbackErrorRef.current = handlePlaybackError;
+
+  const mpegTsPlayback = useWebMpegTsPlayback({
+    streamUrl,
+    activeUrl,
+    isLive,
+    videoOnly,
+    videoRef,
+    pausedRef,
+    onErrorRef: playbackErrorRef,
+    onBufferingRef,
+  });
+  const useMpegTsSource = mpegTsPlayback.useMpegTs;
+  const useAc3Fallback = mpegTsPlayback.useAc3Fallback;
+  const useHlsSource = useWebHlsPlayback({
+    activeUrl,
+    isLive,
+    videoRef,
+    pausedRef,
+    onErrorRef: playbackErrorRef,
+  });
+  const ac3Audio = useWebAc3AudioPlayback({
+    active: useAc3Fallback,
+    streamUrl: activeUrl,
+    enabled: !muted,
+    paused,
+    volume,
+    videoRef,
+  });
+
+  // 1. Aspect Ratio Styling
+  const { videoStyle, applyAspectRatio } = useWebVideoAspectRatio(videoAspectRatio, audioOnly);
+  const videoSource = useMpegTsSource || useHlsSource ? undefined : activeUrl;
+  let streamMode = useHlsSource ? 'hls' : 'native';
+  if (useMpegTsSource) streamMode = 'mpegts';
+  const resolvedScheme = new URL(activeUrl || 'http://localhost', 'http://localhost').protocol.replace(':', '');
+
+  // Report active streaming route
+  const reportPlaybackRoute = useCallback((video, attachedUrl) => {
+    const emit = onPlaybackRouteRef.current;
+    if (typeof emit !== 'function') return;
+    const current = video?.currentSrc || video?.src || '';
+    const httpCurrent = /^https?:/i.test(current) && !current.startsWith('blob:') ? current : '';
+    const raw = httpCurrent || attachedUrl || '';
+    if (raw) emit(raw);
+  }, []);
+
+  // Progress emitter
+  const emitProgress = useCallback(() => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    const curTime = video.currentTime || 0;
+    const duration = video.duration || 0;
+
+    if (Number.isFinite(curTime)) {
+      lastKnownPosRef.current = curTime;
+    }
+
+    if (typeof onProgress === 'function') {
+      onProgress({
+        currentTime: curTime * 1000,
+        duration: (Number.isFinite(duration) && duration > 0 ? duration : 0) * 1000,
+        target: curTime,
+      });
+    }
+  }, [onProgress]);
+
+  // The host supplies the media URL. Scheme and source resolution are left to
+  // the consumer and the playback engine on each platform.
+  useEffect(() => {
+    if (!streamUrl) {
+      setActiveUrl('');
+      return undefined;
+    }
+    setActiveUrl(streamUrl);
+    return undefined;
+  }, [streamUrl]);
+
+  // MediaSession API
+  useWebMediaSession({
+    title,
+    posterUrl,
+    isLive,
+    paused,
+    videoRef,
+    pausedRef,
+    lastKnownPosRef,
+    onTogglePlayPause,
+    onSeekBy,
+  });
+
+  // Sync play/pause prop changes
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    if (paused) {
+      video.pause();
+    } else if (
+      video.dataset.mpegtsCodecGate !== 'pending'
+      && video.paused
+      && (video.src || video.currentSrc)
+    ) {
+      video.play().catch(() => {});
+    }
+  }, [paused, activeUrl]);
+
+  // Gain and volume
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    try {
+      video.muted = muted;
+      video.volume = Math.max(0, Math.min(1, (volume ?? 100) / 100));
+    } catch {}
+
+  }, [muted, volume, activeUrl]);
+
+  // Playback rate
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    if (playbackRate) {
+      try {
+        video.playbackRate = playbackRate;
+      } catch {}
+    }
+  }, [playbackRate, activeUrl]);
+
+  // Imperative handle for parent component control
+  useImperativeHandle(ref, () => ({
+    reload() {
+      const video = videoRef.current;
+      if (video && activeUrl) {
+        video.currentTime = 0;
+        video.play().catch(() => {});
+      }
+    },
+    seek(ratio) {
+      const video = videoRef.current;
+      if (!video) return;
+      const duration = video.duration || 0;
+      if (Number.isFinite(duration) && duration > 0) {
+        video.currentTime = Math.max(0, Math.min(1, ratio)) * duration;
+      }
+    },
+    seekTo(seconds) {
+      const video = videoRef.current;
+      if (!video || !Number.isFinite(seconds)) return;
+      video.currentTime = seconds;
+    },
+    changeVideoAspectRatio(aspect) {
+      applyAspectRatio(aspect);
+    },
+    async requestPictureInPicture() {
+      const video = videoRef.current;
+      if (video && typeof video.requestPictureInPicture === 'function' && typeof document !== 'undefined' && document.pictureInPictureEnabled) {
+        return await video.requestPictureInPicture();
+      }
+      return null;
+    },
+    async exitPictureInPicture() {
+      if (typeof document !== 'undefined' && document.pictureInPictureElement && typeof document.exitPictureInPicture === 'function') {
+        return await document.exitPictureInPicture();
+      }
+      return null;
+    },
+    getVideoElement() {
+      return videoRef.current;
+    },
+    activateAudio(nextVolume) {
+      return ac3Audio.activateAudio(nextVolume);
+    },
+    deactivateAudio() {
+      ac3Audio.deactivateAudio();
+    },
+  }));
+
+  return (
+    <View style={styles.container} collapsable={false}>
+      {activeUrl ? (
+        <video
+          key={activeUrl}
+          ref={videoRef}
+          data-resolved-scheme={resolvedScheme}
+          data-stream-mode={streamMode}
+          src={videoSource}
+          autoPlay={!paused}
+          muted={muted}
+          playsInline
+          controls={false}
+          style={videoStyle}
+          onPlaying={() => {
+            const video = videoRef.current;
+            reportPlaybackRoute(video, activeUrl);
+            onPlayingRef.current?.();
+            onBufferingRef.current?.(false);
+            emitProgress();
+          }}
+          onWaiting={() => {
+            onBufferingRef.current?.(true);
+          }}
+          onPause={() => {
+            onBufferingRef.current?.(false);
+          }}
+          onTimeUpdate={emitProgress}
+          onLoadedMetadata={() => {
+            emitProgress();
+            reportPlaybackRoute(videoRef.current, activeUrl);
+          }}
+          onEnded={() => {
+            onEndedRef.current?.();
+          }}
+          onCanPlay={() => {
+            const video = videoRef.current;
+            if (video && video.dataset.mpegtsCodecGate !== 'pending' && !pausedRef.current && video.paused) {
+              video.play().catch(() => {});
+            }
+          }}
+          onError={(e) => {
+            const video = videoRef.current;
+            const mediaError = video?.error;
+            if (!video?.src && !video?.currentSrc) {
+              return;
+            }
+            if (video && video.readyState >= 2) {
+              return;
+            }
+            playbackErrorRef.current?.({
+              message: mediaError?.message || 'Failed to load stream.',
+              err: mediaError || e,
+            });
+          }}
+        >
+          <track
+            kind="captions"
+            src={captions[0]?.src || 'data:text/vtt,WEBVTT%0A%0A'}
+            srcLang={captions[0]?.language || 'und'}
+            label={captions[0]?.label || 'Captions'}
+            default={!captions.length || Boolean(captions[0]?.default)}
+          />
+          {captions.slice(1).map((caption, index) => (
+            <track
+              key={caption.id || caption.src || index}
+              kind="captions"
+              src={caption.src}
+              srcLang={caption.language || 'und'}
+              label={caption.label || caption.language || `Caption ${index + 1}`}
+              default={Boolean(caption.default)}
+            />
+          ))}
+        </video>
+      ) : null}
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: '#000',
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+  },
+});