"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ContextMenu = ContextMenu;
exports.ReportButton = ReportButton;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const dropdown_menu_1 = require("@rn-primitives/dropdown-menu");
const expo_image_1 = require("expo-image");
const lucide_react_native_1 = require("lucide-react-native");
const react_1 = require("react");
const react_native_1 = require("react-native");
const react_native_reanimated_1 = tslib_1.__importStar(require("react-native-reanimated"));
const __1 = require("../../..");
const livestream_store_1 = require("../../../livestream-store");
const player_store_1 = require("../../../player-store/");
const graph_1 = require("../../../streamplace-store/graph");
const ui_1 = require("../../../ui");
const ui_2 = require("../../ui");
function ContextMenu({ dropdownPortalContainer, }) {
    const th = (0, ui_2.useTheme)();
    const quality = (0, player_store_1.usePlayerStore)((x) => x.selectedRendition);
    const setQuality = (0, player_store_1.usePlayerStore)((x) => x.setSelectedRendition);
    const mode = (0, player_store_1.usePlayerStore)((x) => x.mode);
    const vodLevels = (0, player_store_1.usePlayerStore)((x) => x.vodLevels);
    const playingVODRendition = (0, player_store_1.usePlayerStore)((x) => x.playingVODRendition);
    const liveRenditions = (0, livestream_store_1.useLivestreamStore)((x) => x.renditions);
    const qualities = mode === "vod" ? vodLevels : liveRenditions;
    const protocol = (0, player_store_1.usePlayerStore)((x) => x.protocol);
    const setProtocol = (0, player_store_1.usePlayerStore)((x) => x.setProtocol);
    const debugInfo = (0, player_store_1.usePlayerStore)((x) => x.showDebugInfo);
    const setShowDebugInfo = (0, player_store_1.usePlayerStore)((x) => x.setShowDebugInfo);
    const livestream = (0, livestream_store_1.useLivestreamStore)((x) => x.livestream);
    const setReportModalOpen = (0, player_store_1.usePlayerStore)((x) => x.setReportModalOpen);
    const setReportSubject = (0, player_store_1.usePlayerStore)((x) => x.setReportSubject);
    const isDevModeOn = (0, __1.useStreamplaceStore)((x) => x.danmuUnlocked);
    const latestSegment = (0, livestream_store_1.useLivestreamStore)((x) => x.segment);
    // get highest height x width rendition for video
    const videoRendition = latestSegment?.video?.reduce((prev, current) => {
        const prevPixels = prev.width * prev.height;
        const currentPixels = current.width * current.height;
        return currentPixels > prevPixels ? current : prev;
    }, latestSegment?.video?.[0]);
    const highestLength = videoRendition
        ? videoRendition.height < videoRendition.width
            ? videoRendition.height
            : videoRendition?.width
        : 0;
    // ugh i hate this
    const frames = videoRendition?.framerate;
    let fps = frames?.num && frames?.den
        ? Math.round((frames.num / frames.den) * 100) / 100
        : 0;
    if (!isDevModeOn && latestSegment?.video?.length) {
        fps = Math.round(fps);
    }
    const resolutionDisplay = highestLength
        ? `(${highestLength}p${fps > 0 ? fps : ""})`
        : "(Original Quality)";
    const profile = (0, __1.useAuthor)();
    const avatar = (0, __1.useAvatar)();
    const segment = (0, livestream_store_1.useLivestreamStore)((x) => x.segment);
    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
    // Get content rights from the latest segment
    const contentRights = segment?.contentRights;
    const contentWarnings = segment?.contentWarnings?.warnings || [];
    let graphManager = (0, graph_1.useGraphManager)(profile?.did);
    const lowLatency = protocol === "webrtc";
    const setLowLatency = (value) => {
        setProtocol(value ? player_store_1.PlayerProtocol.WEBRTC : player_store_1.PlayerProtocol.HLS);
    };
    // are we on mobile? then do dropdowns
    const isMobile = react_native_1.Platform.OS === "ios" || react_native_1.Platform.OS === "android";
    // dummy portal for mobile
    //const Portal: typeof DropdownMenuPortal = DropdownMenu;
    const DropdownMenuContent = ui_2.ResponsiveDropdownMenuContent;
    const iconRotate = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
        return {
            transform: [
                {
                    rotateZ: (0, react_native_reanimated_1.withTiming)(isOpen ? "240deg" : "0deg", {
                        duration: 650,
                        easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.ease),
                    }),
                },
            ],
        };
    });
    // rerender when dropdown portal container changes so we swap portals 'seamlessly'
    return ((0, jsx_runtime_1.jsxs)(ui_2.DropdownMenu, { onOpenChange: setIsOpen, children: [(0, jsx_runtime_1.jsx)(ui_2.DropdownMenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [iconRotate], children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.Cog, { color: th.theme.colors.foreground }) }) }), (0, jsx_runtime_1.jsxs)(DropdownMenuContent, { side: "top", align: "end", portalHost: dropdownPortalContainer, children: [react_native_1.Platform.OS !== "web" && ((0, jsx_runtime_1.jsxs)(ui_2.DropdownMenuGroup, { title: "Streamer", children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
                                    __1.zero.layout.flex.row,
                                    __1.zero.layout.flex.center,
                                    __1.zero.gap.all[3],
                                    { flex: 1, minWidth: 0 },
                                ], children: [avatar && ((0, jsx_runtime_1.jsx)(expo_image_1.Image, { source: {
                                            uri: avatar,
                                        }, style: { width: 42, height: 42, borderRadius: 999 }, contentFit: "cover" }, "avatar")), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flex: 1, minWidth: 0 }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                                                    __1.zero.layout.flex.row,
                                                    __1.zero.layout.flex.alignCenter,
                                                    __1.zero.gap.all[2],
                                                ], children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => {
                                                        if (profile?.handle) {
                                                            const url = `https://bsky.app/profile/${(0, __1.formatHandle)(profile)}`;
                                                            react_native_1.Linking.openURL(url);
                                                        }
                                                    }, children: (0, jsx_runtime_1.jsx)(ui_2.Text, { children: profile && (0, __1.formatHandleWithAt)(profile) }) }) }), (0, jsx_runtime_1.jsx)(ui_2.Text, { color: "muted", size: "sm", numberOfLines: 2, ellipsizeMode: "tail", children: (0, __1.useTitle)() })] })] }), (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuSeparator, {}), (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuItem, { disabled: graphManager.isLoading || !profile?.did, onPress: async () => {
                                    try {
                                        if (graphManager.isFollowing) {
                                            await graphManager.unfollow();
                                        }
                                        else {
                                            await graphManager.follow();
                                        }
                                    }
                                    catch (err) {
                                        console.error("Follow/unfollow error:", err);
                                    }
                                }, children: (0, jsx_runtime_1.jsx)(ui_2.Text, { color: graphManager.isFollowing ? "destructive" : "default", children: graphManager.isLoading
                                        ? "Loading..."
                                        : graphManager.isFollowing
                                            ? "Unfollow"
                                            : "Follow" }) }), (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuSeparator, {}), (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuItem, { onPress: () => {
                                    if (profile?.handle) {
                                        const url = `https://bsky.app/profile/${(0, __1.formatHandle)(profile)}`;
                                        react_native_1.Linking.openURL(url);
                                    }
                                }, children: (0, jsx_runtime_1.jsx)(ui_2.Text, { children: "View Profile on Bluesky" }) })] })), (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuGroup, { children: (0, jsx_runtime_1.jsxs)(ui_2.DropdownMenuSub, { children: [(0, jsx_runtime_1.jsx)(ui_2.DropdownMenuSubTrigger, { subMenuTitle: "Quality", children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
                                            __1.zero.flex.values[1],
                                            isMobile ? __1.zero.layout.flex.row : __1.zero.layout.flex.column,
                                            __1.zero.layout.flex.spaceBetween,
                                            __1.zero.pr[4],
                                        ], children: [(0, jsx_runtime_1.jsx)(ui_2.Text, { children: "Quality" }), (0, jsx_runtime_1.jsxs)(ui_2.Text, { muted: true, size: isMobile ? "base" : "sm", children: [quality === "source"
                                                        ? mode === "vod"
                                                            ? `Auto${playingVODRendition ? ` (${playingVODRendition})` : ""}\n`
                                                            : `Source${resolutionDisplay ? " " + resolutionDisplay + "\n" : ", "}`
                                                        : quality === "audio"
                                                            ? `Audio Only\n`
                                                            : quality, mode !== "vod" && lowLatency ? "Low Latency" : ""] })] }) }), (0, jsx_runtime_1.jsxs)(ui_2.DropdownMenuSubContent, { portalHost: dropdownPortalContainer, children: [(0, jsx_runtime_1.jsx)(ui_2.DropdownMenuGroup, { title: "Resolution", children: (0, jsx_runtime_1.jsxs)(ui_2.DropdownMenuRadioGroup, { value: quality, onValueChange: setQuality, children: [(0, jsx_runtime_1.jsx)(ui_2.DropdownMenuRadioItem, { value: "source", children: (0, jsx_runtime_1.jsxs)(ui_2.Text, { children: ["Source ", resolutionDisplay] }) }), qualities.map((r) => ((0, jsx_runtime_1.jsx)(ui_2.DropdownMenuRadioItem, { value: r.name, children: (0, jsx_runtime_1.jsx)(ui_2.Text, { children: r.name === "audio" ? "Audio Only" : r.name }) }, r.name)))] }) }), mode !== "vod" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ui_2.DropdownMenuGroup, { children: (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuCheckboxItem, { checked: lowLatency, onCheckedChange: () => setLowLatency(!lowLatency), children: (0, jsx_runtime_1.jsx)(ui_2.Text, { children: "Low Latency" }) }) }), (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuInfo, { description: "Reduces the delay between video and chat for a more real-time experience." })] }))] })] }) }), (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuGroup, { title: "Advanced", children: (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuCheckboxItem, { checked: debugInfo, onCheckedChange: () => setShowDebugInfo(!debugInfo), children: (0, jsx_runtime_1.jsx)(ui_2.Text, { children: "Show Debug Info" }) }) }), (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuGroup, { title: "Report", children: (0, jsx_runtime_1.jsx)(ReportButton, { livestream: livestream, setReportModalOpen: setReportModalOpen, setReportSubject: setReportSubject }) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [ui_1.pt[3], ui_1.px[2], ui_1.gap.all[2]], children: [contentWarnings && contentWarnings.length > 0 && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [ui_1.gap.all[1]], children: [(0, jsx_runtime_1.jsx)(ui_2.Text, { size: "base", color: "muted", children: "Stream may contain" }), (0, jsx_runtime_1.jsx)(__1.ContentWarnings, { warnings: contentWarnings, compact: true })] })), contentRights && Object.keys(contentRights).length > 0 && ((0, jsx_runtime_1.jsx)(__1.ContentRights, { contentRights: contentRights, size: "xs", color: "muted" }))] })] })] }, dropdownPortalContainer));
}
function ReportButton({ livestream, setReportModalOpen, setReportSubject, }) {
    const { onOpenChange } = (0, dropdown_menu_1.useRootContext)();
    return ((0, jsx_runtime_1.jsx)(ui_2.DropdownMenuItem, { onPress: () => {
            if (!livestream)
                return;
            onOpenChange?.(false);
            setReportModalOpen(true);
            setReportSubject({
                $type: "com.atproto.repo.strongRef",
                uri: livestream.uri,
                cid: livestream.cid,
            });
        }, children: (0, jsx_runtime_1.jsx)(ui_2.Text, { children: "Report Livestream..." }) }));
}
//# sourceMappingURL=viewer-context-menu.js.map