Add video features : mute/unmute, mute on app starts, timeline with control and elapsed time, and fixes feeds swiping

src/app/(tabs)/index.tsx

@@ -8,6 +8,7 @@ import {
     fetchForYouFeed,
     fetchLocalFeed,
     getConfiguration,
+    getPreferences,
     recordImpression,
     videoBookmark,
     videoLike,
@@ -48,6 +49,7 @@ export default function LoopsFeed({ navigation }) {
     const insets = useSafeAreaInsets();
     const hideForYouFeed = useAuthStore((state) => state.hideForYouFeed);
     const defaultFeed = useAuthStore((state) => state.defaultFeed);
+    const setIsMuted = useAuthStore((state) => state.setIsMuted);
     const [activeTab, setActiveTab] = useState(defaultFeed);
     const [currentIndex, setCurrentIndex] = useState(0);
     const [selectedVideo, setSelectedVideo] = useState(null);
@@ -60,6 +62,7 @@ export default function LoopsFeed({ navigation }) {
     const router = useRouter();
     const currentVideoRef = useRef(null);
     const watchStartTimeRef = useRef(null);
+    const [timelineIsControlled, setTimelineIsControlled] = useState<boolean>(false);
 
     const viewabilityConfig = useRef({
         itemVisiblePercentThreshold: 50,
@@ -79,8 +82,15 @@ export default function LoopsFeed({ navigation }) {
         queryFn: getConfiguration,
     });
 
+    const { data: appPreferences, isLoading: isPreferencesLoading } = useQuery({
+        queryKey: ['appPreferences'],
+        queryFn: getPreferences,
+    });
+
     const forYouEnabled = appConfig?.fyf === true && !hideForYouFeed;
 
+    const muteOnOpen = appPreferences?.settings?.mute_on_open === true;
+
     useEffect(() => {
         if (!isConfigLoading && appConfig) {
             if (!forYouEnabled && activeTab === 'forYou') {
@@ -89,6 +99,12 @@ export default function LoopsFeed({ navigation }) {
         }
     }, [isConfigLoading, appConfig, forYouEnabled, activeTab]);
 
+    useEffect(() => {
+        if (appPreferences && !isPreferencesLoading) {
+            setIsMuted(muteOnOpen);
+        }
+    }, [appPreferences, isPreferencesLoading]);
+
     const recordVideoImpression = useCallback(
         async (video, duration) => {
             if (activeTab !== 'forYou' || !video) {
@@ -270,6 +286,7 @@ export default function LoopsFeed({ navigation }) {
                     navigation={navigation}
                     onNavigate={handleNavigate}
                     tabBarHeight={TAB_BAR_HEIGHT}
+                    onTimelineControlledChanged={setTimelineIsControlled}
                 />
             );
         },
@@ -392,8 +409,10 @@ export default function LoopsFeed({ navigation }) {
                 ref={flatListRef}
                 data={videosWithEnd}
                 renderItem={renderItem}
+                disableIntervalMomentum
                 keyExtractor={(item, index) => `${item.id}-${index}`}
                 pagingEnabled
+                scrollEnabled={!timelineIsControlled}
                 showsVerticalScrollIndicator={false}
                 snapToInterval={SCREEN_HEIGHT}
                 snapToAlignment="start"

src/app/private/profile/feed/[id].tsx

@@ -37,6 +37,7 @@ export default function ProfileFeed({navigation}) {
     const [screenFocused, setScreenFocused] = useState(true);
     const flatListRef = useRef(null);
     const router = useRouter();
+    const [timelineIsControlled, setTimelineIsControlled] = useState<boolean>(false);
 
     const viewabilityConfig = useRef({
         itemVisiblePercentThreshold: 50,
@@ -170,6 +171,7 @@ export default function ProfileFeed({navigation}) {
             videoPlaybackRates={videoPlaybackRates}
             navigation={navigation}
             onNavigate={handleNavigate}
+            onTimelineControlledChanged={setTimelineIsControlled}
             tabBarHeight={0}
         />
     ), [currentIndex, insets.bottom, showComments, showShare, showOther, selectedVideo, screenFocused, videoPlaybackRates, navigation]);
@@ -216,9 +218,11 @@ export default function ProfileFeed({navigation}) {
             <FlatList
                 ref={flatListRef}
                 data={videos}
+                disableIntervalMomentum
                 renderItem={renderItem}
                 keyExtractor={(item, index) => `${item.id}-${index}`}
                 pagingEnabled
+                scrollEnabled={!timelineIsControlled}
                 showsVerticalScrollIndicator={false}
                 snapToInterval={SCREEN_HEIGHT}
                 snapToAlignment="start"

src/app/private/settings/content/videos.tsx

@@ -0,0 +1,35 @@
+import { SettingsToggleItemDescription } from '@/components/settings/Stack';
+import { useTheme } from '@/contexts/ThemeContext';
+import { useAuthStore } from '@/utils/authStore';
+import { Stack } from 'expo-router';
+import { ScrollView, View } from 'react-native';
+import tw from 'twrnc';
+
+export default function VideosSettingsScreen() {
+    const { muteOnOpen, setMuteOnOpen } = useAuthStore();
+    const { colorScheme } = useTheme();
+
+    return (
+        <View style={tw`flex-1 bg-gray-100 dark:bg-black`}>
+            <Stack.Screen
+                options={{
+                    title: 'Videos',
+                    headerStyle: tw`bg-white dark:bg-black`,
+                    headerTintColor: colorScheme === 'dark' ? '#fff' : '#000',
+                    headerBackTitle: 'Settings',
+                    headerShown: true,
+                }}
+            />
+
+            <ScrollView style={tw`flex-1`}>
+                <SettingsToggleItemDescription
+                    icon="volume-mute-outline"
+                    label="Mute on open"
+                    description="Mute the videos when the application starts"
+                    value={muteOnOpen}
+                    onValueChange={setMuteOnOpen}
+                />
+            </ScrollView>
+        </View>
+    );
+}

src/app/private/settings/index.tsx

@@ -123,6 +123,12 @@ export default function SettingsScreen() {
                     onPress={() => router.push('/private/settings/content/feeds')}
                 />
                 <Divider />
+                <SettingsItem
+                    icon="play-outline"
+                    label="Videos"
+                    onPress={() => router.push('/private/settings/content/videos')}
+                />
+                <Divider />
                 {/* <SettingsItem icon="play-circle-outline" label="Playback" onPress={() => router.push('/private/settings/content/playback')} />
                 <Divider /> */}
                 {/* <Divider /> */}