@noya-app/noya-multiplayer-react 0.1.63 → 0.1.64

package/src/inspector/sections/ActivityEventsSection.tsx

@@ -0,0 +1,136 @@
+import { ActivityEventsManager, StreamFilter } from "@noya-app/state-manager";
+import React, { useState } from "react";
+import { ObjectInspector } from "react-inspector";
+import { useActivityEventsForManager } from "../../NoyaStateContext";
+import { getStateInspectorTheme } from "../inspectorTheme";
+import { StateInspectorButton } from "../StateInspectorButton";
+import {
+  StateInspectorDisclosureRowInner,
+  StateInspectorDisclosureSection,
+} from "../StateInspectorDisclosureSection";
+import { StateInspectorRow } from "../StateInspectorRow";
+
+function isResourceStreamFilter(
+  streamFilter: StreamFilter
+): streamFilter is { resourceId: string } {
+  return typeof streamFilter === "object" && "resourceId" in streamFilter;
+}
+
+function isResourceActivityEvent(
+  activityEvent: unknown
+): activityEvent is { resourceId: string } {
+  return (
+    typeof activityEvent === "object" &&
+    activityEvent !== null &&
+    "type" in activityEvent &&
+    activityEvent.type === "resource" &&
+    "resourceId" in activityEvent &&
+    typeof activityEvent.resourceId === "string"
+  );
+}
+
+export function ActivityEventsSection({
+  showEvents,
+  setShowEvents,
+  colorScheme,
+  activityEventsContainerRef,
+  activityEventsManager,
+}: {
+  showEvents: boolean;
+  setShowEvents: (value: boolean) => void;
+  colorScheme: "light" | "dark";
+  activityEventsContainerRef: React.RefObject<HTMLDivElement | null>;
+  activityEventsManager: ActivityEventsManager;
+}) {
+  const [streamFilter, setStreamFilter] = useState<StreamFilter>("all");
+  const streamFilterType = isResourceStreamFilter(streamFilter)
+    ? "resource"
+    : "all";
+  const theme = getStateInspectorTheme(colorScheme);
+  const activityEvents = useActivityEventsForManager(
+    showEvents ? streamFilter : undefined,
+    activityEventsManager
+  );
+
+  return (
+    <StateInspectorDisclosureSection
+      open={showEvents}
+      setOpen={setShowEvents}
+      title={`Activity Events`}
+      colorScheme={colorScheme}
+    >
+      <StateInspectorDisclosureRowInner ref={activityEventsContainerRef}>
+        <div style={{ padding: "4px 12px", display: "flex", gap: "4px" }}>
+          <select
+            name="streamFilterType"
+            value={streamFilterType}
+            style={{ flex: "0 0 auto", height: "19px" }}
+            onChange={(e) => {
+              const value = e.target.value as string;
+              if (value === "all") {
+                setStreamFilter("all");
+              } else {
+                setStreamFilter({ resourceId: "" });
+              }
+            }}
+          >
+            <option value="all">All</option>
+            <option value="resource">Resource</option>
+          </select>
+          {isResourceStreamFilter(streamFilter) && (
+            <input
+              name="resourceId"
+              type="text"
+              placeholder="Resource ID"
+              value={streamFilter.resourceId}
+              style={{
+                flex: "1 1 auto",
+                height: "19px",
+                padding: "0px 4px",
+                boxSizing: "border-box",
+              }}
+              onChange={(e) =>
+                setStreamFilter({ ...streamFilter, resourceId: e.target.value })
+              }
+            />
+          )}
+        </div>
+        {activityEvents?.map((activityEvent, index) => (
+          <StateInspectorRow
+            key={index}
+            colorScheme={colorScheme}
+            style={{
+              padding: "0px 12px 1px",
+            }}
+          >
+            <ObjectInspector data={activityEvent} theme={theme} />
+            {streamFilterType === "all" &&
+              isResourceActivityEvent(activityEvent) && (
+                <StateInspectorButton
+                  theme={theme}
+                  onClick={() => {
+                    setStreamFilter({ resourceId: activityEvent.resourceId });
+                  }}
+                >
+                  Watch this resource
+                </StateInspectorButton>
+              )}
+          </StateInspectorRow>
+        ))}
+        {!activityEvents && (
+          <div
+            style={{
+              padding: "12px",
+              fontSize: "12px",
+              display: "flex",
+              flexDirection: "column",
+              gap: "4px",
+            }}
+          >
+            <span>No activity events</span>
+          </div>
+        )}
+      </StateInspectorDisclosureRowInner>
+    </StateInspectorDisclosureSection>
+  );
+}

package/src/inspector/utils.ts

@@ -37,7 +37,7 @@ export function ellipsis(
 }
 
 export function uploadFile() {
-  return new Promise<Blob>((resolve, reject) => {
+  return new Promise<File>((resolve, reject) => {
     const input = document.createElement("input");
     input.type = "file";
     input.onchange = () => {
@@ -46,7 +46,7 @@ export function uploadFile() {
         const reader = new FileReader();
         reader.onload = () => {
           const buffer = reader.result as ArrayBuffer;
-          const blob = new Blob([buffer]);
+          const blob = new File([buffer], file.name, { type: file.type });
           resolve(blob);
         };
         reader.onerror = () => {

package/src/noyaApp.ts

@@ -87,7 +87,7 @@ export function getAppData<State>(
     parseAppDataParameter(options) ??
     createDefaultAppData(resolvedInitialState);
 
-  if (options?.overrideExistingState) {
+  if (options?.overrideExistingState || appData.initialState === null) {
     appData.initialState = resolvedInitialState;
   }