@streamplace/components 0.7.3 → 0.7.7

package/dist/livestream-store/problems.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findProblems = void 0;
+const VARIANCE_THRESHOLD = 0.5;
+const DURATION_THRESHOLD = 5000000000; // 5s in ns
+const detectVariableSegmentLength = (segments) => {
+    if (segments.length < 3) {
+        // Need at least 3 segments to detect variability
+        return { variable: false, duration: false };
+    }
+    const durations = segments
+        .map((segment) => segment.duration)
+        .filter((duration) => duration !== undefined && duration > 0);
+    if (durations.length < 3) {
+        return { variable: false, duration: false };
+    }
+    // Calculate mean
+    const mean = durations.reduce((sum, duration) => sum + duration, 0) /
+        durations.length;
+    // Calculate standard deviation
+    const variance = durations.reduce((sum, duration) => {
+        const diff = duration - mean;
+        return sum + diff * diff;
+    }, 0) / durations.length;
+    const stdDev = Math.sqrt(variance);
+    // Calculate coefficient of variation (CV)
+    const cv = stdDev / mean;
+    // CV > 0.5 indicates high variability
+    // This threshold can be adjusted based on testing
+    return {
+        variable: cv > VARIANCE_THRESHOLD,
+        duration: mean > DURATION_THRESHOLD,
+    };
+};
+const findProblems = (segments) => {
+    const problems = [];
+    let hasBFrames = false;
+    for (const segment of segments) {
+        const video = segment.video?.[0];
+        if (!video) {
+            // i mean yes this is a problem but it can't happen yet
+            continue;
+        }
+        if (video.bframes === true) {
+            hasBFrames = true;
+            break;
+        }
+    }
+    if (hasBFrames) {
+        problems.push({
+            code: "bframes",
+            message: "Your stream contains B-Frames, which are not supported in Streamplace. Your stream will stutter.",
+            severity: "error",
+            link: "https://stream.place/docs/guides/start-streaming/obs/#obs-configuration",
+        });
+    }
+    const { variable, duration } = detectVariableSegmentLength(segments);
+    if (variable) {
+        problems.push({
+            code: "variable_segment_length",
+            message: "Your stream contains variable segment lengths, which may cause playback issues.",
+            severity: "warning",
+            link: "https://stream.place/docs/guides/start-streaming/obs/#obs-configuration",
+        });
+    }
+    if (duration) {
+        problems.push({
+            code: "long_segments",
+            message: "Your stream contains long segments (>5s). This will work fine, but increases the delay of the livestream.",
+            severity: "warning",
+            link: "https://stream.place/docs/guides/start-streaming/obs/#obs-configuration",
+        });
+    }
+    return problems;
+};
+exports.findProblems = findProblems;

package/dist/livestream-store/websocket-consumer.js

@@ -3,13 +3,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.handleWebSocketMessages = void 0;
 const api_1 = require("@atproto/api");
 const streamplace_1 = require("streamplace");
+const system_messages_1 = require("../lib/system-messages");
 const chat_1 = require("./chat");
+const problems_1 = require("./problems");
+const MAX_RECENT_SEGMENTS = 10;
 const handleWebSocketMessages = (state, messages) => {
     for (const message of messages) {
         if (streamplace_1.PlaceStreamLivestream.isLivestreamView(message)) {
+            const newLivestream = message;
+            const oldLivestream = state.livestream;
+            // check if this is actually new
+            if (!oldLivestream || oldLivestream.uri !== newLivestream.uri) {
+                const streamTitle = newLivestream.record.title || "something cool!";
+                const systemMessage = system_messages_1.SystemMessages.streamStart(streamTitle);
+                // set proper times
+                systemMessage.indexedAt = newLivestream.indexedAt;
+                systemMessage.record.createdAt = newLivestream.record.createdAt;
+                state = (0, chat_1.reduceChat)(state, [systemMessage], []);
+            }
             state = {
                 ...state,
-                livestream: message,
+                livestream: newLivestream,
             };
         }
         else if (streamplace_1.PlaceStreamLivestream.isViewerCount(message)) {
@@ -28,18 +42,26 @@ const handleWebSocketMessages = (state, messages) => {
                 indexedAt: message.indexedAt,
                 chatProfile: message.chatProfile,
                 replyTo: message.replyTo,
+                deleted: message.deleted,
             };
-            state = (0, chat_1.reduceChat)(state, [hydrated], []);
+            state = (0, chat_1.reduceChat)(state, [hydrated], [], []);
         }
         else if (streamplace_1.PlaceStreamSegment.isRecord(message)) {
+            const newRecentSegments = [...state.recentSegments];
+            newRecentSegments.unshift(message);
+            if (newRecentSegments.length > MAX_RECENT_SEGMENTS) {
+                newRecentSegments.pop();
+            }
             state = {
                 ...state,
                 segment: message,
+                recentSegments: newRecentSegments,
+                problems: (0, problems_1.findProblems)(newRecentSegments),
             };
         }
         else if (streamplace_1.PlaceStreamDefs.isBlockView(message)) {
             const block = message;
-            state = (0, chat_1.reduceChat)(state, [], [block]);
+            state = (0, chat_1.reduceChat)(state, [], [block], []);
         }
         else if (streamplace_1.PlaceStreamDefs.isRenditions(message)) {
             state = {
@@ -53,7 +75,20 @@ const handleWebSocketMessages = (state, messages) => {
                 profile: message,
             };
         }
+        else if (streamplace_1.PlaceStreamChatGate.isRecord(message)) {
+            const hideRecord = message;
+            const hiddenMessageUri = hideRecord.hiddenMessage;
+            const newPendingHides = [...state.pendingHides];
+            if (!newPendingHides.includes(hiddenMessageUri)) {
+                newPendingHides.push(hiddenMessageUri);
+            }
+            state = {
+                ...state,
+                pendingHides: newPendingHides,
+            };
+            state = (0, chat_1.reduceChat)(state, [], [], [hiddenMessageUri]);
+        }
     }
-    return (0, chat_1.reduceChat)(state, [], []);
+    return (0, chat_1.reduceChat)(state, [], [], []);
 };
 exports.handleWebSocketMessages = handleWebSocketMessages;

package/dist/player-store/player-store.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.intoPlayerProtocol = exports.usePlayerProtocol = exports.makePlayerStore = void 0;
+exports.useOffline = exports.intoPlayerProtocol = exports.usePlayerProtocol = exports.makePlayerStore = void 0;
 exports.usePlayerContext = usePlayerContext;
 exports.getPlayerStoreById = getPlayerStoreById;
 exports.getFirstPlayerID = getFirstPlayerID;
@@ -8,6 +8,7 @@ exports.getPlayerStoreFromContext = getPlayerStoreFromContext;
 exports.usePlayerStore = usePlayerStore;
 const react_1 = require("react");
 const zustand_1 = require("zustand");
+const livestream_store_1 = require("../livestream-store");
 const context_1 = require("./context");
 const player_state_1 = require("./player-state");
 const makePlayerStore = (id) => {
@@ -41,8 +42,6 @@ const makePlayerStore = (id) => {
         setStatus: (status) => set(() => ({ status })),
         playTime: 0,
         setPlayTime: (playTime) => set(() => ({ playTime })),
-        offline: false,
-        setOffline: (offline) => set(() => ({ offline })),
         videoRef: undefined,
         setVideoRef: (videoRef) => set(() => ({ videoRef })),
         pipMode: false,
@@ -68,6 +67,8 @@ const makePlayerStore = (id) => {
         setTelemetry: (telemetry) => set(() => ({ telemetry })),
         ingestLive: false,
         setIngestLive: (ingestLive) => set(() => ({ ingestLive })),
+        reportingURL: null,
+        setReportingURL: (reportingURL) => set(() => ({ reportingURL })),
         playerEvent: async (url, time, eventType, meta) => set((x) => {
             const data = {
                 time: time,
@@ -79,7 +80,8 @@ const makePlayerStore = (id) => {
             };
             try {
                 // fetch url from sp provider
-                fetch(`${url}/api/player-event`, {
+                const reportingURL = x.reportingURL ?? `${url}/api/player-event`;
+                fetch(reportingURL, {
                     method: "POST",
                     body: JSON.stringify(data),
                 });
@@ -109,6 +111,10 @@ const makePlayerStore = (id) => {
         setShowDebugInfo: (showDebugInfo) => set(() => ({ showDebugInfo })),
         modMessage: null,
         setModMessage: (modMessage) => set(() => ({ modMessage })),
+        reportModalOpen: false,
+        setReportModalOpen: (reportModalOpen) => set(() => ({ reportModalOpen })),
+        reportSubject: null,
+        setReportSubject: (subject) => set(() => ({ reportSubject: subject })),
     }));
 };
 exports.makePlayerStore = makePlayerStore;
@@ -171,3 +177,23 @@ const intoPlayerProtocol = (protocol) => {
     }
 };
 exports.intoPlayerProtocol = intoPlayerProtocol;
+// returns true if the livestream has been offline for more than 10 seconds and we're not playing
+const useOffline = () => {
+    const status = usePlayerStore((x) => x.status);
+    const segment = (0, livestream_store_1.useLivestreamStore)((x) => x.segment);
+    const [now, setNow] = (0, react_1.useState)(Date.now());
+    (0, react_1.useEffect)(() => {
+        const interval = setInterval(() => {
+            setNow(Date.now());
+        }, 500);
+        return () => clearInterval(interval);
+    }, []);
+    if (status === player_state_1.PlayerStatus.PLAYING) {
+        return false;
+    }
+    if (!segment?.startTime) {
+        return false;
+    }
+    return now - Date.parse(segment.startTime) > 10000;
+};
+exports.useOffline = useOffline;

package/dist/streamplace-store/block.js

@@ -1,26 +1,65 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCreateBlockRecord = useCreateBlockRecord;
+exports.useCreateHideChatRecord = useCreateHideChatRecord;
+const react_1 = require("react");
 const xrpc_1 = require("./xrpc");
 function useCreateBlockRecord() {
     let agent = (0, xrpc_1.usePDSAgent)();
-    return async (subjectDID) => {
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const createBlock = async (subjectDID) => {
         if (!agent) {
             throw new Error("No PDS agent found");
         }
         if (!agent.did) {
             throw new Error("No user DID found, assuming not logged in");
         }
-        const record = {
-            $type: "app.bsky.graph.block",
-            subject: subjectDID,
-            createdAt: new Date().toISOString(),
-        };
-        return await agent.com.atproto.repo.createRecord({
-            repo: agent.did,
-            collection: "app.bsky.graph.block",
-            record,
-        });
-        return record;
+        setIsLoading(true);
+        try {
+            const record = {
+                $type: "app.bsky.graph.block",
+                subject: subjectDID,
+                createdAt: new Date().toISOString(),
+            };
+            const result = await agent.com.atproto.repo.createRecord({
+                repo: agent.did,
+                collection: "app.bsky.graph.block",
+                record,
+            });
+            return result;
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    return { createBlock, isLoading };
+}
+function useCreateHideChatRecord() {
+    let agent = (0, xrpc_1.usePDSAgent)();
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const createHideChat = async (chatMessageUri) => {
+        if (!agent) {
+            throw new Error("No PDS agent found");
+        }
+        if (!agent.did) {
+            throw new Error("No user DID found, assuming not logged in");
+        }
+        setIsLoading(true);
+        try {
+            const record = {
+                $type: "place.stream.chat.gate",
+                hiddenMessage: chatMessageUri,
+            };
+            const result = await agent.com.atproto.repo.createRecord({
+                repo: agent.did,
+                collection: "place.stream.chat.gate",
+                record,
+            });
+            return result;
+        }
+        finally {
+            setIsLoading(false);
+        }
     };
+    return { createHideChat, isLoading };
 }

package/dist/ui/index.js

@@ -0,0 +1,79 @@
+"use strict";
+/**
+ * @streamplace/components/ui - Streamplace ZeroCSS
+ *
+ * Clean export path for ZeroCSS styling utilities, design tokens, and atomic styles.
+ * ZeroCSS provides a zero-config, atomic styling system optimized for React Native.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.atomsNS = exports.theme = exports.useTheme = exports.usePlatformTypography = exports.lightTheme = exports.darkTheme = exports.createThemedStyles = exports.createThemeStyles = exports.createThemeIcons = exports.createThemeColors = exports.ThemeProvider = exports.responsiveValue = exports.platformStyle = exports.mergeStyles = exports.debounce = exports.typography = exports.spacing = exports.shadows = exports.colors = exports.breakpoints = exports.borderRadius = exports.w = exports.top = exports.text = exports.right = exports.r = exports.py = exports.px = exports.pt = exports.pr = exports.position = exports.pl = exports.pb = exports.p = exports.my = exports.mx = exports.mt = exports.mr = exports.ml = exports.mb = exports.m = exports.left = exports.layout = exports.h = exports.gap = exports.flex = exports.bottom = exports.borders = exports.bg = exports.atoms = void 0;
+exports.utils = exports.tokens = void 0;
+const tslib_1 = require("tslib");
+// Export the most commonly used ZeroCSS utilities
+var atoms_1 = require("../lib/theme/atoms");
+// Core atoms object
+Object.defineProperty(exports, "atoms", { enumerable: true, get: function () { return atoms_1.atoms; } });
+// Common shorthand utilities
+Object.defineProperty(exports, "bg", { enumerable: true, get: function () { return atoms_1.bg; } });
+// Border utilities
+Object.defineProperty(exports, "borders", { enumerable: true, get: function () { return atoms_1.borders; } });
+Object.defineProperty(exports, "bottom", { enumerable: true, get: function () { return atoms_1.bottom; } });
+// Flex utilities
+Object.defineProperty(exports, "flex", { enumerable: true, get: function () { return atoms_1.flex; } });
+// Gap utilities (React Native 0.71+)
+Object.defineProperty(exports, "gap", { enumerable: true, get: function () { return atoms_1.gap; } });
+Object.defineProperty(exports, "h", { enumerable: true, get: function () { return atoms_1.h; } });
+// Layout utilities
+Object.defineProperty(exports, "layout", { enumerable: true, get: function () { return atoms_1.layout; } });
+Object.defineProperty(exports, "left", { enumerable: true, get: function () { return atoms_1.left; } });
+Object.defineProperty(exports, "m", { enumerable: true, get: function () { return atoms_1.m; } });
+Object.defineProperty(exports, "mb", { enumerable: true, get: function () { return atoms_1.mb; } });
+Object.defineProperty(exports, "ml", { enumerable: true, get: function () { return atoms_1.ml; } });
+Object.defineProperty(exports, "mr", { enumerable: true, get: function () { return atoms_1.mr; } });
+Object.defineProperty(exports, "mt", { enumerable: true, get: function () { return atoms_1.mt; } });
+Object.defineProperty(exports, "mx", { enumerable: true, get: function () { return atoms_1.mx; } });
+Object.defineProperty(exports, "my", { enumerable: true, get: function () { return atoms_1.my; } });
+Object.defineProperty(exports, "p", { enumerable: true, get: function () { return atoms_1.p; } });
+Object.defineProperty(exports, "pb", { enumerable: true, get: function () { return atoms_1.pb; } });
+Object.defineProperty(exports, "pl", { enumerable: true, get: function () { return atoms_1.pl; } });
+// Position utilities
+Object.defineProperty(exports, "position", { enumerable: true, get: function () { return atoms_1.position; } });
+Object.defineProperty(exports, "pr", { enumerable: true, get: function () { return atoms_1.pr; } });
+Object.defineProperty(exports, "pt", { enumerable: true, get: function () { return atoms_1.pt; } });
+Object.defineProperty(exports, "px", { enumerable: true, get: function () { return atoms_1.px; } });
+Object.defineProperty(exports, "py", { enumerable: true, get: function () { return atoms_1.py; } });
+Object.defineProperty(exports, "r", { enumerable: true, get: function () { return atoms_1.r; } });
+Object.defineProperty(exports, "right", { enumerable: true, get: function () { return atoms_1.right; } });
+Object.defineProperty(exports, "text", { enumerable: true, get: function () { return atoms_1.text; } });
+Object.defineProperty(exports, "top", { enumerable: true, get: function () { return atoms_1.top; } });
+Object.defineProperty(exports, "w", { enumerable: true, get: function () { return atoms_1.w; } });
+// Export ZeroCSS design tokens
+var tokens_1 = require("../lib/theme/tokens");
+Object.defineProperty(exports, "borderRadius", { enumerable: true, get: function () { return tokens_1.borderRadius; } });
+Object.defineProperty(exports, "breakpoints", { enumerable: true, get: function () { return tokens_1.breakpoints; } });
+Object.defineProperty(exports, "colors", { enumerable: true, get: function () { return tokens_1.colors; } });
+Object.defineProperty(exports, "shadows", { enumerable: true, get: function () { return tokens_1.shadows; } });
+Object.defineProperty(exports, "spacing", { enumerable: true, get: function () { return tokens_1.spacing; } });
+Object.defineProperty(exports, "typography", { enumerable: true, get: function () { return tokens_1.typography; } });
+// Export ZeroCSS utility functions
+var utils_1 = require("../lib/utils");
+Object.defineProperty(exports, "debounce", { enumerable: true, get: function () { return utils_1.debounce; } });
+Object.defineProperty(exports, "mergeStyles", { enumerable: true, get: function () { return utils_1.mergeStyles; } });
+Object.defineProperty(exports, "platformStyle", { enumerable: true, get: function () { return utils_1.platformStyle; } });
+Object.defineProperty(exports, "responsiveValue", { enumerable: true, get: function () { return utils_1.responsiveValue; } });
+// Export ZeroCSS theme system
+var theme_1 = require("../lib/theme/theme");
+Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return theme_1.ThemeProvider; } });
+Object.defineProperty(exports, "createThemeColors", { enumerable: true, get: function () { return theme_1.createThemeColors; } });
+Object.defineProperty(exports, "createThemeIcons", { enumerable: true, get: function () { return theme_1.createThemeIcons; } });
+Object.defineProperty(exports, "createThemeStyles", { enumerable: true, get: function () { return theme_1.createThemeStyles; } });
+Object.defineProperty(exports, "createThemedStyles", { enumerable: true, get: function () { return theme_1.createThemedStyles; } });
+Object.defineProperty(exports, "darkTheme", { enumerable: true, get: function () { return theme_1.darkTheme; } });
+Object.defineProperty(exports, "lightTheme", { enumerable: true, get: function () { return theme_1.lightTheme; } });
+Object.defineProperty(exports, "usePlatformTypography", { enumerable: true, get: function () { return theme_1.usePlatformTypography; } });
+Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return theme_1.useTheme; } });
+// Namespace exports for power users
+exports.theme = tslib_1.__importStar(require("../lib/theme"));
+exports.atomsNS = tslib_1.__importStar(require("../lib/theme/atoms"));
+exports.tokens = tslib_1.__importStar(require("../lib/theme/tokens"));
+exports.utils = tslib_1.__importStar(require("../lib/utils"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamplace/components",
-  "version": "0.7.3",
+  "version": "0.7.7",
   "description": "Streamplace React (Native) Components",
   "main": "dist/index.js",
   "types": "src/index.tsx",
@@ -28,11 +28,14 @@
   "dependencies": {
     "@atproto/api": "^0.15.7",
     "@atproto/crypto": "^0.4.4",
+    "@emoji-mart/react": "^1.1.1",
     "@gorhom/bottom-sheet": "^5.1.6",
     "@react-navigation/native": "^6.1.18",
     "@rn-primitives/dropdown-menu": "^1.2.0",
     "@rn-primitives/portal": "^1.3.0",
+    "@rn-primitives/slider": "^1.2.0",
     "class-variance-authority": "^0.6.1",
+    "expo-keep-awake": "~14.1.4",
     "expo-video": "~2.2.1",
     "hls.js": "^1.5.17",
     "lucide-react-native": "^0.514.0",
@@ -41,6 +44,7 @@
     "react-native-gesture-handler": "~2.26.0",
     "react-native-reanimated": "~3.18.0",
     "react-native-safe-area-context": "5.4.1",
+    "react-native-svg": "15.12.0",
     "react-native-webrtc": "git+https://github.com/streamplace/react-native-webrtc.git#6b8472a771ac47f89217d327058a8a4124a6ae56",
     "react-use-websocket": "^4.13.0",
     "streamplace": "0.7.2",
@@ -50,5 +54,5 @@
   "peerDependencies": {
     "react": "*"
   },
-  "gitHead": "70367834f75a94f074bd81299c2e72c36b0dbbf0"
+  "gitHead": "8c2cad31c840efeda8aa7f797f91dddbedb95397"
 }