Player: sharp video and subtitles at screen size; dev tools: danmaku preview, subtitle lift with a stand-in chat line
- "Sharp video and subtitles" (Settings → Player and the player settings card, on by default): the video output renders at the view's physical size (debounced, GPU rendering only), so libass, mpv's scaler and the shaders work at screen resolution; re-sent after media_kit's own reset on new video params, redrawn while paused. - Dev builds only (Settings → About → Developer): a danmaku preview (DanmakuLayer: free lanes in an upper band, density cap with a queue, equal crossing time, outlined text, avatars, own-line frame) over the real player or a stand-in picture, with samples, a random stream, live toasts, every knob and mock subtitles; and "Lift subtitles above the chat line and controls": Enter opens a stand-in chat line, bottom subtitles move up via mpv sub-pos while it or the control bar is up. - tool/make_sub_test.sh: a test video with a top \an8 sign, bottom dialogue and an SRT track. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
foxyzandClaude Opus 5.5 committed
1 parent
638a30e16c
commit
5bc252bf02
18 files changed
+2253
-16
No files matched your search
@@ -0,0 +1,475 @@
|
||||
import 'dart:collection';
|
||||
import 'dart:math' as math;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/scheduler.dart';
|
||||
|
||||
import '../shell/avatar.dart' show AvatarInfo, StatusAvatar;
|
||||
|
||||
// Danmaku (Bilibili / niconico style): short lines that fly right to left
|
||||
// across the upper part of the picture. Each line takes a free lane (no
|
||||
// two ever touch), at most [DanmakuStyle.maxOnScreen] fly at once and the
|
||||
// rest wait their turn; every line crosses in the same time, so a long
|
||||
// one moves faster. The clock is the layer's own: lines keep flying while
|
||||
// the video is paused. Dev preview for now (DEVELOPMENT.md "Dev tools").
|
||||
|
||||
/// What a line is: a chat message or a short notice.
|
||||
enum DanmakuKind { chat, join, leave, upNext, starting }
|
||||
|
||||
/// One line: [sender] (a coloured prefix, [senderColor]) and [text];
|
||||
/// [own] lines (this member's) get a hairline frame. [avatar]: the
|
||||
/// sender's picture (or initial) before it; the app's own notices have
|
||||
/// none.
|
||||
@immutable
|
||||
class DanmakuItem {
|
||||
final DanmakuKind kind;
|
||||
final String? sender;
|
||||
final Color? senderColor;
|
||||
final String text;
|
||||
final bool own;
|
||||
final AvatarInfo? avatar;
|
||||
const DanmakuItem(
|
||||
{required this.kind, required this.text, this.sender, this.senderColor, this.own = false, this.avatar});
|
||||
}
|
||||
|
||||
/// How lines look and move.
|
||||
@immutable
|
||||
class DanmakuStyle {
|
||||
/// Seconds a line takes from the right edge until it has left on the
|
||||
/// left, whatever its length.
|
||||
final double crossSecs;
|
||||
|
||||
/// Lines on screen at once; more wait.
|
||||
final int maxOnScreen;
|
||||
|
||||
/// The band the lanes fill, as fractions of the height from the top:
|
||||
/// below where top signs sit, never down into the dialogue.
|
||||
final double bandTop;
|
||||
final double bandBottom;
|
||||
final double opacity;
|
||||
|
||||
/// Text size relative to the picture's height ([fontSizeFor]).
|
||||
final double size;
|
||||
|
||||
/// Width of the dark outline round the white text, logical px.
|
||||
final double outline;
|
||||
final bool highlightOwn;
|
||||
|
||||
/// The sender's avatar before the line.
|
||||
final bool avatars;
|
||||
|
||||
const DanmakuStyle({
|
||||
this.crossSecs = 8,
|
||||
this.maxOnScreen = 12,
|
||||
this.bandTop = 0.10,
|
||||
this.bandBottom = 0.45,
|
||||
this.opacity = 0.92,
|
||||
this.size = 1,
|
||||
this.outline = 1.4,
|
||||
this.highlightOwn = true,
|
||||
this.avatars = true,
|
||||
});
|
||||
|
||||
DanmakuStyle copyWith({
|
||||
double? crossSecs,
|
||||
int? maxOnScreen,
|
||||
double? bandTop,
|
||||
double? bandBottom,
|
||||
double? opacity,
|
||||
double? size,
|
||||
double? outline,
|
||||
bool? highlightOwn,
|
||||
bool? avatars,
|
||||
}) =>
|
||||
DanmakuStyle(
|
||||
crossSecs: crossSecs ?? this.crossSecs,
|
||||
maxOnScreen: maxOnScreen ?? this.maxOnScreen,
|
||||
bandTop: bandTop ?? this.bandTop,
|
||||
bandBottom: bandBottom ?? this.bandBottom,
|
||||
opacity: opacity ?? this.opacity,
|
||||
size: size ?? this.size,
|
||||
outline: outline ?? this.outline,
|
||||
highlightOwn: highlightOwn ?? this.highlightOwn,
|
||||
avatars: avatars ?? this.avatars,
|
||||
);
|
||||
|
||||
/// The text size in a picture [height] px tall: 4.2 % of it (about 30 px
|
||||
/// on a 720 px player), 13 to 44 px, times [size].
|
||||
double fontSizeFor(double height) => (height * 0.042).clamp(13.0, 44.0) * size;
|
||||
|
||||
/// A lane: the line's height plus a little air.
|
||||
double laneHeightFor(double height) => fontSizeFor(height) * 1.5;
|
||||
|
||||
/// Lanes in the band of a picture [height] px tall (at least one).
|
||||
int lanesFor(double height) {
|
||||
final band = (bandBottom - bandTop).clamp(0.0, 1.0) * height;
|
||||
return math.max(1, (band / laneHeightFor(height)).floor());
|
||||
}
|
||||
}
|
||||
|
||||
/// One line in flight in [lane], from [start] (seconds on the layer's
|
||||
/// clock), [width] px wide, crossing in [crossSecs].
|
||||
class DanmakuFlight<T> {
|
||||
final T item;
|
||||
final int lane;
|
||||
final double start;
|
||||
final double width;
|
||||
final double crossSecs;
|
||||
DanmakuFlight({required this.item, required this.lane, required this.start, required this.width, required this.crossSecs});
|
||||
|
||||
/// Its left edge at [t] in a picture [w] px wide: [w] at the start,
|
||||
/// -[width] at the end.
|
||||
double x(double t, double w) => w - (w + width) * ((t - start) / crossSecs);
|
||||
double end() => start + crossSecs;
|
||||
bool doneAt(double t) => t >= end();
|
||||
}
|
||||
|
||||
/// Lane assignment, pure (no widgets, a clock passed in): lines queue in
|
||||
/// order of arrival; [tick] lets the waiting ones in while a lane is free
|
||||
/// and fewer than the cap fly. A lane is free for a new line when the last
|
||||
/// line in it has fully entered with [gap] behind it and the new one, at
|
||||
/// its own speed, cannot catch up with it before it has left.
|
||||
class DanmakuLanes<T> {
|
||||
/// Space kept between two lines in a lane, px.
|
||||
final double gap;
|
||||
|
||||
/// A line waiting longer than this is dropped (a burst on a crowded
|
||||
/// picture would otherwise fly long after it was said).
|
||||
final double maxWaitSecs;
|
||||
|
||||
/// Lines kept waiting at most; older ones go first when it is full.
|
||||
final int maxWaiting;
|
||||
|
||||
DanmakuLanes({this.gap = 24, this.maxWaitSecs = 15, this.maxWaiting = 60});
|
||||
|
||||
final List<DanmakuFlight<T>> flights = [];
|
||||
final Queue<(T, double)> _waiting = Queue();
|
||||
int dropped = 0;
|
||||
|
||||
int get waiting => _waiting.length;
|
||||
|
||||
/// Everything flying and waiting goes; returns it.
|
||||
List<T> clear() {
|
||||
final all = [for (final f in flights) f.item, for (final w in _waiting) w.$1];
|
||||
flights.clear();
|
||||
_waiting.clear();
|
||||
return all;
|
||||
}
|
||||
|
||||
/// [item] arrived at [t]; it flies on the next [tick] that has room.
|
||||
void add(T item, double t) {
|
||||
_waiting.add((item, t));
|
||||
while (_waiting.length > maxWaiting) {
|
||||
_waiting.removeFirst();
|
||||
dropped++;
|
||||
}
|
||||
}
|
||||
|
||||
/// Advances to [t] in a picture [w] px wide with [lanes] lanes: drops
|
||||
/// what has left and what waited too long, then places waiting lines in
|
||||
/// order (the topmost free lane each) until the cap or no lane is free.
|
||||
/// [measure] gives a line's width. Returns the lines placed.
|
||||
List<DanmakuFlight<T>> tick(double t,
|
||||
{required double w, required int lanes, required int cap, required double crossSecs, required double Function(T) measure}) {
|
||||
flights.removeWhere((f) => f.doneAt(t));
|
||||
while (_waiting.isNotEmpty && t - _waiting.first.$2 > maxWaitSecs) {
|
||||
_waiting.removeFirst();
|
||||
dropped++;
|
||||
}
|
||||
final placed = <DanmakuFlight<T>>[];
|
||||
while (_waiting.isNotEmpty && flights.length < cap) {
|
||||
final item = _waiting.first.$1;
|
||||
final width = measure(item);
|
||||
final lane = freeLane(t, w: w, lanes: lanes, width: width, crossSecs: crossSecs);
|
||||
if (lane == null) break;
|
||||
_waiting.removeFirst();
|
||||
final f = DanmakuFlight(item: item, lane: lane, start: t, width: width, crossSecs: crossSecs);
|
||||
flights.add(f);
|
||||
placed.add(f);
|
||||
}
|
||||
return placed;
|
||||
}
|
||||
|
||||
/// The topmost lane a line [width] px wide can start in at [t], or null.
|
||||
int? freeLane(double t, {required double w, required int lanes, required double width, required double crossSecs}) {
|
||||
final last = <int, DanmakuFlight<T>>{};
|
||||
for (final f in flights) {
|
||||
final l = last[f.lane];
|
||||
if (l == null || f.start > l.start) last[f.lane] = f;
|
||||
}
|
||||
for (var lane = 0; lane < lanes; lane++) {
|
||||
final prev = last[lane];
|
||||
if (prev == null || fits(prev, t, w: w, width: width, crossSecs: crossSecs, gap: gap)) return lane;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/// A new line ([width], [crossSecs]) may follow [prev] in its lane at [t].
|
||||
/// Both move linearly, so checking now and the moment [prev] has left is
|
||||
/// enough.
|
||||
static bool fits(DanmakuFlight<Object?> prev, double t,
|
||||
{required double w, required double width, required double crossSecs, required double gap}) {
|
||||
// Fully in, with the gap behind it.
|
||||
if (prev.x(t, w) + prev.width + gap > w) return false;
|
||||
final leaves = prev.end();
|
||||
if (leaves <= t) return true;
|
||||
// Where the new line's head is when prev's tail reaches the left edge.
|
||||
final head = w - (w + width) * ((leaves - t) / crossSecs);
|
||||
return head >= gap;
|
||||
}
|
||||
}
|
||||
|
||||
/// Feeds a [DanmakuLayer]; [onScreen] / [waiting] follow what the layer
|
||||
/// does with the lines (for a status readout).
|
||||
class DanmakuController extends ChangeNotifier {
|
||||
final _inbox = <DanmakuItem>[];
|
||||
final onScreen = ValueNotifier(0);
|
||||
final waiting = ValueNotifier(0);
|
||||
final dropped = ValueNotifier(0);
|
||||
|
||||
void add(DanmakuItem item) {
|
||||
_inbox.add(item);
|
||||
notifyListeners();
|
||||
}
|
||||
|
||||
/// Everything in flight and waiting goes.
|
||||
void clear() {
|
||||
_clear = true;
|
||||
_inbox.clear();
|
||||
notifyListeners();
|
||||
}
|
||||
|
||||
bool _clear = false;
|
||||
|
||||
List<DanmakuItem> _take() {
|
||||
final items = List.of(_inbox);
|
||||
_inbox.clear();
|
||||
return items;
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
onScreen.dispose();
|
||||
waiting.dispose();
|
||||
dropped.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
/// The lines over a picture: fills its box, lets every click through.
|
||||
/// Each line is a widget (avatar, outlined text, own frame) moved by a
|
||||
/// [Flow] on every frame: only paint runs per frame, a build only when a
|
||||
/// line comes or goes.
|
||||
class DanmakuLayer extends StatefulWidget {
|
||||
final DanmakuController controller;
|
||||
final DanmakuStyle style;
|
||||
|
||||
/// The accent of [DanmakuItem.own] lines' frame and of "starting now".
|
||||
final Color accent;
|
||||
const DanmakuLayer({super.key, required this.controller, this.style = const DanmakuStyle(), required this.accent});
|
||||
|
||||
@override
|
||||
State<DanmakuLayer> createState() => _DanmakuLayerState();
|
||||
}
|
||||
|
||||
/// A line measured once (its width decides its speed and its lane) and
|
||||
/// its widget, built once.
|
||||
class _Line {
|
||||
final DanmakuItem item;
|
||||
final double width;
|
||||
final double height;
|
||||
final Widget widget;
|
||||
_Line(this.item, this.width, this.height, this.widget);
|
||||
}
|
||||
|
||||
class _DanmakuLayerState extends State<DanmakuLayer> with SingleTickerProviderStateMixin {
|
||||
late final Ticker _ticker = createTicker(_onTick);
|
||||
final _lanes = DanmakuLanes<_Line>();
|
||||
final _repaint = ValueNotifier(0);
|
||||
Duration _elapsed = Duration.zero;
|
||||
Size _size = Size.zero;
|
||||
var _pending = <DanmakuItem>[];
|
||||
var _shown = <DanmakuFlight<_Line>>[];
|
||||
|
||||
double get _t => _elapsed.inMicroseconds / 1e6;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
widget.controller.addListener(_onAdd);
|
||||
_ticker.start();
|
||||
}
|
||||
|
||||
@override
|
||||
void didUpdateWidget(DanmakuLayer old) {
|
||||
super.didUpdateWidget(old);
|
||||
if (old.controller != widget.controller) {
|
||||
old.controller.removeListener(_onAdd);
|
||||
widget.controller.addListener(_onAdd);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
widget.controller.removeListener(_onAdd);
|
||||
_ticker.dispose();
|
||||
_repaint.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void _onAdd() {
|
||||
final c = widget.controller;
|
||||
if (c._clear) {
|
||||
c._clear = false;
|
||||
_lanes.clear();
|
||||
_pending = [];
|
||||
}
|
||||
_pending.addAll(c._take());
|
||||
}
|
||||
|
||||
_Line _build(DanmakuItem item) {
|
||||
final s = widget.style;
|
||||
final size = s.fontSizeFor(_size.height);
|
||||
final base = TextStyle(
|
||||
fontSize: size,
|
||||
height: 1.2,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Colors.white,
|
||||
letterSpacing: 0.2,
|
||||
shadows: const [],
|
||||
);
|
||||
InlineSpan span({Paint? stroke}) {
|
||||
final name = item.sender;
|
||||
final accent = item.kind == DanmakuKind.starting && stroke == null ? widget.accent : null;
|
||||
return TextSpan(style: stroke == null ? base : base.copyWith(foreground: stroke, color: null), children: [
|
||||
if (name != null)
|
||||
TextSpan(
|
||||
text: item.kind == DanmakuKind.chat ? '$name ' : '$name ',
|
||||
style: TextStyle(
|
||||
fontWeight: FontWeight.w700,
|
||||
color: stroke == null ? (item.senderColor ?? Colors.white) : null,
|
||||
),
|
||||
),
|
||||
TextSpan(text: item.text, style: accent == null ? null : TextStyle(color: accent)),
|
||||
]);
|
||||
}
|
||||
|
||||
final measure = TextPainter(text: span(), textDirection: TextDirection.ltr, maxLines: 1)..layout();
|
||||
final textW = measure.width, textH = measure.height;
|
||||
measure.dispose();
|
||||
final avatar = s.avatars ? item.avatar : null;
|
||||
final avatarSize = size * 1.15;
|
||||
final avatarGap = size * 0.3;
|
||||
final frame = item.own && s.highlightOwn;
|
||||
final padX = frame ? size * 0.4 : 0.0;
|
||||
final width = textW + padX * 2 + (avatar == null ? 0 : avatarSize + avatarGap);
|
||||
Widget text = Text.rich(span(), maxLines: 1, softWrap: false);
|
||||
if (s.outline > 0) {
|
||||
final stroke = Paint()
|
||||
..style = PaintingStyle.stroke
|
||||
..strokeWidth = s.outline * 2
|
||||
..strokeJoin = StrokeJoin.round
|
||||
..color = const Color(0xE6000000);
|
||||
text = Stack(children: [Text.rich(span(stroke: stroke), maxLines: 1, softWrap: false), text]);
|
||||
}
|
||||
Widget line = Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
if (avatar != null) ...[
|
||||
StatusAvatar(info: avatar, size: avatarSize, badges: false, ring: false),
|
||||
SizedBox(width: avatarGap),
|
||||
],
|
||||
text,
|
||||
],
|
||||
);
|
||||
if (frame) {
|
||||
line = DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
color: widget.accent.withValues(alpha: 0.14),
|
||||
borderRadius: BorderRadius.circular(999),
|
||||
border: Border.all(color: widget.accent.withValues(alpha: 0.85), width: 1.2),
|
||||
),
|
||||
child: Padding(padding: EdgeInsets.symmetric(horizontal: padX), child: line),
|
||||
);
|
||||
}
|
||||
final height = math.max(textH, avatar == null ? 0.0 : avatarSize);
|
||||
return _Line(item, width, height, SizedBox(width: width, height: height, child: Center(child: line)));
|
||||
}
|
||||
|
||||
void _onTick(Duration elapsed) {
|
||||
_elapsed = elapsed;
|
||||
if (_size.isEmpty) return;
|
||||
final t = _t;
|
||||
for (final item in _pending) {
|
||||
_lanes.add(_build(item), t);
|
||||
}
|
||||
_pending = [];
|
||||
final s = widget.style;
|
||||
_lanes.tick(t,
|
||||
w: _size.width,
|
||||
lanes: s.lanesFor(_size.height),
|
||||
cap: s.maxOnScreen,
|
||||
crossSecs: s.crossSecs,
|
||||
measure: (l) => l.width);
|
||||
final c = widget.controller;
|
||||
c.onScreen.value = _lanes.flights.length;
|
||||
c.waiting.value = _lanes.waiting;
|
||||
c.dropped.value = _lanes.dropped;
|
||||
final now = List.of(_lanes.flights);
|
||||
if (now.length != _shown.length || !_sameFlights(now, _shown)) {
|
||||
setState(() => _shown = now);
|
||||
} else if (now.isNotEmpty) {
|
||||
_repaint.value++;
|
||||
}
|
||||
}
|
||||
|
||||
static bool _sameFlights(List<DanmakuFlight<_Line>> a, List<DanmakuFlight<_Line>> b) {
|
||||
for (var i = 0; i < a.length; i++) {
|
||||
if (!identical(a[i], b[i])) return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return IgnorePointer(
|
||||
child: LayoutBuilder(builder: (context, box) {
|
||||
_size = box.biggest;
|
||||
return Opacity(
|
||||
opacity: widget.style.opacity.clamp(0.0, 1.0),
|
||||
child: Flow(
|
||||
delegate: _DanmakuFlow(this, _repaint),
|
||||
children: [for (final f in _shown) KeyedSubtree(key: ObjectKey(f), child: f.item.widget)],
|
||||
),
|
||||
);
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _DanmakuFlow extends FlowDelegate {
|
||||
final _DanmakuLayerState state;
|
||||
_DanmakuFlow(this.state, Listenable repaint) : super(repaint: repaint);
|
||||
|
||||
@override
|
||||
BoxConstraints getConstraintsForChild(int i, BoxConstraints constraints) => const BoxConstraints();
|
||||
|
||||
@override
|
||||
void paintChildren(FlowPaintingContext context) {
|
||||
final s = state.widget.style;
|
||||
final size = context.size;
|
||||
final t = state._t;
|
||||
final top = s.bandTop * size.height;
|
||||
final lane = s.laneHeightFor(size.height);
|
||||
final flights = state._shown;
|
||||
for (var i = 0; i < flights.length && i < context.childCount; i++) {
|
||||
final f = flights[i];
|
||||
final x = f.x(t, size.width);
|
||||
final y = top + f.lane * lane + (lane - f.item.height) / 2;
|
||||
context.paintChild(i, transform: Matrix4.translationValues(x, y, 0));
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRepaint(_DanmakuFlow old) => true;
|
||||
}
|
||||
@@ -0,0 +1,769 @@
|
||||
import 'dart:async';
|
||||
import 'dart:math' as math;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:signals/signals_flutter.dart';
|
||||
|
||||
import '../controls/minimal/style.dart';
|
||||
import '../controls/session_controls.dart' show controlsBottomHeight;
|
||||
import '../session/notifier.dart' show ToastItem;
|
||||
import '../session/session_coordinator.dart' show SessionCoordinator;
|
||||
import '../shell/avatar.dart' show AvatarInfo, avatarForName, colorForName, memberAvatarInfo, selfAvatarInfo;
|
||||
import '../shell/motion.dart';
|
||||
import '../app/app_graph.dart' show AppScope;
|
||||
import '../widgets/app_menu.dart' show AppGlass, AppMenuStyle;
|
||||
import 'danmaku.dart';
|
||||
|
||||
// Dev builds only (Settings → About → Developer): try the danmaku look on
|
||||
// the real player (when something is loaded) or on a stand-in picture,
|
||||
// fed with samples, a random stream or this session's own toasts, with
|
||||
// every knob of [DanmakuStyle] live and mock subtitles to judge overlap.
|
||||
|
||||
/// The preview's state, owned by the shell while the app runs.
|
||||
class DanmakuPreview {
|
||||
final controller = DanmakuController();
|
||||
|
||||
/// Shown over the full session player.
|
||||
final active = signal(false);
|
||||
final style = signal(const DanmakuStyle());
|
||||
|
||||
/// A random stream: lines per minute, lengths from one word to a long
|
||||
/// sentence, CJK and emoji among them.
|
||||
final auto = signal(false);
|
||||
final autoRate = signal(40.0);
|
||||
|
||||
/// Mock subtitles: a top sign and bottom dialogue.
|
||||
final mockTop = signal(false);
|
||||
final mockBottom = signal(false);
|
||||
|
||||
/// The stand-in picture's control band (the real player has its own).
|
||||
final controlsBand = signal(true);
|
||||
|
||||
/// This session's chat and notice toasts fly too (session only).
|
||||
final live = signal(false);
|
||||
|
||||
/// In a session: the party's real avatars for the samples and the
|
||||
/// session's toasts (set while the session panel is up).
|
||||
SessionCoordinator? coord;
|
||||
|
||||
final _rng = math.Random();
|
||||
Timer? _autoTimer;
|
||||
late final void Function() _stopAuto;
|
||||
|
||||
DanmakuPreview() {
|
||||
_stopAuto = effect(() {
|
||||
final on = auto.value;
|
||||
autoRate.value;
|
||||
untracked(() {
|
||||
_autoTimer?.cancel();
|
||||
if (on) _scheduleAuto();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
void dispose() {
|
||||
_stopAuto();
|
||||
_autoTimer?.cancel();
|
||||
controller.dispose();
|
||||
}
|
||||
|
||||
void _scheduleAuto() {
|
||||
// Poisson arrivals: bursts and lulls like a real chat.
|
||||
final perSec = autoRate.peek() / 60;
|
||||
final wait = -math.log(1 - _rng.nextDouble()) / perSec;
|
||||
_autoTimer = Timer(Duration(milliseconds: (wait * 1000).round().clamp(30, 60000)), () {
|
||||
if (!auto.peek()) return;
|
||||
controller.add(randomSample());
|
||||
_scheduleAuto();
|
||||
});
|
||||
}
|
||||
|
||||
/// One sample line of [kind]; [own]: as if this member wrote it.
|
||||
/// Senders come from the party in a session (their pictures), else
|
||||
/// from [sampleNames] (initials).
|
||||
DanmakuItem sample(DanmakuKind kind, {bool own = false}) {
|
||||
final a = own ? selfAvatarInfo() : _sampleSender();
|
||||
final who = a.name;
|
||||
final color = own ? a.color : colorForName(who);
|
||||
return switch (kind) {
|
||||
DanmakuKind.chat =>
|
||||
DanmakuItem(kind: kind, sender: who, senderColor: color, text: _pick(sampleChat), own: own, avatar: a),
|
||||
DanmakuKind.join => DanmakuItem(kind: kind, sender: who, senderColor: color, text: 'joined', avatar: a),
|
||||
DanmakuKind.leave => DanmakuItem(kind: kind, sender: who, senderColor: color, text: 'left', avatar: a),
|
||||
DanmakuKind.upNext => DanmakuItem(
|
||||
kind: kind, sender: who, senderColor: color, text: 'added ${_pick(sampleTitles)} to Up next', avatar: a),
|
||||
DanmakuKind.starting => const DanmakuItem(kind: DanmakuKind.starting, text: '▶ Starting now'),
|
||||
};
|
||||
}
|
||||
|
||||
/// [text] as this member's own chat line.
|
||||
DanmakuItem own(String text) {
|
||||
final a = selfAvatarInfo();
|
||||
return DanmakuItem(kind: DanmakuKind.chat, sender: a.name, senderColor: a.color, text: text, own: true, avatar: a);
|
||||
}
|
||||
|
||||
AvatarInfo _sampleSender() {
|
||||
final c = coord;
|
||||
final r = c?.serverState.peek();
|
||||
final others = [
|
||||
if (c != null && r != null)
|
||||
for (final m in r.members)
|
||||
if (m.id != c.connection.memberId) memberAvatarInfo(m, r, c),
|
||||
];
|
||||
// The party's real ones half the time, so initials show up too.
|
||||
if (others.isNotEmpty && _rng.nextBool()) return _pick(others);
|
||||
final name = _pick(sampleNames);
|
||||
return AvatarInfo(name: name, color: colorForName(name));
|
||||
}
|
||||
|
||||
/// What the random stream sends: mostly chat, some of it yours, now and
|
||||
/// then a notice.
|
||||
DanmakuItem randomSample() {
|
||||
final r = _rng.nextDouble();
|
||||
if (r < 0.70) return sample(DanmakuKind.chat);
|
||||
if (r < 0.80) return sample(DanmakuKind.chat, own: true);
|
||||
if (r < 0.88) return sample(DanmakuKind.join);
|
||||
if (r < 0.94) return sample(DanmakuKind.leave);
|
||||
return sample(DanmakuKind.upNext);
|
||||
}
|
||||
|
||||
/// A toast of this session as a line: chat (name, then the message),
|
||||
/// joins, leaves, Up next adds; the rest (problems) stay toasts.
|
||||
DanmakuItem? fromToast(ToastItem t, {String? selfName}) {
|
||||
final who = t.actor;
|
||||
if (who == null || who.isEmpty) {
|
||||
return t.text.toLowerCase().startsWith('starting')
|
||||
? DanmakuItem(kind: DanmakuKind.starting, text: '▶ ${t.text}')
|
||||
: null;
|
||||
}
|
||||
final color = colorForName(who);
|
||||
final c = coord;
|
||||
final avatar = c == null ? AvatarInfo(name: who, color: color) : avatarForName(who, c, t.actorId);
|
||||
if (t.chat && t.text.startsWith('$who: ')) {
|
||||
return DanmakuItem(
|
||||
kind: DanmakuKind.chat,
|
||||
sender: who,
|
||||
senderColor: color,
|
||||
text: t.text.substring(who.length + 2),
|
||||
own: who == selfName,
|
||||
avatar: avatar);
|
||||
}
|
||||
final rest = t.text.startsWith('$who ') ? t.text.substring(who.length + 1) : t.text;
|
||||
final kind = rest.startsWith('joined')
|
||||
? DanmakuKind.join
|
||||
: rest.startsWith('left')
|
||||
? DanmakuKind.leave
|
||||
: rest.startsWith('added')
|
||||
? DanmakuKind.upNext
|
||||
: null;
|
||||
if (kind == null) return null;
|
||||
return DanmakuItem(kind: kind, sender: who, senderColor: color, text: rest, avatar: avatar);
|
||||
}
|
||||
|
||||
/// Follows [toasts] while [live] is on; returns the stop.
|
||||
void Function() watchToasts(ReadonlySignal<List<ToastItem>> toasts, {String? selfName}) {
|
||||
var seen = {for (final t in toasts.peek()) t.id};
|
||||
return effect(() {
|
||||
final items = toasts.value;
|
||||
final on = live.value;
|
||||
untracked(() {
|
||||
for (final t in items) {
|
||||
if (!seen.add(t.id) || !on) continue;
|
||||
final line = fromToast(t, selfName: selfName);
|
||||
if (line != null) controller.add(line);
|
||||
}
|
||||
seen = {for (final t in items) t.id};
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
T _pick<T>(List<T> from) => from[_rng.nextInt(from.length)];
|
||||
|
||||
static const sampleNames = ['Alice', 'Bob', 'Chiyo', '小雪', 'Kenji', 'Mara'];
|
||||
static const sampleTitles = ['Frieren · 12', 'Bocchi the Rock! · 5', 'Dungeon Meshi · 20', 'Mob Psycho 100 · 3'];
|
||||
static const sampleChat = [
|
||||
'lol',
|
||||
'www',
|
||||
'草',
|
||||
'8888888',
|
||||
'NICE',
|
||||
'it\'s so over',
|
||||
'she\'s back!!',
|
||||
'wait, who is that?',
|
||||
'op skip pls 🙏',
|
||||
'the animation in this scene is insane',
|
||||
'I can\'t believe they actually adapted this arc, the manga panel looked exactly like this, chills honestly',
|
||||
'brb getting snacks, don\'t wait for me (actually do wait)',
|
||||
'前方高能预警！！！',
|
||||
'このシーン最高すぎる',
|
||||
'神回確定',
|
||||
'画质好清晰啊',
|
||||
'🔥🔥🔥',
|
||||
'😭😭 my heart',
|
||||
'🎉 finally',
|
||||
'Himmel would have done the same 🥲',
|
||||
];
|
||||
}
|
||||
|
||||
/// The danmaku with this preview's style and mock subtitles over a
|
||||
/// picture; lets clicks through.
|
||||
class DanmakuPreviewLayers extends StatelessWidget {
|
||||
final DanmakuPreview preview;
|
||||
const DanmakuPreviewLayers({super.key, required this.preview});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final accent = Theme.of(context).colorScheme.primary;
|
||||
return SignalBuilder(
|
||||
builder: (context) => Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
MockSubtitles(top: preview.mockTop.value, bottom: preview.mockBottom.value),
|
||||
DanmakuLayer(controller: preview.controller, style: preview.style.value, accent: accent),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Stand-ins for subtitles where real ones sit: an ASS sign at the top
|
||||
/// (`\an8`, yellow serif) and two lines of dialogue at the bottom.
|
||||
class MockSubtitles extends StatelessWidget {
|
||||
final bool top;
|
||||
final bool bottom;
|
||||
const MockSubtitles({super.key, required this.top, required this.bottom});
|
||||
|
||||
static Widget _outlined(String text, TextStyle style, double outline) => Stack(
|
||||
children: [
|
||||
Text(text,
|
||||
textAlign: TextAlign.center,
|
||||
style: style.copyWith(
|
||||
color: null,
|
||||
foreground: Paint()
|
||||
..style = PaintingStyle.stroke
|
||||
..strokeWidth = outline
|
||||
..strokeJoin = StrokeJoin.round
|
||||
..color = const Color(0xFF1A1206),
|
||||
)),
|
||||
Text(text, textAlign: TextAlign.center, style: style),
|
||||
],
|
||||
);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (!top && !bottom) return const SizedBox.shrink();
|
||||
return IgnorePointer(
|
||||
child: LayoutBuilder(builder: (context, box) {
|
||||
final h = box.maxHeight;
|
||||
final dialogue = (h * 0.05).clamp(12.0, 52.0);
|
||||
return Stack(
|
||||
children: [
|
||||
if (top)
|
||||
Positioned(
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: h * 0.035,
|
||||
child: Center(
|
||||
child: _outlined(
|
||||
'TOP SIGN · 第3新東京市',
|
||||
TextStyle(
|
||||
fontSize: dialogue * 0.85,
|
||||
fontWeight: FontWeight.w800,
|
||||
color: const Color(0xFFFFE14D),
|
||||
),
|
||||
dialogue * 0.14,
|
||||
),
|
||||
),
|
||||
),
|
||||
if (bottom)
|
||||
Positioned(
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: h * 0.05,
|
||||
child: Center(
|
||||
child: _outlined(
|
||||
'I told you the controls would cover this line.\nThey never do now — or do they?',
|
||||
TextStyle(fontSize: dialogue, height: 1.15, color: Colors.white, fontWeight: FontWeight.w500),
|
||||
dialogue * 0.12,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// A moving picture for the preview when nothing is loaded: slow colour
|
||||
/// fields drifting over a dusk gradient, so motion and contrast behind
|
||||
/// the lines are realistic.
|
||||
class DanmakuStandIn extends StatefulWidget {
|
||||
const DanmakuStandIn({super.key});
|
||||
|
||||
@override
|
||||
State<DanmakuStandIn> createState() => _DanmakuStandInState();
|
||||
}
|
||||
|
||||
class _DanmakuStandInState extends State<DanmakuStandIn> with SingleTickerProviderStateMixin {
|
||||
late final AnimationController _clock =
|
||||
AnimationController(vsync: this, duration: const Duration(seconds: 60))..repeat();
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_clock.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => RepaintBoundary(
|
||||
child: CustomPaint(painter: _StandInPainter(_clock), child: const SizedBox.expand()),
|
||||
);
|
||||
}
|
||||
|
||||
class _StandInPainter extends CustomPainter {
|
||||
final Animation<double> clock;
|
||||
_StandInPainter(this.clock) : super(repaint: clock);
|
||||
|
||||
static const _blobs = [
|
||||
(Color(0xFFFF7A59), 0.9, 0.0, 0.42),
|
||||
(Color(0xFF7C5CFF), 1.3, 1.7, 0.5),
|
||||
(Color(0xFF2EC5CE), 0.7, 3.1, 0.38),
|
||||
(Color(0xFFFFC857), 1.1, 4.4, 0.3),
|
||||
(Color(0xFFE85D9E), 0.5, 5.2, 0.45),
|
||||
];
|
||||
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
final rect = Offset.zero & size;
|
||||
canvas.drawRect(
|
||||
rect,
|
||||
Paint()
|
||||
..shader = const LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [Color(0xFF0B1030), Color(0xFF2A1B4A), Color(0xFF5A2F4F), Color(0xFF14141C)],
|
||||
stops: [0, 0.45, 0.72, 1],
|
||||
).createShader(rect),
|
||||
);
|
||||
final t = clock.value * 2 * math.pi;
|
||||
final r = size.shortestSide;
|
||||
for (final (color, speed, phase, radius) in _blobs) {
|
||||
final c = Offset(
|
||||
size.width * (0.5 + 0.38 * math.sin(t * speed + phase)),
|
||||
size.height * (0.5 + 0.32 * math.cos(t * speed * 0.8 + phase * 1.3)),
|
||||
);
|
||||
canvas.drawCircle(
|
||||
c,
|
||||
r * radius,
|
||||
Paint()
|
||||
..shader = RadialGradient(colors: [color.withValues(alpha: 0.55), color.withValues(alpha: 0)])
|
||||
.createShader(Rect.fromCircle(center: c, radius: r * radius)),
|
||||
);
|
||||
}
|
||||
// A bright horizon line and some stars: hard edges behind the text.
|
||||
final horizon = size.height * 0.68;
|
||||
canvas.drawRect(
|
||||
Rect.fromLTWH(0, horizon, size.width, size.height - horizon),
|
||||
Paint()..color = const Color(0xCC0D0D14),
|
||||
);
|
||||
canvas.drawLine(Offset(0, horizon), Offset(size.width, horizon),
|
||||
Paint()
|
||||
..color = const Color(0x88FFD7A8)
|
||||
..strokeWidth = 1.5);
|
||||
final stars = math.Random(7);
|
||||
for (var i = 0; i < 90; i++) {
|
||||
final x = stars.nextDouble() * size.width;
|
||||
final y = stars.nextDouble() * horizon;
|
||||
final twinkle = 0.4 + 0.6 * (0.5 + 0.5 * math.sin(t * 8 + i));
|
||||
canvas.drawCircle(Offset(x, y), 0.6 + stars.nextDouble() * 1.2,
|
||||
Paint()..color = Colors.white.withValues(alpha: 0.5 * twinkle));
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRepaint(_StandInPainter old) => false;
|
||||
}
|
||||
|
||||
/// The preview's knobs on the app's glass: fire samples, the random
|
||||
/// stream, the look, mock subtitles. [onClose] ends the preview; it
|
||||
/// collapses to its title bar.
|
||||
class DanmakuPanel extends StatefulWidget {
|
||||
final DanmakuPreview preview;
|
||||
final VoidCallback onClose;
|
||||
|
||||
/// In a session: offer this session's own toasts as a source.
|
||||
final bool session;
|
||||
const DanmakuPanel({super.key, required this.preview, required this.onClose, this.session = false});
|
||||
|
||||
@override
|
||||
State<DanmakuPanel> createState() => _DanmakuPanelState();
|
||||
}
|
||||
|
||||
class _DanmakuPanelState extends State<DanmakuPanel> {
|
||||
bool _open = true;
|
||||
|
||||
DanmakuPreview get p => widget.preview;
|
||||
|
||||
void _style(DanmakuStyle Function(DanmakuStyle s) f) => p.style.value = f(p.style.peek());
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final muted = Colors.white.withValues(alpha: 0.6);
|
||||
return ExcludeFocus(
|
||||
child: AppGlass(
|
||||
child: SizedBox(
|
||||
width: 300,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(14, 8, 6, 4),
|
||||
child: Row(
|
||||
children: [
|
||||
const Expanded(
|
||||
child: Text('Danmaku preview', style: TextStyle(fontWeight: FontWeight.w600, fontSize: 14)),
|
||||
),
|
||||
_Counts(controller: p.controller),
|
||||
IconButton(
|
||||
tooltip: _open ? 'Collapse' : 'Expand',
|
||||
visualDensity: VisualDensity.compact,
|
||||
iconSize: 18,
|
||||
onPressed: () => setState(() => _open = !_open),
|
||||
icon: AnimatedRotation(
|
||||
turns: _open ? 0 : 0.5,
|
||||
duration: easeTime,
|
||||
curve: ease,
|
||||
child: const Icon(Icons.expand_less),
|
||||
),
|
||||
),
|
||||
IconButton(
|
||||
tooltip: 'Close the preview',
|
||||
visualDensity: VisualDensity.compact,
|
||||
iconSize: 18,
|
||||
onPressed: widget.onClose,
|
||||
icon: const Icon(Icons.close),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
AnimatedSize(
|
||||
duration: easeTime,
|
||||
curve: ease,
|
||||
alignment: Alignment.topCenter,
|
||||
child: !_open
|
||||
? const SizedBox(width: double.infinity)
|
||||
: ConstrainedBox(
|
||||
constraints: BoxConstraints(maxHeight: MediaQuery.sizeOf(context).height * 0.7),
|
||||
child: SingleChildScrollView(
|
||||
padding: const EdgeInsets.fromLTRB(14, 0, 14, 12),
|
||||
child: SignalBuilder(builder: (context) => _body(muted)),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _body(Color muted) {
|
||||
final s = p.style.value;
|
||||
Widget fire(IconData icon, String label, DanmakuItem Function() item) => MinimalButton(
|
||||
icon: icon,
|
||||
label: label,
|
||||
tooltip: '',
|
||||
scale: 0.8,
|
||||
onPressed: () => p.controller.add(item()),
|
||||
);
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
_Head('Send', muted),
|
||||
Wrap(
|
||||
spacing: 4,
|
||||
runSpacing: 4,
|
||||
children: [
|
||||
fire(Icons.chat_bubble_outline, 'Chat', () => p.sample(DanmakuKind.chat)),
|
||||
fire(Icons.person_outline, 'Mine', () => p.sample(DanmakuKind.chat, own: true)),
|
||||
fire(Icons.login, 'Join', () => p.sample(DanmakuKind.join)),
|
||||
fire(Icons.logout, 'Leave', () => p.sample(DanmakuKind.leave)),
|
||||
fire(Icons.playlist_add_rounded, 'Up next', () => p.sample(DanmakuKind.upNext)),
|
||||
fire(Icons.play_arrow_rounded, 'Starting', () => p.sample(DanmakuKind.starting)),
|
||||
fire(Icons.bolt, 'Burst ×12', () {
|
||||
for (var i = 0; i < 11; i++) {
|
||||
p.controller.add(p.randomSample());
|
||||
}
|
||||
return p.randomSample();
|
||||
}),
|
||||
MinimalButton(
|
||||
icon: Icons.clear_all,
|
||||
label: 'Clear',
|
||||
tooltip: '',
|
||||
scale: 0.8,
|
||||
onPressed: p.controller.clear,
|
||||
),
|
||||
],
|
||||
),
|
||||
_Toggle('Random stream', p.auto.value, (v) => p.auto.value = v),
|
||||
_Slider('Rate', p.autoRate.value, 5, 240, '${p.autoRate.value.round()}/min', (v) => p.autoRate.value = v,
|
||||
enabled: p.auto.value),
|
||||
if (widget.session) _Toggle("This session's chat and notices", p.live.value, (v) => p.live.value = v),
|
||||
_Head('Look', muted),
|
||||
_Slider('Crossing', s.crossSecs, 4, 16, '${s.crossSecs.toStringAsFixed(1)} s',
|
||||
(v) => _style((s) => s.copyWith(crossSecs: v))),
|
||||
_Slider('At most', s.maxOnScreen.toDouble(), 1, 40, '${s.maxOnScreen} lines',
|
||||
(v) => _style((s) => s.copyWith(maxOnScreen: v.round()))),
|
||||
_Range('Lanes', s.bandTop, s.bandBottom, '${(s.bandTop * 100).round()}–${(s.bandBottom * 100).round()} %',
|
||||
(a, b) => _style((s) => s.copyWith(bandTop: a, bandBottom: b))),
|
||||
_Slider('Opacity', s.opacity, 0.3, 1, '${(s.opacity * 100).round()} %',
|
||||
(v) => _style((s) => s.copyWith(opacity: v))),
|
||||
_Slider('Size', s.size, 0.6, 1.8, '×${s.size.toStringAsFixed(2)}', (v) => _style((s) => s.copyWith(size: v))),
|
||||
_Slider('Outline', s.outline, 0, 4, '${s.outline.toStringAsFixed(1)} px',
|
||||
(v) => _style((s) => s.copyWith(outline: v))),
|
||||
_Toggle('Avatars', s.avatars, (v) => _style((s) => s.copyWith(avatars: v))),
|
||||
_Toggle('Frame my own lines', s.highlightOwn, (v) => _style((s) => s.copyWith(highlightOwn: v))),
|
||||
_Head('Subtitles (mock)', muted),
|
||||
_Toggle('Top sign', p.mockTop.value, (v) => p.mockTop.value = v),
|
||||
_Toggle('Bottom dialogue', p.mockBottom.value, (v) => p.mockBottom.value = v),
|
||||
if (!widget.session) _Toggle('Control bar', p.controlsBand.value, (v) => p.controlsBand.value = v),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _Counts extends StatelessWidget {
|
||||
final DanmakuController controller;
|
||||
const _Counts({required this.controller});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => ListenableBuilder(
|
||||
listenable: Listenable.merge([controller.onScreen, controller.waiting]),
|
||||
builder: (context, _) => Tooltip(
|
||||
message: 'Flying · waiting for a lane',
|
||||
child: Text(
|
||||
'${controller.onScreen.value} · ${controller.waiting.value}',
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: Colors.white.withValues(alpha: 0.6),
|
||||
fontFeatures: const [FontFeature.tabularFigures()],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class _Head extends StatelessWidget {
|
||||
final String text;
|
||||
final Color color;
|
||||
const _Head(this.text, this.color);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => Padding(
|
||||
padding: const EdgeInsets.only(top: 10, bottom: 4),
|
||||
child: Text(text.toUpperCase(),
|
||||
style: TextStyle(fontSize: 11, letterSpacing: 0.8, fontWeight: FontWeight.w600, color: color)),
|
||||
);
|
||||
}
|
||||
|
||||
class _Toggle extends StatelessWidget {
|
||||
final String label;
|
||||
final bool value;
|
||||
final ValueChanged<bool> onChanged;
|
||||
const _Toggle(this.label, this.value, this.onChanged);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => SizedBox(
|
||||
height: 34,
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(child: Text(label, style: const TextStyle(fontSize: 13))),
|
||||
Transform.scale(scale: 0.75, alignment: Alignment.centerRight, child: Switch(value: value, onChanged: onChanged)),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class _Slider extends StatelessWidget {
|
||||
final String label;
|
||||
final double value, min, max;
|
||||
final String readout;
|
||||
final ValueChanged<double> onChanged;
|
||||
final bool enabled;
|
||||
const _Slider(this.label, this.value, this.min, this.max, this.readout, this.onChanged, {this.enabled = true});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => _SliderFrame(
|
||||
label: label,
|
||||
readout: readout,
|
||||
child: Slider(value: value.clamp(min, max), min: min, max: max, onChanged: enabled ? onChanged : null),
|
||||
);
|
||||
}
|
||||
|
||||
class _Range extends StatelessWidget {
|
||||
final String label;
|
||||
final double a, b;
|
||||
final String readout;
|
||||
final void Function(double a, double b) onChanged;
|
||||
const _Range(this.label, this.a, this.b, this.readout, this.onChanged);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => _SliderFrame(
|
||||
label: label,
|
||||
readout: readout,
|
||||
child: RangeSlider(
|
||||
values: RangeValues(a, b),
|
||||
max: 0.9,
|
||||
onChanged: (v) {
|
||||
if (v.end - v.start >= 0.05) onChanged(v.start, v.end);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class _SliderFrame extends StatelessWidget {
|
||||
final String label;
|
||||
final String readout;
|
||||
final Widget child;
|
||||
const _SliderFrame({required this.label, required this.readout, required this.child});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => SizedBox(
|
||||
height: 34,
|
||||
child: Row(
|
||||
children: [
|
||||
SizedBox(width: 64, child: Text(label, style: const TextStyle(fontSize: 13))),
|
||||
Expanded(
|
||||
child: SliderTheme(
|
||||
data: SliderTheme.of(context).copyWith(
|
||||
trackHeight: 3,
|
||||
overlayShape: SliderComponentShape.noOverlay,
|
||||
thumbShape: const RoundSliderThumbShape(enabledThumbRadius: 6),
|
||||
rangeThumbShape: const RoundRangeSliderThumbShape(enabledThumbRadius: 6),
|
||||
),
|
||||
child: child,
|
||||
),
|
||||
),
|
||||
SizedBox(
|
||||
width: 76,
|
||||
child: Text(
|
||||
readout,
|
||||
textAlign: TextAlign.right,
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: Colors.white.withValues(alpha: 0.7),
|
||||
fontFeatures: const [FontFeature.tabularFigures()],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// The preview without a session player: the stand-in picture, a mock
|
||||
/// control bar of the skin in use, the lines and the panel, over the
|
||||
/// whole window (Esc or × closes it).
|
||||
Future<void> showDanmakuPreviewPage(BuildContext context, DanmakuPreview preview) => showGeneralDialog<void>(
|
||||
context: context,
|
||||
barrierDismissible: false,
|
||||
barrierLabel: 'Danmaku preview',
|
||||
barrierColor: Colors.black,
|
||||
transitionDuration: easeTime,
|
||||
pageBuilder: (context, _, _) => DanmakuPreviewPage(preview: preview),
|
||||
transitionBuilder: (context, anim, _, child) => FadeTransition(
|
||||
opacity: CurvedAnimation(parent: anim, curve: ease, reverseCurve: Curves.easeIn),
|
||||
child: child,
|
||||
),
|
||||
);
|
||||
|
||||
class DanmakuPreviewPage extends StatelessWidget {
|
||||
final DanmakuPreview preview;
|
||||
const DanmakuPreviewPage({super.key, required this.preview});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Material(
|
||||
color: Colors.black,
|
||||
child: Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
const DanmakuStandIn(),
|
||||
DanmakuPreviewLayers(preview: preview),
|
||||
SignalBuilder(builder: (context) {
|
||||
if (!preview.controlsBand.value) return const SizedBox.shrink();
|
||||
final s = AppScope.of(context).coordinator.settings;
|
||||
final h = controlsBottomHeight(s.controlsSkin.value, s.controlsSize.value);
|
||||
return Align(
|
||||
alignment: Alignment.bottomCenter,
|
||||
child: IgnorePointer(
|
||||
child: Container(
|
||||
height: h,
|
||||
decoration: const BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [Color(0x00000000), MinimalStyle.band],
|
||||
),
|
||||
border: Border(top: BorderSide(color: AppMenuStyle.border, width: 0.5)),
|
||||
),
|
||||
alignment: Alignment.center,
|
||||
child: Text('control bar', style: TextStyle(color: Colors.white.withValues(alpha: 0.35), fontSize: 12)),
|
||||
),
|
||||
),
|
||||
);
|
||||
}),
|
||||
Positioned(
|
||||
left: 16,
|
||||
top: 14,
|
||||
child: Text('Stand-in picture: load something to preview on the real player',
|
||||
style: TextStyle(color: Colors.white.withValues(alpha: 0.55), fontSize: 12)),
|
||||
),
|
||||
Positioned(
|
||||
right: 16,
|
||||
top: 16,
|
||||
child: DanmakuPanel(preview: preview, onClose: () => Navigator.of(context).pop()),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// The panel over the session player; while mounted, this session's
|
||||
/// toasts reach the preview when its "chat and notices" switch is on.
|
||||
class DanmakuSessionPanel extends StatefulWidget {
|
||||
final DanmakuPreview preview;
|
||||
final SessionCoordinator coord;
|
||||
const DanmakuSessionPanel({super.key, required this.preview, required this.coord});
|
||||
|
||||
@override
|
||||
State<DanmakuSessionPanel> createState() => _DanmakuSessionPanelState();
|
||||
}
|
||||
|
||||
class _DanmakuSessionPanelState extends State<DanmakuSessionPanel> {
|
||||
late final void Function() _stop = widget.preview.watchToasts(widget.coord.toasts);
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
widget.preview.coord = widget.coord;
|
||||
_stop;
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_stop();
|
||||
widget.preview.coord = null;
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => DanmakuPanel(
|
||||
preview: widget.preview,
|
||||
session: true,
|
||||
onClose: () => widget.preview.active.value = false,
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user