@mux/mux-react-native-player 0.1.0

package/build/MuxVideoControls.js

@@ -0,0 +1,1032 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Animated, Image, PanResponder, Pressable, ScrollView, StyleSheet, Text, useWindowDimensions, View, } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+const emptyChapters = [];
+const emptyKeyMoments = [];
+const emptyCaptionTracks = [];
+const robotImages = {
+    summary: require('../assets/MuxRobot_03.gif'),
+    chapters: require('../assets/MuxRobot_02.gif'),
+    moments: require('../assets/MuxRobot_05.gif'),
+};
+const defaultTheme = {
+    accentColor: '#FA50B5',
+    backgroundColor: 'transparent',
+    buttonBackgroundColor: 'rgba(20, 28, 38, 0.28)',
+    buttonTextColor: '#f8fbff',
+    buttonSize: 48,
+    playButtonSize: 72,
+    fullscreenButtonSize: 26,
+    progressTrackColor: '#FA50B5',
+    bufferedTrackColor: 'rgba(248, 251, 255, 0.28)',
+    trackColor: 'rgba(248, 251, 255, 0.16)',
+    trackHeight: 4,
+    textColor: '#f8fbff',
+    seekSeconds: 10,
+};
+const frostBorderColor = 'rgba(255, 255, 255, 0.18)';
+const frostBorderWidth = StyleSheet.hairlineWidth * 2;
+export function MuxVideoControls({ player, status, shouldPlay, theme, robots, allowsFullscreen = false, isFullscreen = false, onToggleFullscreen, generatedSummary, generatedChapters, generatedKeyMoments, onGeneratedSummaryChange, onGeneratedChaptersChange, onGeneratedKeyMomentsChange, }) {
+    const controlsTheme = React.useMemo(() => ({ ...defaultTheme, ...theme }), [theme]);
+    const [hidden, setHidden] = React.useState(false);
+    const [interactionTick, setInteractionTick] = React.useState(0);
+    const [trackWidth, setTrackWidth] = React.useState(0);
+    const [containerWidth, setContainerWidth] = React.useState(0);
+    const [containerHeight, setContainerHeight] = React.useState(0);
+    const [containerPageX, setContainerPageX] = React.useState(0);
+    const [scrubbing, setScrubbing] = React.useState(false);
+    const [scrubTime, setScrubTime] = React.useState(0);
+    const [pendingTarget, setPendingTarget] = React.useState(null);
+    const [activeRobotsPanel, setActiveRobotsPanel] = React.useState(null);
+    const [robotsLoading, setRobotsLoading] = React.useState(null);
+    const [robotsError, setRobotsError] = React.useState(null);
+    const [captionsOpen, setCaptionsOpen] = React.useState(false);
+    const robotsRequestRef = React.useRef(0);
+    const controlsRootRef = React.useRef(null);
+    const opacity = React.useRef(new Animated.Value(1)).current;
+    const { width: windowWidth } = useWindowDimensions();
+    const duration = Number.isFinite(status.duration) ? status.duration : 0;
+    const playerTime = clamp(status.currentTime, 0, duration || 0);
+    const displayTime = scrubbing
+        ? clamp(scrubTime, 0, duration || 0)
+        : pendingTarget !== null
+            ? clamp(pendingTarget, 0, duration || 0)
+            : playerTime;
+    React.useEffect(() => {
+        if (pendingTarget === null) {
+            return;
+        }
+        if (Math.abs(playerTime - pendingTarget) < 0.5) {
+            setPendingTarget(null);
+            return;
+        }
+        const timeout = setTimeout(() => setPendingTarget(null), 1500);
+        return () => clearTimeout(timeout);
+    }, [pendingTarget, playerTime]);
+    const bufferedPosition = clamp(status.bufferedPosition, 0, duration || 0);
+    const progress = duration > 0 ? displayTime / duration : 0;
+    const buffered = duration > 0 ? bufferedPosition / duration : 0;
+    const isPlaying = status.status === 'playing' || shouldPlay;
+    const robotsEnabled = robots != null && robots.enabled !== false;
+    const robotsAssetId = robots?.assetId;
+    const summary = generatedSummary ?? robots?.summary;
+    const chapters = generatedChapters ?? robots?.chapters ?? emptyChapters;
+    const keyMoments = generatedKeyMoments ?? robots?.keyMoments ?? emptyKeyMoments;
+    const captionTracks = status.captionTracks ?? emptyCaptionTracks;
+    const selectedCaptionTrackId = status.selectedCaptionTrackId ?? null;
+    const canSummarize = robotsEnabled && (!!summary || (!!robotsAssetId && !!robots?.onSummarize));
+    const canGenerateChapters = robotsEnabled && (chapters.length > 0 || (!!robotsAssetId && !!robots?.onGenerateChapters));
+    const canFindKeyMoments = robotsEnabled && (keyMoments.length > 0 || (!!robotsAssetId && !!robots?.onFindKeyMoments));
+    const hasRobotsActions = canSummarize || canGenerateChapters || canFindKeyMoments;
+    const isRobotsFocused = activeRobotsPanel !== null;
+    const hasCaptionTracks = captionTracks.length > 0;
+    React.useEffect(() => {
+        robotsRequestRef.current += 1;
+        setActiveRobotsPanel(null);
+        setRobotsLoading(null);
+        setRobotsError(null);
+    }, [robotsAssetId]);
+    React.useEffect(() => {
+        if (!hasCaptionTracks) {
+            setCaptionsOpen(false);
+        }
+    }, [hasCaptionTracks]);
+    const visibleChapters = React.useMemo(() => chapters
+        .filter(chapter => chapter.title && chapter.startTime >= 0 && (duration <= 0 || chapter.startTime <= duration))
+        .slice()
+        .sort((a, b) => a.startTime - b.startTime), [chapters, duration]);
+    const visibleKeyMoments = React.useMemo(() => keyMoments
+        .filter(moment => moment.title && moment.startTime >= 0 && moment.endTime > moment.startTime)
+        .slice()
+        .sort((a, b) => a.startTime - b.startTime), [keyMoments]);
+    const activeChapter = React.useMemo(() => {
+        if (visibleChapters.length === 0) {
+            return undefined;
+        }
+        let current;
+        for (const chapter of visibleChapters) {
+            if (chapter.startTime > displayTime) {
+                break;
+            }
+            current = chapter;
+        }
+        return current;
+    }, [displayTime, visibleChapters]);
+    const measureControlsRoot = React.useCallback(() => {
+        controlsRootRef.current?.measureInWindow((x, _y, width) => {
+            if (Number.isFinite(x)) {
+                setContainerPageX(x);
+            }
+            if (Number.isFinite(width) && width > 0) {
+                setContainerWidth(width);
+            }
+        });
+    }, []);
+    const handleControlsLayout = React.useCallback((event) => {
+        const { width, height } = event.nativeEvent.layout;
+        setContainerWidth(width);
+        setContainerHeight(height);
+        measureControlsRoot();
+    }, [measureControlsRoot]);
+    React.useEffect(() => {
+        measureControlsRoot();
+    }, [measureControlsRoot, windowWidth]);
+    const viewportWidth = windowWidth > 0 ? windowWidth : containerWidth;
+    const offscreenLeftInset = Math.max(0, -containerPageX);
+    const offscreenRightInset = viewportWidth > 0 && containerWidth > 0
+        ? Math.max(0, containerPageX + containerWidth - viewportWidth)
+        : 0;
+    const isPortraitControls = containerWidth > 0 && containerHeight > 0 && containerHeight / containerWidth > 1.25;
+    const visibleControlsWidth = containerWidth > 0
+        ? Math.max(0, containerWidth - offscreenLeftInset - offscreenRightInset)
+        : 0;
+    const isCompactHeight = containerHeight > 0 && containerHeight < 240;
+    const isNarrowControls = isCompactHeight ||
+        isPortraitControls ||
+        (visibleControlsWidth > 0 && visibleControlsWidth < 360);
+    const baseHorizontalInset = visibleControlsWidth > 0 && visibleControlsWidth < 340 ? 10 : isPortraitControls ? 12 : 16;
+    const timelineLeftInset = baseHorizontalInset + offscreenLeftInset;
+    const timelineRightInset = baseHorizontalInset + offscreenRightInset;
+    const centerHorizontalPadding = isNarrowControls ? 10 : 16;
+    const centerHorizontalGap = isNarrowControls ? 18 : 28;
+    const trackHorizontalPadding = isNarrowControls ? 8 : 10;
+    const trackVerticalPadding = isNarrowControls ? 8 : 10;
+    const timePillHorizontalPadding = isNarrowControls ? 8 : 10;
+    const timeFontSize = isNarrowControls ? 11 : 12;
+    const buttonSize = Math.max(36, isNarrowControls ? 40 : controlsTheme.buttonSize);
+    const playButtonSize = Math.max(buttonSize, isCompactHeight ? 52 : isNarrowControls ? 56 : controlsTheme.playButtonSize);
+    const centerVerticalGap = isCompactHeight ? 8 : isPortraitControls ? 14 : 20;
+    const fullscreenButtonSize = Math.max(22, isNarrowControls ? 24 : controlsTheme.fullscreenButtonSize);
+    const trackHeight = Math.max(3, controlsTheme.trackHeight);
+    const fadeOut = React.useCallback(() => {
+        Animated.timing(opacity, {
+            toValue: 0,
+            duration: 200,
+            useNativeDriver: true,
+        }).start(({ finished }) => {
+            if (finished) {
+                setHidden(true);
+            }
+        });
+    }, [opacity]);
+    const fadeIn = React.useCallback(() => {
+        setHidden(false);
+        Animated.timing(opacity, {
+            toValue: 1,
+            duration: 200,
+            useNativeDriver: true,
+        }).start();
+    }, [opacity]);
+    const keepAlive = React.useCallback(() => {
+        setInteractionTick(t => t + 1);
+    }, []);
+    const dismissRobotsPanel = React.useCallback(() => {
+        robotsRequestRef.current += 1;
+        setActiveRobotsPanel(null);
+        setRobotsLoading(null);
+        setRobotsError(null);
+        keepAlive();
+    }, [keepAlive]);
+    const dismissCaptionsPanel = React.useCallback(() => {
+        setCaptionsOpen(false);
+        keepAlive();
+    }, [keepAlive]);
+    const handleBackgroundTap = React.useCallback(() => {
+        if (captionsOpen) {
+            dismissCaptionsPanel();
+            return;
+        }
+        if (activeRobotsPanel || robotsLoading) {
+            dismissRobotsPanel();
+            return;
+        }
+        if (hidden) {
+            fadeIn();
+            setInteractionTick(t => t + 1);
+        }
+        else {
+            fadeOut();
+        }
+    }, [activeRobotsPanel, captionsOpen, dismissCaptionsPanel, dismissRobotsPanel, fadeIn, fadeOut, hidden, robotsLoading]);
+    React.useEffect(() => {
+        if (hidden || scrubbing || activeRobotsPanel || robotsLoading || captionsOpen) {
+            return;
+        }
+        const timer = setTimeout(fadeOut, 3000);
+        return () => clearTimeout(timer);
+    }, [hidden, scrubbing, activeRobotsPanel, robotsLoading, captionsOpen, interactionTick, fadeOut]);
+    const trackRef = React.useRef(null);
+    const scrubStateRef = React.useRef({
+        trackWidth: 0,
+        trackPageX: 0,
+        duration: 0,
+        lastSeekAt: 0,
+        currentTime: 0,
+        wasPlaying: false,
+    });
+    const measureTrack = React.useCallback(() => {
+        trackRef.current?.measureInWindow((x, _y, width) => {
+            if (Number.isFinite(x)) {
+                scrubStateRef.current.trackPageX = x;
+            }
+            if (Number.isFinite(width) && width > 0) {
+                scrubStateRef.current.trackWidth = width;
+            }
+        });
+    }, []);
+    const onTrackLayout = React.useCallback((event) => {
+        setTrackWidth(event.nativeEvent.layout.width);
+        measureTrack();
+    }, [measureTrack]);
+    React.useEffect(() => {
+        scrubStateRef.current.trackWidth = trackWidth;
+        scrubStateRef.current.duration = duration;
+    }, [trackWidth, duration]);
+    const computeTimeFromX = React.useCallback((x) => {
+        const { trackWidth: width, duration: dur } = scrubStateRef.current;
+        if (width <= 0 || dur <= 0) {
+            return 0;
+        }
+        return clamp(x / width, 0, 1) * dur;
+    }, []);
+    const isPlayingRef = React.useRef(isPlaying);
+    isPlayingRef.current = isPlaying;
+    const finishScrub = React.useCallback((commitX) => {
+        if (scrubStateRef.current.duration > 0) {
+            const localX = commitX ?? -1;
+            const target = localX >= 0
+                ? computeTimeFromX(localX)
+                : scrubStateRef.current.currentTime;
+            scrubStateRef.current.currentTime = target;
+            setPendingTarget(target);
+            console.log('[MuxControls] scrub release seekTo=', target);
+            player
+                .seekTo(target)
+                .then(() => console.log('[MuxControls] scrub seekTo OK'))
+                .catch(err => console.log('[MuxControls] scrub seekTo ERROR', err));
+        }
+        setScrubbing(false);
+        setInteractionTick(prev => prev + 1);
+    }, [computeTimeFromX, player]);
+    const panResponder = React.useMemo(() => PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onStartShouldSetPanResponderCapture: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponderCapture: () => true,
+        onPanResponderTerminationRequest: () => false,
+        onShouldBlockNativeResponder: () => true,
+        onPanResponderGrant: (_evt, gestureState) => {
+            if (scrubStateRef.current.duration <= 0) {
+                return;
+            }
+            measureTrack();
+            const localX = gestureState.x0 - scrubStateRef.current.trackPageX;
+            const t = computeTimeFromX(localX);
+            scrubStateRef.current.currentTime = t;
+            setScrubbing(true);
+            setScrubTime(t);
+            console.log('[MuxControls] scrub grant x0=', gestureState.x0, 'trackPageX=', scrubStateRef.current.trackPageX, 'trackWidth=', scrubStateRef.current.trackWidth, 'duration=', scrubStateRef.current.duration, 't=', t);
+        },
+        onPanResponderMove: (_evt, gestureState) => {
+            if (scrubStateRef.current.duration <= 0) {
+                return;
+            }
+            const localX = gestureState.moveX - scrubStateRef.current.trackPageX;
+            const t = computeTimeFromX(localX);
+            scrubStateRef.current.currentTime = t;
+            setScrubTime(t);
+        },
+        onPanResponderRelease: (_evt, gestureState) => {
+            const localX = gestureState.moveX - scrubStateRef.current.trackPageX;
+            finishScrub(localX);
+        },
+        onPanResponderTerminate: (_evt, gestureState) => {
+            const localX = gestureState.moveX - scrubStateRef.current.trackPageX;
+            finishScrub(localX);
+        },
+    }), [computeTimeFromX, finishScrub, measureTrack]);
+    const seekSecondsRef = React.useRef(controlsTheme.seekSeconds);
+    seekSecondsRef.current = controlsTheme.seekSeconds;
+    const seekBack = React.useCallback(() => {
+        console.log('[MuxControls] seekBack pressed, seconds=', seekSecondsRef.current);
+        keepAlive();
+        player
+            .seekBy(-seekSecondsRef.current)
+            .then(() => console.log('[MuxControls] seekBack OK'))
+            .catch(err => console.log('[MuxControls] seekBack ERROR', err));
+    }, [keepAlive, player]);
+    const seekForward = React.useCallback(() => {
+        console.log('[MuxControls] seekForward pressed, seconds=', seekSecondsRef.current);
+        keepAlive();
+        player
+            .seekBy(seekSecondsRef.current)
+            .then(() => console.log('[MuxControls] seekForward OK'))
+            .catch(err => console.log('[MuxControls] seekForward ERROR', err));
+    }, [keepAlive, player]);
+    const togglePlayback = React.useCallback(() => {
+        keepAlive();
+        if (isPlayingRef.current) {
+            runPlayerCommand(player.pause());
+            return;
+        }
+        runPlayerCommand(player.play());
+    }, [keepAlive, player]);
+    const handleToggleFullscreen = React.useCallback(() => {
+        keepAlive();
+        setCaptionsOpen(false);
+        onToggleFullscreen?.();
+    }, [keepAlive, onToggleFullscreen]);
+    const toggleCaptionsPanel = React.useCallback(() => {
+        keepAlive();
+        setCaptionsOpen(open => !open);
+    }, [keepAlive]);
+    const toggleRobotsPanel = React.useCallback((panel) => {
+        keepAlive();
+        setRobotsError(null);
+        if (activeRobotsPanel === panel) {
+            setActiveRobotsPanel(null);
+            return;
+        }
+        if (robotsLoading !== null) {
+            robotsRequestRef.current += 1;
+            setRobotsLoading(null);
+        }
+        setActiveRobotsPanel(panel);
+    }, [activeRobotsPanel, keepAlive, robotsLoading]);
+    const loadSummary = React.useCallback(() => {
+        if (activeRobotsPanel === 'summary' || robotsLoading === 'summary') {
+            dismissRobotsPanel();
+            return;
+        }
+        if (summary || !robotsAssetId || !robots?.onSummarize) {
+            toggleRobotsPanel('summary');
+            return;
+        }
+        keepAlive();
+        const requestId = robotsRequestRef.current + 1;
+        robotsRequestRef.current = requestId;
+        setActiveRobotsPanel('summary');
+        setRobotsLoading('summary');
+        setRobotsError(null);
+        robots
+            .onSummarize({
+            assetId: robotsAssetId,
+            currentTime: displayTime,
+            duration,
+        })
+            .then(result => {
+            if (robotsRequestRef.current !== requestId) {
+                return;
+            }
+            onGeneratedSummaryChange?.(result);
+            setActiveRobotsPanel('summary');
+        })
+            .catch(error => {
+            if (robotsRequestRef.current !== requestId) {
+                return;
+            }
+            setRobotsError(getRobotsErrorMessage(error, 'Summary is not available yet.'));
+            setActiveRobotsPanel('summary');
+        })
+            .finally(() => {
+            if (robotsRequestRef.current === requestId) {
+                setRobotsLoading(null);
+            }
+        });
+    }, [activeRobotsPanel, dismissRobotsPanel, displayTime, duration, keepAlive, robots, robotsAssetId, robotsLoading, summary, toggleRobotsPanel]);
+    const loadChapters = React.useCallback(() => {
+        if (activeRobotsPanel === 'chapters' || robotsLoading === 'chapters') {
+            dismissRobotsPanel();
+            return;
+        }
+        if (chapters.length > 0 || !robotsAssetId || !robots?.onGenerateChapters) {
+            toggleRobotsPanel('chapters');
+            return;
+        }
+        keepAlive();
+        const requestId = robotsRequestRef.current + 1;
+        robotsRequestRef.current = requestId;
+        setActiveRobotsPanel('chapters');
+        setRobotsLoading('chapters');
+        setRobotsError(null);
+        robots
+            .onGenerateChapters({
+            assetId: robotsAssetId,
+            currentTime: displayTime,
+            duration,
+        })
+            .then(result => {
+            if (robotsRequestRef.current !== requestId) {
+                return;
+            }
+            onGeneratedChaptersChange?.(result);
+            setActiveRobotsPanel('chapters');
+        })
+            .catch(error => {
+            if (robotsRequestRef.current !== requestId) {
+                return;
+            }
+            setRobotsError(getRobotsErrorMessage(error, 'Chapters are not available yet.'));
+            setActiveRobotsPanel('chapters');
+        })
+            .finally(() => {
+            if (robotsRequestRef.current === requestId) {
+                setRobotsLoading(null);
+            }
+        });
+    }, [activeRobotsPanel, chapters.length, dismissRobotsPanel, displayTime, duration, keepAlive, robots, robotsAssetId, robotsLoading, toggleRobotsPanel]);
+    const loadKeyMoments = React.useCallback(() => {
+        if (activeRobotsPanel === 'moments' || robotsLoading === 'moments') {
+            dismissRobotsPanel();
+            return;
+        }
+        if (keyMoments.length > 0 || !robotsAssetId || !robots?.onFindKeyMoments) {
+            toggleRobotsPanel('moments');
+            return;
+        }
+        keepAlive();
+        const requestId = robotsRequestRef.current + 1;
+        robotsRequestRef.current = requestId;
+        setActiveRobotsPanel('moments');
+        setRobotsLoading('moments');
+        setRobotsError(null);
+        robots
+            .onFindKeyMoments({
+            assetId: robotsAssetId,
+            currentTime: displayTime,
+            duration,
+        })
+            .then(result => {
+            if (robotsRequestRef.current !== requestId) {
+                return;
+            }
+            onGeneratedKeyMomentsChange?.(result);
+            setActiveRobotsPanel('moments');
+        })
+            .catch(error => {
+            if (robotsRequestRef.current !== requestId) {
+                return;
+            }
+            setRobotsError(getRobotsErrorMessage(error, 'Key moments are not available yet.'));
+            setActiveRobotsPanel('moments');
+        })
+            .finally(() => {
+            if (robotsRequestRef.current === requestId) {
+                setRobotsLoading(null);
+            }
+        });
+    }, [activeRobotsPanel, dismissRobotsPanel, displayTime, duration, keepAlive, keyMoments.length, robots, robotsAssetId, robotsLoading, toggleRobotsPanel]);
+    const seekToRobotsTime = React.useCallback((target) => {
+        keepAlive();
+        setRobotsError(null);
+        setPendingTarget(target);
+        player.seekTo(target).catch(() => {
+            // Seeking from generated navigation is best-effort.
+        });
+    }, [keepAlive, player]);
+    const selectCaptionTrack = React.useCallback((trackId) => {
+        keepAlive();
+        setCaptionsOpen(false);
+        player.setCaptionTrack(trackId).catch(() => {
+            // Caption selection failures are non-fatal and native status will correct UI state.
+        });
+    }, [keepAlive, player]);
+    const defaultPanelMaxHeight = containerHeight > 0
+        ? Math.max(96, Math.min(168, Math.floor(containerHeight * 0.45)))
+        : 168;
+    const summaryPanelMaxHeight = containerHeight > 0
+        ? Math.max(140, Math.min(280, Math.floor(containerHeight * 0.65)))
+        : 260;
+    const panelMaxHeight = activeRobotsPanel === 'summary' ? summaryPanelMaxHeight : defaultPanelMaxHeight;
+    return (_jsx(View, { ref: controlsRootRef, pointerEvents: "box-none", style: [StyleSheet.absoluteFill, styles.controlsRoot], onLayout: handleControlsLayout, children: hidden ? (_jsx(Pressable, { accessibilityLabel: "Show video controls", accessibilityRole: "button", onPress: handleBackgroundTap, style: StyleSheet.absoluteFill })) : (_jsxs(Animated.View, { pointerEvents: "box-none", style: [StyleSheet.absoluteFill, { opacity }], children: [_jsx(Pressable, { accessibilityLabel: activeRobotsPanel ? 'Hide Mux Robots results' : 'Hide video controls', accessibilityRole: "button", onPress: handleBackgroundTap, style: StyleSheet.absoluteFill }), _jsx(LinearGradient, { colors: ['rgba(0,0,0,0.55)', 'rgba(0,0,0,0)'], pointerEvents: "none", style: styles.gradientTop }), _jsx(LinearGradient, { colors: ['rgba(0,0,0,0)', 'rgba(0,0,0,0.7)'], pointerEvents: "none", style: styles.gradientBottom }), _jsxs(View, { pointerEvents: "box-none", style: [
+                        styles.centerWrap,
+                        {
+                            gap: centerVerticalGap,
+                            left: offscreenLeftInset,
+                            paddingHorizontal: centerHorizontalPadding,
+                            right: offscreenRightInset,
+                        },
+                    ], children: [hasRobotsActions ? (_jsxs(View, { style: styles.robotsArea, children: [_jsxs(ScrollView, { horizontal: true, bounces: false, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.robotsButtonRow, style: styles.robotsButtonScroller, children: [canSummarize ? (_jsx(RobotsActionButton, { active: activeRobotsPanel === 'summary', backgroundColor: controlsTheme.buttonBackgroundColor, label: "Summary", onPress: loadSummary, robotSource: robotImages.summary, textColor: controlsTheme.buttonTextColor })) : null, canGenerateChapters ? (_jsx(RobotsActionButton, { active: activeRobotsPanel === 'chapters', backgroundColor: controlsTheme.buttonBackgroundColor, label: "Chapters", onPress: loadChapters, robotSource: robotImages.chapters, textColor: controlsTheme.buttonTextColor })) : null, canFindKeyMoments ? (_jsx(RobotsActionButton, { active: activeRobotsPanel === 'moments', backgroundColor: controlsTheme.buttonBackgroundColor, label: "Moments", onPress: loadKeyMoments, robotSource: robotImages.moments, textColor: controlsTheme.buttonTextColor })) : null] }), activeRobotsPanel ? (_jsx(RobotsPanelView, { activePanel: activeRobotsPanel, backgroundColor: controlsTheme.buttonBackgroundColor, chapters: visibleChapters, error: robotsError, keyMoments: visibleKeyMoments, loading: robotsLoading === activeRobotsPanel, maxHeight: panelMaxHeight, onSeek: seekToRobotsTime, summary: summary, textColor: controlsTheme.textColor })) : null] })) : null, _jsxs(View, { pointerEvents: isRobotsFocused ? 'none' : 'box-none', style: [
+                                styles.centerCluster,
+                                { gap: centerHorizontalGap },
+                                isRobotsFocused && styles.centerClusterHidden,
+                            ], children: [_jsx(IconButton, { accessibilityLabel: `Skip back ${controlsTheme.seekSeconds} seconds`, backgroundColor: controlsTheme.buttonBackgroundColor, onPress: seekBack, size: buttonSize, children: _jsx(SkipIcon, { color: controlsTheme.buttonTextColor, direction: "back", seconds: controlsTheme.seekSeconds, size: buttonSize }) }), _jsx(IconButton, { accessibilityLabel: isPlaying ? 'Pause' : 'Play', backgroundColor: controlsTheme.buttonBackgroundColor, onPress: togglePlayback, size: playButtonSize, children: isPlaying ? (_jsx(PauseIcon, { color: controlsTheme.buttonTextColor, size: playButtonSize })) : (_jsx(PlayIcon, { color: controlsTheme.buttonTextColor, size: playButtonSize })) }), _jsx(IconButton, { accessibilityLabel: `Skip forward ${controlsTheme.seekSeconds} seconds`, backgroundColor: controlsTheme.buttonBackgroundColor, onPress: seekForward, size: buttonSize, children: _jsx(SkipIcon, { color: controlsTheme.buttonTextColor, direction: "forward", seconds: controlsTheme.seekSeconds, size: buttonSize }) })] })] }), !isRobotsFocused ? (_jsxs(View, { pointerEvents: "box-none", style: [
+                        styles.timeline,
+                        { left: timelineLeftInset, right: timelineRightInset },
+                    ], children: [activeChapter ? (_jsx(View, { pointerEvents: "none", style: styles.chapterPillRow, children: _jsx(View, { style: [
+                                    styles.chapterPill,
+                                    { backgroundColor: controlsTheme.buttonBackgroundColor },
+                                ], children: _jsx(Text, { numberOfLines: 1, style: [styles.chapterPillText, { color: controlsTheme.textColor }], children: activeChapter.title }) }) })) : null, _jsx(View, { accessibilityLabel: "Seek video", accessibilityRole: "adjustable", style: [
+                                styles.trackHitArea,
+                                {
+                                    backgroundColor: controlsTheme.buttonBackgroundColor,
+                                    paddingHorizontal: trackHorizontalPadding,
+                                    paddingVertical: trackVerticalPadding,
+                                },
+                            ], ...panResponder.panHandlers, children: _jsxs(View, { ref: trackRef, onLayout: onTrackLayout, style: [
+                                    styles.track,
+                                    {
+                                        backgroundColor: controlsTheme.trackColor,
+                                        height: scrubbing ? trackHeight + 2 : trackHeight,
+                                        borderRadius: trackHeight,
+                                    },
+                                ], children: [_jsx(View, { style: [
+                                            styles.trackFill,
+                                            {
+                                                backgroundColor: controlsTheme.bufferedTrackColor,
+                                                borderRadius: trackHeight,
+                                                width: `${buffered * 100}%`,
+                                            },
+                                        ] }), _jsx(View, { style: [
+                                            styles.trackFill,
+                                            {
+                                                backgroundColor: controlsTheme.progressTrackColor,
+                                                borderRadius: trackHeight,
+                                                width: `${progress * 100}%`,
+                                            },
+                                        ] }), duration > 0
+                                        ? visibleKeyMoments.map(moment => {
+                                            const start = clamp(moment.startTime / duration, 0, 1);
+                                            const end = clamp(moment.endTime / duration, 0, 1);
+                                            return (_jsx(View, { pointerEvents: "none", style: [
+                                                    styles.momentRange,
+                                                    {
+                                                        backgroundColor: controlsTheme.accentColor,
+                                                        left: `${start * 100}%`,
+                                                        width: `${Math.max(0, end - start) * 100}%`,
+                                                    },
+                                                ] }, `${moment.startTime}-${moment.endTime}-${moment.title}`));
+                                        })
+                                        : null, duration > 0
+                                        ? visibleChapters.slice(1).map(chapter => (_jsx(View, { pointerEvents: "none", style: [
+                                                styles.chapterMarker,
+                                                {
+                                                    backgroundColor: controlsTheme.buttonTextColor,
+                                                    left: `${clamp(chapter.startTime / duration, 0, 1) * 100}%`,
+                                                },
+                                            ] }, `${chapter.startTime}-${chapter.title}`)))
+                                        : null] }) }), _jsxs(View, { style: styles.timeRow, children: [_jsx(View, { style: [
+                                        styles.timePill,
+                                        {
+                                            backgroundColor: controlsTheme.buttonBackgroundColor,
+                                            paddingHorizontal: timePillHorizontalPadding,
+                                        },
+                                    ], children: _jsxs(Text, { adjustsFontSizeToFit: true, minimumFontScale: 0.85, numberOfLines: 1, style: [
+                                            styles.timeText,
+                                            { color: controlsTheme.textColor, fontSize: timeFontSize },
+                                        ], children: [formatTime(displayTime), " / ", formatTime(duration)] }) }), _jsxs(View, { style: styles.timeControls, children: [hasCaptionTracks ? (_jsxs(View, { style: styles.captionControlWrap, children: [captionsOpen ? (_jsx(CaptionTracksPanel, { backgroundColor: controlsTheme.buttonBackgroundColor, onSelect: selectCaptionTrack, selectedTrackId: selectedCaptionTrackId, textColor: controlsTheme.textColor, tracks: captionTracks })) : null, _jsx(IconButton, { accessibilityLabel: captionsOpen ? 'Hide captions options' : 'Show captions options', backgroundColor: controlsTheme.buttonBackgroundColor, onPress: toggleCaptionsPanel, size: fullscreenButtonSize, children: _jsx(CaptionsIcon, { active: selectedCaptionTrackId !== null, color: controlsTheme.buttonTextColor, size: fullscreenButtonSize }) })] })) : null, allowsFullscreen && onToggleFullscreen ? (_jsx(IconButton, { accessibilityLabel: isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen', backgroundColor: controlsTheme.buttonBackgroundColor, onPress: handleToggleFullscreen, size: fullscreenButtonSize, children: _jsx(FullscreenIcon, { color: controlsTheme.buttonTextColor, expanded: isFullscreen, size: fullscreenButtonSize }) })) : null] })] })] })) : null] })) }));
+}
+const IconButton = React.memo(function IconButton({ accessibilityLabel, backgroundColor, children, onPress, size, }) {
+    return (_jsx(Pressable, { accessibilityLabel: accessibilityLabel, accessibilityRole: "button", hitSlop: 8, onPress: onPress, style: ({ pressed }) => [
+            {
+                alignItems: 'center',
+                backgroundColor,
+                borderColor: frostBorderColor,
+                borderRadius: size / 2,
+                borderWidth: frostBorderWidth,
+                height: size,
+                justifyContent: 'center',
+                width: size,
+            },
+            pressed && styles.pressed,
+        ], children: children }));
+});
+const RobotsActionButton = React.memo(function RobotsActionButton({ active, backgroundColor, disabled = false, label, onPress, robotSource, textColor, }) {
+    return (_jsxs(Pressable, { accessibilityLabel: `Show ${label.toLowerCase()} video AI results`, accessibilityRole: "button", disabled: disabled, hitSlop: 6, onPress: onPress, style: ({ pressed }) => [
+            styles.robotsButton,
+            {
+                backgroundColor,
+                borderColor: active ? textColor : frostBorderColor,
+                opacity: disabled ? 0.65 : 1,
+            },
+            pressed && styles.pressed,
+        ], children: [_jsx(Image, { source: robotSource, style: styles.robotsButtonImage }), _jsx(Text, { style: [styles.robotsButtonText, { color: textColor }], children: label })] }));
+});
+function RobotsPanelView({ activePanel, backgroundColor, chapters, error, keyMoments, loading, maxHeight, onSeek, summary, textColor, }) {
+    const title = activePanel === 'summary'
+        ? 'Summary'
+        : activePanel === 'chapters'
+            ? 'Chapters'
+            : 'Key Moments';
+    return (_jsxs(View, { style: [styles.robotsPanel, { backgroundColor, maxHeight }], children: [activePanel === 'summary' ? null : (_jsx(Text, { style: [styles.robotsPanelTitle, { color: textColor }], children: title })), loading ? (_jsx(Text, { style: [styles.robotsPanelText, { color: textColor }], children: "Generating results..." })) : error ? (_jsx(Text, { style: [styles.robotsPanelText, { color: textColor }], children: error })) : activePanel === 'summary' ? (_jsx(SummaryPanel, { summary: summary, textColor: textColor })) : activePanel === 'chapters' ? (_jsx(ChapterPanel, { chapters: chapters, onSeek: onSeek, textColor: textColor })) : (_jsx(KeyMomentsPanel, { keyMoments: keyMoments, onSeek: onSeek, textColor: textColor }))] }));
+}
+function SummaryPanel({ summary, textColor, }) {
+    if (!summary) {
+        return _jsx(Text, { style: [styles.robotsPanelText, { color: textColor }], children: "No summary yet." });
+    }
+    return (_jsxs(View, { style: styles.robotsPanelBody, children: [_jsx(Text, { numberOfLines: 2, style: [styles.summaryTitle, { color: textColor }], children: summary.title }), _jsx(Text, { numberOfLines: 10, style: [styles.robotsPanelText, { color: textColor }], children: summary.description })] }));
+}
+function ChapterPanel({ chapters, onSeek, textColor, }) {
+    if (chapters.length === 0) {
+        return _jsx(Text, { style: [styles.robotsPanelText, { color: textColor }], children: "No chapters yet." });
+    }
+    return (_jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.robotsScroll, children: chapters.map(chapter => (_jsxs(Pressable, { accessibilityLabel: `Seek to chapter ${chapter.title}`, accessibilityRole: "button", onPress: () => onSeek(chapter.startTime), style: ({ pressed }) => [styles.robotsListItem, pressed && styles.pressed], children: [_jsx(Text, { style: [styles.robotsItemTime, { color: textColor }], children: formatTime(chapter.startTime) }), _jsx(Text, { numberOfLines: 2, style: [styles.robotsItemTitle, { color: textColor }], children: chapter.title })] }, `${chapter.startTime}-${chapter.title}`))) }));
+}
+function KeyMomentsPanel({ keyMoments, onSeek, textColor, }) {
+    if (keyMoments.length === 0) {
+        return _jsx(Text, { style: [styles.robotsPanelText, { color: textColor }], children: "No key moments yet." });
+    }
+    return (_jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.robotsScroll, children: keyMoments.map(moment => (_jsxs(Pressable, { accessibilityLabel: `Seek to key moment ${moment.title}`, accessibilityRole: "button", onPress: () => onSeek(moment.startTime), style: ({ pressed }) => [styles.robotsListItem, pressed && styles.pressed], children: [_jsxs(Text, { style: [styles.robotsItemTime, { color: textColor }], children: [formatTime(moment.startTime), " - ", formatTime(moment.endTime)] }), _jsx(Text, { numberOfLines: 2, style: [styles.robotsItemTitle, { color: textColor }], children: moment.title }), moment.description ? (_jsx(Text, { numberOfLines: 2, style: [styles.robotsItemDescription, { color: textColor }], children: moment.description })) : null] }, `${moment.startTime}-${moment.endTime}-${moment.title}`))) }));
+}
+function CaptionTracksPanel({ backgroundColor, onSelect, selectedTrackId, textColor, tracks, }) {
+    return (_jsxs(View, { style: [styles.captionPanel, { backgroundColor }], children: [_jsx(Text, { style: [styles.captionPanelTitle, { color: textColor }], children: "Captions" }), _jsx(CaptionTrackOption, { active: selectedTrackId === null, label: "Off", onPress: () => onSelect(null), textColor: textColor }), tracks.map(track => (_jsx(CaptionTrackOption, { active: selectedTrackId === track.id, label: track.label || track.language || 'Caption track', meta: track.language, onPress: () => onSelect(track.id), textColor: textColor }, track.id)))] }));
+}
+function CaptionTrackOption({ active, label, meta, onPress, textColor, }) {
+    return (_jsxs(Pressable, { accessibilityLabel: `Select captions ${label}`, accessibilityRole: "button", accessibilityState: { selected: active }, onPress: onPress, style: ({ pressed }) => [
+            styles.captionOption,
+            active && styles.captionOptionActive,
+            pressed && styles.pressed,
+        ], children: [_jsx(Text, { numberOfLines: 1, style: [styles.captionOptionText, { color: textColor }], children: label }), meta ? (_jsx(Text, { numberOfLines: 1, style: [styles.captionOptionMeta, { color: textColor }], children: meta })) : null] }));
+}
+function PlayIcon({ color, size }) {
+    const half = size * 0.18;
+    return (_jsx(View, { pointerEvents: "none", style: {
+            borderBottomColor: 'transparent',
+            borderBottomWidth: half,
+            borderLeftColor: color,
+            borderLeftWidth: half * 1.15,
+            borderTopColor: 'transparent',
+            borderTopWidth: half,
+            height: 0,
+            marginLeft: half * 0.3,
+            width: 0,
+        } }));
+}
+function PauseIcon({ color, size }) {
+    const barWidth = size * 0.1;
+    const barHeight = size * 0.36;
+    return (_jsxs(View, { pointerEvents: "none", style: { alignItems: 'center', flexDirection: 'row', gap: barWidth * 1.1 }, children: [_jsx(View, { style: { backgroundColor: color, borderRadius: 2, height: barHeight, width: barWidth } }), _jsx(View, { style: { backgroundColor: color, borderRadius: 2, height: barHeight, width: barWidth } })] }));
+}
+function SkipIcon({ color, direction, seconds, size, }) {
+    return (_jsxs(View, { pointerEvents: "none", style: { alignItems: 'center', justifyContent: 'center' }, children: [_jsx(Text, { allowFontScaling: false, style: {
+                    color,
+                    fontSize: Math.round(size * 0.5),
+                    fontWeight: '700',
+                    lineHeight: Math.round(size * 0.5),
+                }, children: direction === 'back' ? '↺' : '↻' }), _jsx(Text, { allowFontScaling: false, style: {
+                    color,
+                    fontSize: Math.round(size * 0.26),
+                    fontWeight: '800',
+                    marginTop: 1,
+                }, children: seconds })] }));
+}
+function CaptionsIcon({ active, color, size, }) {
+    return (_jsx(View, { pointerEvents: "none", style: [
+            styles.captionsIconFrame,
+            {
+                borderColor: color,
+                height: Math.round(size * 0.58),
+                width: Math.round(size * 0.78),
+            },
+        ], children: _jsx(Text, { allowFontScaling: false, style: [
+                styles.captionsIconText,
+                {
+                    color,
+                    fontSize: Math.max(8, Math.round(size * 0.24)),
+                    opacity: active ? 1 : 0.72,
+                },
+            ], children: "CC" }) }));
+}
+function FullscreenIcon({ color, expanded, size, }) {
+    const stroke = Math.max(2, Math.round(size * 0.1));
+    const arm = Math.round(size * 0.36);
+    const inset = expanded ? Math.round(size * 0.24) : Math.round(size * 0.2);
+    const cornerStyle = (vertical, horizontal) => ({
+        [vertical]: inset,
+        [horizontal]: inset,
+    });
+    const armStyle = (vertical, horizontal, orientation) => ({
+        position: 'absolute',
+        backgroundColor: color,
+        borderRadius: stroke,
+        width: orientation === 'horizontal' ? arm : stroke,
+        height: orientation === 'horizontal' ? stroke : arm,
+        [vertical]: 0,
+        [horizontal]: 0,
+    });
+    const renderBracket = (key, vertical, horizontal) => (_jsxs(View, { style: { position: 'absolute', ...cornerStyle(vertical, horizontal) }, children: [_jsx(View, { style: armStyle(vertical, horizontal, 'horizontal') }), _jsx(View, { style: armStyle(vertical, horizontal, 'vertical') })] }, key));
+    return (_jsx(View, { pointerEvents: "none", style: { height: size, width: size }, children: expanded
+            ? [
+                renderBracket('tr', 'top', 'right'),
+                renderBracket('bl', 'bottom', 'left'),
+            ]
+            : [
+                renderBracket('tl', 'top', 'left'),
+                renderBracket('br', 'bottom', 'right'),
+            ] }));
+}
+function formatTime(seconds) {
+    if (!Number.isFinite(seconds) || seconds <= 0) {
+        return '0:00';
+    }
+    const totalSeconds = Math.floor(seconds);
+    const minutes = Math.floor(totalSeconds / 60);
+    const remainingSeconds = totalSeconds % 60;
+    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+}
+function runPlayerCommand(command) {
+    command.catch(() => {
+        // Command failures are already reflected through player status/source events.
+    });
+}
+function getRobotsErrorMessage(error, fallback) {
+    return error instanceof Error && error.message ? error.message : fallback;
+}
+function clamp(value, min, max) {
+    if (!Number.isFinite(value)) {
+        return min;
+    }
+    return Math.min(max, Math.max(min, value));
+}
+const styles = StyleSheet.create({
+    controlsRoot: {
+        overflow: 'hidden',
+    },
+    centerWrap: {
+        bottom: 0,
+        left: 0,
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        alignItems: 'center',
+        gap: 20,
+        justifyContent: 'center',
+        overflow: 'hidden',
+        paddingBottom: 88,
+        paddingHorizontal: 16,
+    },
+    gradientTop: {
+        height: '32%',
+        left: 0,
+        position: 'absolute',
+        right: 0,
+        top: 0,
+    },
+    gradientBottom: {
+        bottom: 0,
+        height: '40%',
+        left: 0,
+        position: 'absolute',
+        right: 0,
+    },
+    centerCluster: {
+        alignItems: 'center',
+        flexDirection: 'row',
+    },
+    centerClusterHidden: {
+        opacity: 0,
+    },
+    timeline: {
+        bottom: 6,
+        gap: 4,
+        left: 16,
+        minWidth: 0,
+        position: 'absolute',
+        right: 16,
+    },
+    trackHitArea: {
+        borderColor: frostBorderColor,
+        borderRadius: 999,
+        borderWidth: frostBorderWidth,
+        justifyContent: 'center',
+        minWidth: 0,
+        paddingHorizontal: 10,
+        paddingVertical: 10,
+    },
+    track: {
+        overflow: 'hidden',
+        width: '100%',
+    },
+    trackFill: {
+        bottom: 0,
+        left: 0,
+        position: 'absolute',
+        top: 0,
+    },
+    momentRange: {
+        bottom: 0,
+        opacity: 0.45,
+        position: 'absolute',
+        top: 0,
+    },
+    chapterMarker: {
+        bottom: 0,
+        opacity: 0.85,
+        position: 'absolute',
+        top: 0,
+        width: 2,
+    },
+    timeRow: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        minWidth: 0,
+    },
+    timeControls: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        flexShrink: 0,
+        gap: 8,
+        justifyContent: 'flex-end',
+    },
+    captionControlWrap: {
+        position: 'relative',
+    },
+    captionPanel: {
+        borderColor: frostBorderColor,
+        borderRadius: 14,
+        borderWidth: frostBorderWidth,
+        bottom: 34,
+        gap: 6,
+        minWidth: 176,
+        padding: 8,
+        position: 'absolute',
+        right: 0,
+    },
+    captionPanelTitle: {
+        fontSize: 12,
+        fontWeight: '800',
+        paddingHorizontal: 6,
+    },
+    captionOption: {
+        backgroundColor: 'rgba(248, 251, 255, 0.08)',
+        borderColor: 'transparent',
+        borderRadius: 10,
+        borderWidth: StyleSheet.hairlineWidth,
+        paddingHorizontal: 8,
+        paddingVertical: 7,
+    },
+    captionOptionActive: {
+        borderColor: frostBorderColor,
+        backgroundColor: 'rgba(248, 251, 255, 0.16)',
+    },
+    captionOptionText: {
+        fontSize: 12,
+        fontWeight: '800',
+    },
+    captionOptionMeta: {
+        fontSize: 10,
+        fontWeight: '700',
+        marginTop: 1,
+        opacity: 0.72,
+    },
+    timePill: {
+        borderColor: frostBorderColor,
+        borderRadius: 999,
+        borderWidth: frostBorderWidth,
+        flexShrink: 1,
+        minWidth: 0,
+        paddingHorizontal: 10,
+        paddingVertical: 4,
+    },
+    timeText: {
+        fontSize: 12,
+        fontWeight: '700',
+    },
+    chapterPillRow: {
+        alignItems: 'flex-start',
+        flexDirection: 'row',
+    },
+    chapterPill: {
+        borderColor: frostBorderColor,
+        borderRadius: 999,
+        borderWidth: frostBorderWidth,
+        maxWidth: 140,
+        paddingHorizontal: 8,
+        paddingVertical: 2,
+    },
+    chapterPillText: {
+        fontSize: 10,
+        fontWeight: '700',
+    },
+    robotsArea: {
+        alignItems: 'center',
+        gap: 6,
+        maxWidth: 420,
+        width: '100%',
+    },
+    robotsButtonRow: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        flexGrow: 1,
+        justifyContent: 'center',
+        paddingHorizontal: 4,
+        paddingVertical: 1,
+    },
+    robotsButtonScroller: {
+        maxWidth: '100%',
+        width: '100%',
+    },
+    robotsButton: {
+        alignItems: 'center',
+        borderRadius: 999,
+        borderWidth: 1,
+        flexDirection: 'row',
+        gap: 4,
+        marginHorizontal: 3,
+        paddingHorizontal: 8,
+        paddingVertical: 5,
+    },
+    robotsButtonImage: {
+        height: 18,
+        resizeMode: 'contain',
+        width: 18,
+    },
+    robotsButtonText: {
+        fontSize: 11,
+        fontWeight: '800',
+    },
+    robotsPanel: {
+        borderColor: frostBorderColor,
+        borderRadius: 16,
+        borderWidth: frostBorderWidth,
+        gap: 6,
+        left: 0,
+        marginTop: 6,
+        overflow: 'hidden',
+        padding: 10,
+        position: 'absolute',
+        right: 0,
+        top: '100%',
+    },
+    robotsPanelTitle: {
+        fontSize: 13,
+        fontWeight: '800',
+    },
+    robotsPanelBody: {
+        gap: 6,
+    },
+    robotsPanelText: {
+        fontSize: 12,
+        fontWeight: '600',
+        lineHeight: 16,
+        opacity: 0.92,
+    },
+    summaryTitle: {
+        fontSize: 14,
+        fontWeight: '800',
+        lineHeight: 18,
+    },
+    tagRow: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 6,
+    },
+    tagPill: {
+        backgroundColor: 'rgba(248, 251, 255, 0.08)',
+        borderColor: frostBorderColor,
+        borderRadius: 999,
+        borderWidth: StyleSheet.hairlineWidth,
+        maxWidth: 120,
+        paddingHorizontal: 8,
+        paddingVertical: 3,
+    },
+    tagText: {
+        fontSize: 11,
+        fontWeight: '700',
+    },
+    robotsScroll: {
+        maxHeight: 92,
+    },
+    robotsListItem: {
+        backgroundColor: 'rgba(248, 251, 255, 0.08)',
+        borderColor: frostBorderColor,
+        borderRadius: 12,
+        borderWidth: StyleSheet.hairlineWidth,
+        marginRight: 8,
+        padding: 8,
+        width: 152,
+    },
+    robotsItemTime: {
+        fontSize: 11,
+        fontWeight: '800',
+        marginBottom: 2,
+        opacity: 0.78,
+    },
+    robotsItemTitle: {
+        fontSize: 12,
+        fontWeight: '800',
+        lineHeight: 16,
+    },
+    robotsItemDescription: {
+        fontSize: 11,
+        fontWeight: '600',
+        lineHeight: 14,
+        marginTop: 3,
+        opacity: 0.82,
+    },
+    captionsIconFrame: {
+        alignItems: 'center',
+        borderRadius: 4,
+        borderWidth: 2,
+        justifyContent: 'center',
+    },
+    captionsIconText: {
+        fontWeight: '900',
+        letterSpacing: 0.4,
+    },
+    pressed: {
+        opacity: 0.6,
+    },
+});