react-native-inapp-inspector 2.3.19 → 2.3.21

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

@@ -1,641 +1,166 @@
-import React, { useState } from 'react';
-import { Alert, Image, Modal, Platform, StyleSheet, Text, TouchableOpacity, View, } from 'react-native';
-import { AppColors } from '../../styles/AppColors';
-import { AppFonts } from '../../styles/AppFonts';
-import TouchableScale from '../TouchableScale';
-import { ChevronDownIcon, ExpandCollapseIcon, FilmIcon, GifIcon, ImageIcon, PauseIcon, PlayIcon, RepeatIcon, TrashIcon, } from '../NetworkIcons';
-import { ScreenCapture } from '../../capture';
-import { formatBytes } from '../../helpers';
-import { showToast } from '../../helpers/toast';
-import { useTranslation } from '../../i18n';
-export const MediaPreviewModal = ({ item, visible, onClose, onDelete, onConvertToGif, }) => {
-    const { t } = useTranslation();
-    const [isConverting, setIsConverting] = useState(false);
-    const [imageError, setImageError] = useState(false);
-    const [isExpanded, setIsExpanded] = useState(false);
-    const [isPlaying, setIsPlaying] = useState(false);
-    const [playbackSpeed, setPlaybackSpeed] = useState('1.0x');
-    const [isLooping, setIsLooping] = useState(true);
-    const [scrubPosition, setScrubPosition] = useState(0.4);
-    if (!item)
-        return null;
-    const handlePlayVideo = async () => {
-        try {
-            setIsPlaying(true);
-            await ScreenCapture.playVideo(item.uri);
-        }
-        catch {
-            showToast(t('mediaGallery.playError', 'Unable to play video'));
-        }
-        finally {
-            setIsPlaying(false);
-        }
-    };
-    const handleDelete = () => {
-        Alert.alert(t('mediaGallery.deleteTitle'), t('mediaGallery.deleteMessage', { filename: item.filename }), [
-            { text: t('common.cancel'), style: 'cancel' },
-            {
-                text: t('mediaGallery.delete'),
-                style: 'destructive',
-                onPress: () => {
-                    onDelete(item);
-                    onClose();
-                },
-            },
-        ]);
-    };
-    const handleConvert = async () => {
-        if (!onConvertToGif)
-            return;
-        setIsConverting(true);
-        try {
-            await onConvertToGif(item);
-            showToast(t('mediaGallery.convertedSuccess'));
-        }
-        catch {
-            showToast(t('mediaGallery.convertFailed'));
-        }
-        finally {
-            setIsConverting(false);
-        }
-    };
-    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 (<Modal visible={visible} transparent={true} animationType="fade" onRequestClose={onClose}>
-      <View style={previewStyles.overlay}>
+import{useState as P}from"react";import{Alert as Ve,Image as _,Modal as De,Platform as V,Share as ee,StyleSheet as oe,Text as T,TouchableOpacity as I,View as C}from"react-native";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as S}from"../../styles/AppFonts";import R from"../TouchableScale";import{ChevronDownIcon as Me,CopyIcon as L,ExpandCollapseIcon as We,FilmIcon as E,GifIcon as H,ImageIcon as Le,PauseIcon as Ee,PlayIcon as Ce,RepeatIcon as He,ShareIcon as Te,TrashIcon as Ue}from"../NetworkIcons";import{ScreenCapture as Ne}from"../../capture";import{copyImageOrMediaToClipboard as qe,formatBytes as Se}from"../../helpers";import{showToast as G}from"../../helpers/toast";import{useTranslation as Je}from"../../i18n";export const MediaPreviewModal=({item:t,visible:ve,onClose:D,onDelete:Ae,onConvertToGif:M})=>{const{t:r}=Je(),[U,N]=P(!1),[Ie,q]=P(!1),[z,ze]=P(!1),[J,K]=P(!1),[Q,Pe]=P("1.0x"),[$,Be]=P(!0),[W,Re]=P(.4);if(!t)return null;const O=()=>{t?.uri&&qe(t.uri,t.type==="image"?"Image":"Media")},X=async()=>{try{K(!0),await Ne.playVideo(t.uri)}catch{G(r("mediaGallery.playError","Unable to play video"))}finally{K(!1)}},$e=()=>{Ve.alert(r("mediaGallery.deleteTitle"),r("mediaGallery.deleteMessage",{filename:t.filename}),[{text:r("common.cancel"),style:"cancel"},{text:r("mediaGallery.delete"),style:"destructive",onPress:()=>{Ae(t),D()}}])},Fe=async()=>{if(M){N(!0);try{await M(t),G(r("mediaGallery.convertedSuccess"))}catch{G(r("mediaGallery.convertFailed"))}finally{N(!1)}}},Y=async()=>{try{const v=t.uri.startsWith("file://")||t.uri.startsWith("content://")||t.uri.startsWith("http")?t.uri:`file://${t.uri}`,Oe=V.select({ios:{url:v,title:t.filename},default:{title:t.filename,message:t.filename,url:v}});(await ee.share(Oe)).action===ee.sharedAction&&G(r("mediaGallery.shareSuccess","Shared successfully"))}catch(v){v?.message!=="User did not share"&&G(r("mediaGallery.shareUnavailable","Sharing not available on this device"))}},A=t.type==="video",F=t.type==="gif",B=t.durationMs?(t.durationMs/1e3).toFixed(1):null,Ge=B?`00:${Number(B)<10?"0":""}${B}`:"00:05.0",Z=!0;return<De visible={ve}transparent={!0}animationType="fade"onRequestClose={D}>
+      <C style={o.overlay}>
         
-        <View style={previewStyles.header}>
-          <View style={previewStyles.headerLeft}>
-            <View style={[
-            previewStyles.badge,
-            {
-                borderColor: isVideo
-                    ? `${AppColors.sky400}80`
-                    : isGif
-                        ? `${AppColors.warningAmber}80`
-                        : `${AppColors.emerald500}80`,
-                backgroundColor: isVideo
-                    ? `${AppColors.sky400}20`
-                    : isGif
-                        ? `${AppColors.warningAmber}20`
-                        : `${AppColors.emerald500}20`,
-            },
-        ]}>
-              {isVideo ? (<FilmIcon size={13} color={AppColors.sky400}/>) : isGif ? (<GifIcon size={13} color={AppColors.warningAmber}/>) : (<ImageIcon size={13} color={AppColors.emerald500}/>)}
-              <Text style={[
-            previewStyles.badgeText,
-            {
-                color: isVideo
-                    ? AppColors.sky400
-                    : isGif
-                        ? AppColors.warningAmber
-                        : AppColors.emerald500,
-            },
-        ]}>
-                {item.format.toUpperCase()}
-              </Text>
-            </View>
-            <View style={{ flex: 1, minWidth: 0 }}>
-              <Text style={previewStyles.title} numberOfLines={1}>
-                {item.filename}
-              </Text>
-              <Text style={previewStyles.subtitle}>
-                {formatBytes(item.sizeBytes)} • {new Date(item.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
-              </Text>
-            </View>
-          </View>
+        <C style={o.header}>
+          <I activeOpacity={.8}onPress={O}style={o.headerLeft}>
+            <C style={[o.badge,{borderColor:A?`${e.sky400}80`:F?`${e.warningAmber}80`:`${e.emerald500}80`,backgroundColor:A?`${e.sky400}20`:F?`${e.warningAmber}20`:`${e.emerald500}20`}]}>
+              {A?<E size={13}color={e.sky400}/>:F?<H size={13}color={e.warningAmber}/>:<Le size={13}color={e.emerald500}/>}
+              <T style={[o.badgeText,{color:A?e.sky400:F?e.warningAmber:e.emerald500}]}>
+                {t.format.toUpperCase()}
+              </T>
+            </C>
+            <C style={{flex:1,minWidth:0}}>
+              <T style={o.title}numberOfLines={1}>
+                {t.filename}
+              </T>
+              <T style={o.subtitle}>
+                {Se(t.sizeBytes)} • {new Date(t.timestamp).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",second:"2-digit"})}
+              </T>
+            </C>
+          </I>
 
           
-          <View style={previewStyles.headerRight}>
-            <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel={t('mediaGallery.delete')} onPress={handleDelete} style={previewStyles.headerDeleteBtn} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
-              <TrashIcon size={14} color={AppColors.red500}/>
-            </TouchableScale>
+          <C style={o.headerRight}>
+            <R accessible={!0}accessibilityRole="button"accessibilityLabel={r("mediaGallery.copyUri","Copy URI")}onPress={O}style={o.headerActionBtn}hitSlop={{top:10,bottom:10,left:10,right:10}}>
+              <L size={14}color={e.slate200}/>
+            </R>
 
-            <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.sky400}30`, borderColor: `${AppColors.sky400}70` },
-        ]} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
-              <ExpandCollapseIcon size={14} isExpanded={isExpanded} color={isExpanded ? AppColors.sky400 : AppColors.white}/>
-            </TouchableOpacity>
+            <R accessible={!0}accessibilityRole="button"accessibilityLabel={r("mediaGallery.share","Share")}onPress={Y}style={[o.headerActionBtn,{backgroundColor:`${e.sky400}20`,borderColor:`${e.sky400}60`}]}hitSlop={{top:10,bottom:10,left:10,right:10}}>
+              <Te size={14}color={e.sky400}/>
+            </R>
 
-            <TouchableOpacity accessible={true} accessibilityRole="button" accessibilityLabel={t('mediaGallery.minimize', 'Minimize')} onPress={onClose} style={previewStyles.headerIconBtn} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
-              <ChevronDownIcon size={15} color={AppColors.white}/>
-            </TouchableOpacity>
-          </View>
-        </View>
+            <R accessible={!0}accessibilityRole="button"accessibilityLabel={r("mediaGallery.delete")}onPress={$e}style={o.headerDeleteBtn}hitSlop={{top:10,bottom:10,left:10,right:10}}>
+              <Ue size={14}color={e.red500}/>
+            </R>
+
+            <I accessible={!0}accessibilityRole="button"accessibilityLabel={z?r("mediaGallery.collapse","Exit Fullscreen"):r("mediaGallery.expand","Expand Fullscreen")}onPress={()=>ze(!z)}style={[o.headerIconBtn,z&&{backgroundColor:`${e.sky400}30`,borderColor:`${e.sky400}70`}]}hitSlop={{top:10,bottom:10,left:10,right:10}}>
+              <We size={14}isExpanded={z}color={z?e.sky400:e.white}/>
+            </I>
+
+            <I accessible={!0}accessibilityRole="button"accessibilityLabel={r("mediaGallery.minimize","Minimize")}onPress={D}style={o.headerIconBtn}hitSlop={{top:10,bottom:10,left:10,right:10}}>
+              <Me size={15}color={e.white}/>
+            </I>
+          </C>
+        </C>
 
         
-        <View style={[
-            previewStyles.stage,
-            isExpanded && previewStyles.stageExpanded,
-            !hasBottomToolbar && {
-                paddingBottom: Platform.OS === 'ios' ? 34 : 16,
-            },
-        ]}>
-          <TouchableOpacity activeOpacity={isVideo ? 0.9 : 1} onPress={isVideo ? handlePlayVideo : undefined} style={[
-            previewStyles.previewCard,
-            isExpanded && previewStyles.previewCardExpanded,
-        ]}>
-            {isVideo ? (item.thumbnailUri && !imageError ? (<>
-                  <Image source={{ uri: item.thumbnailUri }} style={previewStyles.image} resizeMode="contain" onError={() => setImageError(true)}/>
-                  <View style={previewStyles.videoImageOverlay}/>
-                </>) : (<View style={previewStyles.videoFallbackBackdrop}>
-                  <View style={previewStyles.videoFallbackGlow}/>
-                  <FilmIcon size={52} color={AppColors.sky400}/>
-                  <Text style={previewStyles.videoFallbackTitle}>
-                    {t('mediaGallery.playVideo', 'Play Video')}
-                  </Text>
-                  <Text style={previewStyles.videoFallbackSubtitle}>
-                    {item.width && item.height ? `${item.width} × ${item.height}` : 'HD Video'} • MP4
-                  </Text>
-                </View>)) : (<Image source={{ uri: item.uri }} style={previewStyles.image} resizeMode="contain" onError={() => setImageError(true)}/>)}
+        <C style={[o.stage,z&&o.stageExpanded,!Z&&{paddingBottom:V.OS==="ios"?34:16}]}>
+          <I activeOpacity={A?.9:1}onPress={A?X:void 0}style={[o.previewCard,z&&o.previewCardExpanded]}>
+            {A?t.thumbnailUri&&!Ie?<>
+                  <_ source={{uri:t.thumbnailUri}}style={o.image}resizeMode="contain"onError={()=>q(!0)}/>
+                  <C style={o.videoImageOverlay}/>
+                </>:<C style={o.videoFallbackBackdrop}>
+                  <C style={o.videoFallbackGlow}/>
+                  <E size={44}color={e.sky400}/>
+                  <T style={o.videoFallbackSubtitle}>
+                    {t.width&&t.height?`${t.width} \xD7 ${t.height}`:"HD Video"} • MP4
+                  </T>
+                </C>:<_ source={{uri:t.uri}}style={o.image}resizeMode="contain"onError={()=>q(!0)}/>}
 
             
-            {isVideo && (<View style={previewStyles.centerPlayOverlay}>
-                <View style={previewStyles.centerPlayCircle}>
-                  <PlayIcon size={30} color={AppColors.white}/>
-                </View>
-                <Text style={previewStyles.centerPlayText}>
-                  {t('mediaGallery.playVideo', 'Play Video')}
-                </Text>
-              </View>)}
+            {A&&<C style={o.centerPlayOverlay}>
+                <C style={o.centerPlayCircle}>
+                  <Ce size={28}color={e.white}/>
+                </C>
+                <T style={o.centerPlayText}>
+                  {r("mediaGallery.playVideo","Play Video")}
+                </T>
+              </C>}
 
             
-            {isVideo && (<View style={previewStyles.videoBadgeOverlay}>
-                <View style={previewStyles.playPill}>
-                  <FilmIcon size={13} color={AppColors.white}/>
-                  <Text style={previewStyles.playPillText}>
-                    {durationSec ? `${durationSec}s` : 'VIDEO'}
-                  </Text>
-                </View>
-              </View>)}
+            {A&&<C style={o.videoBadgeOverlay}>
+                <C style={o.playPill}>
+                  <E size={12}color={e.sky400}/>
+                  <T style={o.playPillText}>
+                    {B?`${B}s`:"VIDEO"}
+                  </T>
+                </C>
+              </C>}
 
             
-            {isGif && (<View style={previewStyles.videoBadgeOverlay}>
-                <View style={[previewStyles.playPill, { backgroundColor: `${AppColors.warningAmber}CC` }]}>
-                  <GifIcon size={13} color={AppColors.white}/>
-                  <Text style={previewStyles.playPillText}>ANIMATED GIF</Text>
-                </View>
-              </View>)}
+            {F&&<C style={o.videoBadgeOverlay}>
+                <C style={[o.playPill,{backgroundColor:`${e.warningAmber}CC`}]}>
+                  <H size={12}color={e.white}/>
+                  <T style={o.playPillText}>ANIMATED GIF</T>
+                </C>
+              </C>}
 
             
-            <View style={previewStyles.floatingMetaBadge}>
-              <Text style={previewStyles.floatingMetaText}>
-                {item.width && item.height ? `${item.width} × ${item.height}  •  ` : ''}
-                {formatBytes(item.sizeBytes)}
-                {durationSec ? `  •  ${durationSec}s` : ''}
-              </Text>
-            </View>
-          </TouchableOpacity>
-        </View>
+            <I activeOpacity={.8}onPress={O}style={o.floatingMetaBadge}>
+              <L size={11}color={e.sky400}/>
+              <T style={o.floatingMetaText}>
+                {t.width&&t.height?`${t.width} \xD7 ${t.height}  \u2022  `:""}
+                {Se(t.sizeBytes)}
+              </T>
+            </I>
+          </I>
+        </C>
 
         
-        {isVideo && (<View style={previewStyles.videoControlsPanel}>
+        {A&&<C style={o.videoControlsPanel}>
             
-            <View style={previewStyles.progressSection}>
-              <Text style={previewStyles.timeLabel}>
-                00:0{Math.floor(scrubPosition * (Number(durationSec) || 5))}
-              </Text>
-              <TouchableOpacity activeOpacity={0.8} onPress={() => setScrubPosition(pos => (pos >= 0.9 ? 0.1 : pos + 0.3))} style={previewStyles.progressTrack}>
-                <View style={[
-                previewStyles.progressFill,
-                { width: `${Math.max(10, Math.min(100, scrubPosition * 100))}%` },
-            ]}/>
-                <View style={[
-                previewStyles.scrubberThumb,
-                { left: `${Math.max(8, Math.min(96, scrubPosition * 100))}%` },
-            ]}/>
-              </TouchableOpacity>
-              <Text style={previewStyles.timeLabel}>{formattedDuration}</Text>
-            </View>
+            <C style={o.progressSection}>
+              <T style={o.timeLabel}>
+                00:0{Math.floor(W*(Number(B)||5))}
+              </T>
+              <I activeOpacity={.8}onPress={()=>Re(v=>v>=.9?.1:v+.3)}style={o.progressTrack}>
+                <C style={[o.progressFill,{width:`${Math.max(10,Math.min(100,W*100))}%`}]}/>
+                <C style={[o.scrubberThumb,{left:`${Math.max(8,Math.min(96,W*100))}%`}]}/>
+              </I>
+              <T style={o.timeLabel}>{Ge}</T>
+            </C>
 
             
-            <View style={previewStyles.controlsRow}>
+            <C style={o.controlsRow}>
               
-              <TouchableOpacity onPress={handlePlayVideo} style={previewStyles.controlActionPill}>
-                {isPlaying ? (<PauseIcon size={14} color={AppColors.sky400}/>) : (<PlayIcon size={14} color={AppColors.sky400}/>)}
-                <Text style={[previewStyles.controlActionText, { color: AppColors.sky400 }]}>
-                  {isPlaying ? t('mediaGallery.pause', 'Pause') : t('mediaGallery.play', 'Play')}
-                </Text>
-              </TouchableOpacity>
+              <I onPress={X}style={o.controlActionPill}>
+                {J?<Ee size={14}color={e.sky400}/>:<Ce size={14}color={e.sky400}/>}
+                <T style={[o.controlActionText,{color:e.sky400}]}>
+                  {J?r("mediaGallery.pause","Pause"):r("mediaGallery.play","Play")}
+                </T>
+              </I>
 
               
-              <View style={previewStyles.speedGroup}>
-                {['1.0x', '1.5x', '2.0x'].map(speed => (<TouchableOpacity key={speed} onPress={() => setPlaybackSpeed(speed)} style={[
-                    previewStyles.speedBtn,
-                    playbackSpeed === speed && previewStyles.speedBtnActive,
-                ]}>
-                    <Text style={[
-                    previewStyles.speedText,
-                    playbackSpeed === speed && previewStyles.speedTextActive,
-                ]}>
-                      {speed}
-                    </Text>
-                  </TouchableOpacity>))}
-              </View>
+              <C style={o.speedGroup}>
+                {["1.0x","1.5x","2.0x"].map(v=><I key={v}onPress={()=>Pe(v)}style={[o.speedBtn,Q===v&&o.speedBtnActive]}>
+                    <T style={[o.speedText,Q===v&&o.speedTextActive]}>
+                      {v}
+                    </T>
+                  </I>)}
+              </C>
 
               
-              <TouchableOpacity onPress={() => setIsLooping(!isLooping)} style={[
-                previewStyles.loopPill,
-                isLooping && previewStyles.loopPillActive,
-            ]}>
-                <RepeatIcon size={12} color={isLooping ? AppColors.sky400 : AppColors.whiteAlpha60}/>
-                <Text style={[
-                previewStyles.loopText,
-                isLooping && previewStyles.loopTextActive,
-            ]}>
-                  {isLooping ? 'Loop: ON' : 'Loop: OFF'}
-                </Text>
-              </TouchableOpacity>
-            </View>
-          </View>)}
+              <I onPress={()=>Be(!$)}style={[o.loopPill,$&&o.loopPillActive]}>
+                <He size={12}color={$?e.sky400:e.whiteAlpha60}/>
+                <T style={[o.loopText,$&&o.loopTextActive]}>
+                  {$?"Loop: ON":"Loop: OFF"}
+                </T>
+              </I>
+            </C>
+          </C>}
 
         
-        {hasBottomToolbar && (<View style={previewStyles.footer}>
-            {isVideo && (<TouchableScale onPress={handlePlayVideo} style={[
-                    previewStyles.actionBtn,
-                    {
-                        backgroundColor: `${AppColors.sky400}25`,
-                        borderColor: `${AppColors.sky400}70`,
-                    },
-                ]}>
-                <PlayIcon size={15} color={AppColors.sky400}/>
-                <Text style={[previewStyles.actionText, { color: AppColors.sky400, fontFamily: AppFonts.interSemiBold }]}>
-                  {t('mediaGallery.playVideo', 'Play Video')}
-                </Text>
-              </TouchableScale>)}
+        {Z&&<C style={o.footer}>
+            <R onPress={O}style={[o.actionBtn,{backgroundColor:e.whiteAlpha08,borderColor:e.whiteAlpha15}]}>
+              <L size={14}color={e.slate200}/>
+              <T style={[o.actionText,{color:e.slate200}]}>
+                {r("mediaGallery.copyUri","Copy URI")}
+              </T>
+            </R>
+
+            {M&&A&&<R onPress={Fe}disabled={U}style={[o.actionBtn,{backgroundColor:`${e.warningAmber}22`,borderColor:`${e.warningAmber}70`}]}>
+                <H size={15}color={e.warningAmber}/>
+                <T style={[o.actionText,{color:e.warningAmber}]}>
+                  {r(U?"mediaGallery.converting":"mediaGallery.convertToGif")}
+                </T>
+              </R>}
 
-            {onConvertToGif && isVideo && (<TouchableScale onPress={handleConvert} disabled={isConverting} style={[
-                    previewStyles.actionBtn,
-                    {
-                        backgroundColor: `${AppColors.warningAmber}25`,
-                        borderColor: `${AppColors.warningAmber}70`,
-                    },
-                ]}>
-                <GifIcon size={15} color={AppColors.warningAmber}/>
-                <Text style={[previewStyles.actionText, { color: AppColors.warningAmber }]}>
-                  {isConverting ? t('mediaGallery.converting') : t('mediaGallery.convertToGif')}
-                </Text>
-              </TouchableScale>)}
-          </View>)}
-      </View>
-    </Modal>);
-};
-const previewStyles = StyleSheet.create({
-    overlay: {
-        flex: 1,
-        backgroundColor: '#090D16FA',
-        justifyContent: 'space-between',
-    },
-    header: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 16,
-        paddingTop: Platform.OS === 'ios' ? 52 : 20,
-        paddingBottom: 14,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors.borderGlassLight,
-        backgroundColor: AppColors.headerGlassDark,
-    },
-    headerLeft: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 10,
-        flex: 1,
-        minWidth: 0,
-        marginRight: 10,
-    },
-    headerRight: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 8,
-    },
-    badge: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        paddingHorizontal: 8,
-        paddingVertical: 4,
-        borderRadius: 6,
-        borderWidth: 1,
-    },
-    badgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10.5,
-        letterSpacing: 0.4,
-    },
-    title: {
-        fontFamily: AppFonts.interSemiBold,
-        fontSize: 13.5,
-        color: AppColors.white,
-    },
-    subtitle: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11,
-        color: AppColors.whiteAlpha60,
-        marginTop: 1,
-    },
-    headerDeleteBtn: {
-        width: 32,
-        height: 32,
-        borderRadius: 16,
-        backgroundColor: `${AppColors.red500}20`,
-        borderWidth: 1,
-        borderColor: `${AppColors.red500}60`,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    headerIconBtn: {
-        width: 32,
-        height: 32,
-        borderRadius: 16,
-        backgroundColor: AppColors.whiteAlpha12,
-        borderWidth: 1,
-        borderColor: AppColors.whiteAlpha20,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    stage: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingHorizontal: 10,
-        paddingTop: 10,
-        paddingBottom: 10,
-    },
-    stageExpanded: {
-        paddingHorizontal: 0,
-        paddingTop: 0,
-        paddingBottom: 0,
-    },
-    previewCard: {
-        flex: 1,
-        width: '100%',
-        borderRadius: 14,
-        overflow: 'hidden',
-        backgroundColor: '#05070D',
-        borderWidth: 1,
-        borderColor: AppColors.borderGlassLight,
-        alignItems: 'center',
-        justifyContent: 'center',
-        position: 'relative',
-    },
-    previewCardExpanded: {
-        borderRadius: 0,
-        borderWidth: 0,
-    },
-    image: {
-        width: '100%',
-        height: '100%',
-    },
-    videoImageOverlay: {
-        ...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.sky400}18`,
-    },
-    videoFallbackTitle: {
-        fontFamily: AppFonts.interSemiBold,
-        fontSize: 15,
-        color: AppColors.white,
-        marginTop: 8,
-    },
-    videoFallbackSubtitle: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 12,
-        color: AppColors.whiteAlpha60,
-    },
-    centerPlayOverlay: {
-        position: 'absolute',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: 8,
-    },
-    centerPlayCircle: {
-        width: 64,
-        height: 64,
-        borderRadius: 32,
-        backgroundColor: `${AppColors.sky400}E0`,
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingLeft: 3,
-        shadowColor: AppColors.sky400,
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.5,
-        shadowRadius: 10,
-        elevation: 8,
-    },
-    centerPlayText: {
-        fontFamily: AppFonts.interSemiBold,
-        fontSize: 13,
-        color: AppColors.white,
-        letterSpacing: 0.3,
-        textShadowColor: 'rgba(0,0,0,0.7)',
-        textShadowOffset: { width: 0, height: 1 },
-        textShadowRadius: 3,
-    },
-    videoBadgeOverlay: {
-        position: 'absolute',
-        bottom: 12,
-        left: 12,
-    },
-    playPill: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        backgroundColor: `${AppColors.slate900}D9`,
-        paddingHorizontal: 10,
-        paddingVertical: 5,
-        borderRadius: 16,
-        borderWidth: 1,
-        borderColor: AppColors.whiteAlpha20,
-    },
-    playPillText: {
-        fontFamily: AppFonts.interSemiBold,
-        fontSize: 11,
-        color: AppColors.white,
-        letterSpacing: 0.3,
-    },
-    floatingMetaBadge: {
-        position: 'absolute',
-        bottom: 10,
-        backgroundColor: `${AppColors.slate900}D9`,
-        paddingHorizontal: 10,
-        paddingVertical: 4.5,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: AppColors.whiteAlpha15,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    floatingMetaText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10.5,
-        color: AppColors.slate200,
-        letterSpacing: 0.2,
-    },
-    videoControlsPanel: {
-        paddingHorizontal: 16,
-        paddingTop: 8,
-        paddingBottom: 6,
-        backgroundColor: AppColors.headerGlassDark,
-        borderTopWidth: 1,
-        borderTopColor: AppColors.borderGlassLight,
-        gap: 8,
-    },
-    progressSection: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 10,
-    },
-    timeLabel: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11,
-        color: AppColors.whiteAlpha60,
-        minWidth: 42,
-    },
-    progressTrack: {
-        flex: 1,
-        height: 6,
-        borderRadius: 3,
-        backgroundColor: AppColors.whiteAlpha15,
-        justifyContent: 'center',
-        position: 'relative',
-    },
-    progressFill: {
-        height: '100%',
-        borderRadius: 3,
-        backgroundColor: AppColors.sky400,
-    },
-    scrubberThumb: {
-        position: 'absolute',
-        width: 12,
-        height: 12,
-        borderRadius: 6,
-        backgroundColor: AppColors.white,
-        borderWidth: 2,
-        borderColor: 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: 6,
-        backgroundColor: `${AppColors.sky400}18`,
-        borderWidth: 1,
-        borderColor: `${AppColors.sky400}50`,
-    },
-    controlActionText: {
-        fontFamily: AppFonts.interSemiBold,
-        fontSize: 11.5,
-    },
-    speedGroup: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: AppColors.whiteAlpha08,
-        borderRadius: 6,
-        borderWidth: 1,
-        borderColor: AppColors.whiteAlpha12,
-        padding: 2,
-        gap: 2,
-    },
-    speedBtn: {
-        paddingHorizontal: 7,
-        paddingVertical: 3,
-        borderRadius: 4,
-    },
-    speedBtnActive: {
-        backgroundColor: `${AppColors.sky400}30`,
-    },
-    speedText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10.5,
-        color: AppColors.whiteAlpha60,
-    },
-    speedTextActive: {
-        color: AppColors.sky400,
-        fontFamily: AppFonts.interBold,
-    },
-    loopPill: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        paddingHorizontal: 8,
-        paddingVertical: 5,
-        borderRadius: 6,
-        backgroundColor: AppColors.whiteAlpha08,
-        borderWidth: 1,
-        borderColor: AppColors.whiteAlpha12,
-    },
-    loopPillActive: {
-        backgroundColor: `${AppColors.sky400}18`,
-        borderColor: `${AppColors.sky400}50`,
-    },
-    loopText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10.5,
-        color: AppColors.whiteAlpha60,
-    },
-    loopTextActive: {
-        color: AppColors.sky400,
-        fontFamily: AppFonts.interSemiBold,
-    },
-    footer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        flexWrap: 'wrap',
-        gap: 8,
-        paddingHorizontal: 16,
-        paddingTop: 8,
-        paddingBottom: Platform.OS === 'ios' ? 34 : 16,
-        borderTopWidth: 1,
-        borderTopColor: AppColors.borderGlassLight,
-        backgroundColor: AppColors.headerGlassDark,
-    },
-    actionBtn: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        paddingHorizontal: 16,
-        paddingVertical: 9,
-        borderRadius: 8,
-        backgroundColor: AppColors.whiteAlpha08,
-        borderWidth: 1,
-        borderColor: AppColors.whiteAlpha15,
-    },
-    actionText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 12,
-        color: AppColors.white,
-    },
-});
+            <R onPress={Y}style={[o.actionBtn,{backgroundColor:`${e.sky400}22`,borderColor:`${e.sky400}70`}]}>
+              <Te size={14}color={e.sky400}/>
+              <T style={[o.actionText,{color:e.sky400,fontFamily:S.interSemiBold}]}>
+                {r("mediaGallery.share","Share")}
+              </T>
+            </R>
+          </C>}
+      </C>
+    </De>};const o=oe.create({overlay:{flex:1,backgroundColor:"#090D16FA",justifyContent:"space-between"},header:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:16,paddingTop:V.OS==="ios"?52:20,paddingBottom:14,borderBottomWidth:1,borderBottomColor:e.borderGlassLight,backgroundColor:e.headerGlassDark},headerLeft:{flexDirection:"row",alignItems:"center",gap:10,flex:1,minWidth:0,marginRight:10},headerRight:{flexDirection:"row",alignItems:"center",gap:8},badge:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,borderWidth:1},badgeText:{fontFamily:S.interBold,fontSize:10.5,letterSpacing:.4},title:{fontFamily:S.interSemiBold,fontSize:13.5,color:e.white},subtitle:{fontFamily:S.interRegular,fontSize:11,color:e.whiteAlpha60,marginTop:1},headerActionBtn:{width:32,height:32,borderRadius:16,backgroundColor:e.whiteAlpha12,borderWidth:1,borderColor:e.whiteAlpha20,alignItems:"center",justifyContent:"center"},headerShareBtn:{width:32,height:32,borderRadius:16,backgroundColor:`${e.sky400}20`,borderWidth:1,borderColor:`${e.sky400}60`,alignItems:"center",justifyContent:"center"},headerDeleteBtn:{width:32,height:32,borderRadius:16,backgroundColor:`${e.red500}20`,borderWidth:1,borderColor:`${e.red500}60`,alignItems:"center",justifyContent:"center"},headerIconBtn:{width:32,height:32,borderRadius:16,backgroundColor:e.whiteAlpha12,borderWidth:1,borderColor:e.whiteAlpha20,alignItems:"center",justifyContent:"center"},stage:{flex:1,alignItems:"center",justifyContent:"center",paddingHorizontal:10,paddingTop:10,paddingBottom:10},stageExpanded:{paddingHorizontal:0,paddingTop:0,paddingBottom:0},previewCard:{flex:1,width:"100%",borderRadius:14,overflow:"hidden",backgroundColor:"#05070D",borderWidth:1,borderColor:e.borderGlassLight,alignItems:"center",justifyContent:"center",position:"relative"},previewCardExpanded:{borderRadius:0,borderWidth:0},image:{width:"100%",height:"100%"},videoImageOverlay:{...oe.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:`${e.sky400}18`},videoFallbackTitle:{fontFamily:S.interSemiBold,fontSize:15,color:e.white,marginTop:8},videoFallbackSubtitle:{fontFamily:S.interRegular,fontSize:12,color:e.whiteAlpha60},centerPlayOverlay:{position:"absolute",alignItems:"center",justifyContent:"center",gap:8},centerPlayCircle:{width:64,height:64,borderRadius:32,backgroundColor:`${e.sky400}E0`,alignItems:"center",justifyContent:"center",paddingLeft:3,shadowColor:e.sky400,shadowOffset:{width:0,height:4},shadowOpacity:.5,shadowRadius:10,elevation:8},centerPlayText:{fontFamily:S.interSemiBold,fontSize:13,color:e.white,letterSpacing:.3,textShadowColor:"rgba(0,0,0,0.7)",textShadowOffset:{width:0,height:1},textShadowRadius:3},videoBadgeOverlay:{position:"absolute",bottom:12,left:12},playPill:{flexDirection:"row",alignItems:"center",gap:6,backgroundColor:`${e.slate900}D9`,paddingHorizontal:10,paddingVertical:5,borderRadius:16,borderWidth:1,borderColor:e.whiteAlpha20},playPillText:{fontFamily:S.interSemiBold,fontSize:11,color:e.white,letterSpacing:.3},floatingMetaBadge:{position:"absolute",bottom:10,backgroundColor:`${e.slate900}D9`,paddingHorizontal:10,paddingVertical:4.5,borderRadius:8,borderWidth:1,borderColor:e.whiteAlpha15,alignItems:"center",justifyContent:"center"},floatingMetaText:{fontFamily:S.interMedium,fontSize:10.5,color:e.slate200,letterSpacing:.2},videoControlsPanel:{paddingHorizontal:16,paddingTop:8,paddingBottom:6,backgroundColor:e.headerGlassDark,borderTopWidth:1,borderTopColor:e.borderGlassLight,gap:8},progressSection:{flexDirection:"row",alignItems:"center",gap:10},timeLabel:{fontFamily:S.interMedium,fontSize:11,color:e.whiteAlpha60,minWidth:42},progressTrack:{flex:1,height:6,borderRadius:3,backgroundColor:e.whiteAlpha15,justifyContent:"center",position:"relative"},progressFill:{height:"100%",borderRadius:3,backgroundColor:e.sky400},scrubberThumb:{position:"absolute",width:12,height:12,borderRadius:6,backgroundColor:e.white,borderWidth:2,borderColor:e.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:6,backgroundColor:`${e.sky400}18`,borderWidth:1,borderColor:`${e.sky400}50`},controlActionText:{fontFamily:S.interSemiBold,fontSize:11.5},speedGroup:{flexDirection:"row",alignItems:"center",backgroundColor:e.whiteAlpha08,borderRadius:6,borderWidth:1,borderColor:e.whiteAlpha12,padding:2,gap:2},speedBtn:{paddingHorizontal:7,paddingVertical:3,borderRadius:4},speedBtnActive:{backgroundColor:`${e.sky400}30`},speedText:{fontFamily:S.interMedium,fontSize:10.5,color:e.whiteAlpha60},speedTextActive:{color:e.sky400,fontFamily:S.interBold},loopPill:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:5,borderRadius:6,backgroundColor:e.whiteAlpha08,borderWidth:1,borderColor:e.whiteAlpha12},loopPillActive:{backgroundColor:`${e.sky400}18`,borderColor:`${e.sky400}50`},loopText:{fontFamily:S.interMedium,fontSize:10.5,color:e.whiteAlpha60},loopTextActive:{color:e.sky400,fontFamily:S.interSemiBold},footer:{flexDirection:"row",alignItems:"center",justifyContent:"center",flexWrap:"wrap",gap:8,paddingHorizontal:16,paddingTop:8,paddingBottom:V.OS==="ios"?34:16,borderTopWidth:1,borderTopColor:e.borderGlassLight,backgroundColor:e.headerGlassDark},actionBtn:{flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:16,paddingVertical:9,borderRadius:8,backgroundColor:e.whiteAlpha08,borderWidth:1,borderColor:e.whiteAlpha15},actionText:{fontFamily:S.interMedium,fontSize:12,color:e.white}});