"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.VodSection = VodSection;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_native_1 = require("react-native");
const react_native_safe_area_context_1 = require("react-native-safe-area-context");
const ui_1 = require("../../ui");
const video_store_1 = require("../../video-store/video-store");
const vod_description_1 = require("./vod-description");
const vod_mobile_metadata_1 = require("./vod-mobile-metadata");
// VodSection is the VOD metadata block (title, author, likes, view count)
// plus the description below a divider line.
//
// With scrollDescription (mobile), the metadata header stays fixed and only the
// description scrolls, so the video above is always visible and a long
// description can't shrink the player. Without it (desktop), everything flows
// in the surrounding scroll view.
function VodSection({ scrollDescription = false, }) {
    const aturi = (0, video_store_1.useVideoStore)((x) => x.aturi);
    const { theme } = (0, ui_1.useTheme)();
    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
    if (!aturi) {
        return null;
    }
    const header = ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
            ui_1.py[4],
            ui_1.borders.bottom.width.thin,
            { borderBottomColor: theme.colors.border, width: "100%" },
        ], children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                ui_1.px[4],
                { maxWidth: 720, alignSelf: "center", width: "100%" },
            ], children: (0, jsx_runtime_1.jsx)(vod_mobile_metadata_1.VodMobileMetadata, {}) }) }));
    const description = ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
            ui_1.px[4],
            ui_1.py[4],
            { maxWidth: 720, alignSelf: "center", width: "100%" },
        ], children: (0, jsx_runtime_1.jsx)(vod_description_1.VodDescription, {}) }));
    if (scrollDescription) {
        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flex: 1, width: "100%" }, children: [header, (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { style: { flex: 1 }, contentContainerStyle: { paddingBottom: insets.bottom }, showsVerticalScrollIndicator: false, children: description })] }));
    }
    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { width: "100%" }, children: [header, description] }));
}
//# sourceMappingURL=vod-section.js.map