"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.VodMobileMetadata = VodMobileMetadata;
const jsx_runtime_1 = require("react/jsx-runtime");
const expo_image_1 = require("expo-image");
const react_native_1 = require("react-native");
const useAuthor_1 = require("../../hooks/useAuthor");
const useAvatar_1 = require("../../hooks/useAvatar");
const useTitle_1 = require("../../hooks/useTitle");
const streamplace_store_1 = require("../../streamplace-store");
const ui_1 = require("../../ui");
const video_store_1 = require("../../video-store/video-store");
const viewers_1 = require("../mobile-player/ui/viewers");
const sharesheet_1 = require("../share/sharesheet");
const ui_2 = require("../ui");
const text_1 = require("../ui/text");
const like_button_1 = require("./like-button");
const NARROW_BREAKPOINT = 480;
// rkeyFromAturi pulls the record key off an at:// URI
// (at://<did>/place.stream.video/<rkey>).
function rkeyFromAturi(aturi) {
    return aturi.split("/").pop() ?? "";
}
function VodMobileMetadata() {
    const video = (0, video_store_1.useVideoStore)((x) => x.video);
    const aturi = (0, video_store_1.useVideoStore)((x) => x.aturi);
    const title = (0, useTitle_1.useTitle)();
    const author = (0, useAuthor_1.useAuthor)();
    const avatar = (0, useAvatar_1.useAvatar)();
    const baseUrl = (0, streamplace_store_1.useUrl)();
    const { width } = (0, react_native_1.useWindowDimensions)();
    const { theme } = (0, ui_1.useTheme)();
    if (!video || !aturi)
        return null;
    const wide = width >= NARROW_BREAKPOINT;
    const handle = author?.handle ?? video.author.handle;
    const did = author?.did ?? video.author.did;
    const userSeg = handle || did;
    const rkey = rkeyFromAturi(aturi);
    // The video's canonical page + embed URLs, so Share actually links to this
    // VOD rather than the bare site root.
    const shareTarget = {
        url: `${baseUrl}/${userSeg}/video/${rkey}`,
        embedUrl: `${baseUrl}/embed/${userSeg}/video/${rkey}`,
        message: `Check out "${title || "this video"}" on Streamplace!`,
    };
    const handleText = ((0, jsx_runtime_1.jsx)(text_1.Text, { style: { color: theme.colors.textMuted, flexShrink: 0 }, children: handle ? `@${handle}` : did }));
    const actions = ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
            ui_1.layout.flex.row,
            ui_1.layout.flex.alignCenter,
            ui_1.gap.all[3],
            { flexShrink: 0 },
        ], children: [(0, jsx_runtime_1.jsx)(ui_2.Button, { variant: "secondary", size: "pill", width: "min", children: (0, jsx_runtime_1.jsx)(like_button_1.LikeButton, { subjectUri: video.uri }) }), wide ? ((0, jsx_runtime_1.jsx)(ui_2.Button, { variant: "secondary", size: "pill", width: "min", children: (0, jsx_runtime_1.jsx)(viewers_1.Viewers, {}) })) : null, (0, jsx_runtime_1.jsx)(sharesheet_1.ShareSheet, { target: shareTarget })] }));
    if (wide) {
        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { gap: 4 }, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [ui_1.layout.flex.row, ui_1.layout.flex.justify.start, ui_1.gap.all[3]], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
                            width: 40,
                            height: 40,
                            borderRadius: 999,
                            overflow: "hidden",
                            backgroundColor: theme.colors.muted,
                            flexShrink: 0,
                        }, children: avatar ? ((0, jsx_runtime_1.jsx)(expo_image_1.Image, { source: { uri: avatar }, style: { width: "100%", height: "100%" }, contentFit: "cover" })) : null }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [ui_1.layout.flex.row, ui_1.layout.flex.alignCenter, ui_1.gap.all[3]], children: (0, jsx_runtime_1.jsx)(text_1.Text, { weight: "semibold", numberOfLines: 1, ellipsizeMode: "tail", style: { flex: 1, minWidth: 0 }, children: title || "Untitled" }) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
                                    ui_1.layout.flex.row,
                                    ui_1.layout.flex.alignCenter,
                                    { flexWrap: "wrap", gap: 6 },
                                ], children: [handleText, actions] })] })] }) }));
    }
    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { gap: 6 }, children: [(0, jsx_runtime_1.jsx)(text_1.Text, { weight: "semibold", numberOfLines: 1, ellipsizeMode: "tail", children: title || "Untitled" }), handleText, (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: { gap: 6, alignItems: "center" }, children: actions })] }));
}
//# sourceMappingURL=vod-mobile-metadata.js.map