@streamplace/components 0.8.3 → 0.8.5

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamplace/components",
-  "version": "0.8.3",
+  "version": "0.8.5",
   "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": "baa713714aac33e98c399f92ce12268a1aac3ef6"
 }

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/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";