init

lib/imgproxy.dart

@@ -0,0 +1,66 @@
+import 'dart:convert';
+import 'package:convert/convert.dart';
+import 'package:crypto/crypto.dart';
+import 'package:flutter/widgets.dart';
+
+class ImgProxySettings {
+  final String url;
+  final String key;
+  final String salt;
+
+  ImgProxySettings({required this.url, required this.key, required this.salt});
+
+  static ImgProxySettings static() {
+    return ImgProxySettings(
+        url: "https://imgproxy.v0l.io",
+        key:
+            "a82fcf26aa0ccb55dfc6b4bd6a1c90744d3be0f38429f21a8828b43449ce7cebe6bdc2b09a827311bef37b18ce35cb1e6b1c60387a254541afa9e5b4264ae942",
+        salt:
+            "a897770d9abf163de055e9617891214e75a9016d748f8ef865e6ffbcb9ed932295659549773a22a019a5f06d0b440c320be411e3fddfe784e199e4f03d74bd9b");
+  }
+}
+
+String urlSafe(String s) {
+  return s.replaceAll('=', '').replaceAll('+', '-').replaceAll('/', '_');
+}
+
+String signUrl(String u, ImgProxySettings settings) {
+  final keyBytes = hex.decode(settings.key);
+  final saltBytes = hex.decode(settings.salt);
+  final uBytes = utf8.encode(u);
+
+  final hmac = Hmac(sha256, keyBytes);
+  final result = hmac.convert(saltBytes + uBytes);
+
+  return urlSafe(base64.encode(result.bytes));
+}
+
+String proxyImg(BuildContext context, String url,
+    {ImgProxySettings? settings, int? resize, String? sha256, double? dpr}) {
+  final s = settings ?? ImgProxySettings.static();
+
+  if (url.startsWith("data:") || url.startsWith("blob:") || url.isEmpty) {
+    return url;
+  }
+
+  final opts = <String>[];
+
+  if (sha256 != null) {
+    opts.add('hs:sha256:$sha256');
+  }
+
+  if (resize != null) {
+    opts.add('rs:fit:$resize:$resize');
+  }
+
+  final q = MediaQuery.of(context);
+  opts.add('dpr:${q.devicePixelRatio}');
+
+  final urlBytes = utf8.encode(url);
+  final urlEncoded = urlSafe(base64.encode(urlBytes));
+
+  final path = '/${opts.join("/")}/$urlEncoded';
+  final sig = signUrl(path, s);
+
+  return '${s.url}/$sig$path';
+}

lib/login.dart

@@ -0,0 +1,71 @@
+import 'dart:convert';
+
+import 'package:flutter/widgets.dart';
+import 'package:flutter_secure_storage/flutter_secure_storage.dart';
+import 'package:ndk/domain_layer/entities/account.dart';
+import 'package:ndk/shared/nips/nip01/bip340.dart';
+import 'package:ndk/shared/nips/nip19/nip19.dart';
+
+class Account {
+  final AccountType type;
+  final String pubkey;
+  final String? privateKey;
+
+  Account._({required this.type, required this.pubkey, this.privateKey});
+
+  static Account nip19(String key) {
+    final keyData = Nip19.decode(key);
+    final pubkey =
+        Nip19.isKey("nsec", key) ? Bip340.getPublicKey(keyData) : keyData;
+    final privateKey = Nip19.isKey("npub", key) ? null : keyData;
+    return Account._(
+        type: AccountType.privateKey, pubkey: pubkey, privateKey: privateKey);
+  }
+
+  static Account privateKeyHex(String key) {
+    return Account._(
+        type: AccountType.privateKey,
+        privateKey: key,
+        pubkey: Bip340.getPublicKey(key));
+  }
+
+  static Account externalPublicKeyHex(String key) {
+    return Account._(type: AccountType.externalSigner, pubkey: key);
+  }
+
+  static Map<String, dynamic> toJson(Account? acc) => {
+        "type": acc?.type.name,
+        "pubKey": acc?.pubkey,
+        "privateKey": acc?.privateKey
+      };
+
+  static Account? fromJson(Map<String, dynamic> json) {
+    if (json.length > 2 && json.containsKey("pubKey")) {
+      return Account._(
+          type: AccountType.values
+              .firstWhere((v) => v.toString().endsWith(json["type"] as String)),
+          pubkey: json["pubKey"],
+          privateKey: json["privateKey"]);
+    }
+    return null;
+  }
+}
+
+class LoginData extends ValueNotifier<Account?> {
+  final _storage = FlutterSecureStorage();
+  static const String _storageKey = "accounts";
+
+  LoginData() : super(null) {
+    super.addListener(() async {
+      final data = json.encode(Account.toJson(value));
+      await _storage.write(key: _storageKey, value: data);
+    });
+  }
+
+  Future<void> load() async {
+    final acc = await _storage.read(key: _storageKey);
+    if (acc != null) {
+      super.value = Account.fromJson(json.decode(acc));
+    }
+  }
+}

lib/main.dart

@@ -0,0 +1,105 @@
+import 'package:amberflutter/amberflutter.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:ndk/ndk.dart';
+import 'package:ndk_amber/ndk_amber.dart';
+import 'package:ndk_objectbox/ndk_objectbox.dart';
+import 'package:ndk_rust_verifier/ndk_rust_verifier.dart';
+import 'package:zap_stream_flutter/pages/login.dart';
+import 'package:zap_stream_flutter/pages/stream.dart';
+import 'package:zap_stream_flutter/theme.dart';
+import 'package:zap_stream_flutter/utils.dart';
+
+import 'login.dart';
+import 'pages/home.dart';
+import 'pages/layout.dart';
+
+class NoVerify extends EventVerifier {
+  @override
+  Future<bool> verify(Nip01Event event) {
+    return Future.value(true);
+  }
+}
+
+final ndkCache = DbObjectBox();
+final eventVerifier = kDebugMode ? NoVerify() : RustEventVerifier();
+var ndk = Ndk(NdkConfig(eventVerifier: eventVerifier, cache: ndkCache));
+
+const userAgent = "zap.stream/1.0";
+const defaultRelays = [
+  "wss://nos.lol",
+  "wss://relay.damus.io",
+  "wss://relay.primal.net",
+];
+const searchRelays = ["wss://relay.nostr.band", "wss://search.nos.today"];
+
+final loginData = LoginData();
+
+Future<void> main() async {
+  WidgetsFlutterBinding.ensureInitialized();
+
+  // reload / cache login data
+  loginData.addListener(() {
+    if (loginData.value != null) {
+      if (!ndk.accounts.hasAccount(loginData.value!.pubkey)) {
+        switch (loginData.value!.type) {
+          case AccountType.privateKey:
+            ndk.accounts.loginPrivateKey(
+              pubkey: loginData.value!.pubkey,
+              privkey: loginData.value!.privateKey!,
+            );
+          case AccountType.externalSigner:
+            ndk.accounts.loginExternalSigner(
+              signer: AmberEventSigner(
+                publicKey: loginData.value!.pubkey,
+                amberFlutterDS: AmberFlutterDS(Amberflutter()),
+              ),
+            );
+          case AccountType.publicKey:
+            ndk.accounts.loginPublicKey(pubkey: loginData.value!.pubkey);
+        }
+      }
+      ndk.metadata.loadMetadata(loginData.value!.pubkey);
+      ndk.follows.getContactList(loginData.value!.pubkey);
+    }
+  });
+
+  await loginData.load();
+
+  runApp(
+    MaterialApp.router(
+      theme: ThemeData.localize(
+        ThemeData(colorScheme: ColorScheme.dark(), highlightColor: PRIMARY_1),
+        TextTheme(),
+      ),
+      routerConfig: GoRouter(
+        routes: [
+          StatefulShellRoute.indexedStack(
+            builder:
+                (context, state, navigationShell) =>
+                    SafeArea(child: LayoutScreen(navigationShell)),
+            branches: [
+              StatefulShellBranch(
+                routes: [
+                  GoRoute(path: "/", builder: (ctx, state) => HomePage()),
+                  GoRoute(path: "/login", builder: (ctx, state) => LoginPage()),
+                  GoRoute(
+                    path: "/e/:id",
+                    builder: (ctx, state) {
+                      if (state.extra is StreamEvent) {
+                        return StreamPage(stream: state.extra as StreamEvent);
+                      } else {
+                        throw UnimplementedError();
+                      }
+                    },
+                  ),
+                ],
+              ),
+            ],
+          ),
+        ],
+      ),
+    ),
+  );
+}

lib/pages/home.dart

@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+import 'package:ndk/ndk.dart';
+import 'package:zap_stream_flutter/rx_filter.dart';
+import 'package:zap_stream_flutter/widgets/header.dart';
+import 'package:zap_stream_flutter/widgets/stream_grid.dart';
+
+class HomePage extends StatelessWidget {
+  const HomePage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return SingleChildScrollView(
+      child: Container(
+        margin: EdgeInsets.all(5.0),
+        child: Column(
+          children: [
+            HeaderWidget(),
+            RxFilter<Nip01Event>(
+              filter: Filter(kinds: [30_311], limit: 10),
+              builder: (ctx, state) {
+                if (state == null) {
+                  return SizedBox.shrink();
+                } else {
+                  return StreamGrid(events: state);
+                }
+              },
+            ),
+            //other stuff..
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/pages/layout.dart

@@ -0,0 +1,16 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+
+class LayoutScreen extends StatelessWidget {
+  final StatefulNavigationShell navigationShell;
+
+  const LayoutScreen(this.navigationShell, {super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: navigationShell,
+      backgroundColor: Colors.black,
+    );
+  }
+}

lib/pages/login.dart

@@ -0,0 +1,58 @@
+import 'package:amberflutter/amberflutter.dart';
+import 'package:flutter/widgets.dart';
+import 'package:go_router/go_router.dart';
+import 'package:ndk/shared/nips/nip19/nip19.dart';
+import 'package:zap_stream_flutter/login.dart';
+import 'package:zap_stream_flutter/main.dart';
+import 'package:zap_stream_flutter/theme.dart';
+import 'package:zap_stream_flutter/widgets/button.dart';
+
+class LoginPage extends StatefulWidget {
+  @override
+  State<StatefulWidget> createState() => _LoginPage();
+}
+
+class _LoginPage extends State<LoginPage> {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: EdgeInsets.only(top: 50),
+      child: Column(
+        spacing: 10,
+        children: [
+          Image.asset("assets/logo.png", height: 150),
+          FutureBuilder(
+            future: Amberflutter().isAppInstalled(),
+            builder: (ctx, state) {
+              if (state.data ?? false) {
+                return BasicButton.text(
+                  "Login with Amber",
+                  onTap: () async {
+                    final amber = Amberflutter();
+                    final result = await amber.getPublicKey();
+                    if (result['signature'] != null) {
+                      final key = Nip19.decode(result['signature']);
+                      loginData.value = Account.externalPublicKeyHex(key);
+                      ctx.go("/");
+                    }
+                  },
+                );
+              } else {
+                return SizedBox.shrink();
+              }
+            },
+          ),
+          BasicButton.text("Login with Key"),
+          Container(
+            margin: EdgeInsets.symmetric(vertical: 20),
+            height: 1,
+            decoration: BoxDecoration(
+              border: Border(bottom: BorderSide(color: LAYER_1)),
+            ),
+          ),
+          Text("Create Account"),
+        ],
+      ),
+    );
+  }
+}

lib/pages/stream.dart

@@ -0,0 +1,92 @@
+import 'package:flutter/widgets.dart';
+import 'package:video_player/video_player.dart';
+import 'package:wakelock_plus/wakelock_plus.dart';
+import 'package:zap_stream_flutter/main.dart';
+import 'package:zap_stream_flutter/theme.dart';
+import 'package:zap_stream_flutter/utils.dart';
+import 'package:zap_stream_flutter/widgets/chat.dart';
+import 'package:zap_stream_flutter/widgets/pill.dart';
+import 'package:zap_stream_flutter/widgets/profile.dart';
+
+class StreamPage extends StatefulWidget {
+  final StreamEvent stream;
+
+  const StreamPage({super.key, required this.stream});
+
+  @override
+  State<StatefulWidget> createState() => _StreamPage();
+}
+
+class _StreamPage extends State<StreamPage> {
+  VideoPlayerController? _controller;
+
+  @override
+  void initState() {
+    super.initState();
+
+    WakelockPlus.enable();
+    final url = widget.stream.info.stream;
+
+    if (url != null) {
+      if (_controller != null) {
+        _controller!.dispose();
+      }
+      _controller = VideoPlayerController.networkUrl(
+        Uri.parse(url),
+        httpHeaders: Map.from({"user-agent": userAgent}),
+      );
+      () async {
+        await _controller!.initialize();
+        await _controller!.play();
+        setState(() {
+          // nothing
+        });
+      }();
+    }
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+    WakelockPlus.disable();
+    if (_controller != null) {
+      _controller!.dispose();
+      _controller = null;
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      spacing: 4,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        AspectRatio(
+          aspectRatio: 16 / 9,
+          child:
+              _controller != null
+                  ? VideoPlayer(_controller!)
+                  : Container(color: LAYER_1),
+        ),
+        Text(
+          widget.stream.info.title ?? "",
+          style: TextStyle(fontWeight: FontWeight.w600, fontSize: 18),
+        ),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            ProfileWidget.pubkey(widget.stream.info.host),
+            PillWidget(
+              color: LAYER_1,
+              child: Text(
+                "${widget.stream.info.participants} viewers",
+                style: TextStyle(fontSize: 12, fontWeight: FontWeight.w500),
+              ),
+            ),
+          ],
+        ),
+        Expanded(child: ChatWidget(stream: widget.stream)),
+      ],
+    );
+  }
+}

lib/rx_filter.dart

@@ -0,0 +1,130 @@
+import 'dart:collection';
+import 'dart:developer' as developer;
+
+import 'package:flutter/widgets.dart';
+import 'package:ndk/ndk.dart';
+import 'package:rxdart/rxdart.dart';
+import 'package:zap_stream_flutter/main.dart';
+
+/// Reactive filter which builds the widget with a snapshot of the data
+class RxFilter<T> extends StatefulWidget {
+  final Filter filter;
+  final bool leaveOpen;
+  final Widget Function(BuildContext, List<T>?) builder;
+  final T Function(Nip01Event)? mapper;
+  final List<String>? relays;
+
+  const RxFilter({
+    super.key,
+    required this.filter,
+    required this.builder,
+    this.mapper,
+    this.leaveOpen = true,
+    this.relays,
+  });
+
+  @override
+  State<StatefulWidget> createState() => _RxFilter<T>();
+}
+
+class _RxFilter<T> extends State<RxFilter<T>> {
+  late NdkResponse _response;
+  HashMap<String, (int, T)>? _events;
+
+  @override
+  void initState() {
+    super.initState();
+    developer.log("RX:SEDNING ${widget.filter}");
+    _response = ndk.requests.subscription(
+      filters: [widget.filter],
+      cacheRead: true,
+      cacheWrite: true,
+      explicitRelays: widget.relays,
+    );
+    if (!widget.leaveOpen) {
+      _response.future.then((_) {
+        developer.log("RX:CLOSING ${widget.filter}");
+        ndk.requests.closeSubscription(_response.requestId);
+      });
+    }
+    _response.stream
+        .bufferTime(const Duration(milliseconds: 500))
+        .where((events) => events.isNotEmpty)
+        .handleError((e) {
+          developer.log("RX:ERROR $e");
+        })
+        .listen((events) {
+      setState(() {
+        _events ??= HashMap();
+        developer.log("RX:GOT ${events.length} events for ${widget.filter}");
+        events.forEach(_replaceInto);
+      });
+    });
+  }
+
+  void _replaceInto(Nip01Event ev) {
+    final evKey = _eventKey(ev);
+    final existing = _events?[evKey];
+    if (existing == null || existing.$1 < ev.createdAt) {
+      _events?[evKey] =
+          (ev.createdAt, widget.mapper != null ? widget.mapper!(ev) : ev as T);
+    }
+  }
+
+  String _eventKey(Nip01Event ev) {
+    if ([0, 3].contains(ev.kind) || (ev.kind >= 10000 && ev.kind < 20000)) {
+      return "${ev.kind}:${ev.pubKey}";
+    } else if (ev.kind >= 30000 && ev.kind < 40000) {
+      return "${ev.kind}:${ev.pubKey}:${ev.getDtag()}";
+    } else {
+      return ev.id;
+    }
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+
+    developer.log("RX:CLOSING ${widget.filter}");
+    ndk.requests.closeSubscription(_response.requestId);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return widget.builder(context,
+        _events?.values.map((v) => v.$2).toList());
+  }
+}
+
+/// An async filter loader into [RxFilter]
+class RxFutureFilter<T> extends StatelessWidget {
+  final Future<Filter> Function() filterBuilder;
+  final bool leaveOpen;
+  final Widget Function(BuildContext, List<T>?) builder;
+  final Widget? loadingWidget;
+  final T Function(Nip01Event)? mapper;
+
+  const RxFutureFilter({
+    super.key,
+    required this.filterBuilder,
+    required this.builder,
+    this.mapper,
+    this.leaveOpen = true,
+    this.loadingWidget,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return FutureBuilder<Filter>(
+      future: filterBuilder(),
+      builder: (ctx, data) {
+        if (data.hasData) {
+          return RxFilter<T>(
+              filter: data.data!, mapper: mapper, builder: builder);
+        } else {
+          return loadingWidget ?? SizedBox.shrink();
+        }
+      },
+    );
+  }
+}

lib/theme.dart

@@ -0,0 +1,17 @@
+// ignore_for_file: non_constant_identifier_names
+
+import 'package:flutter/widgets.dart';
+
+BorderRadius DEFAULT_BR = BorderRadius.all(Radius.circular(12));
+
+Color FONT_COLOR = Color.fromARGB(255, 255, 255, 255);
+Color LAYER_0 = Color.fromARGB(255, 10, 10, 10);
+Color LAYER_1 = Color.fromARGB(255, 23, 23, 23);
+Color LAYER_2 = Color.fromARGB(255, 34, 34, 34);
+Color LAYER_3 = Color.fromARGB(255, 50, 50, 50);
+Color LAYER_4 = Color.fromARGB(255, 121, 121, 121);
+
+Color PRIMARY_1 = Color.fromARGB(255, 248, 56, 217);
+Color SECONDARY_1 = Color.fromARGB(255, 52, 210, 254);
+Color NEUTRAL_500 = Color.fromARGB(255, 155, 155, 155);
+Color NEUTRAL_800 = Color.fromARGB(255, 32, 32, 32);

lib/utils.dart

@@ -0,0 +1,215 @@
+import 'package:collection/collection.dart';
+import 'package:ndk/ndk.dart';
+
+/// Container class over event and stream info
+class StreamEvent {
+  late final StreamInfo info;
+  final Nip01Event event;
+
+  /// Return the 'a' tag for this stream
+  String get aTag {
+    return "${event.kind}:${event.pubKey}:${info.id}";
+  }
+
+  StreamEvent(this.event) {
+    info = extractStreamInfo(event);
+  }
+}
+
+enum StreamStatus { live, ended, planned }
+
+/// Extracted tags from NIP-53 event
+class StreamInfo {
+  String? id;
+  String? title;
+  String? summary;
+  String? image;
+  String? thumbnail;
+  StreamStatus? status;
+  String? stream;
+  String? recording;
+  String? contentWarning;
+  List<String> tags;
+  String? goal;
+  int? participants;
+  int? starts;
+  int? ends;
+  String? service;
+  String host;
+  String? gameId;
+  GameInfo? gameInfo;
+  List<String> streams;
+
+  StreamInfo({
+    this.id,
+    this.title,
+    this.summary,
+    this.image,
+    this.thumbnail,
+    this.status,
+    this.stream,
+    this.recording,
+    this.contentWarning,
+    this.tags = const [],
+    this.goal,
+    this.participants,
+    this.starts,
+    this.ends,
+    this.service,
+    required this.host,
+    this.gameId,
+    this.gameInfo,
+    this.streams = const [],
+  });
+}
+
+class GameInfo {
+  String id;
+  String name;
+  List<String> genres;
+  String className;
+
+  GameInfo({
+    required this.id,
+    required this.name,
+    required this.genres,
+    required this.className,
+  });
+}
+
+final RegExp gameTagFormat = RegExp(
+  r'^[a-z-]+:[a-z0-9-]+$',
+  caseSensitive: false,
+);
+
+StreamInfo extractStreamInfo(Nip01Event ev) {
+  var ret = StreamInfo(host: getHost(ev));
+
+  void matchTag(List<String> tag, String k, void Function(String) into) {
+    if (tag[0] == k) {
+      into(tag[1]);
+    }
+  }
+
+  for (var t in ev.tags) {
+    matchTag(t, 'd', (v) => ret.id = v);
+    matchTag(t, 'title', (v) => ret.title = v);
+    matchTag(t, 'summary', (v) => ret.summary = v);
+    matchTag(t, 'image', (v) => ret.image = v);
+    matchTag(t, 'thumbnail', (v) => ret.thumbnail = v);
+    matchTag(
+      t,
+      'status',
+      (v) =>
+          ret.status = switch (v.toLowerCase()) {
+            'live' => StreamStatus.live,
+            'ended' => StreamStatus.ended,
+            'planned' => StreamStatus.planned,
+            _ => null,
+          },
+    );
+    if (t[0] == 'streaming') {
+      ret.streams = [...ret.streams, t[1]];
+    }
+    matchTag(t, 'recording', (v) => ret.recording = v);
+    matchTag(t, 'url', (v) => ret.recording = v);
+    matchTag(t, 'content-warning', (v) => ret.contentWarning = v);
+    matchTag(t, 'current_participants', (v) => ret.participants = int.tryParse(v));
+    matchTag(t, 'goal', (v) => ret.goal = v);
+    matchTag(t, 'starts', (v) => ret.starts = int.tryParse(v));
+    matchTag(t, 'ends', (v) => ret.ends = int.tryParse(v));
+    matchTag(t, 'service', (v) => ret.service = v);
+  }
+
+  var sortedTags = sortStreamTags(ev.tags);
+  ret.tags = sortedTags.regularTags;
+
+  var gameTag = extractGameTag(sortedTags.prefixedTags);
+  ret.gameId = gameTag.gameId;
+  ret.gameInfo = gameTag.gameInfo;
+
+  if (ret.streams.isNotEmpty) {
+    var isN94 = ret.streams.contains('nip94');
+    if (isN94) {
+      ret.stream = 'nip94';
+    } else {
+      ret.stream = ret.streams.firstWhereOrNull((a) => a.contains('.m3u8'));
+    }
+  }
+
+  return ret;
+}
+
+({List<String> regularTags, List<String> prefixedTags}) sortStreamTags(
+  List<dynamic> tags,
+) {
+  var plainTags =
+      tags
+          .where((a) => a is List<String> ? a[0] == 't' : true)
+          .map((a) => a is List<String> ? a[1] : a as String)
+          .toList();
+
+  var regularTags = plainTags.where((a) => !gameTagFormat.hasMatch(a)).toList();
+  var prefixedTags = plainTags.where((a) => !regularTags.contains(a)).toList();
+
+  return (regularTags: regularTags, prefixedTags: prefixedTags);
+}
+
+({GameInfo? gameInfo, String? gameId}) extractGameTag(List<String> tags) {
+  final gameId = tags.firstWhereOrNull((a) => gameTagFormat.hasMatch(a));
+
+  final internalGame = AllCategories.firstWhereOrNull(
+    (a) => gameId == 'internal:${a.id}',
+  );
+  if (internalGame != null) {
+    return (
+      gameInfo: GameInfo(
+        id: internalGame.id,
+        name: internalGame.name,
+        genres: internalGame.tags,
+        className: internalGame.className,
+      ),
+      gameId: gameId,
+    );
+  }
+
+  final lowerTags = tags.map((t) => t.toLowerCase());
+  final taggedCategory = AllCategories.firstWhereOrNull(
+    (a) => a.tags.any(lowerTags.contains),
+  );
+  if (taggedCategory != null) {
+    return (
+      gameInfo: GameInfo(
+        id: taggedCategory.id,
+        name: taggedCategory.name,
+        genres: taggedCategory.tags,
+        className: taggedCategory.className,
+      ),
+      gameId: gameId,
+    );
+  }
+  return (gameInfo: null, gameId: gameId);
+}
+
+String getHost(Nip01Event ev) {
+  return ev.tags.firstWhere(
+    (t) => t[0] == "p" && t[3] == "host",
+    orElse: () => ["p", ev.pubKey], // fake p tag with event pubkey
+  )[1];
+}
+
+class Category {
+  String id;
+  String name;
+  List<String> tags;
+  String className;
+
+  Category({
+    required this.id,
+    required this.name,
+    required this.tags,
+    required this.className,
+  });
+}
+
+List<Category> AllCategories = []; // Implement as needed

lib/widgets/avatar.dart

@@ -0,0 +1,40 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:ndk/ndk.dart';
+import 'package:zap_stream_flutter/imgproxy.dart';
+import 'package:zap_stream_flutter/widgets/profile.dart';
+
+class AvatarWidget extends StatelessWidget {
+  final double? size;
+  final Metadata profile;
+
+  const AvatarWidget({super.key, required this.profile, this.size});
+
+  static Widget pubkey(String pubkey, {double? size}) {
+    return ProfileLoaderWidget(pubkey, (ctx, data) {
+      return AvatarWidget(
+        profile: data.data ?? Metadata(pubKey: pubkey),
+        size: size,
+      );
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final thisSize = size ?? 40;
+    return ClipOval(
+      child: CachedNetworkImage(
+        fit: BoxFit.cover,
+        imageUrl: proxyImg(
+          context,
+          profile.picture ??
+              "https://nostr.api.v0l.io/api/v1/avatar/cyberpunks/${profile.pubKey}",
+          resize: thisSize.ceil(),
+        ),
+        height: thisSize,
+        width: thisSize,
+        errorWidget: (context, url, error) => Icon(Icons.error),
+      ),
+    );
+  }
+}

lib/widgets/button.dart

@@ -0,0 +1,61 @@
+import 'package:flutter/widgets.dart';
+import 'package:zap_stream_flutter/theme.dart';
+
+class BasicButton extends StatelessWidget {
+  final Widget? child;
+  final BoxDecoration? decoration;
+  final EdgeInsetsGeometry? padding;
+  final EdgeInsetsGeometry? margin;
+  final void Function()? onTap;
+
+  const BasicButton(
+    this.child, {
+    super.key,
+    this.decoration,
+    this.padding,
+    this.margin,
+    this.onTap,
+  });
+
+  static text(
+    String text, {
+    BoxDecoration? decoration,
+    EdgeInsetsGeometry? padding,
+    EdgeInsetsGeometry? margin,
+    void Function()? onTap,
+    double? fontSize,
+  }) {
+    return BasicButton(
+      Text(
+        text,
+        style: TextStyle(
+          color: Color.fromARGB(255, 255, 255, 255),
+          fontSize: fontSize,
+          fontWeight: FontWeight.bold,
+        ),
+      ),
+      decoration: decoration,
+      padding: padding ?? EdgeInsets.symmetric(vertical: 10),
+      margin: margin,
+      onTap: onTap,
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Container(
+        padding: padding,
+        margin: margin,
+        decoration:
+            decoration ??
+            BoxDecoration(
+              color: LAYER_2,
+              borderRadius: BorderRadius.all(Radius.circular(100)),
+            ),
+        child: Center(child: child),
+      ),
+    );
+  }
+}

lib/widgets/chat.dart

@@ -0,0 +1,146 @@
+import 'dart:developer' as developer;
+
+import 'package:collection/collection.dart';
+import 'package:flutter/material.dart';
+import 'package:ndk/ndk.dart';
+import 'package:zap_stream_flutter/main.dart';
+import 'package:zap_stream_flutter/rx_filter.dart';
+import 'package:zap_stream_flutter/theme.dart';
+import 'package:zap_stream_flutter/utils.dart';
+import 'package:zap_stream_flutter/widgets/avatar.dart';
+import 'package:zap_stream_flutter/widgets/profile.dart';
+
+class ChatWidget extends StatelessWidget {
+  final StreamEvent stream;
+
+  const ChatWidget({super.key, required this.stream});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Expanded(
+          child: SingleChildScrollView(
+            reverse: true,
+            child: RxFilter<Nip01Event>(
+              filter: Filter(kinds: [1311], limit: 200, aTags: [stream.aTag]),
+              builder: (ctx, state) {
+                return Column(
+                  spacing: 8,
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children:
+                      (state ?? [])
+                          .sortedBy((c) => c.createdAt)
+                          .map((c) => ChatMessageWidget(stream: stream, msg: c))
+                          .toList(),
+                );
+              },
+            ),
+          ),
+        ),
+        WriteMessageWidget(stream: stream),
+      ],
+    );
+  }
+}
+
+class ChatMessageWidget extends StatelessWidget {
+  final StreamEvent stream;
+  final Nip01Event msg;
+
+  const ChatMessageWidget({super.key, required this.stream, required this.msg});
+
+  @override
+  Widget build(BuildContext context) {
+    return ProfileLoaderWidget(msg.pubKey, (ctx, state) {
+      final profile = state.data ?? Metadata(pubKey: msg.pubKey);
+      return RichText(
+        text: TextSpan(
+          children: [
+            WidgetSpan(child: AvatarWidget(profile: profile, size: 20)),
+            TextSpan(text: " "),
+            TextSpan(
+              text: ProfileNameWidget.nameFromProfile(profile),
+              style: TextStyle(
+                color: msg.pubKey == stream.info.host ? PRIMARY_1 : SECONDARY_1,
+              ),
+            ),
+            TextSpan(text: " "),
+            TextSpan(text: msg.content, style: TextStyle(color: FONT_COLOR)),
+          ],
+        ),
+      );
+    });
+  }
+}
+
+class WriteMessageWidget extends StatefulWidget {
+  final StreamEvent stream;
+
+  const WriteMessageWidget({super.key, required this.stream});
+
+  @override
+  State<StatefulWidget> createState() => _WriteMessageWidget();
+}
+
+class _WriteMessageWidget extends State<WriteMessageWidget> {
+  final TextEditingController _controller = TextEditingController();
+
+  Future<void> _sendMessage() async {
+    final login = ndk.accounts.getLoggedAccount();
+    if (login == null) return;
+
+    final chatMsg = Nip01Event(
+      pubKey: login.pubkey,
+      kind: 1311,
+      content: _controller.text,
+      tags: [
+        ["a", widget.stream.aTag],
+      ],
+    );
+    developer.log(chatMsg.toString());
+    final res = ndk.broadcast.broadcast(nostrEvent: chatMsg);
+    await res.broadcastDoneFuture;
+    _controller.text = "";
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final isLogin = ndk.accounts.isLoggedIn;
+
+    return Container(
+      margin: EdgeInsets.fromLTRB(4, 8, 4, 0),
+      padding: EdgeInsets.symmetric(horizontal: 8),
+      decoration: BoxDecoration(color: LAYER_2, borderRadius: DEFAULT_BR),
+      child:
+          isLogin
+              ? Row(
+                children: [
+                  Expanded(
+                    child: TextField(
+                      controller: _controller,
+                      decoration: InputDecoration(
+                        labelText: "Write message",
+                        contentPadding: EdgeInsets.symmetric(vertical: 4),
+                        labelStyle: TextStyle(color: LAYER_4, fontSize: 14),
+                        border: InputBorder.none,
+                      ),
+                    ),
+                  ),
+                  IconButton(onPressed: () {}, icon: Icon(Icons.mood)),
+                  IconButton(
+                    onPressed: () {
+                      _sendMessage();
+                    },
+                    icon: Icon(Icons.send),
+                  ),
+                ],
+              )
+              : Container(
+                padding: EdgeInsets.symmetric(vertical: 12),
+                child: Row(children: [Text("Please login to send messages")]),
+              ),
+    );
+  }
+}

lib/widgets/header.dart

@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:go_router/go_router.dart';
+import 'package:zap_stream_flutter/main.dart';
+import 'package:zap_stream_flutter/theme.dart';
+import 'package:zap_stream_flutter/widgets/avatar.dart';
+
+class HeaderWidget extends StatefulWidget {
+  const HeaderWidget({super.key});
+
+  @override
+  State<StatefulWidget> createState() => _HeaderWidget();
+}
+
+class _HeaderWidget extends State<HeaderWidget> {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.symmetric(vertical: 12),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          SvgPicture.asset("assets/svg/logo.svg", height: 23),
+          LoginButtonWidget(),
+        ],
+      ),
+    );
+  }
+}
+
+class LoginButtonWidget extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    if (ndk.accounts.isLoggedIn) {
+      return AvatarWidget.pubkey(ndk.accounts.getPublicKey()!);
+    } else {
+      return GestureDetector(
+        onTap: () {
+          context.push("/login");
+        },
+        child: Container(
+          padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+          decoration: BoxDecoration(
+            border: Border.all(color: FONT_COLOR),
+            borderRadius: BorderRadius.all(Radius.circular(50)),
+          ),
+          child: Row(
+            spacing: 8,
+            children: [Text("Login"), Icon(Icons.login, size: 16)],
+          ),
+        ),
+      );
+    }
+  }
+}

lib/widgets/pill.dart

@@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+
+class PillWidget extends StatelessWidget {
+  final Widget child;
+  final Color? color;
+
+  const PillWidget({super.key, required this.child, required this.color});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.all(Radius.circular(8)),
+        color: color,
+      ),
+      child: child,
+    );
+  }
+}

lib/widgets/profile.dart

@@ -0,0 +1,83 @@
+import 'package:flutter/widgets.dart';
+import 'package:ndk/ndk.dart';
+import 'package:ndk/shared/nips/nip19/nip19.dart';
+import 'package:zap_stream_flutter/main.dart';
+import 'package:zap_stream_flutter/widgets/avatar.dart';
+
+class ProfileLoaderWidget extends StatelessWidget {
+  final String pubkey;
+  final AsyncWidgetBuilder<Metadata?> builder;
+
+  const ProfileLoaderWidget(this.pubkey, this.builder, {super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return FutureBuilder(
+      future: ndk.metadata.loadMetadata(pubkey),
+      builder: builder,
+    );
+  }
+}
+
+class ProfileNameWidget extends StatelessWidget {
+  final Metadata profile;
+  final TextStyle? style;
+
+  const ProfileNameWidget({super.key, required this.profile, this.style});
+
+  static Widget pubkey(String pubkey, {TextStyle? style}) {
+    return FutureBuilder(
+      future: ndk.metadata.loadMetadata(pubkey),
+      builder:
+          (ctx, data) => ProfileNameWidget(
+            profile: data.data ?? Metadata(pubKey: pubkey),
+            style: style,
+          ),
+    );
+  }
+
+  static nameFromProfile(Metadata profile) {
+    if ((profile.displayName?.length ?? 0) > 0) {
+      return profile.displayName!;
+    }
+    if ((profile.name?.length ?? 0) > 0) {
+      return profile.name!;
+    }
+    return Nip19.encodeSimplePubKey(profile.pubKey);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(ProfileNameWidget.nameFromProfile(profile), style: style);
+  }
+}
+
+class ProfileWidget extends StatelessWidget {
+  final Metadata profile;
+  final TextStyle? style;
+  final double? size;
+
+  const ProfileWidget({
+    super.key,
+    required this.profile,
+    this.style,
+    this.size,
+  });
+
+  static Widget pubkey(String pubkey) {
+    return ProfileLoaderWidget(pubkey, (ctx, state) {
+      return ProfileWidget(profile: state.data ?? Metadata(pubKey: pubkey));
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      spacing: 8,
+      children: [
+        AvatarWidget(profile: profile, size: size),
+        ProfileNameWidget(profile: profile),
+      ],
+    );
+  }
+}

lib/widgets/stream_grid.dart

@@ -0,0 +1,43 @@
+import 'package:flutter/widgets.dart';
+import 'package:ndk/ndk.dart';
+import 'package:zap_stream_flutter/theme.dart';
+import 'package:zap_stream_flutter/utils.dart';
+import 'package:zap_stream_flutter/widgets/stream_tile.dart';
+
+class StreamGrid extends StatelessWidget {
+  final List<Nip01Event> events;
+  const StreamGrid({super.key, required this.events});
+
+  @override
+  Widget build(BuildContext context) {
+    final streams = events.map((e) => StreamEvent(e));
+    final live = streams.where((s) => s.info.status == StreamStatus.live);
+    return Column(children: [_streamGroup("Live", live)]);
+  }
+
+  Widget _streamGroup(String title, Iterable<StreamEvent> events) {
+    return Column(
+      spacing: 16,
+      children: [
+        Row(
+          spacing: 16,
+          children: [
+            Text(
+              title,
+              style: TextStyle(fontSize: 21, fontWeight: FontWeight.w500),
+            ),
+            Expanded(
+              child: Container(
+                height: 1,
+                decoration: BoxDecoration(
+                  border: Border(bottom: BorderSide(color: LAYER_1)),
+                ),
+              ),
+            ),
+          ],
+        ),
+        ...events.map((e) => StreamTileWidget(e)),
+      ],
+    );
+  }
+}

lib/widgets/stream_tile.dart

@@ -0,0 +1,102 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:ndk/shared/nips/nip19/nip19.dart';
+import 'package:zap_stream_flutter/imgproxy.dart';
+import 'package:zap_stream_flutter/theme.dart';
+import 'package:zap_stream_flutter/utils.dart';
+import 'package:zap_stream_flutter/widgets/avatar.dart';
+import 'package:zap_stream_flutter/widgets/pill.dart';
+import 'package:zap_stream_flutter/widgets/profile.dart';
+
+class StreamTileWidget extends StatelessWidget {
+  final StreamEvent stream;
+
+  const StreamTileWidget(this.stream, {super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: () {
+        context.push(
+          "/e/${Nip19.encodeNoteId(stream.event.id)}",
+          extra: stream,
+        );
+      },
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        spacing: 8,
+        children: [
+          Container(
+            decoration: BoxDecoration(borderRadius: DEFAULT_BR, color: LAYER_1),
+            clipBehavior: Clip.antiAlias,
+            child: AspectRatio(
+              aspectRatio: 16 / 9,
+              child: Stack(
+                children: [
+                  CachedNetworkImage(
+                    imageUrl: proxyImg(context, stream.info.image ?? ""),
+                  ),
+                  if (stream.info.status != null)
+                    Positioned(
+                      right: 8,
+                      top: 8,
+                      child: PillWidget(
+                        color: Theme.of(context).highlightColor,
+                        child: Text(
+                          stream.info.status!.name.toUpperCase(),
+                          style: TextStyle(
+                            color: Colors.white,
+                            fontWeight: FontWeight.w600,
+                            fontSize: 14,
+                          ),
+                        ),
+                      ),
+                    ),
+                  if (stream.info.participants != null)
+                    Positioned(
+                      right: 8,
+                      bottom: 8,
+                      child: PillWidget(
+                        color: LAYER_1.withAlpha(200),
+                        child: Text(
+                          "${stream.info.participants} viewers",
+                          style: TextStyle(
+                            color: Colors.white,
+                            fontWeight: FontWeight.w600,
+                            fontSize: 14,
+                          ),
+                        ),
+                      ),
+                    ),
+                ],
+              ),
+            ),
+          ),
+          Row(
+            spacing: 8,
+            children: [
+              AvatarWidget.pubkey(stream.info.host),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(
+                      stream.info.title ?? "",
+                      overflow: TextOverflow.clip,
+                      style: TextStyle(fontWeight: FontWeight.w500),
+                    ),
+                    ProfileNameWidget.pubkey(
+                      stream.info.host,
+                      style: TextStyle(color: LAYER_4),
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}