complated

screens/profile/ui/ManualTab.tsx

@@ -1,24 +1,22 @@
 import { useTheme } from '@/components/ThemeContext';
 import { router } from 'expo-router';
 import { VideoView, useVideoPlayer } from 'expo-video';
-import { ArrowLeft, Check, ChevronDown, X } from 'lucide-react-native';
-import React, { useMemo, useState } from 'react';
+import { ArrowLeft, Play, X } from 'lucide-react-native';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
-  Dimensions,
   FlatList,
   Image,
   Pressable,
   ScrollView,
   StyleSheet,
   Text,
+  TouchableOpacity,
   View,
 } from 'react-native';
 import ImageViewer from 'react-native-image-zoom-viewer';
 import Modal from 'react-native-modal';
 
-const { width } = Dimensions.get('window');
-
 type ManualStep = {
   image: any;
   description?: string;
@@ -39,6 +37,7 @@ const languages: Language[] = [
 export function ManualTab() {
   const { isDark } = useTheme();
   const { t, i18n } = useTranslation();
+  const [isPlaying, setIsPlaying] = useState(false);
 
   /** 🔹 Modal states */
   const [imageVisible, setImageVisible] = useState(false);
@@ -69,9 +68,9 @@ export function ManualTab() {
 
   /** 🔹 Video manbalari (SELECT ga bog‘liq) */
   const videos = {
-    uz: require('@/assets/manual/manual_video_uz.mp4'),
-    ru: require('@/assets/manual/manual_video_ru.mp4'),
-    en: require('@/assets/manual/manual_video_en.mp4'),
+    uz: require('@/assets/manual/manual_video_uz.webm'),
+    ru: require('@/assets/manual/manual_video_ru.webm'),
+    en: require('@/assets/manual/manual_video_en.webm'),
   };
 
   const player = useVideoPlayer(videos[selectedLang], (player) => {
@@ -161,6 +160,17 @@ export function ManualTab() {
 
   const selectedLanguage = languages.find((l) => l.code === selectedLang);
 
+  useEffect(() => {
+    // listener qo'shish
+    const subscription = player.addListener('playingChange', (state) => {
+      setIsPlaying(state.isPlaying);
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, [player]);
+
   const renderStep = ({ item, index }: { item: ManualStep; index: number }) => (
     <Pressable
       onPress={() => {
@@ -186,18 +196,17 @@ export function ManualTab() {
             {t("Foydalanish qo'llanmasi")}
           </Text>
         </View>
-
-        <Text style={[styles.subtitle, { color: theme.textMuted }]}>
-          {t("Quyidagi qisqa video yoki rasmlarni ko'rib chiqing")}
-        </Text>
       </View>
 
       {/* VIDEO */}
       <View style={styles.section}>
         <Text style={[styles.sectionTitle, { color: theme.text }]}>
-          {t("Foydalanish video qo'llanma")}
+          {t("Foydalanish qo'llanmasi")}
         </Text>
-        <View style={{ alignContent: 'flex-end', alignItems: 'flex-end', paddingHorizontal: 16 }}>
+        <Text style={[styles.subtitle, { color: theme.textMuted }]}>
+          {t("Quyidagi qisqa video yoki rasmlarni ko'rib chiqing")}
+        </Text>
+        {/* <View style={{ alignContent: 'flex-end', alignItems: 'flex-end', paddingHorizontal: 16 }}>
           <Pressable
             style={[
               styles.langSelector,
@@ -210,7 +219,7 @@ export function ManualTab() {
             </View>
             <ChevronDown color={theme.textMuted} />
           </Pressable>
-        </View>
+        </View> */}
 
         <View style={[styles.videoCard, { backgroundColor: theme.cardBg }]}>
           <VideoView
@@ -218,16 +227,49 @@ export function ManualTab() {
             style={styles.video}
             allowsFullscreen
             allowsPictureInPicture
+            nativeControls={true}
             contentFit="cover"
           />
+
+          {!isPlaying && (
+            <View
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              <TouchableOpacity
+                style={{
+                  backgroundColor: 'white',
+                  borderRadius: 50,
+                  width: 40,
+                  height: 40,
+                  justifyContent: 'center',
+                  alignContent: 'center',
+                  alignItems: 'center',
+                }}
+                onPress={() => {
+                  player.play();
+                  setIsPlaying(true);
+                }}
+              >
+                <Play color={'white'} size={26} fill={'black'} />
+              </TouchableOpacity>
+            </View>
+          )}
         </View>
       </View>
 
       {/* RASMLAR */}
       <View style={styles.section}>
-        <Text style={[styles.sectionTitle, { color: theme.text }]}>
+        {/* <Text style={[styles.sectionTitle, { color: theme.text }]}>
           {t('Foydalanish rasm qo‘llanma')}
-        </Text>
+        </Text> */}
 
         <FlatList
           horizontal
@@ -254,7 +296,7 @@ export function ManualTab() {
       </Modal>
 
       {/* LANGUAGE MODAL */}
-      <Modal isVisible={langPickerVisible} onBackdropPress={() => setLangPickerVisible(false)}>
+      {/* <Modal isVisible={langPickerVisible} onBackdropPress={() => setLangPickerVisible(false)}>
         <View style={[styles.langModalContent, { backgroundColor: theme.cardBg }]}>
           <Text style={{ color: 'white', marginBottom: 10, fontSize: 18 }}>
             {t('Video tilini tanlang')}
@@ -299,7 +341,7 @@ export function ManualTab() {
             );
           })}
         </View>
-      </Modal>
+      </Modal> */}
     </ScrollView>
   );
 }
@@ -308,8 +350,8 @@ const styles = StyleSheet.create({
   container: { flex: 1 },
   hero: { padding: 20 },
   topHeader: { flexDirection: 'row', alignItems: 'center', gap: 12 },
-  headerTitle: { fontSize: 22, fontWeight: '700' },
-  subtitle: { marginTop: 8 },
+  headerTitle: { fontSize: 22, fontWeight: '700', marginHorizontal: 16 },
+  subtitle: { fontSize: 16, marginTop: 5, fontWeight: '500', marginHorizontal: 16 },
 
   section: { marginBottom: 28 },
   sectionTitle: { fontSize: 20, fontWeight: '700', marginLeft: 16 },
@@ -329,6 +371,7 @@ const styles = StyleSheet.create({
 
   videoCard: {
     marginHorizontal: 16,
+    marginTop: 10,
     borderRadius: 20,
     overflow: 'hidden',
     position: 'relative',