@wscsports/blaze-web-sdk 0.23.0 → 0.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wscsports/blaze-web-sdk",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "main": "publish/index",
   "types": "publish/index",
   "files": [

package/publish/index.d.ts

@@ -238,6 +238,7 @@ export declare class MomentEvent {
     'cc_state': string;
     'content_extra_info': string;
     'custom_action_button_name': string;
+    'follow_state': string | null;
 }
 export declare class WidgetEvent {
     'page_view_id': string;
@@ -460,6 +461,14 @@ export declare class EventsListener {
     removeAll(): void;
 }
 
+export declare class FollowingsManager {
+    private static followedEntities;
+    static isFollowing(entityId: string): boolean;
+    static initialize(followedList: string[]): void;
+    static follow(entityId: string): void;
+    static unfollow(entityId: string): void;
+}
+
 export declare class FullscreenManager {
     private isFullscreen;
     private isProgrammaticChange;
@@ -496,6 +505,7 @@ export * from './throttle';
 export * from './url';
 export * from './visiblity-manager.class';
 export * from './accessibility';
+export * from './followings-manager.class';
 
 export interface IBlazeWidgetLabel {
     readonly _type: 'BlazeWidgetLabel';
@@ -1073,10 +1083,53 @@ export declare class BlazeCtaButton extends BaseWidget {
     clearAllAnimations(): void;
 }
 
+export declare class BlazeFollowButton extends BaseWidget {
+    private playerStyle;
+    private containerEl;
+    private avatarEl;
+    private chipEl;
+    private chipContentWrapperEl;
+    private checkMarkIconEl;
+    private plusIconEl;
+    private textEl;
+    private _isFollowing;
+    private _entityId?;
+    private _entityType?;
+    private _avatarUrl?;
+    private _sourceId?;
+    private _sourceContentType?;
+    onToggle?: (e: Event, data: FollowingSharedContext) => void;
+    constructor(playerStyle: MomentPlayerStyle | undefined);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    setEntity(id: string | undefined, type?: BlazeFollowEntityType): void;
+    setAvatar(url: string | undefined): void;
+    setSource(sourceId: string, contentType: ContentType): void;
+    get entityId(): string | undefined;
+    get entityType(): BlazeFollowEntityType | undefined;
+    get isFollowed(): boolean;
+    private handleClick;
+    private handleStateChange;
+    private updateAriaLabel;
+    private onMouseEnter;
+    private onMouseLeave;
+    private setupContainer;
+    private handlePressKeyboard;
+    private setupAvatar;
+    private setupChip;
+    private setupIcons;
+    private updateIconVisibility;
+    private updateIconColors;
+    private applyStateToUi;
+    setAriaLabel(label: string): void;
+    private updateAvatarBackground;
+}
+
 export * from './share-button';
 export * from './button';
 export * from './cta-button';
 export * from './call-to-action.button';
+export * from './follow-button';
 
 export type ShareButtonType = 'copy-link' | 'linked-in';
 type AttributeType = 'size' | 'button-type';
@@ -1151,7 +1204,9 @@ export declare enum MomentAction {
     PlaybackInitialStart = "playback_initial_start",
     ClosedCaptionsOff = "cc_off",
     ClosedCaptionsOn = "cc_on",
-    CustomActionButtonClick = "custom_action_button_click"
+    CustomActionButtonClick = "custom_action_button_click",
+    Follow = "follow",
+    Unfollow = "unfollow"
 }
 export declare enum VideoAction {
     VideoStart = "video_start",
@@ -1236,6 +1291,8 @@ export declare const ASPECT_RATIO_16_9_STRING = "16 / 9";
 export declare const ASPECT_RATIO_9_16_STRING = "9 / 16";
 export declare const ASPECT_RATIO_4_3_STRING = "4 / 3";
 
+export declare const FOLLOW_BUTTON_STATE_CHANGE = "follow-button-state-change";
+
 export * from './accessibility.constants';
 export * from './ads.constants';
 export * from './analytics.constants';
@@ -1370,6 +1427,14 @@ export type ContentEntities = {
     teamId: string | null;
     playerId: string | null;
 };
+export type BlazeFollowEntity = {
+    storageFile: {
+        url: string;
+        fileSize: number | null;
+    };
+    entityType: BlazeFollowEntityType;
+    entityId: string;
+};
 export interface IContent {
     id: string;
     title: string;
@@ -1384,6 +1449,7 @@ export interface IContent {
     description?: string;
     closedCaptions?: IClosedCaption[];
     extraInfo: ExtraInfo;
+    followEntities?: BlazeFollowEntity[];
 }
 export interface IBlazeContent {
     id: string;
@@ -1646,7 +1712,8 @@ export interface IBlazeVideo extends IBlazeContent {
 }
 
 export declare enum ActionHandlerId {
-    AddCustomActionButton = "addCustomActionButton"
+    AddCustomActionButton = "addCustomActionButton",
+    AddFollowButton = "addFollowButton"
 }
 
 export declare enum ButtonState {
@@ -1776,6 +1843,7 @@ export interface WidgetsTagNameMap {
     'blaze-button': BlazeButton;
     'blaze-button-cta': BlazeCtaButton;
     'blaze-call-to-action-button': BlazeCallToActionButton;
+    'blaze-follow-button': BlazeFollowButton;
     'blaze-typography': BlazeTypography;
     'blaze-timer': BlazeTimer;
 }
@@ -1822,6 +1890,7 @@ interface WidgetsTagNameOptionsMap {
     'blaze-button': {};
     'blaze-button-cta': {};
     'blaze-call-to-action-button': {};
+    'blaze-follow-button': {};
     'blaze-typography': {};
 }
 export declare abstract class WidgetsFactory {
@@ -1881,6 +1950,7 @@ export declare const closedCaptionsOffIconSvg = "data:image/svg+xml;base64,PHN2Z
 export declare const shareVideosIconSvg = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjNWY2MzY4Ij48cGF0aCBkPSJNNjgwLTgwcS01MCAwLTg1LTM1dC0zNS04NXEwLTYgMy0yOEwyODItMzkycS0xNiAxNS0zNyAyMy41dC00NSA4LjVxLTUwIDAtODUtMzV0LTM1LTg1cTAtNTAgMzUtODV0ODUtMzVxMjQgMCA0NSA4LjV0MzcgMjMuNWwyODEtMTY0cS0yLTctMi41LTEzLjVUNTYwLTc2MHEwLTUwIDM1LTg1dDg1LTM1cTUwIDAgODUgMzV0MzUgODVxMCA1MC0zNSA4NXQtODUgMzVxLTI0IDAtNDUtOC41VDU5OC02NzJMMzE3LTUwOHEyIDcgMi41IDEzLjV0LjUgMTQuNXEwIDgtLjUgMTQuNVQzMTctNDUybDI4MSAxNjRxMTYtMTUgMzctMjMuNXQ0NS04LjVxNTAgMCA4NSAzNXQzNSA4NXEwIDUwLTM1IDg1dC04NSAzNVptMC04MHExNyAwIDI4LjUtMTEuNVQ3MjAtMjAwcTAtMTctMTEuNS0yOC41VDY4MC0yNDBxLTE3IDAtMjguNSAxMS41VDY0MC0yMDBxMCAxNyAxMS41IDI4LjVUNjgwLTE2MFpNMjAwLTQ0MHExNyAwIDI4LjUtMTEuNVQyNDAtNDgwcTAtMTctMTEuNS0yOC41VDIwMC01MjBxLTE3IDAtMjguNSAxMS41VDE2MC00ODBxMCAxNyAxMS41IDI4LjVUMjAwLTQ0MFptNDgwLTI4MHExNyAwIDI4LjUtMTEuNVQ3MjAtNzYwcTAtMTctMTEuNS0yOC41VDY4MC04MDBxLTE3IDAtMjguNSAxMS41VDY0MC03NjBxMCAxNyAxMS41IDI4LjVUNjgwLTcyMFptMCA1MjBaTTIwMC00ODBabTQ4MC0yODBaIi8+PC9zdmc+";
 export declare const linkIconSvg = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjNWY2MzY4Ij48cGF0aCBkPSJNNDQwLTI4MEgyODBxLTgzIDAtMTQxLjUtNTguNVQ4MC00ODBxMC04MyA1OC41LTE0MS41VDI4MC02ODBoMTYwdjgwSDI4MHEtNTAgMC04NSAzNXQtMzUgODVxMCA1MCAzNSA4NXQ4NSAzNWgxNjB2ODBaTTMyMC00NDB2LTgwaDMyMHY4MEgzMjBabTIwMCAxNjB2LTgwaDE2MHE1MCAwIDg1LTM1dDM1LTg1cTAtNTAtMzUtODV0LTg1LTM1SDUyMHYtODBoMTYwcTgzIDAgMTQxLjUgNTguNVQ4ODAtNDgwcTAgODMtNTguNSAxNDEuNVQ2ODAtMjgwSDUyMFoiLz48L3N2Zz4=";
 export declare const checkMarkSvg = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPG1hc2sgaWQ9Im1hc2swXzUxMl8xMDY4IiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPgo8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiNEOUQ5RDkiLz4KPC9tYXNrPgo8ZyBtYXNrPSJ1cmwoI21hc2swXzUxMl8xMDY4KSI+CjxwYXRoIGQ9Ik05LjU1MDEgMThMMy44NTAxIDEyLjNMNS4yNzUxIDEwLjg3NUw5LjU1MDEgMTUuMTVMMTguNzI1MSA1Ljk3NDk4TDIwLjE1MDEgNy4zOTk5OEw5LjU1MDEgMThaIiBmaWxsPSIjRjBGMEYwIi8+CjwvZz4KPC9zdmc+Cg==";
+export declare const plusSvg = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICA8bGluZSB4MT0iNS45NTcxOCIgeTE9IjEyIiB4Mj0iNS45NTcxOCIgeTI9IjMuOTM0MDNlLTA4IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjgiLz4KICAgICAgICA8bGluZSB5MT0iNS45NTcwNiIgeDI9IjEyIiB5Mj0iNS45NTcwNiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS44Ii8+CiAgICAgIDwvc3ZnPg==";
 
 export interface AccessibilityContext {
     trigger: 'user' | 'auto' | 'navigation' | 'modal';
@@ -1924,6 +1994,7 @@ export interface IContentWidgetButtons {
     prevStory?: HTMLElement;
     nextMoment?: HTMLElement;
     prevMoment?: HTMLElement;
+    follow?: HTMLElement;
 }
 export interface IContentWidgetData {
     id: string;
@@ -1933,6 +2004,7 @@ export interface IContentWidgetData {
     isLiked?: boolean;
     hasClosedCaptions?: boolean;
     ctaText?: string;
+    isFollowed?: boolean;
 }
 export interface IContentWidgetElements {
     widget: HTMLElement;
@@ -2004,6 +2076,7 @@ export interface IBlazeSDKOptions {
     layoutDirection?: LocaleDirectionType;
     shouldAllowClosedCaptions?: boolean;
     disableAutoLoadingContent?: boolean;
+    followedEntities?: string[];
 }
 
 export interface IButtonPlayerNavigationConfig {
@@ -2075,6 +2148,10 @@ export interface IDrawable {
     render: () => void;
 }
 
+export interface IFollowingsManager {
+    isFollowing(entityId: string): boolean;
+}
+
 export interface IHttpResponse<T = any> extends IResponse<T> {
     httpStatus?: number;
 }
@@ -2134,6 +2211,7 @@ export * from './data-source.interface';
 export * from './database.interface';
 export * from './device.interface';
 export * from './drawable.interface';
+export * from './followings-manager.interface';
 export * from './http-response.interface';
 export * from './icons.interface';
 export * from './logger.interface';
@@ -3262,6 +3340,24 @@ export type BlazeMomentsPlayerCtaStyle = {
     fontFamily: string;
     backgroundColor?: string;
     borderColor?: string;
+    isVisible: boolean;
+};
+type BlazeChipFollowStyle = {
+    followedBackgroundColor: string;
+    unfollowedBackgroundColor: string;
+    color: string;
+};
+type BlazeAvatarFollowStyle = {
+    borderWidth: string;
+    followedBorderColor: string;
+    unfollowedBorderColor: string;
+};
+export type BlazeMomentsPlayerFollowButtonStyle = {
+    isVisible: boolean;
+    variant: BlazeFollowButtonVariant;
+    followEntityTypePriority?: BlazeSelectableEntityType[];
+    avatar: BlazeAvatarFollowStyle;
+    chip: BlazeChipFollowStyle;
 };
 type BlazeMomentsPlayerCTAPositioning = 'CTA_BELLOW_BOTTOM_BUTTONS_BOX' | 'CTA_NEXT_TO_BOTTOM_BUTTONS_BOX';
 type BlazeMomentsPlayerCTAHorizontalAlignment = 'START' | 'CENTER' | 'END' | 'FULL_AVAILABLE_WIDTH';
@@ -3301,6 +3397,7 @@ export interface MomentPlayerStyle {
     contentBoxHorizontalSpacing: string;
     seekBar: BlazeMomentsPlayerSeekBarStyle;
     ctaButton: BlazeMomentsPlayerCtaStyle;
+    followButton: BlazeMomentsPlayerFollowButtonStyle;
 }
 export interface VideoPlayerStyle {
     headingText: BlazeVideosPlayerHeadingTextStyle;
@@ -3333,6 +3430,7 @@ export interface BlazeVideosPlayerCtaStyle {
     visibility: BlazeVideoPlayerVisibility;
     borderColor: string;
     horizontalAlignment: ButtonPositionType;
+    isVisible: boolean;
 }
 export type BlazeVideosPlayerCtaIconStyle = {
     position: 'START';
@@ -3356,6 +3454,7 @@ export interface CtaButtonStyle {
     width: string;
     height: string;
     position: ButtonPositionType;
+    isVisible: boolean;
     icon: IconStyle;
 }
 export interface IconStyle {
@@ -3400,9 +3499,12 @@ export type CustomActionButtonOptions = {
     buttonName: string;
     onClick: (e: MouseEvent | Event, data: ContentEntities | null) => void;
 };
+export type FollowButtonOptions = {
+    onClick: (e: MouseEvent | Event, data: FollowingSharedContext) => void;
+};
 export type ActionHandler = {
     actionId: `${ActionHandlerId}`;
-    options: CustomActionButtonOptions;
+    options: CustomActionButtonOptions | FollowButtonOptions;
 };
 
 export type AnimationType = 'Growing' | 'Shrinking' | 'BottomToTop';
@@ -3855,6 +3957,16 @@ export type ElementType = WidgetElementType | ComponentsElementType;
 
 export type EnvironmentType = 'prod' | 'uat' | 'local';
 
+export type BlazeFollowButtonVariant = 'icon' | 'text';
+export type FollowingSharedContext = {
+    sourceId: string;
+    sourceContentType: ContentType;
+    newFollowingState: boolean;
+    followEntity: Omit<BlazeFollowEntity, 'storageFile'>;
+};
+export type BlazeSelectableEntityType = 'Player' | 'Team' | 'Property' | 'FirstAvailable';
+export type BlazeFollowEntityType = Omit<BlazeSelectableEntityType, 'FirstAvailable'>;
+
 export type StoryGestureType = 'Swipe Up' | 'CTA Click';
 export type MomentGestureType = 'CTA Click';
 
@@ -3905,6 +4017,7 @@ export * from './widget-view-options.type';
 export * from './content-item.type';
 export * from './play-content-options.type';
 export * from './recommendations.type';
+export * from './follow-button.type';
 
 export type EntitiesType = 'playerId' | 'teamId' | 'gameId' | 'roundId';
 export type PerItemStyleOverrides = Partial<Record<EntitiesType, Array<{
@@ -4068,6 +4181,9 @@ export declare function transformContentsArray(items: ContentItem[]): BlazeConte
 type CountryCode = typeof CountryCodes[number];
 export declare function isValidCountryCode(countryCode: string): countryCode is CountryCode;
 
+export declare const getFollowEntityByPriority: (followEntityTypePriority?: BlazeSelectableEntityType[], followEntities?: BlazeFollowEntity[]) => BlazeFollowEntity | null;
+export declare const generateFollowStateForAnalytics: (entityId?: string, entityType?: BlazeFollowEntityType, followingsManager?: IFollowingsManager) => string | null;
+
 export declare function GuardNullOrEmpty(name: string, value: any): void;
 export declare function isStory(content: IContent): content is IStory;
 
@@ -6264,6 +6380,7 @@ export declare class BlazeWidgetMoment extends BlazeWidgetContent {
     headElement: BlazeDiv;
     bodyElement: BlazeDiv;
     ctaButtonElement: BlazeCtaButton;
+    followButtonElement?: BlazeFollowButton;
     isInit: boolean;
     isActive: boolean;
     isMomentPausedByPlayPauseButton: boolean;
@@ -6304,6 +6421,7 @@ export declare class BlazeWidgetMoment extends BlazeWidgetContent {
     configureButtons(): Promise<void>;
     appendButtonsContainer(): void;
     handleMobileSpecificFeatures(): void;
+    configureFollowButton(): void;
     configureContentBody(): void;
     appendBottomContainer(): void;
     private updateLayoutPositioning;
@@ -6341,6 +6459,7 @@ export declare class BlazeWidgetMoment extends BlazeWidgetContent {
     handleOnCustomActionButtonClick(e: MouseEvent, handlerOptions: CustomActionButtonOptions): void;
     handleOnClose(): void;
     handleOnLikeClick(): void;
+    handleFollowAnalytics(data: FollowingSharedContext): void;
     pause(): void;
     resume(): void;
     removeResumeButtonFromScreen(): void;