Refactor player UI: Move episodes/streams to right, other controls to left, and timestamp above timeline. Also fix PostHogProvider type error.

src/components/player/controls/PlayerControls.tsx

@@ -297,6 +297,14 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
     >
       {/* Progress slider with native iOS slider */}
       <View style={styles.sliderContainer}>
+        <View style={[styles.timeDisplay, { paddingHorizontal: 14 }]}>
+          <View style={styles.timeContainer}>
+            <Text style={styles.duration}>{formatTime(previewTime)}</Text>
+          </View>
+          <View style={styles.timeContainer}>
+            <Text style={styles.duration}>{formatTime(duration)}</Text>
+          </View>
+        </View>
         <Slider
           style={{
             width: '100%',
@@ -326,14 +334,6 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
           thumbTintColor={Platform.OS === 'android' ? currentTheme.colors.white : undefined}
           tapToSeek={Platform.OS === 'ios'}
         />
-        <View style={[styles.timeDisplay, { paddingHorizontal: 14 }]}>
-          <View style={styles.timeContainer}>
-            <Text style={styles.duration}>{formatTime(previewTime)}</Text>
-          </View>
-          <View style={styles.timeContainer}>
-            <Text style={styles.duration}>{formatTime(duration)}</Text>
-          </View>
-        </View>
       </View>
 
       {/* Controls Overlay */}
@@ -590,9 +590,11 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
           pointerEvents="box-none"
         >
           <View style={styles.bottomControls} pointerEvents="box-none">
-            {/* Center Buttons Container with rounded background - wraps all buttons */}
+            {/* Center Buttons Container with split layout */}
             <View style={styles.centerControlsContainer} pointerEvents="box-none">
-              {/* Left Side: Aspect Ratio Button */}
+              {/* Left Group */}
+              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                {/* Aspect Ratio Button */}
                 <TouchableOpacity style={styles.iconButton} onPress={cycleAspectRatio}>
                   <Ionicons name="expand-outline" size={24} color="white" />
                 </TouchableOpacity>
@@ -605,16 +607,6 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
                   <Ionicons name="text" size={24} color="white" />
                 </TouchableOpacity>
 
-              {/* Change Source Button */}
-              {setShowSourcesModal && (
-                <TouchableOpacity
-                  style={styles.iconButton}
-                  onPress={() => setShowSourcesModal(true)}
-                >
-                  <Ionicons name="cloud-outline" size={24} color="white" />
-                </TouchableOpacity>
-              )}
-
                 {/* Playback Speed Button */}
                 <TouchableOpacity style={styles.iconButton} onPress={() => setShowSpeedModal(true)}>
                   <Ionicons name="speedometer-outline" size={24} color="white" />
@@ -646,8 +638,21 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
                     />
                   </TouchableOpacity>
                 )}
+              </View>
 
-              {/* Right Side: Episodes Button */}
+              {/* Right Group */}
+              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                {/* Change Source Button */}
+                {setShowSourcesModal && (
+                  <TouchableOpacity
+                    style={styles.iconButton}
+                    onPress={() => setShowSourcesModal(true)}
+                  >
+                    <Ionicons name="cloud-outline" size={24} color="white" />
+                  </TouchableOpacity>
+                )}
+
+                {/* Episodes Button */}
                 {setShowEpisodesModal && (
                   <TouchableOpacity
                     style={styles.iconButton}
@@ -658,7 +663,9 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
                 )}
               </View>
             </View>
+          </View>
         </LinearGradient>
+
       </View>
     </Animated.View>
   );

src/components/player/utils/playerStyles.ts

@@ -352,8 +352,8 @@ export const styles = StyleSheet.create({
     justifyContent: 'space-between',
     width: '100%',
     paddingHorizontal: 4,
-    marginTop: 4,
+    marginTop: 0,
-    marginBottom: 8,
+    marginBottom: 2,
   },
   duration: {
     color: 'white',
@@ -399,16 +399,15 @@ export const styles = StyleSheet.create({
   centerControlsContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'center',
+    justifyContent: 'space-between',
-    gap: 2,
+    paddingHorizontal: 6,
-    paddingHorizontal: 4,
     paddingVertical: 2,
     marginTop: 12,
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
     borderRadius: 24,
     borderWidth: 1,
     borderColor: 'rgba(255, 255, 255, 0.2)',
-    alignSelf: 'center',
+    width: '100%',
     zIndex: 1002,
   },
   modalOverlay: {

src/navigation/AppNavigator.tsx

@@ -1924,7 +1924,6 @@ const ConditionalPostHogProvider: React.FC<{ children: React.ReactNode }> = ({ c
       apiKey="phc_sk6THCtV3thEAn6cTaA9kL2cHuKDBnlYiSL40ywdS6C"
       options={{
         host: "https://us.i.posthog.com",
-        autocapture: analyticsEnabled,
         // Start opted out if analytics is disabled
         defaultOptIn: analyticsEnabled,
       }}