feat(mobile): Skia wave, wave player view, themes and playback settings (M5)

- My Wave is rendered with react-native-skia on the UI thread; physics and colour helpers moved to @pipu/core (wave-anim) and shared with web. - Full-screen player honours ui_prefs.mobile_player (cover / wave). - Theme switching (dark / light / system) via a theme context and useColors() across all screens. - Profile: theme, wave variant, player view, sound quality sheet (Wi-Fi / mobile / downloads), recent-tracks cache clearing on next cold start, and a change-password sheet. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-20 13:30:21 +03:00
1 parent 756e915ff9
commit ed063d3763
@@ -6,13 +6,14 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';

 import { player } from '../../player/controller';
 import { usePlayerState } from '../../player/hooks';
-import { colors } from '../../theme';
+import { useColors } from '../../theme';
 import { Cover, Icon, type IconName } from '../../ui/kit';
 import { UpdateDialog } from '../../ui/UpdateDialog';

 const ICONS: Record<string, IconName> = { index: 'home', search: 'search', collection: 'library-music', profile: 'person' };

 export default function TabsLayout() {
+  const colors = useColors();
  const { t } = useTranslation();
  const labels: Record<string, string> = {
    index: t('nav.home'),
@@ -59,6 +60,7 @@ function TabBar({
  labels: Record<string, string>;
  onPress: (name: string) => void;
 }) {
+  const colors = useColors();
  const insets = useSafeAreaInsets();
  return (
    <View
@@ -95,6 +97,7 @@ function TabBar({

 /** Мини-плеер над навигацией; нажатие — полноэкранный плеер. */
 function MiniPlayer() {
+  const colors = useColors();
  const { t } = useTranslation();
  const router = useRouter();
  const st = usePlayerState();
@@ -134,6 +137,7 @@ function MiniPlayer() {

 /** Нет сети: доступны «Скачанное» и офлайн-волна. */
 function OfflineBanner({ text }: { text: string }) {
+  const colors = useColors();
  const insets = useSafeAreaInsets();
  return (
    <View accessibilityRole="alert" style={{ paddingTop: insets.top + 6, paddingBottom: 6, paddingHorizontal: 16, backgroundColor: colors.surface3, flexDirection: 'row', gap: 8, alignItems: 'center' }}>
@@ -8,13 +8,14 @@ import { useSession } from '../../lib/session';
 import { downloads } from '../../offline/downloads';
 import { player } from '../../player/controller';
 import { usePlayerState } from '../../player/hooks';
-import { colors } from '../../theme';
+import { useColors } from '../../theme';
 import { DownloadButton, useDownloads } from '../../ui/downloads';
 import { Button, H1, Muted, Screen, Segmented, TrackRow } from '../../ui/kit';

 type Tab = 'history' | 'likes' | 'dislikes' | 'downloads';

 export default function CollectionScreen() {
+  const colors = useColors();
  const { t, i18n } = useTranslation();
  const session = useSession();
  const current = usePlayerState().track;
@@ -105,6 +106,7 @@ const MB = 1024 * 1024;

 /** Коллекция → Скачанное: работает без сети, данные — из SQLite. */
 function DownloadsTab({ tabs }: { tabs: React.ReactNode }) {
+  const colors = useColors();
  const { t } = useTranslation();
  const dl = useDownloads();
  const current = usePlayerState().track;
@@ -1,14 +1,15 @@
 import { unwrap } from '@pipu/core';
 import { useQuery } from '@tanstack/react-query';
-import { useEffect, useRef, useState } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { AccessibilityInfo, Animated, Easing, Pressable, ScrollView, Text, View } from 'react-native';
+import { Pressable, ScrollView, Text, View } from 'react-native';

-import { useSession } from '../../lib/session';
+import { useSession, useUser } from '../../lib/session';
 import { player } from '../../player/controller';
 import { usePlayerState } from '../../player/hooks';
-import { colors } from '../../theme';
+import { useColors } from '../../theme';
 import { ErrorBox, Icon, Screen, useErrorText, type IconName } from '../../ui/kit';
+import { WaveOrb } from '../../ui/wave/WaveOrb';

 /** Имена из /wave/options (Material Symbols) → MaterialIcons. */
 function iconFor(name: string): IconName {
@@ -17,13 +18,15 @@ function iconFor(name: string): IconName {
 }

 /**
- * Главная: кнопка «Моя волна» и выбор занятия / настроения. На Android спектр недоступен,
- * поэтому пульс берётся из BPM и energy трека (docs/mobile.md). Полный порт Canvas-анимации на Skia — отдельно.
+ * Главная: кнопка «Моя волна» (Skia, вид orb / liquid из профиля) и выбор занятия / настроения.
+ * На Android спектр недоступен, поэтому пульс берётся из BPM и energy трека (docs/mobile.md).
 */
 export default function HomeScreen() {
+  const colors = useColors();
  const { t } = useTranslation();
  const tr = t as unknown as (k: string) => string;
  const session = useSession();
+  const user = useUser();
  const st = usePlayerState();
  const errorText = useErrorText();
  const [error, setError] = useState<unknown>(null);
@@ -50,23 +53,24 @@ export default function HomeScreen() {
    if (waveOn) run(() => player.setWaveContext(a, m));
  };
  const ctx = [activity && tr(`wave.activities.${activity}`), mood && tr(`wave.moods.${mood}`)].filter(Boolean).join(' · ') || t('wave.for_you');
-  const colorsWave = waveOn && st.track?.album.cover_colors.length === 3 ? st.track.album.cover_colors : ['#2F80FF', '#7C5CFF', '#35D3FF'];

  return (
    <Screen>
      <ScrollView contentContainerStyle={{ alignItems: 'center', paddingVertical: 32, gap: 24, paddingHorizontal: 16 }}>
-        <WaveCircle
+        <WaveOrb
+          variant={user.ui_prefs.wave_variant ?? 'orb'}
+          size={260}
          playing={playing}
          bpm={st.track?.features?.bpm ?? 100}
          energy={st.track?.features?.energy ?? 0.6}
-          colors={colorsWave}
+          colors={waveOn ? st.track?.album.cover_colors : undefined}
          onPress={onWave}
          label={t(playing ? 'wave.pause' : 'wave.start')}
        >
          <Icon name={playing ? 'pause' : 'play-arrow'} size={44} color="#fff" />
          <Text style={{ color: '#fff', fontSize: 22, fontWeight: '700' }}>{t('wave.title')}</Text>
          <Text style={{ color: 'rgba(255,255,255,0.85)', fontSize: 13 }}>{ctx}</Text>
-        </WaveCircle>
+        </WaveOrb>
        {st.wave?.fallback && <Text style={{ color: colors.text2, fontSize: 13 }}>{t('wave.fallback')}</Text>}
        <ErrorBox>{error ? errorText(error) : null}</ErrorBox>
        {options.data && (
@@ -80,70 +84,6 @@ export default function HomeScreen() {
  );
 }

-function WaveCircle({
-  playing,
-  bpm,
-  energy,
-  colors: palette,
-  onPress,
-  label,
-  children,
-}: {
-  playing: boolean;
-  bpm: number;
-  energy: number;
-  colors: string[];
-  onPress: () => void;
-  label: string;
-  children: React.ReactNode;
-}) {
-  const scale = useRef(new Animated.Value(1)).current;
-  const [reduced, setReduced] = useState(false);
-  useEffect(() => {
-    void AccessibilityInfo.isReduceMotionEnabled().then(setReduced);
-  }, []);
-  useEffect(() => {
-    if (reduced) return;
-    // Играет — удар в такт BPM с силой от energy; в покое — медленное «дыхание».
-    const beat = playing ? 60000 / Math.max(bpm, 40) : 3000;
-    const peak = playing ? 1 + 0.03 + energy * 0.05 : 1.03;
-    const anim = Animated.loop(
-      Animated.sequence([
-        Animated.timing(scale, { toValue: peak, duration: playing ? beat * 0.15 : beat / 2, easing: Easing.out(Easing.quad), useNativeDriver: true }),
-        Animated.timing(scale, { toValue: 1, duration: playing ? beat * 0.85 : beat / 2, easing: Easing.inOut(Easing.quad), useNativeDriver: true }),
-      ]),
-    );
-    anim.start();
-    return () => anim.stop();
-  }, [playing, bpm, energy, reduced, scale]);
-
-  return (
-    <Pressable onPress={onPress} accessibilityRole="button" accessibilityLabel={label} accessibilityState={{ selected: playing }}>
-      <Animated.View
-        style={{
-          width: 260,
-          height: 260,
-          borderRadius: 130,
-          backgroundColor: palette[0],
-          alignItems: 'center',
-          justifyContent: 'center',
-          gap: 4,
-          overflow: 'hidden',
-          shadowColor: palette[0],
-          shadowOpacity: 0.6,
-          shadowRadius: 40,
-          elevation: 16,
-          transform: [{ scale }],
-        }}
-      >
-        <View style={{ position: 'absolute', width: 200, height: 200, borderRadius: 100, backgroundColor: palette[1], opacity: 0.55, top: 90, left: 70 }} />
-        <View style={{ position: 'absolute', width: 140, height: 140, borderRadius: 70, backgroundColor: palette[2], opacity: 0.45, top: 10, left: 20 }} />
-        {children}
-      </Animated.View>
-    </Pressable>
-  );
-}
-
 function Chips({
  title,
  options,
@@ -157,6 +97,7 @@ function Chips({
  label: (k: string) => string;
  onPick: (k: string) => void;
 }) {
+  const colors = useColors();
  return (
    <View style={{ alignItems: 'center', gap: 10, width: '100%' }}>
      <Text style={{ color: colors.text3, fontSize: 11, fontWeight: '700', letterSpacing: 0.8, textTransform: 'uppercase' }}>{title}</Text>
@@ -1,20 +1,28 @@
+import type { components } from '@pipu/api-client';
 import { unwrap } from '@pipu/core';
 import { SUPPORTED_LOCALES, type Locale } from '@pipu/i18n';
 import Constants from 'expo-constants';
 import * as Linking from 'expo-linking';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Pressable, ScrollView, Switch, Text, View } from 'react-native';

+import { playerCache } from '../../lib/prefs';
 import { useSession, useSessionCtx, useUser } from '../../lib/session';
 import { updater } from '../../lib/update';
 import { downloads } from '../../offline/downloads';
 import { player } from '../../player/controller';
-import { colors, radius } from '../../theme';
+import { radius, useColors } from '../../theme';
 import { Button, H1, Icon, Muted, Screen, Segmented } from '../../ui/kit';
 import { useDownloads } from '../../ui/downloads';
+import { PasswordSheet, QualitySheet, useQualityPrefs } from '../../ui/settings';
 import { useUpdateState } from '../../ui/UpdateDialog';

+type UiPrefs = components['schemas']['UiPrefs'];
+const MB = 1024 * 1024;
+
 export default function ProfileScreen() {
+  const colors = useColors();
  const { t, i18n } = useTranslation();
  const session = useSession();
  const user = useUser();
@@ -22,6 +30,27 @@ export default function ProfileScreen() {
  const staff = user.role !== 'user';
  const update = useUpdateState();
  const dl = useDownloads();
+  const quality = useQualityPrefs();
+  const [sheet, setSheet] = useState<'quality' | 'password' | null>(null);
+  const [cache, setCache] = useState<{ bytes: number; pending: boolean } | null>(null);
+
+  useEffect(() => {
+    void Promise.all([playerCache.size(), playerCache.clearPending()]).then(([bytes, pending]) => setCache({ bytes, pending }));
+  }, []);
+
+  // Оптимистично, как в вебе: настройка применяется сразу, сервер подтверждает.
+  const setPrefs = async (prefs: UiPrefs) => {
+    session.setUser({ ...user, ui_prefs: { ...user.ui_prefs, ...prefs } });
+    try {
+      session.setUser(unwrap(await session.client.PATCH('/api/v1/me', { body: { ui_prefs: prefs } })));
+    } catch {
+      session.setUser(user);
+    }
+  };
+  const clearCache = async () => {
+    await playerCache.requestClear();
+    setCache((c) => (c ? { ...c, pending: true } : c));
+  };

  const setLocale = async (l: Locale) => {
    await i18n.changeLanguage(l);
@@ -56,6 +85,58 @@ export default function ProfileScreen() {
        </Section>

        <Section>
+          <Row label={t('settings.theme')}>
+            <Segmented<NonNullable<UiPrefs['theme']>>
+              value={user.ui_prefs.theme ?? 'system'}
+              options={[
+                { value: 'dark', label: t('settings.theme_dark') },
+                { value: 'light', label: t('settings.theme_light') },
+                { value: 'system', label: t('settings.theme_system') },
+              ]}
+              onChange={(v) => void setPrefs({ theme: v })}
+            />
+          </Row>
+          <Row label={t('settings.wave_variant')}>
+            <Segmented<NonNullable<UiPrefs['wave_variant']>>
+              value={user.ui_prefs.wave_variant ?? 'orb'}
+              options={[
+                { value: 'orb', label: t('settings.wave_orb') },
+                { value: 'liquid', label: t('settings.wave_liquid') },
+              ]}
+              onChange={(v) => void setPrefs({ wave_variant: v })}
+            />
+          </Row>
+          <Row label={t('mobile.player_view')}>
+            <Segmented<NonNullable<UiPrefs['mobile_player']>>
+              value={user.ui_prefs.mobile_player ?? 'cover'}
+              options={[
+                { value: 'cover', label: t('mobile.player_cover') },
+                { value: 'wave', label: t('mobile.player_wave') },
+              ]}
+              onChange={(v) => void setPrefs({ mobile_player: v })}
+            />
+          </Row>
+        </Section>
+
+        <Section>
+          <Pressable onPress={() => setSheet('quality')} accessibilityRole="button" style={{ paddingVertical: 4 }}>
+            <Row label={t('mobile.quality')}>
+              <Text style={{ color: colors.text2 }}>
+                {t(`mobile.q_${quality.wifi}`)} · {t(`mobile.q_${quality.cellular}`)}
+              </Text>
+            </Row>
+          </Pressable>
+          <Row label={t('mobile.cache')}>
+            {cache?.pending ? (
+              <Text style={{ color: colors.text3, fontSize: 12 }}>{t('mobile.cache_pending')}</Text>
+            ) : (
+              <Pressable onPress={() => void clearCache()} accessibilityRole="button" hitSlop={8}>
+                <Text style={{ color: colors.accent2, fontWeight: '500' }}>
+                  {t('mobile.cache_clear', { size: ((cache?.bytes ?? 0) / MB).toFixed(0) })}
+                </Text>
+              </Pressable>
+            )}
+          </Row>
          <Row label={t('mobile.dl_wifi_only')}>
            <Switch value={dl.wifiOnly} onValueChange={(v) => void downloads.setWifiOnly(v)} />
          </Row>
@@ -78,6 +159,7 @@ export default function ProfileScreen() {
          )}
        </Section>

+        <Button title={t('settings.change_password')} variant="secondary" icon="lock" onPress={() => setSheet('password')} />
        <Button
          title={t(update.status === 'checking' ? 'mobile.update_checking' : 'mobile.update_check')}
          variant="secondary"
@@ -93,15 +175,19 @@ export default function ProfileScreen() {
          {t('mobile.version', { version: Constants.expoConfig?.version ?? '0.0.0' })}
        </Text>
      </ScrollView>
+      <QualitySheet visible={sheet === 'quality'} onClose={() => setSheet(null)} />
+      <PasswordSheet visible={sheet === 'password'} onClose={() => setSheet(null)} />
    </Screen>
  );
 }

 function Section({ children }: { children: React.ReactNode }) {
+  const colors = useColors();
  return <View style={{ padding: 16, borderRadius: radius.lg, backgroundColor: colors.surface, gap: 8 }}>{children}</View>;
 }

 function Row({ label, children }: { label: string; children: React.ReactNode }) {
+  const colors = useColors();
  return (
    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
      <Text style={{ color: colors.text }}>{label}</Text>
@@ -9,13 +9,14 @@ import { FlatList, Pressable, Text, TextInput, View } from 'react-native';
 import { useSession } from '../../lib/session';
 import { player } from '../../player/controller';
 import { usePlayerState } from '../../player/hooks';
-import { colors, radius } from '../../theme';
+import { radius, useColors } from '../../theme';
 import { Cover, Icon, Screen, TrackRow, useErrorText } from '../../ui/kit';

 const RECENT_KEY = 'pipu.recent_searches';

 /** Поиск: подсказки по мере ввода (debounce 250 мс), недавние запросы — локально. */
 export default function SearchScreen() {
+  const colors = useColors();
  const { t } = useTranslation();
  const session = useSession();
  const router = useRouter();