@streamplace/components 0.0.1 → 0.7.0

package/LICENSE

@@ -0,0 +1,18 @@
+Copyright (c) 2025 Streamplace.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,35 @@
+# @streamplace/components
+
+Heavily WIP but looks something like this:
+
+```tsx
+import {
+  StreamplaceProvider,
+  LivestreamProvider,
+} from "@streamplace/components";
+
+export function Provider() {
+  <StreamplaceProvider url="https://stream.place" oauthSession={userSession}>
+    {/* Everything inside of here can access that Streamplace node */}
+
+    <LivestreamProvider src="example.bsky.social" /* or did:plc:xxxx */>
+      {/* Everything in here has an active subscription to the livestream
+        context via Websocket; things like chat data and stream title */}
+      <App />
+    </LivestreamProvider>
+  </StreamplaceProvider>;
+}
+
+export function App() {
+  const chat = useChat();
+  return (
+    <View>
+      {chat.map((msg) => (
+        <Text>
+          @{msg.author.handle}: {msg.record.text}
+        </Text>
+      ))}
+    </View>
+  );
+}
+```

package/dist/components/chat/chat-box.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react-native";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Pressable } from "react-native";
+import { Button, Loader, Text, useChat, useCreateChatMessage, useReplyToMessage, useSetReplyToMessage, View, } from "../../";
+import { bg, flex, gap, h, layout, mb, pl, pr, w } from "../../lib/theme/atoms";
+import { usePDSAgent } from "../../streamplace-store/xrpc";
+import { Textarea } from "../ui/textarea";
+import { RenderChatMessage } from "./chat-message";
+import { MentionSuggestions } from "./mention-suggestions";
+export function ChatBox({ isPopout, chatBoxStyle, }) {
+    const [submitting, setSubmitting] = useState(false);
+    const [message, setMessage] = useState("");
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(0);
+    const [filteredAuthors, setFilteredAuthors] = useState(new Map());
+    const chat = useChat();
+    const createChatMessage = useCreateChatMessage();
+    const replyTo = useReplyToMessage();
+    const setReplyToMessage = useSetReplyToMessage();
+    const textAreaRef = useRef(null);
+    // are we logged in?
+    let agent = usePDSAgent();
+    if (!agent?.did) {
+        _jsx(View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[2]], children: _jsx(Text, { children: "Log in to chat." }) });
+    }
+    const authors = useMemo(() => {
+        if (!chat)
+            return null;
+        return chat.reduce((acc, msg) => {
+            acc.set(msg.author.handle, msg.chatProfile);
+            return acc;
+        }, new Map());
+    }, [chat]);
+    const handleMentionSelect = (handle) => {
+        const beforeAt = message.slice(0, message.lastIndexOf("@"));
+        setMessage(`${beforeAt}@${handle} `);
+        setShowSuggestions(false);
+    };
+    const updateSuggestions = (text) => {
+        const atIndex = text.lastIndexOf("@");
+        if (atIndex === -1 || !authors) {
+            setShowSuggestions(false);
+            return;
+        }
+        const searchText = text.slice(atIndex + 1).toLowerCase();
+        const filteredAuthorsMap = new Map(Array.from(authors.entries()).filter(([handle]) => handle.toLowerCase().includes(searchText)));
+        setFilteredAuthors(filteredAuthorsMap);
+        setHighlightedIndex(0);
+        setShowSuggestions(filteredAuthorsMap.size > 0);
+    };
+    const submit = () => {
+        if (!message.trim())
+            return;
+        setMessage("");
+        setReplyToMessage(null);
+        setSubmitting(true);
+        createChatMessage({
+            text: message,
+            reply: replyTo || undefined,
+        });
+        setSubmitting(false);
+    };
+    useEffect(() => {
+        if (replyTo && textAreaRef.current) {
+            textAreaRef.current.focus();
+        }
+    }, [replyTo]);
+    return (_jsxs(View, { style: [layout.flex.column, flex.shrink[1], gap.all[2]], children: [replyTo && (_jsxs(View, { style: [
+                    layout.flex.row,
+                    layout.flex.alignCenter,
+                    layout.flex.spaceBetween,
+                    h[12],
+                    pl[2],
+                    pr[10],
+                    mb[2],
+                    bg.gray[800],
+                    { borderRadius: 16 },
+                ], children: [_jsx(RenderChatMessage, { item: replyTo, showReply: false, userCache: authors || new Map() }), _jsx(Pressable, { onPress: () => setReplyToMessage(null), children: _jsx(View, { style: [
+                                layout.flex.row,
+                                layout.flex.alignCenter,
+                                layout.flex.justifyCenter,
+                                h[12],
+                                w[12],
+                                bg.gray[600],
+                                { borderRadius: 999 },
+                            ], children: _jsx(X, { size: 24 }) }) })] })), _jsxs(View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[2]], children: [_jsx(Textarea, { ref: textAreaRef, numberOfLines: 1, value: message, enterKeyHint: "send", onSubmitEditing: submit, multiline: false, onChangeText: (text) => {
+                            setMessage(text);
+                            updateSuggestions(text);
+                        }, onKeyPress: (k) => {
+                            if (k.nativeEvent.key === "Enter") {
+                                if (showSuggestions) {
+                                    k.preventDefault();
+                                    const handles = Array.from(filteredAuthors.keys());
+                                    if (handles.length > 0) {
+                                        handleMentionSelect(handles[highlightedIndex]);
+                                    }
+                                }
+                                else
+                                    submit();
+                            }
+                            else if (k.nativeEvent.key === "ArrowUp") {
+                                setHighlightedIndex((prev) => Math.max(prev - 1, 0));
+                            }
+                            else if (k.nativeEvent.key === "ArrowDown") {
+                                setHighlightedIndex((prev) => Math.min(prev + 1, Array.from(filteredAuthors.keys()).length - 1));
+                            }
+                        }, style: [chatBoxStyle] }), _jsx(Button, { disabled: submitting, variant: "secondary", style: { borderRadius: 16, height: 36, minWidth: 80 }, onPress: submit, children: submitting ? _jsx(Loader, {}) : "Send" })] }), showSuggestions && (_jsx(MentionSuggestions, { authors: filteredAuthors || [], highlightedIndex: highlightedIndex, onSelect: handleMentionSelect }))] }));
+}

package/dist/components/chat/chat-message.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useCallback } from "react";
+import { Linking, View } from "react-native";
+import { segmentize } from "../../lib/facet";
+import { borders, flex, gap, ml, mr, opacity, pl, w, } from "../../lib/theme/atoms";
+import { atoms, layout } from "../ui";
+import { useLivestreamStore } from "../../livestream-store";
+import { Text } from "../ui/text";
+const getRgbColor = (color) => color ? `rgb(${color.red}, ${color.green}, ${color.blue})` : "$accentColor";
+const segmentedObject = (obj, index, userCache) => {
+    if (obj.features && obj.features.length > 0) {
+        let ftr = obj.features[0];
+        // afaik there shouldn't be a case where facets overlap, at least currently
+        if (ftr.$type === "app.bsky.richtext.facet#link") {
+            let linkftr = ftr;
+            return (_jsx(Text, { style: [{ color: atoms.colors.ios.systemBlue, cursor: "pointer" }], onPress: () => Linking.openURL(linkftr.uri || ""), children: obj.text }, `mention-${index}`));
+        }
+        else if (ftr.$type === "app.bsky.richtext.facet#mention") {
+            let mtnftr = ftr;
+            const profile = userCache?.[mtnftr.did];
+            console.log(profile, mtnftr.did, userCache);
+            return (_jsx(Text, { style: [
+                    {
+                        cursor: "pointer",
+                        color: getRgbColor(profile?.color),
+                    },
+                ], onPress: () => Linking.openURL(`https://bsky.app/profile/${mtnftr.did || ""}`), children: obj.text }, `mention-${index}`));
+        }
+    }
+    else {
+        return _jsx(Text, { children: obj.text }, `text-${index}`);
+    }
+};
+const RichTextMessage = ({ text, facets, }) => {
+    if (!facets?.length)
+        return _jsx(Text, { children: text });
+    const userCache = useLivestreamStore((state) => state.authors);
+    let segs = segmentize(text, facets);
+    return segs.map((seg, i) => segmentedObject(seg, i, userCache));
+};
+export const RenderChatMessage = memo(function RenderChatMessage({ item, showReply = true, showTime = true, }) {
+    const formatTime = useCallback((dateString) => {
+        return new Date(dateString).toLocaleString(undefined, {
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: false,
+        });
+    }, []);
+    return (_jsxs(_Fragment, { children: [item.replyTo && showReply && (_jsx(View, { style: [
+                    gap.all[2],
+                    layout.flex.row,
+                    w.percent[100],
+                    borders.left.width.medium,
+                    borders.left.color.gray[700],
+                    ml[4],
+                    pl[4],
+                    opacity[80],
+                ], children: _jsxs(Text, { numberOfLines: 1, style: [flex.shrink[1], mr[4]], children: [_jsxs(Text, { style: {
+                                color: getRgbColor(item.replyTo.chatProfile.color),
+                                fontWeight: "thin",
+                            }, children: ["@", item.replyTo.author.handle] }), " ", _jsx(Text, { style: {
+                                color: atoms.colors.gray[300],
+                                fontStyle: "italic",
+                            }, children: item.replyTo.record.text })] }) })), _jsxs(View, { style: [gap.all[2], layout.flex.row, w.percent[100]], children: [showTime && (_jsx(Text, { style: {
+                            fontVariant: ["tabular-nums"],
+                            color: atoms.colors.gray[300],
+                        }, children: formatTime(item.record.createdAt) })), _jsxs(Text, { weight: "bold", color: "default", style: [flex.shrink[1]], children: [_jsxs(Text, { style: [
+                                    {
+                                        cursor: "pointer",
+                                        color: getRgbColor(item.chatProfile?.color),
+                                    },
+                                ], children: ["@", item.author.handle] }), ":", " ", _jsx(RichTextMessage, { text: item.record.text, facets: item.record.facets || [] })] })] })] }));
+}, (prevProps, nextProps) => {
+    return (prevProps.item.author.handle === nextProps.item.author.handle &&
+        prevProps.item.record.text === nextProps.item.record.text);
+});

package/dist/components/chat/chat.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Reply, ShieldEllipsis } from "lucide-react-native";
+import { memo, useRef } from "react";
+import { FlatList, Platform, Pressable } from "react-native";
+import Swipeable from "react-native-gesture-handler/ReanimatedSwipeable";
+import Reanimated, { useAnimatedStyle, } from "react-native-reanimated";
+import { Text, useChat, usePlayerStore, useSetReplyToMessage, View, } from "../../";
+import { flex, py, w } from "../../lib/theme/atoms";
+import { RenderChatMessage } from "./chat-message";
+import { ModView } from "./mod-view";
+function RightAction(prog, drag) {
+    const styleAnimation = useAnimatedStyle(() => {
+        return {
+            transform: [{ translateX: drag.value + 25 }],
+        };
+    });
+    return (_jsx(Reanimated.View, { style: [styleAnimation], children: _jsx(Reply, { color: "white" }) }));
+}
+function LeftAction(prog, drag) {
+    const styleAnimation = useAnimatedStyle(() => {
+        return {
+            transform: [{ translateX: drag.value - 25 }],
+        };
+    });
+    return (_jsx(Reanimated.View, { style: [styleAnimation], children: _jsx(ShieldEllipsis, { color: "white" }) }));
+}
+const SHOWN_MSGS = Platform.OS === "android" || Platform.OS === "ios" ? 100 : 25;
+const keyExtractor = (item, index) => {
+    return `${item.uri}`;
+};
+const ChatLine = memo(({ item }) => {
+    const setReply = useSetReplyToMessage();
+    const setModMsg = usePlayerStore((state) => state.setModMessage);
+    const swipeableRef = useRef(null);
+    return (_jsx(Pressable, { onLongPress: () => setModMsg(item), children: _jsx(Swipeable, { containerStyle: [py[1]], friction: 2, enableTrackpadTwoFingerGesture: true, rightThreshold: 40, renderRightActions: Platform.OS === "android" ? undefined : RightAction, renderLeftActions: Platform.OS === "android" ? undefined : LeftAction, overshootFriction: 9, ref: (ref) => {
+                swipeableRef.current = ref;
+            }, onSwipeableOpen: (r) => {
+                if (r === (Platform.OS === "android" ? "right" : "left")) {
+                    setReply(item);
+                }
+                if (r === (Platform.OS === "android" ? "left" : "right")) {
+                    setModMsg(item);
+                }
+                // close this swipeable
+                const swipeable = swipeableRef.current;
+                if (swipeable) {
+                    swipeable.close();
+                }
+            }, children: _jsx(RenderChatMessage, { item: item }) }) }));
+});
+export function Chat({ shownMessages = SHOWN_MSGS, style: propsStyle, ...props }) {
+    const chat = useChat();
+    if (!chat)
+        return (_jsx(View, { style: [flex.shrink[1]], children: _jsx(Text, { children: "Loading chaat..." }) }));
+    return (_jsxs(View, { style: [flex.shrink[1]].concat(propsStyle || []), children: [_jsx(FlatList, { style: [flex.grow[1], flex.shrink[1], w.percent[100]], data: chat, inverted: true, keyExtractor: keyExtractor, renderItem: ({ item, index }) => _jsx(ChatLine, { item: item }), removeClippedSubviews: true, maxToRenderPerBatch: 10, initialNumToRender: 10, updateCellsBatchingPeriod: 50 }), _jsx(ModView, {})] }));
+}

package/dist/components/chat/mention-suggestions.js

@@ -0,0 +1,39 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Pressable } from "react-native";
+import { Text, View } from "../..";
+import { bg, layout, left, right, zIndex } from "../../lib/theme/atoms";
+export function MentionSuggestions({ authors, onSelect, highlightedIndex, }) {
+    if (!authors || authors.size === 0) {
+        return null; // No authors to display
+    }
+    const authorHandles = Array.from(authors.keys());
+    return (_jsx(View, { style: [
+            bg.gray[800],
+            layout.position.absolute,
+            left[0],
+            right[0],
+            zIndex[50],
+            {
+                bottom: "100%",
+                borderRadius: 8,
+                boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
+            },
+        ], children: authorHandles.map((handle, index) => {
+            let profile = authors.get(handle);
+            return (_jsx(Pressable, { onPress: () => onSelect(handle), style: [
+                    {
+                        padding: 8,
+                        flexDirection: "row",
+                        alignItems: "center",
+                        backgroundColor: index === highlightedIndex
+                            ? "rgba(0, 0, 0, 0.1)"
+                            : "rgba(0, 0, 0, 0.5)",
+                    },
+                ], children: _jsxs(Text, { style: {
+                        color: profile?.color
+                            ? `rgb(${profile.color.red}, ${profile.color.green}, ${profile.color.blue})`
+                            : "black",
+                        fontWeight: "bold",
+                    }, children: ["@", handle] }) }, handle));
+        }) }));
+}

package/dist/components/chat/mod-view.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef } from "react";
+import { gap, mr } from "../../lib/theme/atoms";
+import { usePlayerStore } from "../../player-store";
+import { useCreateBlockRecord } from "../../streamplace-store/block";
+import { usePDSAgent } from "../../streamplace-store/xrpc";
+import { DropdownMenu, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger, layout, ResponsiveDropdownMenuContent, Text, View, } from "../ui";
+import { RenderChatMessage } from "./chat-message";
+export const ModView = forwardRef(() => {
+    const triggerRef = useRef(null);
+    const message = usePlayerStore((state) => state.modMessage);
+    let agent = usePDSAgent();
+    let createBlockRecord = useCreateBlockRecord();
+    if (!agent?.did) {
+        _jsx(View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[2]], children: _jsx(Text, { children: "Log in to submit mod actions" }) });
+    }
+    useEffect(() => {
+        if (message) {
+            console.log("opening mod view");
+            triggerRef.current?.open();
+        }
+        else {
+            console.log("closing mod view");
+            triggerRef.current?.close();
+        }
+    }, [message]);
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { ref: triggerRef, children: _jsx(View, {}) }), _jsx(ResponsiveDropdownMenuContent, { children: message && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuGroup, { children: _jsx(DropdownMenuItem, { children: _jsx(View, { style: [layout.flex.column, mr[5], { gap: 6 }], children: _jsx(RenderChatMessage, { item: message }) }) }) }), _jsx(DropdownMenuGroup, { title: `Moderation actions`, children: _jsx(DropdownMenuItem, { disabled: message.author.did === agent?.did, onPress: () => {
+                                    console.log("Creating block record");
+                                    createBlockRecord(message.author.did)
+                                        .then((r) => console.log(r))
+                                        .catch((e) => console.error(e));
+                                }, children: _jsx(Text, { color: "destructive", children: message.author.did === agent?.did ? (_jsx(_Fragment, { children: "Block yourself (you can't block yourself)" })) : (_jsxs(_Fragment, { children: ["Block user @", message.author.handle, " from this channel"] })) }) }) })] })) })] }));
+});

package/dist/components/mobile-player/fullscreen.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { getFirstPlayerID, usePlayerStore } from "../..";
+import { View } from "../../components/ui";
+import Video from "./video";
+export function Fullscreen(props) {
+    const playerId = getFirstPlayerID();
+    const protocol = usePlayerStore((x) => x.protocol, playerId);
+    const fullscreen = usePlayerStore((x) => x.fullscreen, playerId);
+    const setFullscreen = usePlayerStore((x) => x.setFullscreen, playerId);
+    const setSrc = usePlayerStore((x) => x.setSrc);
+    const divRef = useRef(null);
+    const videoRef = useRef(null);
+    useEffect(() => {
+        setSrc(props.src);
+    }, [props.src]);
+    useEffect(() => {
+        if (!divRef.current) {
+            return;
+        }
+        (async () => {
+            if (fullscreen && !document.fullscreenElement) {
+                try {
+                    const div = divRef.current;
+                    if (typeof div.requestFullscreen === "function") {
+                        await div.requestFullscreen();
+                    }
+                    else if (videoRef.current) {
+                        if (typeof videoRef.current.webkitEnterFullscreen ===
+                            "function") {
+                            await videoRef.current.webkitEnterFullscreen();
+                        }
+                        else if (typeof videoRef.current.requestFullscreen === "function") {
+                            await videoRef.current.requestFullscreen();
+                        }
+                    }
+                    setFullscreen(true);
+                }
+                catch (e) {
+                    console.error("fullscreen failed", e.message);
+                }
+            }
+            if (!fullscreen) {
+                if (document.fullscreenElement) {
+                    try {
+                        await document.exitFullscreen();
+                    }
+                    catch (e) {
+                        console.error("fullscreen exit failed", e.message);
+                    }
+                }
+                setFullscreen(false);
+            }
+        })();
+    }, [fullscreen, protocol]);
+    useEffect(() => {
+        const listener = () => {
+            console.log("fullscreenchange", document.fullscreenElement);
+            setFullscreen(!!document.fullscreenElement);
+        };
+        document.body.addEventListener("fullscreenchange", listener);
+        document.body.addEventListener("webkitfullscreenchange", listener);
+        return () => {
+            document.body.removeEventListener("fullscreenchange", listener);
+            document.body.removeEventListener("webkitfullscreenchange", listener);
+        };
+    }, []);
+    return (_jsx(View, { ref: divRef, children: _jsx(Video, {}) }));
+}

package/dist/components/mobile-player/fullscreen.native.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useNavigation } from "@react-navigation/native";
+import { useEffect, useRef, useState } from "react";
+import { BackHandler, Dimensions, StyleSheet, View } from "react-native";
+import { SystemBars } from "react-native-edge-to-edge";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { PlayerProtocol, useLivestreamStore, usePlayerStore } from "../..";
+import Video from "./video.native";
+// Standard 16:9 video aspect ratio
+const VIDEO_ASPECT_RATIO = 16 / 9;
+export function Fullscreen(props) {
+    const ref = useRef(null);
+    const insets = useSafeAreaInsets();
+    const navigation = useNavigation();
+    const [dimensions, setDimensions] = useState(Dimensions.get("window"));
+    // Get state from player store
+    const protocol = usePlayerStore((x) => x.protocol);
+    const fullscreen = usePlayerStore((x) => x.fullscreen);
+    const setFullscreen = usePlayerStore((x) => x.setFullscreen);
+    const handle = useLivestreamStore((x) => x.profile?.handle);
+    const setSrc = usePlayerStore((x) => x.setSrc);
+    useEffect(() => {
+        setSrc(props.src);
+    }, [props.src]);
+    // Re-calculate dimensions on orientation change
+    useEffect(() => {
+        const updateDimensions = () => {
+            setDimensions(Dimensions.get("window"));
+        };
+        const subscription = Dimensions.addEventListener("change", updateDimensions);
+        return () => {
+            subscription.remove();
+        };
+    }, []);
+    // Hide status bar when in fullscreen mode
+    useEffect(() => {
+        if (fullscreen) {
+            SystemBars.setHidden(true);
+            console.log("setting sidebar hidden");
+            // Hide the navigation header
+            navigation.setOptions({
+                headerShown: false,
+            });
+            // Handle hardware back button
+            const backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
+                setFullscreen(false);
+                return true;
+            });
+            return () => {
+                backHandler.remove();
+            };
+        }
+        else {
+            SystemBars.setHidden(false);
+            // Restore the navigation header
+            navigation.setOptions({
+                headerShown: true,
+            });
+        }
+        return () => {
+            SystemBars.setHidden(false);
+            // Ensure header is restored if component unmounts
+            navigation.setOptions({
+                headerShown: true,
+            });
+        };
+    }, [fullscreen, navigation, setFullscreen]);
+    // Handle fullscreen state changes for native video players
+    useEffect(() => {
+        // For WebRTC, we handle fullscreen manually via the custom implementation
+        if (protocol === PlayerProtocol.WEBRTC) {
+            return;
+        }
+        // For HLS and other protocols, sync with native fullscreen
+        if (ref.current) {
+            if (fullscreen) {
+                ref.current.enterFullscreen();
+            }
+            else {
+                ref.current.exitFullscreen();
+            }
+        }
+    }, [fullscreen, protocol]);
+    if (fullscreen && protocol === PlayerProtocol.WEBRTC) {
+        // Determine if we're in landscape mode
+        const isLandscape = dimensions.width > dimensions.height;
+        // Calculate video container dimensions based on screen size and orientation
+        let videoWidth;
+        let videoHeight;
+        if (isLandscape) {
+            // In landscape, account for safe areas and use available height
+            const availableHeight = dimensions.height - (insets.top + insets.bottom);
+            const availableWidth = dimensions.width - (insets.left + insets.right);
+            videoHeight = availableHeight;
+            videoWidth = videoHeight * VIDEO_ASPECT_RATIO;
+            // If calculated width exceeds available width, constrain and maintain aspect ratio
+            if (videoWidth > availableWidth) {
+                videoWidth = availableWidth;
+                videoHeight = videoWidth / VIDEO_ASPECT_RATIO;
+            }
+        }
+        else {
+            // In portrait, account for safe areas
+            const availableWidth = dimensions.width - (insets.left + insets.right);
+            videoWidth = availableWidth;
+            videoHeight = videoWidth / VIDEO_ASPECT_RATIO;
+        }
+        // Calculate position to center the video, accounting for safe areas
+        const leftPosition = (dimensions.width - videoWidth) / 2;
+        const topPosition = (dimensions.height - videoHeight) / 2;
+        // When in custom fullscreen mode
+        return (_jsx(View, { style: [
+                styles.fullscreenContainer,
+                {
+                    width: isLandscape ? dimensions.width + 40 : dimensions.width,
+                    height: dimensions.height,
+                },
+            ], children: _jsx(View, { style: [
+                    styles.videoContainer,
+                    {
+                        width: isLandscape ? videoWidth + 40 : videoWidth,
+                        height: videoHeight,
+                        left: leftPosition,
+                        top: topPosition,
+                    },
+                ], children: _jsx(Video, {}) }) }));
+    }
+    // Normal non-fullscreen mode
+    return (_jsx(_Fragment, { children: _jsx(Video, {}) }));
+}
+const styles = StyleSheet.create({
+    fullscreenContainer: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "#000",
+        zIndex: 9999,
+        elevation: 9999,
+        margin: 0,
+        padding: 0,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    videoContainer: {
+        position: "absolute",
+        backgroundColor: "#111",
+        overflow: "hidden",
+    },
+});