@streamplace/components 0.8.3 → 0.8.6

package/dist/components/mobile-player/rotation-async.native.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScreenOrientation = exports.isRotationAvailable = void 0;
+let ScreenOrientation = null;
+exports.ScreenOrientation = ScreenOrientation;
+try {
+    exports.ScreenOrientation = ScreenOrientation = require("expo-screen-orientation");
+}
+catch {
+    // expo-screen-orientation not available
+    if (__DEV__) {
+        console.warn("expo-screen-orientation not installed, rotation features disabled");
+    }
+}
+exports.isRotationAvailable = ScreenOrientation != null;

package/dist/components/mobile-player/rotation-lock.js

@@ -0,0 +1,137 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRotation = exports.RotationProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const rotation_async_native_1 = require("./rotation-async.native");
+const RotationContext = (0, react_1.createContext)(null);
+const RotationProvider = ({ children, enabled = true, }) => {
+    const [isLocked, setIsLocked] = (0, react_1.useState)(false);
+    const [canRotate, setCanRotate] = (0, react_1.useState)(rotation_async_native_1.isRotationAvailable);
+    const [currentOrientation, setCurrentOrientation] = (0, react_1.useState)(rotation_async_native_1.ScreenOrientation?.Orientation.PORTRAIT_UP ?? 1);
+    // If module not available, provide disabled context
+    if (!rotation_async_native_1.isRotationAvailable || !rotation_async_native_1.ScreenOrientation) {
+        const disabledContextValue = {
+            currentOrientation: 1, // Orientation.PORTRAIT_UP
+            isLocked: false,
+            isActive: false,
+            rotateToLandscape: async () => { },
+            rotateToPortrait: async () => { },
+            toggleRotation: async () => { },
+            canRotate: false,
+        };
+        return ((0, jsx_runtime_1.jsx)(RotationContext.Provider, { value: disabledContextValue, children: children }));
+    }
+    // Manual rotation functions
+    const rotateToLandscape = async () => {
+        if (!enabled || !canRotate || !rotation_async_native_1.ScreenOrientation)
+            return;
+        try {
+            await rotation_async_native_1.ScreenOrientation.unlockAsync();
+            await rotation_async_native_1.ScreenOrientation.lockAsync(rotation_async_native_1.ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT);
+            setIsLocked(true);
+            // set current orientation to landscape right
+            setCurrentOrientation(rotation_async_native_1.ScreenOrientation.Orientation.LANDSCAPE_RIGHT);
+            if (__DEV__) {
+                console.log("📲 Manual landscape");
+            }
+        }
+        catch (error) {
+            console.warn("Failed to rotate to landscape:", error);
+        }
+    };
+    const rotateToPortrait = async () => {
+        if (!enabled || !canRotate || !rotation_async_native_1.ScreenOrientation)
+            return;
+        try {
+            await rotation_async_native_1.ScreenOrientation.unlockAsync();
+            await rotation_async_native_1.ScreenOrientation.lockAsync(rotation_async_native_1.ScreenOrientation.OrientationLock.PORTRAIT_UP);
+            setIsLocked(true);
+            setCurrentOrientation(rotation_async_native_1.ScreenOrientation.Orientation.PORTRAIT_UP);
+            if (__DEV__) {
+                console.log("📲 Manual portrait");
+            }
+        }
+        catch (error) {
+            console.warn("Failed to rotate to portrait:", error);
+        }
+    };
+    const toggleRotation = async () => {
+        if (!rotation_async_native_1.ScreenOrientation)
+            return;
+        const isLandscape = currentOrientation === rotation_async_native_1.ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
+            currentOrientation === rotation_async_native_1.ScreenOrientation.Orientation.LANDSCAPE_RIGHT;
+        if (__DEV__) {
+            console.log(`🔄 Toggle: current=${currentOrientation}, isLandscape=${isLandscape}`);
+        }
+        if (isLandscape) {
+            await rotateToPortrait();
+        }
+        else {
+            await rotateToLandscape();
+        }
+    };
+    // Track orientation changes
+    (0, react_1.useEffect)(() => {
+        if (!enabled)
+            return;
+        const getCurrentOrientation = async () => {
+            if (!rotation_async_native_1.ScreenOrientation)
+                return;
+            try {
+                const orient = await rotation_async_native_1.ScreenOrientation.getOrientationAsync();
+                setCurrentOrientation(orient);
+                if (__DEV__) {
+                    console.log(`📲 Orientation on load: ${orient}`);
+                }
+            }
+            catch (error) {
+                console.warn("Failed to get orientation:", error);
+            }
+        };
+        getCurrentOrientation();
+        if (!rotation_async_native_1.ScreenOrientation)
+            return;
+        const subscription = rotation_async_native_1.ScreenOrientation.addOrientationChangeListener((event) => {
+            const newOrientation = event.orientationInfo.orientation;
+            setCurrentOrientation(newOrientation);
+            if (__DEV__) {
+                console.log(`🔄 Orientation: ${newOrientation} (locked: ${isLocked})`);
+            }
+        });
+        return () => {
+            subscription?.remove();
+            if (rotation_async_native_1.ScreenOrientation) {
+                rotation_async_native_1.ScreenOrientation.removeOrientationChangeListeners();
+                rotation_async_native_1.ScreenOrientation.unlockAsync().catch(() => { });
+            }
+        };
+    }, [enabled]);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        currentOrientation,
+        isLocked,
+        isActive: enabled,
+        rotateToLandscape,
+        rotateToPortrait,
+        toggleRotation,
+        canRotate,
+    }), [
+        currentOrientation,
+        isLocked,
+        enabled,
+        canRotate,
+        rotateToLandscape,
+        rotateToPortrait,
+        toggleRotation,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(RotationContext.Provider, { value: contextValue, children: children }));
+};
+exports.RotationProvider = RotationProvider;
+const useRotation = () => {
+    const context = (0, react_1.useContext)(RotationContext);
+    if (!context) {
+        throw new Error("useRotation must be used within a RotationProvider");
+    }
+    return context;
+};
+exports.useRotation = useRotation;

package/dist/components/ui/index.js

@@ -9,6 +9,7 @@ tslib_1.__exportStar(require("./primitives/modal"), exports);
 tslib_1.__exportStar(require("./primitives/text"), exports);
 // Export styled components
 tslib_1.__exportStar(require("./button"), exports);
+tslib_1.__exportStar(require("./checkbox"), exports);
 tslib_1.__exportStar(require("./dialog"), exports);
 tslib_1.__exportStar(require("./dropdown"), exports);
 tslib_1.__exportStar(require("./icons"), exports);
@@ -21,6 +22,7 @@ tslib_1.__exportStar(require("./slider"), exports);
 tslib_1.__exportStar(require("./text"), exports);
 tslib_1.__exportStar(require("./textarea"), exports);
 tslib_1.__exportStar(require("./toast"), exports);
+tslib_1.__exportStar(require("./tooltip"), exports);
 tslib_1.__exportStar(require("./view"), exports);
 // Component collections for easy importing
 var button_1 = require("./primitives/button");

package/dist/hooks/useLivestreamInfo.js

@@ -22,7 +22,7 @@ function useLivestreamInfo(url) {
                 // Create the livestream record with title and custom url if available
                 await createStreamRecord({
                     title,
-                    customUrl: url || null,
+                    canonicalUrl: url || undefined,
                 });
             }
         }

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.storage = exports.Dashboard = exports.VideoRetry = exports.zero = exports.ui = exports.PlayerUI = exports.Player = exports.usePlayerContext = exports.withPlayerProvider = exports.PlayerProvider = void 0;
+exports.storage = exports.Dashboard = exports.useRotation = exports.RotationProvider = exports.VideoRetry = exports.zero = exports.ui = exports.PlayerUI = exports.Player = exports.usePlayerContext = exports.withPlayerProvider = exports.PlayerProvider = void 0;
 const tslib_1 = require("tslib");
 // barrel file :)
 require("./crypto-polyfill");
@@ -29,6 +29,10 @@ tslib_1.__exportStar(require("./components/chat/system-message"), exports);
 var video_retry_1 = require("./components/mobile-player/video-retry");
 Object.defineProperty(exports, "VideoRetry", { enumerable: true, get: function () { return tslib_1.__importDefault(video_retry_1).default; } });
 tslib_1.__exportStar(require("./lib/system-messages"), exports);
+// Rotation lock system exports
+var rotation_lock_1 = require("./components/mobile-player/rotation-lock");
+Object.defineProperty(exports, "RotationProvider", { enumerable: true, get: function () { return rotation_lock_1.RotationProvider; } });
+Object.defineProperty(exports, "useRotation", { enumerable: true, get: function () { return rotation_lock_1.useRotation; } });
 tslib_1.__exportStar(require("./components/share/sharesheet"), exports);
 tslib_1.__exportStar(require("./components/keep-awake"), exports);
 // Dashboard components

package/dist/streamplace-store/stream.js

@@ -96,21 +96,16 @@ function useCreateStreamRecord() {
     let agent = (0, xrpc_1.usePDSAgent)();
     let url = (0, streamplace_store_1.useUrl)();
     const uploadThumbnail = useUploadThumbnail();
-    return async ({ title, customThumbnail, submitPost, customUrl, }) => {
-        if (!submitPost) {
+    return async ({ title, customThumbnail, submitPost, canonicalUrl, notificationSettings, }) => {
+        if (typeof submitPost !== "boolean") {
             submitPost = true;
         }
-        if (!customUrl) {
-            customUrl = null;
-        }
         if (!agent) {
             throw new Error("No PDS agent found");
         }
         if (!agent.did) {
             throw new Error("No user DID found, assuming not logged in");
         }
-        // Use customUrl if provided, otherwise fall back to the store URL
-        const finalUrl = customUrl || url;
         const u = new URL(url);
         let thumbnail = undefined;
         if (customThumbnail) {
@@ -178,19 +173,26 @@ function useCreateStreamRecord() {
             window.navigator) {
             platVersion = (0, browser_1.getBrowserName)(window.navigator.userAgent);
         }
+        const thisUrl = `${url}/${profile.data.handle}`;
+        if (!canonicalUrl) {
+            canonicalUrl = thisUrl;
+        }
         const record = {
             $type: "place.stream.livestream",
             title: title,
-            url: finalUrl,
+            url: thisUrl,
             createdAt: new Date().toISOString(),
             // would match up with e.g. https://stream.place/iame.li
-            canonicalUrl: `${finalUrl}/${profile.data.handle}`,
+            canonicalUrl: canonicalUrl,
             // user agent style string
             // e.g. `@streamplace/components/0.1.0 (ios, 32.0)`
             agent: `@streamplace/components/${package_json_1.default.version} (${platform}, ${platVersion})`,
             post: newPost,
             thumb: thumbnail,
         };
+        if (notificationSettings) {
+            record.notificationSettings = notificationSettings;
+        }
         await agent.com.atproto.repo.createRecord({
             repo: agent.did,
             collection: "place.stream.livestream",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamplace/components",
-  "version": "0.8.3",
+  "version": "0.8.6",
   "description": "Streamplace React (Native) Components",
   "main": "dist/index.js",
   "types": "src/index.tsx",
@@ -30,6 +30,8 @@
     "@rn-primitives/slider": "^1.2.0",
     "class-variance-authority": "^0.6.1",
     "expo-keep-awake": "^14.0.0",
+    "expo-screen-orientation": "^9.0.7",
+    "expo-sensors": "^15.0.7",
     "expo-sqlite": "~15.2.12",
     "expo-video": "^2.0.0",
     "hls.js": "^1.5.17",
@@ -54,5 +56,5 @@
     "start": "tsc --watch --preserveWatchOutput",
     "prepare": "tsc"
   },
-  "gitHead": "e902ae92cbbb11832ca64b8c0e87e7ce5507c301"
+  "gitHead": "a40860f005ba4da989cfe1a5c39d29fa3564fea6"
 }

package/src/components/mobile-player/rotation-async.native.tsx

@@ -0,0 +1,15 @@
+let ScreenOrientation: typeof import("expo-screen-orientation") | null = null;
+
+try {
+  ScreenOrientation = require("expo-screen-orientation");
+} catch {
+  // expo-screen-orientation not available
+  if (__DEV__) {
+    console.warn(
+      "expo-screen-orientation not installed, rotation features disabled",
+    );
+  }
+}
+
+export const isRotationAvailable = ScreenOrientation != null;
+export { ScreenOrientation };

package/src/components/mobile-player/rotation-lock.tsx

@@ -0,0 +1,200 @@
+import type { Orientation } from "expo-screen-orientation";
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import {
+  isRotationAvailable,
+  ScreenOrientation,
+} from "./rotation-async.native";
+
+export interface RotationContextValue {
+  currentOrientation: Orientation;
+  isLocked: boolean;
+  isActive: boolean;
+  rotateToLandscape: () => Promise<void>;
+  rotateToPortrait: () => Promise<void>;
+  toggleRotation: () => Promise<void>;
+  canRotate: boolean;
+}
+
+export interface RotationProviderProps {
+  children: React.ReactNode;
+  enabled?: boolean;
+}
+
+const RotationContext = createContext<RotationContextValue | null>(null);
+
+export const RotationProvider: React.FC<RotationProviderProps> = ({
+  children,
+  enabled = true,
+}) => {
+  const [isLocked, setIsLocked] = useState(false);
+  const [canRotate, setCanRotate] = useState(isRotationAvailable);
+  const [currentOrientation, setCurrentOrientation] = useState<Orientation>(
+    ScreenOrientation?.Orientation.PORTRAIT_UP ?? 1,
+  );
+
+  // If module not available, provide disabled context
+  if (!isRotationAvailable || !ScreenOrientation) {
+    const disabledContextValue: RotationContextValue = {
+      currentOrientation: 1, // Orientation.PORTRAIT_UP
+      isLocked: false,
+      isActive: false,
+      rotateToLandscape: async () => {},
+      rotateToPortrait: async () => {},
+      toggleRotation: async () => {},
+      canRotate: false,
+    };
+
+    return (
+      <RotationContext.Provider value={disabledContextValue}>
+        {children}
+      </RotationContext.Provider>
+    );
+  }
+
+  // Manual rotation functions
+  const rotateToLandscape = async () => {
+    if (!enabled || !canRotate || !ScreenOrientation) return;
+
+    try {
+      await ScreenOrientation.unlockAsync();
+      await ScreenOrientation.lockAsync(
+        ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT,
+      );
+      setIsLocked(true);
+
+      // set current orientation to landscape right
+      setCurrentOrientation(ScreenOrientation.Orientation.LANDSCAPE_RIGHT);
+
+      if (__DEV__) {
+        console.log("📲 Manual landscape");
+      }
+    } catch (error) {
+      console.warn("Failed to rotate to landscape:", error);
+    }
+  };
+
+  const rotateToPortrait = async () => {
+    if (!enabled || !canRotate || !ScreenOrientation) return;
+
+    try {
+      await ScreenOrientation.unlockAsync();
+      await ScreenOrientation.lockAsync(
+        ScreenOrientation.OrientationLock.PORTRAIT_UP,
+      );
+      setIsLocked(true);
+
+      setCurrentOrientation(ScreenOrientation.Orientation.PORTRAIT_UP);
+
+      if (__DEV__) {
+        console.log("📲 Manual portrait");
+      }
+    } catch (error) {
+      console.warn("Failed to rotate to portrait:", error);
+    }
+  };
+
+  const toggleRotation = async () => {
+    if (!ScreenOrientation) return;
+
+    const isLandscape =
+      currentOrientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
+      currentOrientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT;
+
+    if (__DEV__) {
+      console.log(
+        `🔄 Toggle: current=${currentOrientation}, isLandscape=${isLandscape}`,
+      );
+    }
+
+    if (isLandscape) {
+      await rotateToPortrait();
+    } else {
+      await rotateToLandscape();
+    }
+  };
+
+  // Track orientation changes
+  useEffect(() => {
+    if (!enabled) return;
+
+    const getCurrentOrientation = async () => {
+      if (!ScreenOrientation) return;
+      try {
+        const orient = await ScreenOrientation.getOrientationAsync();
+        setCurrentOrientation(orient);
+
+        if (__DEV__) {
+          console.log(`📲 Orientation on load: ${orient}`);
+        }
+      } catch (error) {
+        console.warn("Failed to get orientation:", error);
+      }
+    };
+
+    getCurrentOrientation();
+
+    if (!ScreenOrientation) return;
+
+    const subscription = ScreenOrientation.addOrientationChangeListener(
+      (event) => {
+        const newOrientation = event.orientationInfo.orientation;
+        setCurrentOrientation(newOrientation);
+
+        if (__DEV__) {
+          console.log(
+            `🔄 Orientation: ${newOrientation} (locked: ${isLocked})`,
+          );
+        }
+      },
+    );
+
+    return () => {
+      subscription?.remove();
+      if (ScreenOrientation) {
+        ScreenOrientation.removeOrientationChangeListeners();
+        ScreenOrientation.unlockAsync().catch(() => {});
+      }
+    };
+  }, [enabled]);
+
+  const contextValue = useMemo(
+    () => ({
+      currentOrientation,
+      isLocked,
+      isActive: enabled,
+      rotateToLandscape,
+      rotateToPortrait,
+      toggleRotation,
+      canRotate,
+    }),
+    [
+      currentOrientation,
+      isLocked,
+      enabled,
+      canRotate,
+      rotateToLandscape,
+      rotateToPortrait,
+      toggleRotation,
+    ],
+  );
+
+  return (
+    <RotationContext.Provider value={contextValue}>
+      {children}
+    </RotationContext.Provider>
+  );
+};
+
+export const useRotation = (): RotationContextValue => {
+  const context = useContext(RotationContext);
+  if (!context) {
+    throw new Error("useRotation must be used within a RotationProvider");
+  }
+  return context;
+};

package/src/components/ui/index.ts

@@ -6,6 +6,7 @@ export * from "./primitives/text";
 
 // Export styled components
 export * from "./button";
+export * from "./checkbox";
 export * from "./dialog";
 export * from "./dropdown";
 export * from "./icons";
@@ -18,6 +19,7 @@ export * from "./slider";
 export * from "./text";
 export * from "./textarea";
 export * from "./toast";
+export * from "./tooltip";
 export * from "./view";
 
 // Component collections for easy importing

package/src/hooks/useLivestreamInfo.ts

@@ -23,7 +23,7 @@ export function useLivestreamInfo(url?: string) {
         // Create the livestream record with title and custom url if available
         await createStreamRecord({
           title,
-          customUrl: url || null,
+          canonicalUrl: url || undefined,
         });
       }
     } catch (error) {

package/src/index.tsx

@@ -33,6 +33,16 @@ export * from "./components/chat/system-message";
 export { default as VideoRetry } from "./components/mobile-player/video-retry";
 export * from "./lib/system-messages";
 
+// Rotation lock system exports
+export {
+  RotationProvider,
+  useRotation,
+} from "./components/mobile-player/rotation-lock";
+export type {
+  RotationContextValue,
+  RotationProviderProps,
+} from "./components/mobile-player/rotation-lock";
+
 export * from "./components/share/sharesheet";
 
 export * from "./components/keep-awake";

package/src/streamplace-store/stream.tsx

@@ -131,19 +131,18 @@ export function useCreateStreamRecord() {
     title,
     customThumbnail,
     submitPost,
-    customUrl,
+    canonicalUrl,
+    notificationSettings,
   }: {
     title: string;
     customThumbnail?: Blob;
     submitPost?: boolean;
-    customUrl?: string | null;
+    canonicalUrl?: string;
+    notificationSettings?: PlaceStreamLivestream.NotificationSettings;
   }) => {
-    if (!submitPost) {
+    if (typeof submitPost !== "boolean") {
       submitPost = true;
     }
-    if (!customUrl) {
-      customUrl = null;
-    }
     if (!agent) {
       throw new Error("No PDS agent found");
     }
@@ -152,8 +151,6 @@ export function useCreateStreamRecord() {
       throw new Error("No user DID found, assuming not logged in");
     }
 
-    // Use customUrl if provided, otherwise fall back to the store URL
-    const finalUrl = customUrl || url;
     const u = new URL(url);
 
     let thumbnail: BlobRef | undefined = undefined;
@@ -247,13 +244,18 @@ export function useCreateStreamRecord() {
       platVersion = getBrowserName(window.navigator.userAgent);
     }
 
+    const thisUrl = `${url}/${profile.data.handle}`;
+    if (!canonicalUrl) {
+      canonicalUrl = thisUrl;
+    }
+
     const record: PlaceStreamLivestream.Record = {
       $type: "place.stream.livestream",
       title: title,
-      url: finalUrl,
+      url: thisUrl,
       createdAt: new Date().toISOString(),
       // would match up with e.g. https://stream.place/iame.li
-      canonicalUrl: `${finalUrl}/${profile.data.handle}`,
+      canonicalUrl: canonicalUrl,
       // user agent style string
       // e.g. `@streamplace/components/0.1.0 (ios, 32.0)`
       agent: `@streamplace/components/${PackageJson.version} (${platform}, ${platVersion})`,
@@ -261,6 +263,10 @@ export function useCreateStreamRecord() {
       thumb: thumbnail,
     };
 
+    if (notificationSettings) {
+      record.notificationSettings = notificationSettings;
+    }
+
     await agent.com.atproto.repo.createRecord({
       repo: agent.did,
       collection: "place.stream.livestream",