@cinecrew/cinecrew-player 0.1.1

package/src/native/media/player/VerticalIndicator.js

@@ -0,0 +1,184 @@
+import { StyleSheet, View, TouchableOpacity } from 'react-native';
+import { isWeb } from '../../../utils/runtimePlatform';
+import { getBrightnessIcon, getVolumeIcon } from './playerConstants';
+import { PlayerIcon } from '../../customization';
+
+export const BrightnessIndicator = ({
+  visible,
+  brightness,
+  leftInset = 28,
+  onPointerDown,
+  onNativeGrant,
+  onNativeMove,
+}) => {
+  if (!visible) return null;
+
+  return (
+    <View
+      style={[
+        styles.verticalIndicatorContainer,
+        styles.verticalIndicatorLeft,
+        { left: leftInset },
+      ]}
+      pointerEvents="box-none"
+    >
+      <View
+        style={styles.verticalIndicatorPill}
+        {...(isWeb()
+          ? {
+              onPointerDown,
+              onMouseDown: onPointerDown,
+              onTouchStart: onPointerDown,
+            }
+          : {
+              onStartShouldSetResponder: () => true,
+              onResponderGrant: onNativeGrant,
+              onResponderMove: onNativeMove,
+            })}
+      >
+        <View style={styles.verticalIndicatorIconWrap} pointerEvents="none">
+          <PlayerIcon
+            name={getBrightnessIcon(brightness)}
+            size={20}
+            color="#FFD60A"
+          />
+        </View>
+        <View style={styles.verticalIndicatorTrack} pointerEvents="none">
+          <View
+            style={[
+              styles.verticalIndicatorFill,
+              {
+                height: `${Math.round(brightness * 100)}%`,
+                backgroundColor: '#FFD60A',
+              },
+            ]}
+          />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export const VolumeIndicator = ({
+  visible,
+  volume,
+  muted,
+  rightInset = 28,
+  onPointerDown,
+  onNativeGrant,
+  onNativeMove,
+  onToggleMute,
+}) => {
+  if (!visible) return null;
+
+  return (
+    <View
+      style={[
+        styles.verticalIndicatorContainer,
+        styles.verticalIndicatorRight,
+        { right: rightInset },
+      ]}
+      pointerEvents="box-none"
+    >
+      <View
+        style={styles.verticalIndicatorPill}
+        {...(isWeb()
+          ? {
+              onPointerDown,
+              onMouseDown: onPointerDown,
+              onTouchStart: onPointerDown,
+            }
+          : {
+              onStartShouldSetResponder: () => true,
+              onResponderGrant: onNativeGrant,
+              onResponderMove: onNativeMove,
+            })}
+      >
+        <TouchableOpacity
+          style={styles.verticalIndicatorIconWrap}
+          onPress={(e) => {
+            e.stopPropagation();
+            onToggleMute();
+          }}
+          activeOpacity={0.7}
+        >
+          <PlayerIcon
+            name={getVolumeIcon(muted ? 0 : volume)}
+            size={20}
+            color={muted ? '#FF5252' : '#00E5FF'}
+          />
+        </TouchableOpacity>
+        <View style={styles.verticalIndicatorTrack} pointerEvents="none">
+          <View
+            style={[
+              styles.verticalIndicatorFill,
+              {
+                height: `${muted ? 0 : volume}%`,
+                backgroundColor: muted ? '#FF5252' : '#00E5FF',
+              },
+            ]}
+          />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  verticalIndicatorContainer: {
+    position: 'absolute',
+    top: 0,
+    bottom: 32,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 150,
+  },
+  verticalIndicatorLeft: {
+    left: 20,
+  },
+  verticalIndicatorRight: {
+    right: 20,
+  },
+  verticalIndicatorPill: {
+    width: 48,
+    height: 184,
+    paddingVertical: 12,
+    paddingHorizontal: 6,
+    borderRadius: 24,
+    backgroundColor: 'rgba(0, 0, 0, 0.48)',
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.16)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.35,
+    shadowRadius: 8,
+    elevation: 6,
+    ...(isWeb() ? {
+      boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.35)',
+      cursor: 'pointer',
+      userSelect: 'none',
+      touchAction: 'none',
+    } : null),
+  },
+  verticalIndicatorIconWrap: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 26,
+    width: 26,
+  },
+  verticalIndicatorTrack: {
+    width: 8,
+    flex: 1,
+    marginVertical: 8,
+    borderRadius: 4,
+    backgroundColor: 'rgba(255, 255, 255, 0.18)',
+    overflow: 'hidden',
+    justifyContent: 'flex-end',
+  },
+  verticalIndicatorFill: {
+    width: '100%',
+    borderRadius: 4,
+  },
+});

package/src/native/media/player/index.js

@@ -0,0 +1,9 @@
+export * from './playerConstants';
+export * from './VLCBoundary';
+export * from './ExoVideoFallback';
+export * from './AudioOnlyView';
+export * from './PipOverlay';
+export * from './CenterControls';
+export * from './PlayerTopBar';
+export * from './PlayerBottomBar';
+export * from './VerticalIndicator';

package/src/native/media/player/playerConstants.js

@@ -0,0 +1,159 @@
+import { Easing } from 'react-native';
+import { isWeb } from '../../../utils/runtimePlatform';
+
+export const USER_AGENT = 'Lavf/58.29.100';
+export const PLAYBACK_SPEEDS = [0.25, 0.5, 1, 1.25, 1.5, 1.75, 2];
+export const PIP_WIDTH = isWeb() ? 360 : 280;
+export const PIP_HEIGHT = isWeb() ? 202 : 158;
+export const PIP_RIGHT = isWeb() ? 24 : 16;
+export const PIP_BOTTOM = isWeb() ? 24 : 36;
+export const PIP_ANIM_EASING = Easing.bezier(0.22, 1, 0.36, 1);
+export const PIP_CORNERS = ['tl', 'tr', 'bl', 'br'];
+
+export function getPipCornerPosition(corner, winW, winH, insets = {}) {
+  const padX = PIP_RIGHT;
+  const padTop = Math.max(insets.top || 0, isWeb() ? 16 : 8) + 8;
+  const padBottom = PIP_BOTTOM;
+  const left = corner === 'tl' || corner === 'bl'
+    ? padX
+    : Math.max(padX, winW - PIP_WIDTH - padX);
+  const top = corner === 'tl' || corner === 'tr'
+    ? padTop
+    : Math.max(padBottom, winH - PIP_HEIGHT - padBottom);
+  return { left, top };
+}
+
+export function nearestPipCorner(x, y, winW, winH, insets) {
+  let best = 'br';
+  let bestDist = Infinity;
+  for (const corner of PIP_CORNERS) {
+    const pos = getPipCornerPosition(corner, winW, winH, insets);
+    const dist = (pos.left - x) ** 2 + (pos.top - y) ** 2;
+    if (dist < bestDist) {
+      bestDist = dist;
+      best = corner;
+    }
+  }
+  return best;
+}
+
+export const ASPECT_OPTIONS = [
+  { label: 'Fit Screen', value: 'FIT' },
+  { label: 'Fill Screen', value: 'FILL_SCREEN' },
+  { label: '16:9', value: '16:9' },
+  { label: '4:3', value: '4:3' },
+  { label: '21:9', value: '21:9' },
+  { label: '1:1', value: '1:1' },
+];
+
+export function calculateScreenAspectRatio(width, height) {
+  if (!width || !height) return '16:9';
+  const w = Math.max(width, height);
+  const h = Math.min(width, height);
+  const ratio = w / h;
+
+  if (Math.abs(ratio - (16 / 9)) < 0.05) return '16:9';
+  if (Math.abs(ratio - (4 / 3)) < 0.05) return '4:3';
+  if (Math.abs(ratio - (16 / 10)) < 0.05) return '16:10';
+  if (Math.abs(ratio - (18 / 9)) < 0.05) return '18:9';
+  if (Math.abs(ratio - (19.5 / 9)) < 0.05) return '39:18';
+  if (Math.abs(ratio - (20 / 9)) < 0.05) return '20:9';
+  if (Math.abs(ratio - (21 / 9)) < 0.05) return '21:9';
+
+  const num = Math.round(ratio * 100);
+  return `${num}:100`;
+}
+
+export function formatTime(seconds) {
+  if (!seconds || Number.isNaN(seconds) || seconds <= 0) return '00:00';
+  const totalSecs = Math.floor(seconds);
+  const mins = Math.floor(totalSecs / 60);
+  const secs = totalSecs % 60;
+  const pad = (n) => String(n).padStart(2, '0');
+  if (mins >= 60) {
+    const hrs = Math.floor(mins / 60);
+    return `${hrs}:${pad(mins % 60)}:${pad(secs)}`;
+  }
+  return `${pad(mins)}:${pad(secs)}`;
+}
+
+export function getBrightnessIcon(val) {
+  if (val >= 0.7) return 'white-balance-sunny';
+  if (val >= 0.4) return 'brightness-6';
+  return 'brightness-4';
+}
+
+export function isSafariOrIOS() {
+  if (!isWeb() || typeof navigator === 'undefined') return false;
+  const ua = navigator.userAgent || '';
+  const isIOS = /iPad|iPhone|iPod/.test(ua) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+  const isSafari = /^((?!chrome|android).)*safari/i.test(ua) || (/AppleWebKit/i.test(ua) && !/Chrome|CriOS|OPR|Edge|Edg/i.test(ua));
+  return isIOS || isSafari;
+}
+
+export function getVolumeIcon(vol) {
+  if (!vol || vol <= 0) return 'volume-mute';
+  if (vol > 50) return 'volume-high';
+  return 'volume-medium';
+}
+
+export function getWebPoint(e) {
+  const ne = e?.nativeEvent ?? e;
+  const touch = e?.touches?.[0]
+    || ne?.touches?.[0]
+    || ne?.changedTouches?.[0];
+  const x = Number(touch?.clientX ?? e?.clientX ?? ne?.clientX ?? ne?.pageX);
+  const y = Number(touch?.clientY ?? e?.clientY ?? ne?.clientY ?? ne?.pageY);
+  if (!Number.isFinite(x) || !Number.isFinite(y)) return null;
+  return { x, y };
+}
+
+export function bindWebVerticalDrag(e, updateFromY) {
+  if (bindWebVerticalDrag.active) return;
+  if (typeof e?.stopPropagation === 'function') e.stopPropagation();
+  const point = getWebPoint(e);
+  if (!point) return;
+  const target = e.currentTarget;
+  const rect = typeof target?.getBoundingClientRect === 'function'
+    ? target.getBoundingClientRect()
+    : null;
+  if (!rect) return;
+  bindWebVerticalDrag.active = true;
+  updateFromY(point.y, rect.top, rect.height);
+  const pointerId = e.pointerId ?? e.nativeEvent?.pointerId;
+  if (pointerId !== null && typeof target.setPointerCapture === 'function') {
+    try { target.setPointerCapture(pointerId); } catch { /* ignore */ }
+  }
+  const onMove = (moveEvt) => {
+    const next = getWebPoint(moveEvt);
+    if (!next) return;
+    if (typeof moveEvt.preventDefault === 'function') moveEvt.preventDefault();
+    updateFromY(next.y, rect.top, rect.height);
+  };
+  const onUp = () => {
+    bindWebVerticalDrag.active = false;
+    window.removeEventListener('pointermove', onMove);
+    window.removeEventListener('pointerup', onUp);
+    window.removeEventListener('pointercancel', onUp);
+    window.removeEventListener('touchmove', onMove);
+    window.removeEventListener('touchend', onUp);
+    window.removeEventListener('mousemove', onMove);
+    window.removeEventListener('mouseup', onUp);
+  };
+  window.addEventListener('pointermove', onMove, { passive: false });
+  window.addEventListener('pointerup', onUp);
+  window.addEventListener('pointercancel', onUp);
+  window.addEventListener('touchmove', onMove, { passive: false });
+  window.addEventListener('touchend', onUp);
+  window.addEventListener('mousemove', onMove);
+  window.addEventListener('mouseup', onUp);
+}
+
+export function applyTrackDefaults(selected, setSelected, setTracks, tracksProp) {
+  if (!Array.isArray(tracksProp)) return;
+  setTracks(tracksProp);
+  if (selected !== null) return;
+  const active = tracksProp.find((t) => t.selected || t.active) || tracksProp[0];
+  if (active) setSelected(active.id);
+}
+

package/src/native/media/web/useWebAc3AudioPlayback.native.js

@@ -0,0 +1,6 @@
+export function useWebAc3AudioPlayback() {
+  return {
+    activateAudio: () => false,
+    deactivateAudio: () => {},
+  };
+}

package/src/native/media/web/useWebAc3AudioPlayback.web.js

@@ -0,0 +1,219 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+function createVideoClockSynchronizer({ audio, videoRef, isCancelled }) {
+  let anchorTimestamp = null;
+  let previousTimestamp = null;
+  let anchorVideoTime = null;
+
+  return async (timestamp) => {
+    const context = audio.context;
+    const video = videoRef.current;
+    if (!video) return null;
+    if (anchorTimestamp === null) {
+      anchorTimestamp = timestamp;
+      anchorVideoTime = Number(video.currentTime) || 0;
+    }
+    if (previousTimestamp !== null && timestamp < previousTimestamp - 1) {
+      anchorTimestamp = timestamp;
+      anchorVideoTime = Number(video.currentTime) || anchorVideoTime;
+    }
+    previousTimestamp = timestamp;
+
+    const getVideoDelta = () => anchorVideoTime + (timestamp - anchorTimestamp)
+      - (Number(video.currentTime) || 0);
+    let videoDelta = getVideoDelta();
+    if (videoDelta < -0.25) return null;
+
+    while (!isCancelled() && (context.state !== 'running' || videoDelta > 0.75)) {
+      await new Promise((resolve) => setTimeout(resolve, 40));
+      if (isCancelled()) return null;
+      videoDelta = getVideoDelta();
+    }
+    if (videoDelta < -0.25) return null;
+    return { video, context, videoDelta };
+  };
+}
+
+async function scheduleAc3Samples({ iterator, audio, videoRef, sources, isCancelled, setState }) {
+  const synchronize = createVideoClockSynchronizer({ audio, videoRef, isCancelled });
+  let decodedSampleCount = 0;
+  for await (const sample of iterator) {
+    if (isCancelled()) {
+      sample.close();
+      break;
+    }
+    const buffer = sample.toAudioBuffer();
+    const timestamp = sample.timestamp;
+    sample.close();
+    if (isCancelled() || !buffer.numberOfChannels || !buffer.length) continue;
+
+    const timing = await synchronize(timestamp);
+    if (!timing || isCancelled()) continue;
+    const source = timing.context.createBufferSource();
+    source.buffer = buffer;
+    source.connect(audio.gain);
+    source.onended = () => {
+      sources.delete(source);
+      source.disconnect();
+    };
+    sources.add(source);
+    const playbackRate = Math.max(0.25, Number(timing.video.playbackRate) || 1);
+    source.start(timing.context.currentTime + Math.max(0.005, timing.videoDelta / playbackRate));
+    decodedSampleCount += 1;
+    if (decodedSampleCount === 1 || decodedSampleCount % 64 === 0) {
+      setState(`playing:${decodedSampleCount}`);
+    }
+  }
+}
+
+async function decodeAc3Stream({ streamUrl, audio, videoRef, resources, sources, isCancelled, setState }) {
+  try {
+    const [{ AudioSampleSink, Input, MPEG_TS, UrlSource }, { registerAc3Decoder }] = await Promise.all([
+      import('mediabunny'),
+      import('@mediabunny/ac3'),
+    ]);
+    if (isCancelled()) return;
+    registerAc3Decoder();
+
+    resources.input = new Input({ source: new UrlSource(streamUrl), formats: [MPEG_TS] });
+    const audioTrack = await resources.input.getPrimaryAudioTrack();
+    if (isCancelled()) return;
+    if (!audioTrack) {
+      setState('no-audio-track');
+      return;
+    }
+
+    resources.iterator = new AudioSampleSink(audioTrack).samples();
+    setState('decoding');
+    await scheduleAc3Samples({
+      iterator: resources.iterator,
+      audio,
+      videoRef,
+      sources,
+      isCancelled,
+      setState,
+    });
+  } catch (error) {
+    if (!isCancelled()) setState(`error:${error?.name || 'decode'}`);
+  }
+}
+
+export function useWebAc3AudioPlayback({
+  active,
+  streamUrl,
+  enabled,
+  paused,
+  volume,
+  videoRef,
+}) {
+  const audioRef = useRef({ context: null, gain: null });
+  const enabledRef = useRef(enabled);
+  const volumeRef = useRef(volume);
+  enabledRef.current = enabled;
+  volumeRef.current = volume;
+
+  const ensureAudioContext = useCallback(() => {
+    if (typeof window === 'undefined') return null;
+    if (audioRef.current.context) return audioRef.current;
+
+    const AudioContextConstructor = window.AudioContext || window.webkitAudioContext;
+    if (!AudioContextConstructor) return null;
+
+    const context = new AudioContextConstructor({ latencyHint: 'interactive' });
+    const gain = context.createGain();
+    gain.gain.value = enabledRef.current
+      ? Math.max(0, Math.min(1, Number(volumeRef.current) / 100))
+      : 0;
+    gain.connect(context.destination);
+    audioRef.current = { context, gain };
+    return audioRef.current;
+  }, []);
+
+  const activateAudio = useCallback((nextVolume) => {
+    const audio = ensureAudioContext();
+    if (!audio) return false;
+
+    const target = Math.max(0, Math.min(1, Number(nextVolume ?? volumeRef.current) / 100));
+    audio.gain.gain.setTargetAtTime(target, audio.context.currentTime, 0.025);
+    if (audio.context.state === 'suspended') {
+      audio.context.resume().catch(() => {});
+    }
+    return true;
+  }, [ensureAudioContext]);
+
+  const deactivateAudio = useCallback(() => {
+    const audio = audioRef.current;
+    if (!audio.context || !audio.gain) return;
+    audio.gain.gain.setTargetAtTime(0, audio.context.currentTime, 0.02);
+  }, []);
+
+  useEffect(() => {
+    const { context, gain } = audioRef.current;
+    if (!context || !gain) return;
+    const target = enabled ? Math.max(0, Math.min(1, Number(volume) / 100)) : 0;
+    gain.gain.setTargetAtTime(target, context.currentTime, 0.025);
+  }, [enabled, volume]);
+
+  useEffect(() => {
+    if (!active) return undefined;
+    ensureAudioContext();
+    return undefined;
+  }, [active, ensureAudioContext]);
+
+  useEffect(() => {
+    const video = videoRef.current;
+    const setState = (state) => {
+      if (video) video.dataset.ac3AudioState = state;
+    };
+
+    if (!active || !streamUrl) {
+      if (video) delete video.dataset.ac3AudioState;
+      return undefined;
+    }
+    if (!enabled || paused) {
+      deactivateAudio();
+      setState(enabled ? 'paused' : 'muted');
+      return undefined;
+    }
+
+    let cancelled = false;
+    const resources = { input: null, iterator: null };
+    const sources = new Set();
+    const audio = ensureAudioContext();
+
+    if (!audio) {
+      setState('unsupported');
+      return undefined;
+    }
+
+    audio.gain.gain.setTargetAtTime(Math.max(0, Math.min(1, Number(volume) / 100)), audio.context.currentTime, 0.025);
+    setState('loading');
+    decodeAc3Stream({
+      streamUrl,
+      audio,
+      videoRef,
+      resources,
+      sources,
+      isCancelled: () => cancelled,
+      setState,
+    });
+    return () => {
+      cancelled = true;
+      try { resources.iterator?.return?.(); } catch {}
+      try { resources.input?.dispose(); } catch {}
+      for (const source of sources) {
+        try { source.stop(); } catch {}
+        try { source.disconnect(); } catch {}
+      }
+      sources.clear();
+    };
+  }, [active, streamUrl, enabled, paused, videoRef, ensureAudioContext, deactivateAudio]);
+
+  useEffect(() => () => {
+    const { context } = audioRef.current;
+    if (context && context.state !== 'closed') context.close().catch(() => {});
+    audioRef.current = { context: null, gain: null };
+  }, []);
+
+  return { activateAudio, deactivateAudio };
+}

package/src/native/media/web/useWebHlsPlayback.native.js

@@ -0,0 +1,3 @@
+export function useWebHlsPlayback() {
+  return false;
+}

package/src/native/media/web/useWebHlsPlayback.web.js

@@ -0,0 +1,66 @@
+import { useEffect } from 'react';
+import Hls from 'hls.js';
+
+const isHlsUrl = (url) => /\.m3u8(?:$|[?#])/i.test(String(url || ''));
+
+export function useWebHlsPlayback({ activeUrl, isLive, videoRef, pausedRef, onErrorRef }) {
+  const useHls = isLive && isHlsUrl(activeUrl);
+
+  useEffect(() => {
+    if (!useHls || !activeUrl || typeof window === 'undefined') return undefined;
+    const video = videoRef.current;
+    if (!video) return undefined;
+
+    let hls;
+    let disposed = false;
+    if (Hls.isSupported()) {
+      hls = new Hls({
+        enableWorker: true,
+        lowLatencyMode: false,
+        backBufferLength: 30,
+        manifestLoadingTimeOut: 8000,
+        manifestLoadingMaxRetry: 3,
+        manifestLoadingRetryDelay: 1000,
+        manifestLoadingMaxRetryTimeout: 8000,
+        levelLoadingTimeOut: 8000,
+        levelLoadingMaxRetry: 2,
+        levelLoadingRetryDelay: 1000,
+        levelLoadingMaxRetryTimeout: 8000,
+        fragLoadingTimeOut: 10000,
+        fragLoadingMaxRetry: 4,
+        fragLoadingRetryDelay: 1000,
+        fragLoadingMaxRetryTimeout: 15000,
+      });
+      hls.on(Hls.Events.ERROR, (_event, data) => {
+        if (disposed || !data?.fatal) return;
+        const status = Number(data?.response?.code || data?.response?.status);
+        const httpStatus = Number.isFinite(status) && status >= 100 ? status : null;
+        const message = httpStatus
+          ? `Stream request failed (HTTP ${httpStatus}).`
+          : `HLS playback failed (${String(data?.details || data?.type || 'unknown error')}).`;
+        onErrorRef.current?.({ message, httpStatus, err: data });
+      });
+      hls.loadSource(activeUrl);
+      hls.attachMedia(video);
+    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+      video.src = activeUrl;
+      video.load();
+      if (!pausedRef.current) video.play().catch(() => {});
+    } else {
+      onErrorRef.current?.({ message: 'This browser does not support HLS playback.' });
+    }
+
+    return () => {
+      disposed = true;
+      if (hls) {
+        hls.destroy();
+      } else if (video.src === activeUrl) {
+        video.pause();
+        video.removeAttribute('src');
+        video.load();
+      }
+    };
+  }, [activeUrl, useHls, videoRef, pausedRef, onErrorRef]);
+
+  return useHls;
+}