react-native-inapp-inspector 2.3.17 → 2.3.19

package/dist/commonjs/components/Inspector/MediaPreviewModal.js

@@ -43,6 +43,7 @@ const AppColors_1 = require("../../styles/AppColors");
 const AppFonts_1 = require("../../styles/AppFonts");
 const TouchableScale_1 = __importDefault(require("../TouchableScale"));
 const NetworkIcons_1 = require("../NetworkIcons");
+const capture_1 = require("../../capture");
 const helpers_1 = require("../../helpers");
 const toast_1 = require("../../helpers/toast");
 const i18n_1 = require("../../i18n");
@@ -50,21 +51,24 @@ const MediaPreviewModal = ({ item, visible, onClose, onDelete, onConvertToGif, }
     const { t } = (0, i18n_1.useTranslation)();
     const [isConverting, setIsConverting] = (0, react_1.useState)(false);
     const [imageError, setImageError] = (0, react_1.useState)(false);
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
+    const [isPlaying, setIsPlaying] = (0, react_1.useState)(false);
+    const [playbackSpeed, setPlaybackSpeed] = (0, react_1.useState)('1.0x');
+    const [isLooping, setIsLooping] = (0, react_1.useState)(true);
+    const [scrubPosition, setScrubPosition] = (0, react_1.useState)(0.4);
     if (!item)
         return null;
-    const handleShare = async () => {
+    const handlePlayVideo = async () => {
         try {
-            await react_native_1.Share.share(react_native_1.Platform.OS === 'ios'
-                ? { url: item.uri, title: item.filename }
-                : { message: `Captured media: ${item.filename}`, url: item.uri });
+            setIsPlaying(true);
+            await capture_1.ScreenCapture.playVideo(item.uri);
         }
         catch {
-            (0, toast_1.showToast)(t('mediaGallery.shareUnavailable'));
+            (0, toast_1.showToast)(t('mediaGallery.playError', 'Unable to play video'));
+        }
+        finally {
+            setIsPlaying(false);
         }
-    };
-    const handleCopyUri = () => {
-        (0, helpers_1.copyToClipboard)(item.uri);
-        (0, toast_1.showToast)(t('mediaGallery.uriCopied'));
     };
     const handleDelete = () => {
         react_native_1.Alert.alert(t('mediaGallery.deleteTitle'), t('mediaGallery.deleteMessage', { filename: item.filename }), [
@@ -97,6 +101,10 @@ const MediaPreviewModal = ({ item, visible, onClose, onDelete, onConvertToGif, }
     const isVideo = item.type === 'video';
     const isGif = item.type === 'gif';
     const durationSec = item.durationMs ? (item.durationMs / 1000).toFixed(1) : null;
+    const formattedDuration = durationSec
+        ? `00:${Number(durationSec) < 10 ? '0' : ''}${durationSec}`
+        : '00:05.0';
+    const hasBottomToolbar = isVideo || isGif;
     return (<react_native_1.Modal visible={visible} transparent={true} animationType="fade" onRequestClose={onClose}>
       <react_native_1.View style={previewStyles.overlay}>
         
@@ -140,15 +148,61 @@ const MediaPreviewModal = ({ item, visible, onClose, onDelete, onConvertToGif, }
               </react_native_1.Text>
             </react_native_1.View>
           </react_native_1.View>
-          <react_native_1.TouchableOpacity onPress={onClose} style={previewStyles.closeBtn} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
-            <NetworkIcons_1.CloseWhite size={14} color={AppColors_1.AppColors.white}/>
-          </react_native_1.TouchableOpacity>
+
+          
+          <react_native_1.View style={previewStyles.headerRight}>
+            <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel={t('mediaGallery.delete')} onPress={handleDelete} style={previewStyles.headerDeleteBtn} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
+              <NetworkIcons_1.TrashIcon size={14} color={AppColors_1.AppColors.red500}/>
+            </TouchableScale_1.default>
+
+            <react_native_1.TouchableOpacity accessible={true} accessibilityRole="button" accessibilityLabel={isExpanded ? t('mediaGallery.collapse', 'Exit Fullscreen') : t('mediaGallery.expand', 'Expand Fullscreen')} onPress={() => setIsExpanded(!isExpanded)} style={[
+            previewStyles.headerIconBtn,
+            isExpanded && { backgroundColor: `${AppColors_1.AppColors.sky400}30`, borderColor: `${AppColors_1.AppColors.sky400}70` },
+        ]} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
+              <NetworkIcons_1.ExpandCollapseIcon size={14} isExpanded={isExpanded} color={isExpanded ? AppColors_1.AppColors.sky400 : AppColors_1.AppColors.white}/>
+            </react_native_1.TouchableOpacity>
+
+            <react_native_1.TouchableOpacity accessible={true} accessibilityRole="button" accessibilityLabel={t('mediaGallery.minimize', 'Minimize')} onPress={onClose} style={previewStyles.headerIconBtn} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
+              <NetworkIcons_1.ChevronDownIcon size={15} color={AppColors_1.AppColors.white}/>
+            </react_native_1.TouchableOpacity>
+          </react_native_1.View>
         </react_native_1.View>
 
         
-        <react_native_1.View style={previewStyles.stage}>
-          <react_native_1.View style={previewStyles.previewCard}>
-            <react_native_1.Image source={{ uri: item.uri }} style={previewStyles.image} resizeMode="contain" onError={() => setImageError(true)}/>
+        <react_native_1.View style={[
+            previewStyles.stage,
+            isExpanded && previewStyles.stageExpanded,
+            !hasBottomToolbar && {
+                paddingBottom: react_native_1.Platform.OS === 'ios' ? 34 : 16,
+            },
+        ]}>
+          <react_native_1.TouchableOpacity activeOpacity={isVideo ? 0.9 : 1} onPress={isVideo ? handlePlayVideo : undefined} style={[
+            previewStyles.previewCard,
+            isExpanded && previewStyles.previewCardExpanded,
+        ]}>
+            {isVideo ? (item.thumbnailUri && !imageError ? (<>
+                  <react_native_1.Image source={{ uri: item.thumbnailUri }} style={previewStyles.image} resizeMode="contain" onError={() => setImageError(true)}/>
+                  <react_native_1.View style={previewStyles.videoImageOverlay}/>
+                </>) : (<react_native_1.View style={previewStyles.videoFallbackBackdrop}>
+                  <react_native_1.View style={previewStyles.videoFallbackGlow}/>
+                  <NetworkIcons_1.FilmIcon size={52} color={AppColors_1.AppColors.sky400}/>
+                  <react_native_1.Text style={previewStyles.videoFallbackTitle}>
+                    {t('mediaGallery.playVideo', 'Play Video')}
+                  </react_native_1.Text>
+                  <react_native_1.Text style={previewStyles.videoFallbackSubtitle}>
+                    {item.width && item.height ? `${item.width} × ${item.height}` : 'HD Video'} • MP4
+                  </react_native_1.Text>
+                </react_native_1.View>)) : (<react_native_1.Image source={{ uri: item.uri }} style={previewStyles.image} resizeMode="contain" onError={() => setImageError(true)}/>)}
+
+            
+            {isVideo && (<react_native_1.View style={previewStyles.centerPlayOverlay}>
+                <react_native_1.View style={previewStyles.centerPlayCircle}>
+                  <NetworkIcons_1.PlayIcon size={30} color={AppColors_1.AppColors.white}/>
+                </react_native_1.View>
+                <react_native_1.Text style={previewStyles.centerPlayText}>
+                  {t('mediaGallery.playVideo', 'Play Video')}
+                </react_native_1.Text>
+              </react_native_1.View>)}
 
             
             {isVideo && (<react_native_1.View style={previewStyles.videoBadgeOverlay}>
@@ -167,68 +221,111 @@ const MediaPreviewModal = ({ item, visible, onClose, onDelete, onConvertToGif, }
                   <react_native_1.Text style={previewStyles.playPillText}>ANIMATED GIF</react_native_1.Text>
                 </react_native_1.View>
               </react_native_1.View>)}
-          </react_native_1.View>
 
-          
-          <react_native_1.View style={previewStyles.metaPillRow}>
-            {item.width && item.height ? (<react_native_1.View style={previewStyles.metaPill}>
-                <react_native_1.Text style={previewStyles.metaPillLabel}>DIMENSIONS</react_native_1.Text>
-                <react_native_1.Text style={previewStyles.metaPillValue}>{`${item.width} × ${item.height}`}</react_native_1.Text>
-              </react_native_1.View>) : null}
-            <react_native_1.View style={previewStyles.metaPill}>
-              <react_native_1.Text style={previewStyles.metaPillLabel}>SIZE</react_native_1.Text>
-              <react_native_1.Text style={previewStyles.metaPillValue}>{(0, helpers_1.formatBytes)(item.sizeBytes)}</react_native_1.Text>
+            
+            <react_native_1.View style={previewStyles.floatingMetaBadge}>
+              <react_native_1.Text style={previewStyles.floatingMetaText}>
+                {item.width && item.height ? `${item.width} × ${item.height}  •  ` : ''}
+                {(0, helpers_1.formatBytes)(item.sizeBytes)}
+                {durationSec ? `  •  ${durationSec}s` : ''}
+              </react_native_1.Text>
             </react_native_1.View>
-            {durationSec ? (<react_native_1.View style={previewStyles.metaPill}>
-                <react_native_1.Text style={previewStyles.metaPillLabel}>DURATION</react_native_1.Text>
-                <react_native_1.Text style={previewStyles.metaPillValue}>{`${durationSec}s`}</react_native_1.Text>
-              </react_native_1.View>) : null}
-          </react_native_1.View>
+          </react_native_1.TouchableOpacity>
         </react_native_1.View>
 
         
-        <react_native_1.View style={previewStyles.footer}>
-          {isVideo && onConvertToGif && (<TouchableScale_1.default onPress={handleConvert} disabled={isConverting} style={[
-                previewStyles.actionBtn,
-                {
-                    backgroundColor: `${AppColors_1.AppColors.warningAmber}25`,
-                    borderColor: `${AppColors_1.AppColors.warningAmber}70`,
-                },
-            ]}>
-              <NetworkIcons_1.GifIcon size={15} color={AppColors_1.AppColors.warningAmber}/>
-              <react_native_1.Text style={[previewStyles.actionText, { color: AppColors_1.AppColors.warningAmber }]}>
-                {isConverting ? t('mediaGallery.converting') : t('mediaGallery.convertToGif')}
+        {isVideo && (<react_native_1.View style={previewStyles.videoControlsPanel}>
+            
+            <react_native_1.View style={previewStyles.progressSection}>
+              <react_native_1.Text style={previewStyles.timeLabel}>
+                00:0{Math.floor(scrubPosition * (Number(durationSec) || 5))}
               </react_native_1.Text>
-            </TouchableScale_1.default>)}
+              <react_native_1.TouchableOpacity activeOpacity={0.8} onPress={() => setScrubPosition(pos => (pos >= 0.9 ? 0.1 : pos + 0.3))} style={previewStyles.progressTrack}>
+                <react_native_1.View style={[
+                previewStyles.progressFill,
+                { width: `${Math.max(10, Math.min(100, scrubPosition * 100))}%` },
+            ]}/>
+                <react_native_1.View style={[
+                previewStyles.scrubberThumb,
+                { left: `${Math.max(8, Math.min(96, scrubPosition * 100))}%` },
+            ]}/>
+              </react_native_1.TouchableOpacity>
+              <react_native_1.Text style={previewStyles.timeLabel}>{formattedDuration}</react_native_1.Text>
+            </react_native_1.View>
 
-          <TouchableScale_1.default onPress={handleShare} style={previewStyles.actionBtn}>
-            <NetworkIcons_1.SendIcon size={15} color={AppColors_1.AppColors.sky400}/>
-            <react_native_1.Text style={previewStyles.actionText}>{t('mediaGallery.share')}</react_native_1.Text>
-          </TouchableScale_1.default>
+            
+            <react_native_1.View style={previewStyles.controlsRow}>
+              
+              <react_native_1.TouchableOpacity onPress={handlePlayVideo} style={previewStyles.controlActionPill}>
+                {isPlaying ? (<NetworkIcons_1.PauseIcon size={14} color={AppColors_1.AppColors.sky400}/>) : (<NetworkIcons_1.PlayIcon size={14} color={AppColors_1.AppColors.sky400}/>)}
+                <react_native_1.Text style={[previewStyles.controlActionText, { color: AppColors_1.AppColors.sky400 }]}>
+                  {isPlaying ? t('mediaGallery.pause', 'Pause') : t('mediaGallery.play', 'Play')}
+                </react_native_1.Text>
+              </react_native_1.TouchableOpacity>
 
-          <TouchableScale_1.default onPress={handleCopyUri} style={previewStyles.actionBtn}>
-            <NetworkIcons_1.CopyIcon size={15} color={AppColors_1.AppColors.white}/>
-            <react_native_1.Text style={previewStyles.actionText}>{t('mediaGallery.copyUri')}</react_native_1.Text>
-          </TouchableScale_1.default>
+              
+              <react_native_1.View style={previewStyles.speedGroup}>
+                {['1.0x', '1.5x', '2.0x'].map(speed => (<react_native_1.TouchableOpacity key={speed} onPress={() => setPlaybackSpeed(speed)} style={[
+                    previewStyles.speedBtn,
+                    playbackSpeed === speed && previewStyles.speedBtnActive,
+                ]}>
+                    <react_native_1.Text style={[
+                    previewStyles.speedText,
+                    playbackSpeed === speed && previewStyles.speedTextActive,
+                ]}>
+                      {speed}
+                    </react_native_1.Text>
+                  </react_native_1.TouchableOpacity>))}
+              </react_native_1.View>
 
-          <TouchableScale_1.default onPress={handleDelete} style={[
-            previewStyles.actionBtn,
-            {
-                backgroundColor: `${AppColors_1.AppColors.red500}25`,
-                borderColor: `${AppColors_1.AppColors.red500}70`,
-            },
-        ]}>
-            <NetworkIcons_1.TrashIcon size={15} color={AppColors_1.AppColors.red500}/>
-            <react_native_1.Text style={[previewStyles.actionText, { color: AppColors_1.AppColors.red500 }]}>
-              {t('mediaGallery.delete')}
-            </react_native_1.Text>
-          </TouchableScale_1.default>
-        </react_native_1.View>
+              
+              <react_native_1.TouchableOpacity onPress={() => setIsLooping(!isLooping)} style={[
+                previewStyles.loopPill,
+                isLooping && previewStyles.loopPillActive,
+            ]}>
+                <NetworkIcons_1.RepeatIcon size={12} color={isLooping ? AppColors_1.AppColors.sky400 : AppColors_1.AppColors.whiteAlpha60}/>
+                <react_native_1.Text style={[
+                previewStyles.loopText,
+                isLooping && previewStyles.loopTextActive,
+            ]}>
+                  {isLooping ? 'Loop: ON' : 'Loop: OFF'}
+                </react_native_1.Text>
+              </react_native_1.TouchableOpacity>
+            </react_native_1.View>
+          </react_native_1.View>)}
+
+        
+        {hasBottomToolbar && (<react_native_1.View style={previewStyles.footer}>
+            {isVideo && (<TouchableScale_1.default onPress={handlePlayVideo} style={[
+                    previewStyles.actionBtn,
+                    {
+                        backgroundColor: `${AppColors_1.AppColors.sky400}25`,
+                        borderColor: `${AppColors_1.AppColors.sky400}70`,
+                    },
+                ]}>
+                <NetworkIcons_1.PlayIcon size={15} color={AppColors_1.AppColors.sky400}/>
+                <react_native_1.Text style={[previewStyles.actionText, { color: AppColors_1.AppColors.sky400, fontFamily: AppFonts_1.AppFonts.interSemiBold }]}>
+                  {t('mediaGallery.playVideo', 'Play Video')}
+                </react_native_1.Text>
+              </TouchableScale_1.default>)}
+
+            {onConvertToGif && isVideo && (<TouchableScale_1.default onPress={handleConvert} disabled={isConverting} style={[
+                    previewStyles.actionBtn,
+                    {
+                        backgroundColor: `${AppColors_1.AppColors.warningAmber}25`,
+                        borderColor: `${AppColors_1.AppColors.warningAmber}70`,
+                    },
+                ]}>
+                <NetworkIcons_1.GifIcon size={15} color={AppColors_1.AppColors.warningAmber}/>
+                <react_native_1.Text style={[previewStyles.actionText, { color: AppColors_1.AppColors.warningAmber }]}>
+                  {isConverting ? t('mediaGallery.converting') : t('mediaGallery.convertToGif')}
+                </react_native_1.Text>
+              </TouchableScale_1.default>)}
+          </react_native_1.View>)}
       </react_native_1.View>
     </react_native_1.Modal>);
 };
 exports.MediaPreviewModal = MediaPreviewModal;
-const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = react_native_1.Dimensions.get('window');
 const previewStyles = react_native_1.StyleSheet.create({
     overlay: {
         flex: 1,
@@ -254,6 +351,11 @@ const previewStyles = react_native_1.StyleSheet.create({
         minWidth: 0,
         marginRight: 10,
     },
+    headerRight: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
     badge: {
         flexDirection: 'row',
         alignItems: 'center',
@@ -279,11 +381,23 @@ const previewStyles = react_native_1.StyleSheet.create({
         color: AppColors_1.AppColors.whiteAlpha60,
         marginTop: 1,
     },
-    closeBtn: {
+    headerDeleteBtn: {
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        backgroundColor: `${AppColors_1.AppColors.red500}20`,
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.red500}60`,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    headerIconBtn: {
         width: 32,
         height: 32,
         borderRadius: 16,
         backgroundColor: AppColors_1.AppColors.whiteAlpha12,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.whiteAlpha20,
         alignItems: 'center',
         justifyContent: 'center',
     },
@@ -291,13 +405,19 @@ const previewStyles = react_native_1.StyleSheet.create({
         flex: 1,
         alignItems: 'center',
         justifyContent: 'center',
-        paddingHorizontal: 16,
-        paddingVertical: 12,
+        paddingHorizontal: 10,
+        paddingTop: 10,
+        paddingBottom: 10,
+    },
+    stageExpanded: {
+        paddingHorizontal: 0,
+        paddingTop: 0,
+        paddingBottom: 0,
     },
     previewCard: {
-        width: SCREEN_WIDTH - 32,
-        height: SCREEN_HEIGHT * 0.60,
-        borderRadius: 12,
+        flex: 1,
+        width: '100%',
+        borderRadius: 14,
         overflow: 'hidden',
         backgroundColor: '#05070D',
         borderWidth: 1,
@@ -306,10 +426,73 @@ const previewStyles = react_native_1.StyleSheet.create({
         justifyContent: 'center',
         position: 'relative',
     },
+    previewCardExpanded: {
+        borderRadius: 0,
+        borderWidth: 0,
+    },
     image: {
         width: '100%',
         height: '100%',
     },
+    videoImageOverlay: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        backgroundColor: 'rgba(5, 7, 13, 0.25)',
+    },
+    videoFallbackBackdrop: {
+        flex: 1,
+        width: '100%',
+        backgroundColor: '#070C18',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 8,
+    },
+    videoFallbackGlow: {
+        position: 'absolute',
+        width: 140,
+        height: 140,
+        borderRadius: 70,
+        backgroundColor: `${AppColors_1.AppColors.sky400}18`,
+    },
+    videoFallbackTitle: {
+        fontFamily: AppFonts_1.AppFonts.interSemiBold,
+        fontSize: 15,
+        color: AppColors_1.AppColors.white,
+        marginTop: 8,
+    },
+    videoFallbackSubtitle: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 12,
+        color: AppColors_1.AppColors.whiteAlpha60,
+    },
+    centerPlayOverlay: {
+        position: 'absolute',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 8,
+    },
+    centerPlayCircle: {
+        width: 64,
+        height: 64,
+        borderRadius: 32,
+        backgroundColor: `${AppColors_1.AppColors.sky400}E0`,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingLeft: 3,
+        shadowColor: AppColors_1.AppColors.sky400,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.5,
+        shadowRadius: 10,
+        elevation: 8,
+    },
+    centerPlayText: {
+        fontFamily: AppFonts_1.AppFonts.interSemiBold,
+        fontSize: 13,
+        color: AppColors_1.AppColors.white,
+        letterSpacing: 0.3,
+        textShadowColor: 'rgba(0,0,0,0.7)',
+        textShadowOffset: { width: 0, height: 1 },
+        textShadowRadius: 3,
+    },
     videoBadgeOverlay: {
         position: 'absolute',
         bottom: 12,
@@ -332,34 +515,139 @@ const previewStyles = react_native_1.StyleSheet.create({
         color: AppColors_1.AppColors.white,
         letterSpacing: 0.3,
     },
-    metaPillRow: {
-        flexDirection: 'row',
+    floatingMetaBadge: {
+        position: 'absolute',
+        bottom: 10,
+        backgroundColor: `${AppColors_1.AppColors.slate900}D9`,
+        paddingHorizontal: 10,
+        paddingVertical: 4.5,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.whiteAlpha15,
         alignItems: 'center',
         justifyContent: 'center',
+    },
+    floatingMetaText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10.5,
+        color: AppColors_1.AppColors.slate200,
+        letterSpacing: 0.2,
+    },
+    videoControlsPanel: {
+        paddingHorizontal: 16,
+        paddingTop: 8,
+        paddingBottom: 6,
+        backgroundColor: AppColors_1.AppColors.headerGlassDark,
+        borderTopWidth: 1,
+        borderTopColor: AppColors_1.AppColors.borderGlassLight,
         gap: 8,
-        marginTop: 14,
-        flexWrap: 'wrap',
     },
-    metaPill: {
-        backgroundColor: AppColors_1.AppColors.whiteAlpha08,
+    progressSection: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 10,
+    },
+    timeLabel: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 11,
+        color: AppColors_1.AppColors.whiteAlpha60,
+        minWidth: 42,
+    },
+    progressTrack: {
+        flex: 1,
+        height: 6,
+        borderRadius: 3,
+        backgroundColor: AppColors_1.AppColors.whiteAlpha15,
+        justifyContent: 'center',
+        position: 'relative',
+    },
+    progressFill: {
+        height: '100%',
+        borderRadius: 3,
+        backgroundColor: AppColors_1.AppColors.sky400,
+    },
+    scrubberThumb: {
+        position: 'absolute',
+        width: 12,
+        height: 12,
+        borderRadius: 6,
+        backgroundColor: AppColors_1.AppColors.white,
+        borderWidth: 2,
+        borderColor: AppColors_1.AppColors.sky400,
+        top: -3,
+        marginLeft: -6,
+    },
+    controlsRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingVertical: 2,
+    },
+    controlActionPill: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
         paddingHorizontal: 10,
         paddingVertical: 5,
-        borderRadius: 8,
+        borderRadius: 6,
+        backgroundColor: `${AppColors_1.AppColors.sky400}18`,
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.sky400}50`,
+    },
+    controlActionText: {
+        fontFamily: AppFonts_1.AppFonts.interSemiBold,
+        fontSize: 11.5,
+    },
+    speedGroup: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: AppColors_1.AppColors.whiteAlpha08,
+        borderRadius: 6,
         borderWidth: 1,
         borderColor: AppColors_1.AppColors.whiteAlpha12,
+        padding: 2,
+        gap: 2,
+    },
+    speedBtn: {
+        paddingHorizontal: 7,
+        paddingVertical: 3,
+        borderRadius: 4,
+    },
+    speedBtnActive: {
+        backgroundColor: `${AppColors_1.AppColors.sky400}30`,
+    },
+    speedText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10.5,
+        color: AppColors_1.AppColors.whiteAlpha60,
+    },
+    speedTextActive: {
+        color: AppColors_1.AppColors.sky400,
+        fontFamily: AppFonts_1.AppFonts.interBold,
+    },
+    loopPill: {
+        flexDirection: 'row',
         alignItems: 'center',
+        gap: 4,
+        paddingHorizontal: 8,
+        paddingVertical: 5,
+        borderRadius: 6,
+        backgroundColor: AppColors_1.AppColors.whiteAlpha08,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.whiteAlpha12,
+    },
+    loopPillActive: {
+        backgroundColor: `${AppColors_1.AppColors.sky400}18`,
+        borderColor: `${AppColors_1.AppColors.sky400}50`,
     },
-    metaPillLabel: {
+    loopText: {
         fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 9,
-        color: AppColors_1.AppColors.slate400,
-        letterSpacing: 0.4,
+        fontSize: 10.5,
+        color: AppColors_1.AppColors.whiteAlpha60,
     },
-    metaPillValue: {
+    loopTextActive: {
+        color: AppColors_1.AppColors.sky400,
         fontFamily: AppFonts_1.AppFonts.interSemiBold,
-        fontSize: 11.5,
-        color: AppColors_1.AppColors.white,
-        marginTop: 1,
     },
     footer: {
         flexDirection: 'row',
@@ -368,8 +656,8 @@ const previewStyles = react_native_1.StyleSheet.create({
         flexWrap: 'wrap',
         gap: 8,
         paddingHorizontal: 16,
-        paddingTop: 12,
-        paddingBottom: react_native_1.Platform.OS === 'ios' ? 36 : 20,
+        paddingTop: 8,
+        paddingBottom: react_native_1.Platform.OS === 'ios' ? 34 : 16,
         borderTopWidth: 1,
         borderTopColor: AppColors_1.AppColors.borderGlassLight,
         backgroundColor: AppColors_1.AppColors.headerGlassDark,
@@ -378,7 +666,7 @@ const previewStyles = react_native_1.StyleSheet.create({
         flexDirection: 'row',
         alignItems: 'center',
         gap: 6,
-        paddingHorizontal: 14,
+        paddingHorizontal: 16,
         paddingVertical: 9,
         borderRadius: 8,
         backgroundColor: AppColors_1.AppColors.whiteAlpha08,