feat(social): add listening activity, shared rooms and modern chat

apps/mobile/src/app/(tabs)/_layout.tsx

@@ -8,7 +8,8 @@ import { player } from '../../player/controller';
 import { usePlayerState } from '../../player/hooks';
 import { useColors } from '../../theme';
 import { Cover, Icon, type IconName } from '../../ui/kit';
-import { useSocialUnread } from '../../features/social/Social';
+import { NativeChatProvider, useSocialUnread } from '../../features/social/Social';
+import { ListeningBanner } from '../../features/social/Listening';
 import { UpdateDialog } from '../../ui/UpdateDialog';
 
 const ICONS: Record<string, IconName> = { index: 'home', search: 'search', collection: 'library-music', friends: 'people-outline', profile: 'person' };
@@ -26,12 +27,13 @@ export default function TabsLayout() {
   };
   const net = useNetInfo();
   return (
-    <>
+    <NativeChatProvider>
       {net.isConnected === false && <OfflineBanner text={t('mobile.offline')} />}
       <Tabs
         screenOptions={{ headerShown: false, sceneStyle: { backgroundColor: colors.bg } }}
         tabBar={({ state, navigation }) => (
           <View>
+            <ListeningBanner />
             <MiniPlayer />
             <TabBar
               routes={state.routes.map((r) => r.name)}
@@ -50,7 +52,7 @@ export default function TabsLayout() {
         <Tabs.Screen name="profile" />
       </Tabs>
       <UpdateDialog />
-    </>
+    </NativeChatProvider>
   );
 }
 

apps/mobile/src/app/player.tsx

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Pressable, Text, View, type LayoutChangeEvent } from 'react-native';
 import { MusicShareSheet } from '../features/social/Social';
+import { ListeningBanner } from '../features/social/Listening';
 import { trackShareUrl } from '@pipu/core';
 
 import { useSessionCtx, useUser } from '../lib/session';
@@ -22,6 +23,7 @@ export default function PlayerScreen() {
   const { t } = useTranslation();
   const router = useRouter();
   const st = usePlayerState();
+  const locked = st.listening?.locked === true;
   const prefs = useUser().ui_prefs;
   const { server } = useSessionCtx();
   const [sharing, setSharing] = useState(false);
@@ -45,6 +47,7 @@ export default function PlayerScreen() {
   return (
     <Screen>
       {sharing && server && <MusicShareSheet attachment={{ kind: 'track', id: track.id, title: track.title }} url={trackShareUrl(server, track.id)} close={() => setSharing(false)} />}
+      <ListeningBanner />
       <View style={{ flex: 1, padding: 24, gap: 24, justifyContent: 'space-between' }}>
         <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
           <Pressable onPress={() => router.back()} hitSlop={10} accessibilityRole="button" accessibilityLabel={t('mobile.close_player')}>
@@ -94,7 +97,7 @@ export default function PlayerScreen() {
         <View style={{ gap: 6 }}>
           <Pressable
             onLayout={(e: LayoutChangeEvent) => setBarWidth(e.nativeEvent.layout.width || 1)}
-            onPress={(e) => player.seek((e.nativeEvent.locationX / barWidth) * duration)}
+            disabled={locked} onPress={(e) => player.seek((e.nativeEvent.locationX / barWidth) * duration)}
             accessibilityRole="adjustable"
             accessibilityLabel={t('player.progress')}
             accessibilityValue={{ min: 0, max: Math.round(duration / 1000), now: Math.round(st.positionMs / 1000) }}
@@ -116,18 +119,18 @@ export default function PlayerScreen() {
           <Pressable onPress={() => react('dislike')} hitSlop={10} accessibilityRole="button" accessibilityLabel={t(track.reaction === 'dislike' ? 'player.undislike' : 'player.dislike')}>
             <Icon name="heart-broken" size={28} color={track.reaction === 'dislike' ? colors.danger : colors.text2} />
           </Pressable>
-          <Pressable onPress={() => void player.prev()} hitSlop={10} accessibilityRole="button" accessibilityLabel={t('player.prev')}>
+          <Pressable disabled={locked} onPress={() => void player.prev()} hitSlop={10} accessibilityRole="button" accessibilityLabel={t('player.prev')}>
             <Icon name="skip-previous" size={40} color={colors.text} />
           </Pressable>
           <Pressable
-            onPress={() => player.toggle()}
+            disabled={locked} onPress={() => player.toggle()}
             accessibilityRole="button"
             accessibilityLabel={t(st.playing ? 'player.pause' : 'player.play')}
             style={{ width: 72, height: 72, borderRadius: 36, backgroundColor: colors.text, alignItems: 'center', justifyContent: 'center' }}
           >
             <Icon name={st.playing ? 'pause' : 'play-arrow'} size={40} color={colors.bg} />
           </Pressable>
-          <Pressable onPress={() => player.next()} hitSlop={10} accessibilityRole="button" accessibilityLabel={t('player.next')}>
+          <Pressable disabled={locked} onPress={() => player.next()} hitSlop={10} accessibilityRole="button" accessibilityLabel={t('player.next')}>
             <Icon name="skip-next" size={40} color={colors.text} />
           </Pressable>
           <Pressable onPress={() => react('like')} hitSlop={10} accessibilityRole="button" accessibilityLabel={t(track.reaction === 'like' ? 'player.unlike' : 'player.like')}>