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')}>

apps/mobile/src/features/social/ChatConversation.tsx

@@ -0,0 +1,61 @@
+import { CHAT_REACTIONS, type ChatMessageUpdate, type DirectMessage, type SocialPerson, type socialApi } from '@pipu/core';
+import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useRouter } from 'expo-router';
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AccessibilityInfo, Animated, KeyboardAvoidingView, Modal, Pressable, ScrollView, Text, View } from 'react-native';
+import { eventId } from '../../player/eventId';
+import { useColors } from '../../theme';
+import { Button, ErrorBox, Field, H1, Muted, Screen, useErrorText } from '../../ui/kit';
+import { readDraft, saveDraft } from './drafts';
+
+function Bubble({ children, mine, animate }: { children: ReactNode; mine: boolean; animate: boolean }) {
+  const colors = useColors(); const opacity = useRef(new Animated.Value(1)).current;
+  useEffect(() => { if (!animate) return; opacity.setValue(0); const animation = Animated.timing(opacity,{toValue:1,duration:180,useNativeDriver:true});animation.start();return()=>animation.stop(); },[animate,opacity]);
+  return <Animated.View style={{ alignSelf: mine ? 'flex-end' : 'flex-start', maxWidth: '90%', padding: 14, borderRadius: 16, backgroundColor: mine ? colors['accent-soft'] : colors.surface2, gap: 8, opacity, transform:[{translateY:opacity.interpolate({inputRange:[0,1],outputRange:[6,0]})}] }}>{children}</Animated.View>;
+}
+export function ChatConversation({ person, api, queryKey, userId, server, active }: { person: SocialPerson; api: ReturnType<typeof socialApi>; queryKey: readonly unknown[]; userId: string; server: string; active: boolean }) {
+  const colors=useColors();const {t,i18n}=useTranslation();const router=useRouter();const cache=useQueryClient();const errorText=useErrorText();
+  const [text,setText]=useState('');const [ready,setReady]=useState(false);const touched=useRef(false);const [search,setSearch]=useState('');const [q,setQ]=useState('');
+  const [reply,setReply]=useState<DirectMessage|null>(null);const [editing,setEditing]=useState<DirectMessage|null>(null);const [menu,setMenu]=useState<DirectMessage|null>(null);const [emojis,setEmojis]=useState(false);const [reduced,setReduced]=useState(true);
+  const beforeEdit=useRef('');const pending=useRef<{id:string;text:string;reply_to?:string}|null>(null);
+  useEffect(()=>{let live=true;void readDraft(server,userId,person.id).then(value=>{if(live){if(!touched.current)setText(value);setReady(true);}});return()=>{live=false;};},[server,userId,person.id]);
+  useEffect(()=>{if(!ready||editing)return;const timer=setTimeout(()=>{void saveDraft(server,userId,person.id,text).catch(()=>undefined);},300);return()=>clearTimeout(timer);},[text,ready,editing,server,userId,person.id]);
+  useEffect(()=>{void AccessibilityInfo.isReduceMotionEnabled().then(setReduced);const sub=AccessibilityInfo.addEventListener('reduceMotionChanged',setReduced);return()=>sub.remove();},[]);
+  useEffect(()=>{const timer=setTimeout(()=>setQ(search.trim()),250);return()=>clearTimeout(timer);},[search]);
+  useEffect(()=>{const timer=setTimeout(()=>{void api.typing(person.id,active&&touched.current&&!!text.trim()&&!editing).catch(()=>undefined);},400);return()=>clearTimeout(timer);},[text,active,editing,api,person.id]);
+  useEffect(()=>()=>{void api.typing(person.id,false).catch(()=>undefined);},[api,person.id]);
+  const meta=useQuery({queryKey:[...queryKey,'typing',person.id],queryFn:()=>api.chatMeta(person.id),enabled:active,refetchInterval:active?2000:false});
+  const messages=useInfiniteQuery({queryKey:[...queryKey,'chat',person.id,q],initialPageParam:undefined as number|undefined,queryFn:({pageParam})=>api.messages(person.id,pageParam,q),getNextPageParam:last=>last.length===50?last[0]?.seq:undefined,enabled:active,refetchInterval:active?3000:false});
+  const list=[...(messages.data?.pages??[])].reverse().flat();const last=list.at(-1)?.seq;const unread=list.some(m=>m.sender_id!==userId&&!m.read);
+  useEffect(()=>{if(last&&unread&&active&&!q)void api.action({action:'read_chat',target_id:person.id,up_to_seq:last}).then(()=>cache.invalidateQueries({queryKey})).catch(()=>undefined);},[last,unread,active,q,api,person.id,messages.dataUpdatedAt]);
+  const refresh=()=>cache.invalidateQueries({queryKey});
+  const update=useMutation({mutationFn:(input:{id:string;body:ChatMessageUpdate})=>api.updateMessage(person.id,input.id,input.body),onSuccess:refresh});
+  const send=useMutation({mutationFn:async()=>{if(editing){await api.updateMessage(person.id,editing.id,{action:'edit',text});return;}if(!pending.current||pending.current.text!==text||pending.current.reply_to!==reply?.id)pending.current={id:eventId(Date.now()),text,...(reply?{reply_to:reply.id}:{})};await api.send(person.id,{...pending.current,attachment_kind:'none'});},onSuccess:async()=>{setText(editing?beforeEdit.current:'');setEditing(null);setReply(null);pending.current=null;await refresh();}});
+  const scroll=useRef<ScrollView>(null);const [bottom,setBottom]=useState(true);useEffect(()=>setBottom(true),[last]);
+  const cancelEdit=()=>{setText(beforeEdit.current);setEditing(null);};
+  const mutate=(m:DirectMessage,body:ChatMessageUpdate)=>{if(!update.isPending)update.mutate({id:m.id,body});setMenu(null);};
+  return <KeyboardAvoidingView behavior="padding" style={{flex:1}}>
+    <View style={{padding:12,gap:8}}><H1>{person.display_name}</H1><Field label={t('social.chat_search')} value={search} onChangeText={setSearch} maxLength={100}/><ErrorBox>{messages.error||send.error||update.error?errorText(messages.error??send.error??update.error):null}</ErrorBox></View>
+    <ScrollView ref={scroll} keyboardShouldPersistTaps="handled" contentContainerStyle={{padding:14,gap:12}} onContentSizeChange={()=>{if(bottom&&!q)scroll.current?.scrollToEnd({animated:!reduced});}}>
+      {messages.hasNextPage&&<Button title={t('social.older')} variant="ghost" busy={messages.isFetchingNextPage} onPress={()=>{setBottom(false);void messages.fetchNextPage();}}/>}
+      {!list.length&&<Muted>{t(messages.isPending?'social.loading':q?'social.chat_no_results':'social.first_message')}</Muted>}
+      {list.map((m,i)=><View key={m.id} style={{gap:8}}>
+        {(i===0||new Date(list[i-1]!.created_at).toDateString()!==new Date(m.created_at).toDateString())&&<Text style={{color:colors.text3,fontSize:11,textAlign:'center'}}>{new Date(m.created_at).toLocaleDateString(i18n.language,{day:'numeric',month:'long'})}</Text>}
+        <Bubble mine={m.sender_id===userId} animate={!reduced}>
+          <Pressable disabled={m.deleted} onLongPress={()=>setMenu(m)} accessibilityLabel={t('social.message_actions')}>
+            {m.reply_to&&<View style={{borderLeftWidth:2,borderLeftColor:colors.accent,paddingLeft:8,marginBottom:8}}><Muted>{m.reply_preview||t('social.message_deleted')}</Muted></View>}
+            <Text selectable style={{color:m.deleted?colors.text3:colors.text,fontSize:15,fontStyle:m.deleted?'italic':'normal'}}>{m.deleted?t('social.message_deleted'):m.text}</Text>
+          </Pressable>
+          {!m.deleted&&m.attachment_id&&m.attachment_kind!=='none'&&<Button title={t(m.attachment_kind==='track'?'social.listen_track':'social.listen_playlist')} variant="secondary" onPress={()=>router.push({pathname:m.attachment_kind==='track'?'/social-track':'/social-playlist',params:{id:m.attachment_id}})}/>}
+          {!m.deleted&&!!m.reactions?.length&&<View style={{flexDirection:'row',gap:6,flexWrap:'wrap'}}>{m.reactions.map(r=><Pressable key={r.emoji} accessibilityRole="button" accessibilityState={{selected:r.mine}} onPress={()=>mutate(m,{action:'react',emoji:r.emoji as typeof CHAT_REACTIONS[number]})} style={{padding:6,borderRadius:12,backgroundColor:r.mine?colors['accent-soft']:colors.surface3}}><Text style={{color:colors.text}}>{r.emoji} {r.count}</Text></Pressable>)}</View>}
+          <View style={{flexDirection:'row',gap:8,alignItems:'center'}}><Text style={{color:colors.text3,fontSize:10,flex:1}}>{new Date(m.created_at).toLocaleTimeString(i18n.language,{hour:'2-digit',minute:'2-digit'})}{m.edited_at&&!m.deleted?` · ${t('social.edited')}`:''}{m.sender_id===userId?` · ${t(m.read?'social.read':'social.sent')}`:''}</Text>{!m.deleted&&<Pressable accessibilityRole="button" accessibilityLabel={t('social.message_actions')} hitSlop={10} onPress={()=>setMenu(m)}><Text style={{color:colors.text3}}>•••</Text></Pressable>}</View>
+        </Bubble>
+      </View>)}
+    </ScrollView>
+    <Text accessibilityLiveRegion="polite" style={{minHeight:18,paddingHorizontal:14,color:colors.text3,fontSize:11}}>{active&&meta.data?.typing?`${person.display_name} ${t('social.typing')}`:''}</Text>
+    {(reply||editing)&&<View style={{padding:10,backgroundColor:colors['accent-soft'],gap:4}}><Muted>{t(editing?'social.editing':'social.replying')}</Muted><Text numberOfLines={2} style={{color:colors.text2}}>{(editing??reply)?.text}</Text><Button title={t(editing?'social.cancel_edit':'social.cancel_reply')} variant="ghost" onPress={()=>editing?cancelEdit():setReply(null)}/></View>}
+    <View style={{padding:12,gap:8,borderTopWidth:1,borderTopColor:colors.line}}><Field label={t('social.message')} value={text} onChangeText={value=>{touched.current=true;setText(value);}} maxLength={4000} multiline editable={!send.isPending}/><View style={{flexDirection:'row',gap:8}}><Button title="☺" variant="ghost" onPress={()=>setEmojis(v=>!v)}/><View style={{flex:1}}><Button title={t(editing?'playlists.save':'social.send')} busy={send.isPending} disabled={!text.trim()} onPress={()=>send.mutate()}/></View></View>{emojis&&<View style={{flexDirection:'row',gap:8,flexWrap:'wrap'}}>{CHAT_REACTIONS.map(emoji=><Button key={emoji} title={emoji} variant="ghost" onPress={()=>{setText(v=>(v+emoji).slice(0,4000));setEmojis(false);}}/>)}</View>}</View>
+    <Modal transparent visible={!!menu} animationType={reduced?'none':'fade'} onRequestClose={()=>setMenu(null)}><View style={{flex:1,justifyContent:'flex-end',backgroundColor:colors.overlay}}><Screen style={{flex:0,maxHeight:'80%',borderTopLeftRadius:24,borderTopRightRadius:24}}><ScrollView contentContainerStyle={{padding:20,gap:10}}><Button title={t('form.close')} variant="ghost" onPress={()=>setMenu(null)}/>{menu&&<><Button title={t('social.reply')} variant="secondary" onPress={()=>{if(editing)cancelEdit();setReply(menu);setMenu(null);}}/><View style={{flexDirection:'row',gap:8,flexWrap:'wrap'}}>{CHAT_REACTIONS.map(emoji=><Button key={emoji} title={emoji} variant="ghost" onPress={()=>mutate(menu,{action:'react',emoji})}/>)}</View>{menu.sender_id===userId&&<><Button title={t('social.edit_message')} variant="secondary" onPress={()=>{beforeEdit.current=text;setEditing(menu);setText(menu.text);setReply(null);setMenu(null);}}/><Button title={t('social.delete_message')} variant="danger" onPress={()=>mutate(menu,{action:'delete'})}/></>}</>}</ScrollView></Screen></View></Modal>
+  </KeyboardAvoidingView>;
+}

apps/mobile/src/features/social/Listening.tsx

@@ -0,0 +1,59 @@
+import { socialApi, type ListeningPreferences, type SocialPerson } from '@pipu/core';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Modal, ScrollView, Switch, Text, View } from 'react-native';
+import { useSession, useSessionCtx, useUser } from '../../lib/session';
+import { player } from '../../player/controller';
+import { eventId } from '../../player/eventId';
+import { usePlayerState } from '../../player/hooks';
+import { useColors } from '../../theme';
+import { Button, ErrorBox, H1, Muted, Screen, useErrorText } from '../../ui/kit';
+
+function useListening() {
+  const session = useSession(); const { server } = useSessionCtx(); const user = useUser();
+  const api = useMemo(() => socialApi(session), [session]); const key = ['m-listening', server, user.id] as const;
+  const query = useQuery({ queryKey: key, queryFn: api.listening, refetchInterval: 3000 });
+  return { api, key, query, user };
+}
+export function ListeningPanel() {
+  const { api, key, query, user } = useListening(); const { t } = useTranslation(); const cache = useQueryClient(); const errorText = useErrorText(); const colors = useColors();
+  const [expanded, setExpanded] = useState(false); const prefs = query.data?.preferences;
+  const save = useMutation({ mutationFn: (body: ListeningPreferences) => api.setListeningPreferences(body), onSuccess: async () => { await cache.invalidateQueries({ queryKey: key }); } });
+  const action = useMutation({ mutationFn: (a: { action: 'accept' | 'decline' | 'cancel'; target: string }) => api.listeningAction({ id: eventId(Date.now()), action: a.action, target_id: a.target }), onSuccess: async () => { await cache.invalidateQueries({ queryKey: key }); } });
+  return <View style={{ gap: 12 }}><Button title={t('social.together')} variant="secondary" onPress={() => setExpanded(v => !v)} />
+    {expanded && <View style={{ padding: 16, borderRadius: 16, gap: 14, backgroundColor: colors.surface }}><Muted>{t('social.stream_prefs_hint')}</Muted>
+      {(['requests', 'auto_accept'] as const).map(field => <View key={field} style={{ gap: 8 }}><Muted>{t(field === 'requests' ? 'social.stream_requests' : 'social.stream_auto')}</Muted><View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6 }}>{(['nobody', 'friends', 'everyone'] as const).map(v => <Button key={v} title={t(`social.visibility_${v}`)} disabled={!prefs || save.isPending} variant={(prefs?.[field] ?? 'nobody') === v ? 'primary' : 'ghost'} onPress={() => prefs && save.mutate({ ...prefs, [field]: v })} />)}</View></View>)}
+      <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}><Text style={{ color: colors.text, flex: 1 }}>{t('social.stream_autoplay')}</Text><Switch accessibilityLabel={t('social.stream_autoplay')} value={prefs?.autoplay ?? true} disabled={!prefs || save.isPending} onValueChange={autoplay => prefs && save.mutate({ ...prefs, autoplay })} /></View>
+    </View>}
+    {query.data?.requests.map(r => <View key={r.id} style={{ padding: 16, borderRadius: 16, gap: 10, backgroundColor: colors.surface }}><Text style={{ color: colors.text }}>{r.recipient_id === user.id ? t(r.kind === 'join' ? 'social.stream_incoming_join' : 'social.stream_incoming_invite', { name: r.sender_name }) : t('social.stream_pending')}</Text>{r.recipient_id === user.id ? <><Button title={t('social.accept')} disabled={action.isPending} onPress={() => action.mutate({ action: 'accept', target: r.id })} /><Button title={t('social.decline')} disabled={action.isPending} variant="ghost" onPress={() => action.mutate({ action: 'decline', target: r.id })} /></> : <Button title={t('form.cancel')} disabled={action.isPending} variant="ghost" onPress={() => action.mutate({ action: 'cancel', target: r.id })} />}</View>)}
+    <ErrorBox>{query.error || save.error || action.error ? errorText(query.error ?? save.error ?? action.error) : null}</ErrorBox>
+  </View>;
+}
+export function ListenTogetherButton({ person }: { person: SocialPerson }) {
+  const { t } = useTranslation(); const [open, setOpen] = useState(false);
+  return <><Button title={t('social.together')} variant="ghost" onPress={() => setOpen(true)} />{open && <TogetherSheet person={person} close={() => setOpen(false)} />}</>;
+}
+function TogetherSheet({ person, close }: { person: SocialPerson; close: () => void }) {
+  const { t } = useTranslation(); const { api, key } = useListening(); const cache = useQueryClient(); const state = usePlayerState(); const errorText = useErrorText();
+  const [kind, setKind] = useState<'join' | 'invite'>(person.activity ? 'join' : 'invite'); const [id] = useState(() => eventId(Date.now()));
+  const action = useMutation({ mutationFn: () => api.listeningAction({ id, action: kind, target_id: person.id }), onSuccess: async () => { await cache.invalidateQueries({ queryKey: key }); } });
+  return <Modal animationType="slide" onRequestClose={close}><Screen><ScrollView contentContainerStyle={{ padding: 20, gap: 16 }}><Button title={t('form.close')} variant="ghost" onPress={close} /><H1>{t('social.together')}</H1><Muted>{person.display_name}</Muted><Muted>{t('social.stream_choice')}</Muted>
+    <Button title={t('social.join_stream')} variant={kind === 'join' ? 'primary' : 'ghost'} disabled={!person.activity || action.isPending || action.isSuccess} onPress={() => setKind('join')} />
+    <Button title={t('social.invite_stream')} variant={kind === 'invite' ? 'primary' : 'ghost'} disabled={!state.track || state.listening?.locked || action.isPending || action.isSuccess} onPress={() => setKind('invite')} />
+    <Muted>{t('social.stream_hint')}</Muted><ErrorBox>{action.error ? errorText(action.error) : null}</ErrorBox>
+    {action.isSuccess ? <Muted>{t(kind === 'join' ? 'social.stream_request_sent' : 'social.stream_invite_sent')}</Muted> : <Button title={t('social.send')} busy={action.isPending} disabled={kind === 'join' ? !person.activity : !state.track || state.listening?.locked} onPress={() => action.mutate()} />}
+  </ScrollView></Screen></Modal>;
+}
+export function ListeningBanner() {
+  const state = usePlayerState(); const session = useSession(); const user = useUser(); const colors = useColors(); const { t } = useTranslation(); const errorText = useErrorText(); const room = state.listening?.room;
+  const action = useMutation({ mutationFn: async () => room && socialApi(session).listeningAction({ id: eventId(Date.now()), action: room.owner_id === user.id ? 'end' : 'leave', target_id: room.id }) });
+  if (!room) return null;
+  return <View style={{ padding: 12, gap: 6, backgroundColor: colors.surface, borderTopWidth: 1, borderTopColor: colors.ok }}><Text style={{ color: colors.text, fontWeight: '600' }}>{t(state.listening?.locked ? 'social.stream_following' : 'social.stream_host', { name: room.owner_name })}</Text>
+    <Muted>{t(state.listening?.disconnected ? 'social.stream_lost' : state.listening?.needsStart ? 'social.stream_waiting_audio' : 'social.stream_controls')}</Muted>
+    <Muted>{t('social.stream_listeners', { count: Math.max(0, room.participants.length - 1) })}</Muted>
+    {state.listening?.locked && !state.playing && !state.listening.disconnected && <Button title={t('social.stream_start_audio')} variant="secondary" onPress={() => player.beginListeningAudio()} />}
+    <Button title={t(room.owner_id === user.id ? 'social.stream_end' : 'social.stream_leave')} variant="ghost" busy={action.isPending} onPress={() => action.mutate()} />
+    <ErrorBox>{action.error ? errorText(action.error) : null}</ErrorBox>
+  </View>;
+}

apps/mobile/src/features/social/SharedMusic.tsx

@@ -9,7 +9,7 @@ import { player } from '../../player/controller';
 import { Button, ErrorBox, H1, Muted, Screen, TrackRow, useErrorText } from '../../ui/kit';
 
 export function SharedMusic({ kind }: { kind: 'track' | 'playlist' }) {
-  const { id } = useLocalSearchParams<{ id: string }>();
+  const { id, owner } = useLocalSearchParams<{ id: string; owner?: string }>();
   const session = useSession();
   const { server } = useSessionCtx();
   const user = useUser();
@@ -17,20 +17,22 @@ export function SharedMusic({ kind }: { kind: 'track' | 'playlist' }) {
   const { t } = useTranslation();
   const errorText = useErrorText();
   const [playError, setPlayError] = useState<unknown>();
-  const query = useQuery({ queryKey: ['shared-music', server, user.id, kind, id], queryFn: async () => {
+  const query = useQuery({ queryKey: ['shared-music', server, user.id, kind, id, owner], refetchInterval: owner ? 15_000 : false, queryFn: async () => {
+    if (owner) return unwrap(await session.client.GET('/api/v1/social/activity/{userId}/playlist', { params: { path: { userId: owner } } }));
     if (kind === 'track') {
       const track = unwrap(await session.client.GET('/api/v1/tracks/{id}', { params: { path: { id } } }));
-      return { name: track.title, tracks: [track] };
+      return { id: track.id, name: track.title, tracks: [track] };
     }
     return unwrap(await session.client.GET('/api/v1/shared/playlists/{shareId}', { params: { path: { shareId: id } } }));
   } });
-  return <Screen><FlatList data={query.data?.tracks ?? []} keyExtractor={x => x.id}
+  const visible = query.isError ? undefined : query.data;
+  return <Screen><FlatList data={visible?.tracks ?? []} keyExtractor={x => x.id}
     ListHeaderComponent={<View style={{ padding: 20, gap: 16 }}>
       <Button title={t('social.back')} variant="ghost" onPress={() => router.back()} />
-      <H1>{query.data?.name ?? t(kind === 'track' ? 'social.listen_track' : 'social.listen_playlist')}</H1>
+      <H1>{visible?.name ?? t(kind === 'track' ? 'social.listen_track' : 'social.listen_playlist')}</H1>
       {query.isPending && <Muted>{t('social.loading')}</Muted>}
       <ErrorBox>{query.error || playError ? errorText(query.error ?? playError) : null}</ErrorBox>
     </View>}
-    renderItem={({ item, index }) => <TrackRow track={item} onPress={() => void player.playList(query.data?.tracks ?? [], index, { type: 'collection', id, label: query.data?.name }).catch(setPlayError)} />}
+    renderItem={({ item, index }) => <TrackRow track={item} onPress={() => void player.playList(visible?.tracks ?? [], index, { type: kind === 'track' ? 'queue' : 'collection', id: visible?.id, label: visible?.name }).catch(setPlayError)} />}
   /></Screen>;
 }

apps/mobile/src/features/social/Social.tsx

@@ -1,9 +1,12 @@
-import { attachmentPath, socialApi, uuidv7, type MusicAttachment, type SocialAction, type SocialPerson } from '@pipu/core';
+import { attachmentPath, socialApi, type ActivityVisibility, type MusicAttachment, type SocialAction, type SocialPerson } from '@pipu/core';
+import { eventId } from '../../player/eventId';
+import { ListeningPanel, ListenTogetherButton } from './Listening';
+import { ChatConversation } from './ChatConversation';
 import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useFocusEffect, useRouter } from 'expo-router';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createContext, useContext, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
-import { AppState, Clipboard, KeyboardAvoidingView, Modal, ScrollView, Share, Text, View } from 'react-native';
+import { AppState, Clipboard, KeyboardAvoidingView, Modal, Pressable, ScrollView, Share, Text, View } from 'react-native';
 import { useSession, useSessionCtx, useUser } from '../../lib/session';
 import { useColors } from '../../theme';
 import { Button, ErrorBox, Field, H1, Muted, Screen, useErrorText } from '../../ui/kit';
@@ -20,6 +23,30 @@ function useSocial() {
   return { api, key, inbox, user, active };
 }
 export function useSocialUnread() { return useSocial().inbox.data?.unread ?? 0; }
+
+const ChatDockContext = createContext<(id: string) => boolean>(() => false);
+export function NativeChatProvider({ children }: { children: ReactNode }) {
+  const { inbox } = useSocial(); const colors = useColors(); const { t } = useTranslation();
+  const [open, setOpen] = useState(false); const [peer, setPeer] = useState<string | null>(null);
+  const friends = inbox.data?.people.filter(p => p.relationship === 'friend') ?? [];
+  const selected = friends.find(p => p.id === peer); const unread = friends.reduce((sum,p) => sum+p.unread,0);
+  return <ChatDockContext.Provider value={id => { setPeer(id); setOpen(true); return true; }}>{children}
+    <View style={{ position: 'absolute', bottom: 158, right: 16 }}><Button title={`${t('social.messages')}${unread ? ` · ${unread}` : ''}`} variant="secondary" onPress={() => setOpen(true)} /></View>
+    <Modal transparent visible={open} animationType="slide" onRequestClose={() => setOpen(false)}>
+      <View style={{ flex: 1, justifyContent: 'flex-end', backgroundColor: colors.overlay }}><View style={{ height: '82%', borderTopLeftRadius: 24, borderTopRightRadius: 24, overflow: 'hidden', backgroundColor: colors.bg }}>
+        <Screen><View style={{ padding: 12, flexDirection: 'row', justifyContent: 'space-between' }}><Button title={t('social.people')} variant="ghost" onPress={() => setPeer(null)} /><Button title={t('social.minimize')} variant="ghost" onPress={() => setOpen(false)} /></View>
+          {selected ? <Chat key={selected.id} person={selected} active={open} /> : <ScrollView contentContainerStyle={{ padding: 16, gap: 12 }}><H1>{t('social.messages')}</H1>{friends.map(p => <Button key={p.id} title={`${p.display_name}${p.unread ? ` · ${p.unread}` : ''}`} variant="secondary" onPress={() => setPeer(p.id)} />)}{!friends.length && <Muted>{t('social.no_friends_share')}</Muted>}</ScrollView>}
+        </Screen>
+      </View></View>
+    </Modal>
+  </ChatDockContext.Provider>;
+}
+
+export function FriendRecommendations() {
+  const { api, inbox, key } = useSocial(); const cache = useQueryClient(); const { t } = useTranslation(); const errorText = useErrorText();
+  const save = useMutation({ mutationFn: api.setFriendsRecommendations, onSuccess: async () => { await cache.invalidateQueries({ queryKey: key }); } });
+  return <View style={{ gap: 8 }}><Button title={t('social.friends_recommendations')} variant={(inbox.data?.friends_recommendations ?? true) ? 'primary' : 'secondary'} disabled={!inbox.data || save.isPending} onPress={() => save.mutate(!(inbox.data?.friends_recommendations ?? true))} /><Muted>{t('social.friends_recommendations_hint')}</Muted><ErrorBox>{save.error ? errorText(save.error) : null}</ErrorBox></View>;
+}
 export function MusicShareSheet({ attachment, url, close }: { attachment: MusicAttachment; url: string; close: () => void }) {
   const { t } = useTranslation();
   const { inbox, api, key } = useSocial();
@@ -31,7 +58,7 @@ export function MusicShareSheet({ attachment, url, close }: { attachment: MusicA
   const send = useMutation({ mutationFn: async (peer: string) => {
     if (peer === 'copy') { Clipboard.setString(url); setCopied(true); return; }
     if (peer === 'external') { await Share.share({ title: attachment.title, message: url }); return; }
-    let id = ids.current.get(peer); if (!id) { id = uuidv7(); ids.current.set(peer, id); }
+    let id = ids.current.get(peer); if (!id) { id = eventId(Date.now()); ids.current.set(peer, id); }
     await api.send(peer, { id, text: attachment.title, attachment_kind: attachment.kind, attachment_id: attachment.id });
     setSent(v => [...v, peer]); await cache.invalidateQueries({ queryKey: key });
   } });
@@ -49,6 +76,7 @@ export function MusicShareSheet({ attachment, url, close }: { attachment: MusicA
 }
 
 export function SocialScreen({ root = false }: { root?: boolean }) {
+  const dock = useContext(ChatDockContext);
   const { t } = useTranslation();
   const colors = useColors();
   const router = useRouter();
@@ -62,12 +90,20 @@ export function SocialScreen({ root = false }: { root?: boolean }) {
   useEffect(() => { const timer = setTimeout(() => setQ(search.trim()), 300); return () => clearTimeout(timer); }, [search]);
   const results = useQuery({ queryKey: [...key, 'search', q], queryFn: () => api.search(q), enabled: q.length >= 2 });
   const act = useMutation({ mutationFn: (body: SocialAction) => api.action(body), onSuccess: async () => { await cache.invalidateQueries({ queryKey: key }); } });
+  const visibility = useMutation({ mutationFn: (v: ActivityVisibility) => api.setVisibility(v), onSuccess: async () => { await cache.invalidateQueries({ queryKey: key }); } });
   const selected = inbox.data?.people.find(p => p.id === peer && p.relationship === 'friend');
   if (selected) return <Screen><Button title={t('social.back')} variant="ghost" onPress={() => setPeer('')} /><Chat key={selected.id} person={selected} /></Screen>;
   const people = q.length >= 2 ? results.data ?? [] : inbox.data?.people ?? [];
   return <Screen><ScrollView keyboardShouldPersistTaps="handled" contentContainerStyle={{ padding: 20, gap: 16 }}>
     {!root && <Button title={t('social.back')} variant="ghost" onPress={() => router.back()} />}
     <H1>{t('social.title')}</H1><Muted>{t('social.subtitle')}</Muted>
+    <View style={{ padding: 16, borderRadius: 16, backgroundColor: colors.surface, gap: 10 }}>
+      <Muted>{t('social.activity_visibility')}</Muted>
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6 }}>{(['nobody', 'friends', 'everyone'] as const).map(v => <Button key={v} title={t(`social.visibility_${v}`)} variant={(inbox.data?.activity_visibility ?? 'nobody') === v ? 'primary' : 'ghost'} disabled={!inbox.data || visibility.isPending} onPress={() => visibility.mutate(v)} />)}</View>
+      <Muted>{t('social.activity_privacy_hint')}</Muted>
+      <ErrorBox>{visibility.error ? errorText(visibility.error) : null}</ErrorBox>
+    </View>
+    <ListeningPanel />
     <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
       <Button title={t('social.people')} variant={notifications ? 'ghost' : 'primary'} onPress={() => setNotifications(false)} />
       <Button title={`${t('social.notifications')} ${inbox.data?.unread || ''}`} variant={notifications ? 'primary' : 'ghost'} onPress={() => setNotifications(true)} />
@@ -87,7 +123,15 @@ export function SocialScreen({ root = false }: { root?: boolean }) {
       {!people.length && inbox.data && !results.isFetching && <Muted>{t(q.length >= 2 ? 'social.no_results' : 'social.empty')}</Muted>}
       {people.map(p => <View key={p.id} style={{ padding: 16, borderRadius: 16, backgroundColor: colors.surface, gap: 10 }}>
         <Text style={{ color: colors.text, fontWeight: '600', fontSize: 17 }}>{p.display_name}</Text><Muted>@{p.username} · {t(`social.rel_${p.relationship}`)}</Muted>
-        {p.relationship === 'friend' && <Button title={`${t('social.chat')}${p.unread ? ` · ${p.unread}` : ''}`} onPress={() => setPeer(p.id)} />}
+        {p.activity && <View style={{ borderLeftWidth: 2, borderLeftColor: colors.ok, paddingLeft: 12, gap: 6 }}>
+          <Text style={{ color: colors.ok, fontSize: 12 }}>{t('social.listening')}</Text>
+          <Pressable accessibilityRole="link" onPress={() => router.push({ pathname: '/social-track', params: { id: p.activity!.track_id } })}><Text style={{ color: colors.accent2 }}>{p.activity.track_title}</Text></Pressable>
+          {!!p.activity.artist && <Muted>{p.activity.artist}</Muted>}
+          {p.activity.context === 'wave' && <Muted>{t('wave.title')}</Muted>}
+          {p.activity.context === 'playlist' && p.activity.playlist_id && <Pressable accessibilityRole="link" onPress={() => router.push({ pathname: '/social-playlist', params: { owner: p.id, id: p.activity!.playlist_id } })}><Text style={{ color: colors.accent2 }}>{t('social.from_playlist', { name: p.activity.playlist_name ?? '' })}</Text></Pressable>}
+        </View>}
+        {p.relationship === 'friend' && <Button title={`${t('social.chat')}${p.unread ? ` · ${p.unread}` : ''}`} onPress={() => { if (!dock(p.id)) setPeer(p.id); }} />}
+        {p.relationship === 'friend' && <ListenTogetherButton person={p} />}
         {p.relationship === 'none' && <Button title={t('social.add')} disabled={act.isPending} onPress={() => act.mutate({ action: 'request', target_id: p.id })} />}
         {p.relationship === 'incoming' && <Button title={t('social.accept')} disabled={act.isPending} onPress={() => act.mutate({ action: 'accept', target_id: p.id })} />}
         {['friend', 'incoming', 'outgoing'].includes(p.relationship) && <Button title={t(p.relationship === 'incoming' ? 'social.decline' : p.relationship === 'outgoing' ? 'social.cancel' : 'social.remove')} variant="ghost" disabled={act.isPending} onPress={() => act.mutate({ action: 'remove', target_id: p.id })} />}
@@ -96,52 +140,9 @@ export function SocialScreen({ root = false }: { root?: boolean }) {
     </>}
   </ScrollView></Screen>;
 }
-function Chat({ person }: { person: SocialPerson }) {
-  const { t } = useTranslation();
-  const colors = useColors();
-  const { server } = useSessionCtx();
-  const { api, key, user, active } = useSocial();
-  const router = useRouter();
-  const cache = useQueryClient();
-  const errorText = useErrorText();
-  const [text, setText] = useState('');
-  const [focused, setFocused] = useState(false);
-  useFocusEffect(useCallback(() => { setFocused(true); return () => setFocused(false); }, []));
-  const pending = useRef<{ id: string; text: string } | null>(null);
-  const messages = useInfiniteQuery({ queryKey: [...key, 'chat', person.id], initialPageParam: undefined as number | undefined,
-    queryFn: ({ pageParam }) => api.messages(person.id, pageParam), getNextPageParam: last => last.length === 50 ? last[0]?.seq : undefined, enabled: active && focused, refetchInterval: active && focused ? 8_000 : false });
-  const list = [...(messages.data?.pages ?? [])].reverse().flat();
-  const last = list.at(-1)?.seq;
-  const unread = list.some(m => m.sender_id !== user.id && !m.read);
-  useEffect(() => {
-    if (last && unread && active && focused) void api.action({ action: 'read_chat', target_id: person.id, up_to_seq: last }).then(() => cache.invalidateQueries({ queryKey: key })).catch(() => undefined);
-  }, [last, unread, active, focused, api, person.id, messages.dataUpdatedAt]);
-  const send = useMutation({ mutationFn: async () => {
-    if (!pending.current || pending.current.text !== text) pending.current = { id: uuidv7(), text };
-    return api.send(person.id, { ...pending.current, attachment_kind: 'none' });
-  }, onSuccess: async () => { setText(''); pending.current = null; await cache.invalidateQueries({ queryKey: key }); } });
-  const scroll = useRef<ScrollView>(null);
-  const [scrollBottom, setScrollBottom] = useState(true);
-  useEffect(() => { setScrollBottom(true); }, [last]);
-  return <KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
-    <View style={{ padding: 16, gap: 8 }}><H1>{person.display_name}</H1><Muted>{t('social.chat_hint')}</Muted><ErrorBox>{messages.error || send.error ? errorText(messages.error ?? send.error) : null}</ErrorBox></View>
-    <ScrollView ref={scroll} keyboardShouldPersistTaps="handled" contentContainerStyle={{ padding: 16, gap: 12 }} onContentSizeChange={() => { if (scrollBottom) scroll.current?.scrollToEnd({ animated: false }); }}>
-      {messages.hasNextPage && <Button title={t('social.older')} variant="ghost" busy={messages.isFetchingNextPage} onPress={() => { setScrollBottom(false); void messages.fetchNextPage(); }} />}
-      {messages.isPending && <Muted>{t('social.loading')}</Muted>}
-      {messages.isSuccess && !list.length && <Muted>{t('social.first_message')}</Muted>}
-      {list.map(m => <View key={m.id} style={{ alignSelf: m.sender_id === user.id ? 'flex-end' : 'flex-start', maxWidth: '88%', padding: 14, borderRadius: 16, backgroundColor: m.sender_id === user.id ? colors['accent-soft'] : colors.surface2, gap: 8 }}>
-        <Text style={{ color: colors.text, fontSize: 15 }}>{m.text}</Text>
-        {attachmentPath(m) && <Button title={t(m.attachment_kind === 'track' ? 'social.listen_track' : 'social.listen_playlist')} variant="secondary" onPress={() => {
-          if (!server || !m.attachment_id) return;
-          if (m.attachment_kind === 'track') router.push({ pathname: '/social-track', params: { id: m.attachment_id } });
-          else router.push({ pathname: '/social-playlist', params: { id: m.attachment_id } });
-        }} />}
-        <Muted>{new Date(m.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}{m.sender_id === user.id ? ` · ${t(m.read ? 'social.read' : 'social.sent')}` : ''}</Muted>
-      </View>)}
-    </ScrollView>
-    <View style={{ padding: 16, gap: 12, borderTopWidth: 1, borderTopColor: colors.line }}>
-      <Field label={t('social.message')} value={text} onChangeText={setText} maxLength={4000} multiline editable={!send.isPending} />
-      <Button title={t('social.send')} disabled={!text.trim()} busy={send.isPending} onPress={() => send.mutate()} />
-    </View>
-  </KeyboardAvoidingView>;
+function Chat({ person, active: visible = true }: { person: SocialPerson; active?: boolean }) {
+ const {api,key,user,active}=useSocial(); const {server}=useSessionCtx();
+ const [focused,setFocused]=useState(false);
+ useFocusEffect(useCallback(()=>{setFocused(true);return()=>setFocused(false);},[]));
+ return <ChatConversation person={person} api={api} queryKey={key} userId={user.id} server={server??''} active={visible&&active&&focused}/>;
 }

apps/mobile/src/features/social/drafts.ts

@@ -0,0 +1,14 @@
+import * as FileSystem from 'expo-file-system';
+import { sha256 } from 'js-sha256';
+import { chatDraftKey } from '@pipu/core';
+
+const directory = `${FileSystem.documentDirectory}chat-drafts/`;
+const path = (server: string, user: string, peer: string) => `${directory}${sha256(chatDraftKey(server,user,peer))}.txt`;
+export async function readDraft(server: string, user: string, peer: string) {
+  try { return await FileSystem.readAsStringAsync(path(server,user,peer)); } catch { return ''; }
+}
+export async function saveDraft(server: string, user: string, peer: string, text: string) {
+  if (!text) { await FileSystem.deleteAsync(path(server,user,peer), { idempotent: true }); return; }
+  await FileSystem.makeDirectoryAsync(directory, { intermediates: true });
+  await FileSystem.writeAsStringAsync(path(server,user,peer),text);
+}

apps/mobile/src/player/controller.ts

@@ -1,6 +1,10 @@
 import NetInfo from '@react-native-community/netinfo';
 import {
   EventBuffer,
+  createActivityPublisher,
+  type ActivityPublisher,
+  ListeningCoordinator,
+  type ListeningRoom,
   WaveCoordinator,
   EARLY_SKIP_MS,
   type WaveInfo,
@@ -32,6 +36,7 @@ export { offlineWave };
 export type { WaveInfo } from '@pipu/core';
 
 export interface PlayerState {
+  listening?: import('@pipu/core').ListeningClientState;
   ready: boolean;
   track: Track | null;
   queue: Track[];
@@ -72,6 +77,11 @@ async function quality(): Promise<Quality> {
  * реакции и бесконечная волна. Один экземпляр на процесс: им пользуются и экраны, и фоновый сервис.
  */
 class Controller {
+  private activity: ActivityPublisher | null = null;
+  private listening: ListeningCoordinator | null = null;
+  private interrupted = false;
+  private remoteRoom: string | null = null;
+  private queueVersion = 0;
   private session: AuthSession | null = null;
   private server = '';
   private events: EventBuffer | null = null;
@@ -104,12 +114,27 @@ class Controller {
 
   private update(patch: Partial<PlayerState>) {
     this.state = { ...this.state, ...patch };
+    this.activity?.update(this.state);
+    this.listening?.update();
     for (const fn of this.listeners) fn();
   }
 
   /** Привязка к вошедшему пользователю: события и реакции уходят на его сервер, без сети — копятся в SQLite. */
   attach(session: AuthSession | null, server: string, userId: string | null) {
     if (this.session === session) return;
+    this.activity?.dispose();
+    this.listening?.dispose();
+    this.listening = null;
+    this.activity = session && userId ? createActivityPublisher(session, eventId(Date.now())) : null;
+    if (session && this.activity) {
+      this.listening = new ListeningCoordinator(session, this.activity.deviceId, {
+        read: this.getState,
+        pause: () => { this.queueVersion++; this.leaveWave(); void TrackPlayer.pause().catch(() => undefined); },
+        apply: (room, position, current) => this.syncListening(room, position, current),
+        changed: listening => this.update({ listening }),
+      });
+      this.listening.start();
+    }
     void this.events?.flush();
     this.session = session;
     this.server = server;
@@ -240,35 +265,49 @@ class Controller {
   }
 
   async playList(tracks: Track[], index: number, context: PlayContext) {
+    if (this.listening?.locked) return;
+    const version = ++this.queueVersion;
+    const current = () => version === this.queueVersion && !this.listening?.locked;
     const list = tracks.filter(playable);
     const target = tracks[index];
     if (!target || !list.length) return;
     await this.setup();
+    if (!current()) return;
+    const native = await this.toRntp(list);
+    if (!current()) return;
     this.leaveWave();
     this.finishAttempt(this.lastPositionMs / 1000);
     const start = Math.max(list.indexOf(target), 0);
     this.update({ queue: list, context, index: start, track: list[start] ?? null });
     await TrackPlayer.reset();
-    await TrackPlayer.add(await this.toRntp(list));
+    if (!current()) return;
+    await TrackPlayer.add(native);
+    if (!current()) return;
     await TrackPlayer.skip(start);
+    if (!current()) return;
     await TrackPlayer.play();
   }
 
   toggle() {
+    if (this.listening?.locked) return;
     void (this.state.playing ? TrackPlayer.pause() : TrackPlayer.play());
   }
 
   next() {
+    if (this.listening?.locked) return;
     void TrackPlayer.skipToNext().catch(() => undefined);
   }
 
   async prev() {
+    if (this.listening?.locked) return;
     const { position } = await TrackPlayer.getProgress();
+    if (this.listening?.locked) return;
     if (position > 3) await TrackPlayer.seekTo(0);
     else await TrackPlayer.skipToPrevious().catch(() => TrackPlayer.seekTo(0));
   }
 
   seek(ms: number) {
+    if (this.listening?.locked) return;
     const t = this.state.track;
     if (t) this.events?.push({ type: 'seek', track_id: t.id, from_ms: this.lastPositionMs, position_ms: ms });
     this.attempt?.seek(ms);
@@ -306,6 +345,7 @@ class Controller {
   // --- «Моя волна» ---
 
   async startWave(activity: string | null, mood: string | null) {
+    if (this.listening?.locked) return;
     if (!this.session) return;
     await this.setup();
     this.leaveWave();
@@ -335,6 +375,7 @@ class Controller {
   }
 
   async setWaveContext(activity: string | null, mood: string | null) {
+    if (this.listening?.locked) return;
     const wave = this.state.wave;
     if (!wave || !this.session) return this.startWave(activity, mood);
     const version = this.wavePolicy.changeContext(wave.sessionId);
@@ -422,18 +463,28 @@ class Controller {
 
   /** Восстановить последний трек и позицию (на паузе, без автозапуска). */
   async restore() {
-    if (!this.session || this.state.track) return;
+    if (!this.session || this.state.track || this.listening?.locked) return;
+    const session = this.session;
+    const initial = this.state;
+    const current = () => this.session === session && this.state.queue === initial.queue && !this.state.track && !this.listening?.locked;
     await this.setup();
+    if (!current()) return;
     try {
-      const st = unwrap(await this.session.client.GET('/api/v1/me/playback-state'));
+      const st = unwrap(await session.client.GET('/api/v1/me/playback-state'));
+      if (!current()) return;
       if (!st.track_id || !st.queue.length) return;
-      const res = unwrap(await this.session.client.POST('/api/v1/tracks/batch', { body: { ids: st.queue } }));
+      const res = unwrap(await session.client.POST('/api/v1/tracks/batch', { body: { ids: st.queue } }));
+      if (!current()) return;
       const tracks = res.items.filter(playable);
       const idx = Math.max(tracks.findIndex((t) => t.id === st.track_id), 0);
       if (!tracks.length) return;
+      const native = await this.toRntp(tracks);
+      if (!current()) return;
       this.update({ queue: tracks, index: idx, track: tracks[idx] ?? null, context: (st.context as PlayContext | null) ?? null });
       await TrackPlayer.reset();
-      await TrackPlayer.add(await this.toRntp(tracks));
+      if (this.state.queue !== tracks || this.listening?.locked) return;
+      await TrackPlayer.add(native);
+      if (this.state.queue !== tracks || this.listening?.locked) return;
       await TrackPlayer.skip(idx, tracks[idx]?.id === st.track_id ? st.position_ms / 1000 : 0);
     } catch {
       // офлайн или нет сохранённого состояния
@@ -441,6 +492,7 @@ class Controller {
   }
 
   async reset() {
+    this.queueVersion++;
     this.wavePolicy.activate(null);
     this.attempt = null;
     this.update({ queue: [], track: null, index: 0, playing: false, positionMs: 0, wave: null, context: null });
@@ -451,6 +503,35 @@ class Controller {
     this.save();
     void this.events?.flush();
   }
+
+  play() { if (!this.listening?.locked) void TrackPlayer.play(); }
+  pause() { if (!this.listening?.locked) void TrackPlayer.pause(); }
+  setInterrupted(paused: boolean) { this.interrupted = paused; }
+  beginListeningAudio() { this.listening?.beginAudio(); }
+  private async syncListening(room: ListeningRoom, position: number, current: () => boolean) {
+    if (!room.track_id) { await TrackPlayer.pause(); return; }
+    await this.setup();
+    if (!current()) return;
+    if (this.remoteRoom !== room.id || this.state.track?.id !== room.track_id || this.state.queue.length !== 1 || this.state.wave) {
+      const track = unwrap(await this.session!.client.GET('/api/v1/tracks/{id}', { params: { path: { id: room.track_id } } }));
+      const native = await this.toRntp([track]);
+      if (!current()) return;
+      this.remoteRoom = room.id;
+      this.leaveWave(); this.finishAttempt(this.lastPositionMs / 1000);
+      await TrackPlayer.pause();
+      if (!current()) return;
+      this.update({ queue: [track], track, index: 0, durationMs: track.duration_ms, positionMs: 0, context: { type: 'queue' }, wave: null });
+      await TrackPlayer.reset();
+      if (!current()) return;
+      await TrackPlayer.add(native);
+    }
+    if (!current()) return;
+    const target = Math.min(position, Math.max(0, this.state.durationMs - 100));
+    if (Math.abs(this.state.positionMs - target) > 1500) await TrackPlayer.seekTo(target / 1000);
+    if (!current()) { await TrackPlayer.pause(); return; }
+    if (room.playing && !this.interrupted) { if (!this.state.playing) await TrackPlayer.play(); }
+    else if (this.state.playing) await TrackPlayer.pause();
+  }
 }
 
 export const player = new Controller();

apps/mobile/src/player/service.ts

@@ -7,14 +7,15 @@ import { player } from './controller';
  * команды уходят прямо в ExoPlayer, а учёт прослушиваний ведёт тот же контроллер.
  */
 export async function PlaybackService(): Promise<void> {
-  TrackPlayer.addEventListener(Event.RemotePlay, () => void TrackPlayer.play());
-  TrackPlayer.addEventListener(Event.RemotePause, () => void TrackPlayer.pause());
-  TrackPlayer.addEventListener(Event.RemoteStop, () => void TrackPlayer.stop());
+  TrackPlayer.addEventListener(Event.RemotePlay, () => player.play());
+  TrackPlayer.addEventListener(Event.RemotePause, () => player.pause());
+  TrackPlayer.addEventListener(Event.RemoteStop, () => player.pause());
   TrackPlayer.addEventListener(Event.RemoteNext, () => player.next());
   TrackPlayer.addEventListener(Event.RemotePrevious, () => void player.prev());
   TrackPlayer.addEventListener(Event.RemoteSeek, ({ position }) => player.seek(position * 1000));
   // Звонок / голосовой ассистент: приостанавливаем и продолжаем сами (autoHandleInterruptions — для фокуса).
   TrackPlayer.addEventListener(Event.RemoteDuck, ({ paused, permanent }) => {
+    player.setInterrupted(paused || permanent);
     if (permanent) void TrackPlayer.pause();
     else if (paused) void TrackPlayer.pause();
   });

apps/mobile/src/ui/Onboarding.tsx

@@ -3,6 +3,7 @@ import { AGE_GROUPS, GENDERS, unwrap } from '@pipu/core';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useState, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
+import { FriendRecommendations } from '../features/social/Social';
 import { ActivityIndicator, Pressable, ScrollView, Text, View } from 'react-native';
 
 import { useSession, useSessionCtx, useUser } from '../lib/session';
@@ -38,6 +39,7 @@ export function RecommendationSettings() {
   const [editing, setEditing] = useState(false);
   const errorText = useErrorText();
   return <View>
+    <FriendRecommendations />
     {editing && query.data ? <Onboarding key={JSON.stringify(query.data.choice)} options={query.data} editing onDone={() => {
       setEditing(false); void client.invalidateQueries({ queryKey: ['onboarding'] });
     }} /> : <Button title={t('onboarding.edit')} variant="secondary" busy={query.isFetching} onPress={() => { void query.refetch().then((result) => { if (result.data && !result.error) setEditing(true); }); }} />}

apps/mobile/test/controller.test.ts

@@ -70,3 +70,18 @@ it('does not let a late context response replace a manually selected playlist',
   expect(player.getState().queue.map((t) => t.id)).toEqual(['manual']);
   expect(player.getState().context?.type).toBe('album');
 });
+
+it('does not restore a stale saved queue after manual playback starts', async () => {
+  const { player } = await import('../src/player/controller');
+  const saved = deferred<unknown>();
+  const get = vi.fn().mockReturnValue(saved.promise);
+  const post = vi.fn();
+  player.attach({ client: { GET: get, POST: post } } as unknown as AuthSession, 'http://localhost', null);
+  const restoring = player.restore();
+  await vi.waitFor(() => expect(get).toHaveBeenCalled());
+  await player.playList([track('chosen')], 0, { type: 'queue' });
+  saved.resolve({ data: { track_id: 'old', queue: ['old'], position_ms: 500 }, response: new Response() });
+  await restoring;
+  expect(player.getState().track?.id).toBe('chosen');
+  expect(post).not.toHaveBeenCalledWith('/api/v1/tracks/batch', expect.anything());
+});