Migrate provider status to Rx

packages/components/provider-status/index.ts

@@ -0,0 +1 @@
+export * from "./src/ProviderStatus";

packages/components/state/package.json → packages/components/provider-status/package.json

@@ -1,19 +1,21 @@
 {
-  "name": "@echo/components-state",
+  "name": "@echo/components-provider-status",
   "private": true,
   "version": "1.0.0",
   "scripts": {
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@echo/components-effect-bridge": "^1.0.0",
     "@echo/core-types": "^1.0.0",
     "@echo/services-bootstrap": "^1.0.0",
-    "effect": "^3.5.8",
-    "jotai": "^2.8.3"
+    "@echo/services-media-provider-status": "^1.0.0",
+    "@effect-rx/rx": "^0.33.8",
+    "@effect-rx/rx-react": "^0.30.11",
+    "effect": "^3.2.8"
   },
   "devDependencies": {
-    "react": "^18.2.0"
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22"
   }
 }

packages/components/provider-status/src/ProviderStatus.tsx

@@ -0,0 +1,36 @@
+import { MediaProviderStatusLive } from "@echo/services-media-provider-status";
+import { MainLive } from "@echo/services-bootstrap";
+import { Rx } from "@effect-rx/rx";
+import { Layer, Match } from "effect";
+import { useRxValue } from "@effect-rx/rx-react";
+import { MediaProviderStatus } from "@echo/core-types";
+
+const runtime = Rx.runtime(
+  MediaProviderStatusLive.pipe(Layer.provide(MainLive)),
+);
+
+const providerStatus = runtime.subscriptionRef(MediaProviderStatus.observe);
+
+export const ProviderStatus = () => {
+  const status = useRxValue(providerStatus);
+
+  return Match.value(status).pipe(
+    Match.tag("Initial", () => <pre>Loading provider status...</pre>),
+    Match.tag("Success", ({ value: providerState }) => (
+      <div>
+        {[...providerState.entries()].map(([providerId, providerState]) => (
+          <div key={providerId}>
+            <h1>{providerId}</h1>
+            <pre>{JSON.stringify(providerState, null, 2)}</pre>
+          </div>
+        ))}
+      </div>
+    )),
+    Match.tag("Failure", () => (
+      <div style={{ color: "red" }}>
+        Something went wrong observing the provider statuses.
+      </div>
+    )),
+    Match.exhaustive,
+  );
+};

packages/core/types/src/services/index.ts

@@ -6,3 +6,4 @@ export * from "./library";
 export * from "./metadata-provider";
 export * from "./mediaProvider";
 export * from "./player";
+export * from "./provider-status";

packages/core/types/src/services/provider-status.ts

@@ -0,0 +1,26 @@
+import { Effect, SubscriptionRef } from "effect";
+import type { ProviderId, ProviderStatus } from "../model";
+
+/**
+ * Defines the state of all currently active providers.
+ */
+export type StateByProvider = Map<ProviderId, ProviderStatus>;
+
+/**
+ * Service that listen to the status of all providers and allows to observe
+ * changes to them.
+ */
+export type IMediaProviderStatus = {
+  /**
+   * Returns a subscription ref that holds the current status of a specific
+   * provider, while also allowing to observe changes to it.
+   */
+  readonly observe: SubscriptionRef.SubscriptionRef<StateByProvider>;
+};
+
+/**
+ * Tag to identify the MediaProviderStatus service.
+ */
+export class MediaProviderStatus extends Effect.Tag(
+  "@echo/core-types/MediaProviderStatus",
+)<MediaProviderStatus, IMediaProviderStatus>() {}

packages/infrastructure/broadcast-channel/src/broadcast-channel.ts

@@ -56,7 +56,7 @@ const createBroadcastChannel = <TSchema extends Schema>(
           });
         }),
       registerResolver: (actionId, resolver) =>
-        Effect.fork(
+        Effect.forkDaemon(
           Effect.gen(function* () {
             const channel = yield* _broadcastChannel.get;
 

packages/services/bootstrap/package.json

@@ -15,8 +15,6 @@
     "@echo/infrastructure-dexie-database": "^1.0.0",
     "@echo/infrastructure-mmb-metadata-provider": "^1.0.0",
     "@echo/infrastructure-onedrive-provider": "^1.0.0",
-    "@echo/services-library": "^1.0.0",
-    "@echo/services-player": "^1.0.0",
     "@echo/workers-media-provider": "^1.0.0",
     "effect": "^3.5.8"
   }

packages/services/bootstrap/src/layers.ts

@@ -5,11 +5,9 @@ import {
 } from "@echo/infrastructure-broadcast-channel";
 import { BrowserCryptoLive } from "@echo/infrastructure-browser-crypto";
 import { DexieDatabaseLive } from "@echo/infrastructure-dexie-database";
-import { LibraryLive } from "@echo/services-library";
 import { MmbMetadataProviderLive } from "@echo/infrastructure-mmb-metadata-provider";
 import { LazyLoadedProviderLive } from "./loaders/provider";
 import { AppConfigLive } from "./app-config";
-import { PlayerLive } from "@echo/services-player";
 
 /**
  * Exports a layer that can provide all dependencies that are needed in the
@@ -18,9 +16,7 @@ import { PlayerLive } from "@echo/services-player";
 export const MainLive = MediaProviderMainThreadBroadcastChannelLive.pipe(
   Layer.provideMerge(MediaProviderWorkerBroadcastChannelLive),
   Layer.provideMerge(BrowserCryptoLive),
-  Layer.provideMerge(PlayerLive),
   Layer.provideMerge(LazyLoadedProviderLive),
-  Layer.provideMerge(LibraryLive),
   Layer.provideMerge(DexieDatabaseLive),
   Layer.provideMerge(AppConfigLive),
 );

packages/services/media-provider-status/index.ts

@@ -0,0 +1,26 @@
+import {
+  MediaProviderStatus,
+  MediaProviderMainThreadBroadcastChannel,
+  type StateByProvider,
+} from "@echo/core-types";
+import { Effect, Layer, Ref, SubscriptionRef } from "effect";
+
+export const MediaProviderStatusLive = Layer.effect(
+  MediaProviderStatus,
+  Effect.gen(function* () {
+    const stateByProviderRef = yield* SubscriptionRef.make<StateByProvider>(
+      new Map(),
+    );
+    const broadcastChannel = yield* MediaProviderMainThreadBroadcastChannel;
+
+    yield* broadcastChannel.registerResolver("reportStatus", (status) => {
+      return Ref.update(stateByProviderRef, (current) => {
+        return new Map(current).set(status.metadata.id, status.status);
+      });
+    });
+
+    return MediaProviderStatus.of({
+      observe: stateByProviderRef,
+    });
+  }),
+);

packages/services/media-provider-status/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@echo/services-media-provider-status",
+  "private": true,
+  "version": "1.0.0",
+  "description": "Contains the implementation for the MediaProviderStatus service",
+  "main": "index.js",
+  "scripts": {
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@echo/core-types": "^1.0.0",
+    "effect": "^3.2.8"
+  }
+}

packages/services/media-provider-status/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": [
+    "index.ts"
+  ]
+}

packages/services/player/src/player.ts

@@ -6,6 +6,7 @@ const PlayerLiveWithState = Layer.effect(
   Player,
   Effect.gen(function* () {
     const state = yield* PlayerStateRef;
+    // TODO: Remove all this and switch to subscription ref.
     const statePubSub = yield* PubSub.dropping<PlayerState>({
       capacity: 1,
       replay: 1,

packages/web/package.json

@@ -12,13 +12,12 @@
   },
   "dependencies": {
     "@echo/components-effect-bridge": "^1.0.0",
-    "@echo/components-state": "^1.0.0",
+    "@echo/components-provider-status": "^1.0.0",
     "@echo/core-types": "^1.0.0",
     "@echo/services-bootstrap": "^1.0.0",
     "@effect-rx/rx": "0.33.8",
     "@effect-rx/rx-react": "0.30.11",
-    "effect": "^3.5.8",
-    "jotai": "^2.8.3"
+    "effect": "^3.5.8"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",