FacePop Object

/**
 * Defines the complete configuration for a FacePop video widget.
 * This object holds all settings related to its appearance, behavior,
 * video source, calls-to-action (CTAs), and branding.
 */
export type FacePop = {
    /**
     * A unique identifier for this specific FacePop widget instance.
     * e.g., 'fp-abc123xyz'
     */
    id: string;

    /**
     * The identifier of the company account this widget belongs to.
     */
    companyId: string;

    /**
     * The identifier of the workspace within the company this widget is associated with.
     */
    workspaceId: string;

    /**
     * The internal name of the widget, used for identification in a dashboard.
     * e.g., 'Homepage Welcome Video'
     */
    name: string;

    /**
     * The identifier of the user who created this widget.
     */
    authorId: string;

    /**
     * Optional identifier if the widget belongs to a specific content library.
     */
    libraryId?: string;

    /**
     * Determines which side of the screen the widget will be anchored to.
     */
    placement: 'left' | 'right';

    /**
     * The type of shadow effect to apply to the widget container for depth.
     * 'no-shadow': No shadow.
     * 'dim': A subtle, soft shadow.
     * 'medium': A standard, more noticeable shadow.
     * 'spotlight': A strong shadow to make the widget stand out.
     */
    shadow: 'no-shadow' | 'dim' | 'medium' | 'spotlight';

    /**
     * The main headline text displayed on the widget.
     */
    title: string;

    /**
     * The secondary or body text displayed below the title.
     */
    description: string;

    /**
     * The CSS `z-index` property. Controls the stacking order of the widget on the webpage
     * to ensure it appears above or below other elements.
     */
    zIndex: number;

    /**
     * Settings for the margin or spacing around the widget from the screen edges.
     */
    JMargin: {
        /**
         * The vertical margin from the top or bottom of the viewport.
         * e.g., '20px'
         */
        vertical: string;
        /**
         * The horizontal margin from the left or right of the viewport.
         * e.g., '20px'
         */
        horizontal: string;
    };

    /**
     * Configuration for the main video player component.
     */
    JPlayer: {
        /**
         * The width of the video player window. Must be a string ending in 'px'.
         */
        width: `${number}px`;
        /**
         * The height of the video player window. Must be a string ending in 'px'.
         */
        height: `${number}px`;
        /**
         * Defines the visibility of the player controls (play/pause, volume, seeker).
         */
        controls: 'show' | 'hide' | 'hover-only';
        /**
         * Determines how the player opens.
         * 'center': Opens in a modal-like view in the center of the screen.
         * 'corner': Expands in place from its corner position.
         */
        openMode: 'center' | 'corner';
        /**
         * If true, the video will automatically restart after it finishes.
         */
        loopVideo: boolean;
        /**
         * If true, the video will be muted by default when it starts playing.
         */
        startMuted: boolean;
        /**
         * The border radius for the corners of the player window. Must be a string ending in 'px'.
         */
        borderRadius: `${number}px`;
        /**
         * The size of the control icons (e.g., play/pause). Must be a string ending in 'px'.
         */
        controlsSize: `${number}px`;
        /**
         * The height of the video progress/seeker bar. Must be a string ending in 'px'.
         */
        seekerHeight: `${number}px`;
        /**
         * A string identifier or URL for a custom minimize icon.
         */
        minimizeIcon: string;
        /**
         * If true, the video will automatically enter fullscreen mode when played on mobile devices.
         */
        fullScreenMobile: boolean;
    };

    /**
     * An array of Call-to-Action (CTA) objects to be displayed on the widget.
     * The structure of each CTA is flexible, hence `any[]`. It would typically contain
     * properties like `type`, `text`, `url`, `color`, etc.
     */
    JCTAS: any[];

    /**
     * Settings that govern the behavior and visibility of the Call-to-Actions.
     */
    JCTASettings: {
        /**
         * Determines when the CTAs become visible during video playback.
         */
        showAt: 'always' | 'after-begin' | 'before-end' | 'after-end' | 'never';
        /**
         * Defines what happens to the widget after a user successfully interacts with a CTA (e.g., clicks a link).
         */
        onConversion: 'do-nothing' | 'hide-widget';
    };

    /**
     * Properties for the initial button or "bubble" that the user clicks to open the main widget.
     */
    JToggle: {
        /**
         * The border radius of the toggle button. A high value makes it circular. Must be a string ending in 'px'.
         */
        borderRadius: `${number}px`;
        /**
         * The width of the toggle button. Must be a string ending in 'px'.
         */
        width: `${number}px`;
        /**
         * The height of the toggle button. Must be a string ending in 'px'.
         */
        height: `${number}px`;
        /**
         * Controls the visibility of the play icon on the toggle button.
         */
        playButton: 'hide' | 'show' | 'hover-only';
        /**
         * If true, the main widget will have a close button.
         */
        closeable: boolean;
    };

    /**
     * Contains all information about the video source itself.
     */
    JVideo: {
        /**
         * The unique identifier for the video asset.
         */
        videoId: string;
        /**
         * The identifier for the library the video belongs to.
         */
        libraryId: string;
        /**
         * The aspect ratio of the video, as a string. e.g., '16:9'.
         */
        ratio: string;
        /**
         * The original width of the video source. e.g., '1920'.
         */
        width: string;
        /**
         * The original height of the video source. e.g., '1080'.
         */
        height: string;
        /**
         * The direct URL to the video file (e.g., an MP4).
         */
        sourceURL: string;
        /**
         * URLs for the video's thumbnail images.
         */
        thumbnail: {
            /**
             * URL for a static thumbnail image (e.g., a JPG or PNG).
             */
            static: string;
            /**
             * URL for an animated thumbnail (e.g., a GIF).
             */
            animated: string;
        }
    };

    /**
     * Information about the author or person featured in the video.
     */
    JAuthor: {
        /**
         * The full name of the author.
         */
        fullName: string;
        /**
         * The author's job title or occupation.
         */
        occupation: string;
        /**
         * URL to the author's profile picture.
         */
        picture: string;
    };

    /**
     * A collection of all color settings for theming the widget.
     * Each property holds a color value (e.g., '#FFFFFF' or 'rgba(0,0,0,0.5)').
     */
    JColorStudio: {
        title: string;
        shadow: string;
        ctaIcon: string;
        ctaText: string;
        overlay: string;
        authorName: string;
        ctaOutline: string;
        togglePlay: string;
        toggleCloseIcon: string;
        toggleCloseBorder: string;
        toggleCloseBackground: string;
        description: string;
        playerSeeker: string;
        ctaBackground: string;
        playerControls: string;
        authorOccupation: string;
        centerModeBackground: string;
        iframeBackButton: string;
        loadingBackground: string;
        loadingSpinner: string;
    };

    /**
     * A collection of all font and typography settings.
     */
    JFontStudio: {
        /**
         * The font size for CTA buttons. Must be a string ending in 'px'.
         */
        ctaSize: `${number}px`;
        /**
         * The font size for the main title. Must be a string ending in 'px'.
         */
        titleSize: `${number}px`;
        /**
         * The CSS `font-family` to be used for text in the widget. e.g., 'Arial, sans-serif'.
         */
        fontFamily: string;
        /**
         * The font size for the author's name. Must be a string ending in 'px'.
         */
        authorNameSize: `${number}px`;
        /**
         * The font size for the description text. Must be a string ending in 'px'.
         */
        descriptionSize: `${number}px`;
        /**
         * The font size for the author's occupation. Must be a string ending in 'px'.
         */
        authorOccupationSize: `${number}px`;
    };

    /**
     * An array for instant embed configurations. This might be used for embedding
     * content like calendars or forms directly within the widget's CTA flow.
     */
    JInstantEmbed: Array;

    /**
     * Settings related to actions that happen when the toggle is first loaded or interacted with.
     */
    JONToggle: {
        /**
         * If true, the video will start playing automatically as soon as the widget is opened.
         */
        autoplay: boolean;
    };


    /**
     * Optional property to hold runtime-specific state or data. This is
     * populated by the widget's script when it's live on a page and not
     * stored in the database.
     */
    JRuntime?: any;

    /**
     * A string containing custom CSS rules to be injected for advanced styling of the widget.
     */
    customCSS: string;

    /**
     * A string containing custom JavaScript code to be executed for advanced functionality.
     */
    customJS: string;

    /**
     * If true, enables navigation and control of the widget using the keyboard for accessibility.
     */
    keyboardControls: boolean;

    /**
     * If true, enables the JavaScript SDK for programmatic control of the widget (e.g., `facepop.play()`).
     */
    enableSDK: boolean;

    /**
     * If true, enables analytics and event tracking for the widget's performance.
     */
    enableTracking: boolean;

    /**
     * If true, shows the "Answerly" (the service provider) branding on the widget.
     * Set to false for a white-labeled experience.
     */
    answerlyBranding: boolean;
}