react-native-inapp-inspector 2.3.20 → 2.3.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -14
- package/android/src/main/java/com/inappinspector/NetworkInspectorModule.kt +58 -1
- package/dist/commonjs/components/AppHeaderLogo.js +2 -2
- package/dist/commonjs/components/ConsoleLogCard.js +1 -1
- package/dist/commonjs/components/HighlightText.js +13 -13
- package/dist/commonjs/components/Inspector/AboutModal.js +143 -251
- package/dist/commonjs/components/Inspector/DebuggingTab.js +19 -13
- package/dist/commonjs/components/Inspector/InspectorHeader.js +54 -80
- package/dist/commonjs/components/Inspector/MainScreen.js +13 -23
- package/dist/commonjs/components/Inspector/MediaGalleryTab.js +4 -4
- package/dist/commonjs/components/Inspector/MediaPreviewModal.js +1 -1
- package/dist/commonjs/components/Inspector/NpmStarPrompt.js +1 -1
- package/dist/commonjs/components/Inspector/TabBar.js +7 -7
- package/dist/commonjs/components/Inspector/UpdateAvailableModal.js +23 -24
- package/dist/commonjs/components/LogCard.js +16 -16
- package/dist/commonjs/components/NetworkIcons.d.ts +10 -0
- package/dist/commonjs/components/NetworkIcons.js +46 -4
- package/dist/commonjs/components/QRCodeView.js +2 -2
- package/dist/commonjs/components/TreeNode.js +16 -16
- package/dist/commonjs/constants/version.d.ts +1 -1
- package/dist/commonjs/constants/version.js +1 -1
- package/dist/commonjs/customHooks/bundleAnalyzer.js +1 -1
- package/dist/commonjs/helpers/index.d.ts +1 -0
- package/dist/commonjs/helpers/index.js +2 -2
- package/dist/commonjs/index.js +1 -1
- package/dist/commonjs/native/NativeInspector.d.ts +1 -0
- package/dist/commonjs/native/NativeInspector.js +1 -1
- package/dist/commonjs/types/interfaces.d.ts +0 -2
- package/dist/esm/components/AppHeaderLogo.js +6 -6
- package/dist/esm/components/ConsoleLogCard.js +6 -6
- package/dist/esm/components/HighlightText.js +17 -17
- package/dist/esm/components/Inspector/AboutModal.js +205 -313
- package/dist/esm/components/Inspector/DebuggingTab.js +32 -26
- package/dist/esm/components/Inspector/InspectorHeader.js +96 -122
- package/dist/esm/components/Inspector/MainScreen.js +66 -76
- package/dist/esm/components/Inspector/MediaGalleryTab.js +19 -19
- package/dist/esm/components/Inspector/MediaPreviewModal.js +18 -18
- package/dist/esm/components/Inspector/NpmStarPrompt.js +1 -1
- package/dist/esm/components/Inspector/TabBar.js +21 -21
- package/dist/esm/components/Inspector/UpdateAvailableModal.js +65 -66
- package/dist/esm/components/LogCard.js +43 -43
- package/dist/esm/components/NetworkIcons.d.ts +10 -0
- package/dist/esm/components/NetworkIcons.js +191 -149
- package/dist/esm/components/QRCodeView.js +4 -4
- package/dist/esm/components/TreeNode.js +53 -53
- package/dist/esm/constants/version.d.ts +1 -1
- package/dist/esm/constants/version.js +1 -1
- package/dist/esm/customHooks/bundleAnalyzer.js +1 -1
- package/dist/esm/helpers/index.d.ts +1 -0
- package/dist/esm/helpers/index.js +4 -4
- package/dist/esm/index.js +7 -7
- package/dist/esm/native/NativeInspector.d.ts +1 -0
- package/dist/esm/native/NativeInspector.js +1 -1
- package/dist/esm/types/interfaces.d.ts +0 -2
- package/ios/NetworkInspectorModule.mm +39 -3
- package/package.json +1 -1
- package/src/native/NativeInspector.ts +18 -0
- package/dist/commonjs/components/Inspector/FeedbackModal.d.ts +0 -16
- package/dist/commonjs/components/Inspector/FeedbackModal.js +0 -198
- package/dist/esm/components/Inspector/FeedbackModal.d.ts +0 -16
- package/dist/esm/components/Inspector/FeedbackModal.js +0 -198
|
@@ -1,108 +1,98 @@
|
|
|
1
|
-
import
|
|
2
|
-
{(
|
|
3
|
-
<
|
|
4
|
-
<
|
|
5
|
-
<S style={
|
|
6
|
-
<
|
|
7
|
-
<S style={[
|
|
8
|
-
<
|
|
1
|
+
import U,{useEffect as P,useRef as M}from"react";import{Animated as w,Modal as J,Platform as I,Pressable as K,StatusBar as Q,StyleSheet as x,View as S}from"react-native";import{useInspector as X}from"./InspectorContext";import Z from"../ErrorBoundary";import Se from"./FabLauncher";import Ve from"./InspectorHeader";import Ce from"./TabBar";import Re from"./NetworkTab";import Be from"./NetworkDetail";import Te from"./LogDetail";import De from"./ConsoleTab";import Ae from"./AnalyticsTab";import Le from"../AnalyticsDetail";import Ne from"./ReduxTab";import Pe from"./ReduxDetail";import Me from"./BundleTab";import Ie from"./PerformanceTab";import Ee from"./CrashTab";import Fe from"./CrashDetail";import Oe from"./DeviceInfoTab";import We from"./StorageTab";import Ge from"./DebuggingTab";import{MediaGalleryTab as He}from"./MediaGalleryTab";import Ye from"./SettingsPanel";import _e from"./AboutModal";import $e from"./NpmUpdateToast";import Ue from"./NpmStarPrompt";import Je from"../Toast";import E from"../../styles";import{AppColors as k}from"../../styles/AppColors";import Ke from"./NavigationTracker";import{isLocalDebugEnvironment as Qe}from"../../helpers";const Xe=()=>{const{visible:D,isMinimized:V,modalAnimationType:C,closeModal:A,modalHeightPercent:L,selected:F,selectedEvent:N,selectedLog:O,selectedReduxSlice:G,selectedReduxAction:H,selectedCrash:W,settingsPage:R,isAboutOpen:B,setIsAboutOpen:q,activeTab:t,isReady:Y,enabled:_,useNativeFab:et,hasNavigationContext:$,setNavState:j}=X(),z=t==="apis"&&F!=null||t==="analytics"&&N!=null||t==="logs"&&O!=null||t==="redux"&&(G!=null||H!=null)||t==="crash"&&W!=null,v=M(new w.Value(0)).current;P(()=>{R!==null&&(v.setValue(0),w.spring(v,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[R!==null]);const T=M(new w.Value(0)).current;return P(()=>{B&&(T.setValue(0),w.spring(T,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[B]),<>
|
|
2
|
+
{(I.OS==="ios"||I.OS==="android")&&_&&!D&&<Se/>}
|
|
3
|
+
<J visible={D}animationType={C}transparent statusBarTranslucent={!0}onRequestClose={A}>
|
|
4
|
+
<Z onClose={A}>
|
|
5
|
+
<S style={E.modalBackdrop}>
|
|
6
|
+
<K style={E.modalBackdropPressable}onPress={A}/>
|
|
7
|
+
<S style={[E.modalContentCard,{height:`${L}%`,borderTopLeftRadius:L>=100?0:20,borderTopRightRadius:L>=100?0:20}]}>
|
|
8
|
+
<Q translucent backgroundColor="transparent"barStyle="light-content"/>
|
|
9
9
|
|
|
10
|
-
<
|
|
10
|
+
<Ve/>
|
|
11
11
|
|
|
12
12
|
<S style={{flex:1}}>
|
|
13
13
|
|
|
14
|
-
<S style={{flex:1}}pointerEvents={
|
|
15
|
-
<
|
|
16
|
-
{
|
|
17
|
-
{
|
|
18
|
-
{
|
|
19
|
-
{
|
|
20
|
-
{
|
|
21
|
-
{
|
|
22
|
-
{
|
|
23
|
-
{
|
|
24
|
-
{
|
|
25
|
-
{
|
|
26
|
-
{
|
|
27
|
-
{
|
|
28
|
-
</S>:<
|
|
14
|
+
<S style={{flex:1}}pointerEvents={z||R!==null||B?"none":"auto"}>
|
|
15
|
+
<Ce/>
|
|
16
|
+
{Y?<S style={{flex:1}}>
|
|
17
|
+
{t==="apis"&&<Re/>}
|
|
18
|
+
{t==="logs"&&<De/>}
|
|
19
|
+
{t==="analytics"&&<Ae/>}
|
|
20
|
+
{t==="redux"&&<Ne/>}
|
|
21
|
+
{t==="bundle"&&<Me/>}
|
|
22
|
+
{t==="performance"&&<Ie/>}
|
|
23
|
+
{t==="crash"&&<Ee/>}
|
|
24
|
+
{t==="device"&&<Oe/>}
|
|
25
|
+
{t==="storage"&&<We/>}
|
|
26
|
+
{t==="media"&&<He/>}
|
|
27
|
+
{I.OS==="android"&&Qe()&&t==="debugging"&&<Ge/>}
|
|
28
|
+
</S>:<Ze/>}
|
|
29
29
|
</S>
|
|
30
30
|
|
|
31
31
|
|
|
32
|
-
{
|
|
33
|
-
{
|
|
34
|
-
{
|
|
35
|
-
{
|
|
36
|
-
{
|
|
37
|
-
{
|
|
32
|
+
{z&&<S style={[x.absoluteFill,{backgroundColor:k.contentBg,zIndex:10}]}>
|
|
33
|
+
{t==="apis"&&F!=null&&<Be/>}
|
|
34
|
+
{t==="analytics"&&N!=null&&<Le event={N}/>}
|
|
35
|
+
{t==="logs"&&O!=null&&<Te/>}
|
|
36
|
+
{t==="redux"&&<Pe/>}
|
|
37
|
+
{t==="crash"&&W!=null&&<Fe/>}
|
|
38
38
|
</S>}
|
|
39
39
|
|
|
40
40
|
|
|
41
|
-
{R!==null&&<
|
|
42
|
-
<
|
|
43
|
-
</
|
|
41
|
+
{R!==null&&<w.View style={[x.absoluteFill,{backgroundColor:k.grayBackground,opacity:v,transform:[{translateY:v.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
|
|
42
|
+
<Ye/>
|
|
43
|
+
</w.View>}
|
|
44
44
|
|
|
45
45
|
|
|
46
|
-
{
|
|
47
|
-
<
|
|
48
|
-
</
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
{B&&<e.View style={[T.absoluteFill,{backgroundColor:k.primaryLight,opacity:A,transform:[{translateY:A.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
|
|
52
|
-
<Ke onClose={()=>$(!1)}/>
|
|
53
|
-
</e.View>}
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
{!E&&R===null&&!v&&!B&&<Ve activeOpacity={.8}onPress={()=>Y(!0)}hitSlop={{top:10,bottom:10,left:10,right:10}}style={P.supportFab}>
|
|
57
|
-
<Vt color={k.white}size={20}/>
|
|
58
|
-
</Ve>}
|
|
46
|
+
{B&&<w.View style={[x.absoluteFill,{backgroundColor:k.primaryLight,opacity:T,transform:[{translateY:T.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
|
|
47
|
+
<_e onClose={()=>q(!1)}/>
|
|
48
|
+
</w.View>}
|
|
59
49
|
</S>
|
|
60
50
|
|
|
61
51
|
|
|
62
|
-
<
|
|
52
|
+
<Je/>
|
|
63
53
|
|
|
64
54
|
|
|
65
|
-
|
|
55
|
+
<$e/>
|
|
66
56
|
|
|
67
57
|
|
|
68
|
-
<
|
|
58
|
+
<Ue/>
|
|
69
59
|
</S>
|
|
70
60
|
</S>
|
|
71
|
-
</
|
|
72
|
-
{
|
|
73
|
-
</
|
|
74
|
-
</>},
|
|
61
|
+
</Z>
|
|
62
|
+
{$&&<Ke onStateChange={j}/>}
|
|
63
|
+
</J>
|
|
64
|
+
</>},Ze=U.memo(function(){const V=M(new w.Value(.35)).current;return P(()=>{const C=w.loop(w.sequence([w.timing(V,{toValue:.85,duration:750,useNativeDriver:!1}),w.timing(V,{toValue:.35,duration:750,useNativeDriver:!1})]));return C.start(),()=>C.stop()},[V]),<S style={e.container}>
|
|
75
65
|
|
|
76
|
-
<S style={
|
|
77
|
-
<
|
|
78
|
-
<S style={
|
|
79
|
-
<
|
|
80
|
-
<
|
|
66
|
+
<S style={e.toolbarSkeleton}>
|
|
67
|
+
<w.View style={[e.searchBarSkeleton,{opacity:V}]}/>
|
|
68
|
+
<S style={e.actionButtonsRow}>
|
|
69
|
+
<w.View style={[e.iconButtonSkeleton,{opacity:V}]}/>
|
|
70
|
+
<w.View style={[e.iconButtonSkeleton,{opacity:V}]}/>
|
|
81
71
|
</S>
|
|
82
72
|
</S>
|
|
83
73
|
|
|
84
74
|
|
|
85
|
-
<S style={
|
|
86
|
-
<
|
|
87
|
-
<
|
|
88
|
-
<
|
|
89
|
-
<
|
|
75
|
+
<S style={e.chipStripSkeleton}>
|
|
76
|
+
<w.View style={[e.chipSkeleton,{width:48,opacity:V}]}/>
|
|
77
|
+
<w.View style={[e.chipSkeleton,{width:68,opacity:V}]}/>
|
|
78
|
+
<w.View style={[e.chipSkeleton,{width:76,opacity:V}]}/>
|
|
79
|
+
<w.View style={[e.chipSkeleton,{width:58,opacity:V}]}/>
|
|
90
80
|
</S>
|
|
91
81
|
|
|
92
82
|
|
|
93
|
-
{[0,1,2,3].map(C=><
|
|
94
|
-
<S style={
|
|
95
|
-
<S style={
|
|
96
|
-
<S style={
|
|
97
|
-
<S style={
|
|
83
|
+
{[0,1,2,3].map(C=><w.View key={`skeleton_card_${C}`}style={[e.cardSkeleton,{opacity:V}]}>
|
|
84
|
+
<S style={e.cardTopRow}>
|
|
85
|
+
<S style={e.badgeGroup}>
|
|
86
|
+
<S style={e.statusBadgeSkeleton}/>
|
|
87
|
+
<S style={e.methodBadgeSkeleton}/>
|
|
98
88
|
</S>
|
|
99
|
-
<S style={
|
|
89
|
+
<S style={e.timeSkeleton}/>
|
|
100
90
|
</S>
|
|
101
|
-
<S style={
|
|
102
|
-
<S style={
|
|
103
|
-
<S style={
|
|
104
|
-
<S style={
|
|
105
|
-
<S style={
|
|
91
|
+
<S style={e.urlLineLong}/>
|
|
92
|
+
<S style={e.urlLineShort}/>
|
|
93
|
+
<S style={e.cardBottomRow}>
|
|
94
|
+
<S style={e.metaPillSkeleton}/>
|
|
95
|
+
<S style={e.metaPillSkeleton}/>
|
|
106
96
|
</S>
|
|
107
|
-
</
|
|
108
|
-
</S>}),
|
|
97
|
+
</w.View>)}
|
|
98
|
+
</S>}),e=x.create({container:{flex:1,paddingHorizontal:12,paddingTop:8},toolbarSkeleton:{flexDirection:"row",alignItems:"center",gap:8,marginBottom:8},searchBarSkeleton:{flex:1,height:36,borderRadius:8,backgroundColor:k.graySurface,borderWidth:1,borderColor:k.dividerColor},actionButtonsRow:{flexDirection:"row",gap:6},iconButtonSkeleton:{width:36,height:36,borderRadius:8,backgroundColor:k.graySurface,borderWidth:1,borderColor:k.dividerColor},chipStripSkeleton:{flexDirection:"row",gap:6,marginBottom:10},chipSkeleton:{height:24,borderRadius:6,backgroundColor:k.graySurface,borderWidth:1,borderColor:k.dividerColor},cardSkeleton:{backgroundColor:k.primaryLight,borderRadius:10,padding:12,marginBottom:8,borderWidth:1,borderColor:k.dividerColor},cardTopRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:8},badgeGroup:{flexDirection:"row",alignItems:"center",gap:6},statusBadgeSkeleton:{width:38,height:18,borderRadius:4,backgroundColor:k.graySurface},methodBadgeSkeleton:{width:44,height:18,borderRadius:4,backgroundColor:k.graySurface},timeSkeleton:{width:48,height:12,borderRadius:4,backgroundColor:k.graySurface},urlLineLong:{height:13,borderRadius:4,backgroundColor:k.graySurface,marginBottom:5,width:"90%"},urlLineShort:{height:11,borderRadius:4,backgroundColor:k.graySurface,marginBottom:8,width:"55%"},cardBottomRow:{flexDirection:"row",gap:8,marginTop:2},metaPillSkeleton:{width:52,height:14,borderRadius:4,backgroundColor:k.graySurface}});export default Xe;
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import{useState as
|
|
2
|
-
`);
|
|
1
|
+
import{useState as W,useEffect as He,useMemo as te,useCallback as oe}from"react";import{Alert as ie,Dimensions as je,FlatList as Ee,Image as Ce,RefreshControl as _e,Share as Te,StyleSheet as Ne,Text as S,TouchableOpacity as I,View as C}from"react-native";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as B}from"../../styles/AppFonts";import Se from"../TouchableScale";import Je from"../EmptyState";import{CheckIcon as Ie,CopyIcon as E,FilmIcon as $,GifIcon as _,GridIcon as Qe,ImageIcon as F,ListIcon as Xe,PlayIcon as Be,ScreencastIcon as Ye,ShareIcon as Re,TrashIcon as N}from"../NetworkIcons";import{MediaPreviewModal as Ze}from"./MediaPreviewModal";import{ScreenCapture as P}from"../../capture";import{copyImageOrMediaToClipboard as Ke,copyToClipboard as et,formatBytes as U}from"../../helpers";import{showToast as A}from"../../helpers/toast";import{useTranslation as tt}from"../../i18n";import{useInspector as ot}from"./InspectorContext";export const MediaGalleryTab=()=>{const{t:r}=tt(),{refreshMediaCount:V,switchActiveTab:H}=ot(),[x,q]=W([]),[Ge,J]=W(!1),[O,Me]=W("all"),[Q,j]=W(null),[v,L]=W(new Set),[R,X]=W("grid"),M=oe(async()=>{try{const t=await P.getMediaList();q(t),V?.().catch(()=>{})}catch{q([])}},[V]);He(()=>{M()},[M]);const De=async()=>{J(!0),await M(),J(!1)},G=te(()=>O==="all"?x:x.filter(t=>t.type===O),[x,O]),Y=te(()=>x.reduce((t,i)=>t+(i.sizeBytes||0),0),[x]),Z=oe(t=>{L(i=>{const l=new Set(i);return l.has(t)?l.delete(t):l.add(t),l})},[]),K=async t=>{await P.deleteMedia(t.uri),L(l=>{const T=new Set(l);return T.delete(t.id),T}),await M(),await V?.()===0&&H("apis"),A(r("mediaGallery.deleted"))},ee=t=>{t?.uri&&Ke(t.uri,t.type==="image"?"Image":"Media")},Ve=()=>{const t=x.filter(l=>v.has(l.id));if(t.length===0)return;const i=t.map(l=>l.uri).join(`
|
|
2
|
+
`);et(i,`${t.length} Media URIs`),A(`${t.length} file URIs copied to clipboard`)},We=async t=>{try{const i=t.uri.startsWith("file://")||t.uri.startsWith("content://")||t.uri.startsWith("http")?t.uri:`file://${t.uri}`;await Te.share({url:i,title:t.filename,message:t.filename})}catch{A(r("mediaGallery.shareUnavailable","Sharing not available on this device"))}},Ae=async()=>{const t=x.filter(i=>v.has(i.id));if(t.length!==0)try{const i=t[0],l=i.uri.startsWith("file://")||i.uri.startsWith("content://")||i.uri.startsWith("http")?i.uri:`file://${i.uri}`;await Te.share({url:l,title:i.filename,message:t.length===1?i.filename:`${t.length} items: ${t.map(T=>T.filename).join(", ")}`})}catch{A(r("mediaGallery.shareUnavailable","Sharing not available on this device"))}},$e=()=>{const t=v.size;t!==0&&ie.alert(r("mediaGallery.deleteSelectedTitle"),r("mediaGallery.deleteSelectedMessage",{count:t}),[{text:r("common.cancel"),style:"cancel"},{text:r("mediaGallery.delete"),style:"destructive",onPress:async()=>{const i=x.filter(T=>v.has(T.id));for(const T of i)await P.deleteMedia(T.uri);L(new Set),await M(),await V?.()===0&&H("apis"),A(r("mediaGallery.deletedCount",{count:i.length}))}}])},Fe=()=>{ie.alert(r("mediaGallery.purgeTitle"),r("mediaGallery.purgeMessage",{count:x.length,size:U(Y)}),[{text:r("common.cancel"),style:"cancel"},{text:r("common.clearAll"),style:"destructive",onPress:async()=>{await P.clearAllMedia(),L(new Set),await M(),await V?.(),H("apis"),A(r("mediaGallery.allPurged"))}}])},Pe=async t=>{await P.convertToGif(t.uri,{fps:12,width:480})&&(await M(),V?.().catch(()=>{}))},Oe=(t,i)=>{const l=i?e.sky400:e.slate400,T=12;switch(t){case"all":return<Ye size={T}color={l}/>;case"image":return<F size={T}color={l}/>;case"video":return<$ size={T}color={l}/>;case"gif":return<_ size={T}color={l}/>}},Le=({item:t})=>{const i=t.type==="video",l=t.type==="gif",T=i?t.thumbnailUri:t.uri,D=v.has(t.id);return<Se onPress={()=>j(t)}style={[o.card,D&&o.cardSelected]}>
|
|
3
3
|
<C style={o.thumbnailContainer}>
|
|
4
4
|
{T?<Ce source={{uri:T}}style={o.thumbnail}resizeMode="cover"/>:<C style={o.thumbnailFallback}>
|
|
5
|
-
{i
|
|
5
|
+
{i?<$ size={26}color={e.sky400}/>:<F size={26}color={e.slate400}/>}
|
|
6
6
|
</C>}
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
<I onPress={()=>Z(t.id)}style={[o.checkbox,
|
|
10
|
-
{
|
|
9
|
+
<I onPress={()=>Z(t.id)}style={[o.checkbox,D&&o.checkboxSelected]}hitSlop={{top:8,bottom:8,left:8,right:8}}>
|
|
10
|
+
{D&&<Ie size={12}color={e.white}/>}
|
|
11
11
|
</I>
|
|
12
12
|
|
|
13
13
|
{i&&<C style={o.miniPlayCircle}>
|
|
14
14
|
<Be size={14}color={e.white}/>
|
|
15
15
|
</C>}
|
|
16
16
|
<C style={o.typeBadge}>
|
|
17
|
-
{i
|
|
17
|
+
{i?<$ size={11}color={e.sky400}/>:l?<_ size={11}color={e.warningAmber}/>:<F size={11}color={e.emerald500}/>}
|
|
18
18
|
<S style={o.typeBadgeText}>
|
|
19
19
|
{t.format.toUpperCase()}
|
|
20
20
|
</S>
|
|
@@ -40,16 +40,16 @@ import{useState as A,useEffect as je,useMemo as te,useCallback as oe}from"react"
|
|
|
40
40
|
</I>
|
|
41
41
|
</C>
|
|
42
42
|
</C>
|
|
43
|
-
</Se>},
|
|
43
|
+
</Se>},Ue=({item:t})=>{const i=t.type==="video",l=t.type==="gif",T=i?t.thumbnailUri:t.uri,D=v.has(t.id);return<Se onPress={()=>j(t)}style={[o.listRow,D&&o.listRowSelected]}>
|
|
44
44
|
|
|
45
|
-
<I onPress={()=>Z(t.id)}style={[o.listCheckbox,
|
|
46
|
-
{
|
|
45
|
+
<I onPress={()=>Z(t.id)}style={[o.listCheckbox,D&&o.checkboxSelected]}hitSlop={{top:8,bottom:8,left:8,right:8}}>
|
|
46
|
+
{D&&<Ie size={12}color={e.white}/>}
|
|
47
47
|
</I>
|
|
48
48
|
|
|
49
49
|
|
|
50
50
|
<C style={o.listThumbContainer}>
|
|
51
51
|
{T?<Ce source={{uri:T}}style={o.listThumb}resizeMode="cover"/>:<C style={o.listThumbFallback}>
|
|
52
|
-
{i
|
|
52
|
+
{i?<$ size={18}color={e.sky400}/>:<F size={18}color={e.slate400}/>}
|
|
53
53
|
</C>}
|
|
54
54
|
{i&&<C style={o.listMiniPlay}>
|
|
55
55
|
<Be size={10}color={e.white}/>
|
|
@@ -63,7 +63,7 @@ import{useState as A,useEffect as je,useMemo as te,useCallback as oe}from"react"
|
|
|
63
63
|
</S>
|
|
64
64
|
<C style={o.listMetaRow}>
|
|
65
65
|
<C style={o.listBadge}>
|
|
66
|
-
{i
|
|
66
|
+
{i?<$ size={10}color={e.sky400}/>:l?<_ size={10}color={e.warningAmber}/>:<F size={10}color={e.emerald500}/>}
|
|
67
67
|
<S style={o.listBadgeText}>
|
|
68
68
|
{t.format.toUpperCase()}
|
|
69
69
|
</S>
|
|
@@ -85,7 +85,7 @@ import{useState as A,useEffect as je,useMemo as te,useCallback as oe}from"react"
|
|
|
85
85
|
<E size={13}color={e.slate200}/>
|
|
86
86
|
</I>
|
|
87
87
|
|
|
88
|
-
<I onPress={()=>
|
|
88
|
+
<I onPress={()=>We(t)}style={o.listShareBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
|
|
89
89
|
<Re size={13}color={e.sky400}/>
|
|
90
90
|
</I>
|
|
91
91
|
|
|
@@ -97,7 +97,7 @@ import{useState as A,useEffect as je,useMemo as te,useCallback as oe}from"react"
|
|
|
97
97
|
|
|
98
98
|
<C style={o.filterBar}>
|
|
99
99
|
<C style={o.chipGroup}>
|
|
100
|
-
{["all","image","video","gif"].map(t=>{const i=
|
|
100
|
+
{["all","image","video","gif"].map(t=>{const i=O===t,l=t==="all"?r("mediaGallery.all",{count:x.length}):r(t==="image"?"mediaGallery.photos":t==="video"?"mediaGallery.videos":"mediaGallery.gifs");return<I key={t}onPress={()=>Me(t)}style={[o.chip,i&&o.chipActive]}>
|
|
101
101
|
{Oe(t,i)}
|
|
102
102
|
<S style={[o.chipText,i&&o.chipTextActive]}>
|
|
103
103
|
{l}
|
|
@@ -126,14 +126,14 @@ import{useState as A,useEffect as je,useMemo as te,useCallback as oe}from"react"
|
|
|
126
126
|
|
|
127
127
|
<C style={o.actionsGroup}>
|
|
128
128
|
{v.size>0&&<>
|
|
129
|
-
<I onPress={
|
|
129
|
+
<I onPress={Ve}style={o.copySelectedBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
|
|
130
130
|
<E size={12}color={e.slate200}/>
|
|
131
131
|
<S style={o.copySelectedBtnText}>
|
|
132
132
|
{r("mediaGallery.copyUri","Copy URI")}
|
|
133
133
|
</S>
|
|
134
134
|
</I>
|
|
135
135
|
|
|
136
|
-
<I onPress={
|
|
136
|
+
<I onPress={Ae}style={o.shareSelectedBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
|
|
137
137
|
<Re size={12}color={e.sky400}/>
|
|
138
138
|
<S style={o.shareSelectedBtnText}>
|
|
139
139
|
{r("mediaGallery.share","Share")}
|
|
@@ -148,7 +148,7 @@ import{useState as A,useEffect as je,useMemo as te,useCallback as oe}from"react"
|
|
|
148
148
|
</I>
|
|
149
149
|
</>}
|
|
150
150
|
|
|
151
|
-
<I onPress={
|
|
151
|
+
<I onPress={Fe}style={o.clearBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
|
|
152
152
|
<N size={13}color={e.red500}/>
|
|
153
153
|
<S style={o.clearBtnText}>
|
|
154
154
|
{r("mediaGallery.purge",{size:U(Y)})}
|
|
@@ -158,8 +158,8 @@ import{useState as A,useEffect as je,useMemo as te,useCallback as oe}from"react"
|
|
|
158
158
|
</C>}
|
|
159
159
|
|
|
160
160
|
|
|
161
|
-
<
|
|
161
|
+
<Ee key={R}data={G}keyExtractor={t=>t.id}renderItem={R==="grid"?Le:Ue}numColumns={R==="grid"?2:1}columnWrapperStyle={R==="grid"?o.columnWrapper:void 0}contentContainerStyle={o.listContent}refreshControl={<_e refreshing={Ge}onRefresh={De}tintColor={e.sky400}/>}ListEmptyComponent={<Je customTitle={r("mediaGallery.noMediaTitle")}customSub={r("mediaGallery.noMediaDesc")}showReload={!1}/>}/>
|
|
162
162
|
|
|
163
163
|
|
|
164
|
-
<Ze item={Q}visible={!!Q}onClose={()=>j(null)}onDelete={K}onConvertToGif={
|
|
165
|
-
</C>};const{width:
|
|
164
|
+
<Ze item={Q}visible={!!Q}onClose={()=>j(null)}onDelete={K}onConvertToGif={Pe}/>
|
|
165
|
+
</C>};const{width:it}=je.get("window"),rt=(it-36)/2,o=Ne.create({container:{flex:1,backgroundColor:e.slate850},filterBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:9,borderBottomWidth:1,borderBottomColor:e.borderGlassLight,gap:8},chipGroup:{flexDirection:"row",alignItems:"center",gap:6,flexShrink:1},chip:{flexDirection:"row",alignItems:"center",gap:4.5,paddingHorizontal:8,paddingVertical:4.5,borderRadius:6,backgroundColor:e.whiteAlpha06,borderWidth:1,borderColor:e.whiteAlpha10},chipActive:{backgroundColor:`${e.sky400}2E`,borderColor:e.sky400},chipText:{fontFamily:B.interMedium,fontSize:11,color:e.slate400},chipTextActive:{fontFamily:B.interBold,color:e.sky400},subBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:7,backgroundColor:`${e.slate900}99`,borderBottomWidth:1,borderBottomColor:e.borderGlassLight,gap:8},resultCountWrapper:{flexDirection:"row",alignItems:"center",flexShrink:1},resultCountText:{fontFamily:B.interMedium,fontSize:11,color:e.slate400},resultCountTextSelected:{fontFamily:B.interSemiBold,color:e.sky400},actionsGroup:{flexDirection:"row",alignItems:"center",gap:6},viewToggleContainer:{flexDirection:"row",alignItems:"center",backgroundColor:e.whiteAlpha06,borderRadius:6,padding:2,borderWidth:1,borderColor:e.whiteAlpha10},viewToggleBtn:{paddingHorizontal:7,paddingVertical:4,borderRadius:4,alignItems:"center",justifyContent:"center"},viewToggleBtnActive:{backgroundColor:`${e.violet600}80`},deleteBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${e.red500}26`,borderWidth:1,borderColor:`${e.red500}80`},deleteBtnText:{fontFamily:B.interBold,fontSize:10.5,color:e.red500},clearBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${e.red500}1F`,borderWidth:1,borderColor:`${e.red500}4D`},clearBtnText:{fontFamily:B.interMedium,fontSize:10.5,color:e.red500},listContent:{padding:12,gap:10},columnWrapper:{gap:12},card:{width:rt,backgroundColor:e.slate800,borderRadius:8,borderWidth:1,borderColor:e.borderGlassLight,overflow:"hidden"},cardSelected:{borderColor:e.violet600,borderWidth:1.5},thumbnailContainer:{width:"100%",height:110,backgroundColor:e.slate850,position:"relative"},thumbnail:{width:"100%",height:"100%"},thumbnailFallback:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",backgroundColor:e.slate900},checkbox:{position:"absolute",top:6,left:6,width:22,height:22,borderRadius:5,borderWidth:1.5,borderColor:"rgba(255, 255, 255, 0.65)",backgroundColor:"rgba(15, 23, 42, 0.65)",alignItems:"center",justifyContent:"center",zIndex:10},checkboxSelected:{backgroundColor:e.violet600,borderColor:e.violet600},miniPlayCircle:{position:"absolute",top:"50%",left:"50%",width:32,height:32,marginTop:-16,marginLeft:-16,borderRadius:16,backgroundColor:`${e.sky400}D9`,alignItems:"center",justifyContent:"center",paddingLeft:2,shadowColor:"#000",shadowOffset:{width:0,height:2},shadowOpacity:.4,shadowRadius:4,elevation:4},typeBadge:{position:"absolute",top:6,right:6,flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.badgeGlassDark,paddingHorizontal:5,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:e.borderGlassMedium},typeBadgeText:{fontFamily:B.interBold,fontSize:9,color:e.slate200},cardInfo:{padding:8,gap:3},cardTitle:{fontFamily:B.interMedium,fontSize:11.5,color:e.white},cardMetaRow:{flexDirection:"row",alignItems:"center",gap:4},cardMeta:{fontFamily:B.interRegular,fontSize:10,color:e.slate400},cardMetaDot:{fontSize:10,color:e.whiteAlpha30},listRow:{flexDirection:"row",alignItems:"center",backgroundColor:e.slate800,borderRadius:8,borderWidth:1,borderColor:e.borderGlassLight,padding:8,gap:10},listRowSelected:{borderColor:e.violet600,borderWidth:1.5,backgroundColor:`${e.violet600}14`},listCheckbox:{width:20,height:20,borderRadius:4,borderWidth:1.5,borderColor:"rgba(255, 255, 255, 0.65)",backgroundColor:"rgba(15, 23, 42, 0.65)",alignItems:"center",justifyContent:"center"},listThumbContainer:{width:46,height:46,borderRadius:6,backgroundColor:e.slate850,overflow:"hidden",position:"relative"},listThumb:{width:"100%",height:"100%"},listThumbFallback:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",backgroundColor:e.slate900},listMiniPlay:{position:"absolute",top:"50%",left:"50%",width:20,height:20,marginTop:-10,marginLeft:-10,borderRadius:10,backgroundColor:`${e.sky400}D9`,alignItems:"center",justifyContent:"center",paddingLeft:1},listInfo:{flex:1,gap:4,minWidth:0},listTitle:{fontFamily:B.interMedium,fontSize:12,color:e.white},listMetaRow:{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap"},listBadge:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.badgeGlassDark,paddingHorizontal:4,paddingVertical:1.5,borderRadius:4,borderWidth:1,borderColor:e.borderGlassMedium},listBadgeText:{fontFamily:B.interBold,fontSize:8.5,color:e.slate200},gridCopyBtn:{padding:3,borderRadius:4,backgroundColor:e.whiteAlpha08},listActionsRow:{flexDirection:"row",alignItems:"center",gap:6},listCopyBtn:{padding:6,borderRadius:6,backgroundColor:e.whiteAlpha10,borderWidth:1,borderColor:e.whiteAlpha15},listShareBtn:{padding:6,borderRadius:6,backgroundColor:`${e.sky400}18`,borderWidth:1,borderColor:`${e.sky400}40`},listDeleteBtn:{padding:6,borderRadius:6,backgroundColor:`${e.red500}14`,borderWidth:1,borderColor:`${e.red500}33`},copySelectedBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:e.whiteAlpha10,borderWidth:1,borderColor:e.whiteAlpha20},copySelectedBtnText:{fontFamily:B.interSemiBold,fontSize:10.5,color:e.slate200},shareSelectedBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${e.sky400}20`,borderWidth:1,borderColor:`${e.sky400}60`},shareSelectedBtnText:{fontFamily:B.interBold,fontSize:10.5,color:e.sky400}});
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import{useState as P}from"react";import{Alert as
|
|
1
|
+
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}>
|
|
2
2
|
<C style={o.overlay}>
|
|
3
3
|
|
|
4
4
|
<C style={o.header}>
|
|
5
|
-
<I activeOpacity={.8}onPress={
|
|
6
|
-
<C style={[o.badge,{borderColor:A?`${e.sky400}80`:
|
|
7
|
-
{A?<E size={13}color={e.sky400}/>:
|
|
8
|
-
<T style={[o.badgeText,{color:A?e.sky400:
|
|
5
|
+
<I activeOpacity={.8}onPress={O}style={o.headerLeft}>
|
|
6
|
+
<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`}]}>
|
|
7
|
+
{A?<E size={13}color={e.sky400}/>:F?<H size={13}color={e.warningAmber}/>:<Le size={13}color={e.emerald500}/>}
|
|
8
|
+
<T style={[o.badgeText,{color:A?e.sky400:F?e.warningAmber:e.emerald500}]}>
|
|
9
9
|
{t.format.toUpperCase()}
|
|
10
10
|
</T>
|
|
11
11
|
</C>
|
|
@@ -21,7 +21,7 @@ import{useState as P}from"react";import{Alert as Oe,Image as _,Modal as De,Platf
|
|
|
21
21
|
|
|
22
22
|
|
|
23
23
|
<C style={o.headerRight}>
|
|
24
|
-
<R accessible={!0}accessibilityRole="button"accessibilityLabel={r("mediaGallery.copyUri","Copy URI")}onPress={
|
|
24
|
+
<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}}>
|
|
25
25
|
<L size={14}color={e.slate200}/>
|
|
26
26
|
</R>
|
|
27
27
|
|
|
@@ -29,8 +29,8 @@ import{useState as P}from"react";import{Alert as Oe,Image as _,Modal as De,Platf
|
|
|
29
29
|
<Te size={14}color={e.sky400}/>
|
|
30
30
|
</R>
|
|
31
31
|
|
|
32
|
-
<R accessible={!0}accessibilityRole="button"accessibilityLabel={r("mediaGallery.delete")}onPress={
|
|
33
|
-
<
|
|
32
|
+
<R accessible={!0}accessibilityRole="button"accessibilityLabel={r("mediaGallery.delete")}onPress={$e}style={o.headerDeleteBtn}hitSlop={{top:10,bottom:10,left:10,right:10}}>
|
|
33
|
+
<Ue size={14}color={e.red500}/>
|
|
34
34
|
</R>
|
|
35
35
|
|
|
36
36
|
<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}}>
|
|
@@ -44,7 +44,7 @@ import{useState as P}from"react";import{Alert as Oe,Image as _,Modal as De,Platf
|
|
|
44
44
|
</C>
|
|
45
45
|
|
|
46
46
|
|
|
47
|
-
<C style={[o.stage,z&&o.stageExpanded,!Z&&{paddingBottom:
|
|
47
|
+
<C style={[o.stage,z&&o.stageExpanded,!Z&&{paddingBottom:V.OS==="ios"?34:16}]}>
|
|
48
48
|
<I activeOpacity={A?.9:1}onPress={A?X:void 0}style={[o.previewCard,z&&o.previewCardExpanded]}>
|
|
49
49
|
{A?t.thumbnailUri&&!Ie?<>
|
|
50
50
|
<_ source={{uri:t.thumbnailUri}}style={o.image}resizeMode="contain"onError={()=>q(!0)}/>
|
|
@@ -78,15 +78,15 @@ import{useState as P}from"react";import{Alert as Oe,Image as _,Modal as De,Platf
|
|
|
78
78
|
</C>}
|
|
79
79
|
|
|
80
80
|
|
|
81
|
-
{
|
|
81
|
+
{F&&<C style={o.videoBadgeOverlay}>
|
|
82
82
|
<C style={[o.playPill,{backgroundColor:`${e.warningAmber}CC`}]}>
|
|
83
|
-
<
|
|
83
|
+
<H size={12}color={e.white}/>
|
|
84
84
|
<T style={o.playPillText}>ANIMATED GIF</T>
|
|
85
85
|
</C>
|
|
86
86
|
</C>}
|
|
87
87
|
|
|
88
88
|
|
|
89
|
-
<I activeOpacity={.8}onPress={
|
|
89
|
+
<I activeOpacity={.8}onPress={O}style={o.floatingMetaBadge}>
|
|
90
90
|
<L size={11}color={e.sky400}/>
|
|
91
91
|
<T style={o.floatingMetaText}>
|
|
92
92
|
{t.width&&t.height?`${t.width} \xD7 ${t.height} \u2022 `:""}
|
|
@@ -131,7 +131,7 @@ import{useState as P}from"react";import{Alert as Oe,Image as _,Modal as De,Platf
|
|
|
131
131
|
|
|
132
132
|
|
|
133
133
|
<I onPress={()=>Be(!$)}style={[o.loopPill,$&&o.loopPillActive]}>
|
|
134
|
-
<
|
|
134
|
+
<He size={12}color={$?e.sky400:e.whiteAlpha60}/>
|
|
135
135
|
<T style={[o.loopText,$&&o.loopTextActive]}>
|
|
136
136
|
{$?"Loop: ON":"Loop: OFF"}
|
|
137
137
|
</T>
|
|
@@ -141,17 +141,17 @@ import{useState as P}from"react";import{Alert as Oe,Image as _,Modal as De,Platf
|
|
|
141
141
|
|
|
142
142
|
|
|
143
143
|
{Z&&<C style={o.footer}>
|
|
144
|
-
<R onPress={
|
|
144
|
+
<R onPress={O}style={[o.actionBtn,{backgroundColor:e.whiteAlpha08,borderColor:e.whiteAlpha15}]}>
|
|
145
145
|
<L size={14}color={e.slate200}/>
|
|
146
146
|
<T style={[o.actionText,{color:e.slate200}]}>
|
|
147
147
|
{r("mediaGallery.copyUri","Copy URI")}
|
|
148
148
|
</T>
|
|
149
149
|
</R>
|
|
150
150
|
|
|
151
|
-
{M&&A&&<R onPress={
|
|
152
|
-
<
|
|
151
|
+
{M&&A&&<R onPress={Fe}disabled={U}style={[o.actionBtn,{backgroundColor:`${e.warningAmber}22`,borderColor:`${e.warningAmber}70`}]}>
|
|
152
|
+
<H size={15}color={e.warningAmber}/>
|
|
153
153
|
<T style={[o.actionText,{color:e.warningAmber}]}>
|
|
154
|
-
{r(
|
|
154
|
+
{r(U?"mediaGallery.converting":"mediaGallery.convertToGif")}
|
|
155
155
|
</T>
|
|
156
156
|
</R>}
|
|
157
157
|
|
|
@@ -163,4 +163,4 @@ import{useState as P}from"react";import{Alert as Oe,Image as _,Modal as De,Platf
|
|
|
163
163
|
</R>
|
|
164
164
|
</C>}
|
|
165
165
|
</C>
|
|
166
|
-
</De>};const o=oe.create({overlay:{flex:1,backgroundColor:"#090D16FA",justifyContent:"space-between"},header:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:16,paddingTop:
|
|
166
|
+
</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}});
|
|
@@ -49,7 +49,7 @@ import{useEffect as J,useRef as O,useState as Q}from"react";import{Animated as r
|
|
|
49
49
|
<M accessible={!0}accessibilityRole="button"accessibilityLabel="Star on GitHub"onPress={W}style={t.primaryButton}>
|
|
50
50
|
<S style={t.primaryButtonContent}>
|
|
51
51
|
<N size={16}color={e.white}/>
|
|
52
|
-
<C style={t.primaryButtonText}
|
|
52
|
+
<C style={t.primaryButtonText}>Star on GitHub & npm</C>
|
|
53
53
|
</S>
|
|
54
54
|
</M>
|
|
55
55
|
|