Koleznevdfgsdfgfsdgsdf NPM

VXMESSENGER

This project is about providing messaging and video interactions for the customers of VISIT-X, the german leading Live Sex Cams & Sexchat Community.

Release Notes

Properties for our messenger:

id? string - unique identification for the configured instance of messenger.
language string - case insensitive (en, de, es, EN, DE, ES). This value is mandatory.
Note: Please note that when obtaining "clientId" + "server" pair (in case one wants to start the messenger this way), the same language should be passed to the appropriate service. Otherwise, some of the messages we are getting ( and displaying) from the vchat-core will come in default language (en), producing an unpleasant mix.
initialVideoChatType?: "LIVECHAT", "FREECHAT", "LIVE_PREVIEW", "VOYEUR_CHAT", "NO_DOWNSTREAM", "GROUP_CHAT" - if the parent platform sets this value, the newly-opened messenger will start directly in the given active stream. This feature is independent to clientId, as it can be used with both clientId or webtoken. This property can be used when the client clicks on a "Start voyeur" button from the parent platform and the messenger will start with initialVideoChatType with "VOYEUR_CHAT". If no value is set, the messenger will start in its minified state, without any stream.
theme?: PartialTheme - if this value is set, the parent platform can completely configure messenger's appearance to the client. It contains information about the font (type, dimensions), the dimensions for certain elements and all the colors used in the messenger. Each color property is a string and expects the color in hexa value. If no value is set for colors or dimensions, the fallback theme will be the design from visit-x.
preferenceStore?: IPreferenceStore - this property represents the custom implementation for handling preferences of the VXMessenger. interface IPreferenceStore requires the implementation of two functions getPreference: ( preferenceName: PreferenceName) => boolean | number | undefined, and setPreference: (preferenceName: PreferenceName, value: boolean | number, instanceId?: string) => void. This property is optional, if no property is passed to VXMessenger the default implementation will apply.
connection: ConnectionWithToken | ConnectionWithChat - this property represents the data that initiates the messenger's workflow - webtoken type of connection or clientId and server type. The first type of connection ( ConnectionWithToken) will contain the webtoken, userKey and partner's information (key and id) and will use the vxcontrol-client-lib as main API. The second type of connection (ConnectionWithChat) will contain the clientId and server and won't use the vxcontrol-client-lib, only the vchat-core and vchat-player. This second type of connection is going to be used only when the messenger must start in an active stream, therefore, the initialVideoChatType property should have a value set.
hasGiftsSectionOpened: boolean | GiftCategory - to start messenger with opened gift section set this value to true. To open any gifts tab assign some special to this value (for example, GiftCategory.LOVE). GiftCategory - is enum and exported directly from messenger.
features?: Features - contains all the togglable features of the messenger, in order to ensure flexibility. All properties are of type boolean and if the value is true, that implies that the functionality is going to be present in the messenger. Our togglable features are:
- hasFavorite?: boolean - if the favorite icon (near model's name) is rendered. (default true)
- hasGifts?: boolean - if it has the ability of sending gifts. (default true)
- hasTips?: boolean - if it has the ability of sending tips and the anonymous tip functionality when starting a voyeur chat session. (default false)
- hasEmoticons?: boolean - if it has the ability of sending emoticons. (default true)
- hasToyControl?: boolean - if it has the toy control feature activated. (default true)
- hasImageUpload?: boolean - if it has the ability of uploading images. (default true)
- hasGroupChatIndicator?: boolean - if it renders the number of participants in a group chat(default true)
- hasContactNote?: boolean - if the contact note (near model's name) is rendered. (default true)
- hasExitPopups?: boolean - if on any type of exit (for instance when closing the videochat) would use messenger's implemented popups to inform the client. Some content partners would desire using their own popups/behaviors to be executed. (default true)
- hasModelProfilePicture?: boolean - model's profile picture is rendered. (default true)
- hasModelName?: boolean - model's name is rendered. (default true)
- hasModelMotto?: boolean - model's motto is rendered. (default true)
- hasCam2Cam?: boolean - when having an active stream, cam2cam button is rendered. (default true)
- hasVoyeur?: boolean - if voyeur button is rendered. (default true)
- hasPrivateChat?: boolean - when having an active stream, private chat button is rendered. (default true)
- hasCloseButton?: boolean - the X button on the top right corner is rendered. (default true)
- hasSendMessageButton?: boolean - on true, the button for sending messages to the model will be rendered. ( default true)
- hasFullscreen?: boolean - when having an active stream, the client has the fullscreen option. (default true)
- hasHistoryMessages?: boolean - when opening the messenger, in the chatbox we will render the past conversations between the client and the model. (default true)
- hasHistorySectionsOpened?: boolean - when opening the chatbox, the message section are already opened. ( default true)
- hasPreloaderPaymentText?: boolean - if this flag is true, there will be no text displayed above loading pre-loader. (default true)
- hasBehaviorOnClickOutside?: boolean - if this flag is true, the messenger (in text mode) will close when clicking outside. (default true)
- hasMessagesGrouped?: boolean - the history messages are grouped together based on their previous livechat sessions. (default true)
- isMessageTypeHeader?: boolean - text chat messenger has a customized header, to be applied on visit-x integration only. (default false)
- hasAudioMessages?: boolean - the messenger will have the functionality of sending audio messages to the model. ( default false)
- hasGroupChatClientName?: boolean - in a group chat session, a message sent by the client will contain its own name/alias. (default false)
- hasFullscreenLayoutOnLandscape?: boolean - when the stream starts and the container has landscape sizes, the messenger will be using the fullscreen layout. (default false)
- hasProductionDebugEnabled?: boolean - we will have access to production debug information in order to solve live errors more efficiently. ( default false)
- showCensoredContent?: boolean - if it has the ability to view censored content. (default true)
options?: Options - contains very specific configurable properties when desiring a certain behavior for the messenger.
- updateBrowserLink?: string - if this value is set, the parent platform can personalize the message for Cam2Cam button when is used on Internet Explorer. When the messenger is rendered on Internet Explorer, the client can't use the Cam2Cam feature, therefore the button is disabled with some information about this issue. Part of this information is the update browser link, which can be set through this property.
- analyticsKey?: string - represents your Google Analytics key and if this value is set, you will be able to visualize the default trackers implemented in our library.
- preloader?: string - represents image's CDN address that is going to be used as a pre-loader for starting a stream. This property is used for branding the messenger for a content partner. If no value is set, the fallback preloader is going to be a three-dots animation.
- tip?: ITipOption - content partners starting a chat-based video session have the tipping feature active, but in order for it to work, some information are needed from the mother platform: amount of a tip, associated currency and an image associated to the tip (defaults some green bank-notes). That info will be rendered on the confirmation tip pop-up.
- switchToPortraitWidth?: number - max width in pixels after which the messenger is rendered in landscape mode.
- initialVideochatVolume?: number - when the stream will start, the initial volume will be set by this property. The value must be any number from 0 to 1. If the value is set on 0, the stream will start muted. If no value is set, the stream will start normally.
- censoredContentImage?: string - represents image's CDN address that is going to be used as the cover for censored content. If no value is set, the default image is going to be shown.
- useInjectableHlsPlayer?: boolean - allows integrators to provide their own implementation of the HLS player. If not provided, will call a onClickVideo hook with hls: string, poster: string arguments (this is default behavior). When set to true, you can customize the inlined player by providing custom implementation for component. See hooks.renderHlsPlayer for custom implementation.
hooks?: Hooks - functions, in which the parent platform can implement a behavior on certain events. They represent a way of communication between the messenger and the parent platform. All the functions are nullable.
- onClickProfile? - will execute the logic inside the function when client clicks on model's name or profile picture;
- onClickImage? - will execute this logic when user click an image, instead of simply opening the image in the default viewer; useful for platforms willing to have their own image viewers
- onClickVideo? - will be called when user is clicking a video message; if not specified, video won't play, messenger has no player embedded inside. Is not called when options.useInjectableHlsPlayer is set to true.
- onExit? - will execute the logic inside the function when the messenger will close, irrespective to its cause. It will contain an exitCode in order to reflect the reason for which the messenger has been closed;
- onRecharge? - will execute the logic inside the function if messenger's recharge mechanism is not working;
- onVideoChatAction? - will execute the logic inside the function when any type of stream changes its type from active to inactive or from inactive to active. It will return a flag if the video is open and, optionally, a value for chatId when closing the stream.
- onExitPopupAction? - will execute the logic inside the function when exit pop-ups (if having this feature set on) are displayed or hidden;
- onAgeVerification? - will execute the logic inside the function when messenger would need to verify the age of the client. The messenger as an application does not know how to apply age verification, so it's going to rely on the parent platform;
- onModelStatusChange? - will execute the logic inside the function when the model goes from online to offline or from offline to online. Any change in model's online status will trigger this function;
- onSupportedVideoChatTypes? - will execute the logic inside the function when the messenger is opened. It will return the array of possible streams with the model. For instance, "LIVECHAT", "LIVE_PREVIEW", "VOYEUR_CHAT" if all the streams are possible.
- onFailedChatConfig? - will execute the logic inside the function when the messenger has been started with the clientId and server as connection, but starting the stream has failed and returned with an error. This error is going to be returned as a parameter;
- onFailedWebToken? - will execute the logic inside the function when the messenger finds the provided web token not usable (or not usable anymore - e.g. token has expired);
- onBecomeVIP? - functionality for setting the current client as a VIP member to your platform.
- onNewIncomingMessage? - will execute the logic inside the function when new message from the model was received.
- onClickLobbyChat - will be executed when the user clicks on "Live Show"
- renderHlsPlayer?: (props: { hls?: string; poster?: string, isTranscoding?: boolean }) => React.ReactNode - can be used to render custom HLS player inlined in the messenger. Has to return a React component or plain HTML element. If not provided, messenger will fallback to HTML5 <video> element, which does not have a 100% support for HLS within various browsers.

Interfaces and enumerators for messenger's properties:

interface ConnectionWithToken {
	webToken: string;
	partner: Partner;
	userKey?: string;
}

interface ConnectionWithChat {
	clientId: string;
	server: string;
}

interface Partner {
	id: string;
	key: string;
}

enum GiftCategory {
	INVENTORY = -1,
	LOVE = 1,
	WINTER = 2,
	SUMMER = 3,
	FETISH = 4,
	BUNDLES = Infinity,
}

interface Features {
	hasFavorite: boolean;
	hasGifts: boolean;
	hasTips: boolean;
	hasEmoticons: boolean;
	hasToyControl: boolean;
	hasImageUpload: boolean;
	hasGroupChatIndicator: boolean;

	hasSendMessageButton: boolean;
	hasContactNote: boolean;
	hasExitPopups: boolean;
	hasModelProfilePicture: boolean;
	hasModelName: boolean;
	hasModelMotto: boolean;
	hasCam2Cam: boolean;
	hasVoyeur: boolean;
	hasPrivateChat: boolean;
	hasCloseButton: boolean;
	hasFullscreen: boolean;
	hasHistorySectionsOpened: boolean;
	hasHistoryMessages: boolean;
	hasMessagesGrouped: boolean;
	hasPreloaderPaymentText: boolean;
	hasBehaviorOnClickOutside: boolean;

	isMessageTypeHeader?: boolean;
	hasAudioMessages?: boolean;
	hasGroupChatClientName?: boolean;
	hasFullscreenLayoutOnLandscape?: boolean;
	hasProductionDebugEnabled?: boolean;
	showCensoredContent?: boolean;
}

interface Theme {
	name: string;
	typography: {
		fontFamily: string;
		secondaryFontFamily: string;
		weight: {
			thin: number;
			light: number;
			regular: number;
			medium: number;
			bold: number;
		};
	};

	layout: {
		textMode: {
			minWidth: number;
			minHeight: number;
		};
		messageSection: {
			responsiveBreakpointWidth: number;
			scrollBar: number;
		};
	};

	colors: {
		overlay: string;
		baseButtonIcon: string;
		recordingIcon: string;
		audioPlayerBackground: string;
		audioPlayerTime: string;
		audioPlayerPlay: string;
		audioPlayerKnob: string;
		audioPlayerRail: string;
		audioPlayerControlDisabled: string;
		fontSwitcherIcon: string;
		sendMessageButton: string;
		cancelRecordingHover: string;
		cam2CamBackgroundColor: string;
		cam2CamDisabledColor: string;
		cam2CamHoverColor: string;
		messengerWrapper: string;
		messengerClose: string;
		messengerSettings: string;
		messengerLoader: string;
		messageEditorBackgroundColor: string;
		messageEditorPlaceholderColor: string;
		messageEditorTextColor: string;
		mentionBackground: string;
		mentionHeaderText: string;
		mentionHeaderBackground: string;
		mentionHeaderBorderColor: string;
		mentionSectionBackground: string;
		paidMessageBuyButtonText: string;
		paidMessageBuyButtonBackground: string;
		paidMessageBuyButtonDisabledBackground: string;
		paidMessageLabelText: string;
		videoMessageTimeText: string;
		headerText: string;
		headerShadow: string;
		typing: {
			text: string;
			background: string;
			shadow: string;
		};

		typingBackground: string;

		settings: {
			text: string;
			textDisabled: string;
			shadow: string;
			divider: string;
			delete: string;
			selectedCameraIcon: string;
		};

		groupChat: {
			modelInfoText: string;
			pictureBorder: string;

			userMessageText: string;
			userMessageBackground: string;
			usernameColorSet: string[];

			modelMessageText: string;
			modelMessageBackground: string;
			modelMessageUsername: string;

			clientMessageText: string;
			clientMessageBackground: string;
			clientName: string;

			participants: {
				bgColor: string;
				textColor: string;
			};
		};

		vipLivePreviewButton: {
			background: string;
			text: string;
		};

		chatBoxContainer: string;
		imageUrlContent: string;
		groupColor: string;
		groupTextColor: string;
		profileLink: string;
		profileLinkHover: string;
		profileMotto: string;
		messengerButtonInvertedBackground: string;
		messengerButtonHover: string;
		messengerButtonInvertedText: string;
		windowBackground: string;
		windowItemsShadow: string;
		windowPaginatorBackground: string;
		clientMessageBackground: string;
		fullscreenSystemMessageBackground: string;
		fullscreenSystemMessageText: string;
		modelMessageBackground: string;
		messageText: string;
		messageTextDeleted: string;
		messageTimeAgo: string;
		messageReadIndicator: string;
		messageUploadOverlay: string;
		videoChatBackground: string;
		videoChatControlsBackground: string;
		videoChatControlsBackgroundHover: string;
		videoChatControlsText: string;
		privateTicketShow: {
			background: string;
			divider: string;
		};

		onlineBulletColor: string;
		offlineBulletColor: string;

		purchaseButton: {
			defaultBackground: string;
			paidBackground: string;
			disabledBackground: string;

			defaultText: string;
			paidText: string;
		};

		selectedButton: {
			defaultBackground: string;
			defaultBackgroundHover: string;

			blackBackground: string;
			blackBackgroundHover: string;

			defaultDropDownBackground: string;
			blueBackgroundHover: string;
			greyBackgroundHover: string;

			text: string;
			clickHighlight: string;
		};

		initiallyMutedButtonBackground: string;
		initiallyMutedToolTipContentText: string;

		checkedStrokeColor: string;
		checkedFillColor: string;

		dropDownContentBgColor: string;

		timerFillColor: string;
		timerUnfillColor: string;
		timerBgColor: string;
		timerTextColor: string;

		livePreviewTimer: {
			fillColor: string;
			unfillColor: string;
			bgColor: string;
			textColor: string;
		};

		editor: {
			background: string;
			text: string;
			placeholder: string;
		};

		giftPageTitle: string;
		giftPageText: string;
		giftOldPrice: string;

		avsCam2CamPopup: {
			backgroundColor: string;
			smallTextColor: string;
			mainTextColor: string;
			button: {
				standard: string;
				onHover: string;
				textColor: string;
			};
		};

		deleteMessagePopup: {
			background: string;
			titleText: string;
			text: string;
			deleteButton: {
				standard: string;
				hover: string;
				text: string;
			};
			cancelButton: {
				standard: string;
				border: string;
				hover: string;
				text: string;
			};
		};

		preChatPopup: {
			backgroundColor: string;
			textColor: string;
		};

		actionResponse: {
			warningColor: string;
			errorColor: string;
			successfulColor: string;
			neutralColor: string;
		};

		userPrompt: {
			tipColor: string;
			tipPriceColor: string;
			tipButtonColor: string;
			tipButtonBackgroundColor: string;
			tipButtonBackgroundHoverColor: string;
		};
		
		modal: {
			closeButtonColor: string;
			backgroundColor: string;
		};

		toySection: {
			primaryColor: string;
			secondaryColor: string;
			lock: string;
			text: string;
			hoverTooltipText: string;
			headerSectionBackground: string;
			headerSectionBorderColor: string;
			optionText: string;
			headerSectionLink: string;
			inactiveToyMessageText: string;
		};

		informationDialog: {
			title: string;
		};

		messageTypeHeader: {
			modelTitle: string;
			title: string;
			subtitle: string;
		};

		cameraSelection: {
			option: {
				defaultColor: string;
				selectedColor: string;
			};
		};

		mobileMenuWrapper: {
			backgroundColor: string;
			borderColor: string;
			itemBorderColor: string;
			lastItemBorderColor: string;
			itemWrapperColor: string;
		};

		noteButton: string;
		favoriteButton: string;
		giftsCloseButton: string;
		ban: {
			text: string;
			timer: string;
			divider: string;
		};

		messageMenu: {
			background: string;
			delete: string;
			shadow: string;
			longPressOverlay: string;
			longPressBackground: string;
		};
		reactions: {
			background: string;
			deleteText: string;
			primaryText: string;
		};
		progress: {
			background: string;
			bar: string;
		};
		uploadProgress: {
			circle: string;
			text: string;
			background: string;
		};
		scrollBar: {
			normal: string;
			hovered: string;
		};
	};
}

interface Hooks {
	onClickProfile?: () => void;
	onClickImage?: (src: string, srcSet: string) => void;
	onClickVideo?: (hlsUrl: string, posterUrl: string) => void;
	onExit: (code?: ExitCode, message?: string, chatFlags?: string[], chatType?: EndChatType) => void;
	onRecharge?: () => void;
	onVideoChatAction?: (isVideoChatOpen: boolean, chatId?: string) => void;
	onExitPopupAction?: (isExitPopupOpen: boolean, code?: ExitCode,	message?: string, chatType?: EndChatType) => void;
	onAgeVerification?: () => void;
	onModelStatusChange?: (isOnline: boolean) => void;
	onSupportedVideoChatTypes?: (videoChatTypes: VideoChatType[]) => void;
	onFailedChatConfig?: (error: any) => void;
	onFailedWebToken?: (error?: any) => void;
	onBecomeVIP?: () => void;
	onClickLobbyChat?: () => void;
	renderHlsPlayer?: (props: { hls?: string; poster?: string }) => React.ReactNode
}

Methods exposed by VXMessenger:

closeMessenger - will clean up the messenger: close opened sockets and reset the Redux store. Note: Before sending a new clientId and server, we advise calling the "closeMessenger" function, otherwise the messenger won't react to the newly received values. The correct steps would be: 1.) Send initial clientId & server to the vxmessenger 2.) Call the closeMessenger function for a clean new state of the messenger, when you want to send new connection values 3.) Send the new clientId & server to the vxmessenger

Exit Codes

If you want to configure certain behaviors on the "onExit" hook based on the incoming exit code, this information can be found inside the resources presented down below.

Tips & Tricks

Pressing CTRL+ALT+V (Windows) or CTRL+OPTIONS+V (Mac) will show the current VXMessenger's version for about 5 seconds; For mobile devices, seven consecutive clicks will do the job.

Integration hints

For displaying the messenger on iOS devices, an integration tip is:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0" />

for platforms willing to integrate VXMessenger, but which were also developed with TypeScript, tsconfig.json file should contain the following settings:

{
    "compilerOptions": {
        "skipLibCheck": true
    }
}

The reason for it is strongly related to some of our dependencies which are having troubles with their exposed type definitions.

Getting Started

Details about integrating this product on the main platforms will come soon. However, for demo purposes, one could go through a series of steps detailed below:

Prerequisites

node (v16.17.1 and over)
yarn (node package manager)
Linux, MacOS or Windows OS

Autoload node version

.nvmrc config file contains the node for project version. To enable autoloading node version see Deeper Shell Integration

For Mac M1 you must first install node via nvm using terminal in x86_64 mode

Installing

Install yarn

npm install -g yarn

yarn set version stable

Install deps:

yarn install

Starting

Run for development.

On root directory:

yarn start:dev

or in dev project directory (packages/dev):

yarn start

Run for development with building vxmessenger

in vxmessenger project directory (packages/vxmessenger):

yarn start

in dev project directory (packages/dev):

yarn start:from-build

If there are memory heap errors, you will need to increase the amount of RAM for the node. Add to .bashrc or .zshrc:

export NODE_OPTIONS="--max-old-space-size=4096" #it will increase to 4gb

The application meant to play as a community platform is starting on localhost:3000

There we have some hardcoded links corresponding to some of our test models

Running tests

> yarn workspace @visit-x/vxmessenger test

Deployment

To be filled later

Simple React-Example

import React from 'react';
import './App.css';
import VXMessenger from '@visit-x/vxmessenger';

const props = {
    connection: {  // get from https://www.visit-x.net/interfaces/content/start.php
        clientId: '01391563823629579984519617794229',
        server: 'ds6.farm1.campoints.net'
    },
    language: 'en',
    initialVideoChatType: "LIVECHAT",
    features: {
        hasModelProfilePicture: false,
        hasModelMotto: false,
        hasModelName: false,
        hasCam2Cam: true,
        hasPrivateChat: false,
        hasExitPopups: false,
        hasContactNote: false,
        hasFavorite: false,
        hasFullscreen: false,
        hasCloseButton: false,
    },
    hooks: {
        onClickProfile: function () {
            console.log('Clicked on profile');
        },
        onExit: function (exitCode, exitMessage, chatFlags) {
            console.log('Chat exited', {exitCode: exitCode, exitMessage: exitMessage, chatFlags: ChatFlags});
        },
        onRecharge: function () {
            console.log('onRecharge');
        },
        onVideoChatAction: function (isVideoOpen, chatId) {
            console.log('onVideoChatAction:isVideoOpen', isVideoOpen);
            console.log('onVideoChatAction:chatId', chatId);
        },
        onAgeVerification: function () {
            console.log('onAgeVerification');
        },
        onModelStatusChange: function (isOnline) {
            console.log('Model status changed to ', isOnline);
        },
        onSupportedVideoChatTypes: function (videoChatTypes) {
            console.log(videoChatTypes);
        },
        onFailedChatConfig: function (error) {
            console.log('Supplied chat conf has failed with the following reason: ', error);
        }
    }
};

function App() {
    return (
        <div className="App">
            <VXMessenger {...props} />
        </div>
    );
}

export default App;